feat: initial commit

src/App.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { CircleConfig } from 'konva/lib/shapes/Circle'
+import type { RectConfig } from 'konva/lib/shapes/Rect'
+import type { StageConfig } from 'konva/lib/Stage'
+import { reactive } from 'vue'
+import { Circle, Rect } from 'vue-konva'
+import TemperatureBar from './components/temperature-bar.vue'
+
+const screen = reactive({
+  width: 800,
+  heigh: 600,
+})
+
+const configStage: StageConfig = {
+  width: screen.width,
+  height: screen.heigh,
+}
+
+const configCircle: CircleConfig = {
+  x: 100,
+  y: 100,
+  radius: 70,
+  fill: 'red',
+  stroke: 'black',
+  strokeWidth: 4,
+}
+
+const configBackground: RectConfig = {
+  width: screen.width,
+  height: screen.heigh,
+  fill: 'white',
+  stroke: 'black',
+  strokeWidth: 1,
+}
+</script>
+
+<template>
+  <v-stage :config="configStage">
+    <v-layer>
+      <Rect :config="configBackground" />
+      <Circle :config="configCircle" />
+    </v-layer>
+    <TemperatureBar :x="800 - 10 - 50" :y="10" :width="50" :height="600 - 20" />
+    <TemperatureBar :x="800 - 20 - 100" :y="10" :width="50" :height="600 - 20" />
+  </v-stage>
+</template>
+
+<style>
+body {
+  background-color: #eee;
+}
+</style>

src/components/temperature-bar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { RectConfig } from 'konva/lib/shapes/Rect'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { Layer, Rect } from 'vue-konva'
+
+const value = ref(50)
+const intervalId = ref<number | null>(null)
+
+const props = defineProps<{
+  x: number
+  y: number
+  width: number
+  height: number
+}>()
+
+const configBackground = computed(() => {
+  return {
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height,
+    fill: '#eee',
+    stroke: 'black',
+    strokeWidth: 1,
+    cornerRadius: 8,
+  } satisfies RectConfig
+})
+
+const configForeground = computed(() => {
+  const height = props.height * (value.value / 100.0)
+  let color = '#0f0'
+  if (value.value > 90) {
+    color = '#f00'
+  } else if (value.value > 75) {
+    color = '#ff0'
+  }
+
+  return {
+    x: props.x,
+    y: props.y + props.height - height,
+    width: props.width,
+    height,
+    fill: color,
+    cornerRadius: 8,
+  } satisfies RectConfig
+})
+
+function setValue(v: number) {
+  value.value = Math.min(100, Math.max(0, v))
+}
+
+onMounted(() => {
+  intervalId.value = setInterval(() => {
+    const movement = Math.random() * 10 - 5
+    setValue(value.value + movement)
+  }, 100)
+})
+
+onUnmounted(() => {
+  const id = intervalId.value
+  if (id) {
+    clearInterval(id)
+  }
+})
+</script>
+
+<template>
+  <Layer>
+    <Rect :config="configBackground" />
+    <Rect :config="configForeground" />
+  </Layer>
+</template>

src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import VueKonva from 'vue-konva'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(VueKonva)
+app.mount('#app')