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. Wetter API's mit NodeRed abrufen

NEWS

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

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

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

Wetter API's mit NodeRed abrufen

Geplant Angeheftet Gesperrt Verschoben Node-Red
node-redtemplate
29 Beiträge 2 Kommentatoren 8.8k Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • mickymM 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 Offline
    G Offline
    Garf
    schrieb am zuletzt editiert von
    #21

    @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. :+1:

    mickymM 1 Antwort Letzte Antwort
    0
    • G Garf

      @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. :+1:

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

      @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

      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.

      G 1 Antwort Letzte Antwort
      0
      • mickymM 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 Offline
        G Offline
        Garf
        schrieb am zuletzt editiert von Garf
        #23

        @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

        mickymM 1 Antwort Letzte Antwort
        0
        • G 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

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

          @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. ;)

          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.

          G 1 Antwort Letzte Antwort
          0
          • mickymM mickym

            @garf Wow - die Widgets schauen ja super clean und toll aus, wo hast Du die denn her?

            Den Link zur Bahnhofsuhr hatte ich ja schon mal veröffentlicht. Dort kannst auch die verschiedenen Optionen auswählen.

            Unten auf der Seite findest Du als Download so ein ZIP-File (Bahnhofsuhr). Du brauchst nur die Javascript-Datei und die Index.html - habe ich in eine Template Node verfrachtet:

            Das Einzige was Du nun machen musst - ich brauchte das auch für meine Icons, dass Du einen lokalen Pfad in NodeRed definierst, mit dem Du auf eigene, lokale Resourcen zugreifen kannst. Ich hab schon mal die Entwickler angefragt, dass sie das doch bitte als Parameter in die Adapterkonfiguration aufnehmen. Ansonsten musst halt bei jedem Update die settings.js manuell anpassen:

            In der settings.js gibst Du also den Pfad an, wo Du künftig Deine lokalen Ressourcen speicherst:

                // When httpAdminRoot is used to move the UI to a different root path, the
                // following property can be used to identify a directory of static content
                // that should be served at http://localhost:1880/.
                //httpStatic: '/home/nol/node-red-dashboard/',
                httpStatic: "/data/node-red",
            

            Aus der Index.html Datei der Bahnhofsuhr brauchst Du natürlich nur den Kernbereich:

            <title>Bahnhofsuhr</title>
                
                  <!--[if IE]>
                    <script type="text/javascript" src="excanvas.js"></script>
                  <![endif]-->
            
                  <script type="text/javascript" src="/station-clock.js"></script>
                  <script type="text/javascript">
            
                  var clock = new StationClock("clock");
                  clock.body = StationClock.RoundBody;
                  clock.dial = StationClock.GermanStrokeDial;
                  clock.hourHand = StationClock.PointedHourHand;
                  clock.minuteHand = StationClock.PointedMinuteHand;
                  clock.secondHand = StationClock.NewHoleShapedSecondHand;
                  clock.boss = StationClock.RedBoss;
                  clock.minuteHandBehavoir = StationClock.ElasticBouncingMinuteHand;
                  clock.secondHandBehavoir = StationClock.OverhastySecondHand;
            
                  animate();
            
                  function animate() {
                    clock.draw();
                    window.setTimeout("animate()", 50);
                  }
            
            </script>
            	
            <div style="text-align: center; padding-top: 0px">
                <canvas id="clock" width="230" height="230">
                    Fehlermeldung       
                </canvas>
            </div>
            

            Ich habe hier nur ein "/" bei der Pfadangabe zu dem Script gemacht (weiss nicht mal ob man das muss):

            src="/station-clock.js"
            

            Im unteren div-Teil kannst Du mit Weite und Höhe die Dimensionen der Uhr variieren. Hier in Pixeln - wobei vielleicht auch % gehen. Dabei gilt als 100 % immer der Bereich, so breit und hoch Deine Template Node ist.

            Das Root-Verzeichnis, in dem also meine station-clock.js liegt, ist also das http-static Verzeichnis.

            Und die Optionen, wie Du Uhr auszusehen hat, kannst ja zum einen auf der Webseite ausprobieren und zum anderen siehst du im Javascript File selbst, welche Optionen man definiert, das hat der Entwickler schön dokumentiert -
            hier nur exemplarisch, wie man das Aussehen der Uhr verändern kann:

            // clock body (Uhrgehäuse)
            StationClock.NoBody         = 0;
            StationClock.SmallWhiteBody = 1;
            StationClock.RoundBody      = 2;
            StationClock.RoundGreenBody = 3;
            StationClock.SquareBody     = 4;
            StationClock.ViennaBody     = 5;
            

            Was ich selbst gerade getestet habe, man kann sogar einen Offset inder Template Node mitgeben in Form von:

                clock.hourOffset = 2;
            

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

            G Offline
            G Offline
            Garf
            schrieb am zuletzt editiert von
            #25

            @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. :blush:

            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 Antwort Letzte Antwort
            0
            • mickymM 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 Offline
              G Offline
              Garf
              schrieb am zuletzt editiert von
              #26

              @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.:+1:

              mickymM 1 Antwort Letzte Antwort
              0
              • G Garf

                @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.:+1:

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

                @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. ;)

                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.

                G 1 Antwort Letzte Antwort
                1
                • mickymM 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 Offline
                  G Offline
                  Garf
                  schrieb am zuletzt editiert von
                  #28

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

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

                  :+1: :+1: :+1: :+1:

                  mickymM 1 Antwort Letzte Antwort
                  0
                  • G Garf

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

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

                    :+1: :+1: :+1: :+1:

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

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

                    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
                    2
                    Antworten
                    • In einem neuen Thema antworten
                    Anmelden zum Antworten
                    • Älteste zuerst
                    • Neuste zuerst
                    • Meiste Stimmen


                    Support us

                    ioBroker
                    Community Adapters
                    Donate

                    900

                    Online

                    32.4k

                    Benutzer

                    81.5k

                    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