Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. Node-Red
  5. Parameterübergabe an javascript in HTML

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.2k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.2k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

Parameterübergabe an javascript in HTML

Geplant Angeheftet Gesperrt Verschoben Node-Red
9 Beiträge 3 Kommentatoren 590 Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • F Offline
    F Offline
    franzda
    schrieb am zuletzt editiert von franzda
    #1

    Nachdem meine Frage gestern offensichtlich nicht klar war hier die Frage ganz einfach formuliert:
    Ich nutze in node red html template node mit großer Begeisterung. Es fehlt mir aber ein Glied in der Kette.

    Wie kann ich den Wert 60 in der Zeile 10 über msg.payload an die Funktion weitergeben.
    Alle Beispiele im Netz arbeiten mit Konstanten oder mit Input. Ich möchte den Wert als Variable haben.

    <!DOCTYPE html>
    <html>
        <body>
            <p>This example calls a function to convert from Fahrenheit to Celcius:</p>
            <p id="demo"></p>
            <script>
            function toCelcius(f) {
                return (5 / 9) * (f - 32);
            }
            document.getElementById("demo").innerHTML = toCelcius( 60 );
        </script>
        </body>
    </html>
    
    HomoranH OliverIOO 2 Antworten Letzte Antwort
    0
    • F franzda

      Nachdem meine Frage gestern offensichtlich nicht klar war hier die Frage ganz einfach formuliert:
      Ich nutze in node red html template node mit großer Begeisterung. Es fehlt mir aber ein Glied in der Kette.

      Wie kann ich den Wert 60 in der Zeile 10 über msg.payload an die Funktion weitergeben.
      Alle Beispiele im Netz arbeiten mit Konstanten oder mit Input. Ich möchte den Wert als Variable haben.

      <!DOCTYPE html>
      <html>
          <body>
              <p>This example calls a function to convert from Fahrenheit to Celcius:</p>
              <p id="demo"></p>
              <script>
              function toCelcius(f) {
                  return (5 / 9) * (f - 32);
              }
              document.getElementById("demo").innerHTML = toCelcius( 60 );
          </script>
          </body>
      </html>
      
      HomoranH Nicht stören
      HomoranH Nicht stören
      Homoran
      Global Moderator Administrators
      schrieb am zuletzt editiert von
      #2

      @franzda sagte in Parameterübergabe an javascript in HTML:

      über msg.payload

      also mit node-red?
      dann verschib ich das dahin

      kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

      F 1 Antwort Letzte Antwort
      0
      • HomoranH Homoran

        @franzda sagte in Parameterübergabe an javascript in HTML:

        über msg.payload

        also mit node-red?
        dann verschib ich das dahin

        F Offline
        F Offline
        franzda
        schrieb am zuletzt editiert von
        #3

        @homoran Ja es ist node red; html; und javascript betroffen.
        Ich weiß nicht wo die Frage am besten aufgehoben ist. Ich glaube aber nicht dass die Lösung node red abhängig ist. Wollte node red nur nennen damit jeder ein genaues Bild von der Frage hat

        1 Antwort Letzte Antwort
        0
        • F franzda

          Nachdem meine Frage gestern offensichtlich nicht klar war hier die Frage ganz einfach formuliert:
          Ich nutze in node red html template node mit großer Begeisterung. Es fehlt mir aber ein Glied in der Kette.

          Wie kann ich den Wert 60 in der Zeile 10 über msg.payload an die Funktion weitergeben.
          Alle Beispiele im Netz arbeiten mit Konstanten oder mit Input. Ich möchte den Wert als Variable haben.

          <!DOCTYPE html>
          <html>
              <body>
                  <p>This example calls a function to convert from Fahrenheit to Celcius:</p>
                  <p id="demo"></p>
                  <script>
                  function toCelcius(f) {
                      return (5 / 9) * (f - 32);
                  }
                  document.getElementById("demo").innerHTML = toCelcius( 60 );
              </script>
              </body>
          </html>
          
          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #4

          @franzda
          Könnte man mal das Template sehen
          Und wie die payload aussieht die die Node erhält?

          Du könntest den Wert als Attribut in der payload übergeben und im Template dann dieses Attribut an entsprechender Stelle einsetzt

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          F 1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @franzda
            Könnte man mal das Template sehen
            Und wie die payload aussieht die die Node erhält?

            Du könntest den Wert als Attribut in der payload übergeben und im Template dann dieses Attribut an entsprechender Stelle einsetzt

            F Offline
            F Offline
            franzda
            schrieb am zuletzt editiert von
            #5

            @oliverio

            Hallo Danke für die Reaktion.
            Habe den Fall abgespeckt um die eigentliche Frage zu zeigen.
            An sich geht es "nur" darum wie ich kleinere Berechnungen im html script machen kann um die function node nicht zu brauchen.
            Das klappt mit function node bestens jedoch habe ich Stellen wo ich zusätzlich mit join node arbeiten muss.
            Würde ich schript in html aufrufen könne dann wäre einiges transparenter.

            hier die Funkion die in html ohne fuction node laufen sollte und danach html taemplate sowie debug ausgabe von den nodes.

            Bitte gleich fragen wenn noch was unklar ist. (habe angular auch schon gesichtet sehe aber die Lösung dort auch (noch) nicht

            var wert = { payload: null };
            lok = {};
            lok.val = msg.payload.val;
            lok.aktu = (new Date(msg.payload.lc)).toLocaleTimeString();
            
            wert.payload = lok;
            wert.topic = "change Time";
            
            return [wert];
            
            <div ng-bind-html="msg.payload.val"></div>
            <div ng-bind-html="msg.payload.aktu"></div>
            
            ![debug.png](/assets/uploads/files/1644770200627-debug.png) 
            ![nodes.png](/assets/uploads/files/1644770221230-nodes.png)
            HomoranH OliverIOO 2 Antworten Letzte Antwort
            0
            • F franzda

              @oliverio

              Hallo Danke für die Reaktion.
              Habe den Fall abgespeckt um die eigentliche Frage zu zeigen.
              An sich geht es "nur" darum wie ich kleinere Berechnungen im html script machen kann um die function node nicht zu brauchen.
              Das klappt mit function node bestens jedoch habe ich Stellen wo ich zusätzlich mit join node arbeiten muss.
              Würde ich schript in html aufrufen könne dann wäre einiges transparenter.

              hier die Funkion die in html ohne fuction node laufen sollte und danach html taemplate sowie debug ausgabe von den nodes.

              Bitte gleich fragen wenn noch was unklar ist. (habe angular auch schon gesichtet sehe aber die Lösung dort auch (noch) nicht

              var wert = { payload: null };
              lok = {};
              lok.val = msg.payload.val;
              lok.aktu = (new Date(msg.payload.lc)).toLocaleTimeString();
              
              wert.payload = lok;
              wert.topic = "change Time";
              
              return [wert];
              
              <div ng-bind-html="msg.payload.val"></div>
              <div ng-bind-html="msg.payload.aktu"></div>
              
              ![debug.png](/assets/uploads/files/1644770200627-debug.png) 
              ![nodes.png](/assets/uploads/files/1644770221230-nodes.png)
              HomoranH Nicht stören
              HomoranH Nicht stören
              Homoran
              Global Moderator Administrators
              schrieb am zuletzt editiert von
              #6

              @franzda sagte in Parameterübergabe an javascript in HTML:

              An sich geht es "nur" darum wie ich kleinere Berechnungen im html script machen kann um die function node nicht zu brauchen.

              den Ansatz verstehe ich immer noch nicht.
              genau dafür ist doch der function-node da.

              Jetzt willst du erst eine HTML-Seite mit js - bearbeiten, um das Ergebnis dann mit node-red weiterzuverwursten (oder umgekehrt)??
              Das ergibt für mich keinen Sinn.

              kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

              Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

              der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

              F 1 Antwort Letzte Antwort
              0
              • HomoranH Homoran

                @franzda sagte in Parameterübergabe an javascript in HTML:

                An sich geht es "nur" darum wie ich kleinere Berechnungen im html script machen kann um die function node nicht zu brauchen.

                den Ansatz verstehe ich immer noch nicht.
                genau dafür ist doch der function-node da.

                Jetzt willst du erst eine HTML-Seite mit js - bearbeiten, um das Ergebnis dann mit node-red weiterzuverwursten (oder umgekehrt)??
                Das ergibt für mich keinen Sinn.

                F Offline
                F Offline
                franzda
                schrieb am zuletzt editiert von franzda
                #7

                @homoran nein es geht darum dass ich mehrere Listen habe. Unterschidlicher Inhalt. Die werte visualisiere ich über html template. Meisten mit folgende Struktur

                Zwischen Quelle und Template ist ein function node die unnötig ist wenn ich z.B. den wert payload.lc formatiert ausgeben kann.

                Der einzige Punkt ist dass überall die HTML Funktionsbeispiele mit Konstanten und mit Input Box und nicht mit Variablen beschrieben sind.
                Es mag sein dass mein Stil nicht typisch ist, aber nach 40 Jahre programmier bzw. IT Erfahrung hat man bestimmte "Gewohnheiten" bzw. Vorlieben.
                Wie im Beispiel, denke ich nachvollziehbar dass mein Ansatz einen gewissen Charme hat

                    <tr ng-repeat="element in msg.payload">
                    
                            <!-- Feld 0   -->
                            <td ng-if="element.wert9 != true && element.wert10 != true" WIDTH="5%" ALIGN="CENTER" bgcolor='white'>
                                <font color='black'>
                                    <div ng-bind-html="element.wert0"></div>
                                </font>
                            </td>
                
                    </tr>
                
                1 Antwort Letzte Antwort
                0
                • F franzda

                  @oliverio

                  Hallo Danke für die Reaktion.
                  Habe den Fall abgespeckt um die eigentliche Frage zu zeigen.
                  An sich geht es "nur" darum wie ich kleinere Berechnungen im html script machen kann um die function node nicht zu brauchen.
                  Das klappt mit function node bestens jedoch habe ich Stellen wo ich zusätzlich mit join node arbeiten muss.
                  Würde ich schript in html aufrufen könne dann wäre einiges transparenter.

                  hier die Funkion die in html ohne fuction node laufen sollte und danach html taemplate sowie debug ausgabe von den nodes.

                  Bitte gleich fragen wenn noch was unklar ist. (habe angular auch schon gesichtet sehe aber die Lösung dort auch (noch) nicht

                  var wert = { payload: null };
                  lok = {};
                  lok.val = msg.payload.val;
                  lok.aktu = (new Date(msg.payload.lc)).toLocaleTimeString();
                  
                  wert.payload = lok;
                  wert.topic = "change Time";
                  
                  return [wert];
                  
                  <div ng-bind-html="msg.payload.val"></div>
                  <div ng-bind-html="msg.payload.aktu"></div>
                  
                  ![debug.png](/assets/uploads/files/1644770200627-debug.png) 
                  ![nodes.png](/assets/uploads/files/1644770221230-nodes.png)
                  OliverIOO Offline
                  OliverIOO Offline
                  OliverIO
                  schrieb am zuletzt editiert von OliverIO
                  #8

                  @franzda sagte in Parameterübergabe an javascript in HTML:

                  new Date(msg.payload.lc)).toLocaleTimeString();

                  ok, hier mal ein ganz einfacher flow um das grundprinzip zu verstehen.
                  erst mal ohne objektanlage.
                  du willst die daten ja direkt in die seite hineinschreiben und nicht durch die seite irgendwie abfragen lassen (würde über den simple-adapter gehen.
                  im folgenden beispiel flow wird der lc-wert eines datenpunktes in ein template als klartext ausgegeben direkt in einem javascript. die dann erzeugte seite kann dann über den node-red webserver abgerufen werden
                  http://<ip des iobrokers>:1880/test
                  den request namen kann man in der node http in ganz links definieren
                  danach wird der wert aus iobroker abgerufen und in ein template geschrieben
                  das template wird als text ausgeliefert und der webbrowser interpretiert den inhalt
                  der eventhandler im template ist notwendig, da das skript erst loslaufen darf, wenn die seite komplett geladen ist.

                  wenn du dir mal das erzeugte javascript im browser anschauen willst, dann entferne vor im template vor debugger die //, deploye neu, öffne im browser die develeoper konsole und lade die seite neu. dann bleibt der code direkt an der stelle stehen. mit f8 kannst weiter laufen lassen
                  mit f10 per einzelschritt weitergehen, rechts im scope bereich kannst du dir die variableninhalte andschauen

                  [
                     {
                         "id": "593468e.75a0498",
                         "type": "tab",
                         "label": "Flow 1",
                         "disabled": false,
                         "info": ""
                     },
                     {
                         "id": "5b470d72.435d94",
                         "type": "template",
                         "z": "593468e.75a0498",
                         "name": "",
                         "field": "payload",
                         "fieldType": "msg",
                         "format": "handlebars",
                         "syntax": "mustache",
                         "template": "This is the payload: <span id=\"lc\"></span> !\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(event) { \n    debugger;\n    var lc;\n    lc = new Date({{payload.lc}}).toLocaleTimeString();    \n    var span=document.getElementById(\"lc\");\n    span.innerHTML = lc;\n});\n</script>\n",
                         "output": "str",
                         "x": 460,
                         "y": 100,
                         "wires": [
                             [
                                 "9727d86c.9fa0c8"
                             ]
                         ]
                     },
                     {
                         "id": "47525d0e.a57eb4",
                         "type": "http in",
                         "z": "593468e.75a0498",
                         "name": "html in",
                         "url": "/test",
                         "method": "get",
                         "upload": false,
                         "swaggerDoc": "",
                         "x": 90,
                         "y": 100,
                         "wires": [
                             [
                                 "177a16db.ada7c9"
                             ]
                         ]
                     },
                     {
                         "id": "9727d86c.9fa0c8",
                         "type": "http response",
                         "z": "593468e.75a0498",
                         "name": "test response",
                         "statusCode": "200",
                         "headers": {},
                         "x": 640,
                         "y": 100,
                         "wires": []
                     },
                     {
                         "id": "177a16db.ada7c9",
                         "type": "ioBroker get",
                         "z": "593468e.75a0498",
                         "name": "",
                         "topic": "0_userdata.0.test1",
                         "attrname": "payload",
                         "payloadType": "object",
                         "x": 270,
                         "y": 100,
                         "wires": [
                             [
                                 "5b470d72.435d94"
                             ]
                         ]
                     }
                  ]
                  

                  Meine Adapter und Widgets
                  TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                  Links im Profil

                  F 1 Antwort Letzte Antwort
                  0
                  • OliverIOO OliverIO

                    @franzda sagte in Parameterübergabe an javascript in HTML:

                    new Date(msg.payload.lc)).toLocaleTimeString();

                    ok, hier mal ein ganz einfacher flow um das grundprinzip zu verstehen.
                    erst mal ohne objektanlage.
                    du willst die daten ja direkt in die seite hineinschreiben und nicht durch die seite irgendwie abfragen lassen (würde über den simple-adapter gehen.
                    im folgenden beispiel flow wird der lc-wert eines datenpunktes in ein template als klartext ausgegeben direkt in einem javascript. die dann erzeugte seite kann dann über den node-red webserver abgerufen werden
                    http://<ip des iobrokers>:1880/test
                    den request namen kann man in der node http in ganz links definieren
                    danach wird der wert aus iobroker abgerufen und in ein template geschrieben
                    das template wird als text ausgeliefert und der webbrowser interpretiert den inhalt
                    der eventhandler im template ist notwendig, da das skript erst loslaufen darf, wenn die seite komplett geladen ist.

                    wenn du dir mal das erzeugte javascript im browser anschauen willst, dann entferne vor im template vor debugger die //, deploye neu, öffne im browser die develeoper konsole und lade die seite neu. dann bleibt der code direkt an der stelle stehen. mit f8 kannst weiter laufen lassen
                    mit f10 per einzelschritt weitergehen, rechts im scope bereich kannst du dir die variableninhalte andschauen

                    [
                       {
                           "id": "593468e.75a0498",
                           "type": "tab",
                           "label": "Flow 1",
                           "disabled": false,
                           "info": ""
                       },
                       {
                           "id": "5b470d72.435d94",
                           "type": "template",
                           "z": "593468e.75a0498",
                           "name": "",
                           "field": "payload",
                           "fieldType": "msg",
                           "format": "handlebars",
                           "syntax": "mustache",
                           "template": "This is the payload: <span id=\"lc\"></span> !\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(event) { \n    debugger;\n    var lc;\n    lc = new Date({{payload.lc}}).toLocaleTimeString();    \n    var span=document.getElementById(\"lc\");\n    span.innerHTML = lc;\n});\n</script>\n",
                           "output": "str",
                           "x": 460,
                           "y": 100,
                           "wires": [
                               [
                                   "9727d86c.9fa0c8"
                               ]
                           ]
                       },
                       {
                           "id": "47525d0e.a57eb4",
                           "type": "http in",
                           "z": "593468e.75a0498",
                           "name": "html in",
                           "url": "/test",
                           "method": "get",
                           "upload": false,
                           "swaggerDoc": "",
                           "x": 90,
                           "y": 100,
                           "wires": [
                               [
                                   "177a16db.ada7c9"
                               ]
                           ]
                       },
                       {
                           "id": "9727d86c.9fa0c8",
                           "type": "http response",
                           "z": "593468e.75a0498",
                           "name": "test response",
                           "statusCode": "200",
                           "headers": {},
                           "x": 640,
                           "y": 100,
                           "wires": []
                       },
                       {
                           "id": "177a16db.ada7c9",
                           "type": "ioBroker get",
                           "z": "593468e.75a0498",
                           "name": "",
                           "topic": "0_userdata.0.test1",
                           "attrname": "payload",
                           "payloadType": "object",
                           "x": 270,
                           "y": 100,
                           "wires": [
                               [
                                   "5b470d72.435d94"
                               ]
                           ]
                       }
                    ]
                    

                    F Offline
                    F Offline
                    franzda
                    schrieb am zuletzt editiert von
                    #9

                    @oliverio Hallo oliverio DANKE für deine echt tolle und ausführliche Antwort.
                    Jetzt habe ich die Funktionalität begriffen.

                    Ich werde mein Vorhaben nun anders lösen. Ich werde die Daten mit einem Funktionsblock vorbereiten usw.

                    1 Antwort Letzte Antwort
                    0
                    Antworten
                    • In einem neuen Thema antworten
                    Anmelden zum Antworten
                    • Älteste zuerst
                    • Neuste zuerst
                    • Meiste Stimmen


                    Support us

                    ioBroker
                    Community Adapters
                    Donate

                    706

                    Online

                    32.5k

                    Benutzer

                    81.7k

                    Themen

                    1.3m

                    Beiträge
                    Community
                    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                    ioBroker Community 2014-2025
                    logo
                    • Anmelden

                    • Du hast noch kein Konto? Registrieren

                    • Anmelden oder registrieren, um zu suchen
                    • Erster Beitrag
                      Letzter Beitrag
                    0
                    • Home
                    • Aktuell
                    • Tags
                    • Ungelesen 0
                    • Kategorien
                    • Unreplied
                    • Beliebt
                    • GitHub
                    • Docu
                    • Hilfe