-
Notifications
You must be signed in to change notification settings - Fork 0
/
switch_2.json
16 lines (16 loc) · 14.2 KB
/
switch_2.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"alias": "switch_2",
"name": "Switch 2",
"descriptor": {
"type": "rpc",
"sizeX": 6.5,
"sizeY": 4.5,
"resources": [],
"templateHtml": "\n<div class='checkbox'>\n <label class='checkbox__container'>\n <input class='checkbox__toggle' type='checkbox'>\n <span class='checkbox__checker anim'></span>\n <svg class='checkbox__path' id='checkbox__path' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>\n <path class='path path--top' d='M194.27,59.599l42.438-42.028\n\t\tc-9.086-10.419-22.443-17.006-37.215-17.006c-35.529,0-46.643,27.712-75.047,27.712s-38-27.712-75.072-27.712\n\t\tc-13.45,0-25.621,5.355-34.514,14.045l48.098,48.113'></path>\n <path class='path path--bottom' d='M183.561,48.822l42.521,42.794\n\t\tc-7.649,4.874-16.759,7.697-26.589,7.697c-34.914,0-46.643-30.202-75.06-30.202s-35.527,30.202-75.06,30.202\n\t\tc-13.431,0-25.502-5.255-34.346-13.8l47.93-48.18'></path>\n </svg>\n <svg class='checkbox__bg' id='checkbox__bg' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>\n <path class='shape-bg' d='M199.493,99.087c27.504,0,49.374-22.106,49.374-49.374S226.552,0.338,199.493,0.338c-35.529,0-46.643,27.712-75.047,27.712\n\t\ts-38-27.712-75.072-27.712C22.048,0.338,0,22.444,0,49.713s21.826,49.374,49.374,49.374c39.533,0,46.643-30.202,75.06-30.202\n\t\tS164.58,99.087,199.493,99.087z'></path>\n </svg>\n </label>\n</div>\n",
"templateCss": "\n\nbody {\n\t background-color: #eee;\n\t padding-top: 40px;\n}\n h1 {\n\t text-align: center;\n\t font-size: 20px;\n\t text-transform: uppercase;\n\t letter-spacing: 1.2px;\n}\n h2 {\n\t text-align: center;\n\t font-size: 14px;\n\t text-transform: uppercase;\n\t letter-spacing: 1.2px;\n}\n hr {\n\t margin: 0 auto;\n\t margin-top: 50px;\n\t margin-bottom: 50px;\n}\n footer {\n\t text-align: center;\n\t padding-bottom: 50px;\n}\n .link {\n\t text-align: center;\n\t color: #278fb2;\n}\n .checkbox {\n\t width: 280px;\n\t margin: 0 auto;\n\t top: 50%;\n transform:translate(-50%, -50%);\n \n position: absolute;\n left: 55%;\n}\n .checkbox__container {\n\t display: block;\n\t position: relative;\n\t height: 100px;\n}\n .checkbox__toggle {\n\t display: none;\n}\n .checkbox__toggle:checked ~ .checkbox__path .path--top {\n\t stroke-dashoffset: 0px;\n\t stroke: #0cb018;\n}\n .checkbox__toggle:checked ~ .checkbox__path .path--bottom {\n\t stroke-dasharray: 14px 360px;\n\t stroke-dashoffset: 0px;\n\t stroke: #0cb018;\n}\n .checkbox__checker {\n\t position: absolute;\n\t top: 13px;\n\t left: 12px;\n\t z-index: 1;\n\t display: block;\n\t width: 73px;\n\t height: 73px;\n\t background-color: #fff;\n\t border-radius: 50%;\n\t z-index: 9;\n}\n .checkbox__bg, .checkbox__path {\n\t position: absolute;\n\t top: 0;\n\t left: 0;\n\t width: 100%;\n\t height: 100%;\n}\n .checkbox__bg .shape-bg {\n\t fill: #aaa;\n}\n .checkbox__path {\n\t z-index: 9;\n}\n .checkbox__path .shape-bg {\n\t fill: #fff;\n\t stroke-width: 1px;\n\t stroke: #aaa;\n}\n .checkbox__path .path {\n\t stroke-width: 4px;\n\t stroke: #bf1e1e;\n\t fill: none;\n\t stroke-linecap: round;\n\t transition: 1s;\n}\n .checkbox__path .path--top {\n\t stroke-dasharray: 33px 360px;\n\t stroke-dashoffset: -336px;\n}\n .checkbox__path .path--bottom {\n\t stroke-dasharray: 33px 360px;\n\t stroke-dashoffset: -324px;\n}\n .checkbox #checkbox__circle {\n\t z-index: 9;\n\t position: absolute;\n\t top: 0;\n\t left: 0;\n\t width: 100%;\n\t height: 100%;\n\t fill: #fff;\n}\n .anim {\n\t transition-timing-function: cubic-bezier(0.385, -0.6, 0.685, 1.59);\n\t transition-duration: 0.2s;\n}\n .anim--go-right {\n\t left: calc(100% - 120px);\n}\n .anim--speed {\n\t animation-duration: 0.5s;\n\t animation-name: speedSmall;\n}\n @keyframes speed {\n\t 0% {\n\t\t transform: scaleY(0.6);\n\t}\n\t 30% {\n\t\t transform: scaleY(2.3);\n\t}\n\t 60% {\n\t\t transform: scaleY(2.3);\n\t}\n\t 100% {\n\t\t transform: scaleY(0.6);\n\t}\n}\n @keyframes speedSmall {\n\t 0% {\n\t\t transform: scale(1, 1);\n\t}\n\t 25% {\n\t\t transform: scale(0.7, 0.7);\n\t}\n\t 35% {\n\t\t transform: scale(0.7, 0.7);\n\t}\n\t 50% {\n\t\t transform: scale(0.7, 0.3);\n\t}\n\t 65% {\n\t\t transform: scale(0.7, 0.7);\n\t}\n\t 75% {\n\t\t transform: scale(0.7, 0.7);\n\t}\n\t 100% {\n\t\t transform: scale(1, 1);\n\t}\n}\n ",
"controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n \n var settings = self.ctx.settings;\n //Set Value Mathod\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 \nvar toggler = $('.checkbox__toggle', self.ctx.$container);\nvar circle = $('.checkbox__checker', self.ctx.$container);\n\nvar time1 = 150;\nvar time2 = 800;\ntoggler.click(function(){\n var paramsBody = convertStatus(false);\n\n checkCheckbox($(this).is(\":checked\"))\n if ($(this).is(\":checked\"))\n paramsBody = convertStatus(true);\n var method = settings.changeRequestMethod || 'setValue';\n \n console.log(method);\n console.log($(this).is(\":checked\"))\n \n self.ctx.controlApi.sendOneWayCommand(method, \n paramsBody, settings.requestTimeout)\n /*.subscribe(\n function success(responseBody) {\n \n }\n );*/\n \n \n})\n\nfunction checkCheckbox(checked)\n{\n \n //toggler.checked = true;\n \n circle.removeClass('anim--speed');\n if(checked){\n setTimeout(function(){\n circle.addClass('anim--speed');\n },10);\n setTimeout(function(){\n circle.addClass('anim--go-right');\n },time1);\n //toggler.is(\":checked\") = true;\n \n }\n else{\n toggler.checked = false;\n setTimeout(function(){\n circle.addClass('anim--speed');\n },10);\n setTimeout(function(){\n circle.removeClass('anim--go-right');\n },time1);\n //toggler.is(\":checked\") = false;\n }\n}\n \n\n \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 toggler.click();\n \n \n }\n else\n {\n \n \n }\n }\n );\n }\n \nif ((settings.retrieveValueMethod == \"Subscribe for attribute\") || (settings.retrieveValueMethod == \"Subscribe for timeseries\"))\n{\nvar type = 'timeseries'\nif (settings.retrieveValueMethod == \"Subscribe for attribute\")\n type = 'attribute'\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 ]\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 let value = (convertGetValue(data)); \n \n if (value === true)\n {\n if (!toggler.is(\":checked\"))\n toggler.click();\n \n }\n else\n {\n if (toggler.is(\":checked\"))\n toggler.click();\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\nself.onResize();\n\n}\n\n\nself.onResize = function() {\n if (self.ctx.width > self.ctx.height+150)\n $('.checkbox', self.ctx.$container)[0].style.zoom = self.ctx.height/180;\n else\n $('.checkbox', self.ctx.$container)[0].style.zoom = self.ctx.width/300;\n \n self.ctx.detectChanges();\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 \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\":\"Switch 2\"}"
}
}