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.
  • mickymM mickym

    @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

    Auf welchem System arbeitest Du - Win10?

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

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

    @mickym

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

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

    1 Antwort Letzte Antwort
    0
    • mickymM mickym

      @noah3112 sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

      Auf welchem System arbeitest Du - Win10?

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

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

      @mickym

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

      ist erledigt

      mickymM 1 Antwort Letzte Antwort
      0
      • ? Ein ehemaliger Benutzer

        @mickym

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

        ist erledigt

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

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

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

        falls Dein System direkt zum Netz hat.

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

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

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

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

        In dem Zielverzeichnis gibst:

        sudo wget https://...
        

        ein

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

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

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

        ? 1 Antwort Letzte Antwort
        0
        • mickymM mickym

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

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

          falls Dein System direkt zum Netz hat.

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

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

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

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

          In dem Zielverzeichnis gibst:

          sudo wget https://...
          

          ein

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

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

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

          mickymM 1 Antwort Letzte Antwort
          0
          • ? Ein ehemaliger Benutzer

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

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

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

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

            1 Antwort Letzte Antwort
            0
            • mickymM mickym

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

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

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

              Das Prinzip hier ist das Gleiche.

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

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

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

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

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

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

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

              Hier wurden auch die alten Dateien verwendet. ;)

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

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

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

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

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

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

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

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

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

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

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

              @mickym

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

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

              mickymM 1 Antwort Letzte Antwort
              0
              • sigi234S sigi234

                @mickym

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

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

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

                Vielleicht geht es sogar mit so einem HTML Widget.

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

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

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

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

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

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

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

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

                sigi234S 1 Antwort Letzte Antwort
                0
                • mickymM mickym

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

                  Vielleicht geht es sogar mit so einem HTML Widget.

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

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

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

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

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

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

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

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

                  @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

                  OliverIOO 1 Antwort Letzte Antwort
                  0
                  • sigi234S sigi234

                    @mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

                    @sigi234

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

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

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

                    sigi234S 1 Antwort Letzte Antwort
                    0
                    • OliverIOO OliverIO

                      @sigi234

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

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

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

                      @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

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

                      OliverIOO 1 Antwort Letzte Antwort
                      0
                      • sigi234S sigi234

                        @oliverio sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

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

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

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

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

                        @sigi234

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

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

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

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

                        1 Antwort Letzte Antwort
                        0
                        • 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 Offline
                              mickymM Offline
                              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 Offline
                                  mickymM Offline
                                  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 Offline
                                      mickymM Offline
                                      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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          840

                                          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