-
Notifications
You must be signed in to change notification settings - Fork 73
/
Copy pathround_slider_1.json
25 lines (25 loc) · 6.18 KB
/
round_slider_1.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"alias": "round_slider_1",
"name": "Round Slider 1",
"descriptor": {
"type": "rpc",
"sizeX": 8.5,
"sizeY": 7.5,
"resources": [
{
"url": "https://cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.js"
},
{
"url": "https://cdn.jsdelivr.net/npm/round-slider@1.5.1/dist/roundslider.min.css"
}
],
"templateHtml": "<div id=\"slider\"></div>",
"templateCss": "#slider {\n\n top: 50%;\n transform: translate(-50%, -50%);\n position: absolute;\n left: 50%;\n \n\n \n}\n",
"controllerScript": "//https://roundsliderui.com/\nvar namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n\nvar settings = self.ctx.settings;\n\n $('#slider', self.ctx.$container).roundSlider({\n sliderType: \"min-range\",\n circleShape: \"pie\",\n startAngle: \"315\",\n lineCap: \"round\",\n radius: 130,\n width: 20,\n step: settings.sliderStepWidth,\n min: settings.sliderMinValue,\n max: settings.sliderMaxValue,\n \n svgMode: true,\n\t pathColor: \"#eee\",\n\t borderWidth: 0,\n \n\t startValue: 0,\n \n valueChange: function (e) {\n \tvar color = e.isInvertedRange ? settings.sliderbgColorPositive : settings.sliderbgColorNegative;\n \n $('#slider', self.ctx.$container).roundSlider({ \"rangeColor\": color, \"tooltipColor\": color });\n \n \n var method = settings.sliderChangeRequestMethod;\n \n var paramsBody = $('#slider', self.ctx.$container).data(\"roundSlider\").getValue();\n \n \n \n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n \n }\n );\n \n }\n});\n\nvar sliderObj =$('#slider', self.ctx.$container).data(\"roundSlider\");\nrequestStatus();\n\n function requestStatus() {\n method = settings.sliderStatusRequestMethod;\n paramsBody = \"\";\n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, \n settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n sliderObj.setValue(parseFloat(responseBody)); \n \n }\n );\n }\n}\n\n\nself.onResize = function() {\n \n\tvar radius = self.ctx.width / 2 - 10;\n\tif (self.ctx.width > self.ctx.height)\n\t radius = self.ctx.height / 2 - 10;\n var width = 14;\n // here you can restrict the radius and width\n // based on your application UI structure\n if (radius > 200) radius = 200;\n if (radius > 120) width = 22;\n else if (radius > 70) width = 18;\n $('#slider', self.ctx.$container).roundSlider({ \"radius\": radius, \"width\": width })\n \n\n\n \n}\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \n \"requestTimeout\": {\n \"title\": \"RPC request timeout\",\n \"type\": \"number\",\n \"default\": 500\n },\n \"sliderbgColorPositive\": {\n \"title\": \"Slider Background Color Positive\",\n \"type\": \"string\",\n \"default\": \"#4CAF50\"\n },\n \"sliderbgColorNegative\": {\n \"title\": \"Slider Background Color Negative\",\n \"type\": \"string\",\n \"default\": \"#4CAF50\"\n },\n \"sliderMinValue\": {\n \"title\": \"Min. Value\",\n \"type\": \"number\",\n \"default\": 1\n },\n \"sliderMaxValue\": {\n \"title\": \"Max. Value\",\n \"type\": \"number\",\n \"default\": 100\n },\n \"sliderStepWidth\": {\n \"title\": \"Step Width\",\n \"type\": \"number\",\n \"default\": 1\n },\n \"sliderChangeRequestMethod\": {\n \"title\": \"Change request Method\",\n \"type\": \"string\",\n \"default\": \"setValue\"\n },\n \"sliderStatusRequestMethod\": {\n \"title\": \"Status request Method\",\n \"type\": \"string\",\n \"default\": \"getValue\"\n }\n },\n \"required\": [\n \"requestTimeout\",\n \"sliderbgColorPositive\",\n \"sliderbgColorNegative\",\n \"sliderMinValue\",\n \"sliderMaxValue\",\n \"sliderChangeRequestMethod\",\n \"sliderStatusRequestMethod\"\n ]\n },\n \"form\": [\n \"requestTimeout\",\n {\n \"key\": \"sliderbgColorPositive\",\n \"type\": \"color\"\n },{\n \"key\": \"sliderbgColorNegative\",\n \"type\": \"color\"\n },\n \"sliderMinValue\",\n \"sliderMaxValue\",\n \"sliderStepWidth\",\n \"sliderChangeRequestMethod\",\n \"sliderStatusRequestMethod\"\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\":\"Round Slider 1\"}"
},
"image": null,
"description": null
}