dynamische SVG-Generierung: Wifi, RF, Temp, Humi, CO2, Noise
-
Hier wieder ein paar Beispiele zum diverse Symbole dynamisch zu generieren.
Wichtig ist, es entsteht ein SVG-Code. Dieser sollte muss in einem Datenpunkt gespeichert werden. Die Darstellung erfolgt via dem Widget String (unescaped).
//Erst-Version 1.0.0 - 13.07.2026 //Ersteller Ro75. //Voraussetzungen (Version 1.0.0 getestet mit) //NodeJS: 22.22.x //Javascript-Adapter: 9.0.18 //Admin-Adapter: 7.8.23 //js-controler: 7.2.2Wifi / RF:
function createConnectivitySvg(type, value, color, inactiveColor = "#bdc0c2") { // type: 1 = Wifi, 2 = Signal let level = 3; if (value > 83) { level = 1; } else if (value > 68) { level = 2; } let svg = ''; if (type === 1) { const fillBottom = color; const fillMiddle = level >= 2 ? color : inactiveColor; const fillTop = level >= 3 ? color : inactiveColor; svg = `<svg height="100%" width="100%" version="1.1" viewBox="-31.7 -31.7 380.42 380.42" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.00317016"><g><path style="fill:${fillTop};" d="M22.21,134.341L0,112.131c42.401-42.403,98.694-65.755,158.509-65.755 c59.813,0,116.105,23.351,158.507,65.751l-22.21,22.21c-36.469-36.468-84.874-56.552-136.297-56.552 C107.084,77.785,58.679,97.87,22.21,134.341z"/><path style="fill:${fillMiddle};" d="M63.944,176.075l-22.211-22.21c31.237-31.237,72.709-48.439,116.775-48.439 c44.067,0,85.537,17.201,116.774,48.437l-22.21,22.21c-25.304-25.303-58.888-39.238-94.564-39.238 C122.832,136.835,89.248,150.77,63.944,176.075z"/><path style="fill:${fillBottom};" d="M105.679,217.811l-22.211-22.21c20.072-20.071,46.723-31.125,75.041-31.125 s54.967,11.053,75.039,31.123l-22.211,22.21c-14.138-14.137-32.898-21.923-52.828-21.923 C138.58,195.885,119.817,203.672,105.679,217.811z"/><path style="fill:${color};" d="M158.509,224.154c-12.836,0-24.457,5.204-32.871,13.615l32.871,32.871l32.871-32.871 C182.967,229.357,171.345,224.154,158.509,224.154z"/></g></svg>`; } else if (type === 2) { const strokeInner = level >= 1 ? color : inactiveColor; const strokeMiddle = level >= 2 ? color : inactiveColor; const strokeOuter = level >= 3 ? color : inactiveColor; svg = `<svg width="100%" height="100%" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M16.2426 7.75738C18.5858 10.1005 18.5858 13.8995 16.2426 16.2427" stroke="${strokeMiddle}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75735" stroke="${strokeMiddle}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.92893 19.0711C1.02369 15.1658 1.02369 8.8342 4.92893 4.92896" stroke="${strokeOuter}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.0711 4.929C22.9763 8.83424 22.9763 15.1659 19.0711 19.0711" stroke="${strokeOuter}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12Z" stroke="${strokeInner}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`; } return svg; }Ein Aufruf könnte wie folgt aussehen für Wifi:
const value = getState('Datenpunkt.Device.wifiPercent').val; const svg = createConnectivitySvg(1, value, '#00aaff'); setState('Dein.Speicherdatenpunkt.wifiSvg', svg, true);Ein Aufruf könnte wie folgt aussehen für Signalstärke:
const value = getState('Datenpunkt.Device.signalPercent').val; const svg = createConnectivitySvg(2, value, '#ff8800'); setState('Dein.Speicherdatenpunkt.signalSvg', svg, true);Temperatur, Feuchtigkeit, CO2, Umgebungslautstärke:
function createEnvSvg(type, colorHex, strokeColor = "#000000") { // type: 1 = Humidity, 2 = Temperature, 3 = CO2, 4 = Noise function hexToRgb(hex) { hex = hex.replace('#', ''); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); return { r: r, g: g, b: b }; } function rgbToHex(r, g, b) { const hr = r.toString(16).padStart(2, '0'); const hg = g.toString(16).padStart(2, '0'); const hb = b.toString(16).padStart(2, '0'); return '#' + hr + hg + hb; } const rgb = hexToRgb(colorHex); const darkR = Math.round(rgb.r * 0.85); const darkG = Math.round(rgb.g * 0.85); const darkB = Math.round(rgb.b * 0.85); const darkerHex = rgbToHex(darkR, darkG, darkB); let svg = ''; if (type === 1) { svg = `<svg width="100%" height="100%" viewBox="-102.4 -102.4 1228.80 1228.80" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path d="M339.7 882.5C196.6 882.5 80.2 766.1 80.2 623c0-133.2 204.8-395.1 228.2-424.5 5.8-7.3 14.5-11.6 23.8-11.7 9.4-0.1 18.1 3.9 24.1 11 1.5 1.8 37.7 44.8 82.2 105.2 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-21.3-29-40.9-54-55.3-72.1-69.2 92-191.2 271.5-191.2 355.4 0 108.9 88.6 197.6 197.6 197.6S537.3 731.9 537.3 623c0-17.1 13.9-31 31-31s31 13.9 31 31c-0.1 143.1-116.5 259.5-259.6 259.5z" fill="${strokeColor}"/><path d="M363.7 468.8c-27.9 59.7-46.8 115.7-46.8 158.4 0 164.6 133.4 298 298 298s298-133.4 298-298c0-12.8-1.9-26.9-5.5-41.9-327.2 33.9-284.9-194.9-543.7-116.5z" fill="${colorHex}"/><path d="M333.6 567.6c-38.2 239.9 123 357.7 287.3 357.7 92.8 0 144.9-12.1 199.6-78.6-261.5 20.7-428.7-99.2-486.9-279.1z" fill="${darkerHex}"/><path d="M614.9 956.1C433.5 956.1 286 808.5 286 627.2c0-173.4 283.4-532.4 295.5-547.6 5.8-7.3 14.5-11.6 23.8-11.7 9.3-0.1 18.1 3.9 24.1 11 2 2.3 49 58.2 106.8 136.6 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-31.8-43.2-60.6-79.8-79.9-103.7C517 266.1 347.9 512.3 347.9 627.2c0 147.2 119.8 267 267 267s267-119.8 267-267c0-29.7-13.2-87.9-76.4-196.2-8.6-14.8-3.6-33.7 11.2-42.3 14.8-8.6 33.7-3.6 42.3 11.2 57.1 97.9 84.8 172.2 84.8 227.4 0 181.3-147.6 328.8-328.9 328.8z" fill="${strokeColor}"/></g></svg>`; } else if (type === 2) { svg = `<svg height="100%" width="100%" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><circle style="fill:${colorHex};" cx="221.32" cy="381.469" r="59.943"/><g><path style="fill:${darkerHex};" d="M221.326,455.991c-41.09,0-74.52-33.43-74.52-74.52s33.43-74.52,74.52-74.52 s74.52,33.43,74.52,74.52S262.416,455.991,221.326,455.991z M221.326,336.107c-25.014,0-45.364,20.35-45.364,45.364 s20.35,45.364,45.364,45.364s45.364-20.35,45.364-45.364S246.339,336.107,221.326,336.107z"/><path style="fill:${darkerHex};" d="M221.361,512c-1.061,0-2.121-0.012-3.187-0.038c-70.33-1.662-127.472-60.279-127.377-130.668 c0.063-46.595,24.418-88.796,64.149-112.209V58.856C154.948,26.403,181.349,0,213.804,0h15.046 c32.453,0,58.856,26.403,58.856,58.856c0,8.051-6.526,14.578-14.578,14.578s-14.578-6.526-14.578-14.578 c0-16.377-13.324-29.701-29.701-29.701h-15.046c-16.377,0-29.701,13.324-29.701,29.701V277.74c0,5.521-3.118,10.567-8.054,13.037 c-34.548,17.286-56.042,51.985-56.093,90.556c-0.073,54.666,44.297,100.191,98.911,101.482c27.549,0.63,53.593-9.582,73.285-28.814 c19.7-19.24,30.549-44.998,30.549-72.528c0-16.546-4.073-32.954-11.779-47.455c-3.779-7.11-1.077-15.936,6.032-19.713 c7.111-3.777,15.936-1.077,19.713,6.032c9.936,18.697,15.189,39.838,15.189,61.136c0,35.449-13.97,68.614-39.333,93.388 C287.924,498.88,255.657,511.999,221.361,512z"/><path style="fill:${darkerHex};" d="M221.326,283.228c-8.051,0-14.578-6.526-14.578-14.578V151.01c0-8.051,6.526-14.578,14.578-14.578 c8.051,0,14.578,6.526,14.578,14.578v117.64C235.903,276.702,229.377,283.228,221.326,283.228z"/><path style="fill:${darkerHex};" d="M406.627,194.304H287.704v-30.613h64.823c8.051,0,14.578-6.526,14.578-14.578 s-6.526-14.578-14.578-14.578h-77.941c-0.249,0-0.491,0.025-0.736,0.038c-0.241-0.012-0.478-0.036-0.723-0.036 c-8.051,0-14.578,6.526-14.578,14.578v119.537c0,8.051,6.526,14.578,14.578,14.578c0.246,0,0.487-0.025,0.729-0.036 c0.243,0.012,0.484,0.036,0.729,0.036h77.941c8.051,0,14.578-6.526,14.578-14.578s-6.526-14.578-14.578-14.578h-64.823v-30.613 h118.923c8.051,0,14.578-6.526,14.578-14.578S414.678,194.304,406.627,194.304z"/><path style="fill:${darkerHex};" d="M340.682,23.012c-8.787,0-13.875,4.933-13.875,15.416v40.854c0,10.483,5.088,15.416,14.03,15.416 c12.334,0,13.104-9.404,13.566-15.416c0.464-5.704,5.704-7.247,11.871-7.247c8.325,0,12.18,2.159,12.18,11.408 c0,20.504-16.649,32.22-38.695,32.22c-20.194,0-36.998-9.866-36.998-36.383V38.428c0-26.515,16.804-36.383,36.998-36.383 c22.046,0,38.695,11.099,38.695,30.679c0,9.25-3.854,11.408-12.025,11.408c-6.474,0-11.716-1.697-12.025-7.247 C354.249,32.878,353.787,23.012,340.682,23.012z"/></g></g></svg>`; } else if (type === 3) { svg = `<svg height="100%" width="100%" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path style="fill:${colorHex};" d="M409.921,217.52c-7.451,0-14.664,0.958-21.615,2.595c-16.099-65.282-74.879-113.76-145.132-113.76 c-56.4,0-105.469,31.23-130.975,77.313C54.073,187.289,8.017,235.443,8.017,294.48c0,61.395,49.771,111.165,111.165,111.165 c20.911,0,261.756,0,290.739,0c51.949,0,94.063-42.113,94.063-94.063S461.87,217.52,409.921,217.52z"/><path style="fill:${darkerHex};" d="M384.267,354.338H207.803c-59.444,0-110.725-45.37-114.092-104.72 c-1.378-24.288,5.089-46.952,17.045-65.79C51.672,188.282,5.426,238.717,8.129,299.547c2.665,59.964,54.445,106.098,114.469,106.098 h261.669c14.168,0,25.653-11.485,25.653-25.653l0,0C409.921,365.823,398.435,354.338,384.267,354.338z"/><path d="M409.921,209.503c-5.193,0-10.497,0.435-15.843,1.298c-19.842-66.597-80.835-112.463-150.904-112.463 c-55.86,0-107.51,29.656-135.836,77.681C46.799,182.009,0,233.221,0,294.48c0,65.717,53.465,119.182,119.182,119.182h290.739 c56.287,0,102.079-45.792,102.079-102.079S466.208,209.503,409.921,209.503z M409.921,397.628H119.182 c-56.876,0-103.148-46.272-103.148-103.148c0-54.273,42.46-99.434,96.663-102.812c2.733-0.17,5.189-1.723,6.516-4.12 c24.982-45.137,72.482-73.178,123.961-73.178c65.237,0,121.717,44.273,137.35,107.663c1.052,4.267,5.343,6.893,9.621,5.883 c6.708-1.58,13.362-2.381,19.777-2.381c47.446,0,86.046,38.6,86.046,86.046S457.367,397.628,409.921,397.628z"/><path d="M339.172,244.767c-3.832,2.219-5.139,7.123-2.921,10.955c3.791,6.548,5.796,14.037,5.796,21.656v17.102 c0,23.871-19.42,43.29-43.29,43.29c-23.871,0-43.29-19.42-43.29-43.29v-17.102c0-23.871,19.42-43.29,43.29-43.29 c4.964,0,9.825,0.831,14.453,2.469c4.174,1.478,8.755-0.708,10.233-4.881c1.478-4.174-0.708-8.755-4.881-10.233 c-6.349-2.249-13.013-3.388-19.803-3.388c-32.711,0-59.324,26.612-59.324,59.324v17.102c0,32.711,26.612,59.324,59.324,59.324 s59.324-26.612,59.324-59.324v-17.102c0-10.437-2.75-20.703-7.954-29.69C347.907,243.856,343.002,242.55,339.172,244.767z"/><path d="M216.449,326.748c-7.941,7.108-18.189,11.022-28.86,11.022c-23.871,0-43.29-19.42-43.29-43.29v-17.102 c0-23.871,19.42-43.29,43.29-43.29c10.666,0,20.913,3.912,28.853,11.016c3.299,2.951,8.366,2.67,11.32-0.628 c2.952-3.3,2.671-8.368-0.628-11.32c-10.883-9.738-24.927-15.1-39.544-15.1c-32.711,0-59.324,26.612-59.324,59.324v17.102 c0,32.711,26.612,59.324,59.324,59.324c14.621,0,28.669-5.367,39.553-15.11c3.299-2.953,3.579-8.021,0.625-11.32 C224.815,324.075,219.746,323.795,216.449,326.748z"/><path d="M247.159,148.649c5.344,0.195,10.7,0.789,15.92,1.766c0.499,0.093,0.995,0.139,1.485,0.139c3.783,0,7.149-2.689,7.87-6.543 c0.816-4.351-2.051-8.54-6.404-9.355c-6-1.123-12.152-1.806-18.288-2.03c-4.432-0.156-8.142,3.295-8.303,7.72 C239.278,144.77,242.734,148.487,247.159,148.649z"/><path d="M294.898,161.824c17.914,9.862,32.595,24.543,42.455,42.458c1.46,2.653,4.202,4.153,7.03,4.153 c1.307,0,2.633-0.321,3.859-0.995c3.878-2.135,5.292-7.01,3.158-10.889c-11.327-20.578-28.191-37.444-48.769-48.771 c-3.879-2.137-8.753-0.722-10.889,3.158C289.605,154.813,291.019,159.688,294.898,161.824z"/><path d="M474.981,292.185c-6.562-22.04-23.639-39.112-45.679-45.668c-4.245-1.263-8.707,1.154-9.97,5.398s1.154,8.707,5.398,9.97 c16.833,5.008,29.873,18.045,34.885,34.876c1.036,3.48,4.225,5.731,7.68,5.731c0.757,0,1.529-0.108,2.291-0.336 C473.83,300.892,476.244,296.429,474.981,292.185z"/></g></svg>`; } else if (type === 4) { svg = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-10.4 -10.4 124.80 124.80" fill="none"><g><g stroke="${colorHex}" stroke-width="3.5" fill="none"><path d="M0.980392157,52 L0.980392157,48"></path><path d="M10.7843137,54 L10.7843137,46"></path><path d="M20.5882353,70.0688837 L20.5882353,30"></path><path d="M30.3921569,80.0089279 L30.3921569,20"></path><path d="M40.1960784,100 L40.1960784,0"></path><path d="M50,70 L50,30"></path><path d="M59.8039216,64 L59.8039216,36"></path><path d="M69.6078431,74.5325933 L69.6078431,26.4973984"></path><path d="M79.4117647,61 L79.4117647,39"></path><path d="M89.2156863,59 L89.2156863,41"></path><path d="M99.0196078,63 L99.0196078,37"></path></g></g></svg>`; } return svg; }Ein Aufruf könnte wie folgt aussehen für Feuchtigkeit:
const hum = getState('Dein.0.Sensor.humidity').val; let humColor = ''; if (hum >= 70) { humColor = '#00cc44'; } else if (hum >= 40) { humColor = '#66ccff'; } else { humColor = '#ff8800'; } const svgHum = createEnvSvg(1, humColor, '#000000'); setState('Dein.Speicherdatenpunkt.humiditySvg', svgHum);Ein Aufruf könnte wie folgt aussehen für Temperatur:
const temp = getState('Dein.0.Sensor.temperature').val; let tempColor = ''; if (temp >= 30) { tempColor = '#ff3300'; } else if (temp >= 20) { tempColor = '#ff8800'; } else { tempColor = '#0099ff'; } const svgTemp = createEnvSvg(2, tempColor, '#000000'); setState('Dein.Speicherdatenpunkt.temperatureSvg', svgTemp);Ein Aufruf könnte wie folgt aussehen für CO2:
const co2 = getState('Dein.0.Sensor.co2').val; let co2Color = ''; if (co2 >= 1500) { co2Color = '#ff0000'; } else if (co2 >= 1000) { co2Color = '#ff8800'; } else { co2Color = '#66cc33'; } const svgCo2 = createEnvSvg(3, co2Color, '#000000'); setState('Dein.Speicherdatenpunkt.co2', svgCo2);Ein Aufruf könnte wie folgt aussehen für Umgebungslautstärke (Noise):
const noise = getState('Dein.0.Sensor.noise').val; let noiseColor = ''; if (noise >= 80) { noiseColor = '#ff0000'; } else if (noise >= 50) { noiseColor = '#ffcc00'; } else { noiseColor = '#66cc33'; } const svgNoise = createEnvSvg(4, noiseColor, '#000000'); setState('Dein.Speicherdatenpunkt.noiseSvg', svgNoise);Idee: Die hier gezeigten Beispiele um aus den Rohdaten, Farbwerte zu generieren dienen als Beispiel und sollten für den entsprechenden Einsatz angepasst werden.
Ich hoffe es ist etwas für Euch dabei. Wie immer viel Spaß und gutes Gelingen bei der Umsetzung.
Ro75.
SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen
-
Hier wieder ein paar Beispiele zum diverse Symbole dynamisch zu generieren.
Wichtig ist, es entsteht ein SVG-Code. Dieser sollte muss in einem Datenpunkt gespeichert werden. Die Darstellung erfolgt via dem Widget String (unescaped).
//Erst-Version 1.0.0 - 13.07.2026 //Ersteller Ro75. //Voraussetzungen (Version 1.0.0 getestet mit) //NodeJS: 22.22.x //Javascript-Adapter: 9.0.18 //Admin-Adapter: 7.8.23 //js-controler: 7.2.2Wifi / RF:
function createConnectivitySvg(type, value, color, inactiveColor = "#bdc0c2") { // type: 1 = Wifi, 2 = Signal let level = 3; if (value > 83) { level = 1; } else if (value > 68) { level = 2; } let svg = ''; if (type === 1) { const fillBottom = color; const fillMiddle = level >= 2 ? color : inactiveColor; const fillTop = level >= 3 ? color : inactiveColor; svg = `<svg height="100%" width="100%" version="1.1" viewBox="-31.7 -31.7 380.42 380.42" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.00317016"><g><path style="fill:${fillTop};" d="M22.21,134.341L0,112.131c42.401-42.403,98.694-65.755,158.509-65.755 c59.813,0,116.105,23.351,158.507,65.751l-22.21,22.21c-36.469-36.468-84.874-56.552-136.297-56.552 C107.084,77.785,58.679,97.87,22.21,134.341z"/><path style="fill:${fillMiddle};" d="M63.944,176.075l-22.211-22.21c31.237-31.237,72.709-48.439,116.775-48.439 c44.067,0,85.537,17.201,116.774,48.437l-22.21,22.21c-25.304-25.303-58.888-39.238-94.564-39.238 C122.832,136.835,89.248,150.77,63.944,176.075z"/><path style="fill:${fillBottom};" d="M105.679,217.811l-22.211-22.21c20.072-20.071,46.723-31.125,75.041-31.125 s54.967,11.053,75.039,31.123l-22.211,22.21c-14.138-14.137-32.898-21.923-52.828-21.923 C138.58,195.885,119.817,203.672,105.679,217.811z"/><path style="fill:${color};" d="M158.509,224.154c-12.836,0-24.457,5.204-32.871,13.615l32.871,32.871l32.871-32.871 C182.967,229.357,171.345,224.154,158.509,224.154z"/></g></svg>`; } else if (type === 2) { const strokeInner = level >= 1 ? color : inactiveColor; const strokeMiddle = level >= 2 ? color : inactiveColor; const strokeOuter = level >= 3 ? color : inactiveColor; svg = `<svg width="100%" height="100%" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path d="M16.2426 7.75738C18.5858 10.1005 18.5858 13.8995 16.2426 16.2427" stroke="${strokeMiddle}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75735" stroke="${strokeMiddle}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.92893 19.0711C1.02369 15.1658 1.02369 8.8342 4.92893 4.92896" stroke="${strokeOuter}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.0711 4.929C22.9763 8.83424 22.9763 15.1659 19.0711 19.0711" stroke="${strokeOuter}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12Z" stroke="${strokeInner}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`; } return svg; }Ein Aufruf könnte wie folgt aussehen für Wifi:
const value = getState('Datenpunkt.Device.wifiPercent').val; const svg = createConnectivitySvg(1, value, '#00aaff'); setState('Dein.Speicherdatenpunkt.wifiSvg', svg, true);Ein Aufruf könnte wie folgt aussehen für Signalstärke:
const value = getState('Datenpunkt.Device.signalPercent').val; const svg = createConnectivitySvg(2, value, '#ff8800'); setState('Dein.Speicherdatenpunkt.signalSvg', svg, true);Temperatur, Feuchtigkeit, CO2, Umgebungslautstärke:
function createEnvSvg(type, colorHex, strokeColor = "#000000") { // type: 1 = Humidity, 2 = Temperature, 3 = CO2, 4 = Noise function hexToRgb(hex) { hex = hex.replace('#', ''); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); return { r: r, g: g, b: b }; } function rgbToHex(r, g, b) { const hr = r.toString(16).padStart(2, '0'); const hg = g.toString(16).padStart(2, '0'); const hb = b.toString(16).padStart(2, '0'); return '#' + hr + hg + hb; } const rgb = hexToRgb(colorHex); const darkR = Math.round(rgb.r * 0.85); const darkG = Math.round(rgb.g * 0.85); const darkB = Math.round(rgb.b * 0.85); const darkerHex = rgbToHex(darkR, darkG, darkB); let svg = ''; if (type === 1) { svg = `<svg width="100%" height="100%" viewBox="-102.4 -102.4 1228.80 1228.80" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path d="M339.7 882.5C196.6 882.5 80.2 766.1 80.2 623c0-133.2 204.8-395.1 228.2-424.5 5.8-7.3 14.5-11.6 23.8-11.7 9.4-0.1 18.1 3.9 24.1 11 1.5 1.8 37.7 44.8 82.2 105.2 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-21.3-29-40.9-54-55.3-72.1-69.2 92-191.2 271.5-191.2 355.4 0 108.9 88.6 197.6 197.6 197.6S537.3 731.9 537.3 623c0-17.1 13.9-31 31-31s31 13.9 31 31c-0.1 143.1-116.5 259.5-259.6 259.5z" fill="${strokeColor}"/><path d="M363.7 468.8c-27.9 59.7-46.8 115.7-46.8 158.4 0 164.6 133.4 298 298 298s298-133.4 298-298c0-12.8-1.9-26.9-5.5-41.9-327.2 33.9-284.9-194.9-543.7-116.5z" fill="${colorHex}"/><path d="M333.6 567.6c-38.2 239.9 123 357.7 287.3 357.7 92.8 0 144.9-12.1 199.6-78.6-261.5 20.7-428.7-99.2-486.9-279.1z" fill="${darkerHex}"/><path d="M614.9 956.1C433.5 956.1 286 808.5 286 627.2c0-173.4 283.4-532.4 295.5-547.6 5.8-7.3 14.5-11.6 23.8-11.7 9.3-0.1 18.1 3.9 24.1 11 2 2.3 49 58.2 106.8 136.6 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-31.8-43.2-60.6-79.8-79.9-103.7C517 266.1 347.9 512.3 347.9 627.2c0 147.2 119.8 267 267 267s267-119.8 267-267c0-29.7-13.2-87.9-76.4-196.2-8.6-14.8-3.6-33.7 11.2-42.3 14.8-8.6 33.7-3.6 42.3 11.2 57.1 97.9 84.8 172.2 84.8 227.4 0 181.3-147.6 328.8-328.9 328.8z" fill="${strokeColor}"/></g></svg>`; } else if (type === 2) { svg = `<svg height="100%" width="100%" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><circle style="fill:${colorHex};" cx="221.32" cy="381.469" r="59.943"/><g><path style="fill:${darkerHex};" d="M221.326,455.991c-41.09,0-74.52-33.43-74.52-74.52s33.43-74.52,74.52-74.52 s74.52,33.43,74.52,74.52S262.416,455.991,221.326,455.991z M221.326,336.107c-25.014,0-45.364,20.35-45.364,45.364 s20.35,45.364,45.364,45.364s45.364-20.35,45.364-45.364S246.339,336.107,221.326,336.107z"/><path style="fill:${darkerHex};" d="M221.361,512c-1.061,0-2.121-0.012-3.187-0.038c-70.33-1.662-127.472-60.279-127.377-130.668 c0.063-46.595,24.418-88.796,64.149-112.209V58.856C154.948,26.403,181.349,0,213.804,0h15.046 c32.453,0,58.856,26.403,58.856,58.856c0,8.051-6.526,14.578-14.578,14.578s-14.578-6.526-14.578-14.578 c0-16.377-13.324-29.701-29.701-29.701h-15.046c-16.377,0-29.701,13.324-29.701,29.701V277.74c0,5.521-3.118,10.567-8.054,13.037 c-34.548,17.286-56.042,51.985-56.093,90.556c-0.073,54.666,44.297,100.191,98.911,101.482c27.549,0.63,53.593-9.582,73.285-28.814 c19.7-19.24,30.549-44.998,30.549-72.528c0-16.546-4.073-32.954-11.779-47.455c-3.779-7.11-1.077-15.936,6.032-19.713 c7.111-3.777,15.936-1.077,19.713,6.032c9.936,18.697,15.189,39.838,15.189,61.136c0,35.449-13.97,68.614-39.333,93.388 C287.924,498.88,255.657,511.999,221.361,512z"/><path style="fill:${darkerHex};" d="M221.326,283.228c-8.051,0-14.578-6.526-14.578-14.578V151.01c0-8.051,6.526-14.578,14.578-14.578 c8.051,0,14.578,6.526,14.578,14.578v117.64C235.903,276.702,229.377,283.228,221.326,283.228z"/><path style="fill:${darkerHex};" d="M406.627,194.304H287.704v-30.613h64.823c8.051,0,14.578-6.526,14.578-14.578 s-6.526-14.578-14.578-14.578h-77.941c-0.249,0-0.491,0.025-0.736,0.038c-0.241-0.012-0.478-0.036-0.723-0.036 c-8.051,0-14.578,6.526-14.578,14.578v119.537c0,8.051,6.526,14.578,14.578,14.578c0.246,0,0.487-0.025,0.729-0.036 c0.243,0.012,0.484,0.036,0.729,0.036h77.941c8.051,0,14.578-6.526,14.578-14.578s-6.526-14.578-14.578-14.578h-64.823v-30.613 h118.923c8.051,0,14.578-6.526,14.578-14.578S414.678,194.304,406.627,194.304z"/><path style="fill:${darkerHex};" d="M340.682,23.012c-8.787,0-13.875,4.933-13.875,15.416v40.854c0,10.483,5.088,15.416,14.03,15.416 c12.334,0,13.104-9.404,13.566-15.416c0.464-5.704,5.704-7.247,11.871-7.247c8.325,0,12.18,2.159,12.18,11.408 c0,20.504-16.649,32.22-38.695,32.22c-20.194,0-36.998-9.866-36.998-36.383V38.428c0-26.515,16.804-36.383,36.998-36.383 c22.046,0,38.695,11.099,38.695,30.679c0,9.25-3.854,11.408-12.025,11.408c-6.474,0-11.716-1.697-12.025-7.247 C354.249,32.878,353.787,23.012,340.682,23.012z"/></g></g></svg>`; } else if (type === 3) { svg = `<svg height="100%" width="100%" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="${strokeColor}"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path style="fill:${colorHex};" d="M409.921,217.52c-7.451,0-14.664,0.958-21.615,2.595c-16.099-65.282-74.879-113.76-145.132-113.76 c-56.4,0-105.469,31.23-130.975,77.313C54.073,187.289,8.017,235.443,8.017,294.48c0,61.395,49.771,111.165,111.165,111.165 c20.911,0,261.756,0,290.739,0c51.949,0,94.063-42.113,94.063-94.063S461.87,217.52,409.921,217.52z"/><path style="fill:${darkerHex};" d="M384.267,354.338H207.803c-59.444,0-110.725-45.37-114.092-104.72 c-1.378-24.288,5.089-46.952,17.045-65.79C51.672,188.282,5.426,238.717,8.129,299.547c2.665,59.964,54.445,106.098,114.469,106.098 h261.669c14.168,0,25.653-11.485,25.653-25.653l0,0C409.921,365.823,398.435,354.338,384.267,354.338z"/><path d="M409.921,209.503c-5.193,0-10.497,0.435-15.843,1.298c-19.842-66.597-80.835-112.463-150.904-112.463 c-55.86,0-107.51,29.656-135.836,77.681C46.799,182.009,0,233.221,0,294.48c0,65.717,53.465,119.182,119.182,119.182h290.739 c56.287,0,102.079-45.792,102.079-102.079S466.208,209.503,409.921,209.503z M409.921,397.628H119.182 c-56.876,0-103.148-46.272-103.148-103.148c0-54.273,42.46-99.434,96.663-102.812c2.733-0.17,5.189-1.723,6.516-4.12 c24.982-45.137,72.482-73.178,123.961-73.178c65.237,0,121.717,44.273,137.35,107.663c1.052,4.267,5.343,6.893,9.621,5.883 c6.708-1.58,13.362-2.381,19.777-2.381c47.446,0,86.046,38.6,86.046,86.046S457.367,397.628,409.921,397.628z"/><path d="M339.172,244.767c-3.832,2.219-5.139,7.123-2.921,10.955c3.791,6.548,5.796,14.037,5.796,21.656v17.102 c0,23.871-19.42,43.29-43.29,43.29c-23.871,0-43.29-19.42-43.29-43.29v-17.102c0-23.871,19.42-43.29,43.29-43.29 c4.964,0,9.825,0.831,14.453,2.469c4.174,1.478,8.755-0.708,10.233-4.881c1.478-4.174-0.708-8.755-4.881-10.233 c-6.349-2.249-13.013-3.388-19.803-3.388c-32.711,0-59.324,26.612-59.324,59.324v17.102c0,32.711,26.612,59.324,59.324,59.324 s59.324-26.612,59.324-59.324v-17.102c0-10.437-2.75-20.703-7.954-29.69C347.907,243.856,343.002,242.55,339.172,244.767z"/><path d="M216.449,326.748c-7.941,7.108-18.189,11.022-28.86,11.022c-23.871,0-43.29-19.42-43.29-43.29v-17.102 c0-23.871,19.42-43.29,43.29-43.29c10.666,0,20.913,3.912,28.853,11.016c3.299,2.951,8.366,2.67,11.32-0.628 c2.952-3.3,2.671-8.368-0.628-11.32c-10.883-9.738-24.927-15.1-39.544-15.1c-32.711,0-59.324,26.612-59.324,59.324v17.102 c0,32.711,26.612,59.324,59.324,59.324c14.621,0,28.669-5.367,39.553-15.11c3.299-2.953,3.579-8.021,0.625-11.32 C224.815,324.075,219.746,323.795,216.449,326.748z"/><path d="M247.159,148.649c5.344,0.195,10.7,0.789,15.92,1.766c0.499,0.093,0.995,0.139,1.485,0.139c3.783,0,7.149-2.689,7.87-6.543 c0.816-4.351-2.051-8.54-6.404-9.355c-6-1.123-12.152-1.806-18.288-2.03c-4.432-0.156-8.142,3.295-8.303,7.72 C239.278,144.77,242.734,148.487,247.159,148.649z"/><path d="M294.898,161.824c17.914,9.862,32.595,24.543,42.455,42.458c1.46,2.653,4.202,4.153,7.03,4.153 c1.307,0,2.633-0.321,3.859-0.995c3.878-2.135,5.292-7.01,3.158-10.889c-11.327-20.578-28.191-37.444-48.769-48.771 c-3.879-2.137-8.753-0.722-10.889,3.158C289.605,154.813,291.019,159.688,294.898,161.824z"/><path d="M474.981,292.185c-6.562-22.04-23.639-39.112-45.679-45.668c-4.245-1.263-8.707,1.154-9.97,5.398s1.154,8.707,5.398,9.97 c16.833,5.008,29.873,18.045,34.885,34.876c1.036,3.48,4.225,5.731,7.68,5.731c0.757,0,1.529-0.108,2.291-0.336 C473.83,300.892,476.244,296.429,474.981,292.185z"/></g></svg>`; } else if (type === 4) { svg = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-10.4 -10.4 124.80 124.80" fill="none"><g><g stroke="${colorHex}" stroke-width="3.5" fill="none"><path d="M0.980392157,52 L0.980392157,48"></path><path d="M10.7843137,54 L10.7843137,46"></path><path d="M20.5882353,70.0688837 L20.5882353,30"></path><path d="M30.3921569,80.0089279 L30.3921569,20"></path><path d="M40.1960784,100 L40.1960784,0"></path><path d="M50,70 L50,30"></path><path d="M59.8039216,64 L59.8039216,36"></path><path d="M69.6078431,74.5325933 L69.6078431,26.4973984"></path><path d="M79.4117647,61 L79.4117647,39"></path><path d="M89.2156863,59 L89.2156863,41"></path><path d="M99.0196078,63 L99.0196078,37"></path></g></g></svg>`; } return svg; }Ein Aufruf könnte wie folgt aussehen für Feuchtigkeit:
const hum = getState('Dein.0.Sensor.humidity').val; let humColor = ''; if (hum >= 70) { humColor = '#00cc44'; } else if (hum >= 40) { humColor = '#66ccff'; } else { humColor = '#ff8800'; } const svgHum = createEnvSvg(1, humColor, '#000000'); setState('Dein.Speicherdatenpunkt.humiditySvg', svgHum);Ein Aufruf könnte wie folgt aussehen für Temperatur:
const temp = getState('Dein.0.Sensor.temperature').val; let tempColor = ''; if (temp >= 30) { tempColor = '#ff3300'; } else if (temp >= 20) { tempColor = '#ff8800'; } else { tempColor = '#0099ff'; } const svgTemp = createEnvSvg(2, tempColor, '#000000'); setState('Dein.Speicherdatenpunkt.temperatureSvg', svgTemp);Ein Aufruf könnte wie folgt aussehen für CO2:
const co2 = getState('Dein.0.Sensor.co2').val; let co2Color = ''; if (co2 >= 1500) { co2Color = '#ff0000'; } else if (co2 >= 1000) { co2Color = '#ff8800'; } else { co2Color = '#66cc33'; } const svgCo2 = createEnvSvg(3, co2Color, '#000000'); setState('Dein.Speicherdatenpunkt.co2', svgCo2);Ein Aufruf könnte wie folgt aussehen für Umgebungslautstärke (Noise):
const noise = getState('Dein.0.Sensor.noise').val; let noiseColor = ''; if (noise >= 80) { noiseColor = '#ff0000'; } else if (noise >= 50) { noiseColor = '#ffcc00'; } else { noiseColor = '#66cc33'; } const svgNoise = createEnvSvg(4, noiseColor, '#000000'); setState('Dein.Speicherdatenpunkt.noiseSvg', svgNoise);Idee: Die hier gezeigten Beispiele um aus den Rohdaten, Farbwerte zu generieren dienen als Beispiel und sollten für den entsprechenden Einsatz angepasst werden.
Ich hoffe es ist etwas für Euch dabei. Wie immer viel Spaß und gutes Gelingen bei der Umsetzung.
Ro75.
ist eine perönliche geschmackssache, aber ich finde es besser bei javascript die template literale zu verwenden.
dann wird aus
svg = '<svg width="100%" height="100%" viewBox="-102.4 -102.4 1228.80 1228.80" xmlns="http://www.w3.org/2000/svg" fill="' + strokeColor + '">' + '<g>' + '<path d="M339.7 882.5C196.6 882.5 80.2 766.1 80.2 623c0-133.2 204.8-395.1 228.2-424.5 5.8-7.3 14.5-11.6 23.8-11.7 9.4-0.1 18.1 3.9 24.1 11 1.5 1.8 37.7 44.8 82.2 105.2 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-21.3-29-40.9-54-55.3-72.1-69.2 92-191.2 271.5-191.2 355.4 0 108.9 88.6 197.6 197.6 197.6S537.3 731.9 537.3 623c0-17.1 13.9-31 31-31s31 13.9 31 31c-0.1 143.1-116.5 259.5-259.6 259.5z" fill="' + strokeColor + '"/>' + '<path d="M363.7 468.8c-27.9 59.7-46.8 115.7-46.8 158.4 0 164.6 133.4 298 298 298s298-133.4 298-298c0-12.8-1.9-26.9-5.5-41.9-327.2 33.9-284.9-194.9-543.7-116.5z" fill="' + colorHex + '"/>' + '<path d="M333.6 567.6c-38.2 239.9 123 357.7 287.3 357.7 92.8 0 144.9-12.1 199.6-78.6-261.5 20.7-428.7-99.2-486.9-279.1z" fill="' + darkerHex + '"/>' + '</g>' + '</svg>';das hier
svg = ` <svg width="100%" height="100%" viewBox="-102.4 -102.4 1228.80 1228.80" xmlns="http://www.w3.org/2000/svg" fill="${strokeColor}" > <g> <path d="M339.7 882.5C196.6 882.5 80.2 766.1 80.2 623c0-133.2 204.8-395.1 228.2-424.5 5.8-7.3 14.5-11.6 23.8-11.7 9.4-0.1 18.1 3.9 24.1 11 1.5 1.8 37.7 44.8 82.2 105.2 10.1 13.8 7.2 33.2-6.6 43.3-13.8 10.1-33.2 7.2-43.3-6.6-21.3-29-40.9-54-55.3-72.1-69.2 92-191.2 271.5-191.2 355.4 0 108.9 88.6 197.6 197.6 197.6S537.3 731.9 537.3 623c0-17.1 13.9-31 31-31s31 13.9 31 31c-0.1 143.1-116.5 259.5-259.6 259.5z" fill="${strokeColor}" /> <path d="M363.7 468.8c-27.9 59.7-46.8 115.7-46.8 158.4 0 164.6 133.4 298 298 298s298-133.4 298-298c0-12.8-1.9-26.9-5.5-41.9-327.2 33.9-284.9-194.9-543.7-116.5z" fill="${colorHex}" /> <path d="M333.6 567.6c-38.2 239.9 123 357.7 287.3 357.7 92.8 0 144.9-12.1 199.6-78.6-261.5 20.7-428.7-99.2-486.9-279.1z" fill="${darkerHex}" /> </g> </svg>`;- besser mit copy/paste aus anderen quellen einfügbar
- besser formatierbar
- das einbauen von variablen ist auch wesentlich einfacher. bei den ganzen anführungsstriche und + verkettungen vertut man sich schnell
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
255
Online33.0k
Benutzer83.4k
Themen1.3m
Beiträge