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

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

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. Node-Red
  5. Steelseries Widgets im NodeRed Dashboard nutzen

NEWS

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

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

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

Steelseries Widgets im NodeRed Dashboard nutzen

Geplant Angeheftet Gesperrt Verschoben Node-Red
node-red
65 Beiträge 5 Kommentatoren 10.4k Aufrufe 6 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO OliverIO

    @sigi234

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

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

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

    @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

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

    OliverIOO 1 Antwort Letzte Antwort
    0
    • sigi234S sigi234

      @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

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

      @sigi234

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

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

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

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

      1 Antwort Letzte Antwort
      0
      • mickymM mickym

        Mit diesem theoretischem Background ist nun auch der Code der Template Nodes aus diesem Blog leicht zu verstehen.

        screen.png

        So solange ihr soweit meinen Ausführungen gefolgt seid, seid ihr auf meinem Wissensstand.

        Die Aufrufe der Steelseries Funktionen scheint auch von der Reihenfolge abzuhängen. Auch hier muss man bisschen probieren. Das dynamische Ändern des Hintergrunds als letzter Aufruf hat nicht funktioniert.

        Hier muss man probieren. Am Anfang dachte ich es sei die Syntax, war es aber nicht. ;)

        Ein Problem bei der ganzen Implementierung soll nicht verschwiegen werden. Die Template-Nodes bekommen nicht mit, wenn in einem anderen Browser Änderungen durchgeführt werden. Man kann zwar dann die Seite auf allen Browsern refreshen (komplettes Neuladen der Seite), aber optimal ist das nicht.

        So im nächsten Post nun zu meiner Arbeit des inzwischen gestrigen Tages. ;)

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

        @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

        Die Aufrufe der Steelseries Funktionen scheint auch von der Reihenfolge abzuhängen. Auch hier muss man bisschen probieren. Das dynamische Ändern des Hintergrunds als letzter Aufruf hat nicht funktioniert.

        Hier muss man probieren. Am Anfang dachte ich es sei die Syntax, war es aber nicht. ;)

        Wie Recht Du mit dieser Aussage hast. Bin heute genau in die Falle getreten. Ganz am Ende wollte ich noch die Hintergrundfarbe der LCD Anzeige umstellen. Dies wollte mir allerdings nicht gelingen. Dann die Befehlszeile weiter noch oben im Skript eingefügt. Siehe da, alles wie gewünscht.
        Danke für den hilfreichen Hinweis.

        Gruß Garf

        1 Antwort Letzte Antwort
        0
        • mickymM mickym

          So das sind mal die Typen, die man erstellen kann:
          7d410d69-b0c0-454e-b805-e3f362b1784b-image.png

          Ich versuche das mal einigermassen mit den Widgets auf der Demoseite zu mappen (hoffe ich habs richtig verstanden):

          1. Radial sind diese hier:

          55091989-7a1a-4a38-b00c-0bf87eec3407-image.png

          Bei der Definition bzw. Erstellung kann man den Typ angeben, der ist hier im Bild als Beschreibung angegeben.

          1. RadialBargraph sind diese hier:

          d0099b3e-03e1-438a-866c-f131e40fe78c-image.png

          1. RadialVertical sind diese hier:

          d790825e-6677-4008-bac4-98c8ed8ca610-image.png

          1. Linear sind diese hier:

          1910d9ac-39ef-43f2-93f8-abc8ed28e22b-image.png

          1. LinearBargraph sind diese hier:

          eb040a3b-99ba-41b1-aa2b-ef2e1b185958-image.png

          1. DisplaySingle sind diese hier:

          de4a5c11-566b-481a-93d0-5c6cae5953f1-image.png

          sowie ich das verstanden habe - ist damit Laufschrift möglich.

          1. DisplayMulti sind diese hier:

          7cf761cd-82ee-4d8a-ab37-eeb10034490f-image.png

          1. Level - das hier:

          e2f656ea-6646-46aa-8c06-59757db47344-image.png

          1. Compass diese hier:

          5388eb58-7fc1-44e4-a75b-22296c6d5535-image.png

          1. WindDirection diese hier:

          500f36d0-ff02-4185-a15e-6f7eecbd5146-image.png

          1. Horizon das hier:

          47a833ee-76b7-4124-a7c6-ab894c4eb740-image.png

          1. Led das hier:

          02a7ae2f-c3c1-47f9-93eb-4017e7e30df9-image.png

          1. Clock das hier:

          041365de-5656-4f26-a0db-a57dc38dcb44-image.png

          1. Battery das hier:

          7c63f089-5d7a-4070-8559-f5b1c28738ff-image.png

          1. StopWatch das hier:

          ae1c4e92-bc95-4d14-8b31-f08bb66f18f6-image.png

          1. Altimeter das hier:

          23a3ba96-c598-488e-bb3c-030754734fa2-image.png

          1. TrafficLight das hier:

          7237c4e4-4d37-4d26-affc-b6dfa99e4ecc-image.png

          1. LightBulb das hier:

          c5eb9509-2aa9-491f-b83a-72ee24c4023d-image.png

          1. Odometer das hier:

          c014dea4-85d1-4358-91e9-72617a188750-image.png

          Die Effekte und wie die heißen sieht man dann auf der Demoseite!!!

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

          @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

          1. Battery das hier:

          7c63f089-5d7a-4070-8559-f5b1c28738ff-image.png

          @mickym
          Kannst Du mir bitte beim html-code für das template-Node weiterhelfen. Ich kriege es irgendwie nicht hin.

          Danke dir.

          Gruß Garf

          mickymM 1 Antwort Letzte Antwort
          0
          • G Garf

            @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

            1. Battery das hier:

            7c63f089-5d7a-4070-8559-f5b1c28738ff-image.png

            @mickym
            Kannst Du mir bitte beim html-code für das template-Node weiterhelfen. Ich kriege es irgendwie nicht hin.

            Danke dir.

            Gruß Garf

            mickymM Online
            mickymM Online
            mickym
            Most Active
            schrieb am zuletzt editiert von
            #57

            @garf Hallo Garf ich musste mich da auch erst wieder reindenken, das ist schon so lange her, aber es tut. :)
            Der Farbverlauf ist aber vorgegeben. ;)

            100%

            cfd4ccab-c8d2-4c7f-aed8-136b02f20ef0-image.png

            50%

            989b3e26-709c-4dcc-a56b-15377a67baed-image.png

            25%

            f7e342bf-d188-4ab7-adc5-eea84562fde2-image.png

            10 %

            43dbf596-13f0-4a6a-8e76-f6862fdbe601-image.png

            Hier der Code:

            [
               {
                   "id": "f9d940a7340aef3a",
                   "type": "ui_template",
                   "z": "f19174b9.aa88f8",
                   "group": "29d43008ce9d6087",
                   "name": "Battery",
                   "order": 1,
                   "width": "2",
                   "height": "1",
                   "format": "<script src=\"/myjs/tween.js\"></script>\n<script src=\"/myjs/steelseries.js\"></script>\n<script>\nvar battery;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.payload) != \"undefined\"){\n               battery.setValue(msg.payload);\n               \n           }\n          \n        });\n    })(scope);\n \n    \n \n    battery = new steelseries.Battery('battery', {\n            \n            size: 100,\n           \n\n        });\n//INitialisierung\n \n   //cog.setPointerType(steelseries.PointerType.TYPE9);\n    battery.setValue(100);\n    \n \n \n</script>\n \n<canvas id=\"battery\"></canvas>",
                   "storeOutMessages": false,
                   "fwdInMessages": true,
                   "resendOnRefresh": false,
                   "templateScope": "local",
                   "className": "",
                   "x": 2100,
                   "y": 100,
                   "wires": [
                       []
                   ]
               },
               {
                   "id": "5050877ffbc08aa5",
                   "type": "inject",
                   "z": "f19174b9.aa88f8",
                   "name": "",
                   "props": [
                       {
                           "p": "payload"
                       }
                   ],
                   "repeat": "",
                   "crontab": "",
                   "once": false,
                   "onceDelay": 0.1,
                   "topic": "",
                   "payload": "20",
                   "payloadType": "num",
                   "x": 1870,
                   "y": 100,
                   "wires": [
                       [
                           "f9d940a7340aef3a"
                       ]
                   ]
               },
               {
                   "id": "29d43008ce9d6087",
                   "type": "ui_group",
                   "name": "steelseries Batterie",
                   "tab": "dc25fe35.866f",
                   "order": 1,
                   "disp": true,
                   "width": "6",
                   "collapse": false,
                   "className": ""
               },
               {
                   "id": "dc25fe35.866f",
                   "type": "ui_tab",
                   "name": "Test - Steelseries",
                   "icon": "dashboard",
                   "order": 24,
                   "disabled": false,
                   "hidden": false
               }
            ]
            

            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 Hallo Garf ich musste mich da auch erst wieder reindenken, das ist schon so lange her, aber es tut. :)
              Der Farbverlauf ist aber vorgegeben. ;)

              100%

              cfd4ccab-c8d2-4c7f-aed8-136b02f20ef0-image.png

              50%

              989b3e26-709c-4dcc-a56b-15377a67baed-image.png

              25%

              f7e342bf-d188-4ab7-adc5-eea84562fde2-image.png

              10 %

              43dbf596-13f0-4a6a-8e76-f6862fdbe601-image.png

              Hier der Code:

              [
                 {
                     "id": "f9d940a7340aef3a",
                     "type": "ui_template",
                     "z": "f19174b9.aa88f8",
                     "group": "29d43008ce9d6087",
                     "name": "Battery",
                     "order": 1,
                     "width": "2",
                     "height": "1",
                     "format": "<script src=\"/myjs/tween.js\"></script>\n<script src=\"/myjs/steelseries.js\"></script>\n<script>\nvar battery;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.payload) != \"undefined\"){\n               battery.setValue(msg.payload);\n               \n           }\n          \n        });\n    })(scope);\n \n    \n \n    battery = new steelseries.Battery('battery', {\n            \n            size: 100,\n           \n\n        });\n//INitialisierung\n \n   //cog.setPointerType(steelseries.PointerType.TYPE9);\n    battery.setValue(100);\n    \n \n \n</script>\n \n<canvas id=\"battery\"></canvas>",
                     "storeOutMessages": false,
                     "fwdInMessages": true,
                     "resendOnRefresh": false,
                     "templateScope": "local",
                     "className": "",
                     "x": 2100,
                     "y": 100,
                     "wires": [
                         []
                     ]
                 },
                 {
                     "id": "5050877ffbc08aa5",
                     "type": "inject",
                     "z": "f19174b9.aa88f8",
                     "name": "",
                     "props": [
                         {
                             "p": "payload"
                         }
                     ],
                     "repeat": "",
                     "crontab": "",
                     "once": false,
                     "onceDelay": 0.1,
                     "topic": "",
                     "payload": "20",
                     "payloadType": "num",
                     "x": 1870,
                     "y": 100,
                     "wires": [
                         [
                             "f9d940a7340aef3a"
                         ]
                     ]
                 },
                 {
                     "id": "29d43008ce9d6087",
                     "type": "ui_group",
                     "name": "steelseries Batterie",
                     "tab": "dc25fe35.866f",
                     "order": 1,
                     "disp": true,
                     "width": "6",
                     "collapse": false,
                     "className": ""
                 },
                 {
                     "id": "dc25fe35.866f",
                     "type": "ui_tab",
                     "name": "Test - Steelseries",
                     "icon": "dashboard",
                     "order": 24,
                     "disabled": false,
                     "hidden": false
                 }
              ]
              

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

              @mickym

              Danke dir.
              Ich hatte nur einen winzigen Fehler.

              a6fa33c5-4228-4e5c-8f99-ae323ce150c8-grafik.png

              battery wird groß geschrieben.

              Jetzt funktioniert es. Wobei die 100% Anzeige mit den weißen Feldern in der Grafik finde ich nicht so schön. Aber daran können wir ja nichts ändern.

              mickymM 1 Antwort Letzte Antwort
              0
              • G Garf

                @mickym

                Danke dir.
                Ich hatte nur einen winzigen Fehler.

                a6fa33c5-4228-4e5c-8f99-ae323ce150c8-grafik.png

                battery wird groß geschrieben.

                Jetzt funktioniert es. Wobei die 100% Anzeige mit den weißen Feldern in der Grafik finde ich nicht so schön. Aber daran können wir ja nichts ändern.

                mickymM Online
                mickymM Online
                mickym
                Most Active
                schrieb am zuletzt editiert von mickym
                #59

                @garf sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                Wobei die 100% Anzeige mit den weißen Feldern in der Grafik finde ich nicht so schön. Aber daran können wir ja nichts ändern

                Na das helle in der Mitte finde ich jetzt gar nicht so schlecht - was ich eher schlecht finde, ist, dass man bei diesem Teil den Rahmen nicht mit den anderen Farben bzw. Effekten setzen kann - damit fällt das Teil etwas aus dem Rahmen.
                Gut bei der Ampel kann man es ja auch nicht ändern.

                Ich hab mir damals mal alle Definitionen rausgesucht - intern meist mit Kleinschreibung von außen mit Großschreibung.

                Definitionen

                Components EXTERNAL : INTERNAL

                    Radial : radial,
                    RadialBargraph : radialBargraph,
                    RadialVertical : radialVertical,
                    Linear: linear,
                    LinearBargraph: linearBargraph,
                    DisplaySingle: displaySingle,
                    DisplayMulti: displayMulti,
                    Level : level,
                    Compass : compass,
                    WindDirection : windDirection,
                    Horizon : horizon,
                    Led : led,
                    Clock : clock,
                    Battery : battery,
                    StopWatch : stopwatch,
                    Altimeter : altimeter,
                    TrafficLight: trafficlight,
                    LightBulb: lightbulb,
                    Odometer: odometer,
                
                    // Images
                    drawFrame : drawRadialFrameImage,
                    drawBackground : drawRadialBackgroundImage,
                    drawForeground : drawRadialForegroundImage,
                
                    // Tools
                    rgbaColor :  RgbaColor,
                    ConicalGradient : ConicalGradient,
                    setAlpha : setAlpha,
                    getColorFromFraction : getColorFromFraction,
                    gradientWrapper : GradientWrapper,
                
                    // Constants
                    BackgroundColor : backgroundColor,
                    LcdColor : lcdColor,
                    ColorDef : color,
                    LedColor : ledColor,
                    GaugeType : gaugeType,
                    Orientation: orientation,
                    FrameDesign : frameDesign,
                    PointerType : pointerType,
                    ForegroundType : foregroundType,
                    KnobType : knobType,
                    KnobStyle: knobStyle,
                    LabelNumberFormat: labelNumberFormat,
                    TickLabelOrientation: tickLabelOrientation,
                    TrendState: trendState,
                
                    // Other
                    Section : section
                

                Formate

                backgroundColor

                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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'),
                    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')
                

                lcdColor

                    BEIGE: new LcdColorDef('#c8c8b1', 'rgb(241, 237, 207)', 'rgb(234, 230, 194)', 'rgb(225, 220, 183)', 'rgb(237, 232, 191)', '#000000'),
                    BLUE: new LcdColorDef('#ffffff', 'rgb(231, 246, 255)', 'rgb(170, 224, 255)', 'rgb(136, 212, 255)', 'rgb(192, 232, 255)', '#124564'),
                    ORANGE: new LcdColorDef('#ffffff', 'rgb(255, 245, 225)', 'rgb(255, 217, 147)', 'rgb(255, 201, 104)', 'rgb(255, 227, 173)', '#503700'),
                    RED: new LcdColorDef('#ffffff', 'rgb(255, 225, 225)', 'rgb(253, 152, 152)', 'rgb(252, 114, 115)', 'rgb(254, 178, 178)', '#4f0c0e'),
                    YELLOW: new LcdColorDef('#ffffff', 'rgb(245, 255, 186)', 'rgb(210, 255, 0)', 'rgb(158, 205, 0)', 'rgb(210, 255, 0)', '#405300'),
                    WHITE: new LcdColorDef('#ffffff', '#ffffff', 'rgb(241, 246, 242)', 'rgb(229, 239, 244)', '#ffffff', '#000000'),
                    GRAY: new LcdColorDef('#414141', 'rgb(117, 117, 117)', 'rgb(87, 87, 87)', '#414141', 'rgb(81, 81, 81)', '#ffffff'),
                    BLACK: new LcdColorDef('#414141', '#666666', '#333333', '#000000', '#333333', '#cccccc'),
                    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)'),
                    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)'),
                    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'),
                    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)'),
                    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'),
                    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)'),
                    STANDARD_GREEN: new LcdColorDef('#ffffff', 'rgb(219, 230, 220)', 'rgb(179, 194, 178)', 'rgb(153, 176, 151)', 'rgb(114, 138, 109)', '#080C06'),
                    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'),
                    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'),
                    DARKBLUE: new LcdColorDef('rgb(14, 24, 31)', 'rgb(46, 105, 144)', 'rgb(19, 64, 96)', 'rgb(6, 20, 29)', 'rgb(8, 9, 10)', '#3DB3FF'),
                    LILA: new LcdColorDef('rgb(175, 164, 255)', 'rgb(188, 168, 253)', 'rgb(176, 159, 255)', 'rgb(174, 147, 252)', 'rgb(168, 136, 233)', '#076148'),
                    BLACKRED: new LcdColorDef('rgb(8, 12, 11)', 'rgb(10, 11, 13)', 'rgb(11, 10, 15)', 'rgb(7, 13, 9)', 'rgb(9, 13, 14)', '#B50026'),
                    DARKGREEN: new LcdColorDef('rgb(25, 85, 0)', 'rgb(47, 154, 0)', 'rgb(30, 101, 0)', 'rgb(30, 101, 0)', 'rgb(25, 85, 0)', '#233123'),
                    AMBER: new LcdColorDef('rgb(182, 71, 0)', 'rgb(236, 155, 25)', 'rgb(212, 93, 5)', 'rgb(212, 93, 5)', 'rgb(182, 71, 0)', '#593A0A'),
                    LIGHTBLUE: new LcdColorDef('rgb(125, 146, 184)', 'rgb(197, 212, 231)', 'rgb(138, 155, 194)', 'rgb(138, 155, 194)', 'rgb(125, 146, 184)', '#090051'),
                    SECTIONS: new LcdColorDef('#b2b2b2', '#ffffff', '#c4c4c4', '#c4c4c4', '#b2b2b2', '#000000')
                

                color

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

                ledColor

                    RED_LED: new LedColorDef('#FF9A89', '#FF9A89', '#FF3300', '#FF8D70', '#7E1C00', '#7E1C00', '#641B00'),
                    GREEN_LED: new LedColorDef('#9AFF89', '#9AFF89', '#59FF2A', '#A5FF00', '#1C7E00', '#1C7E00', '#1B6400'),
                    BLUE_LED: new LedColorDef('#899AFF', '#899AFF', '#0033FF', '#708DFF', '#001C7E', '#001C7E', '#001B64'),
                    ORANGE_LED: new LedColorDef('#FEA23F', '#FEA23F', '#FD6C00', '#FD6C00', '#592800', '#592800', '#421F00'),
                    YELLOW_LED: new LedColorDef('#FFFF62', '#FFFF62', '#FFFF00', '#FFFF00', '#6B6D00', '#6B6D00', '#515300'),
                    CYAN_LED: new LedColorDef('#00FFFF', '#00FFFF', '#1BC3C3', '#00FFFF', '#083B3B', '#083B3B', '#052727'),
                    MAGENTA_LED: new LedColorDef('#D300FF', '#D300FF', '#8600CB', '#C300FF', '#38004B', '#38004B', '#280035')
                

                gaugeType

                    TYPE1: new GaugeTypeDef('type1'),
                    TYPE2: new GaugeTypeDef('type2'),
                    TYPE3: new GaugeTypeDef('type3'),
                    TYPE4: new GaugeTypeDef('type4'),
                    TYPE5: new GaugeTypeDef('type5')
                

                orientation

                    NORTH: new OrientationDef('north'),
                    SOUTH: new OrientationDef('south'),
                    EAST: new OrientationDef('east'),
                    WEST: new OrientationDef('west')
                

                knobType

                    STANDARD_KNOB: new KnobTypeDef('standardKnob'),
                    METAL_KNOB: new KnobTypeDef('metalKnob')
                

                knobStyle

                    BLACK: new KnobStyleDef('black'),
                    BRASS: new KnobStyleDef('brass'),
                    SILVER: new KnobStyleDef('silver')
                

                frameDesign

                    BLACK_METAL: new FrameDesignDef('blackMetal'),
                    METAL: new FrameDesignDef('metal'),
                    SHINY_METAL: new FrameDesignDef('shinyMetal'),
                    BRASS: new FrameDesignDef('brass'),
                    STEEL: new FrameDesignDef('steel'),
                    CHROME: new FrameDesignDef('chrome'),
                    GOLD: new FrameDesignDef('gold'),
                    ANTHRACITE: new FrameDesignDef('anthracite'),
                    TILTED_GRAY: new FrameDesignDef('tiltedGray'),
                    TILTED_BLACK: new FrameDesignDef('tiltedBlack'),
                    GLOSSY_METAL: new FrameDesignDef('glossyMetal')
                

                pointerType

                    TYPE1: new PointerTypeDef('type1'),
                    TYPE2: new PointerTypeDef('type2'),
                    TYPE3: new PointerTypeDef('type3'),
                    TYPE4: new PointerTypeDef('type4'),
                    TYPE5: new PointerTypeDef('type5'),
                    TYPE6: new PointerTypeDef('type6'),
                    TYPE7: new PointerTypeDef('type7'),
                    TYPE8: new PointerTypeDef('type8'),
                    TYPE9: new PointerTypeDef('type9'),
                    TYPE10: new PointerTypeDef('type10'),
                    TYPE11: new PointerTypeDef('type11'),
                    TYPE12: new PointerTypeDef('type12'),
                    TYPE13: new PointerTypeDef('type13'),
                    TYPE14: new PointerTypeDef('type14'),
                    TYPE15: new PointerTypeDef('type15'),
                    TYPE16: new PointerTypeDef('type16')
                

                foregroundType

                    TYPE1: new ForegroundTypeDef('type1'),
                    TYPE2: new ForegroundTypeDef('type2'),
                    TYPE3: new ForegroundTypeDef('type3'),
                    TYPE4: new ForegroundTypeDef('type4'),
                    TYPE5: new ForegroundTypeDef('type5')
                

                labelNumberFormat

                    STANDARD: new LabelNumberFormatDef('standard'),
                    FRACTIONAL: new LabelNumberFormatDef('fractional'),
                    SCIENTIFIC: new LabelNumberFormatDef('scientific')
                

                tickLabelOrientation

                    NORMAL: new TickLabelOrientationDef('normal'),
                    HORIZONTAL: new TickLabelOrientationDef('horizontal'),
                    TANGENT: new TickLabelOrientationDef('tangent')
                

                trendState

                    UP: new TrendStateDef('up'),
                    STEADY: new TrendStateDef('steady'),
                    DOWN: new TrendStateDef('down'),
                    OFF: new TrendStateDef('off')
                

                Allerdings weiß ich die Anwendung heute auch nicht mehr, das ist schon zu lange her. Da müsste man diese js Datei analysieren.

                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 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                  Wobei die 100% Anzeige mit den weißen Feldern in der Grafik finde ich nicht so schön. Aber daran können wir ja nichts ändern

                  Na das helle in der Mitte finde ich jetzt gar nicht so schlecht - was ich eher schlecht finde, ist, dass man bei diesem Teil den Rahmen nicht mit den anderen Farben bzw. Effekten setzen kann - damit fällt das Teil etwas aus dem Rahmen.
                  Gut bei der Ampel kann man es ja auch nicht ändern.

                  Ich hab mir damals mal alle Definitionen rausgesucht - intern meist mit Kleinschreibung von außen mit Großschreibung.

                  Definitionen

                  Components EXTERNAL : INTERNAL

                      Radial : radial,
                      RadialBargraph : radialBargraph,
                      RadialVertical : radialVertical,
                      Linear: linear,
                      LinearBargraph: linearBargraph,
                      DisplaySingle: displaySingle,
                      DisplayMulti: displayMulti,
                      Level : level,
                      Compass : compass,
                      WindDirection : windDirection,
                      Horizon : horizon,
                      Led : led,
                      Clock : clock,
                      Battery : battery,
                      StopWatch : stopwatch,
                      Altimeter : altimeter,
                      TrafficLight: trafficlight,
                      LightBulb: lightbulb,
                      Odometer: odometer,
                  
                      // Images
                      drawFrame : drawRadialFrameImage,
                      drawBackground : drawRadialBackgroundImage,
                      drawForeground : drawRadialForegroundImage,
                  
                      // Tools
                      rgbaColor :  RgbaColor,
                      ConicalGradient : ConicalGradient,
                      setAlpha : setAlpha,
                      getColorFromFraction : getColorFromFraction,
                      gradientWrapper : GradientWrapper,
                  
                      // Constants
                      BackgroundColor : backgroundColor,
                      LcdColor : lcdColor,
                      ColorDef : color,
                      LedColor : ledColor,
                      GaugeType : gaugeType,
                      Orientation: orientation,
                      FrameDesign : frameDesign,
                      PointerType : pointerType,
                      ForegroundType : foregroundType,
                      KnobType : knobType,
                      KnobStyle: knobStyle,
                      LabelNumberFormat: labelNumberFormat,
                      TickLabelOrientation: tickLabelOrientation,
                      TrendState: trendState,
                  
                      // Other
                      Section : section
                  

                  Formate

                  backgroundColor

                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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'),
                      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')
                  

                  lcdColor

                      BEIGE: new LcdColorDef('#c8c8b1', 'rgb(241, 237, 207)', 'rgb(234, 230, 194)', 'rgb(225, 220, 183)', 'rgb(237, 232, 191)', '#000000'),
                      BLUE: new LcdColorDef('#ffffff', 'rgb(231, 246, 255)', 'rgb(170, 224, 255)', 'rgb(136, 212, 255)', 'rgb(192, 232, 255)', '#124564'),
                      ORANGE: new LcdColorDef('#ffffff', 'rgb(255, 245, 225)', 'rgb(255, 217, 147)', 'rgb(255, 201, 104)', 'rgb(255, 227, 173)', '#503700'),
                      RED: new LcdColorDef('#ffffff', 'rgb(255, 225, 225)', 'rgb(253, 152, 152)', 'rgb(252, 114, 115)', 'rgb(254, 178, 178)', '#4f0c0e'),
                      YELLOW: new LcdColorDef('#ffffff', 'rgb(245, 255, 186)', 'rgb(210, 255, 0)', 'rgb(158, 205, 0)', 'rgb(210, 255, 0)', '#405300'),
                      WHITE: new LcdColorDef('#ffffff', '#ffffff', 'rgb(241, 246, 242)', 'rgb(229, 239, 244)', '#ffffff', '#000000'),
                      GRAY: new LcdColorDef('#414141', 'rgb(117, 117, 117)', 'rgb(87, 87, 87)', '#414141', 'rgb(81, 81, 81)', '#ffffff'),
                      BLACK: new LcdColorDef('#414141', '#666666', '#333333', '#000000', '#333333', '#cccccc'),
                      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)'),
                      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)'),
                      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'),
                      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)'),
                      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'),
                      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)'),
                      STANDARD_GREEN: new LcdColorDef('#ffffff', 'rgb(219, 230, 220)', 'rgb(179, 194, 178)', 'rgb(153, 176, 151)', 'rgb(114, 138, 109)', '#080C06'),
                      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'),
                      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'),
                      DARKBLUE: new LcdColorDef('rgb(14, 24, 31)', 'rgb(46, 105, 144)', 'rgb(19, 64, 96)', 'rgb(6, 20, 29)', 'rgb(8, 9, 10)', '#3DB3FF'),
                      LILA: new LcdColorDef('rgb(175, 164, 255)', 'rgb(188, 168, 253)', 'rgb(176, 159, 255)', 'rgb(174, 147, 252)', 'rgb(168, 136, 233)', '#076148'),
                      BLACKRED: new LcdColorDef('rgb(8, 12, 11)', 'rgb(10, 11, 13)', 'rgb(11, 10, 15)', 'rgb(7, 13, 9)', 'rgb(9, 13, 14)', '#B50026'),
                      DARKGREEN: new LcdColorDef('rgb(25, 85, 0)', 'rgb(47, 154, 0)', 'rgb(30, 101, 0)', 'rgb(30, 101, 0)', 'rgb(25, 85, 0)', '#233123'),
                      AMBER: new LcdColorDef('rgb(182, 71, 0)', 'rgb(236, 155, 25)', 'rgb(212, 93, 5)', 'rgb(212, 93, 5)', 'rgb(182, 71, 0)', '#593A0A'),
                      LIGHTBLUE: new LcdColorDef('rgb(125, 146, 184)', 'rgb(197, 212, 231)', 'rgb(138, 155, 194)', 'rgb(138, 155, 194)', 'rgb(125, 146, 184)', '#090051'),
                      SECTIONS: new LcdColorDef('#b2b2b2', '#ffffff', '#c4c4c4', '#c4c4c4', '#b2b2b2', '#000000')
                  

                  color

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

                  ledColor

                      RED_LED: new LedColorDef('#FF9A89', '#FF9A89', '#FF3300', '#FF8D70', '#7E1C00', '#7E1C00', '#641B00'),
                      GREEN_LED: new LedColorDef('#9AFF89', '#9AFF89', '#59FF2A', '#A5FF00', '#1C7E00', '#1C7E00', '#1B6400'),
                      BLUE_LED: new LedColorDef('#899AFF', '#899AFF', '#0033FF', '#708DFF', '#001C7E', '#001C7E', '#001B64'),
                      ORANGE_LED: new LedColorDef('#FEA23F', '#FEA23F', '#FD6C00', '#FD6C00', '#592800', '#592800', '#421F00'),
                      YELLOW_LED: new LedColorDef('#FFFF62', '#FFFF62', '#FFFF00', '#FFFF00', '#6B6D00', '#6B6D00', '#515300'),
                      CYAN_LED: new LedColorDef('#00FFFF', '#00FFFF', '#1BC3C3', '#00FFFF', '#083B3B', '#083B3B', '#052727'),
                      MAGENTA_LED: new LedColorDef('#D300FF', '#D300FF', '#8600CB', '#C300FF', '#38004B', '#38004B', '#280035')
                  

                  gaugeType

                      TYPE1: new GaugeTypeDef('type1'),
                      TYPE2: new GaugeTypeDef('type2'),
                      TYPE3: new GaugeTypeDef('type3'),
                      TYPE4: new GaugeTypeDef('type4'),
                      TYPE5: new GaugeTypeDef('type5')
                  

                  orientation

                      NORTH: new OrientationDef('north'),
                      SOUTH: new OrientationDef('south'),
                      EAST: new OrientationDef('east'),
                      WEST: new OrientationDef('west')
                  

                  knobType

                      STANDARD_KNOB: new KnobTypeDef('standardKnob'),
                      METAL_KNOB: new KnobTypeDef('metalKnob')
                  

                  knobStyle

                      BLACK: new KnobStyleDef('black'),
                      BRASS: new KnobStyleDef('brass'),
                      SILVER: new KnobStyleDef('silver')
                  

                  frameDesign

                      BLACK_METAL: new FrameDesignDef('blackMetal'),
                      METAL: new FrameDesignDef('metal'),
                      SHINY_METAL: new FrameDesignDef('shinyMetal'),
                      BRASS: new FrameDesignDef('brass'),
                      STEEL: new FrameDesignDef('steel'),
                      CHROME: new FrameDesignDef('chrome'),
                      GOLD: new FrameDesignDef('gold'),
                      ANTHRACITE: new FrameDesignDef('anthracite'),
                      TILTED_GRAY: new FrameDesignDef('tiltedGray'),
                      TILTED_BLACK: new FrameDesignDef('tiltedBlack'),
                      GLOSSY_METAL: new FrameDesignDef('glossyMetal')
                  

                  pointerType

                      TYPE1: new PointerTypeDef('type1'),
                      TYPE2: new PointerTypeDef('type2'),
                      TYPE3: new PointerTypeDef('type3'),
                      TYPE4: new PointerTypeDef('type4'),
                      TYPE5: new PointerTypeDef('type5'),
                      TYPE6: new PointerTypeDef('type6'),
                      TYPE7: new PointerTypeDef('type7'),
                      TYPE8: new PointerTypeDef('type8'),
                      TYPE9: new PointerTypeDef('type9'),
                      TYPE10: new PointerTypeDef('type10'),
                      TYPE11: new PointerTypeDef('type11'),
                      TYPE12: new PointerTypeDef('type12'),
                      TYPE13: new PointerTypeDef('type13'),
                      TYPE14: new PointerTypeDef('type14'),
                      TYPE15: new PointerTypeDef('type15'),
                      TYPE16: new PointerTypeDef('type16')
                  

                  foregroundType

                      TYPE1: new ForegroundTypeDef('type1'),
                      TYPE2: new ForegroundTypeDef('type2'),
                      TYPE3: new ForegroundTypeDef('type3'),
                      TYPE4: new ForegroundTypeDef('type4'),
                      TYPE5: new ForegroundTypeDef('type5')
                  

                  labelNumberFormat

                      STANDARD: new LabelNumberFormatDef('standard'),
                      FRACTIONAL: new LabelNumberFormatDef('fractional'),
                      SCIENTIFIC: new LabelNumberFormatDef('scientific')
                  

                  tickLabelOrientation

                      NORMAL: new TickLabelOrientationDef('normal'),
                      HORIZONTAL: new TickLabelOrientationDef('horizontal'),
                      TANGENT: new TickLabelOrientationDef('tangent')
                  

                  trendState

                      UP: new TrendStateDef('up'),
                      STEADY: new TrendStateDef('steady'),
                      DOWN: new TrendStateDef('down'),
                      OFF: new TrendStateDef('off')
                  

                  Allerdings weiß ich die Anwendung heute auch nicht mehr, das ist schon zu lange her. Da müsste man diese js Datei analysieren.

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

                  @mickym
                  Danke für die ausführliche Erläuterung.

                  Leider kann ich mich nicht so wirklich mit der Darstellung anfreunden. Ich habe mich mal weiter auf die Suche gemacht. Aber so wirklich etwas Brauchbares habe ich dann doch nicht gefunden.

                  Etwas besser finde ich diese Visualisierung, allerdings auch ein wenig verspielt mit den Bubbles.

                  3d4097a3-6d57-4111-b329-5b32a665f6db-grafik.png

                  Bei mir funktioniert die Werteübergabe über payload leider nicht. Ersetze ich bei <script> und scope das msg.payload durch einen Zahlenwert dann verändert sich die Anzeige nach einem deploy. Über das inject-Node, wenn überhaupt, nur einmal. Kann so eine animierte Grafik ohne Javascript überhaupt funktionieren?

                  Hier noch die gefundenen Information:

                  https://discourse.nodered.org/t/battery-gauge-load-msg-payload-into-javascript-resolved/2639/4
                  https://codepen.io/u01jmg3/pen/PGmzVL

                  Vielleicht möchtest Du dir einmal ansehen?

                  Ansonsten muss ich mit dem Battery Widget aus der Steelserie halt leben.
                  Komisch finde ich nur, warum es so schwierig ist etwas Brauchbares zu finden, oder selber zu erstellen.

                  Gruß Garf

                  1 Antwort Letzte Antwort
                  0
                  • mickymM Online
                    mickymM Online
                    mickym
                    Most Active
                    schrieb am zuletzt editiert von mickym
                    #61

                    @garf Ja das Problem mit den template Nodes - wenn das im Script abläuft ist oft die Aktualisierung. Ich hab die dann nach jeder Payloadänderung angestoßen, in dem ich mir die payloads als trigger nochmals ausgeben lasse.

                    Hier ein Video Deiner Batterieanimation:

                    Die Batterie wird alle 10 Sekunden um 10% geladen. :joy: :joy:

                    Batterieanimation.mp4

                    Wenn der Flow aber in dem von Dir verlinkten Artikel nicht schon vorhanden gewesen wäre, hätte ich das aber wahrscheinlich nicht hinbekommen - da ich kein Webprofi bin.

                    Hier mal der Flow der Animation mit dem Refresh.

                    0ccb7a20-80a5-43ce-b1b0-2bbc944574b4-image.png

                    [{"id":"33282e33.bafe72","type":"ui_template","z":"0ff82ffab2d12d50","group":"b9d11553.55a72","name":"SoC","order":6,"width":"4","height":"8","format":"<div class=\"battery onscreen\">\n    <div class=\"bubbles battery-bubbles\">\n        <span>&nbsp;</span>\n    </div>\n    <div class=\"liquid liquid-bg-color\">\n        <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"300px\" height=\"5px\" viewBox=\"0 0 300 5\" enable-background=\"new 0 0 300 5\" xml:space=\"preserve\">\n            <path fill=\"#00fa57\" class=\"wave\" d=\"M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4\n            c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9\n            c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z\" />\n        </svg>\n    </div><!-- .liquid -->\n</div>\n<div class=\"battery-text onscreen\">\n    <span class=\"percentage\"></span><small class=\"units\"></small>\n</div>\n<div class=\"slider onscreen\">\n    <!--\n    <input ng-model=\"msg.payload\" class=\"vertical pointer\" type=\"range\" name=\"percentage\" min=\"0\" max=\"100\" step=\"1\" orient=\"vertical\">\n    -->\n    </div>\n<div class=\"page-spacer\"></div>\n    <span>&nbsp;</span>\n\n<style>\n    small { font-size: .7em }\nsvg { display: block }\n.page-spacer {\n    min-height: 171px;\n    height: calc(100% - 160px);\n}\n.battery-text {\n    width: 80px;\n    height: 160px;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-color: #fff;\n    background-image: linear-gradient(#000 50%, #c3c3c3 0%);\n    background-repeat: repeat;\n    background-size: 100% 200%;\n    transition: background-position .5s ease, opacity .5s ease;\n    opacity: 0;\n    z-index: 2;\n}\n.battery,\n.battery-text,\n.slider {\n    margin: 0 auto;\n    position: absolute;\n    line-height: 4.5em;\n    text-align: center;\n    font-size: 2em;\n    color: white;\n    font-family: Ebrima;\n    top: calc(50% - 155px);\n    left: calc(50% - 39.5px);\n}\n.pointer { cursor: pointer }\n.battery {\n    border: 5px solid #00fa57;\n    height: 150px;\n    border-radius: 1px;\n    width: 70px;\n    background-color: #00fa57;\n    background-image: linear-gradient(#00fa57 50%, #444 0%);\n    background-repeat: repeat;\n    background-size: 100% 200%;\n    background-position: 0 -100%;\n    transition: background-position .5s ease;\n}\n.battery::after {\n    background-color: #00fa57;\n    content: '';\n    display: block;\n    height: 10px;\n    position: absolute;\n    right: 20px;\n    top: -15px;\n    width: 30px;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n    border-top-left-radius: 1px;\n    border-top-right-radius: 1px;\n}\n.bubbles {\n    display: inline-block;\n    position: relative;\n}\n.battery-bubbles {\n    width: 69px;\n    left: calc(50% - 35px);\n    height: 149px;\n}\n.bottom-bubbles {\n    width: 39px;\n    left: calc(50% - 20px);\n    height: 150px;\n}\n.bubbles span {\n    position: relative;\n    margin: 3em 0 0; /* Height bubbles rise to */\n    color: #fff;\n    z-index: 2;\n}\n.individual-bubble {\n    position: absolute;\n    border-radius: 100%;\n    bottom: 0;\n    background-color: #00fa57;\n    z-index: 1;\n}\n.vertical {\n    writing-mode: bt-lr; /* IE */\n    -webkit-appearance: slider-vertical; /* WebKit */\n    width: 8px;\n    height: 159.5px;\n    margin: 0;\n    margin-left: 95px;\n}\n.liquid {\n    position: absolute;\n    width: 70px;\n    height: 5px;\n    overflow: hidden;\n    -webkit-backface-visibility: hidden;\n    -webkit-transform: translate3d(0, 0, 0);\n    -webkit-transform: translate(0, 50px);\n            transform: translate(0, 50px);\n    margin-top: -51px;\n    transition: top .5s ease;\n    display: none;\n}\n.wave {\n    -webkit-animation-name: wave-action;\n            animation-name: wave-action;\n    -webkit-animation-iteration-count: infinite;\n            animation-iteration-count: infinite;\n    -webkit-animation-timing-function: linear;\n            animation-timing-function: linear;\n    -webkit-animation-duration: .8s;\n            animation-duration: .8s;\n    width: 70px;\n    height: 5px;\n    fill: #00fa57;\n}\n@-webkit-keyframes wave-action {\n    0%   { -webkit-transform: translate(-150px, 0) }\n    100% { -webkit-transform: translate(0, 0) }\n}\n@keyframes wave-action {\n    0%   { transform: translate(-150px, 0) }\n    100% { transform: translate(0, 0) }\n}\n\n/**/\n\n@media all and (max-height: 332px){\n   .onscreen { top: 11px }\n}\n\n/**/\n\n/* Animating the top property in Microsoft Edge does not work so prevent animating it */\n_:-ms-lang(x), _:-webkit-full-screen, .individual-bubble { top: inherit !important }\n</style>\n\n<script>\n   (function(scope){\n        scope.$watch('msg', function(msg) {\n           perc=msg.payload;\n            \n        });\n \n    })(scope);\nfunction changeStylesheetRule(s, selector, property, value){\n    // Make these strings lowercase\n    selector = selector.toLowerCase();\n    value    = value.toLowerCase();\n\n    // Delete it if it exists\n    for(var i = 0; i < s.cssRules.length; i++){\n        var rule = s.cssRules[i];\n        if(rule.selectorText === selector){\n            s.deleteRule(i);\n            break;\n        }\n    }\n\n    // Convert camelCase to hyphenated-case\n    property = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n    s.insertRule(selector + \" { \" + property + \": \" + value + \"; }\", 0);\n}\n\n// Function to select random array element\n// Used within the setInterval()\nfunction randomValue(arr){\n    return arr[Math.floor(Math.random() * arr.length)];\n}\n\njQuery.easing['jswing'] = jQuery.easing['swing'];\njQuery.extend(jQuery.easing, {\n    def: 'easeOutQuad',\n    swing: function (x, t, b, c, d){\n        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);\n    },\n    easeOutQuad: function (x, t, b, c, d){\n        return -c * (t /= d) * (t - 2) + b;\n    },\n});\n\n$(document).ready(function(){\n    //var perc = 50;\n    var s = document.styleSheets[0];\n    // Define a size array, this will be used to vary bubble sizes\n    var sArray = [];\n\n    setTimeout(function(){\n        updateBattery(perc, s);\n        $('.percentage').text(perc);\n        $('.units').text('%');\n        $('.battery-text').css('opacity', 1);\n        $('.slider input').animate({ value: perc }, 500, 'easeOutQuad');\n\n        setTimeout(function(){\n            $('.liquid').show();\n        }, 500);\n    }, 500);\n\n    function updateBattery(perc, s){\n        if(perc === 100){\n            sArray = [];\n        } else if(sArray.length === 0){\n            sArray = [4, 6, 8, 10];\n        }\n\n        changeStylesheetRule(s, '.battery', 'backgroundPosition', '0 -' + (100 - perc) + '% !important');\n        changeStylesheetRule(s, '.battery-text', 'backgroundPosition', '0 -' + (100 - perc) + '%');\n        changeStylesheetRule(s, '.liquid', 'top', (100 - perc) + '%');\n        if(perc === 100){\n            changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#00fa57');\n        } else {\n            changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#444');\n        }\n    }\n\n    // setInterval function used to create new bubble every 350 milliseconds\n    setInterval(function(){\n        if(sArray.length > 0){\n            // Get a random size, defined as variable so it can be used for both width and height\n            var size = randomValue(sArray);\n\n            var largestSize = Math.max.apply(Math, sArray);\n            var offset = largestSize / 2; // half to get the largest bubble radius\n            offset += 5; // 5px for border-right\n\n            // New bubble appended to div with it's size and left position being set inline\n            $('.bubbles').each(function(){\n                var bArray = new Array(parseInt($(this).width()) - offset)\n                                 .join()\n                                 .split(',')\n                                 .map(function(item, index){ return ++index; });\n\n                $(this).append('<div class=\"individual-bubble\" style=\"left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height: ' + size + 'px\"></div>');\n            });\n\n            // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves\n            // Callback function used to remove finished animations from the page\n            $('.individual-bubble').animate({\n                'top': 0,\n                'bottom': '100%',\n                'opacity' : '-=0.7',\n            }, 3000, function(){\n                $(this).remove();\n            });\n        }\n    }, 350);\n\n    $('.slider input').on('input', function(){\n        $(this).stop(); // Terminate any running animation\n        var original = this.value;\n        // Set slider back to its starting value so we can animate the change\n        this.value = perc;\n        perc = parseInt(original);\n        $(this).animate({ value: perc }, 500, 'easeOutQuad');\n        $('.percentage').text(perc);\n    }).on('mouseup', function(){\n        // We need to manually call this to make sure things bubble up to the change event\n        $(this).trigger('change');\n    }).on('change', function(){\n        updateBattery(perc, s);\n    });\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":180,"wires":[["62e432036fdd461e","01858d9486ec3675","6e058593d06fc1f1"]]},{"id":"2cd6f21ba01b4a40","type":"inject","z":"0ff82ffab2d12d50","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":170,"y":180,"wires":[["33282e33.bafe72"]]},{"id":"e3a4339f158d153c","type":"ui_ui_control","z":"0ff82ffab2d12d50","name":"","events":"all","x":820,"y":180,"wires":[[]]},{"id":"62e432036fdd461e","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"tab\":\"\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":180,"wires":[["e3a4339f158d153c"]]},{"id":"01858d9486ec3675","type":"debug","z":"0ff82ffab2d12d50","name":"debug 45","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":140,"wires":[]},{"id":"6e058593d06fc1f1","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload + 10","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":240,"wires":[["7895c27ea28429b0"]]},{"id":"7895c27ea28429b0","type":"range","z":"0ff82ffab2d12d50","minin":"0","maxin":"100","minout":"0","maxout":"100","action":"drop","round":false,"property":"payload","name":"","x":840,"y":240,"wires":[["587f76f525d9a0ff"]]},{"id":"587f76f525d9a0ff","type":"delay","z":"0ff82ffab2d12d50","name":"","pauseType":"delay","timeout":"10","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":1050,"y":240,"wires":[["33282e33.bafe72"]]},{"id":"a18464d5bc33c1c8","type":"inject","z":"0ff82ffab2d12d50","name":"reset","props":[{"p":"reset","v":"true","vt":"bool"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":830,"y":300,"wires":[["587f76f525d9a0ff"]]},{"id":"b9d11553.55a72","type":"ui_group","name":"Status","tab":"c569e95d.e2ea7","order":4,"disp":true,"width":"8","collapse":true},{"id":"c569e95d.e2ea7","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]
                    

                    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 Ja das Problem mit den template Nodes - wenn das im Script abläuft ist oft die Aktualisierung. Ich hab die dann nach jeder Payloadänderung angestoßen, in dem ich mir die payloads als trigger nochmals ausgeben lasse.

                      Hier ein Video Deiner Batterieanimation:

                      Die Batterie wird alle 10 Sekunden um 10% geladen. :joy: :joy:

                      Batterieanimation.mp4

                      Wenn der Flow aber in dem von Dir verlinkten Artikel nicht schon vorhanden gewesen wäre, hätte ich das aber wahrscheinlich nicht hinbekommen - da ich kein Webprofi bin.

                      Hier mal der Flow der Animation mit dem Refresh.

                      0ccb7a20-80a5-43ce-b1b0-2bbc944574b4-image.png

                      [{"id":"33282e33.bafe72","type":"ui_template","z":"0ff82ffab2d12d50","group":"b9d11553.55a72","name":"SoC","order":6,"width":"4","height":"8","format":"<div class=\"battery onscreen\">\n    <div class=\"bubbles battery-bubbles\">\n        <span>&nbsp;</span>\n    </div>\n    <div class=\"liquid liquid-bg-color\">\n        <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"300px\" height=\"5px\" viewBox=\"0 0 300 5\" enable-background=\"new 0 0 300 5\" xml:space=\"preserve\">\n            <path fill=\"#00fa57\" class=\"wave\" d=\"M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4\n            c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9\n            c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z\" />\n        </svg>\n    </div><!-- .liquid -->\n</div>\n<div class=\"battery-text onscreen\">\n    <span class=\"percentage\"></span><small class=\"units\"></small>\n</div>\n<div class=\"slider onscreen\">\n    <!--\n    <input ng-model=\"msg.payload\" class=\"vertical pointer\" type=\"range\" name=\"percentage\" min=\"0\" max=\"100\" step=\"1\" orient=\"vertical\">\n    -->\n    </div>\n<div class=\"page-spacer\"></div>\n    <span>&nbsp;</span>\n\n<style>\n    small { font-size: .7em }\nsvg { display: block }\n.page-spacer {\n    min-height: 171px;\n    height: calc(100% - 160px);\n}\n.battery-text {\n    width: 80px;\n    height: 160px;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-color: #fff;\n    background-image: linear-gradient(#000 50%, #c3c3c3 0%);\n    background-repeat: repeat;\n    background-size: 100% 200%;\n    transition: background-position .5s ease, opacity .5s ease;\n    opacity: 0;\n    z-index: 2;\n}\n.battery,\n.battery-text,\n.slider {\n    margin: 0 auto;\n    position: absolute;\n    line-height: 4.5em;\n    text-align: center;\n    font-size: 2em;\n    color: white;\n    font-family: Ebrima;\n    top: calc(50% - 155px);\n    left: calc(50% - 39.5px);\n}\n.pointer { cursor: pointer }\n.battery {\n    border: 5px solid #00fa57;\n    height: 150px;\n    border-radius: 1px;\n    width: 70px;\n    background-color: #00fa57;\n    background-image: linear-gradient(#00fa57 50%, #444 0%);\n    background-repeat: repeat;\n    background-size: 100% 200%;\n    background-position: 0 -100%;\n    transition: background-position .5s ease;\n}\n.battery::after {\n    background-color: #00fa57;\n    content: '';\n    display: block;\n    height: 10px;\n    position: absolute;\n    right: 20px;\n    top: -15px;\n    width: 30px;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n    border-top-left-radius: 1px;\n    border-top-right-radius: 1px;\n}\n.bubbles {\n    display: inline-block;\n    position: relative;\n}\n.battery-bubbles {\n    width: 69px;\n    left: calc(50% - 35px);\n    height: 149px;\n}\n.bottom-bubbles {\n    width: 39px;\n    left: calc(50% - 20px);\n    height: 150px;\n}\n.bubbles span {\n    position: relative;\n    margin: 3em 0 0; /* Height bubbles rise to */\n    color: #fff;\n    z-index: 2;\n}\n.individual-bubble {\n    position: absolute;\n    border-radius: 100%;\n    bottom: 0;\n    background-color: #00fa57;\n    z-index: 1;\n}\n.vertical {\n    writing-mode: bt-lr; /* IE */\n    -webkit-appearance: slider-vertical; /* WebKit */\n    width: 8px;\n    height: 159.5px;\n    margin: 0;\n    margin-left: 95px;\n}\n.liquid {\n    position: absolute;\n    width: 70px;\n    height: 5px;\n    overflow: hidden;\n    -webkit-backface-visibility: hidden;\n    -webkit-transform: translate3d(0, 0, 0);\n    -webkit-transform: translate(0, 50px);\n            transform: translate(0, 50px);\n    margin-top: -51px;\n    transition: top .5s ease;\n    display: none;\n}\n.wave {\n    -webkit-animation-name: wave-action;\n            animation-name: wave-action;\n    -webkit-animation-iteration-count: infinite;\n            animation-iteration-count: infinite;\n    -webkit-animation-timing-function: linear;\n            animation-timing-function: linear;\n    -webkit-animation-duration: .8s;\n            animation-duration: .8s;\n    width: 70px;\n    height: 5px;\n    fill: #00fa57;\n}\n@-webkit-keyframes wave-action {\n    0%   { -webkit-transform: translate(-150px, 0) }\n    100% { -webkit-transform: translate(0, 0) }\n}\n@keyframes wave-action {\n    0%   { transform: translate(-150px, 0) }\n    100% { transform: translate(0, 0) }\n}\n\n/**/\n\n@media all and (max-height: 332px){\n   .onscreen { top: 11px }\n}\n\n/**/\n\n/* Animating the top property in Microsoft Edge does not work so prevent animating it */\n_:-ms-lang(x), _:-webkit-full-screen, .individual-bubble { top: inherit !important }\n</style>\n\n<script>\n   (function(scope){\n        scope.$watch('msg', function(msg) {\n           perc=msg.payload;\n            \n        });\n \n    })(scope);\nfunction changeStylesheetRule(s, selector, property, value){\n    // Make these strings lowercase\n    selector = selector.toLowerCase();\n    value    = value.toLowerCase();\n\n    // Delete it if it exists\n    for(var i = 0; i < s.cssRules.length; i++){\n        var rule = s.cssRules[i];\n        if(rule.selectorText === selector){\n            s.deleteRule(i);\n            break;\n        }\n    }\n\n    // Convert camelCase to hyphenated-case\n    property = property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n    s.insertRule(selector + \" { \" + property + \": \" + value + \"; }\", 0);\n}\n\n// Function to select random array element\n// Used within the setInterval()\nfunction randomValue(arr){\n    return arr[Math.floor(Math.random() * arr.length)];\n}\n\njQuery.easing['jswing'] = jQuery.easing['swing'];\njQuery.extend(jQuery.easing, {\n    def: 'easeOutQuad',\n    swing: function (x, t, b, c, d){\n        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);\n    },\n    easeOutQuad: function (x, t, b, c, d){\n        return -c * (t /= d) * (t - 2) + b;\n    },\n});\n\n$(document).ready(function(){\n    //var perc = 50;\n    var s = document.styleSheets[0];\n    // Define a size array, this will be used to vary bubble sizes\n    var sArray = [];\n\n    setTimeout(function(){\n        updateBattery(perc, s);\n        $('.percentage').text(perc);\n        $('.units').text('%');\n        $('.battery-text').css('opacity', 1);\n        $('.slider input').animate({ value: perc }, 500, 'easeOutQuad');\n\n        setTimeout(function(){\n            $('.liquid').show();\n        }, 500);\n    }, 500);\n\n    function updateBattery(perc, s){\n        if(perc === 100){\n            sArray = [];\n        } else if(sArray.length === 0){\n            sArray = [4, 6, 8, 10];\n        }\n\n        changeStylesheetRule(s, '.battery', 'backgroundPosition', '0 -' + (100 - perc) + '% !important');\n        changeStylesheetRule(s, '.battery-text', 'backgroundPosition', '0 -' + (100 - perc) + '%');\n        changeStylesheetRule(s, '.liquid', 'top', (100 - perc) + '%');\n        if(perc === 100){\n            changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#00fa57');\n        } else {\n            changeStylesheetRule(s, '.liquid-bg-color', 'backgroundColor', '#444');\n        }\n    }\n\n    // setInterval function used to create new bubble every 350 milliseconds\n    setInterval(function(){\n        if(sArray.length > 0){\n            // Get a random size, defined as variable so it can be used for both width and height\n            var size = randomValue(sArray);\n\n            var largestSize = Math.max.apply(Math, sArray);\n            var offset = largestSize / 2; // half to get the largest bubble radius\n            offset += 5; // 5px for border-right\n\n            // New bubble appended to div with it's size and left position being set inline\n            $('.bubbles').each(function(){\n                var bArray = new Array(parseInt($(this).width()) - offset)\n                                 .join()\n                                 .split(',')\n                                 .map(function(item, index){ return ++index; });\n\n                $(this).append('<div class=\"individual-bubble\" style=\"left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height: ' + size + 'px\"></div>');\n            });\n\n            // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves\n            // Callback function used to remove finished animations from the page\n            $('.individual-bubble').animate({\n                'top': 0,\n                'bottom': '100%',\n                'opacity' : '-=0.7',\n            }, 3000, function(){\n                $(this).remove();\n            });\n        }\n    }, 350);\n\n    $('.slider input').on('input', function(){\n        $(this).stop(); // Terminate any running animation\n        var original = this.value;\n        // Set slider back to its starting value so we can animate the change\n        this.value = perc;\n        perc = parseInt(original);\n        $(this).animate({ value: perc }, 500, 'easeOutQuad');\n        $('.percentage').text(perc);\n    }).on('mouseup', function(){\n        // We need to manually call this to make sure things bubble up to the change event\n        $(this).trigger('change');\n    }).on('change', function(){\n        updateBattery(perc, s);\n    });\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":180,"wires":[["62e432036fdd461e","01858d9486ec3675","6e058593d06fc1f1"]]},{"id":"2cd6f21ba01b4a40","type":"inject","z":"0ff82ffab2d12d50","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":170,"y":180,"wires":[["33282e33.bafe72"]]},{"id":"e3a4339f158d153c","type":"ui_ui_control","z":"0ff82ffab2d12d50","name":"","events":"all","x":820,"y":180,"wires":[[]]},{"id":"62e432036fdd461e","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"tab\":\"\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":180,"wires":[["e3a4339f158d153c"]]},{"id":"01858d9486ec3675","type":"debug","z":"0ff82ffab2d12d50","name":"debug 45","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":620,"y":140,"wires":[]},{"id":"6e058593d06fc1f1","type":"change","z":"0ff82ffab2d12d50","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload + 10","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":240,"wires":[["7895c27ea28429b0"]]},{"id":"7895c27ea28429b0","type":"range","z":"0ff82ffab2d12d50","minin":"0","maxin":"100","minout":"0","maxout":"100","action":"drop","round":false,"property":"payload","name":"","x":840,"y":240,"wires":[["587f76f525d9a0ff"]]},{"id":"587f76f525d9a0ff","type":"delay","z":"0ff82ffab2d12d50","name":"","pauseType":"delay","timeout":"10","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":1050,"y":240,"wires":[["33282e33.bafe72"]]},{"id":"a18464d5bc33c1c8","type":"inject","z":"0ff82ffab2d12d50","name":"reset","props":[{"p":"reset","v":"true","vt":"bool"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":830,"y":300,"wires":[["587f76f525d9a0ff"]]},{"id":"b9d11553.55a72","type":"ui_group","name":"Status","tab":"c569e95d.e2ea7","order":4,"disp":true,"width":"8","collapse":true},{"id":"c569e95d.e2ea7","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]
                      

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

                      @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                      da ich kein Webprofi bin.

                      Dafür können sich die Ergebnisse aber schon sehen lassen. Fast wie in der Realität. Allerdings verliert das Dashboard dabei lfd. die Netzwerkverbindung. Oben rechts Connection lost, da weg, da weg usw.

                      Trotzdem Danke, dass du dir soviel Arbeit macht. Das Ergebnis hätte ich so nicht für möglich gehalten. Evtl. nehme ich als letzte Möglichkeit das ui-level-Node. Da fehlt nur der entsprechende Rahmen.
                      Irgendwann muss man halt Kompromisse eingehen.
                      d688c393-d06c-44f1-855d-0cbdde482bb1-grafik.png

                      G 1 Antwort Letzte Antwort
                      0
                      • G Garf

                        @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                        da ich kein Webprofi bin.

                        Dafür können sich die Ergebnisse aber schon sehen lassen. Fast wie in der Realität. Allerdings verliert das Dashboard dabei lfd. die Netzwerkverbindung. Oben rechts Connection lost, da weg, da weg usw.

                        Trotzdem Danke, dass du dir soviel Arbeit macht. Das Ergebnis hätte ich so nicht für möglich gehalten. Evtl. nehme ich als letzte Möglichkeit das ui-level-Node. Da fehlt nur der entsprechende Rahmen.
                        Irgendwann muss man halt Kompromisse eingehen.
                        d688c393-d06c-44f1-855d-0cbdde482bb1-grafik.png

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

                        @mickym
                        So sieht meine Lösung nun aus.

                        b96edf10-73c2-4844-965a-d674a5875e86-grafik.png

                        48eac63b-09a9-4d6e-8001-c06646f02ce4-grafik.png

                        mickymM 1 Antwort Letzte Antwort
                        0
                        • G Garf

                          @mickym
                          So sieht meine Lösung nun aus.

                          b96edf10-73c2-4844-965a-d674a5875e86-grafik.png

                          48eac63b-09a9-4d6e-8001-c06646f02ce4-grafik.png

                          mickymM Online
                          mickymM Online
                          mickym
                          Most Active
                          schrieb am zuletzt editiert von
                          #64

                          @garf Na das schaut doch gut aus. :+1:
                          Wobei es vielleicht auch die Steelseries nicht unbedingt braucht. Ich habe normale Icons nur mit Batterie low und full genommen. In dem Fall dient ja der Balken als Infoquelle.

                          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 Na das schaut doch gut aus. :+1:
                            Wobei es vielleicht auch die Steelseries nicht unbedingt braucht. Ich habe normale Icons nur mit Batterie low und full genommen. In dem Fall dient ja der Balken als Infoquelle.

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

                            @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

                            Wobei es vielleicht auch die Steelseries nicht unbedingt braucht.
                            :joy:
                            Sicher nicht. Da steckte aber doch ein wenig Arbeit drin und war nun einmal da. In der kleinen Grafik stören mich die weißen Flecken auch nicht mehr. Deshalb habe ich die Grafik beibehalten.
                            Danke nochmals für deine Hilfe. Die ist immer wieder eine echte Motivation dran zu bleiben.

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


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            575

                            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