-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gauge-hotnipi.iife.min.js.map
7 lines (7 loc) · 36.1 KB
/
gauge-hotnipi.iife.min.js.map
1
2
3
4
5
6
7
{
"version": 3,
"sources": ["gauge-hotnipi.js"],
"sourcesContent": ["/** W3C Component version of hotnipi's gauge\r\n * Gifted to TotallyInformation by hotnipi for use with uibuilder.\r\n * But can be used anywhere that supports W3C vanilla components.\r\n *\r\n * attributes:\r\n * \"min\" - (number, mandatory) min value\r\n * \"max\" - (number, mandatory) max value\r\n * \"shape\" - (string, optional) shape of the gauge. \"round\" makes gauge round shape and removes rivets, \"rect\" is default\r\n * \"platehue\" - (number, optional) for dark theme, the plate color hue can be changed\r\n * \"multiplier\" - (number, optional) multiplier for all values. scale numbers and value are divided by that, gauge shows multiplier on plate (fe: x100)\r\n * \"measurement\" - (string, optional) the name of the measurement (temperature, humidity ...)\r\n * \"unit\" - (string, optional) the unit of the measurement\r\n * \"rivets\" - (boolean, optional) show/hide rivets. defaults to true\r\n * \"digits\" - (json string, optional) size and placement of the scale digits. '{\"size\":100,\"distance\":14}' size is treated as percentage, distance is arbitrary number around 15.\r\n * \"led\" - (boolean, optional) shows small led which blinks couple of times when update is received.\r\n * \"zones\" - (json string, optional) configuration of zones. An array of objects where:\r\n * \"type\" (string) - color choice. acceptable values \"low\", \"normal\", \"warn\", \"high\"\r\n * \"cover\" (number) - size of zone. acceptable values 1, 2 3. (1 covers space between major ticks)\r\n * \"rotate\" (number) - to find correct value, try with 0 and manually rotate to desired position using browser developer tools. When position found, adjust the code.\r\n * \"size\" - (CSS size string) - Optional. Defines the outer size (width/height). If supplied, no outer div is required to set the size. If omitted, the outer elements must set a size somewhere.\r\n *\r\n * All attributes can be changed at runtime, forces redraw.\r\n *\r\n * fe:\r\n * document.getElementById('gauge').setAttribute('digits',JSON.stringify({size:80,distance:15}))\r\n * document.getElementById('gauge').setAttribute('max',1200)\r\n *\r\n * CHANGELOG:\r\n * - Wrap component as per other uibuilder components\r\n * - Move styles to the template\r\n * - Define class variables directly, rename this.size to this.width to more accurately reflect the content\r\n * - Add a `size` attribute & config var. Can now use with an outer div setting the size OR supply the size without the outer div\r\n * - Set gauge element style properties using setProperty directly rather than via a complex (and slow to compute) compound string\r\n * - Slight adjustments to use of uib-brand standard variables - particularly making the text slightly brighter (--text3 rather than --text2)\r\n */\r\n\r\nconst componentName = 'gauge-hotnipi'\r\nconst className = 'GaugeHotnipi' // eslint-disable-line no-unused-vars\r\n\r\n// just for syntax highlighting in VSCode (requires the lit-html extension)\r\nfunction html(strings, ...keys) {\r\n return strings.map((s, i) => {\r\n return s + (keys[i] || '')\r\n }).join('')\r\n}\r\n\r\nconst template = document.createElement('template')\r\ntemplate.innerHTML = html`\r\n <style>\r\n :host{ \r\n --hng-needle-color: var(--needle-color,hsl(1, 74%, 52%));\r\n --hng-zone-color-high: var(--zone-color-high,hsla(5, 100%, 65%, 0.459));\r\n --hng-zone-color-warn: var(--zone-color-warn,hsla(39, 100%, 59%, 0.459));\r\n --hng-zone-color-normal: var(--zone-color-normal,hsla(97, 100%, 65%, 0.333));\r\n --hng-zone-color-low: var(--zone-color-low,hsla(200, 100%, 65%, 0.522));\r\n --hng-needle-speed: var(--needle-speed,0.5);\r\n --hng-plate-hue: 0;\r\n }\r\n .g-wrapper {\r\n display: grid;\r\n grid-template-rows: 1fr;\r\n width: 100%;\r\n height: 100%;\r\n align-content: center;\r\n align-items: center;\r\n justify-items: center;\r\n }\r\n .g-wrapper-label-0 .g-container {\r\n height: calc(100% - 6px);\r\n } \r\n .g-container {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n user-select: none;\r\n width: 100%;\r\n height: 100%;\r\n } \r\n .g-body {\r\n position: relative;\r\n display: flex;\r\n align-content: center;\r\n align-items: center;\r\n justify-content: center;\r\n height: 98%;\r\n width: 98%;\r\n border-radius: 15%;\r\n box-shadow: 0px 2px 4px 2px #00000030;\r\n background: linear-gradient(0deg, var(--surface3) 0%, var(--surface4) 99%, var(--surface1) 100%);\r\n user-select: none;\r\n }\r\n .g-round{\r\n border-radius: 100%;\r\n } \r\n .g-body::before {\r\n content: '';\r\n position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n opacity: 0.1;\r\n border-radius: 15%; \r\n } \r\n .g-ring {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n align-content: center;\r\n width: 94%;\r\n height: 94%;\r\n border-radius: 50%;\r\n background: linear-gradient(180deg, var(--surface2) 0%, var(--surface4) 99%, var(--surface5) 100%);\r\n } \r\n\r\n .g-plate {\r\n --plate-hue:var(--hng-plate-hue);\r\n position: relative;\r\n overflow: hidden;\r\n width: 93%;\r\n height: 93%;\r\n border-radius: 50%;\r\n box-shadow: inset 0 0 11px hsl(var(--plate-hue) 67% 56% / 60%);\r\n background: radial-gradient(circle, hsl(var(--plate-hue), 31%, 17%) 0%, hsl(var(--plate-hue), 20%, 30%) 40%, hsl(var(--plate-hue), 69%, 10%) 100%);\r\n } \r\n\r\n @media (prefers-color-scheme: light){\r\n .g-body {\r\n box-shadow: 0px 2px 6px 0px #00000020;\r\n }\r\n .g-plate {\r\n background: unset;\r\n box-shadow: inset 0 0 20px #00000035;\r\n }\r\n .g-ring{\r\n background: linear-gradient(180deg, var(--surface5) 0%, var(--surface2) 99%, var(--surface1) 100%);\r\n }\r\n } \r\n .g-led{\r\n position: absolute;\r\n left:48%;\r\n top:27%;\r\n border-radius: 2em;\r\n width: 0.5em;\r\n height: 0.5em;\r\n background-color: hsla(360 100% 50% / 100%);\r\n box-shadow: 0 0 4px 1px hsl(0, 100%, 25%), inset 0px -5px 6px -3px hsl(360 100% 30%);\r\n filter:saturate(0.05) brightness(3); \r\n }\r\n .g-led.active{\r\n animation:blink 0.25s linear ;\r\n animation-iteration-count: infinite; \r\n }\r\n @keyframes blink{\r\n 50%{filter: none;}\r\n }\r\n .g-ticks {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n filter: drop-shadow(2px 4px 6px hsl(0, 0%, 0%));\r\n } \r\n .g-tick {\r\n position: relative;\r\n left: 0;\r\n top: 50%;\r\n width: 100%;\r\n height: 1px;\r\n margin-bottom: -1px;\r\n background: linear-gradient(90deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 0) 2%, var(--text3) 2%, var(--text3) 10%, hsla(0, 0%, 0%, 0) 10%);\r\n transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));\r\n } \r\n .g-tick.clock {\r\n transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) +270deg)));\r\n } \r\n .g-subtick {\r\n position: relative;\r\n left: 0;\r\n top: 50%;\r\n width: 100%;\r\n height: 1px;\r\n margin-bottom: -1px;\r\n background: linear-gradient(90deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 0) 2%, var(--text3) 2%, var(--text3) 6%, hsla(0, 0%, 0%, 0) 6%);\r\n transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));\r\n } \r\n .g-subtick.clock {\r\n transform: rotate(calc(calc(360deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-subtick-count)) + 270deg)));\r\n } \r\n .g-num {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n text-align: center;\r\n transform: translate(-50%, -50%) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));\r\n } \r\n .g-num.clock {\r\n transform: translate(-50%, -50%) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) + 270deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(360deg / var(--ga-tick-count))*-1 - 270deg)));\r\n } \r\n .g-nums {\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n color: var(--text3);\r\n font-size: calc(var(--digit-size) * 1%);\r\n font-weight: 500;\r\n filter: drop-shadow(2px 4px 10px hsl(0, 0%, 0%));\r\n } \r\n .g-needle {\r\n position: absolute;\r\n left: 0;\r\n top: 49%;\r\n width: 100%;\r\n height: 2%;\r\n filter: drop-shadow(0px 1px 3px hsla(0, 0%, 0%, 0.502));\r\n background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 10%, var(--hng-needle-color) 10%, var(--hng-needle-color) 65%, hsla(0, 0%, 0%, 0) 65%);\r\n transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));\r\n transition: transform calc(1s * var(--hng-needle-speed));\r\n } \r\n .g-needle-secondary {\r\n position: absolute;\r\n left: 0;\r\n top: 49%;\r\n width: 100%;\r\n height: 2%;\r\n filter: drop-shadow(0px 1px 3px hsla(0, 0%, 0%, 0.502));\r\n background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 15%, var(--hng-needle-color-secondary) 15%, var(--hng-needle-color-secondary) 50%, hsla(0, 0%, 0%, 0) 50%);\r\n transform: rotate(calc(270deg * calc(var(--gauge-value-secondary, 0deg) / 100) - 45deg));\r\n transition: transform calc(1s * var(--hng-needle-speed));\r\n }\r\n .g-needle.hour {\r\n background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 20%, var(--hng-needle-color) 20%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);\r\n transition: unset;\r\n transform: rotate(var(--time-hour));\r\n } \r\n .g-needle.minute {\r\n top: 49.25%;\r\n height: 1.5%;\r\n background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 15%, var(--hng-needle-color) 15%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);\r\n transition: unset;\r\n transform: rotate(var(--time-minute));\r\n } \r\n .g-needle.second {\r\n top: 49.5%;\r\n height: 0.5%;\r\n background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 10%, var(--hng-needle-color) 10%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);\r\n transform: rotate(var(--time-second));\r\n transition: unset;\r\n } \r\n .g-needle-ring {\r\n position: absolute;\r\n width: calc(var(--container-size) * 2.5%);\r\n height: calc(var(--container-size) * 2.5%);\r\n top: 50%;\r\n left: 50%;\r\n border-radius: 50%;\r\n box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.612);\r\n background: linear-gradient(hsl(0, 0%, 88%), hsl(0, 0%, 71%));\r\n background: linear-gradient(var(--surface4), var(--surface3));\r\n transform: translate(-50%, -50%);\r\n } \r\n .g-val {\r\n position: absolute;\r\n text-align: center;\r\n left: 50%;\r\n bottom: 0%;\r\n width: 80px;\r\n font-family: monospace;\r\n font-size: calc(var(--container-size) * 50%);\r\n color: var(--text3);\r\n filter: drop-shadow(2px 3px 2px hsla(0, 0%, 0%, 0.314));\r\n transform: translateX(-50%);\r\n }\r\n .g-val-ring {\r\n position: absolute;\r\n right: 0%;\r\n top: 0%;\r\n width: calc(calc(var(--container-size) * 7%) / calc(var(--container-size)/4));\r\n height: calc(calc(var(--container-size) * 6%) / calc(var(--container-size)/4));\r\n border-radius: 50%;\r\n background: linear-gradient(180deg, hsl(0, 0%, 31%) 0%, hsl(0, 0%, 84%) 99%, hsl(0, 0%, 93%) 100%);\r\n }\r\n .g-val-plate {\r\n position: absolute;\r\n right: 0%;\r\n top: 0%;\r\n width: 90%;\r\n height: 90%;\r\n border-radius: 50%;\r\n background: hsl(210, 23%, 91%);\r\n box-shadow: inset 0 0 15px hsla(0, 0%, 0%, 0.639);\r\n transform: translate(-5%, 5%);\r\n }\r\n .g-text {\r\n position: absolute;\r\n left: 50%; \r\n width: 100%;\r\n font-family: monospace;\r\n font-size: calc(var(--container-size) * 20%);\r\n text-align: center;\r\n color: var(--text3);\r\n filter: drop-shadow(2px 3px 2px hsla(0, 0%, 0%, 0.502));\r\n transform: translateX(-50%);\r\n } \r\n .g-label {\r\n top: 35%;\r\n }\r\n .g-unit {\r\n top: 62%;\r\n }\r\n .g-multi{\r\n top: 69%;\r\n font-size: calc(var(--container-size) * 27%);\r\n } \r\n .g-rivets {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n } \r\n .g-rivet {\r\n position: absolute;\r\n width: 4%;\r\n height: 4%;\r\n border: 1px solid hsla(0, 0%, 100%, 0.1);\r\n border-radius: 50px;\r\n box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.596), -1px -1px 5px hsla(0, 0%, 0%, 0.2); \r\n } \r\n .g-rivet:nth-child(1) {\r\n top: 3%;\r\n left: 3%;\r\n } \r\n .g-rivet:nth-child(2) {\r\n top: 3%;\r\n right: 3%;\r\n } \r\n .g-rivet:nth-child(3) {\r\n bottom: 3%;\r\n left: 3%;\r\n } \r\n .g-rivet:nth-child(4) {\r\n bottom: 3%;\r\n right: 3%;\r\n }\r\n .g-zone {\r\n position: absolute;\r\n width: 48%;\r\n height: 48%;\r\n top: 2%;\r\n left: 50%;\r\n box-sizing: border-box;\r\n border-radius: 0 100% 0 0;\r\n border-color: var(--hng-zone-color-normal);\r\n border-top: calc(var(--container-size) * 2.5px) solid;\r\n border-right: calc(var(--container-size) * 2.5px) solid;\r\n transform-origin: bottom left;\r\n } \r\n .g-zone-1 {\r\n clip-path: polygon(0% 0%, 100% 0%, 50% 0%, 0% 100%);\r\n }\r\n .g-zone-2 {\r\n clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 100%);\r\n }\r\n .g-zone-3 {\r\n clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)\r\n }\r\n .g-zone.high {\r\n border-color: var(--hng-zone-color-high); \r\n } \r\n .g-zone.warn {\r\n border-color: var(--hng-zone-color-warn); \r\n } \r\n .g-zone.normal {\r\n border-color: var(--hng-zone-color-normal); \r\n } \r\n .g-zone.low {\r\n border-color: var(--hng-zone-color-low);\r\n }\r\n </style>\r\n`\r\n\r\nclass GaugeHotnipi extends HTMLElement {\r\n\r\n //#region ---- Class Variables ----\r\n config = {\r\n /** Minimum scale number */\r\n min: 0,\r\n /** Maximum scale number */\r\n max: 100,\r\n /** @type {\"rect\"|\"round\"} Gauge shape */\r\n shape: 'rect',\r\n /** Show the corner \"rivets\" */\r\n rivets: true,\r\n /** Show the indicator LED - lights when a value is received */\r\n led: true,\r\n /** @type {Array<number>} */\r\n scales: [],\r\n measurement: '',\r\n unit: '',\r\n multiplier: 0,\r\n digits: { size: 100, distance: 14 },\r\n zones: [],\r\n platehue: 0,\r\n /** Default width/height - CSS specification */\r\n size: '100%',\r\n }\r\n\r\n /** @type {number|undefined} The previous value of the gauge */\r\n lastValue\r\n /** @type {number|undefined} The width of the bounding rectangle of the gauge object */\r\n width\r\n //#endregion ---- ---- -----\r\n\r\n constructor() {\r\n super()\r\n\r\n const shadow = this.attachShadow({ mode: 'open', delegatesFocus: true })\r\n shadow.append(template.content.cloneNode(true))\r\n\r\n this.dispatchEvent(new Event(`${componentName}:construction`, { bubbles: true, composed: true }))\r\n\r\n this.wrapper = document.createElement('div')\r\n shadow.appendChild(this.wrapper)\r\n }\r\n\r\n static get observedAttributes() {\r\n return ['min', 'max', 'shape', 'multiplier', 'measurement', 'unit', 'rivets', 'digits', 'led', 'zones', 'platehue', 'size']\r\n }\r\n\r\n connectedCallback() {\r\n this.draw()\r\n }\r\n\r\n // TODO: Improve attribute error logs\r\n attributeChangedCallback(name, from, to) {\r\n if (from !== to) { // eslint-disable-line sonarjs/no-collapsible-if\r\n if (Object.prototype.hasOwnProperty.call(this.config, name)) {\r\n switch (name) {\r\n case 'min': {\r\n to = parseFloat(to)\r\n if (isNaN(to)) {\r\n to = 0\r\n }\r\n break\r\n }\r\n case 'max': {\r\n to = parseFloat(to)\r\n if (isNaN(to)) {\r\n to = 100\r\n }\r\n break\r\n }\r\n case 'platehue': {\r\n // If a string passed as the hue, attempt to calculate the actual value.\r\n // Allows for internal and external css variables to be used.\r\n console.debug('debug platehue: ', isNaN(to), getComputedStyle(document.body).getPropertyValue(to))\r\n if (isNaN(to)) {\r\n const hue = getComputedStyle(document.body).getPropertyValue(to)\r\n if (hue === '') to = this.config.platehue\r\n else to = hue\r\n }\r\n break\r\n }\r\n case 'multiplier': {\r\n to = parseFloat(to)\r\n if (isNaN(to) || to === 0) {\r\n to = false\r\n }\r\n break\r\n }\r\n case 'led':\r\n case 'rivets': {\r\n to = to === 'true' ? true : false // eslint-disable-line no-unneeded-ternary\r\n }\r\n case 'digits': { // eslint-disable-line no-fallthrough\r\n try {\r\n to = JSON.parse(to)\r\n }\r\n catch (error) {\r\n console.log(error)\r\n to = this.config.digits\r\n }\r\n break\r\n }\r\n case 'zones': {\r\n try {\r\n to = JSON.parse(to)\r\n } catch (error) {\r\n console.warn(error, to)\r\n to = this.config.zones\r\n }\r\n break\r\n }\r\n default:\r\n break\r\n }\r\n this.config[name] = to\r\n }\r\n }\r\n\r\n this.draw()\r\n if (this.lastValue) {\r\n this.update(this.lastValue)\r\n }\r\n }\r\n\r\n /** Draws the gauge into the DOM */\r\n draw() {\r\n\r\n // scales from min - max\r\n const gap = ((this.config.max - this.config.min) / 10)\r\n let n = this.config.min\r\n this.config.scales = []\r\n const use = this.config.multiplier\r\n for (let i = 0; i < 11; ++i) {\r\n this.config.scales.push(n)\r\n n = parseFloat((n + gap).toFixed(2))\r\n }\r\n if (use && use !== 0) {\r\n this.config.scales = this.config.scales.map(n => parseFloat((n / use).toFixed(2)))\r\n }\r\n\r\n // clear\r\n this.wrapper.replaceChildren()\r\n\r\n // init wrapper\r\n this.wrapper.style.width = this.config.size\r\n this.wrapper.style.height = this.config.size\r\n this.wrapper.style.position = 'relative'\r\n this.width = this.wrapper.getBoundingClientRect().width\r\n\r\n // create gauge\r\n this.gauge = document.createElement('div')\r\n\r\n // this.gauge.setAttribute(\"style\", \"--gauge-value:0;--container-size:\" + this.width / 50 + \";--gn-distance:\" + this.config.digits.distance + \";--digit-size:\" + this.config.digits.size + \";--ga-tick-count:10;--ga-subtick-count:100;--hng-plate-hue:\" + this.config.platehue + \";\");\r\n this.gauge.setAttribute('style', '--gauge-value:0;--ga-tick-count:10;--ga-subtick-count:100;')\r\n this.gauge.style.width = '100%'\r\n this.gauge.style.setProperty('height', '100%')\r\n this.gauge.style.setProperty('--container-size', this.width / 50)\r\n this.gauge.style.setProperty('--gn-distance', this.config.digits.distance)\r\n this.gauge.style.setProperty('--digit-size', this.config.digits.size)\r\n this.gauge.style.setProperty('--hng-plate-hue', this.config.platehue)\r\n this.gauge.style.setProperty('--plate-hue', this.config.platehue)\r\n\r\n // body\r\n const body = document.createElement('div')\r\n body.className = 'g-body'\r\n if (this.config.shape === 'round') {\r\n body.classList.add('g-round')\r\n }\r\n this.gauge.appendChild(body)\r\n\r\n // ring\r\n const ring = document.createElement('div')\r\n ring.className = 'g-ring'\r\n body.appendChild(ring)\r\n\r\n // rivets\r\n if (this.config.rivets && this.config.shape === 'rect') {\r\n const rivets = document.createElement('div')\r\n rivets.className = 'g-rivets'\r\n ring.appendChild(rivets)\r\n for (let i = 0; i < 4; ++i) {\r\n const rivet = document.createElement('div')\r\n rivet.className = 'g-rivet'\r\n rivets.appendChild(rivet)\r\n }\r\n }\r\n\r\n // plate\r\n const plate = document.createElement('div')\r\n plate.className = 'g-plate'\r\n ring.appendChild(plate)\r\n\r\n // zones\r\n if (this.config.zones.length > 0) {\r\n let zone, cl\r\n this.config.zones.forEach(z => {\r\n zone = document.createElement('div')\r\n cl = 'g-zone '\r\n cl += 'g-zone-' + z.cover + ' '\r\n cl += z.type\r\n zone.className = cl\r\n zone.style.rotate = z.rotate + 'deg'\r\n plate.appendChild(zone)\r\n })\r\n }\r\n\r\n // led\r\n if (this.config.led) {\r\n this.led = document.createElement('div')\r\n this.led.className = 'g-led'\r\n plate.appendChild(this.led)\r\n }\r\n\r\n // ticks\r\n const ticks = document.createElement('div')\r\n ticks.className = 'g-ticks'\r\n plate.appendChild(ticks)\r\n\r\n for (let i = 1; i < 12; i++) {\r\n const tick = document.createElement('div')\r\n tick.className = 'g-tick'\r\n tick.setAttribute('style', '--ga-tick:' + i)\r\n ticks.appendChild(tick)\r\n }\r\n\r\n for (let i = 2; i < 101; i++) {\r\n const is = i.toString()\r\n if (is.charAt(is.length - 1) === '1') {\r\n continue\r\n }\r\n const tick = document.createElement('div')\r\n tick.className = 'g-subtick'\r\n tick.setAttribute('style', '--ga-tick:' + i)\r\n ticks.appendChild(tick)\r\n }\r\n\r\n // numbers\r\n\r\n const numbers = document.createElement('div')\r\n numbers.className = 'g-nums'\r\n plate.appendChild(numbers)\r\n for (let i = 1; i < 12; i++) {\r\n const num = document.createElement('div')\r\n num.className = 'g-num'\r\n num.setAttribute('style', '--ga-tick:' + i)\r\n num.textContent = (this.config.scales[i - 1]).toString()\r\n numbers.appendChild(num)\r\n }\r\n\r\n // measurement field\r\n if (this.config.measurement) {\r\n const label = document.createElement('div')\r\n label.className = 'g-text g-label'\r\n label.textContent = this.config.measurement\r\n plate.appendChild(label)\r\n }\r\n\r\n // unit\r\n if (this.config.unit) {\r\n const label = document.createElement('div')\r\n label.className = 'g-text g-unit'\r\n label.textContent = this.config.unit\r\n plate.appendChild(label)\r\n }\r\n // multiplier\r\n if (this.config.multiplier) {\r\n const label = document.createElement('div')\r\n label.className = 'g-text g-multi'\r\n label.textContent = 'x' + this.config.multiplier\r\n plate.appendChild(label)\r\n }\r\n\r\n // needle\r\n const needle = document.createElement('div')\r\n needle.className = 'g-needle'\r\n plate.appendChild(needle)\r\n\r\n const needleRing = document.createElement('div')\r\n needleRing.className = 'g-needle-ring'\r\n plate.appendChild(needleRing)\r\n\r\n // valueField\r\n this.valueField = document.createElement('div')\r\n this.valueField.className = 'g-val'\r\n plate.appendChild(this.valueField)\r\n\r\n this.wrapper.appendChild(this.gauge)\r\n\r\n }\r\n\r\n removeBlink() {\r\n this.led.classList.remove('active')\r\n this.delay = null\r\n }\r\n\r\n update(value) {\r\n this.lastValue = value\r\n if (!this.valueField) {\r\n return\r\n }\r\n\r\n const t = this.config.multiplier ? (value / this.config.multiplier).toFixed(1) : value.toFixed(1)\r\n this.valueField.textContent = t\r\n const v = ((value - this.config.min) / (this.config.max - this.config.min)) * 100\r\n this.gauge.style.setProperty('--gauge-value', v)\r\n\r\n // blink led\r\n if (this.config.led) {\r\n if (this.delay != null) {\r\n clearTimeout(this.delay)\r\n this.removeBlink()\r\n }\r\n this.led.classList.add('active')\r\n this.delay = setTimeout(() => this.removeBlink(), 800)\r\n }\r\n }\r\n}\r\n\r\n// Self-register the HTML tag\r\ncustomElements.define(componentName, GaugeHotnipi)\r\n"],
"mappings": "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",
"names": ["componentName", "html", "strings", "keys", "s", "i", "template", "GaugeHotnipi", "__publicField", "shadow", "componentName", "name", "from", "to", "hue", "error", "gap", "n", "use", "body", "ring", "rivets", "rivet", "plate", "zone", "cl", "z", "ticks", "tick", "is", "numbers", "num", "label", "needle", "needleRing", "value", "t", "v"]
}