Hallo,
bin mir nicht ganz sicher was du genau möchtest bzw. wohin du willst aber am flexibelsten bist du mit SVG paths.
Wie gut kennst du dich mit HTML/CSS/Javascript aus ?
Ich hab selbst erst dieses Jahr mit der Twincat HMI angefangen und jetzt vor kurzem mein erstes relativ umfangreiches Projekt abgeschlossen.
Ich hatte Anfangs alles mit den Beckhoff Controls und normalen Verknüpfungen gemacht, bin aber immer wieder an Grenzen gestoßen und die Performance lässt irgendwann doch stark nach, und bin dann fast komplett auf HTML und Javascript umgestiegen.
Hier wäre mal ein einfaches Beispiel:
Erstell dir ein HTML Host Container und kopiere diesen Code rein...
<svg width="600" height="300" viewBox="0 0 600 300">
<rect id="test" x="2" y="2" width="0" height="0" rx="0" ry="0" />
</svg>
Für den Rahmen folgendes in die Style.css
#test {
fill: none;
stroke: hsla(230, 50%, 40%,1);
stroke-width: 2px;
}
Füge deinem Projekt ein neues Element hinzu - Funktion(javascript) - mit folgendem Code:
let rechteck = document.getElementById('test');
TcHmi.EventProvider.register('%i%Laenge%/i%', function (e, d) {
rechteck.setAttributeNS(null, 'width', d);
});
TcHmi.EventProvider.register('%i%Breite%/i%', function (e, d) {
rechteck.setAttributeNS(null, 'height', d);
rechteck.setAttributeNS(null, 'rx', d / 2);
rechteck.setAttributeNS(null, 'ry', d / 2);
});
Ich hab zum testen interne Symbole angelegt, Variablen von der SPS sind %s%Var%/s%
Die Funktion musst du nun noch beim Desktop onAttached Event aufrufen. (Functions -> Others).
Hoffe das hilft erstmal ein bisschen ansonsten einfach fragen.
Gruß Mathias