read webapi

read webapi

[{"id":"2e68db49.c95d34","type":"ui_template","z":"14f37c28.1f3564","group":"cf2fe171.40162","name":"Bubble b3","order":3,"width":"2","height":"2","format":"<div class='bLable'>State 3</div>\n<div id='b1' ng-class=\"{0:'bubble off',1:'bubble on',2:'bubble tri',3:'bubble quad'}[(msg.payload || 0)]\">\n     <i class='fa fa-lightbulb-o fa-2x off'></i>\n</div>\n<style>\n.bc {float: left; padding::0; margin:0 9px 0 0 !important;} \n.bLable {padding-left: 6px;}\n.bubble {float: left; width: 3.5em; height: 3.5em; border-radius: 50%; border: 7px solid #D21E1E; text-align:center; display:table-cell;  outline: none !important; outline: 0 !important;}\n.off  {border-color: #D21E1E;}\n.on   {border-color: #5E9C31;}\n.tri  {border-color: #D08C03;}\n.quad {border-color: #60A6E8;}\ndiv i {padding-top: 12px;}\ndiv .blank i {opacity: 0.0;}\ndiv .off i  {color: #D21E1E;}\ndiv .on i   {color: #5E9C31;}\ndiv .tri i  {color: #D08C03;}\ndiv .quad i {color: #60A6E8;}\n</style>","storeOutMessages":true,"fwdInMessages":false,"x":379.4258117675781,"y":666.24755859375,"wires":[[]]},{"id":"cac093d5.3a665","type":"ui_slider","z":"14f37c28.1f3564","name":"","label":"State 3","group":"cf2fe171.40162","order":6,"width":"4","height":"1","passthru":false,"topic":"","min":0,"max":"3","step":1,"x":201.84078979492188,"y":665.3042602539062,"wires":[["2e68db49.c95d34"]]},{"id":"e322109b.1e4fe","type":"ui_template","z":"14f37c28.1f3564","group":"cf2fe171.40162","name":"Bubble b2","order":2,"width":"2","height":"2","format":"<div class='bLable'>State 2</div>\n<div id='b2' ng-class=\"{0:'bubble off',1:'bubble on',2:'bubble tri',3:'bubble Quad'}[(msg.payload || 0)]\" ng-click=\"sendClick($event)\"></div>\n\n<style>\n.bc {float: left; padding::0; margin:0 9px 0 0 !important;} \n.bLable {padding-left: 6px;}\n.bubble {float: left; width: 3.5em; height: 3.5em; border-radius: 50%; border: 7px solid #D21E1E; text-align:center; display:table-cell;  outline: none !important; outline: 0 !important;}\n.off  {border-color: #D21E1E;}\n.on   {border-color: #5E9C31;}\n.tri  {border-color: #D08C03;}\n.quad {border-color: #60A6E8;}\n</style>\n<script>\nvar sc = scope;\nvar sendClick = function(event){\n   \n    var thisRing = event.currentTarget.attributes.class.value;\n    console.log('class: '+thisRing);\n    if(thisRing === \"bubble off\"){\n        event.currentTarget.attributes.class.value = \"bubble on\";\n        state = 1;\n    } else {\n        event.currentTarget.attributes.class.value = \"bubble off\";\n        state = 0\n    }\n    var uiid = JSON.stringify(event.currentTarget.attributes.id.value);\n    sc.send({payload:state,topic:uiid});\n}\nscope.sendClick = sendClick;\n</script>","storeOutMessages":true,"fwdInMessages":false,"x":381.42572021484375,"y":619.9078979492188,"wires":[["6411180a.b681d8","d7519c84.77c8c"]]},{"id":"d7519c84.77c8c","type":"ui_slider","z":"14f37c28.1f3564","name":"","label":"State 2","group":"cf2fe171.40162","order":5,"width":"4","height":"1","passthru":true,"topic":"","min":0,"max":"1","step":1,"x":202.8406982421875,"y":620.9645385742188,"wires":[["e322109b.1e4fe"]]},{"id":"24929f61.4e267","type":"ui_template","z":"14f37c28.1f3564","group":"cf2fe171.40162","name":"Bubble b1","order":1,"width":"2","height":"2","format":"<div class='bLable'>State 1</div>\n<div ng-class=\"{0:'bubble off',1:'bubble on',2:'bubble tri',3:'bubble quad'}[(msg.payload || 0)]\"></div>\n\n<style>\n.bc {float: left; padding::0; margin:0 9px 0 0 !important;} \n.bLable {padding-left: 6px;}\n.bubble {float: left; width: 3.5em; height: 3.5em; border-radius: 50%; border: 7px solid #D21E1E; text-align:center; display:table-cell;  outline: none !important; outline: 0 !important;}\n.off  {border-color: #D21E1E;}\n.on   {border-color: #5E9C31;}\n.tri  {border-color: #D08C03;}\n.quad {border-color: #60A6E8;}\n</style>","storeOutMessages":true,"fwdInMessages":false,"x":379.4256896972656,"y":575.9079895019531,"wires":[[]]},{"id":"886220b5.bb34e","type":"ui_slider","z":"14f37c28.1f3564","name":"","label":"State 1","group":"cf2fe171.40162","order":4,"width":"4","height":"1","passthru":true,"topic":"","min":0,"max":"3","step":1,"x":198.84066772460938,"y":575.9645538330078,"wires":[["24929f61.4e267"]]},{"id":"6411180a.b681d8","type":"debug","z":"14f37c28.1f3564","name":"","active":true,"console":"false","complete":"false","x":554.8407897949219,"y":620.5118408203125,"wires":[]},{"id":"cf2fe171.40162","type":"ui_group","z":"","name":"Multi Bubble","tab":"8edb4c27.94fea","order":1,"disp":true,"width":"6"},{"id":"8edb4c27.94fea","type":"ui_tab","z":"","name":"Bubbles","icon":"dashboard"}]
KarthikMTech

Flow Info

created 3 months, 1 week ago

Node Types

Core
  • debug (x1)
Other
  • ui_group (x1)
  • ui_slider (x3)
  • ui_tab (x1)
  • ui_template (x3)

Tags

  • webapi
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option