gauge_3.json

{
  "alias": "gauge_3",
  "name": "Gauge 3",
  "descriptor": {
    "type": "latest",
    "sizeX": 8.5,
    "sizeY": 8,
    "resources": [
      {
        "url": "https://bernii.github.io/gauge.js/dist/gauge.min.js"
      }
    ],
    "templateHtml": "<div id=\"preview\">\n\n<div id=\"preview-textfield\" style=\"font-size: 35px;\">1,250</div>\n<canvas id=\"my-gauge\"></canvas>\n</div>",
    "templateCss": "#container {\n    \n}\n#preview-textfield{\n top: 65px; left: 0; right: 0;\n  text-align: center; font-size: 2em; font-weight: bold;\n  color: black; font-family: 'Amaranth', sans-serif;\n}\n\n#my-gauge{\ntop: 50%;\n     transform:translate(-50%, -50%);\n     \n    position: absolute;\n  left: 50%;\n}",
    "controllerScript": "var canvasElement;\nvar gauge;\n\nself.onInit = function() {\n    settings = self.ctx.settings;\n    \n    \n    var opts = {\n    angle: settings.angle/100 || 0, // The span of the gauge arc\n  lineWidth: settings.width || 0.4, // The line thickness\n  radiusScale: 1, // Relative radius\n  pointer: {\n    length: 0.6, // // Relative to gauge radius\n    strokeWidth: 0.035, // The thickness\n    color: '#000000' // Fill color\n  },\n  limitMax: false,     // If false, max value increases automatically if value > maxValue\n  limitMin: false,     // If true, the min value of the gauge will be fixed\n  colorStart: '#6FADCF',   // Colors\n  colorStop: '#8FC0DA',    // just experiment with them\n  strokeColor: '#E0E0E0',  // to see which ones work best for you\n  generateGradient: true,\n  highDpiSupport: true,     // High resolution support\n  percentColors: [[0.0, settings.startColor || \"#a9d70b\" ],  [1.0, settings.endColor || \"#ff0000\"]],\n  \n};\n    \n    canvasElement = $('#my-gauge', self.ctx.$container)[0];\n    gauge = new Gauge(canvasElement).setOptions(opts);;\n    gauge.minValue = settings.minValue||0; \n    gauge.maxValue = settings.maxValue||100; \n    gauge.animationSpeed = 16; \n    self.onResize();\n}\n\nself.onResize = function() {\n    \n    if (self.ctx.width < self.ctx.height+50)\n    $('#preview', self.ctx.$container)[0].style.zoom = self.ctx.width/290;\n    else\n    {\n    $('#preview', self.ctx.$container)[0].style.zoom = self.ctx.height/200;\n    $('#preview-textfield', self.ctx.$container)[0].style.width = $('#preview', self.ctx.$container)[0].style.width;\n    }\n\n\n    \n    \n    //canvasElement.width = self.ctx.width;\n    //canvasElement.height = self.ctx.height;\n    gauge.update(true);\n    gauge.render();\n}\n\nself.onDataUpdated = function() {\n    if (self.ctx.data.length > 0)\n    {\n        if (self.ctx.data[0].data.length > 0)\n        {\n    var value = self.ctx.data[0].data[0][1];\n    gauge.set(value);\n    $('#preview-textfield', self.ctx.$container)[0].innerText = value.toFixed(2) + ' ' + (settings.unit || '°C');\n        }\n    }\n}",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"maxValue\": {\n                \"title\": \"Maximum Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"minValue\": {\n                \"title\": \"Minimum Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"unit\": {\n                \"title\": \"Unit\",\n                \"type\": \"string\",\n                \"default\": \"°C\"\n            },\n            \"width\": {\n                \"title\": \"Gauge width\",\n                \"type\": \"number\",\n                \"default\": 0.4\n            },\n            \"startColor\": {\n                \"title\": \"Min. Color\",\n                \"type\": \"string\",\n                \"default\": \"#6FADCF\"\n            },\n            \"endColor\": {\n                \"title\": \"Max. Color\",\n                \"type\": \"string\",\n                \"default\": \"#8FC0DA\"\n            },\n            \"angle\": {\n                \"title\": \"Angle\",\n                \"type\": \"number\",\n                \"default\": 0\n            }\n            \n        },\n        \"required\": [\"maxValue\"]\n    },\n    \"form\": [\n        \"maxValue\",\n        \"minValue\",\n        \"unit\",\n        \"width\",\n        {\n            \"key\": \"startColor\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"endColor\",\n            \"type\": \"color\"\n        },\n        \"angle\"\n            ]\n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = Math.random() * 100;\\n\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"width\":0.4,\"startColor\":\"#76f10f\",\"endColor\":\"#ff0000\"},\"title\":\"Gauge 3\"}"
  }
}