Rename to PhotonVision

photon-client/src/components/common/cv-icon.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <v-tooltip
+      :right="right"
+      :bottom="!right"
+      nudge-right="10"
+    >
+      <template v-slot:activator="{ on }">
+        <v-icon
+          :class="hoverClass"
+          :color="color"
+          @click="handleClick"
+          v-on="on"
+        >
+          {{ text }}
+        </v-icon>
+      </template>
+      <span>{{ tooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'Icon',
+        props: ['color', 'tooltip', 'text', 'right', 'hover'],
+        data() {
+            return {}
+        },
+        computed: {
+            hoverClass: {
+                get() {
+                    if (this.hover !== undefined) {
+                        return "hover";
+                    }
+                    return "";
+                }
+            }
+        },
+        methods: {
+            handleClick() {
+                this.$emit('click');
+            }
+        },
+
+    }
+</script>
+
+<style scoped>
+    .hover:hover {
+        color: white !important;
+    }
+</style>

photon-client/src/components/common/cv-image.vue

@@ -0,0 +1,33 @@
+<template>
+  <img
+    id="CameraStream"
+    :style="styleObject"
+    :src="address"
+    crossorigin="Anonymous"
+    alt=""
+    @click="e => $emit('click', e)"
+  >
+</template>
+
+<script>
+    export default {
+        name: "CvImage",
+        props: ['address', 'scale'],
+        data: () => {
+            return {}
+        },
+        computed: {
+            styleObject: {
+                get() {
+                    return {
+                        width: `${this.scale}%`,
+                        height: `${this.scale}%`,
+                        display: 'block',
+                        margin: 'auto'
+                    }
+                }
+
+            }
+        }
+    }
+</script>

photon-client/src/components/common/cv-input.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="3">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col :cols="9">
+        <v-text-field
+          v-model="localValue"
+          dark
+          dense
+          :disabled="disabled"
+          :error-messages="errorMessage"
+          @keydown="handleKeyboard"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+s
+<script>
+    export default {
+        name: 'Input',
+        props: ['name', 'value', 'disabled', 'errorMessage'],
+        data() {
+            return {}
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value);
+                }
+            }
+        },
+        methods: {
+            handleKeyboard(event) {
+                if (event.key === "Enter") {
+                    this.$emit("Enter");
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>

photon-client/src/components/common/cv-number-input.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="2">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col>
+        <v-text-field
+          v-model="localValue"
+          dark
+          class="mt-0 pt-0"
+          hide-details
+          single-line
+          type="number"
+          style="width: 70px"
+          :step="step"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'NumberInput',
+        props: ['name', 'value', 'step'],
+        data() {
+            return {}
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', parseFloat(value));
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>

photon-client/src/components/common/cv-radio.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <v-radio-group
+      v-model="localValue"
+      row
+      dark
+      :mandatory="true"
+    >
+      <v-radio
+        v-for="(name,index) in list"
+        :key="index"
+        color="#4baf62"
+        :label="name"
+        :value="index"
+      />
+    </v-radio-group>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'Radio',
+        props: ['value', 'list'],
+        data() {
+            return {}
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value);
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>

photon-client/src/components/common/cv-range-slider.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="2">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col :cols="10">
+        <v-range-slider
+          :value="localValue"
+          :max="max"
+          :min="min"
+          hide-details
+          class="align-center"
+          dark
+          color="#4baf62"
+          :step="step"
+          @input="handleInput"
+          @mousedown="$emit('rollback', localValue)"
+        >
+          <template v-slot:prepend>
+            <v-text-field
+              dark
+              :value="localValue[0]"
+              :max="max"
+              :min="min"
+              class="mt-0 pt-0"
+              hide-details
+              single-line
+              type="number"
+              style="width: 50px"
+              :step="step"
+              @input="handleChange"
+              @focus="prependFocused = true"
+              @blur="prependFocused = false"
+            />
+          </template>
+
+          <template v-slot:append>
+            <v-text-field
+              dark
+              :value="localValue[1]"
+              :max="max"
+              :min="min"
+              class="mt-0 pt-0"
+              hide-details
+              single-line
+              type="number"
+              style="width: 50px"
+              :step="step"
+              @input="handleChange"
+              @focus="appendFocused = true"
+              @blur="appendFocused = false"
+            />
+          </template>
+        </v-range-slider>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'RangeSlider',
+        props: ['name', 'min', 'max', 'value', 'step'],
+        data() {
+            return {
+                prependFocused: false,
+                appendFocused: false
+
+            }
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value)
+                }
+            }
+        },
+        methods: {
+            handleChange(val) {
+                let i = 0;
+                if (this.prependFocused === false && this.appendFocused === true) {
+                    i = 1;
+                }
+                if (this.prependFocused || this.appendFocused) {
+                    this.$set(this.localValue, i, val);
+                    this.$emit('rollback', this.localValue)
+                }
+            },
+            handleInput(val) {
+                if (!this.prependFocused || !this.appendFocused) {
+                    this.localValue = val;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>

photon-client/src/components/common/cv-select.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="3">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col :cols="9">
+        <v-select
+          v-model="localValue"
+          :items="indexList"
+          item-text="name"
+          item-value="index"
+          dark
+          color="#4baf62"
+          item-color="green"
+          :disabled="disabled"
+          @change="$emit('rollback', localValue)"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'Select',
+        props: ['list', 'name', 'value', 'disabled'],
+        data() {
+            return {}
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value)
+                }
+            },
+            indexList() {
+                let list = [];
+                for (let i = 0; i < this.list.length; i++) {
+                    list.push({
+                        name: this.list[i],
+                        index: i
+                    });
+                }
+                return list;
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

photon-client/src/components/common/cv-slider.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="2">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col :cols="10">
+        <v-slider
+          :value="localValue"
+          dark
+          class="align-center"
+          :max="max"
+          :min="min"
+          hide-details
+          color="#4baf62"
+          :step="step"
+          @start="isClicked = true"
+          @end="isClicked = false"
+          @change="handleclick"
+          @input="handleInput"
+          @mousedown="$emit('rollback', localValue)"
+        >
+          <template v-slot:append>
+            <v-text-field
+              dark
+              :max="max"
+              :min="min"
+              :value="localValue"
+              class="mt-0 pt-0"
+              hide-details
+              single-line
+              type="number"
+              style="width: 50px"
+              :step="step"
+              @input="handleChange"
+              @focus="isFocused = true"
+              @blur="isFocused = false"
+            />
+          </template>
+        </v-slider>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'Slider',
+        props: ['min', 'max', 'name', 'value', 'step'],
+        data() {
+            return {
+                isFocused: false,
+                isClicked: false
+            }
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value)
+                }
+            }
+        },
+        methods: {
+            handleChange(val) {
+                if (this.isFocused) {
+                    this.localValue = parseFloat(val);
+                    this.$emit('rollback', this.localValue)
+                }
+            },
+            handleInput(val) {
+                if (!this.isFocused && this.isClicked) {
+                    this.localValue = val;
+                }
+            },
+            handleclick(val) {
+                if (!this.isFocused) {
+                    this.localValue = val;
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>

photon-client/src/components/common/cv-switch.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <v-row
+      dense
+      align="center"
+    >
+      <v-col :cols="2">
+        <span>{{ name }}</span>
+      </v-col>
+      <v-col>
+        <v-switch
+          v-model="localValue"
+          dark
+          :disabled="disabled"
+          color="#4baf62"
+          @change="$emit('rollback', localValue)"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'CVSwitch',
+        props: ['name', 'value', 'disabled'],
+        data() {
+            return {}
+        },
+        computed: {
+            localValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value)
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="" scoped>
+
+</style>