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. Steelseries Widgets im NodeRed Dashboard nutzen

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.6k

Steelseries Widgets im NodeRed Dashboard nutzen

Geplant Angeheftet Gesperrt Verschoben Node-Red
node-red
65 Beiträge 5 Kommentatoren 10.5k Aufrufe 6 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.
  • mickymM mickym

    @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

    @mickym Sorry ich verstehe nur Bahnhof 🤔Bin erst seit geraumer Zeit an Node Red dran und habe das wahrscheinlich noch nicht gebraucht bzw vermisst. Kannst es mir vielleicht erklären?

    Gerne - also nochmal Frage für Frage - nutzt Du NodeRed als Standalone Version oder im Adapter des iobrokers?
    Auf welchem System arbeitest Du - einem Raspberry?

    Hast Du Zugriff auf die Kommandozeile?

    Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

    ? Offline
    ? Offline
    Ein ehemaliger Benutzer
    schrieb am zuletzt editiert von
    #35

    @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

    Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

    Was mache ich damit?

    mickymM 1 Antwort Letzte Antwort
    0
    • ? Ein ehemaliger Benutzer

      @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

      Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

      Was mache ich damit?

      mickymM Offline
      mickymM Offline
      mickym
      Most Active
      schrieb am zuletzt editiert von mickym
      #36

      @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

      @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

      Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

      Was mache ich damit?

      In diesem Verzeichnis befindet sich die settings.js Datei um einen Pfad einzutragen, wo NodeRed später die Dateien findet.

      Also ich gehe mal davon aus, dass Du via ssh oder einem Terminal auf Dein Proxmox System zugreifst.

      In dieser Datei kommentierst Du die http Static Direktive ein und spezifizierst den Pfad worauf NodeRed später Zugriff haben sollt. In diesen Pfad musst Du dann auch die Dateien aus dem Thread hier kopieren.

      3b36afa6-a17b-4c22-a906-e96e635acfef-image.png

      Wenn Du es genauso wie ich haben möchtest, dann erstellst Du Dir halt auch einen Ordner unter data node-red

      Also Kommandozeile öffnen:

      dann

      sudo mkdir /data
      sudo mkdir /data/node-red
      

      dann gehst Du in das Verzeichnis, dass ich vorher gepostet habe.

      cd /opt/iobroker/node_modules/iobroker.node-red
      sudo nano settings.js
      

      dort wanderst Du dann runter wie in meinem screenshot beschrieben zu dem http-static parameter und kommentierst den Parameter ein und gibst den Pfad ein:

      httpStatic: '/data/node-red/',
      

      Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

      ? 2 Antworten Letzte Antwort
      0
      • mickymM mickym

        @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

        @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

        Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

        Was mache ich damit?

        In diesem Verzeichnis befindet sich die settings.js Datei um einen Pfad einzutragen, wo NodeRed später die Dateien findet.

        Also ich gehe mal davon aus, dass Du via ssh oder einem Terminal auf Dein Proxmox System zugreifst.

        In dieser Datei kommentierst Du die http Static Direktive ein und spezifizierst den Pfad worauf NodeRed später Zugriff haben sollt. In diesen Pfad musst Du dann auch die Dateien aus dem Thread hier kopieren.

        3b36afa6-a17b-4c22-a906-e96e635acfef-image.png

        Wenn Du es genauso wie ich haben möchtest, dann erstellst Du Dir halt auch einen Ordner unter data node-red

        Also Kommandozeile öffnen:

        dann

        sudo mkdir /data
        sudo mkdir /data/node-red
        

        dann gehst Du in das Verzeichnis, dass ich vorher gepostet habe.

        cd /opt/iobroker/node_modules/iobroker.node-red
        sudo nano settings.js
        

        dort wanderst Du dann runter wie in meinem screenshot beschrieben zu dem http-static parameter und kommentierst den Parameter ein und gibst den Pfad ein:

        httpStatic: '/data/node-red/',
        
        ? Offline
        ? Offline
        Ein ehemaliger Benutzer
        schrieb am zuletzt editiert von
        #37

        @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

        Also ich gehe mal davon aus, dass Du via ssh oder einem Terminal auf Dein Proxmox System zugreifst.

        Richtig

        1 Antwort Letzte Antwort
        0
        • mickymM mickym

          @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

          @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

          Im iobroker ist die richtige settings.js im Verzeichnis: /opt/iobroker/node_modules/iobroker.node-red/

          Was mache ich damit?

          In diesem Verzeichnis befindet sich die settings.js Datei um einen Pfad einzutragen, wo NodeRed später die Dateien findet.

          Also ich gehe mal davon aus, dass Du via ssh oder einem Terminal auf Dein Proxmox System zugreifst.

          In dieser Datei kommentierst Du die http Static Direktive ein und spezifizierst den Pfad worauf NodeRed später Zugriff haben sollt. In diesen Pfad musst Du dann auch die Dateien aus dem Thread hier kopieren.

          3b36afa6-a17b-4c22-a906-e96e635acfef-image.png

          Wenn Du es genauso wie ich haben möchtest, dann erstellst Du Dir halt auch einen Ordner unter data node-red

          Also Kommandozeile öffnen:

          dann

          sudo mkdir /data
          sudo mkdir /data/node-red
          

          dann gehst Du in das Verzeichnis, dass ich vorher gepostet habe.

          cd /opt/iobroker/node_modules/iobroker.node-red
          sudo nano settings.js
          

          dort wanderst Du dann runter wie in meinem screenshot beschrieben zu dem http-static parameter und kommentierst den Parameter ein und gibst den Pfad ein:

          httpStatic: '/data/node-red/',
          
          ? Offline
          ? Offline
          Ein ehemaliger Benutzer
          schrieb am zuletzt editiert von
          #38

          @mickym Du hast doch bestimmt die Befehle wie ich das schnell bewerkstelligen kann ;-)

          mickymM 1 Antwort Letzte Antwort
          0
          • ? Ein ehemaliger Benutzer

            @mickym Du hast doch bestimmt die Befehle wie ich das schnell bewerkstelligen kann ;-)

            mickymM Offline
            mickymM Offline
            mickym
            Most Active
            schrieb am zuletzt editiert von mickym
            #39

            @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

            @mickym Du hast doch bestimmt die Befehle wie ich das schnell bewerkstelligen kann ;-)

            Habe ich nun alles im Vorpost aktualisiert.
            Wenn Du unsicher bist, machst nochmal einen Screenshot mit der von Dir geänderten Stelle in der settings.js ein.

            Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

            ? 2 Antworten Letzte Antwort
            0
            • mickymM mickym

              @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

              @mickym Du hast doch bestimmt die Befehle wie ich das schnell bewerkstelligen kann ;-)

              Habe ich nun alles im Vorpost aktualisiert.
              Wenn Du unsicher bist, machst nochmal einen Screenshot mit der von Dir geänderten Stelle in der settings.js ein.

              ? Offline
              ? Offline
              Ein ehemaliger Benutzer
              schrieb am zuletzt editiert von
              #40

              @mickym Danke das hat schon mal funktioniert. Jetzt nicht lachen aber wie bekomme ich jetzt die beiden Dateien in dieses Verzeichnis was ich nicht mal finde. Sorry stehe mit Linux auf Kriegsfuß.

              mickymM 1 Antwort Letzte Antwort
              0
              • mickymM mickym

                @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                @mickym Du hast doch bestimmt die Befehle wie ich das schnell bewerkstelligen kann ;-)

                Habe ich nun alles im Vorpost aktualisiert.
                Wenn Du unsicher bist, machst nochmal einen Screenshot mit der von Dir geänderten Stelle in der settings.js ein.

                ? Offline
                ? Offline
                Ein ehemaliger Benutzer
                schrieb am zuletzt editiert von
                #41

                @mickym Wollte es mir einfach machen und FileZilla die Dateien kopieren.

                mickymM 1 Antwort Letzte Antwort
                0
                • ? Ein ehemaliger Benutzer

                  @mickym Danke das hat schon mal funktioniert. Jetzt nicht lachen aber wie bekomme ich jetzt die beiden Dateien in dieses Verzeichnis was ich nicht mal finde. Sorry stehe mit Linux auf Kriegsfuß.

                  mickymM Offline
                  mickymM Offline
                  mickym
                  Most Active
                  schrieb am zuletzt editiert von
                  #42

                  @noah3112 Also finden solltest Du es schon:

                  Wenn Du also

                  cd /data
                  

                  und

                  ls -l
                  

                  machst dann sollte ein Verzeichnis node-red vorhanden sein.

                  pi@MWHome:~ $ cd /data
                  pi@MWHome:/data $ ls -l
                  
                  drwxrwxr-x 4 root  adm    4096 25. Mai 2021  node-red
                  
                  

                  Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                  1 Antwort Letzte Antwort
                  0
                  • ? Ein ehemaliger Benutzer

                    @mickym Wollte es mir einfach machen und FileZilla die Dateien kopieren.

                    mickymM Offline
                    mickymM Offline
                    mickym
                    Most Active
                    schrieb am zuletzt editiert von mickym
                    #43

                    @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                    @mickym Wollte es mir einfach machen und FileZilla die Dateien kopieren.

                    FileZilla ist glaub ein Programm, dass über ftp funktioniert - das würde aber bedeuten, dass Du einen ftp Server auf Deinem System installiert hast.

                    Auf welchem System arbeitest Du - Win10?

                    Egal wenn Du es nicht hast gehst Du in das von Dir erstellte Verzeichnis:

                    cd /data/node-red
                    sudo mkdir myjs
                    cd myjs
                    

                    Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                    ? 2 Antworten Letzte Antwort
                    0
                    • mickymM mickym

                      @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                      @mickym Wollte es mir einfach machen und FileZilla die Dateien kopieren.

                      FileZilla ist glaub ein Programm, dass über ftp funktioniert - das würde aber bedeuten, dass Du einen ftp Server auf Deinem System installiert hast.

                      Auf welchem System arbeitest Du - Win10?

                      Egal wenn Du es nicht hast gehst Du in das von Dir erstellte Verzeichnis:

                      cd /data/node-red
                      sudo mkdir myjs
                      cd myjs
                      
                      ? Offline
                      ? Offline
                      Ein ehemaliger Benutzer
                      schrieb am zuletzt editiert von
                      #44

                      @mickym

                      ulf@iobroker:/data$ ls -l
                      insgesamt 4
                      drwxr-xr-x 2 root root 4096 Dez 20 22:14 node-red
                      ulf@iobroker:/data$
                      
                      

                      Das klappt schon nur weiß ich nicht wie ich die Dateien von meinem Windows System dort hinbekomme. Mit FileZilla kann ich auf das Dateisystem von meinem Server zugreifen. Ist so ähnlich wie ssh...

                      1 Antwort Letzte Antwort
                      0
                      • mickymM mickym

                        @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                        @mickym Wollte es mir einfach machen und FileZilla die Dateien kopieren.

                        FileZilla ist glaub ein Programm, dass über ftp funktioniert - das würde aber bedeuten, dass Du einen ftp Server auf Deinem System installiert hast.

                        Auf welchem System arbeitest Du - Win10?

                        Egal wenn Du es nicht hast gehst Du in das von Dir erstellte Verzeichnis:

                        cd /data/node-red
                        sudo mkdir myjs
                        cd myjs
                        
                        ? Offline
                        ? Offline
                        Ein ehemaliger Benutzer
                        schrieb am zuletzt editiert von
                        #45

                        @mickym

                        ulf@iobroker:/data$ ls -l
                        insgesamt 4
                        drwxr-xr-x 2 root root 4096 Dez 20 22:14 node-red
                        ulf@iobroker:/data$ ^C
                        ulf@iobroker:/data$ cd
                        ulf@iobroker:~$ cd /data/node-red
                        ulf@iobroker:/data/node-red$ sudo mkdir myjs
                        [sudo] Passwort für ulf:
                        ulf@iobroker:/data/node-red$ cd myjs
                        ulf@iobroker:/data/node-red/myjs$
                        

                        ist erledigt

                        mickymM 1 Antwort Letzte Antwort
                        0
                        • ? Ein ehemaliger Benutzer

                          @mickym

                          ulf@iobroker:/data$ ls -l
                          insgesamt 4
                          drwxr-xr-x 2 root root 4096 Dez 20 22:14 node-red
                          ulf@iobroker:/data$ ^C
                          ulf@iobroker:/data$ cd
                          ulf@iobroker:~$ cd /data/node-red
                          ulf@iobroker:/data/node-red$ sudo mkdir myjs
                          [sudo] Passwort für ulf:
                          ulf@iobroker:/data/node-red$ cd myjs
                          ulf@iobroker:/data/node-red/myjs$
                          

                          ist erledigt

                          mickymM Offline
                          mickymM Offline
                          mickym
                          Most Active
                          schrieb am zuletzt editiert von mickym
                          #46

                          @noah3112 In dieses Verzeichnis kopierst Du dann direkt die Dateien aus dem Netz

                          6ffd0961-9662-47da-9f4a-e644e80feb90-image.png

                          falls Dein System direkt zum Netz hat.

                          Schau mal ob Du wget auf Deinem Linux System hast in dem Du wget eingibst

                          Auf Deinem Windows-System wenn Du die github Seite aufgemacht hast - kopierst Du den Link zu der Datei in die Zwischenablage:

                          ba4483ce-4a37-45d9-a44b-87c890318db7-image.png

                          ich hoffe nun dass Du die Windows Zwischenablage in Dein Terminalfenster kopieren kannst, sonst musst Du es halt abtippen.

                          In dem Zielverzeichnis gibst:

                          sudo wget https://...
                          

                          ein

                          also einfach den Inhalt der Zwischenablage hinter das wget, schaut dann so aus

                          /data/node-red/myjs $ sudo wget https://github.com/HanSolo/SteelSeries-Canvas/blob/master/steelseries-min.js
                          

                          Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                          ? 1 Antwort Letzte Antwort
                          0
                          • mickymM mickym

                            @noah3112 In dieses Verzeichnis kopierst Du dann direkt die Dateien aus dem Netz

                            6ffd0961-9662-47da-9f4a-e644e80feb90-image.png

                            falls Dein System direkt zum Netz hat.

                            Schau mal ob Du wget auf Deinem Linux System hast in dem Du wget eingibst

                            Auf Deinem Windows-System wenn Du die github Seite aufgemacht hast - kopierst Du den Link zu der Datei in die Zwischenablage:

                            ba4483ce-4a37-45d9-a44b-87c890318db7-image.png

                            ich hoffe nun dass Du die Windows Zwischenablage in Dein Terminalfenster kopieren kannst, sonst musst Du es halt abtippen.

                            In dem Zielverzeichnis gibst:

                            sudo wget https://...
                            

                            ein

                            also einfach den Inhalt der Zwischenablage hinter das wget, schaut dann so aus

                            /data/node-red/myjs $ sudo wget https://github.com/HanSolo/SteelSeries-Canvas/blob/master/steelseries-min.js
                            
                            ? Offline
                            ? Offline
                            Ein ehemaliger Benutzer
                            schrieb am zuletzt editiert von
                            #47

                            @mickym Ich glaub ich habe alle...vielen Dank für deine Hilfe. Werde morgen mal testen ob es funktioniert. Melde mich wieder und werde berichten oder weiter dumme Fragen stellen ;-)

                            mickymM 1 Antwort Letzte Antwort
                            0
                            • ? Ein ehemaliger Benutzer

                              @mickym Ich glaub ich habe alle...vielen Dank für deine Hilfe. Werde morgen mal testen ob es funktioniert. Melde mich wieder und werde berichten oder weiter dumme Fragen stellen ;-)

                              mickymM Offline
                              mickymM Offline
                              mickym
                              Most Active
                              schrieb am zuletzt editiert von
                              #48

                              @noah3112 Ja Du musst nur den NodeRed Adapter nachdem Du die settings.js modifiziert hast noch neu starten, damit die Änderungen eingelesen werden.

                              Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                              1 Antwort Letzte Antwort
                              0
                              • mickymM mickym

                                Ich stelle ja fest, dass hin und wieder doch jemand meine Threads liest. So hat es sich ergeben, dass mich der User @Garf in dem Thread zur Einbindung der Wetter APIs auf ein paar in meinen Augen sehr ansprechend aussehende Widgets aufmerksam gemacht hat. Wahrscheinlich, lässt sich das im VIS noch leichter einbinden - zumindest in der alten Version der Steelseries Widgets, die hier benutzt wird.

                                Zum Ausprobieren, welche Widgets es gibt und wie man deren Aussehen verändern kann, sollte man sich mal diese Demoseite anschauen.

                                Die wichtigste Voraussetzung ist, wie bei der Beschreibung zur Einbindung der Bahnhofsuhr, dass man in der settings.js den http-static Parameter definiert, um es NodeRed zu ermöglichen auf eigene Datei zuzugreifen.

                                Das Prinzip hier ist das Gleiche.

                                Leider bin ich mit der ganzen WEB und meinem HTML Wissen und Javascript Dateien ein blutiger Anfänger :( . Diese neue Version auf die dieses GitHub Respository verweist, bekomme ich deshalb nicht eingebunden, da da auch alle Komponenten in Einzeldateien verpackt sind und nachgeladen werden. Weiß nicht warum man das macht, aber ich bekomme diese Imports nicht eingebunden, da es sich nicht um Module handelt und das Verändern von JSON Dateien etc. war alles nicht erfolgreich, sodass ich eigentlich schon beinahe am Aufgeben war. :worried: :weary:

                                Aber zum Glück ist die alte Version noch verfügbar und es scheint, dass die Funktionlität sich nicht geändert hat in der neuen Version und ich bis jetzt bei meinen Versuchen, auch alles in der alten Version gefunden habe.

                                Die alte Version, die funktioniert und mit der ich hier arbeite findet man hier: https://github.com/HanSolo/SteelSeries-Canvas
                                Das heißt dieses Projekt ist ca. 10 Jahre alt. ;)

                                Im Prinzip brauchst man aus dem Link eigentlich nur 2 Dateien:

                                <script src="/myjs/tween.js"></script>
                                <script src="/myjs/steelseries.js"></script>
                                
                                

                                Ich habe jetzt mal nicht die minimal Versionen genommen, weil ich nicht weiß was fehlt. Die beiden Dateien also in Euer http-Static Verzeichnis kopieren und das wars dann eigentlich schon.

                                Ein Beispiel Flow mit den alten JS-Dateien gibst in diesem Artikel von 2017 und der funktioniert auch heute noch ;) :
                                https://tech.scargill.net/steelseries-and-node-red/

                                Hier wurden auch die alten Dateien verwendet. ;)

                                Wenn man diesen Flow nachbildet dann kann man ein paar Effekte testen - so schaut das Teil dann im NR Dashboard aus:

                                f31ed635-3872-4137-886a-7c7a298cc207-image.png

                                Man kann da bissi Lernen. Zum Beispiel ist die LED rechts oben (also unter der 70) die leuchtet wenn ein selbst definierter Schwellenwert (durch das rote Dreieck markiert). Dabei kann man definieren, ob die LED leuchten soll, wenn der Schwellenwert unter oder überschritten wird. ;)

                                Einer von den @Garf noch zur Verfügung gestellten Artikel, ist dieser hier:
                                https://harmoniccode.blogspot.com/2011/09/steelseries-396.html. Da gibts zwar noch paar interessante Effekte (wie diese innen beleuchteten Rahmen), aber diese Quellen gibst leider nicht mehr. :( -

                                Die Dokumentation zu diesen Widgets ist spärlich. Gibt zwar im Rahmen einiger Diskussionen, wie hier ein paar nützliche Infos - aber im Prinzip muss man sich die Javascript Dateien direkt anschauen.

                                Ich habe mal einen Kommentar-Node gemacht, der zumindest mal die Definitionen, wie man diese aus den Template Nodes aufrufen muss, verfügbar gemacht.

                                5f1696e1-fa56-46ab-ac3c-e3b3f66c7fe7-image.png

                                vielleicht für den einen oder anderen der das ebenfalls nachbauen will - hier mal die Node:

                                [
                                   {
                                       "id": "59a78acc.e15774",
                                       "type": "comment",
                                       "z": "f19174b9.aa88f8",
                                       "name": "steelseries - Types",
                                       "info": "#  Definitionen       \n        \n##         Components EXTERNAL : INTERNAL\n        Radial : radial,\n        RadialBargraph : radialBargraph,\n        RadialVertical : radialVertical,\n        Linear: linear,\n        LinearBargraph: linearBargraph,\n        DisplaySingle: displaySingle,\n        DisplayMulti: displayMulti,\n        Level : level,\n        Compass : compass,\n        WindDirection : windDirection,\n        Horizon : horizon,\n        Led : led,\n        Clock : clock,\n        Battery : battery,\n        StopWatch : stopwatch,\n        Altimeter : altimeter,\n        TrafficLight: trafficlight,\n        LightBulb: lightbulb,\n        Odometer: odometer,\n\n        // Images\n        drawFrame : drawRadialFrameImage,\n        drawBackground : drawRadialBackgroundImage,\n        drawForeground : drawRadialForegroundImage,\n\n        // Tools\n        rgbaColor :  RgbaColor,\n        ConicalGradient : ConicalGradient,\n        setAlpha : setAlpha,\n        getColorFromFraction : getColorFromFraction,\n        gradientWrapper : GradientWrapper,\n\n        // Constants\n        BackgroundColor : backgroundColor,\n        LcdColor : lcdColor,\n        ColorDef : color,\n        LedColor : ledColor,\n        GaugeType : gaugeType,\n        Orientation: orientation,\n        FrameDesign : frameDesign,\n        PointerType : pointerType,\n        ForegroundType : foregroundType,\n        KnobType : knobType,\n        KnobStyle: knobStyle,\n        LabelNumberFormat: labelNumberFormat,\n        TickLabelOrientation: tickLabelOrientation,\n        TrendState: trendState,\n\n        // Other\n        Section : section\n\n\n# Formate\n\n##         backgroundColor \n        DARK_GRAY: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(153, 153, 153, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'DARK_GRAY'),\n        SATIN_GRAY: new BackgroundColorDef(new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(167, 184, 180, 1), new RgbaColor(137, 154, 150, 1), 'SATIN_GRAY'),\n        LIGHT_GRAY: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'LIGHT_GRAY'),\n        WHITE: new BackgroundColorDef(new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'WHITE'),\n        BLACK: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(150, 150, 150, 1), 'BLACK'),\n        BEIGE: new BackgroundColorDef(new RgbaColor(178, 172, 150, 1), new RgbaColor(204, 205, 184, 1), new RgbaColor(231, 231, 214, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BEIGE'),\n        BROWN: new BackgroundColorDef(new RgbaColor(245, 225, 193, 1), new RgbaColor(245, 225, 193, 1), new RgbaColor(255, 250, 240, 1), new RgbaColor(109, 73, 47, 1), new RgbaColor(89, 53, 27, 1), 'BROWN'),\n        RED: new BackgroundColorDef(new RgbaColor(198, 93, 95, 1), new RgbaColor(212, 132, 134, 1), new RgbaColor(242, 218, 218, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(90, 0, 0, 1), 'RED'),\n        GREEN: new BackgroundColorDef(new RgbaColor(65, 120, 40, 1), new RgbaColor(129, 171, 95, 1), new RgbaColor(218, 237, 202, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 90, 0, 1), 'GREEN'),\n        BLUE: new BackgroundColorDef(new RgbaColor(45, 83, 122, 1), new RgbaColor(115, 144, 170, 1), new RgbaColor(227, 234, 238, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 90, 1), 'BLUE'),\n        ANTHRACITE: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(250, 250, 250, 1), new RgbaColor(180, 180, 180, 1), 'ANTHRACITE'),\n        MUD: new BackgroundColorDef(new RgbaColor(80, 86, 82, 1), new RgbaColor(70, 76, 72, 1), new RgbaColor(57, 62, 58, 1), new RgbaColor(255, 255, 240, 1), new RgbaColor(225, 225, 210, 1), 'MUD'),\n        PUNCHED_SHEET: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'PUNCHED_SHEET'),\n        CARBON: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'CARBON'),\n        STAINLESS: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'STAINLESS'),\n        BRUSHED_METAL: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_METAL'),\n        BRUSHED_STAINLESS: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(110, 110, 112, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_STAINLESS'),\n        TURNED: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'TURNED')\n\n\n##      lcdColor\n        BEIGE: new LcdColorDef('#c8c8b1', 'rgb(241, 237, 207)', 'rgb(234, 230, 194)', 'rgb(225, 220, 183)', 'rgb(237, 232, 191)', '#000000'),\n        BLUE: new LcdColorDef('#ffffff', 'rgb(231, 246, 255)', 'rgb(170, 224, 255)', 'rgb(136, 212, 255)', 'rgb(192, 232, 255)', '#124564'),\n        ORANGE: new LcdColorDef('#ffffff', 'rgb(255, 245, 225)', 'rgb(255, 217, 147)', 'rgb(255, 201, 104)', 'rgb(255, 227, 173)', '#503700'),\n        RED: new LcdColorDef('#ffffff', 'rgb(255, 225, 225)', 'rgb(253, 152, 152)', 'rgb(252, 114, 115)', 'rgb(254, 178, 178)', '#4f0c0e'),\n        YELLOW: new LcdColorDef('#ffffff', 'rgb(245, 255, 186)', 'rgb(210, 255, 0)', 'rgb(158, 205, 0)', 'rgb(210, 255, 0)', '#405300'),\n        WHITE: new LcdColorDef('#ffffff', '#ffffff', 'rgb(241, 246, 242)', 'rgb(229, 239, 244)', '#ffffff', '#000000'),\n        GRAY: new LcdColorDef('#414141', 'rgb(117, 117, 117)', 'rgb(87, 87, 87)', '#414141', 'rgb(81, 81, 81)', '#ffffff'),\n        BLACK: new LcdColorDef('#414141', '#666666', '#333333', '#000000', '#333333', '#cccccc'),\n        GREEN: new LcdColorDef('rgb(33, 67, 67)', 'rgb(33, 67, 67)', 'rgb(29, 58, 58)', 'rgb(28, 57, 57)', 'rgb(23, 46, 46)', 'rgba(0, 185, 165, 255)'),\n        BLUE2: new LcdColorDef('rgb(0, 68, 103)', 'rgb(8, 109, 165)', 'rgb(0, 72, 117)', 'rgb(0, 72, 117)', 'rgb(0, 68, 103)', 'rgb(111, 182, 228)'),\n        BLUE_BLACK: new LcdColorDef('rgb(22, 125, 212)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(11, 172, 244)', '#000000'),\n        BLUE_DARKBLUE: new LcdColorDef('rgb(18, 33, 88)', 'rgb(18, 33, 88)', 'rgb(19, 30, 90)', 'rgb(17, 31, 94)', 'rgb(21, 25, 90)', 'rgb(23, 99, 221)'),\n        BLUE_GRAY: new LcdColorDef('rgb(135, 174, 255)', 'rgb(101, 159, 255)', 'rgb(44, 93, 255)', 'rgb(27, 65, 254)', 'rgb(12, 50, 255)', '#b2b4ed'),\n        STANDARD: new LcdColorDef('rgb(131, 133, 119)', 'rgb(176, 183, 167)', 'rgb(165, 174, 153)', 'rgb(166, 175, 156)', 'rgb(175, 184, 165)', 'rgb(35, 42, 52)'),\n        STANDARD_GREEN: new LcdColorDef('#ffffff', 'rgb(219, 230, 220)', 'rgb(179, 194, 178)', 'rgb(153, 176, 151)', 'rgb(114, 138, 109)', '#080C06'),\n        BLUE_BLUE: new LcdColorDef('rgb(100, 168, 253)', 'rgb(100, 168, 253)', 'rgb(95, 160, 250)', 'rgb(80, 144, 252)', 'rgb(74, 134, 255)', '#002cbb'),\n        RED_DARKRED: new LcdColorDef('rgb(72, 36, 50)', 'rgb(185, 111, 110)', 'rgb(148, 66, 72)', 'rgb(83, 19, 20)', 'rgb(7, 6, 14)', '#FE8B92'),\n        DARKBLUE: new LcdColorDef('rgb(14, 24, 31)', 'rgb(46, 105, 144)', 'rgb(19, 64, 96)', 'rgb(6, 20, 29)', 'rgb(8, 9, 10)', '#3DB3FF'),\n        LILA: new LcdColorDef('rgb(175, 164, 255)', 'rgb(188, 168, 253)', 'rgb(176, 159, 255)', 'rgb(174, 147, 252)', 'rgb(168, 136, 233)', '#076148'),\n        BLACKRED: new LcdColorDef('rgb(8, 12, 11)', 'rgb(10, 11, 13)', 'rgb(11, 10, 15)', 'rgb(7, 13, 9)', 'rgb(9, 13, 14)', '#B50026'),\n        DARKGREEN: new LcdColorDef('rgb(25, 85, 0)', 'rgb(47, 154, 0)', 'rgb(30, 101, 0)', 'rgb(30, 101, 0)', 'rgb(25, 85, 0)', '#233123'),\n        AMBER: new LcdColorDef('rgb(182, 71, 0)', 'rgb(236, 155, 25)', 'rgb(212, 93, 5)', 'rgb(212, 93, 5)', 'rgb(182, 71, 0)', '#593A0A'),\n        LIGHTBLUE: new LcdColorDef('rgb(125, 146, 184)', 'rgb(197, 212, 231)', 'rgb(138, 155, 194)', 'rgb(138, 155, 194)', 'rgb(125, 146, 184)', '#090051'),\n        SECTIONS: new LcdColorDef('#b2b2b2', '#ffffff', '#c4c4c4', '#c4c4c4', '#b2b2b2', '#000000')\n\n\n##      color\n        RED: new ColorDef(new RgbaColor(82, 0, 0, 1), new RgbaColor(158, 0, 19, 1), new RgbaColor(213, 0, 25, 1), new RgbaColor(240, 82, 88, 1), new RgbaColor(255, 171, 173, 1), new RgbaColor(255, 217, 218, 1)),\n        GREEN: new ColorDef(new RgbaColor(8, 54, 4, 1), new RgbaColor(0, 107, 14, 1), new RgbaColor(15, 148, 0, 1), new RgbaColor(121, 186, 37, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1)),\n        BLUE: new ColorDef(new RgbaColor(0, 11, 68, 1), new RgbaColor(0, 73, 135, 1), new RgbaColor(0, 108, 201, 1), new RgbaColor(0, 141, 242, 1), new RgbaColor(122, 200, 255, 1), new RgbaColor(204, 236, 255, 1)),\n        ORANGE: new ColorDef(new RgbaColor(118, 83, 30, 1), new RgbaColor(215, 67, 0, 1), new RgbaColor(240, 117, 0, 1), new RgbaColor(255, 166, 0, 1), new RgbaColor(255, 255, 128, 1), new RgbaColor(255, 247, 194, 1)),\n        YELLOW: new ColorDef(new RgbaColor(41, 41, 0, 1), new RgbaColor(102, 102, 0, 1), new RgbaColor(177, 165, 0, 1), new RgbaColor(255, 242, 0, 1), new RgbaColor(255, 250, 153, 1), new RgbaColor(255, 252, 204, 1)),\n        CYAN: new ColorDef(new RgbaColor(15, 109, 109, 1), new RgbaColor(0, 109, 144, 1), new RgbaColor(0, 144, 191, 1), new RgbaColor(0, 174, 239, 1), new RgbaColor(153, 223, 249, 1), new RgbaColor(204, 239, 252, 1)),\n        MAGENTA: new ColorDef(new RgbaColor(98, 0, 114, 1), new RgbaColor(128, 24, 72, 1), new RgbaColor(191, 36, 107, 1), new RgbaColor(255, 48, 143, 1), new RgbaColor(255, 172, 210, 1), new RgbaColor(255, 214, 23, 1)),\n        WHITE: new ColorDef(new RgbaColor(210, 210, 210, 1), new RgbaColor(220, 220, 220, 1), new RgbaColor(235, 235, 235, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1)),\n        GRAY: new ColorDef(new RgbaColor(25, 25, 25, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(76, 76, 76, 1), new RgbaColor(128, 128, 128, 1), new RgbaColor(204, 204, 204, 1), new RgbaColor(243, 243, 243, 1)),\n        BLACK: new ColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(5, 5, 5, 1), new RgbaColor(10, 10, 10, 1), new RgbaColor(15, 15, 15, 1), new RgbaColor(20, 20, 20, 1), new RgbaColor(25, 25, 25, 1)),\n        RAITH: new ColorDef(new RgbaColor(0, 32, 65, 1), new RgbaColor(0, 65, 125, 1), new RgbaColor(0, 106, 172, 1), new RgbaColor(130, 180, 214, 1), new RgbaColor(148, 203, 242, 1), new RgbaColor(191, 229, 255, 1)),\n        GREEN_LCD: new ColorDef(new RgbaColor(0, 55, 45, 1), new RgbaColor(15, 109, 93, 1), new RgbaColor(0, 185, 165, 1), new RgbaColor(48, 255, 204, 1), new RgbaColor(153, 255, 227, 1), new RgbaColor(204, 255, 241, 1)),\n        JUG_GREEN: new ColorDef(new RgbaColor(0, 56, 0, 1), new RgbaColor(32, 69, 36, 1), new RgbaColor(50, 161, 0, 1), new RgbaColor(129, 206, 0, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1))\n\n\n##     ledColor \n        RED_LED: new LedColorDef('#FF9A89', '#FF9A89', '#FF3300', '#FF8D70', '#7E1C00', '#7E1C00', '#641B00'),\n        GREEN_LED: new LedColorDef('#9AFF89', '#9AFF89', '#59FF2A', '#A5FF00', '#1C7E00', '#1C7E00', '#1B6400'),\n        BLUE_LED: new LedColorDef('#899AFF', '#899AFF', '#0033FF', '#708DFF', '#001C7E', '#001C7E', '#001B64'),\n        ORANGE_LED: new LedColorDef('#FEA23F', '#FEA23F', '#FD6C00', '#FD6C00', '#592800', '#592800', '#421F00'),\n        YELLOW_LED: new LedColorDef('#FFFF62', '#FFFF62', '#FFFF00', '#FFFF00', '#6B6D00', '#6B6D00', '#515300'),\n        CYAN_LED: new LedColorDef('#00FFFF', '#00FFFF', '#1BC3C3', '#00FFFF', '#083B3B', '#083B3B', '#052727'),\n        MAGENTA_LED: new LedColorDef('#D300FF', '#D300FF', '#8600CB', '#C300FF', '#38004B', '#38004B', '#280035')\n\n\n##      gaugeType\n        TYPE1: new GaugeTypeDef('type1'),\n        TYPE2: new GaugeTypeDef('type2'),\n        TYPE3: new GaugeTypeDef('type3'),\n        TYPE4: new GaugeTypeDef('type4'),\n        TYPE5: new GaugeTypeDef('type5')\n\n\n##      orientation\n        NORTH: new OrientationDef('north'),\n        SOUTH: new OrientationDef('south'),\n        EAST: new OrientationDef('east'),\n        WEST: new OrientationDef('west')\n\n\n##      knobType \n        STANDARD_KNOB: new KnobTypeDef('standardKnob'),\n        METAL_KNOB: new KnobTypeDef('metalKnob')\n\n\n##      knobStyle \n        BLACK: new KnobStyleDef('black'),\n        BRASS: new KnobStyleDef('brass'),\n        SILVER: new KnobStyleDef('silver')\n\n##      frameDesign\n        BLACK_METAL: new FrameDesignDef('blackMetal'),\n        METAL: new FrameDesignDef('metal'),\n        SHINY_METAL: new FrameDesignDef('shinyMetal'),\n        BRASS: new FrameDesignDef('brass'),\n        STEEL: new FrameDesignDef('steel'),\n        CHROME: new FrameDesignDef('chrome'),\n        GOLD: new FrameDesignDef('gold'),\n        ANTHRACITE: new FrameDesignDef('anthracite'),\n        TILTED_GRAY: new FrameDesignDef('tiltedGray'),\n        TILTED_BLACK: new FrameDesignDef('tiltedBlack'),\n        GLOSSY_METAL: new FrameDesignDef('glossyMetal')\n\n\n##      pointerType\n        TYPE1: new PointerTypeDef('type1'),\n        TYPE2: new PointerTypeDef('type2'),\n        TYPE3: new PointerTypeDef('type3'),\n        TYPE4: new PointerTypeDef('type4'),\n        TYPE5: new PointerTypeDef('type5'),\n        TYPE6: new PointerTypeDef('type6'),\n        TYPE7: new PointerTypeDef('type7'),\n        TYPE8: new PointerTypeDef('type8'),\n        TYPE9: new PointerTypeDef('type9'),\n        TYPE10: new PointerTypeDef('type10'),\n        TYPE11: new PointerTypeDef('type11'),\n        TYPE12: new PointerTypeDef('type12'),\n        TYPE13: new PointerTypeDef('type13'),\n        TYPE14: new PointerTypeDef('type14'),\n        TYPE15: new PointerTypeDef('type15'),\n        TYPE16: new PointerTypeDef('type16')\n\n\n##      foregroundType\n        TYPE1: new ForegroundTypeDef('type1'),\n        TYPE2: new ForegroundTypeDef('type2'),\n        TYPE3: new ForegroundTypeDef('type3'),\n        TYPE4: new ForegroundTypeDef('type4'),\n        TYPE5: new ForegroundTypeDef('type5')\n\n\n##      labelNumberFormat \n        STANDARD: new LabelNumberFormatDef('standard'),\n        FRACTIONAL: new LabelNumberFormatDef('fractional'),\n        SCIENTIFIC: new LabelNumberFormatDef('scientific')\n\n\n##      tickLabelOrientation\n        NORMAL: new TickLabelOrientationDef('normal'),\n        HORIZONTAL: new TickLabelOrientationDef('horizontal'),\n        TANGENT: new TickLabelOrientationDef('tangent')\n\n\n##      trendState \n        UP: new TrendStateDef('up'),\n        STEADY: new TrendStateDef('steady'),\n        DOWN: new TrendStateDef('down'),\n        OFF: new TrendStateDef('off')\n\n",
                                       "x": 1710,
                                       "y": 560,
                                       "wires": []
                                   }
                                ]
                                

                                Als Dokumentation - wie die verschiedenen Typen aussehen - hier mal ein Mapping mit der Demoseite im nächsten Posting .....

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                schrieb am zuletzt editiert von
                                #49

                                @mickym

                                Wäre Cool wenn es so was auch für Vis geben würde.:grinning:

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                mickymM 1 Antwort Letzte Antwort
                                0
                                • sigi234S sigi234

                                  @mickym

                                  Wäre Cool wenn es so was auch für Vis geben würde.:grinning:

                                  mickymM Offline
                                  mickymM Offline
                                  mickym
                                  Most Active
                                  schrieb am zuletzt editiert von mickym
                                  #50

                                  @sigi234 Ich bin überzeugt, dass Leute wie @OliverIO ein neues Widget aus dem Hut zaubern können.

                                  Vielleicht geht es sogar mit so einem HTML Widget.

                                  Wenn Du Dir mal den Code meiner Template Nodes anschaust, dann ist mit den Javascript Dateien schon eigentlich alles da. Ich weiss nur nicht, ob man über das HTML Widget externe JS Dateien einbinden kann:

                                  <script src="/myjs/tween.js"></script>
                                  <script src="/myjs/steelseries.js"></script>
                                  <script>
                                  var windDirection;
                                  var mwSingleLCDisplay;
                                  
                                      
                                   
                                      windDirection = new steelseries.WindDirection('windDirection', {
                                             
                                              size: 250,
                                              backgroundColor: (steelseries.BackgroundColor.BROWN),
                                              frameDesign: (steelseries.FrameDesign.BRASS),
                                              foregroundVisible: false,
                                              roseVisible: false,
                                              degreeScale: true,
                                              degreeScaleHalf: false,
                                              pointSymbolsVisible: true,
                                              lcdTitleStrings: ['Aktuell','Durchschnitt']
                                              
                                          });
                                  //cog.steelseries.BackgroundColor.(steelseries.BackgroundColor.WHITE); 
                                      // windDirection.setFrameDesign(steelseries.FrameDesign.TILTED_BLACK);
                                                       
                                      //windDirection.setFrameDesign(steelseries.FrameDesign.BROWN);
                                     //cog.setPointerType(steelseries.PointerType.TYPE9);
                                            
                                  
                                  </script>
                                   
                                  <canvas id="windDirection" width="100%" height="100%"></canvas>
                                  
                                  

                                  Ich habe mal alle NR spezifischen Teile rausgenimmen, dann müsste man das parametrisieren über Bindungen zu Datenpunkten erstellen können. Also ich glaub das ist nicht so schwer - aber diese Teile wurden ja nicht für NodeRed entworfen, sondern sind ja allgemein als HTML Code verfügbar.

                                  Nachdem man das statische gesetzt setze ich in NodeRed den Zeiger über eine Nachricht:

                                  windDirection.setValueAnimatedLatest(msg.payload.value);
                                  windDirection.setValueAnimatedAverage(msg.payload.avg);

                                  Sprich wenn man das was hier mit den NAchrichten passiert über Bindings in Datenpunkten geht, dann müsste das auch möglich sein. Aber da fehlen mir die HTML Kenntnisse.

                                  Wie Du ja an dieser Demo-Seite siehst - sind die Steelseries ja als allgemeiner HTML Code erstellt und nur ein findiger Typ hat das herausgefunden, wie man das auch für das NodeRed Dashboard verfügbar machen kann.

                                  Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                                  sigi234S 1 Antwort Letzte Antwort
                                  0
                                  • mickymM mickym

                                    @sigi234 Ich bin überzeugt, dass Leute wie @OliverIO ein neues Widget aus dem Hut zaubern können.

                                    Vielleicht geht es sogar mit so einem HTML Widget.

                                    Wenn Du Dir mal den Code meiner Template Nodes anschaust, dann ist mit den Javascript Dateien schon eigentlich alles da. Ich weiss nur nicht, ob man über das HTML Widget externe JS Dateien einbinden kann:

                                    <script src="/myjs/tween.js"></script>
                                    <script src="/myjs/steelseries.js"></script>
                                    <script>
                                    var windDirection;
                                    var mwSingleLCDisplay;
                                    
                                        
                                     
                                        windDirection = new steelseries.WindDirection('windDirection', {
                                               
                                                size: 250,
                                                backgroundColor: (steelseries.BackgroundColor.BROWN),
                                                frameDesign: (steelseries.FrameDesign.BRASS),
                                                foregroundVisible: false,
                                                roseVisible: false,
                                                degreeScale: true,
                                                degreeScaleHalf: false,
                                                pointSymbolsVisible: true,
                                                lcdTitleStrings: ['Aktuell','Durchschnitt']
                                                
                                            });
                                    //cog.steelseries.BackgroundColor.(steelseries.BackgroundColor.WHITE); 
                                        // windDirection.setFrameDesign(steelseries.FrameDesign.TILTED_BLACK);
                                                         
                                        //windDirection.setFrameDesign(steelseries.FrameDesign.BROWN);
                                       //cog.setPointerType(steelseries.PointerType.TYPE9);
                                              
                                    
                                    </script>
                                     
                                    <canvas id="windDirection" width="100%" height="100%"></canvas>
                                    
                                    

                                    Ich habe mal alle NR spezifischen Teile rausgenimmen, dann müsste man das parametrisieren über Bindungen zu Datenpunkten erstellen können. Also ich glaub das ist nicht so schwer - aber diese Teile wurden ja nicht für NodeRed entworfen, sondern sind ja allgemein als HTML Code verfügbar.

                                    Nachdem man das statische gesetzt setze ich in NodeRed den Zeiger über eine Nachricht:

                                    windDirection.setValueAnimatedLatest(msg.payload.value);
                                    windDirection.setValueAnimatedAverage(msg.payload.avg);

                                    Sprich wenn man das was hier mit den NAchrichten passiert über Bindings in Datenpunkten geht, dann müsste das auch möglich sein. Aber da fehlen mir die HTML Kenntnisse.

                                    Wie Du ja an dieser Demo-Seite siehst - sind die Steelseries ja als allgemeiner HTML Code erstellt und nur ein findiger Typ hat das herausgefunden, wie man das auch für das NodeRed Dashboard verfügbar machen kann.

                                    sigi234S Online
                                    sigi234S Online
                                    sigi234
                                    Forum Testing Most Active
                                    schrieb am zuletzt editiert von
                                    #51

                                    @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                                    @sigi234 Ich bin überzeugt, dass Leute wie @OliverIO ein neues Widget aus dem Hut zaubern können.

                                    Ja, das wäre Super, die ioBroker.vis-canvas-gauges sind ja schon ein bisschen angestaubt.

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                    Immer Daten sichern!

                                    OliverIOO 1 Antwort Letzte Antwort
                                    0
                                    • sigi234S sigi234

                                      @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                                      @sigi234 Ich bin überzeugt, dass Leute wie @OliverIO ein neues Widget aus dem Hut zaubern können.

                                      Ja, das wäre Super, die ioBroker.vis-canvas-gauges sind ja schon ein bisschen angestaubt.

                                      OliverIOO Offline
                                      OliverIOO Offline
                                      OliverIO
                                      schrieb am zuletzt editiert von OliverIO
                                      #52

                                      @sigi234

                                      wie sieht es mit diesem adapter aus?
                                      die dahinterliegende bibliothek kann viele typen, die am anfang geschildert wurden.

                                      https://github.com/ioBroker/ioBroker.vis-canvas-gauges

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

                                      sigi234S 1 Antwort Letzte Antwort
                                      0
                                      • OliverIOO OliverIO

                                        @sigi234

                                        wie sieht es mit diesem adapter aus?
                                        die dahinterliegende bibliothek kann viele typen, die am anfang geschildert wurden.

                                        https://github.com/ioBroker/ioBroker.vis-canvas-gauges

                                        sigi234S Online
                                        sigi234S Online
                                        sigi234
                                        Forum Testing Most Active
                                        schrieb am zuletzt editiert von sigi234
                                        #53

                                        @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                                        wie sieht es mit diesem adapter aus?
                                        die dahinterliegende bibliothek kann viele typen, die am anfang geschildert wurden.

                                        Ja, aber nicht was die Demo Seite alles kann.
                                        Mir fehlt auch Ampel, Licht.......Stop Watch

                                        Und die LED Option finde ich Super , auch die Chrome Effekte

                                        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                        Immer Daten sichern!

                                        OliverIOO 1 Antwort Letzte Antwort
                                        0
                                        • sigi234S sigi234

                                          @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                                          wie sieht es mit diesem adapter aus?
                                          die dahinterliegende bibliothek kann viele typen, die am anfang geschildert wurden.

                                          Ja, aber nicht was die Demo Seite alles kann.
                                          Mir fehlt auch Ampel, Licht.......Stop Watch

                                          Und die LED Option finde ich Super , auch die Chrome Effekte

                                          OliverIOO Offline
                                          OliverIOO Offline
                                          OliverIO
                                          schrieb am zuletzt editiert von
                                          #54

                                          @sigi234

                                          die bibliothek von steelseries ist halt auch schon seit 6 Jahren nicht mehr gepflegt worden.
                                          wenn dann sollte man eine nehmen, die aktiv gepflegt wird.

                                          dann ist steelseries rein canvas-basiert. es kann nur das dargestellt werden, was die biliothek vorgibt. (bei canvas wird auf eine leinwand gemalt. man kann zwar noch drüber malen, ber den malprozess nicht wirklich beeinflussen) mit css kann man da nicht mehr reinfummeln.

                                          besser ist ein html/svg-basierter aufbau. da kann jeder immer noch reinfummeln und erweitern. (bei html/svg bestehen alle angezeigten elemente aus separaten eigenständigen elemente, welche mit css oder js noch angesteuert werden können)

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

                                          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

                                          892

                                          Online

                                          32.5k

                                          Benutzer

                                          81.6k

                                          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