Steelseries Widgets im NodeRed Dashboard nutzen

[Garf]

@mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

14. Battery das hier:

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

Danke dir.

Gruß Garf

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

50%

25%

10 %

Hier der Code:

Spoiler

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

[Garf]

@mickym

Danke dir.
Ich hatte nur einen winzigen Fehler.

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.

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

Spoiler

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.

[Garf]

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

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

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

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.

Spoiler

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

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

[Garf]

@mickym
So sieht meine Lösung nun aus.

[mickym]

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

[Garf]

@mickym sagte in Steelseries Widgets im NodeRed Dashboard nutzen:

Wobei es vielleicht auch die Steelseries nicht unbedingt braucht.

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