Abarbeitung einer Fetch - JavaSript

[mat-sche]

Liebes Forum,

ich benötige JavaScript in meinen Webseiten-Serveranwendungen auf einem ESP8266. Ich schicke per fetch über meinen ESP

Code:

server.send(200, "application/json", "[\"" +  String(bitRead(buttonstate_index[0], 0)) +                     // Sende Statuszustand
      "\",\"" +  String(bitRead(buttonstate_index[0], 1)) + "\",\"" +  String(bitRead(buttonstate_index[0], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 3)) + "\",\"" +  String(bitRead(buttonstate_index[0], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 5)) + "\",\"" +  String(bitRead(buttonstate_index[0], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 7)) + "\",\"" +  String(bitRead(buttonstate_index[1], 0)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 1)) + "\",\"" +  String(bitRead(buttonstate_index[1], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 3)) + "\",\"" +  String(bitRead(buttonstate_index[1], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 5)) + "\",\"" +  String(bitRead(buttonstate_index[1], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 7)) + "\", \"Tor offen""\"]");

die Daten, die auch schön im Browser vom Client abgearbeitet werden:

mit dem Programmteil erfolgt die Datenauswertung bestens:

Code:

function loadDaten() {
            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    document.getElementById("Text-1").innerHTML = myArr[16];
                    buttonstate(0, myArr[0]);
                    buttonstate(1, myArr[1]);
                    buttonstate(2, myArr[2]);
                    buttonstate(3, myArr[3]);
                    buttonstate(4, myArr[4]);
                    buttonstate(5, myArr[5]);
                    buttonstate(6, myArr[6]);
                    buttonstate(7, myArr[7]);
                    buttonstate(8, myArr[8]);
                    buttonstate(9, myArr[9]);
                    buttonstate(10, myArr[10]);     
                    buttonstate(11, myArr[11]);
                    buttonstate(12, myArr[12]);
                    buttonstate(13, myArr[13]);
                    buttonstate(14, myArr[14]);
                    buttonstate(15, myArr[15]);
                    });

aber wenn ich aber :

Code:

document.getElementById("Text-1").innerHTML = myArr[16]

ans Ende der Funktion lege, werden die Daten nicht aus dem Array geladen.

Warum ist das denn so?

Grüße MAT

[admin]

Du weißt aber das die funktion nicht geschlossen ist oder ?
Da fehlt eine Klammer.
Was steht den in console.log(myArr[16]) , wenn du das dafür ersetzt ?
Gibt es überhaupt myArr[16] ?
Ich zähle 16 , dann dürfte myArr[15] das letzte sein.

Schau aber erstmal was in console.log(myArr[16]) steht , dann kann man weiter schauen

[mat-sche]

Liebes Forum,

schon etwas länger her aber immer noch das gleiche Thema. Mein obiger Post hat sich erledigt, über Web-Button kann ich nun auf meinem ESP Schalthandlungen ausführen.
jezt würde ich gern den Code im Script sowie auch auf der Arduino C++ Seite etwas ändern/verjüngen....verbessern ?! Der bisherige Code funktioniert ja... aber ich denke er kann besser umgesetzt werden.
Etwas zum Hintergrund:
Ich benötige immer ein Byte, in dem ich jedes Bit daraus auf 0 und 1 setze, je nachdem welcher Button auf der Webseite gedrückt wurde. So kann ich 8 Button pro Byte adressieren. Dieses Byte wird dann 1 zu 1 an ein I2C- IC (MCP23017 - Portexpander) weitergegeben, wo zum Schluss Relais geschalten werden.

Ich schicke per Fetch ein Json String, den ich in C++ folgend zusammen setze:

Code:

server.send(200, "application/json", "[\"" +  String(bitRead(buttonstate_index[0], 0)) +                                                                       // Sende Statuszustand
      "\",\"" +  String(bitRead(buttonstate_index[0], 1)) + "\",\"" +  String(bitRead(buttonstate_index[0], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 3)) + "\",\"" +  String(bitRead(buttonstate_index[0], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 5)) + "\",\"" +  String(bitRead(buttonstate_index[0], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[0], 7)) + "\",\"" +  String(bitRead(buttonstate_index[1], 0)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 1)) + "\",\"" +  String(bitRead(buttonstate_index[1], 2)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 3)) + "\",\"" +  String(bitRead(buttonstate_index[1], 4)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 5)) + "\",\"" +  String(bitRead(buttonstate_index[1], 6)) +
     "\",\"" +  String(bitRead(buttonstate_index[1], 7)) + "\", \"" + Tor + "\", \"" + server.client().remoteIP().toString() + "\"]");

Hier würde ich den Code gern kleiner gestallten, in dem ich nicht jedes Bit einzeln schicke. Ich würde gern nur z.bsp. das Byte als 0hff verschicke, ok ich weiß wie es geht.
Meine Frage ist nur, wie kann ich über eine Javascript dieses Byte wieder in 8 Bit umwandeln und dann den Button in der Webseite zuordnen?
Aktuell ordne ich die Bits den Button so ein:

Code:

