[beam] Segmented Display Component

beam/src/components/SegmentedDisplay.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="segmented-display" :style="{ background: getColor(displayColor) }">
+		<h1 class="segmented-display-output" :style="{ color: getColor(textColor) }">{{ getOutput }}</h1>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, computed } from 'vue'
+
+const {
+	displayInput = 120.2568,
+	decimalPlaces = 2,
+	displayColor = 'gray',
+	textColor = 'white',
+} = defineProps<{
+	displayInput?: number
+	decimalPlaces?: number
+	displayColor?: Color
+	textColor?: Color
+}>()
+
+const getOutput = computed(() => {
+	if (displayInput.length == 0) return Number(0).toFixed(decimalPlaces)
+	return displayInput.toFixed(decimalPlaces)
+})
+
+const getColor = color => {
+	return color.substr(0, 2) == '--' ? `var(${color})` : color
+}
+</script>
+
+<style scoped>
+.segmented-display {
+	width: 100%;
+	padding: 1rem;
+	box-sizing: border-box;
+	display: flex;
+	background: var(--sc-segmented-display-background);
+	align-items: center;
+	justify-content: flex-end;
+}
+.segmented-display-output {
+	text-align: right;
+	font-family: Segment7, Arimo, sans-serif;
+	font-weight: normal;
+	font-size: var(--sc-segemented-display-font-size);
+	padding: 0;
+	margin: 0;
+	letter-spacing: 0.3rem;
+	margin-bottom: -0.7rem;
+	color: var(--sc-segmented-display-color);
+}
+</style>

beam/src/index.ts

@@ -20,6 +20,7 @@ import ListItem from './components/ListItem.vue'
 import ListView from './components/ListView.vue'
 import Navbar from './components/Navbar.vue'
 import ScanInput from './components/ScanInput.vue'
+import SegmentedDisplay from './components/SegmentedDisplay.vue'
 import SplitColumn from './components/SplitColumn.vue'
 import ToggleArrow from './components/ToggleArrow.vue'
 import { useMqttStream } from './composables/mqtt'
@@ -52,6 +53,7 @@ function install(app: App /* options */) {
 	app.component('ListView', ListView)
 	app.component('Navbar', Navbar)
 	app.component('ScanInput', ScanInput)
+	app.component('SegmentedDisplay', SegmentedDisplay)
 	app.component('SplitColumn', SplitColumn)
 	app.component('ToggleArrow', ToggleArrow)
 }
@@ -77,6 +79,7 @@ export {
 	ListView,
 	Navbar,
 	ScanInput,
+	SegmentedDisplay,
 	SplitColumn,
 	ToggleArrow,
 	install,

beam/src/types/index.ts

@@ -20,6 +20,13 @@ export type ListViewItem = {
 	route?: string
 }
 
+type RGB = `rgb(${number}, ${number}, ${number})`
+type HSL = `hsl(${number}, ${number}%, ${number}%)`
+type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
+type HEX = `#${string}`
+
+export type Color = RGB | RGBA | HEX | HSL | HSLA | string
 /**
  * MQTT stream options
  * @public

beam/themes/Segment7Standard.otf:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://fontlibrary.org/en/font/segment7
+HostUrl=https://fontlibrary.org/assets/downloads/segment7/4cc82137fc130708919bf201c0dc9aae/segment7.zip

beam/themes/beam.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
 
+@font-face {
+	font-family: 'Segment7';
+	src: url('./Segment7Standard.otf');
+}
 /* Global Beam Styles */
 
 :root {
@@ -22,6 +26,10 @@
 	--sc-list-margin: 0.625rem;
 
 	--sc-cell-changed-color: #d8edff;
+
+	--sc-segemented-display-font-size: 4.5rem;
+	--sc-segmented-display-background: #404040;
+	--sc-segmented-display-color: #b0b0b0;
 }
 
 /* body {

common/changes/@stonecrop/beam/feat-segmented-display_2024-12-20-17-29.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "added SegementedDisplay component",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}

common/reviews/api/beam.api.md

@@ -27,6 +27,7 @@ import ListView from './components/ListView.vue';
 import Navbar from './components/Navbar.vue';
 import { Ref } from 'vue';
 import ScanInput from './components/ScanInput.vue';
+import SegmentedDisplay from './components/SegmentedDisplay.vue';
 import SplitColumn from './components/SplitColumn.vue';
 import ToggleArrow from './components/ToggleArrow.vue';
 
@@ -96,6 +97,8 @@ export { Navbar }
 
 export { ScanInput }
 
+export { SegmentedDisplay }
+
 export { SplitColumn }
 
 export { ToggleArrow }

examples/beam/components.story.vue

@@ -68,6 +68,19 @@
 		<Variant title="progress block">
 			<BeamProgress :complete="workOrder.complete" />
 		</Variant>
+		<Variant title="Segmented Display">
+			<template #controls>
+				<HstText v-model="displayOptions.displayColor" title="Display Background Color" />
+				<HstText v-model="displayOptions.textColor" title="Display Text Color" />
+				<HstNumber v-model="displayOptions.displayInput" title="Display Number Input" />
+				<HstNumber v-model="displayOptions.decimalPlaces" :step="1" title="Decimal Places" />
+			</template>
+			<SegmentedDisplay
+				:display-color="displayOptions.displayColor"
+				:text-color="displayOptions.textColor"
+				:display-input="displayOptions.displayInput"
+				:decimal-places="displayOptions.decimalPlaces"></SegmentedDisplay>
+		</Variant>
 	</Story>
 </template>
 
@@ -77,4 +90,10 @@ import { reactive } from 'vue'
 const workOrder = reactive({
 	complete: false,
 })
+const displayOptions = reactive({
+	displayColor: '--sc-segmented-display-background',
+	textColor: '--sc-segmented-display-color',
+	displayInput: 0,
+	decimalPlaces: 2,
+})
 </script>