Hello everyone,
I'm currently experimentin g with DB2 & VUE designs to generate new UI components for my NR environment.
This is my aproach for a Light Switch which is
- triggered by ON/OFF command at any time
- triggered by motion during specific periods (DAY,NIGHT,TWILIGHT,etc)
- the light will stay ON for a given duration (any motion will reset the timer)
- the brightness can be adjusted
Above pic is showing a custom state, unfortunattly all custom states are returning to default after a page refresh (f5 in browser)
How can the reset to default be avoided .. I have this issue with alll VUE components using the ui-template.
See code here
[
{
"id": "6a974f23938f8edf",
"type": "inject",
"z": "b9b23c2bc52ffcbb",
"name": "on",
"props": [
{
"p": "payload.slider1",
"v": "120",
"vt": "str"
},
{
"p": "payload.slider2",
"v": "85",
"vt": "str"
},
{
"p": "payload.slider3",
"v": "90",
"vt": "str"
},
{
"p": "payload.mode",
"v": "DARK",
"vt": "str"
},
{
"p": "payload.state",
"v": "true",
"vt": "bool"
},
{
"p": "payload.pos",
"v": "34",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"x": 770,
"y": 800,
"wires": [
[
"363a684a0601c33f"
]
]
},
{
"id": "363a684a0601c33f",
"type": "ui-template",
"z": "b9b23c2bc52ffcbb",
"group": "2382a9605dfed38a",
"name": "new light",
"order": 3,
"width": "0",
"height": "0",
"head": "",
"format": "<template>\n <v-card class=\"mx-auto\" width=\"100%\" color=\"grey\">\n <template v-slot:title>\n <v-card-title class=\"text-white font-weight-bold\" v-text=\"mylabel\"></v-card-title>\n <v-card-subtitle class=\"text-white font-weight-bold\" v-text=\"mysub\"></v-card-subtitle>\n </template>\n\n <template v-slot:prepend>\n <v-btn :icon=\"myicon\" :color=\"mystate_color\" @click=\"myupdate()\"></v-btn>\n </template>\n\n <template v-slot:append>\n <v-btn-toggle v-model=\"mymode\" color=\"blue\" variant=\"elevated\" mandatory divided >\n <v-btn icon=\"mdi-lightbulb-off-outline\" value=\"OFF\"></v-btn>\n <v-btn icon=\"mdi-weather-sunny\" value=\"DAY\"></v-btn>\n <v-btn icon=\"mdi-weather-sunset-down\" value=\"TWILIGHT\"></v-btn>\n <v-btn icon=\"mdi-weather-night\" value=\"DARK\"></v-btn>\n <v-btn icon=\"mdi-sleep\" value=\"SLEEP\"></v-btn>\n <v-btn text=\"LUX\" value=\"LUX\"></v-btn>\n </v-btn-toggle>\n </template>\n\n <v-progress-linear class=\"ma-2\" color=\"primary\" height=\"20\" :model-value=\"slider\" bg-opacity=\"0.6\" rounded>\n <template v-slot:default=\"{ value }\">\n <strong>{{mystate}} - {{mypos}}min / {{myduration}}min</strong>\n </template>\n </v-progress-linear>\n\n <v-slider class=\"my-0\" v-model=\"slider1\" density=\"compact\" :max=\"mymax1\" :step=\"mystep1\" :label=\"mylabel1\"\n color=\"purple\" :prepend-icon=\"myicon\" hide-details>\n <template v-slot:append>\n <v-text-field class=\"my-0\" v-model=\"slider1\" density=\"compact\" style=\"width: 80px\" type=\"number\"\n variant=\"filled\" hide-details>\n </v-text-field>\n </template>\n </v-slider>\n\n <v-slider class=\"my-0\" v-model=\"slider2\" density=\"compact\" :max=\"mymax2\" :step=\"mystep2\" :label=\"mylabel2\"\n color=\"purple\" :prepend-icon=\"myicon\" hide-details>\n <template v-slot:append>\n <v-text-field class=\"my-0\" v-model=\"slider2\" density=\"compact\" style=\"width: 80px\" type=\"number\"\n variant=\"filled\" hide-details>\n </v-text-field>\n </template>\n </v-slider>\n\n <v-slider class=\"my-0\" v-model=\"slider3\" density=\"compact\" :max=\"mymax3\" :step=\"mystep3\" :label=\"mylabel3\"\n color=\"purple\" :prepend-icon=\"myicon\" hide-details>\n <template v-slot:append>\n <v-text-field class=\"my-0\" v-model=\"slider3\" density=\"compact\" style=\"width: 80px\" type=\"number\"\n variant=\"filled\" hide-details>\n </v-text-field>\n </template>\n </v-slider>\n \n </v-card>\n</template>\n\n<script>\n export default {\n data: () => ({\n myicon: 'mdi-lightbulb-on',\n mylabel: 'Bedroom Light',\n mylabel1: 'Timer [min]',\n mylabel2: 'Brightness [%]',\n mylabel3: 'min Lux {lux]',\n slider: 0,\n slider1: 0,\n slider2: 0,\n slider3: 0,\n\n mymax: 180,\n mymax1: 180,\n mymax2: 100,\n mymax3: 1000,\n\n mystep: 10,\n mystep1: 10,\n mystep2: 10,\n mystep3: 10,\n\n mysub: 'motion mode',\n mypos: '5',\n myprogress: '70',\n mystate: true,\n mystate_color: 'blue',\n myduration: '20',\n\n myunit: 'mm',\n mymode: 'OFF',\n mydisabled: false,\n toggle: null,\n old_msg: null,\n }),\n\n watch: {\n // watch for any changes of \"count\"\n \n msg: function () \n {\n if (this.msg.payload.slider1 != undefined) this.slider1=this.msg.payload.slider1;\n if (this.msg.payload.slider2 != undefined) this.slider2=this.msg.payload.slider2;\n if (this.msg.payload.slider3 != undefined) this.slider3=this.msg.payload.slider3;\n \n if (this.msg.payload.mode != undefined) this.mymode=this.msg.payload.mode;\n if (this.msg.payload.state != undefined) this.mystate=this.msg.payload.state;\n\n if (this.msg.payload.pos != undefined) this.mypos=this.msg.payload.pos;\n\n\n //this.send(this.msg);\n\n },\n mystate: function () {\n if (this.mystate ==true) \n {\n this.mystate_color=\"blue\";\n }\n else\n {\n this.mystate_color=\"white\";\n }\n\n this.msg.payload=this.mystate;\n this.msg.topic=\"CMD\";\n this.send(this.msg)\n },\n\n mymode: function () {\n this.msg.payload=this.mymode;\n this.msg.topic=\"MODE\";\n this.send(this.msg)\n },\n\n slider1: function () {\n this.myduration=this.slider1;\n this.slider=this.mypos/this.myduration*100;\n\n this.msg.payload=this.slider1;\n this.msg.topic=\"TIMER\";\n this.send(this.msg)\n },\n\n slider2: function () {\n this.msg.payload=this.slider2;\n this.msg.topic=\"LEVEL\";\n this.send(this.msg)\n },\n\n slider3: function () {\n this.msg.payload=this.slider3;\n this.msg.topic=\"minLUX\";\n send.this(this.msg)\n },\n\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },\n methods: {\n // expose a method to our <template> and Vue Application\n myupdate()\n { \n if (this.mystate ==true)\n {\n this.mystate=false;\n }\n else\n {\n this.mystate=true;\n }\n }\n },\n mounted() {\n // code here when the component is first loaded\n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }\n \n }\n</script>",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 920,
"y": 820,
"wires": [
[
"5ce8f56d6f1df0c7"
]
]
},
{
"id": "62cdb1c94ddfcfe5",
"type": "inject",
"z": "b9b23c2bc52ffcbb",
"name": "off",
"props": [
{
"p": "payload.state",
"v": "false",
"vt": "bool"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 770,
"y": 840,
"wires": [
[
"363a684a0601c33f"
]
]
},
{
"id": "5ce8f56d6f1df0c7",
"type": "debug",
"z": "b9b23c2bc52ffcbb",
"name": "light out",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": true,
"complete": "true",
"targetType": "full",
"statusVal": "payload",
"statusType": "auto",
"x": 1060,
"y": 820,
"wires": []
},
{
"id": "2382a9605dfed38a",
"type": "ui-group",
"name": "Testing",
"page": "d03f698ab46f8b85",
"width": "6",
"height": "1",
"order": 2,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "d03f698ab46f8b85",
"type": "ui-page",
"name": "Overview",
"ui": "a0ddd2d7af1545fc",
"path": "/Main",
"icon": "home",
"layout": "grid",
"theme": "f286855bd0ef7af5",
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "a0ddd2d7af1545fc",
"type": "ui-base",
"name": "DB2",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default"
},
{
"id": "f286855bd0ef7af5",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#404040",
"primary": "#0094ce",
"bgPage": "#000000",
"groupBg": "#c3c1c1",
"groupOutline": "#f8baba"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Thank you for any help (sorry I posted a similar thread before)
thx for any help
)
