-
Notifications
You must be signed in to change notification settings - Fork 72
/
switch3.json
16 lines (16 loc) · 11.9 KB
/
switch3.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"alias": "switch3",
"name": "switch3",
"descriptor": {
"type": "rpc",
"sizeX": 7,
"sizeY": 4.5,
"resources": [],
"templateHtml": "<main id = 'main'>\r\n\t<input class=\"l\" id=\"checkbox1\" type=\"checkbox\">\r\n</main>",
"templateCss": "*, *:before, *:after {\r\n\tbox-sizing: border-box;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n:root {\r\n\t/* minFontSize + (maxFontSize - minFontSize) * (100vw - minVWidth)/(maxVWidth - minVWidth) */\r\n\tfont-size: calc(64px + (80 - 64) * (100vw - 320px)/(960 - 320));\r\n}\r\nbody, input {\r\n\tfont-size: 1em;\r\n\tline-height: 1.5;\r\n}\r\nbody {\r\n\tbackground: #bbb;\r\n}\r\ninput {\r\n\tdisplay: block;\r\n\tmargin-bottom: 1.5em;\r\n}\r\nmain {\r\n\tpadding: 1.5em 0 0 0;\r\n\ttext-align: center;\t\r\n}\r\n.l {\r\n\tbackground-color: rgba(0,0,0,0.7);\r\n\tborder-radius: 0.75em;\r\n\tbox-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.3) inset;\r\n\tcolor: #fdea7b;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tmargin: auto;\r\n\tpadding: 0.15em;\r\n\twidth: 3em;\r\n\theight: 1.5em;\r\n\ttransition: background-color 0.1s 0.3s ease-out, box-shadow 0.1s 0.3s ease-out;\r\n\t-webkit-appearance: none;\r\n\t-moz-appearance: none;\r\n\tappearance: none;\r\n\t top: 50%;\r\n transform:translate(-50%, -50%);\r\n \r\n position: absolute;\r\n left: 50%;\r\n}\r\n.l:before, .l:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n}\r\n.l:before {\r\n\tbackground-color: #d7d7d7;\r\n\tborder-radius: 50%;\r\n\twidth: 1.2em;\r\n\theight: 1.2em;\r\n\ttransition: background-color 0.1s 0.3s ease-out, transform 0.3s ease-out;\r\n\tz-index: 1;\r\n}\r\n.l:after {\r\n\tbackground:\r\n\t\tlinear-gradient(transparent 50%, rgba(0,0,0,0.15) 0) 0 50% / 50% 100%,\r\n\t\trepeating-linear-gradient(90deg,#bbb 0,#bbb,#bbb 20%,#999 20%,#999 40%) 0 50% / 50% 100%,\r\n\t\tradial-gradient(circle at 50% 50%,#888 25%, transparent 26%);\r\n\tbackground-repeat: no-repeat;\r\n\tborder: 0.25em solid transparent;\r\n\tborder-left: 0.4em solid #d8d8d8;\r\n\tborder-right: 0 solid transparent;\r\n\ttransition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;\r\n\ttransform: translateX(-22.5%);\r\n\ttransform-origin: 25% 50%;\r\n\twidth: 1.2em;\r\n\theight: 1em;\r\n}\r\n/* Checked */\r\n.l:checked {\r\n\tbackground-color: rgba(0,0,0,0.45);\r\n\tbox-shadow: 0.125em 0.125em 0 0.125em rgba(0,0,0,0.1) inset;\r\n}\r\n.l:checked:before {\r\n\tbackground-color: currentColor;\r\n\ttransform: translateX(125%)\r\n}\r\n.l:checked:after {\r\n\tborder-left-color: currentColor;\r\n\ttransform: translateX(-2.5%) rotateY(180deg);\r\n}\r\n/* Other States */\r\n.l:focus {\r\n\t/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */\r\n\toutline: 0;\r\n}",
"controllerScript": "//https://codepen.io/jkantner/pen/XEzWGr\nvar namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n var settings = self.ctx.settings;\n \n self.onResize();\n \n \n $('#checkbox1', self.ctx.$container).change(function() {\n let checkbox_checked = false;\n if(this.checked) {\n checkbox_checked = true;\n }\n \n var method = settings.changeRequestMethod || 'setValue';\n var paramsBody = convertStatus(checkbox_checked);\n \n \n self.ctx.controlApi.sendOneWayCommand(method, \n paramsBody, settings.requestTimeout)\n \n \n });\n var convertStatusChangeMethod = settings.convertStatusChangeMethod || \"return value;\";\n \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 function requestStatus() {\n \n method = settings.statusRequestMethod;\n paramsBody = \"\";\n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, \n settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n \n let value = (convertGetValue(responseBody)); \n \n if (value)\n {\n $('#checkbox1', self.ctx.$container).prop('checked', true);\n\n\n \n }\n else\n {\n $('#checkbox1', self.ctx.$container).prop('checked', false);\n }\n }\n );\n }\n \n if ((settings.retrieveValueMethod == \"Subscribe for attribute\") || (settings.retrieveValueMethod == \"Subscribe for timeseries\"))\n{\nvar type = 'timeseries'\nif (settings.retrieveValueMethod == \"Subscribe for attribute\")\n type = 'attribute'\n \n\ndatasources = [\n { // datasource\n type: 'entity',// type of the datasource. Can be \"function\" or \"entity\"\n name: 'name', // name of the datasource (in case of \"entity\" usually Entity name)\n aliasName: self.ctx.defaultSubscription.targetDeviceName, // name of the alias used to resolve this particular datasource Entity\n entityName: self.ctx.defaultSubscription.targetDeviceName, // name of the Entity used as datasource\n entityType: 'DEVICE', // datasource Entity type (for ex. \"DEVICE\", \"ASSET\", \"TENANT\", etc.)\n entityId: self.ctx.defaultSubscription.targetDeviceId, // entity identificator presented as string uuid. \n dataKeys: [ // array of keys (Array<DataKey>) (attributes or timeseries) of the entity used to fetch data \n { // dataKey\n name: settings.updateValueKey, // the name of the particular entity attribute/timeseries \n type: type, // type of the dataKey. Can be \"timeseries\", \"attribute\" or \"function\" \n label: settings.updateValueKey, // label of the dataKey. Used as display value (for ex. in the widget legend section) \n color: '#ffffff', // color of the key. Can be used by widget to set color of the key data (for ex. lines in line chart or segments in the pie chart). \n funcBody: \"\", // only applicable for datasource with type \"function\" and \"function\" key type. Defines body of the function to generate simulated data.\n settings: {} // dataKey specific settings with structure according to the defined Data key settings json schema. See \"Settings schema section\".\n },\n //...\n ]\n },\n //...\n ]\nconsole.log(datasources);\n function subscribeForLabelPatternsSources(datasources) {\n const labelPatternsSourcesSubscriptionOptions = {\n datasources,\n useDashboardTimewindow: false,\n type: 'latest',\n callbacks: {\n onDataUpdated: (subscription) => {\n \n let data = subscription.data[0].data[0][1];\n \n console.log(subscription)\n \n let value = (convertGetValue(data)); \n \n if (value === true)\n {\n console.log (\"check\");\n $('#checkbox1', self.ctx.$container).prop('checked', true);\n \n }\n else\n {\n $('#checkbox1', self.ctx.$container).prop('checked', false);\n console.log (\"uncheck\");\n \n }\n }\n }\n };\n \n self.ctx.subscriptionApi.createSubscription(labelPatternsSourcesSubscriptionOptions, true).subscribe(\n (subscription) => {\n //this.labelPatternsSourcesSubscription = subscription;\n }\n );\n }\nsubscribeForLabelPatternsSources(datasources);\n}\n\n if (settings.retrieveValueMethod == 'Call RPC get value method')\n {\n requestStatus()\n }\n \n \n}\n\n\n\n\n\n\nself.onResize = function() {\n $('#main', self.ctx.$container)[0].style.zoom = self.ctx.width/50;\n\n\n if (self.ctx.width > self.ctx.height + 120)\n $('#main', self.ctx.$container)[0].style.zoom = self.ctx.height/30;\n \n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"retrieveValueMethod\":\n {\n \"title\": \"Retrieve on/off value using method\",\n \"type\": \"string\",\n \"enum\": [\n \"Don't retrieve\",\n \"Call RPC get value method\",\n \"Subscribe for attribute\",\n \"Subscribe for timeseries\"],\n \"default\": \"Call RPC get value method\"\n },\n \"updateValueKey\": {\n \"title\": \"Attribute/Timeseries value key (only when subscribe for attribute/timeseries method)\",\n \"type\": \"string\",\n \"default\": \"value\"\n },\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 },\n \"required\": [ \n \"retrieveValueMethod\",\n \"statusRequestMethod\",\n \"changeRequestMethod\",\n \"convertStatusRequestMethod\",\n \"convertStatusChangeMethod\",\n \"requestTimeout\"]\n },\n \"form\": [\n \"retrieveValueMethod\",\n \"updateValueKey\",\n \"statusRequestMethod\",\n \"changeRequestMethod\",\n {\n \"key\": \"convertStatusRequestMethod\",\n \"type\": \"javascript\"\n },\n {\n \"key\": \"convertStatusChangeMethod\",\n \"type\": \"javascript\"\n },\n \"requestTimeout\"\n \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\":\"switch3\"}"
}
}