-
Notifications
You must be signed in to change notification settings - Fork 72
/
toggle_button_1.json
16 lines (16 loc) · 7.53 KB
/
toggle_button_1.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"alias": "toggle_button_1",
"name": "Toggle Button 1",
"descriptor": {
"type": "rpc",
"sizeX": 5,
"sizeY": 5,
"resources": [],
"templateHtml": "<div class=\"switch\">\r\n\t<input type=\"checkbox\" id=\"switch\" name=\"switch\" >\r\n\t<label></label>\r\n</div> ",
"templateCss": ".switch input {\r\n /* First, we make it as wide as the container */\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n /* Then, we put it on top of everything else */\r\n z-index: 100;\r\n /* Last, we make it invisible */\r\n opacity: 0;\r\n /* This one is just for ergonomy */\r\n cursor: pointer;\r\n}\r\n\r\n.switch {\r\n width: 100px;\r\n height: 100px;\r\n \r\n \r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n position: absolute;\r\n left: 50%;\r\n}\r\n\r\n.switch label {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n position: relative;\r\n border-radius: 50%;\r\n background: #eaeaea;\r\n box-shadow: \r\n 0 3px 5px rgba(0,0,0,0.25),\r\n inset 0 1px 0 rgba(255,255,255,0.3),\r\n inset 0 -5px 5px rgba(100,100,100,0.1),\r\n inset 0 5px 5px rgba(255,255,255,0.3);\r\n}\r\n\r\n.switch label:after {\r\n content: \"\";\r\n position: absolute;\r\n z-index: -1;\r\n top: -8%; \r\n right: -8%; \r\n bottom: -8%; \r\n left: -8%;\r\n border-radius: inherit;\r\n background: #ddd; /* Fallback */\r\n background: linear-gradient(#ccc, #fff);\r\n box-shadow: \r\n inset 0 2px 1px rgba(0,0,0,0.15),\r\n 0 2px 5px rgba(200,200,200,0.1);\r\n}\r\n\r\n.switch label:before {\r\n content: \"\";\r\n position: absolute;\r\n width: 20%;\r\n height: 20%; \r\n left: 40%;\r\n top: 40%;\r\n border-radius: inherit;\r\n background: #969696; /* Fallback */\r\n background: radial-gradient(40% 35%, #ccc, #969696 60%);\r\n box-shadow:\r\n inset 0 2px 4px 1px rgba(0,0,0,0.3),\r\n 0 1px 0 rgba(255,255,255,1),\r\n inset 0 1px 0 white;\r\n}\r\n\r\n.switch input:checked ~ label { /* Button */\r\n\tbackground: #e5e5e5; /* Fallback */\r\n background: linear-gradient(#dedede, #fdfdfd);\r\n}\r\n\r\n.switch input:checked ~ label:before { /* LED */\r\n background: #25d025; /* Fallback */\r\n background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);\r\n box-shadow:\r\n inset 0 3px 5px 1px rgba(0,0,0,0.1),\r\n 0 1px 0 rgba(255,255,255,0.4),\r\n 0 0 10px 2px rgba(0, 210, 0, 0.5);\r\n}",
"controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n var settings = self.ctx.settings;\n \n //Set Value Mathod\n var convertStatusChangeMethod = settings.convertStatusChangeMethod || \"return value;\";\n var convertStatus = new Function(\"value\", convertStatusChangeMethod);\n \n //Get Value Method\n var convertGetValueMethod = settings.convertStatusRequestMethod || \"return data ? true : false;\";\n \n var convertGetValue = new Function(\"data\", convertGetValueMethod);\n \n \n function requestStatus() {\n method = settings.statusRequestMethod;\n paramsBody = \"\";\n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, \n settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n let value = (convertGetValue(responseBody)); \n console.log (value);\n if (value == true)\n {\n\n $('#switch', self.ctx.$container).click();\n \n }\n else\n {\n \n\n \n }\n }\n );\n }\n \n \n \n\n requestStatus()\n \n \n $('#switch', self.ctx.$container).click(function(e){\n var method = settings.changeRequestMethod || 'setValue';\n let checked = $('#switch', self.ctx.$container)[0].checked;\n console.log(checked);\n var paramsBody = convertStatus(checked);\n console.log(method);\n console.log(paramsBody);\n \n self.ctx.controlApi.sendOneWayCommand(method, \n paramsBody, settings.requestTimeout)\n /*.subscribe(\n function success(responseBody) {\n \n }\n );*/\n});\n self.onResize();\n \n}\n\n\n\nself.onResize = function() {\n if (self.ctx.width > self.ctx.height)\n $('.switch', self.ctx.$container)[0].style.zoom = self.ctx.height / 150;\n else\n $('.switch', self.ctx.$container)[0].style.zoom = self.ctx.width / 150;\n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"requestTimeout\": {\n \"title\": \"RPC request timeout\",\n \"type\": \"number\",\n \"default\": 500\n },\n \"changeRequestMethod\": {\n \"title\": \"RPC set value method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"statusRequestMethod\": {\n \"title\": \"RPC get value method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n },\n \"convertStatusChangeMethod\": {\n \"title\": \"Convert value function, f(value), returns payload used by RPC set value method\",\n \"type\": \"string\",\n \"default\": \"return value;\"\n } ,\n \"convertStatusRequestMethod\": {\n \"title\": \"Parse value function, f(data), returns boolean\",\n \"type\": \"string\",\n \"default\": \"return data ? true : false;\"\n } \n },\n \"required\": [ \n \"requestTimeout\",\n \"changeRequestMethod\",\n \"statusRequestMethod\",\n \"convertStatusChangeMethod\",\n \"convertStatusRequestMethod\"\n ]\n },\n \"form\": [\n \"statusRequestMethod\",\n \"changeRequestMethod\",\n {\n \"key\": \"convertStatusRequestMethod\",\n \"type\": \"javascript\"\n },\n {\n \"key\": \"convertStatusChangeMethod\",\n \"type\": \"javascript\"\n },\n \"requestTimeout\"\n ]\n}",
"dataKeySettingsSchema": "{}\n",
"defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"parseGpioStatusFunction\":\"return body[pin] === true;\",\"gpioStatusChangeRequest\":{\"method\":\"setGpioStatus\",\"paramsBody\":\"{\\n \\\"pin\\\": \\\"{$pin}\\\",\\n \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"},\"requestTimeout\":500,\"switchPanelBackgroundColor\":\"#b71c1c\",\"gpioStatusRequest\":{\"method\":\"getGpioStatus\",\"paramsBody\":\"{}\"},\"gpioList\":[{\"pin\":1,\"label\":\"GPIO 1\",\"row\":0,\"col\":0,\"_uniqueKey\":0},{\"pin\":2,\"label\":\"GPIO 2\",\"row\":0,\"col\":1,\"_uniqueKey\":1},{\"pin\":3,\"label\":\"GPIO 3\",\"row\":1,\"col\":0,\"_uniqueKey\":2}]},\"title\":\"Toggle Button 1\"}"
}
}