-
Notifications
You must be signed in to change notification settings - Fork 72
/
switch6.json
18 lines (18 loc) · 13 KB
/
switch6.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"alias": "switch6",
"name": "switch6",
"image": null,
"description": null,
"descriptor": {
"type": "rpc",
"sizeX": 5,
"sizeY": 4.5,
"resources": [],
"templateHtml": "\r\n<div id=\"toggle_div\" class=\"toggle toggle_off\">\r\n <input type=\"checkbox\" id=\"togglei\" />\r\n <label for=\"toggle\"></label>\r\n</div>",
"templateCss": "\n .toggle {\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t transform: translate3d(-50%, -50%, 0);\n}\n .toggle:after {\n\t\n\t position: absolute;\n\t left: -56px;\n\t top: 30px;\n\t font-size: 18px;\n\t color: #fff;\n}\n .toggle:after {\n\n\t position: absolute;\n\t right: -46px;\n\t top: 30px;\n\t font-size: 18px;\n\t color: rgba(253, 15, 21, 0.31);\n}\n .toggle label {\n\t position: relative;\n\t display: inline-block;\n\t width: 80px;\n\t height: 80px;\n\t background-color: #fd1015;\n\t border-radius: 50px;\n\t cursor: pointer;\n\t box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px #ef4247;\n\t -webkit-tap-highlight-color: transparent;\n}\n .toggle label:before {\n\t content: \"\";\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t transform: translate(-50%, -50%);\n\t transition: width 0.2s cubic-bezier(0, -1.85, 0.27, 1.75);\n\t height: 42px;\n\t width: 42px;\n\t background-color: #fd0f14;\n\t border-radius: 46px;\n\t box-shadow: inset 0px 0px 0px 8px #fff;\n}\n .toggle input {\n\t display: none;\n}\n .toggle_on input:checked + label {\n\t background-color: #57de72;\n\t box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px rgba(3, 132, 28, 0.5411764705882353);\n}\n .toggle_on input:checked + label:before {\n\t width: 10px;\n\t background-color: #fff;\n}\n \n \n ",
"controllerScript": "//https://codepen.io/agoodwin/pen/JBvBPr\n\nfunction check(value)\n{\n console.log('clicked');\n let checkbox_checked = false;\n if (!value) {\n $('#togglei', self.ctx.$container).prop('checked', false);\n \n checkbox_checked = false;\n $('#toggle_div', self.ctx.$container).removeClass('toggle_on');\n $('#toggle_div', self.ctx.$container).addClass('toggle_off');\n }\n else\n {\n console.log('checked');\n checkbox_checked = true;\n $('#togglei', self.ctx.$container).prop('checked', true);\n $('#toggle_div', self.ctx.$container).removeClass('toggle_off');\n $('#toggle_div', self.ctx.$container).addClass('toggle_on');\n }\n}\n\nself.onInit = function() {\n \nvar settings = self.ctx.settings;\n\nself.onResize();\n \n\n($('#toggle_div', self.ctx.$container)).click(\n function() {\n console.log('clicked');\n let checkbox_checked = false;\n if ($('#togglei', self.ctx.$container).prop('checked')) {\n $('#togglei', self.ctx.$container).prop('checked', false);\n \n checkbox_checked = false;\n $('#toggle_div', self.ctx.$container).removeClass('toggle_on');\n $('#toggle_div', self.ctx.$container).addClass('toggle_off');\n }\n else\n {\n console.log('checked');\n checkbox_checked = true;\n $('#togglei', self.ctx.$container).prop('checked', true);\n $('#toggle_div', self.ctx.$container).removeClass('toggle_off');\n $('#toggle_div', self.ctx.$container).addClass('toggle_on');\n }\n \n var method = settings\n .changeRequestMethod || 'setValue';\n var paramsBody = convertStatus(\n checkbox_checked);\n\n\n self.ctx.controlApi.sendOneWayCommand(\n method,\n paramsBody, settings\n .requestTimeout)\n \n });\n\nvar convertStatusChangeMethod = settings\n .convertStatusChangeMethod || \"return value;\";\n\n var convertStatus = new Function(\"value\",\n convertStatusChangeMethod);\n\n //Get Value Method\n var convertGetValueMethod = settings\n .convertStatusRequestMethod ||\n \"return data ? true : false;\";\n\n var convertGetValue = new Function(\"data\",\n 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\n let value = (convertGetValue(\n responseBody));\n console.log(value)\n\n if (value) {\n check(true)\n\n\n\n } else {\n check(false)\n }\n }\n );\n }\n\n if ((settings.retrieveValueMethod ==\n \"Subscribe for attribute\") || (settings\n .retrieveValueMethod ==\n \"Subscribe for timeseries\")) {\n var type = 'timeseries'\n if (settings.retrieveValueMethod ==\n \"Subscribe for attribute\")\n type = 'attribute'\n\n\n datasources = [{ // 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\n .defaultSubscription\n .targetDeviceName, // name of the alias used to resolve this particular datasource Entity\n entityName: self.ctx\n .defaultSubscription\n .targetDeviceName, // name of the Entity used as datasource\n entityType: 'DEVICE', // datasource Entity type (for ex. \"DEVICE\", \"ASSET\", \"TENANT\", etc.)\n entityId: self.ctx\n .defaultSubscription\n .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\n .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\n .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 ]\n console.log(datasources);\n\n function subscribeForLabelPatternsSources(\n datasources) {\n const\n labelPatternsSourcesSubscriptionOptions = {\n datasources,\n useDashboardTimewindow: false,\n type: 'latest',\n callbacks: {\n onDataUpdated: (\n subscription) => {\n\n let data = subscription\n .data[0].data[0][1];\n\n console.log(\n subscription)\n\n let value = (\n convertGetValue(\n data));\n\n if (value === true) {\n console.log(\n \"check\");\n $('#toggle', self\n .ctx\n .$container)\n .prop('checked',\n true);\n\n } else {\n $('#toggle', self\n .ctx\n .$container)\n .prop('checked',\n false);\n console.log(\n \"uncheck\");\n\n }\n }\n }\n };\n\n self.ctx.subscriptionApi.createSubscription(\n labelPatternsSourcesSubscriptionOptions,\n true).subscribe(\n (subscription) => {\n //this.labelPatternsSourcesSubscription = subscription;\n }\n );\n }\n subscribeForLabelPatternsSources(datasources);\n }\n\n if (settings.retrieveValueMethod ==\n 'Call RPC get value method') {\n requestStatus()\n }\n \n}\n\n\n\nself.onResize = function() {\n\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": "{\"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\":\"switch6\",\"targetDeviceAliases\":[]}"
}
}