Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. Node-Red
    5. Wetter API's mit NodeRed abrufen

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Wetter API's mit NodeRed abrufen

    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      Garf @mickym last edited by Garf

      @mickym
      Dass mit den Widges funktioniert ähnlich wie mit der Bahnhofsuhr, Bei Interesse teile ich gerne mein Wissen mit dir. Hier mal eine Übersicht der Möglichkeiten und eine fertige Wetterseite.

      https://nicolas-van.github.io/steelseries/
      https://www.epfenbachwetter.de/WDlive/gauges-ss-basic.htm

      Das mit der Bahnhofsuhr schaue ich mir bei Gelegenheit sicher näher an. Irgendwie möchte ich dass bei mir mit einbauen. Stehe zur Zeit total auf Wanduhren in jeglicher Form und Art. Warum nicht auch als Dashboardstartseite.

      1 Reply Last reply Reply Quote 0
      • mickym
        mickym Most Active last edited by

        @garf sagte in Wetter API's mit NodeRed abrufen:

        @mickym
        Dass mit den Widges funktioniert ähnlich wie mit der Bahnhofsuhr, Bei Interesse teile ich gerne mein Wissen mit dir. Hier mal eine Übersicht der Möglichkeiten und eine fertige Wetterseite.

        https://nicolas-van.github.io/steelseries/
        https://www.epfenbachwetter.de/WDlive/gauges-ss-basic.htm

        Das mit der Bahnhofsuhr schaue ich mir bei Gelegenheit sicher näher an. Irgendwie möchte ich dass bei mir mit einbauen. Stehe zur Zeit total auf Wanduhren in jeglicher Form und Art. Warum nicht auch als Dashboardstartseite.

        Na da brauche ich glaube Deine Hilfe - so fortgeschritten bin ich dann wieder nicht.

        1. Die installation npm install steelseries im http- static diectory durchführen?
        2. Eigenes Javascript Datei anlegen - und dann steelseries importieren
          ...

        dann fehlt mir aber komplett die Doku, was in dem .js File stehen muss und welche Paramter man dann im HTML nutzen kann oder muss ich den ganzen Souce Code durchgehen - ich befürchte. 😉

        G 1 Reply Last reply Reply Quote 0
        • G
          Garf @mickym last edited by

          @mickym sagte in Wetter API's mit NodeRed abrufen:

          dann fehlt mir aber komplett die Doku, was in dem .js File stehen muss und welche Paramter man dann im HTML nutzen kann oder muss ich den ganzen Souce Code durchgehen - ich befürchte. 😉

          Ja, genau hier fängt die Problematik an. Es gibt keine Doku dafür. Deshalb habe ich mal angefangen mein Wissen aufzuschreiben. Über npm installiert habe ich nichts. Ich suche mal alles zusammen und stelle es dir zur Verfügung. Hier schon einmal etwas zum Einlesen.

          https://harmoniccode.blogspot.com/2011/09/steelseries-396.html
          https://harmoniccode.blogspot.com/2011/04/steelseries-javascript-edition.html
          https://tech.scargill.net/steelseries-and-node-red/
          https://tech.scargill.net/node-red-ui/

          mickym 1 Reply Last reply Reply Quote 0
          • mickym
            mickym Most Active @Garf last edited by mickym

            @garf Ok - vielen Dank. Nachdem ich gestern eigentlich ziemlich viel schon recherchiert habe, habe ich den einen Flow mit den alten Versionen ja auch hinbekommen, wie dem einen Artikel, den Du auch schon gepostet hast:

            https://tech.scargill.net/steelseries-and-node-red/

            2e9f14dd-cfad-4b56-807f-5414d9d2b8e7-image.png

            Das Problem habe ich mir den neuen Versionen, die eben nicht auf einer JAVASCRIPT Datei basieren, sondern sich mit imports immer Komponenten hinzuladen.
            Der Browser sagt dann immer dass man import nur in modulen verwenden kann etc.

            Mit dieser Anleitung komme ich einfach nicht hin:

            be466db8-3b4c-41bd-869f-0d5d02550453-image.png

            Und nur mal den Kompass darzustellen gelingt mir nicht - die ganzen *.js Dateien sind in einem Verzeichnis verstreut - werde nochmal versuchen - einfach dieses Verzeichnis nochmal kopieren - aber bin langsam mit meiner Weisheit am Ende.

            DEn Compass aus der Demo bekomme ich einfach nach der Anleitung nicht hin.

            G 1 Reply Last reply Reply Quote 0
            • G
              Garf @mickym last edited by Garf

              @mickym
              Sollte aber funktionieren. Die richtigen Javascript Dateien zu finden ist die Kunst.
              Einen grafisch dargestellten statischen Kompass habe ich auf meinem Testlaptop gefunden.
              testy.JPG
              Dashboard.JPG
              Die von dir beschriebene Methode mit Import kenne ich noch nicht. Ich habe nach der passenden Javascript Datei gesucht und diese im Verzeichnis abgelegt. Und da gibt es durchaus unterschiedliche Dateien im Netz.

              Hier mal der dazugehörige html Code

              <script src="/myjs/tween-min.js"></script>
              <script src="/myjs/steelseries-min.js"></script>
              <script>
              var compass;
                  (function(scope){ 
                      scope.$watch('msg', function(msg) {
                         if (typeof(msg.value) != "undefined")compass.setValueAnimated(msg.value);
                        
                      });
                  })(scope);
              
                  
              
                  compass = new steelseries.Compass('compass', {
                          gaugeType: steelseries.GaugeType.TYPE4,
                          
                          size: 190,
                          
                          rotateFace:  true,
                          //
                          //titleString: "Charge",
                          //unitString: "AMPS",
                         // threshold: 11.9,
                         // minValue: 0,
                         // maxValue:  10,
                         // thresholdRising: false,
                          //lcdVisible: true,
                         
                      });
              //cog.steelseries.BackgroundColor.(steelseries.BackgroundColor.WHITE); 
                 compass.setFrameDesign(steelseries.FrameDesign.BRASS);
                 compass.setValueAnimated(0);                   
                 
                 //cog.setPointerType(steelseries.PointerType.TYPE9);
                  
              
              
              </script>
              
              <canvas id="compass" width="190" height="190"></canvas>
              

              Für den Weatherman gibt es auch eine Anleitung um die Steelserie einzubinden.
              https://github.com/Sineos/node-red-contrib-weatherman/blob/master/README_DE.md

              Den Flow habe ich testweise auch mal exportiert, Da sieht die grafische Dartsellung jedoch nicht wirklich vollständig aus.

              Weatherman.JPG

              Ja, die Widgets sind sehr schön, machen aber viel Arbeit in der Umsetzung und an Informationen und Hilfe findet man nicht wirklich viel.

              mickym 1 Reply Last reply Reply Quote 0
              • mickym
                mickym Most Active @Garf last edited by mickym

                @garf OK - denke das hilft mir schon mal. Ich sehe Du verwendest auch die alten Dateien.

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

                Wenn man damit auch alles machen kann, dann werde ich das mal weiterverfolgen. Reicht ja vollkommen.

                Dieses Weatherman Projekt ist auch hilfreich.

                Ganz lieben Dank. Wenn ich noch Fragen habe, dann melde ich mich.

                Dein Template hat jedenfalls schon mal auf Anhieb funktioniert, da ich die beiden Dateien ja schon eingebunden hatte. 😉

                f92712a1-b487-47b1-b649-41a882ac549e-image.png

                Zur ergänzenden Dokumentation zu der im Template gebrauchten Funktion scope:
                Diese dient dazu das msg-Objekt auch außerhalb der html Elemente in einer Template Node als zum Beispiel unter <scripts> verfügbar zu machen - hier die offizielle Node-Red Seite dazu:

                https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a

                (function(scope){ 
                        scope.$watch('msg', function(msg) {
                           if (typeof(msg.value) != "undefined")compass.setValueAnimated(msg.value);
                          
                        });
                    })(scope);
                

                Der Artikel erklärt auch noch den Unterschied zwischen der Nutzung der geschweiften Klammer in der Template Node und diesen "voreingestellten Direktiven".

                <div ng-bind-html="msg.payload"></div>
                

                damit können auch in der Payload Formatierungen mitgegeben werden.

                G 1 Reply Last reply Reply Quote 1
                • G
                  Garf @mickym last edited by

                  @mickym
                  Immer gerne, ich wollte mal alles zuammenschreiben. Beim Wollen ist es letztendlich geblieben. Die Zeit ist immer ein Problem. Zeit dafür habe ich meist nur in den Wintermonaten. Seit dem ich mit OneNote arbeite, lege ich mir alles Wissenswerte dort ab. Für das Thema mit der Steelseries habe ich dort leider noch nicht viel abgelegt, Dafür aber schon Deinen Beitrag mit der Wetter API und der Bahnhofsuhr. 👍

                  mickym 1 Reply Last reply Reply Quote 0
                  • mickym
                    mickym Most Active @Garf last edited by mickym

                    @garf So ich denke - ich hab zumindest in den Grundzügen den Code zu verstanden - das einzige Problem ist, wie bei meinen ganzen HTML Versuchen, dass ich mit den Größen immer noch bisschen mit Trial & Error arbeite.

                    Aber ich habe nun schon mal folgendes gemacht:

                    1. Die Windrose wurde "eingedeutscht" - also aus E wurde wieder ein O. 😉
                    2. Dann hab ich mal die Oberfläche des Rahmens geändert
                    3. Dann mal bei einem Kompass ein LCD Display unten drunter gehängt und dann mit zufälligen Gradzahlen mal das Ganze hinterlegt.

                    Um nicht jedesmal in den Quellcode bei den Konstanten schauen zu müssen - habe ich mal eine Kommentar Node erstellt. 😉

                    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": []
                       }
                    ]
                    

                    So schaut nun mein kleiner Test aus:

                    99e8c0e8-de1a-44e0-873d-e3fbe192d0b4-image.png

                    und eine kleine Demo mit zufälligen Werten. 😉

                    Steelseries Test.mp4

                    G 1 Reply Last reply Reply Quote 0
                    • G
                      Garf @mickym last edited by Garf

                      @mickym
                      Erstaunlich, was Du bereits auf die Beine gestellt hast. Du scheinst gute Grundkenntnisse zu haben. Da kann ich nicht mitreden, was aber auch nicht schlimm ist. Ich freue mich, wenn ich dazulernen darf. Keine Ahnung, ob du schon die Wettergauges gefunden hast. Hier mal der Link und ein Bild vom dort gezeigten Kompass mit Digitalanzeige. https://cumuluswiki.org/a/SteelSeries_Gauges
                      Steelseries-Kompass.jpg

                      mickym 1 Reply Last reply Reply Quote 0
                      • mickym
                        mickym Most Active @Garf last edited by mickym

                        @garf sagte in Wetter API's mit NodeRed abrufen:

                        @mickym
                        Erstaunlich, was Du bereits auf die Beine gestellt hast. Du scheinst gute Grundkenntnisse zu haben.

                        Na ich weiß nicht, da ist noch viel Trial & Error dabei, aber ich bin jetzt zumindest mit den Dateien auf einem Stand, wo ich das Prinzip einigermaßen begriffen habe. Wie ich die Teile dann einsetze - weiß ich noch nicht - gibt viele Baustellen.

                        Da kann ich nicht mitreden, was aber auch nicht schlimm ist. Ich freue mich, wenn ich dazulernen darf. Keine Ahnung, ob du schon die Wettergauges gefunden hast. Hier mal der Link und ein Bild vom dort gezeigten Kompass mit Digitalanzeige. https://cumuluswiki.org/a/SteelSeries_Gauges
                        Steelseries-Kompass.jpg

                        Diese Seite, die Du dort gepostet hast, ist eigentlich nichts weiter als eine Ansammlung von verschiedenen Instrumenten, aber alle auf den SteelSeries aufbauend. Dazu agiert dieser Code sozusagen als Webserver. Insofern bringt das eigentlich eher wenig für die Visualisierung. 😞 - aber trotzdem Danke - man kann sich ja Anregungen holen, aber implementieren muss man es ja für das NodeRed Dashboard komplett anders.

                        Wenn Du Dir die Demoseite anschaust, die Du anfangs gepostet hast, da ist dieser Windmesser schon aufgeführt. 😉

                        d3a0564b-374f-4322-8d36-06f58c0004bf-image.png

                        Damit man die Haupthimmelsrichtungen so hinbekommt, da musste ich bisschen in der Javascript- Datei rummurksen, da die Optionen das nicht hergaben - aber ich habs hinbekommen. 😉

                        0ac5b88d-e75a-4837-b513-d60323eff767-image.png

                        Außerdem hab ich mal getestet, ob man interaktiv, also mit Node-Red Nachrichten das Aussehen dynamisch verändern kann. Das geht - aber ist tricky und hat mich schon etwas Zeit gekostet. Du musst zum BEispiel unbedingt den Hintergrund zuerst ändern usw.. Bis man das herausbekommen hat, zweifelt man x-mal, ob an der Syntax was verkehrt ist.

                        Interessant ist auch das Lampenbeispiel / also Glühbirne - damit kann man näherungsweise den Status wiedergeben. 😉

                        448764fd-de75-4c23-a271-b52c961629b4-image.png

                        Hier mal wieder ein kleines Video zur Demonstration der Möglichkeiten, wobei ich die Zufallszahlen nun auf alle Kompassgeräte verteile, sodass man immer auch die Gradzahl identisch sieht.

                        Im Moment wird quasi alle 5 Sekunden eine neue Windrichtung per Zufallszahl simuliert und dann alle 30s ein Durchschnitt berechnet und dann mit dem blauen Zeiger angezeigt.

                        Das Ändern des Erscheinungsbildes habe ich mit Tag und Nachteinstellung bezeichnet. Ich hänge dann wieder ein kleines VIdeo hinterher. 😉

                        So ich hab das VIdeo auff 70% verkleinert - damit es noch hochladbar ist. 😉

                        Dauert nur 2 Minuten. 😉

                        Steelseries Test2.mp4

                        Ach ich hab gerade gesehen, man kann das Video ja doch im Vollbildmodus betrachten, dann ist die Verkleinerung gar nicht so schlimm. 😉

                        G 1 Reply Last reply Reply Quote 0
                        • G
                          Garf @mickym last edited by

                          @mickym sagte in Wetter API's mit NodeRed abrufen:

                          Damit kannst Du quasi in jeder Template Node eine andere Weltzeit anzeigen lassen.

                          So ich habe getestet. Das Wetter war mein Freund, bei Regen hat man für solche Spielereien einfach mehr Zeit. 😊

                          Hier das angepasste Ergebnis:

                          Uhr.JPG

                          Als nächstes werde ich mich an die Inhalte deiner weiteren Posts machen, um das Thema mit den dynamischen Anzeigeinstrumenten besser zu verstehen. Zumindest habe ich jetzt jemanden gefunden mit dem ich mich austauschen kann.

                          1 Reply Last reply Reply Quote 0
                          • G
                            Garf @mickym last edited by

                            @mickym sagte in Wetter API's mit NodeRed abrufen:

                            Das Ändern des Erscheinungsbildes habe ich mit Tag und Nachteinstellung bezeichnet. Ich hänge dann wieder ein kleines VIdeo hinterher

                            Meine Herren ist dass ein abgefahrener Scheiß und dies meine ich im postiven Sinne. Ich hoffe Du hattest mindestens so viel Spaß bei der Entwicklung wie ich beim Videoschauen. Ich habe mir das Video gleich dreimal angesehen. Da schaltet er das Instrumentenlicht ein und aus und verändert das Aussehen des Zeigerinstruments. Total abgefahren.
                            Mal sehen, ob ich ansatzweise verstehen lerne was und wie Du das machst. Hinweise dazu hast Du ja mehr als genug in den letzten Beiträgen gemacht. Man bin ich froh, dass Du dich des Thema angenommen hast.👍

                            mickym 1 Reply Last reply Reply Quote 0
                            • mickym
                              mickym Most Active @Garf last edited by mickym

                              @garf So - nun habe ich mal ein echten Thermostat zur Anzeige fertig, aber ich werde mal einen eigenen Thread für die Steelseries Widgets eröffnen, um das dort separat zu diskutieren.
                              Hier wollte ich ja eigentlich mehr die eingebundenen Wetter APIs diskutieren. 😉

                              Ein paar der Beispiele aus dem Thread werde ich dann mal als Eingangsposting übernehmen. 😉

                              G 1 Reply Last reply Reply Quote 1
                              • G
                                Garf @mickym last edited by

                                @mickym sagte in Wetter API's mit NodeRed abrufen:

                                aber ich werde mal einen eigenen Thread für die Steelseries Widgets zu diskutieren.

                                👍 👍 👍 👍

                                mickym 1 Reply Last reply Reply Quote 0
                                • mickym
                                  mickym Most Active @Garf last edited by

                                  @garf So hab mal angefangen - hier ist der neue Thread, bin aber mit der Beschreibung meiner bisherigen Erkenntnisse noch nicht fertig. 😉

                                  1 Reply Last reply Reply Quote 2
                                  • First post
                                    Last post

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  787
                                  Online

                                  31.6k
                                  Users

                                  79.6k
                                  Topics

                                  1.3m
                                  Posts

                                  node-red template
                                  2
                                  29
                                  6904
                                  Loading More Posts
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  Community
                                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                  The ioBroker Community 2014-2023
                                  logo