SVG Grundelemente mit JS ändern mit Hilfe eines ID Array

  • Flogender Code Funktioniert bereits. Satus kann sich ändern (bzw. hier im Code zum probieren statisch mit 0 und 1 )


    <svg>

    .....

    <circle id="Test1" cx="50" cy="10" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle id="Test2" cx="50" cy="15" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle id="Test3" cx="50" cy="25" r="2" stroke="black" stroke-width="0.1" fill="white" />

    ....
    </svg>



    <script>

    onofflight("0","Test1");

    onofflight("1","Test2");

    onofflight("0","Test3");

    </script>


    mit


    function onofflight(Status,Name)

    {

    {

    if (Status =='0')

    {

    document.getElementById(Name).setAttribute("fill", "white");

    }

    if (Status =='1')

    {

    document.getElementById(Name).setAttribute("fill", "yellow");

    }

    }


    soll nun folgender Code werden (Leider geht der nicht, bzw. ist noch irgendwo ein kleiner Fehler drin, womöglich nur ein Syntaxfehler (Beispiel mit belibig zwei gleich langen Arrays)
    <script>

    onofflight("[0,1,0]","[Test1,Test2,Test3]");

    </script>


    mit der Funktion

    function onofflight(Status,Name)

    {


    for(var i=0; i<3; i++)

    {

    if (Status[i] =='0')

    {

    document.getElementById(Name[i]).setAttribute("fill", "white");

    }

    if (Status[i] =='1')

    {

    document.getElementById(Name[i]).setAttribute("fill", "yellow");

    }

    }

    }

  • Der Fehler liegt hier:

    Code
    onofflight("[0,1,0]","[Test1,Test2,Test3]");

    Du übergibst jeweils einen String statt eines Arrays von Strings. So wäre es richtig:

    Code
    onofflight(['0','1','0'],['Test1','Test2','Test3']);
  • Ok Danke, geht nun. Noch eine kleine Änderung, wäre das mit ID und Klassen gemischt möglich ( bei einem Element mit ID und bei mehreren Elementen dann als Klasse ? oder muss ich dan alles auf Klassen ausrichten (selbst die einzelnen Elemente) ?

    Bsp


    <svg>

    .....

    <circle id="Test1" cx="50" cy="10" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle class="Test2" cx="50" cy="15" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle class="Test2" cx="50" cy="25" r="2" stroke="black" stroke-width="0.1" fill="white" />

    ....

    </svg>


    mit

    function onofflight(Status,Name)

    {


    for(var i=0; i<3; i++)

    {

    if (Status[i] =='0')

    {

    document.getElementById(Name[i]).setAttribute("fill", "white");

    document.getElementByClassName(Name[i]).setAttribute("fill", "white");

    ....

    }



    oder


    <svg>

    .....

    <circle class="Test1" cx="50" cy="10" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle class="Test2" cx="50" cy="15" r="2" stroke="black" stroke-width="0.1" fill="white" />

    <circle class="Test2" cx="50" cy="25" r="2" stroke="black" stroke-width="0.1" fill="white" />

    ....

    </svg>


    mit


    function onofflight(Status,Name)

    {


    for(var i=0; i<3; i++)

    {

    if (Status[i] =='0')

    {

    document.getElementByClassName(Name[i]).setAttribute("fill", "white");

    ....

    }

    Übergabe in beiden Fällen dann so

    onofflight(['0','1','0'],['Test1','Test2','Test3']);

  • Ja ist der gleiche Beitrag bzw. dachte bei je einen Beitrag in 2 Foren erreich ich mehr und/oder bekomm schneller eine Antwort.

    Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.

  • Wenn Du document.getElementByClassName verwendest, musst Du beachten, dass dieses eine Nodelist, in etwa ein Array mit mehreren Elementen, zurück liefert. Um alle Elemente darin zu erfassen, müsstest Du darüber wiederum ein Schleife bauen. Gemischt Klassen und IDs zu verwenden würde ich nicht empfehlen.

  • @ AndreasB Die Idee war jetzt spontan und vorher nicht vorhanden, mach dann das ganze mit Ids und wenn ich mehrere Elemente hab mach ich halt mehrere IDs und schreib mein Bool in den String mehrmals rein (macht die SPS) dann erfolgt die Stringübergabe und das soll der Webserver (bzw. die Webseite ) dann ohne Konvertierung als Array of Bools interpretieren.


    Code unabhänging vom Datentyp bzw. Variablenname
    :="Db_fuer_Webpage".Licht_Satus: ( kann Bool, Int , String usw. sein )


    Datentyp Inhalt Darstellung auf Webseite

    Bool 1 1

    String abc abc
    Int 10 10

    Real 16.0 1,60e^1


    im "trockenen" hab ich jede Menge Fehler im Code bzw. die Verschwinden, wenn ich das ganze über den Webserver auf der SPS ansehe.

  • Meine Idee den Inhalt [0,1,1,0,........] als in einer SPS Varible zu übergeben und den Inhalt vom Script als Array zu interpretieren haut leider nicht ganz hin :(


    Der beim Testarray geht der andere leider nicht

  • Ich versuche gerade, die Bilder zu verstehen:


    Posting #11: Mit "trocken" meinst Du, dass der Code einfach im Browser läuft ohne die SPS-Umgebung? Dann müsste links auf den Webserver (mit eingesetzten Variablen) und rechts trocken sein?


    Posting #12 verstehe ich aber das Array sieht auf beiden Screenshots gleich aus und ich habe keine Erklärung, dass es auf der SPS nicht funktioniert. Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird. Funktionieren die Skripts denn, wenn Du kein Array verwendest sondern eine einfache Variable?


    Posting #13 verstehe ich, man sieht, dass das Einfärben nicht funktioniert hat.


    Unterstützt der Webserver des SPS denn die gängigen Debug-Möglichkeiten, insbesondere mit Ausgaben in der Console?

  • ja trocken heißt ohne SPS Umgebung, das Projektierungsprogramm der SPS erzeugt daten aus dem Code der Webseite und der wird dan übertragen und die Webseite der SPS ist über die IP im Netzwerkt bzw. über VPN erreichbar.


    ja bei 11 ist die Webseite links über die Ip geöffnet und recht normaler Speicherpfad auf C

    zu Posting 12 die Scripts SetStatus (erstes Script nach </html> ) gehen ( Linkes Bild im Posting 13 die Buttonsfärbung und Text )

    Debugging ist im Browser möglich.

  • Dann lass uns doch mal dieser Vermutung nachgehen:

    Zitat

    Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird.

    Das müsste sich überprüfen lassen, indem man den betr. Parameter in der Console ausgibt:

  • Der Code wird so geschrieben


    <script>
    SetStatus("0",":="Db_fuer_Webpage".Licht_Holzlager.Read:", "Lumberyardbutton", "Aus", "Ein","0");

    SetStatus("0",":="Db_fuer_Webpage".Licht_Garten.Read:", "Backyardbutton", "Aus", "Ein","0");

    SetStatus("0",":="Db_fuer_Webpage".Licht_Einfahrt.Read:", "Frontyardbutton", "Aus", "Ein","0");

    SetStatus("0",":="Db_fuer_Webpage".Licht_Garage.Read:", "Garagebutton", "AUs", "Ein","0");

    </script>


    Und sieht dann in der SPS z.B. so aus (Posting 12 ) 3 Buttons Grün und einer aus ( Im Bild sind aber alle aus) und gleiche Funktion ist auch bei Posting 11 im für die Buttons im Einsatz.


    <script>
    SetStatus("0","1", "Lumberyardbutton", "Aus", "Ein","0");

    SetStatus("0","0", "Backyardbutton", "Aus", "Ein","0");

    SetStatus("0","1", "Frontyardbutton", "Aus", "Ein","0");

    SetStatus("0","1","Garagebutton", "AUs", "Eind,"0");

    </script>

  • Fehler gefunden :) ( hab alles nochmal in einer VM, da dort die Projektierungssoftware ist und da ist noch die alte Funktion drin, für den neuen Aufruf. Kann dann auch nicht gehen :) Ich änder mal die function onofflight auf den neuen Aufruf um, dann müsste es laufen.


    <script>

    onofflight("0","Test1");

    onofflight("1","Test2");

    onofflight("0","Test3");

    </script>


    mit ( im einer externen Js Datei )


    function onofflight(Status,Name)

    {

    {

    if (Status =='0')

    {

    document.getElementById(Name).setAttribute("fill", "white");

    }

    if (Status =='1')

    {

    document.getElementById(Name).setAttribute("fill", "yellow");

    }

    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!