cssing and websocketing

chameleon-client/src/components/InputTab.vue

@@ -4,7 +4,7 @@
         <chslider class="spacing" title="exposure" v-model="expval" v-on:input="onChange(expval)"></chslider>
         <chslider class="spacing" title="Brightness"></chslider>
         <chselect class="spacing" title="Orientation" placeholdert=""  :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
-        <chselect class="spacing" title="Resolution" placeholdert="" :list="['idk']"></chselect>
+        <chselect class="spacing" title="Resolution" :list="['idk']"></chselect>
         </div>
 
 </template>

chameleon-client/src/components/ThresholdTab.vue

@@ -1,20 +1,27 @@
 <template>
-    <div id="3D">
-        <Slider v-for="slider in sliders" v-bind:key="slider.id" v-model="slider.value"></Slider>
+    <div id="Threshold">
+        <chrange title="Hue" :value="[0,10]"></chrange>
+        <chrange title="Saturation" :value="[0,10]"></chrange>
+        <chrange title="Value" :value="[0,10]"></chrange>
     </div>
 </template>
     
 <script> 
+import chrange from './ch-range.vue'
+import chselect from './ch-select.vue'
     export default {
-        name: '3D',
+        name: 'Threshold',
         data () {
             return {
-                 sliders: [
-                    { id: 'lightning', value: 25 }
-                ]
             }
+        },
+        components:{
+            chrange,
+            chselect
         }
+
     }
+
 </script>
 
 <style scoped>

chameleon-client/src/components/ch-range.vue

@@ -0,0 +1,45 @@
+
+<template>
+            <row type="flex" justify="start" align="middle" :gutter="1" >
+                <Col>
+                    <h4 style="width:100%">{{title}}</h4>
+                </Col>
+                <col >
+                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[0]" size="small"></InputNumber>
+                </col>
+                <Col span="14">
+                    <Slider range style="margin-left:10px;" v-model="value" @on-input="handleInput"></Slider>
+                </col>
+                <col >
+                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value[1]" size="small"></InputNumber>
+                </col>
+        </row>
+</template>
+
+<script>
+    export default {
+        name: 'ch-slider',
+        props:['title','value'],
+        data() {
+            return {
+                content:this.value
+            }
+        },
+        methods: {
+            handleInput() {
+                this.$emit('input',{[this.title]:this.value});
+            }
+        }
+    }
+</script>
+
+<style >
+h4 {
+     color: #e6ebf1;
+ }
+ /* .ivu-input-number-input{
+     background-color: #2c3e50 !important;
+     color: #fff !important;
+ } */
+</style>
+

chameleon-client/src/components/ch-select.vue

@@ -4,7 +4,7 @@
                     <h4 style="width:100% ; margin-right:10px;">{{title}}</h4>
                 </Col>
                 <col>
-                    <i-select v-model="value" size="small" style="width:40%" v-bind:placeholder="placeholdert" @on-change="handleInput">
+                    <i-select v-model="value" size="small" style="width:40%" @on-change="handleInput">
                         <i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
                     </i-select>
                 </col>
@@ -16,7 +16,6 @@
         name: 'ch-select',
         props:[
             'title',
-            'placeholdert',
             'list'
         ],
         data() {
@@ -36,11 +35,11 @@
 h4 {
      color: #e6ebf1;
  }
- .ivu-select-selection{
+ /* .ivu-select-selection{
      background-color: #2c3e50 !important;
- }
- .ivu-select-selected-value{
+ } */
+ /* .ivu-select-selected-value{
      color: #fff !important;
- }
+ } */
 
 </style>

chameleon-client/src/components/ch-slider.vue

@@ -34,9 +34,9 @@
 h4 {
      color: #e6ebf1;
  }
- .ivu-input-number-input{
+ /* .ivu-input-number-input{
      background-color: #2c3e50 !important;
      color: #fff !important;
- }
+ } */
 </style>