I’ll try again
[
{
“id”: “8e967a5a173eac0c”,
“type”: “ui-template”,
“z”: “150d8aa36daea093”,
“group”: “f063204ef1289231”,
“page”: “”,
“ui”: “”,
“name”: “48v SOC”,
“order”: 1,
“width”: 0,
“height”: 0,
“head”: “”,
“format”: “\n\n <div class="hn-sng">\n <div class="label">{{label}}\n <svg ref="hn-gauge" width="100%" height="100%" viewBox="0 0 100 100">\n \n <path v-for="(item, index) in sectors" :key="index" :ref="‘sector-’ + index" class="sector"\n stroke-width="5" d="M 10 90 A 47.5 47.5 25 1 1 90 90">\n \n \n <path class="tick-minor" :style="{‘stroke-dasharray’:minor }" pathLength="492" stroke-width="5" d="M 10 90 A 47.5 47.5 25 1 1 90 90" >\n <path ref="arc" class="tick-major" :style="{‘stroke-dasharray’:major }" pathLength="246" stroke-width="5" d="M 10 90 A 47.5 47.5 25 1 1 90 90">\n \n \n <text v-for="(item, index) in numbers" :key="index" class="num" text-anchor="middle" y="-37"\n :style="rotate: ${item.r}deg;">{{item.n}}\n \n \n <text class="measurement" y="48" x="50%" text-anchor="middle">{{measurement}}\n <text class="unit" y="75" x="50%" text-anchor="middle">{{unit}}\n <text class="value" y="90" x="50%" text-anchor="middle">{{formattedValue}}\n <text v-if="showUpdate" ref="update" class="update" y="100" x="0"\n text-anchor="left">{{formattedUpdate}}\n \n <g ref="o-needle" class="o-needle">\n <path d="M 0,0 -1.5,0 -0.25,-43 0.25,-43 1.5,0 z">\n <circle cx="0" cy="0" r="3">\n \n \n \n\n\n\n\n .hn-sng {\n position: relative;\n user-select: none;\n }\n\n .hn-sng .label {\n position: absolute;\n font-size: 1rem;\n color: currentColor;\n text-align: center;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .hn-sng .value {\n fill: currentColor;\n font-weigth: 600;\n }\n\n .hn-sng .unit {\n fill: currentColor;\n font-size: 0.4rem;\n }\n\n .hn-sng .measurement {\n fill: currentColor;\n font-size: 0.5rem;\n }\n\n .hn-sng .update {\n fill: currentColor;\n fill-opacity: 0.6;\n font-size: 0.35rem;\n }\n\n .hn-sng .num {\n transform-origin: center 64.15%;\n transform: translate(50%, 64.15%);\n fill: currentColor;\n fill-opacity: 0.6;\n font-size: .35rem;\n }\n\n .hn-sng .tick-minor { \n stroke-dashoffset: 0;\n fill: none;\n stroke: currentColor;\n stroke-opacity: 0.6;\n }\n\n .hn-sng .tick-major {\n stroke-dashoffset: 0.75;\n fill: none;\n stroke: currentColor;\n }\n\n .hn-sng .sector {\n fill: none;\n stroke: transparent;\n }\n .hn-sng .sector:first-of-type {\n stroke-dashoffset:-0.5;\n }\n\n .hn-sng .o-needle {\n transform-origin: center 64.15%;\n transform: translate(50%, 64.15%);\n transition: unset;\n }\n\n .hn-sng .o-needle path,\n .hn-sng .o-needle circle {\n fill: currentColor;\n }\n”,
“storeOutMessages”: true,
“passthru”: true,
“resendOnRefresh”: true,
“templateScope”: “local”,
“className”: “”,
“x”: 720,
“y”: 760,
“wires”: [
]
},
{
“id”: “f063204ef1289231”,
“type”: “ui-group”,
“name”: “DC 48v”,
“page”: “5d236aa2f0e21ec2”,
“width”: “2”,
“height”: “1”,
“order”: 2,
“showTitle”: true,
“className”: “”,
“visible”: “false”,
“disabled”: “false”
},
{
“id”: “5d236aa2f0e21ec2”,
“type”: “ui-page”,
“name”: “Teknisk”,
“ui”: “36b624c04356977e”,
“path”: “/page1”,
“icon”: “home”,
“layout”: “grid”,
“theme”: “b68539bfb39f3512”,
“order”: 2,
“className”: “”,
“visible”: “true”,
“disabled”: “false”
},
{
“id”: “36b624c04356977e”,
“type”: “ui-base”,
“name”: “Wigwam3”,
“path”: “/dashboard”,
“includeClientData”: true,
“acceptsClientConfig”: [
“ui-notification”,
“ui-control”
],
“showPathInSidebar”: false,
“navigationStyle”: “default”
},
{
“id”: “b68539bfb39f3512”,
“type”: “ui-theme”,
“name”: “Wigwam theme”,
“colors”: {
“surface”: “#1b6407”,
“primary”: “#0ba847”,
“bgPage”: “#f4f5f5”,
“groupBg”: “#d8e9da”,
“groupOutline”: “#73aa64”
},
“sizes”: {
“pagePadding”: “8px”,
“groupGap”: “3px”,
“groupBorderRadius”: “20px”,
“widgetGap”: “2px”
}
}
]
