-
Notifications
You must be signed in to change notification settings - Fork 72
/
slider.json
18 lines (18 loc) · 9.58 KB
/
slider.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"alias": "slider",
"name": "Slider",
"image": null,
"description": null,
"descriptor": {
"type": "rpc",
"sizeX": 8.5,
"sizeY": 5,
"resources": [],
"templateHtml": "<style data=\"test\" type=\"text/css\"></style>\n\n\n<div class=\"slidecontainer\">\n <div id=\"value_label\">40%</div>\n <input type=\"range\" min=\"1\" max=\"100\" step=\"1\" value=\"50\" class=\"slider\" id=\"myRange\">\n</div>",
"templateCss": "\n#container {\n\n background-position: 50% 50%;\n \n}\n\n#value_label{\n position: absolute;\n top: 40px;\n}\n\n.slidecontainer {\n \n margin: auto;\n width: 90%; /* Width of the outside container */\n margin-left: 5%;\n\n}\n\n/* The slider itself */\n.slider {\n -webkit-appearance: none; /* Override default CSS styles */\n appearance: none;\n width: 100%; /* Full-width */\n height: 25px; /* Specified height */\n background: #d3d3d3; /* Grey background */\n border-radius: 5px;\n outline: none; /* Remove outline */\n opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */\n -webkit-transition: .2s; /* 0.2 seconds transition on hover */\n transition: opacity .2s;\n}\n\n/* The slider itself */\n.slider_round {\n -webkit-appearance: none; /* Override default CSS styles */\n appearance: none;\n width: 100%; /* Full-width */\n height: 25px; /* Specified height */\n background: #d3d3d3; /* Grey background */\n border-radius: 5px;\n outline: none; /* Remove outline */\n opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */\n -webkit-transition: .2s; /* 0.2 seconds transition on hover */\n transition: opacity .2s;\n}\n\n/* Mouse-over effects */\n.slider:hover {\n opacity: 1; /* Fully shown on mouse-over */\n}\n\n/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ \n.slider::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: 25px; /* Set a specific slider handle width */\n height: 25px; /* Slider handle height */\n background: blue; /* Green background */\n\n cursor: pointer; /* Cursor on hover */\n}\n\n.slider::-moz-range-thumb {\n width: 25px; /* Set a specific slider handle width */\n height: 25px; /* Slider handle height */\n background: blue; /* Green background */\n cursor: pointer; /* Cursor on hover */\n}\n\n/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ \n.slider_round::-webkit-slider-thumb {\n -webkit-appearance: none; /* Override default look */\n appearance: none;\n width: 25px; /* Set a specific slider handle width */\n height: 25px; /* Slider handle height */\n background: blue; /* Green background */\n border-radius: 50%;\n cursor: pointer; /* Cursor on hover */\n}\n\n.slider_round::-moz-range-thumb {\n width: 25px; /* Set a specific slider handle width */\n height: 25px; /* Slider handle height */\n background: blue; /* Green background */\n border-radius: 50%;\n cursor: pointer; /* Cursor on hover */\n}",
"controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nvar style = document.querySelector('[data=\"test\"]');\n\nself.onInit = function() {\n \n\n \n \n var settings = self.ctx.settings;\n \n var slider = $('#myRange', self.ctx.$container)[0]\n \n if (settings.style == 'Round')\n $('#myRange', self.ctx.$container).removeClass('slider').addClass('slider_round');\n \n \n slider.min = settings.sliderMinValue;\n slider.max = settings.sliderMaxValue;\n slider.step = settings.sliderStepWidth;\n slider.style.background = settings.sliderbgColor;\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 slider.value = parseFloat(responseBody);\n slider.oninput();\n slider.onchange();\n self.onResize();\n }\n );\n }\n \n\n \n slider.oninput = function() {\n let sliderWidth = $('#myRange', self.ctx.$container)[0].offsetWidth;\n \n let margin = self.ctx.width - sliderWidth;\n $('#value_label', self.ctx.$container)[0].style.left = (sliderWidth) * slider.value/settings.sliderMaxValue + margin/2 - 20 + \"px\";\n if (settings.showValue)\n $('#value_label', self.ctx.$container)[0].innerHTML = slider.value;\n else\n $('#value_label', self.ctx.$container)[0].innerHTML = '';\n \n \n \n }\n \n slider.onchange = function() {\n var method = settings.sliderChangeRequestMethod;\n \n var paramsBody = parseFloat(slider.value);\n \n \n \n self.ctx.controlApi.sendTwoWayCommand(method, \n paramsBody, settings.requestTimeout)\n .subscribe(\n function success(responseBody) {\n \n }\n );\n}\n requestStatus();\n self.onResize();\n\n}\n\n\n\nself.onResize = function() {\n var slider = $('#myRange', self.ctx.$container)[0]\n var settings = self.ctx.settings;\n \n $('#myRange', self.ctx.$container)[0].style.marginTop = self.ctx.height / 2 - $('#myRange', self.ctx.$container)[0].offsetHeight / 2 - $('#value_label', self.ctx.$container)[0].offsetHeight/2 + \"px\";\n\n $('#value_label', self.ctx.$container)[0].style.top = self.ctx.height / 2 - $('#myRange', self.ctx.$container)[0].offsetHeight - $('#value_label', self.ctx.$container)[0].offsetHeight + \"px\";\n \n let sliderWidth = $('#myRange', self.ctx.$container)[0].offsetWidth;\n let margin = self.ctx.width - sliderWidth;\n\n $('#value_label', self.ctx.$container)[0].style.left = (sliderWidth) * slider.value/settings.sliderMaxValue + margin/2 - 20 + \"px\";\n if (settings.showValue)\n $('#value_label', self.ctx.$container)[0].innerHTML = slider.value;\n else\n $('#value_label', self.ctx.$container)[0].innerHTML = '';\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 \"sliderbgColor\": {\n \"title\": \"Slider Background Color\",\n \"type\": \"string\",\n \"default\": \"#4CAF50\"\n },\n \"showValue\": {\n \"title\": \"Show Value\",\n \"type\": \"boolean\",\n \"default\": true\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 \"style\": {\n \"title\": \"Slider handle style\",\n \"type\": \"string\",\n \"enum\": [\n \"Round\",\n \"Rectangle\"],\n \"default\": \"Round\"\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 \"sliderbgColor\",\n \"showValue\",\n \"sliderMinValue\",\n \"sliderMaxValue\",\n \"sliderChangeRequestMethod\",\n \"sliderStatusRequestMethod\"\n ]\n },\n \"form\": [\n \"requestTimeout\",\n {\n \"key\": \"sliderbgColor\",\n \"type\": \"color\"\n },\n \"showValue\",\n \"sliderMinValue\",\n \"sliderMaxValue\",\n \"style\",\n \"sliderStepWidth\",\n \"sliderChangeRequestMethod\",\n \"sliderStatusRequestMethod\"\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\":\"Slider\",\"targetDeviceAliases\":[]}"
}
}