function loadDaten() {

            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    buttonstate(0, myArr[0]);           // LI_CarSpotDoor
                    buttonstate(1, myArr[1]);           // LI_CarSpot
                    buttonstate(2, myArr[2]);           // LI_CarPort
                    buttonstate(3, myArr[3]);           // LI_Tools
                    buttonstate(4, myArr[4]);           // Tor_Reed_100
                    buttonstate(5, myArr[5]);           // Tor_Reed_50         
                    buttonstate(6, myArr[6]);           // Tor_Reed_0
                    buttonstate(7, myArr[7]);                   
                    buttonstate(8, myArr[8]);
                    buttonstate(9, myArr[9]);
                    buttonstate(10, myArr[10]);     
                    buttonstate(11, myArr[11]);
                    buttonstate(12, myArr[12]);
                    buttonstate(13, myArr[13]);
                    buttonstate(14, myArr[14]);
                    buttonstate(15, myArr[15]);
                    document.getElementById("Text-1").innerHTML = myArr[16];
                    document.getElementById("Text-2").innerHTML = myArr[17];
                });
        }

und in HTML werden so die Button kreiert:

Code:

  <div class="grid-container_4">
            <!--Tor halb öffnen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="5" onclick="btnPressed(id)" ></div>
            <!--Tor öffnen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="4" onclick="btnPressed(id)" ></div>
            <!--Tor schließen-->
            <div class="grid-item"><input type="button" style="height: 30px; width: 150px;font: bold 16px Arial;color: black;" id="6" onclick="btnPressed(id)" ></div>
        </div>

Meine Idee wäre nun in einem Script per fetch die Daten einzulesen

Code:

function loadDaten() {

            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {

den String in ein Byte wandeln und dann über eine for next Schleife die einzelnen Bits in die Variable zu legen.

Aber wie ist hier die gute Frage, da ich mich sehr begrenst mit Javascribt nicht auskennen...
Wer könnte mir denn da weiterhelfen?

Vielen Dank für  Eure Hilfe!

[Sempervivum]

Über ein Monat her, diese Frage, ist sie überhaupt noch aktuell oder hast Du das Problem inzwischen gelöst?

[mat-sche]

Über ein Monat her, diese Frage, ist sie überhaupt noch aktuell oder hast Du das Problem inzwischen gelöst?

Guten Morgen und ein HOCH auf den Letzten  

leider habe ich noch keine Lösung gefunden, bin aber auch noch nicht das Problem angegangen, weil ich es noch zur Zeit anders gelöst habe.
Warum? Hast Du für mich einen Lösungsansatz?

Dann heut ne gute Feier und Rutsch @ALL

MAT

[Sempervivum]

Nicht direkt einen Lösungsansatz aber Anmerkungen:

Hier würde ich den Code gern kleiner gestallten, in dem ich nicht jedes Bit einzeln schicke. Ich würde gern nur z.bsp. das Byte als 0hff verschicke, ok ich weiß wie es geht.
Meine Frage ist nur, wie kann ich über eine Javascript dieses Byte wieder in 8 Bit umwandeln und dann den Button in der Webseite zuordnen?

Bitweise Operationen in Javascript sind zwar möglich:
https://wiki.selfhtml.org/wiki/JavaScrip...Operatoren
aber IMO nicht unbedingt empfehlenswert. Ein Array über JSON übertragen ist viel übersichtlicher und einfacher auszuwerten.

Du kannst den Code jedoch vereinfachen, indem Du Schleifen verwendest:

Code:

function loadDaten() {
            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    for (let idx = 0; idx < 16; idx++) {
                         buttonstate(idx, myArr[idx]);
                    }
                    document.getElementById("Text-1").innerHTML = myArr[16];
                    document.getElementById("Text-2").innerHTML = myArr[17];
                });
        }

So ist es doch gleich viel kompakter, nicht wahr?

Auch auf der C++ Seite kannst Du eine Schleife verwenden bzw. zwei verschachtelte, das kannst Du wahrscheinlich selbst umsetzen.

Ich wünsche ebenfalls eine schöne Feier und einen guten Rutsch!

[mat-sche]

Nicht direkt einen Lösungsansatz aber Anmerkungen:

Hier würde ich den Code gern kleiner gestallten, in dem ich nicht jedes Bit einzeln schicke. Ich würde gern nur z.bsp. das Byte als 0hff verschicke, ok ich weiß wie es geht.
Meine Frage ist nur, wie kann ich über eine Javascript dieses Byte wieder in 8 Bit umwandeln und dann den Button in der Webseite zuordnen?

Bitweise Operationen in Javascript sind zwar möglich:
https://wiki.selfhtml.org/wiki/JavaScrip...Operatoren
aber IMO nicht unbedingt empfehlenswert. Ein Array über JSON übertragen ist viel übersichtlicher und einfacher auszuwerten.

Du kannst den Code jedoch vereinfachen, indem Du Schleifen verwendest:

Code:

function loadDaten() {
            fetch('/ButtonData')
                .then(function(response) {
                    return response.json();
                })
                .then(function(myArr) {
                    myArr.foreach((item, idx) => {
                         buttonstate(idx, item);
                    }
                });
        }

So ist es doch gleich viel kompakter, nicht wahr?

Das werde ich mir mal durcharbeiten, vielen Dank für den Gedankenanstoß!
Ursprünglich komme ich aus der Basic AVR-Programmierung und versuche nun schrittweise C++ mir anzulernen. In Basic war ich verwöhnt, dort lässt sich ein Bit einfach ansprechen und zuweisen.
In C++ unter Arduino geht es auch ganz gut:

Code:

bitSet(buttonstate_index[0], 3);
bitClear(buttonstate_index[0], 3);

ich werde mal schauen, wird aber noch etwas dauern, Javaskript und HTML interessieren mich schon sehr, bin aber noch voll verwirrt von der puren Möglichkeiten...

DANKE!

[Sempervivum]

Ich hatte mein Posting editiert und wie ich sehe, hast Du den alten Stand des Javascript erwischt. Lade die Seite mal neu und und sieh dir den Code in #6 noch Mal an.