thermostat_1.json

{
  "alias": "thermostat_1",
  "name": "Thermostat 1",
  "descriptor": {
    "type": "rpc",
    "sizeX": 8,
    "sizeY": 8,
    "resources": [],
    "templateHtml": "<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\r\n      rel=\"stylesheet\">\r\n\r\n<div class=\"thermostat\">\r\n  <div class=\"bar\">\r\n    <div class=\"inner_bar\"></div>\r\n    <div class='hold left'>\r\n      <div class='fill fill1'></div>\r\n    </div>\r\n    <div class='hold right'>\r\n      <div class='fill fill2'></div>\r\n    </div>\r\n    <span>Heating</span>\r\n  </div>\r\n  <div class=\"shadow\">\r\n    <div class=\"shadow-cube\"></div>\r\n  </div>\r\n  <div class=\"number\">\r\n    <span class=\"ext\">19</span>\r\n  </div>\r\n  <div class=\"center\">\r\n    <span class=\" minus\"><i class=\"material-icons\">keyboard_arrow_left</i></span>\r\n    <span class=\" plus\"><i class=\"material-icons\">keyboard_arrow_right</i></span>\r\n    <div class=\"small\">\r\n      <span class=\"heat\">19</span>\r\n    </div>\r\n  </div>\r\n</div>",
    "templateCss": "@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');\n * {\n\t box-sizing: border-box;\n\t -webkit-user-select: none;\n\t -moz-user-select: none;\n\t -ms-user-select: none;\n\t user-select: none;\n}\n html, body {\n\t margin: 0;\n\t background: #fdfdfd;\n\t font-family: 'Open Sans', sans-serif;\n}\n .center_radius, .thermostat, .thermostat .bar, .thermostat .center, .thermostat .center .small {\n\t top: 50%;\n\t left: 50%;\n\t transform: translate(-50%, -50%);\n\t border-radius: 50%;\n}\n .thermostat {\n\t position: absolute;\n\t width: 400px;\n\t height: 400px;\n\t background: #6d697f;\n\t box-shadow: inset 0px -6px 1px 2px rgba(0, 0, 0, 0.35), 0px 7px 40px 11px rgba(84, 81, 97, 0.40);\n}\n .thermostat:hover .number {\n\t opacity: 1;\n}\n .thermostat .shadow {\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t transform: translate(-50%, -50%) rotateZ(10deg);\n\t width: 25px;\n\t height: 86%;\n\t text-align: center;\n\t transition: 0.7s ease;\n\t animation: shadow 1.4s ease-out both;\n}\n .thermostat .shadow .shadow-cube {\n\t position: absolute;\n\t top: 0;\n\t width: 25px;\n\t height: 0px;\n\t box-shadow: 0 0 45px 13px rgba(255, 158, 35, 0.5);\n}\n .thermostat .number {\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t transform: translate(-50%, -50%) rotateZ(10deg);\n\t width: 40px;\n\t height: 82%;\n\t text-align: center;\n\t transition: 0.7s ease;\n\t opacity: 0;\n}\n .thermostat .number .ext {\n\t font-size: 16px;\n\t color: white;\n\t font-weight: 1000;\n\t text-shadow: 1px 3px 3px #302e38;\n}\n .thermostat .bar {\n\t position: absolute;\n\t width: 356px;\n\t height: 356px;\n}\n .thermostat .bar .inner_bar {\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t width: 344px;\n\t height: 344px;\n\t margin-left: -172px;\n\t margin-top: -172px;\n\t border-radius: 100%;\n\t background-color: #6d697f;\n\t z-index: 4;\n}\n .thermostat .bar .inner_bar:after {\n\t content: '';\n\t display: block;\n\t position: absolute;\n\t width: 0;\n\t height: 0;\n\t border-top: 70px solid transparent;\n\t border-left: 70px solid transparent;\n\t border-right: 70px solid transparent;\n\t border-bottom: 150px solid #6d697f;\n\t bottom: -7px;\n\t left: 50%;\n\t transform: translatex(-50%);\n}\n .thermostat .bar .hold {\n\t position: absolute;\n\t width: 100%;\n\t height: 100%;\n\t clip: rect(0px, 356px, 356px, 178px);\n\t border-radius: 100%;\n\t background-color: #3a3749;\n}\n .thermostat .bar .fill {\n\t position: absolute;\n\t width: 100%;\n\t height: 100%;\n\t border-radius: 100%;\n\t clip: rect(0px, 178px, 356px, 0px);\n}\n .thermostat .bar .fill1 {\n\t background: -webkit-linear-gradient(top, #ff4900 20%, #ff4900 100%);\n}\n .thermostat .bar .fill2 {\n\t background: -webkit-linear-gradient(top, #ff4900 40%, #ff9e23 100%);\n}\n .thermostat .bar .right {\n\t z-index: 3;\n\t -webkit-transform: rotate(180deg);\n\t -moz-transform: rotate(180deg);\n\t transform: rotate(180deg);\n}\n .thermostat .bar .right .fill {\n\t z-index: 3;\n\t transform: rotate(180deg);\n\t animation: right 1s linear both;\n\t transition: transform 0.6s;\n}\n .thermostat .bar .left .fill {\n\t z-index: 1;\n\t animation: left 0.3s linear both;\n\t animation-delay: 1s;\n\t transition: transform 0.6s;\n}\n .thermostat .bar span {\n\t width: 356px;\n\t font-weight: 800;\n\t position: absolute;\n\t bottom: 0px;\n\t text-align: center;\n\t text-transform: uppercase;\n\t font-size: 15px;\n\t color: #2e2c3a;\n\t z-index: 10;\n}\n .thermostat .center {\n\t position: absolute;\n\t width: 260px;\n\t height: 260px;\n\t background: #e3e4ed;\n\t animation: bound-in 0.6s ease forwards;\n}\n .thermostat .center:hover .arrow {\n\t opacity: 1;\n\t transition: opacity 0.3s;\n}\n .thermostat .center:hover .minus {\n\t left: 10px;\n\t transition: left 0.3s ease-out;\n}\n .thermostat .center:hover .plus {\n\t right: 45px;\n\t transition: right 0.3s ease-out;\n}\n .thermostat .center span i {\n\t position: absolute;\n\t color: #b9b6c8;\n\t font-size: 40px;\n\t font-weight: 500;\n\t line-height: 260px;\n}\n .thermostat .center .arrow {\n\t opacity: 0;\n\t transition: opacity 0.3s;\n\t cursor: pointer;\n}\n .thermostat .center .minus {\n\t position: absolute;\n\t animation: arrow-left 1s forwards;\n}\n .thermostat .center .plus {\n\t position: absolute;\n\t animation: arrow-right 1s forwards;\n}\n .thermostat .center .small {\n\t position: absolute;\n\t width: 150px;\n\t height: 150px;\n\t background: #f8f9fa;\n\t text-align: center;\n\t animation: bound-in-small 0.6s ease forwards;\n}\n .thermostat .center .small .heat {\n\t line-height: 150px;\n\t font-size: 59px;\n\t color: #57545f;\n\t font-weight: 300;\n}\n .thermostat .center .small .heat:after {\n\t content: '°';\n\t display: block;\n\t position: absolute;\n\t font-size: 40px;\n\t top: -20px;\n\t right: 30px;\n}\n @-webkit-keyframes shadow {\n\t 0% {\n\t\t transform: translate(-50%, -50%) rotate(-190deg);\n\t}\n\t 100% {\n\t\t transform: translate(-50%, -50%) rotate(10deg);\n\t}\n}\n @-webkit-keyframes right {\n\t 0% {\n\t\t transform: rotate(0deg);\n\t}\n\t 100% {\n\t\t transform: rotate(180deg);\n\t}\n}\n @-webkit-keyframes left {\n\t 0% {\n\t\t transform: rotate(0deg);\n\t}\n\t 100% {\n\t\t transform: rotate(10deg);\n\t}\n}\n @-webkit-keyframes bound-in {\n\t 10% {\n\t\t box-shadow: 0px 7px 30px 5px rgba(96, 93, 111, 0.25);\n\t\t transform: translate(-50%, -50%) scale(0.8);\n\t}\n\t 80% {\n\t\t transform: translate(-50%, -50%) scale(1.03);\n\t}\n\t 100% {\n\t\t box-shadow: 0px 15px 35px 11px rgba(46, 44, 58, 0.60);\n\t\t transform: translate(-50%, -50%) scale(1);\n\t}\n}\n @-webkit-keyframes bound-in-small {\n\t 0% {\n\t\t box-shadow: 0px 5px 10px 5px rgba(96, 93, 111, 0.19);\n\t\t transform: translate(-50%, -50%) scale(0.8);\n\t}\n\t 80% {\n\t\t transform: translate(-50%, -50%) scale(1.03);\n\t}\n\t 100% {\n\t\t box-shadow: 0px 15px 35px 5px rgba(96, 93, 111, 0.30);\n\t\t transform: translate(-50%, -50%) scale(1);\n\t}\n}\n @-webkit-keyframes arrow-left {\n\t 0% {\n\t\t left: 45px;\n\t\t opacity: 0;\n\t}\n\t 100% {\n\t\t left: 10px;\n\t\t opacity: 1;\n\t}\n}\n @-webkit-keyframes arrow-right {\n\t 0% {\n\t\t right: 75px;\n\t\t opacity: 0;\n\t}\n\t 100% {\n\t\t right: 45px;\n\t\t opacity: 1;\n\t}\n}\n ",
    "controllerScript": "\nvar gradi = 55;\nself.onInit = function() {\nvar settings = self.ctx.settings;\n\nvar max = settings.maxValue;\nvar min = settings.minValue;\nvar units = 320 / (max - min);\nvar center_value = (min + max) / 2;\nvar start_degree = -160;\nconst start_degree_delta = 20;\nconst fill2_start_value = 180;\nvar move_unit = 1;\nif (settings.stepWidth == '0.1')\n    move_unit = 0.1;\n\nrequestStatus();\n\nfunction updateGr() {\n  $('.heat', self.ctx.$container).text('' + gradi);\n  $('.ext', self.ctx.$container).text('' + gradi);\n  var v = start_degree + (gradi - min) * units;\n  console.log(v);\n  $('.number', self.ctx.$container).css('transform', `translate(-50%, -50%) rotate(${v}deg)`);\n  $('.fill', self.ctx.$container).css('animation', 'none');\n  $('.shadow', self.ctx.$container).css('animation', 'none');\n}\n\nconst getFixedValue = (value) => {\n  console.log(value);\n  return +value.toFixed(1);\n};\n\nconst minux_action = () => {\n  if (gradi > min) {\n    gradi = getFixedValue(gradi - move_unit);\n    updateGr();\n    const low_value = center_value - 1;\n\n    if (gradi >= center_value) {\n      $('.fill1', self.ctx.$container)\n        .css('transform', `rotate(${(gradi - center_value) * units}deg)`)\n        .css('transition-delay', '0s');\n    } else if (gradi == low_value) {\n      $('.fill2', self.ctx.$container)\n        .css(\n          'transform',\n          `rotate(${(gradi - min) * units + start_degree_delta}deg)`\n        )\n        .css('transition-delay', '0.5s');\n    } else {\n      $('.fill2', self.ctx.$container)\n        .css(\n          'transform',\n          `rotate(${(gradi - min) * units + start_degree_delta}deg)`\n        )\n        .css('transition-delay', '0s');\n        $('.fill1', self.ctx.$container)\n        .css(\n          'transform',\n          `rotate(${0}deg)`\n        )\n        .css('transition-delay', '0s');\n        \n    }\n    sendValue();\n  }\n  \n};\nconst plus_action = () => {\n  const top_value = center_value + 1;\n  if (gradi < max) {\n    gradi = getFixedValue(gradi + move_unit);\n    updateGr();\n    if (gradi > top_value) {\n      $('.fill1', self.ctx.$container)\n        .css('transform', `rotate(${(gradi - center_value) * units}deg)`)\n        .css('transition-delay', '0s');\n    } else if (gradi == top_value) {\n      $('.fill1', self.ctx.$container)\n        .css('transform', `rotate(${(gradi - center_value) * units}deg)`)\n        .css('transition-delay', '0.5s');\n    } else {\n      $('.fill2', self.ctx.$container)\n        .css(\n          'transform',\n          `rotate(${(gradi - min) * units + start_degree_delta}deg)`\n        )\n        .css('transition-delay', '0s');\n    }\n    sendValue();\n  }\n  \n};\nconst init = () => {\n  minux_action();\n  plus_action();\n  updateGr();\n};\n\n$('.minus', self.ctx.$container).mousedown(minux_action);\n$('.plus', self.ctx.$container).mousedown(plus_action);\n\ninit();\n\nfunction requestStatus() {\n    method = settings.statusRequestMethod;\n    timeout = settings.requestTimeout;\n    paramsBody = \"\";\n    self.ctx.controlApi.sendTwoWayCommand(method, \n                        paramsBody, \n                        timeout)\n        .subscribe(\n            function success(responseBody) {\n                   gradi = parseFloat(responseBody);   \n                   if (gradi < min)\n                        gradi = min;\n                 if (gradi > max)\n                    gradi = max;\n                   updateGr();\n                   init();\n                }\n                );\n}\n\n\n\n\n\n\n}\n\n    sendValue = function() {\n        var settings = self.ctx.settings;\n        var method = settings.changeRequestMethod;\n        \n        var paramsBody = gradi;\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\nself.onResize = function() {\n    if (self.ctx.height < self.ctx.width)\n $('.thermostat', self.ctx.$container)[0].style.zoom =  1*(self.ctx.height / 410);\n    else\n     $('.thermostat', self.ctx.$container)[0].style.zoom =  1*(self.ctx.width / 410);\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"minValue\": {\n                \"title\": \"Minimum Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"maxValue\": {\n                \"title\": \"Maximum Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"stepWidth\": {\n                \"title\": \"Step Width\",\n                \"type\": \"string\",\n                \"enum\": [\n                    \"0.1\",\n                    \"1\"],\n                \"default\": \"1\"\n            },\n\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"statusRequestMethod\": {\n                \"title\": \"Status request Method\",\n                \"type\": \"string\",\n                \"default\": \"getValue\"\n            },\n            \"changeRequestMethod\": {\n                \"title\": \"Change request Method\",\n                \"type\": \"string\",\n                \"default\": \"setValue\"\n            },\n        \"required\": [\n                     \"requestTimeout\",\n                     \"statusRequestMethod\",\n                      \"changeRequestMethod\"\n                     ]\n        }\n    },\n    \"form\": [\n        \"minValue\",\n        \"maxValue\",\n        \"stepWidth\",\n        \"requestTimeout\",\n    \"statusRequestMethod\",\n     \"changeRequestMethod\"\n    ]\n\n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"maxValue\":100,\"stepWidth\":\"1\",\"statusRequestMethod\":\"getValue\",\"changeRequestMethod\":\"setValue\",\"minValue\":0},\"title\":\"Thermostat 1\",\"targetDeviceAliasIds\":[\"6fc9ec03-fff4-e055-1590-c3f4ee02d74e\"]}"
  },
  "image": null,
  "description": null
}