@sborg sagte in Widget abhängig von Variable drehen:
@coffeelover Bin mir nicht zu 100% sicher, aber IMO Ja (zu einfach gedacht 😉 ). Ein Binding funktioniert nur innerhalb eines Widgets, deswegen bin ich skeptisch ob es innerhalb eines CSS' funktioniert ?
@jay-0 sagte in Widget abhängig von Variable drehen:
Hat vielleicht noch jemand eine Idee?
Jepp, wie oben beschrieben, aber dann halt mal mit fertigem Code:
HTML-Widget, dort unter HTML:
<script type="text/javascript">
var svgNS = "http://www.w3.org/2000/svg";
setTimeout(function () {
// Winkel auslesen
let winkel = parseInt(document.getElementById("winkel").innerHTML);
// WoMo-Bild drehen
document.getElementById("womo").setAttribute("transform", "rotate ("+winkel+")");
}, 1);
</script>
<svg>
// Bild vom WoMo
<path id="womo" transform="rotate (0)" fill="none" stroke="green" stroke-width="6" d="M0 15h100v10H0z"/>
</svg>
Winkel: <span id="winkel">{0_userdata.0.Winkel}</span>°<br>
In Zeile #25 ist der DP definiert der den Lagewinkel enthält.
Zeile #20 enthält dann zB. eine SVG eines WoMos (kann auch ein "echtes Bild" sein). Ich habe hier der Einfachheit halber einen grünen Kasten genommen, den man mir verzeihen möge.
Bild 1b.png
Bild 1a.png
Bild 1.png
...und weil ich auch faul bin (^^) habe ich keinen gesteigerten Wert auf die Positionierung gelegt. Deswegen wird das Rechteck zum Teil abgeschnitten, da es aus dem HTML-Widget "herausragt" 😉
Ich habe mir basierend auf diesem Widget ein eigenes mit gleicher Funktion gebaut.
Ich möchte dieses nun mehrfach verwenden und jeweils einen anderen Datenpunkt (0_userdata.0.Winkel1, 0_userdata.0.Winkel2,...) verwenden.
Das scheint nur nicht zu funktionieren. Es funktioniert immer nur eins und das auch nicht mit dem richtigen Wert aus seinem Datenpunkt sondern von irgendeinem anderen.
Wie ließe sich das lösen?
Mein Code sieht aktuell wie folgt aus:
<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid #555; border-radius: 10px; box-sizing: border-box; background-color: #f0f0f0;">
<svg id="t_svg_{w:widgetID}" viewBox="-10 -35 120 120" width="150">
<path d="M47 20 V 80 H 53 V 20 Z" fill="#606060" stroke="#606060" stroke-width="2"/>
<g class="winkel-anzeige-rechts" style="visibility: hidden;">
<text class="text-rechts" x="55" y="15" font-size="8px" fill="black"></text>
</g>
<g class="winkel-anzeige-links" style="visibility: hidden;">
<text class="text-links" x="45" y="15" font-size="8px" text-anchor="end" fill="black"></text>
</g>
<path class="rotierender-teil" transform="rotate(0, 50, 20)" stroke="green" stroke-width="6" stroke-linecap="round" d="M 0 20 H 100"/>
<circle cx="50" cy="20" r="3" fill="black"/>
</svg> <script type="text/javascript">
(function updateWidget(winkel) {
try {
const winkelNum = parseInt(winkel) || 0;
const svg = document.getElementById('t_svg_{w:widgetID}');
if (!svg) return;
const rotatingElement = svg.querySelector('.rotierender-teil');
const anzeigeRechts = svg.querySelector('.winkel-anzeige-rechts');
const anzeigeLinks = svg.querySelector('.winkel-anzeige-links');
const textRechts = svg.querySelector('.text-rechts');
const textLinks = svg.querySelector('.text-links');
if (winkelNum > 0) {
anzeigeRechts.style.visibility = 'visible';
anzeigeLinks.style.visibility = 'hidden';
textRechts.textContent = winkelNum + '°';
} else if (winkelNum < 0) {
anzeigeRechts.style.visibility = 'hidden';
anzeigeLinks.style.visibility = 'visible';
textLinks.textContent = Math.abs(winkelNum) + '°';
} else {
anzeigeRechts.style.visibility = 'hidden';
anzeigeLinks.style.visibility = 'hidden';
}
rotatingElement.setAttribute("transform", "rotate(" + winkelNum + ", 50, 20)");
} catch (err) {
console.error(`[Widget {w:widgetID}] Fehler:`, err);
}
})({0_userdata.0.Winkel});
</script>
</div>
