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
      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

                          915
                          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