-
Notifications
You must be signed in to change notification settings - Fork 72
/
multi_slider.json
23 lines (23 loc) · 9.13 KB
/
multi_slider.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"alias": "multi_slider",
"name": "Multi Slider",
"descriptor": {
"type": "rpc",
"sizeX": 8.5,
"sizeY": 9,
"resources": [
{
"url": "https://cdn.jsdelivr.net/gh/rossmann-engineering/js-range-slider@37ce7235b025537be452e5a369720de2bc2764d0/app.css"
},
{
"url": "https://cdn.jsdelivr.net/gh/rossmann-engineering/js-range-slider@904a51836f150118acfafc9c13fa104494d78549/app.js"
}
],
"templateHtml": "<div id=\"app\" class=\"multislidertooltip\">\n \n <span class = \"multislidertooltiptext\"></span>\n</div>",
"templateCss": "\n#container {\n\n\n}\n\n#app{\n\n\n\n}",
"controllerScript": "//https://www.cssscript.com/demo/circular-range-slider-svg/\n//https://github.com/tadejf84/js-range-slider\n//https://webcodeflow.com/concentric-circular-range-slider/\nvar slider;\nvar opts;\nvar values = [0,0,0,0];\nself.onInit = function() {\n //var settings = self.ctx.settings;\n // var sliders = [];\n // console.log(settings);\n // settings.sliderList.forEach(function(value){\n // var sliderelement = {\n // radius: 100,\n // min: 0,\n // max: 100,\n // step: 10,\n // initialValue: 50,\n // color: '#fdcb6e',\n // displayName: 'Value 1'\n // };\n \n // });\n settings = self.ctx.settings;\n if (settings.sliderList != null)\n {\n\n for(var i = 0; i < settings.sliderList.length; i++)\n requestStatus(i);\n }\n \n\n \n self.onResize();\n \n\n\n\n}\n\n function requestStatus(sliderNumber) {\n \n method = settings.sliderList[sliderNumber].rpcGetValueMethod;\n paramsBody = \"\";\n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, \n settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n \n values[sliderNumber] = parseFloat(responseBody); \n \n self.onResize(); \n }\n );\n }\n\n\n\nself.onResize = function() {\n settings = self.ctx.settings;\n\nconst context = $('#app', self.ctx.$container).html(\"\");\n\nif (settings.sliderList != null)\n{\n sliders = []\nfor(var i = 0; i < settings.sliderList.length; i++)\n {\n let color = 'red';\n if (settings.sliderList[i].color == 'Yellow')\n color = 'yellow';\n if (settings.sliderList[i].color == 'Blue')\n color = 'blue';\n if (settings.sliderList[i].color == 'Green')\n color = 'green';\n sliders.push({\n radius: 40 + i*60,\n min: settings.sliderList[i].minValue,\n max: settings.sliderList[i].maxValue,\n step: 1,\n initialValue: values[i],\n color: color,\n displayName: settings.sliderList[i].name\n })\n \n\n }\n opts = {\n DOMselector: $('#app', self.ctx.$container)[0],\n sliders: sliders,\n scale: 1\n }\n}\nelse\n{\n\nopts = {\n DOMselector: $('#app', self.ctx.$container)[0],\n \n sliders: [\n {\n radius: 100,\n min: 0,\n max: 100,\n step: 10,\n initialValue: 50,\n color: '#fdcb6e',\n displayName: 'Value 1'\n },\n {\n radius: 160,\n min: 0,\n max: 3000,\n step: 100,\n initialValue: 200,\n color: '#0984e3',\n displayName: 'Value 2'\n },\n {\n radius: 40,\n min: 0,\n max: 200,\n step: 10,\n initialValue: 20,\n color: '#d63031',\n displayName: 'Value 3'\n }\n ], \n scale: 1\n };\n}\n\n var numberOfValues = 3;\n if (settings.sliderList != null)\n numberOfValues = settings.sliderList.length;\n \n \n \n if (self.ctx.width < self.ctx.height)\n {\n //opts.scale = 133*numberOfValues/self.ctx.width;\n opts.scale = 400/self.ctx.width;\n }\n else\n {\n //opts.scale = 133*numberOfValues/self.ctx.height;\n opts.scale = 400/self.ctx.width;\n }\n\n slider = new Slider(opts);\n slider.listener = function (handle, value) {valueUpdated(handle, value)}\n slider.tooltiptextdom = $('.multislidertooltiptext', self.ctx.$container)[0] \n slider.draw();\n \n //Add Class to connect to Legend Widget\n if (settings.legendID != null)\n $('#app', self.ctx.$container)[0].classList.add(\"legend\" + settings.legendID.toString());\n \n \n \n}\n\nfunction valueUpdated(handle, value)\n{\n \n \n \n var handleNumber = handle;\n console.log (handleNumber);\n\n\n if (settings.sliderList != null)\n {\n var method = settings.sliderList[handleNumber].rpcSetValueMethod;\n var paramsBody = value;\n \n \n self.ctx.controlApi.sendOneWayCommand(method, \n paramsBody, settings.requestTimeout)\n /*.subscribe(\n function success(responseBody) {\n \n }\n );*/\n }\n \n \n}\n\nself.onDestroy = function() {\n \n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"legendID\": {\n \"title\": \"ID to connect Legend Widget\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"sliderList\": {\n \"title\": \"Slider List\",\n \"type\": \"array\",\n \"minItems\" : 1,\n \"items\": {\n \"title\": \"Slider\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"title\": \"Name\",\n \"type\": \"string\"\n },\n \"minValue\": {\n \"title\": \"Min. value\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"maxValue\": {\n \"title\": \"Max. value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"rpcGetValueMethod\": {\n \"title\": \"RPC get value method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n },\n \"rpcSetValueMethod\": {\n \"title\": \"RPC set value method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"color\": {\n \"title\": \"Color\",\n \"type\": \"string\",\n \"default\": \"Red\",\n \"enum\": [\n \"Red\",\n \"Yellow\",\n \"Blue\",\n \"Green\"]\n }\n },\n \"required\": [\"name\", \"rpcGetValueMethod\", \"rpcSetValueMethod\", \"color\"]\n }\n }\n },\n \"required\": [\"sliderList\"]\n },\n \"form\": [\n \"legendID\",\n \"sliderList\"\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\":\"Multi Slider\"}"
}
}