Neues YouTube-Video: Visualisierung im Devices-Adapter

[Shadowhunter23]

Ich muss jetzt nochmals fragen zu einer Animation des Akku Symbols mdi:battery-high:

Im CSS steht:

/* Icons for Battery */
:root {
    --empty: 'M16,20H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z';
    --low: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16';
    --medium: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 11.5H9V14.5H15V11.5Z';
    --high: 'M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z';
}

/* Statische Füllstände, wenn keine Animation aktiv ist */
.battery_empty path {
    d: path(var(--empty));
}

.battery_low path {
    d: path(var(--low));
}

.battery_medium path {
    d: path(var(--medium));
}

.battery_high path {
    d: path(var(--high));
}

/* Animation nur für die Richtung */
.battery_charge path {
    animation: charge 4s linear infinite;
}

.battery_discharge path {
    animation: discharge 4s linear infinite;
}

.battery_stop path {
    animation: none !important;
}

/* Animation for battery */
@keyframes charge {
    0% {
        d: path(var(--empty));
    }

    25% {
        d: path(var(--low));
    }

    50% {
        d: path(var(--medium));
    }

    75% {
        d: path(var(--high));
    }

    100% {
        d: path(var(--high));
    }
}

@keyframes discharge {
    0% {
        d: path(var(--high));
    }

    25% {
        d: path(var(--medium));
    }

    50% {
        d: path(var(--low));
    }

    75% {
        d: path(var(--empty));
    }

    100% {
        d: path(var(--empty));
    }
}

Ich habe extra einen Datenpunkt angelegt der mit beim laden positive Werte schreibt und beim entladen negative Wert schreibt. Bei überschreiben habe ich dies stehen:

{
    "default": {
        "class": "val => Math.abs(Number(val)) >= 100 ? 'battery_stop' : (Number(val) > 0 ? 'battery_charge' : Number(val) < 0 ? 'battery_discharge' : 'battery_stop')"
    }
}

Die Animation läuft hoch und runter je nach Wert nur stoppt diese nicht bei 100%. Wo liegt mein Fehler?

[TimoWald]

@gsiffert wo wurde es beantwortet? Finde die Lösung dazu leider nicht.

[Homoran]

@timowald

@gsiffert sagte:

im Chat

[Loemic]

Moin,

ich hab ein Darstellungsproblem auf der Konfigurationsseite vom Energiefluss-Erweitert Adapter.

Die Steuerelemente werden nicht angezeigt. Da ist nur eine Animation zu sehen, siehe Screenshot:

Der graue Balken läuft in jedem Feld von links nach rechts.

Habe den Adapter mehrfach gelöscht und neu installiert. Das brachte leider keine Besserung.

Hat jemand eine Idee? Leider kann ich nichtmal sagen, seit wann das Problem auftritt.

[Homoran]

@Loemic das Phänomen wurde bereits beschrieben, ich glaube von @wendy2702

Soweit ich mich eri nere war die Lösung das Tutorial durchlaufen zu lassen und dann noch mal zu speichern

[Loemic]

Danke @homoran !

Speichern und F5 haben geholfen. Die Suche hatte mich nicht vorangebracht, umso besser war dann deine Antwort!

[Negalein]

Hallo

Ich benutze bis jetzt den normalen Energiefluss Adapter.
Funktioniert zwar, aber ich kann es nicht (brauch eh nur 4 Elemente) an meine VIS-Größe anpassen.

Nun den Erweitert probiert und von den Gestaltungsmöglichkeiten ist der der Hammer! :)

Ich spiel mich jetzt schon Stunden und schaff es aber nicht annähernd an den normalen Energiefluss zu kommen.
Hab alle möglichen Kombis x-mal durchgespielt.

So schauts im Energiefluss aus:

So im Energiefluss-Erweitert:

das sind die DP im Erweitert:

fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerLoad.value --> der Verbrauch ist negativ
fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerFeedIn.value --> Netzverbrauch positiv -- Netzeinspeisung negativ
fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerBattCharge.value --> negativ Laden -- positiv Entladen

kann man hieraus etwas erkennen, was ich falsch mache?

{
    "basic": {
        "enable_grid": false,
        "enable_animation": true,
        "enable_area_catch": true,
        "enable_config_icon": true,
        "enable_last_id": false,
        "enable_icon_proxy": false,
        "enable_low_performance": false,
        "enable_ds_autocomplete": false,
        "enable_show_coordinates": true,
        "tourVisited": true,
        "height": 540,
        "width": 628,
        "animation_timer": 1000,
        "background_color": "",
        "styles": "",
        "font": {
            "family": "\"Arial\", sans-serif",
            "size": 20,
            "align": "middle"
        },
        "rect": {
            "height": 100,
            "width": 100,
            "corners": 10
        },
        "circle": {
            "radius": 50
        },
        "elm": {
            "stroke_width": 5,
            "pos_x": 50,
            "pos_y": 50
        },
        "icon": {
            "width": 24,
            "height": 24
        }
    },
    "calculation": {
        "battery": {
            "dod": -1,
            "capacity": -1,
            "percent": -1,
            "charge": -1,
            "charge_prop": true,
            "discharge": 3,
            "discharge_prop": false
        },
        "consumption": {
            "production": [
                0
            ],
            "gridFeed": 6,
            "gridFeed_prop": true,
            "gridConsume": 1,
            "gridConsume_prop": true,
            "batteryCharge": 3,
            "batteryCharge_prop": false,
            "batteryDischarge": 3,
            "batteryDischarge_prop": true
        }
    },
    "animation": {
        "stroke_dasharray": "10 17 10 17 10 72",
        "stroke_width": 6,
        "animation_duration": 2000,
        "stroke_linecap": "round",
        "animation_timing_function": "linear"
    },
    "animation_configuration": {
        "dots": 3,
        "gap": 72,
        "distance": 17,
        "length": 10
    },
    "line": {
        "stroke_width": 8,
        "stroke": "#000000",
        "stroke_linecap": "square"
    },
    "elements": {
        "2": {
            "type": "text",
            "align": "middle",
            "subType": "datasource",
            "id": 2,
            "pos_x": 217,
            "pos_y": 42,
            "color": "none",
            "fill": "rgb(255, 206, 74)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 18,
            "degree": 0,
            "text": "ID 2",
            "unit": "W",
            "source": "0",
            "shadow": "",
            "threshold": 0,
            "convert": false,
            "decimal_places": "0",
            "source_option": -1,
            "source_display": "value",
            "action": "none",
            "calculate_kw": "none",
            "frame": "_overlay",
            "position": 6
        },
        "5": {
            "type": "rect",
            "id": 5,
            "rx": 10,
            "height": 100,
            "width": 150,
            "pos_x": 148,
            "pos_y": 4,
            "fill": "none",
            "color": "rgb(255, 206, 74)",
            "stroke": 2,
            "shadow": "rgba(0,0,0,0.7)",
            "frame": "_overlay",
            "url": "",
            "source": -1,
            "position": 4
        },
        "6": {
            "type": "icon",
            "id": 6,
            "icon": "mdi:solar-panel",
            "width": 24,
            "height": 24,
            "color": "rgba(0, 0, 0, 0.7)",
            "pos_x": 205,
            "pos_y": 6,
            "shadow": ""
        },
        "7": {
            "type": "rect",
            "id": 7,
            "rx": 10,
            "height": 100,
            "width": 100,
            "pos_x": 424,
            "pos_y": 206,
            "fill": "none",
            "color": "rgb(0, 181, 221)",
            "stroke": 2,
            "shadow": "rgba(0,0,0,0.7)",
            "frame": "_overlay",
            "url": "",
            "source": -1,
            "position": 1
        },
        "8": {
            "type": "icon",
            "id": 8,
            "icon": "mdi:battery-high",
            "width": 24,
            "height": 24,
            "color": "rgba(0, 0, 0, 0.7)",
            "pos_x": 80,
            "pos_y": 218,
            "shadow": ""
        },
        "9": {
            "type": "text",
            "align": "middle",
            "subType": "datasource",
            "id": 9,
            "pos_x": 457,
            "pos_y": 254,
            "color": "none",
            "fill": "rgb(0, 181, 221)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 18,
            "degree": 0,
            "text": "ID 9",
            "unit": "W",
            "source": 1,
            "shadow": "",
            "threshold": 0,
            "convert": true,
            "decimal_places": "0",
            "source_option": -1,
            "source_display": "value",
            "action": "none",
            "calculate_kw": "none",
            "frame": "_overlay",
            "position": 2
        },
        "10": {
            "type": "text",
            "align": "middle",
            "id": 10,
            "pos_x": 217,
            "pos_y": 75,
            "color": "none",
            "fill": "rgba(0, 0, 0, 0.7)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 14,
            "degree": 0,
            "text": "Produktion",
            "shadow": "",
            "position": 9
        },
        "11": {
            "type": "text",
            "align": "middle",
            "id": 11,
            "pos_x": 457,
            "pos_y": 288,
            "color": "none",
            "fill": "rgba(0, 0, 0, 0.7)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 14,
            "degree": 0,
            "text": "Verbrauch",
            "shadow": "",
            "position": 8
        },
        "12": {
            "type": "icon",
            "id": 12,
            "icon": "mdi:house-city",
            "width": 24,
            "height": 24,
            "color": "rgba(0, 0, 0, 0.7)",
            "pos_x": 445,
            "pos_y": 218,
            "shadow": ""
        },
        "13": {
            "type": "rect",
            "id": 13,
            "rx": 10,
            "height": 100,
            "width": 100,
            "pos_x": 45,
            "pos_y": 206,
            "fill": "none",
            "color": "rgb(161, 211, 67)",
            "stroke": 2,
            "shadow": "rgba(0,0,0,0.7)",
            "frame": "_overlay",
            "url": "",
            "source": -1,
            "position": 2
        },
        "14": {
            "type": "rect",
            "id": 14,
            "rx": 10,
            "height": 100,
            "width": 100,
            "pos_x": 173,
            "pos_y": 423,
            "fill": "none",
            "color": "rgba(97, 104, 122, 0.7)",
            "stroke": 2,
            "shadow": "rgba(0,0,0,0.7)",
            "frame": "_overlay",
            "url": "",
            "source": -1
        },
        "15": {
            "type": "text",
            "align": "middle",
            "id": 15,
            "pos_x": 96,
            "pos_y": 288,
            "color": "none",
            "fill": "rgba(0, 0, 0, 0.7)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 15,
            "degree": 0,
            "text": "Batterie",
            "shadow": "",
            "position": 6
        },
        "16": {
            "type": "text",
            "align": "middle",
            "subType": "datasource",
            "id": 16,
            "pos_x": 96,
            "pos_y": 254,
            "color": "none",
            "fill": "rgb(161, 211, 67)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 20,
            "degree": 0,
            "text": "ID 16",
            "unit": "W",
            "source": 3,
            "shadow": "",
            "threshold": 0,
            "convert": true,
            "decimal_places": "0",
            "source_option": -1,
            "source_display": "value",
            "action": "none",
            "calculate_kw": "none",
            "frame": "_overlay",
            "position": 1
        },
        "18": {
            "type": "text",
            "align": "middle",
            "subType": "datasource",
            "id": 18,
            "pos_x": 96,
            "pos_y": 272,
            "color": "none",
            "fill": "rgb(161, 211, 67)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 18,
            "degree": 0,
            "text": "ID 18",
            "unit": "%",
            "source": 4,
            "shadow": "",
            "threshold": 0,
            "convert": false,
            "decimal_places": 0,
            "source_option": -1,
            "source_display": "value",
            "action": "none",
            "calculate_kw": "none",
            "frame": "_overlay",
            "position": 5
        },
        "19": {
            "type": "text",
            "align": "middle",
            "subType": "datasource",
            "id": 19,
            "pos_x": 217,
            "pos_y": 464,
            "color": "none",
            "fill": "rgb(97, 104, 122)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 18,
            "degree": 0,
            "text": "ID 19",
            "unit": "W",
            "source": 6,
            "shadow": "",
            "threshold": 0,
            "convert": false,
            "decimal_places": "0",
            "source_option": -1,
            "source_display": "value",
            "action": "none",
            "calculate_kw": "none",
            "frame": "_overlay",
            "position": 0,
            "counter_animation": true,
            "counter_highlight": true
        },
        "20": {
            "type": "icon",
            "id": 20,
            "icon": "mdi:electricity-from-grid",
            "width": 24,
            "height": 24,
            "color": "rgba(0, 0, 0, 0.7)",
            "pos_x": 205,
            "pos_y": 428,
            "shadow": ""
        },
        "21": {
            "type": "text",
            "align": "middle",
            "id": 21,
            "pos_x": 217,
            "pos_y": 498,
            "color": "none",
            "fill": "rgba(0, 0, 0, 0.7)",
            "font_family": "\"Arial\", sans-serif",
            "font_size": 14,
            "degree": 0,
            "text": "Netz",
            "shadow": "",
            "position": 3
        }
    },
    "defs": {
        "path_5_7": {
            "type": "def",
            "id": "path_5_7",
            "d": "M243 105 V 125 A 15 15 0 0 0 258 140 H 439 A 15 15 0 0 1 454 155 V 205",
            "startSlot": "bottom_right",
            "endSlot": "top_left"
        },
        "path_5_13": {
            "type": "def",
            "id": "path_5_13",
            "d": "M203 105 V 125 A 15 15 0 0 1 188 140 H 110 A 15 15 0 0 0 95 155 V 205",
            "startSlot": "bottom_left",
            "endSlot": "top"
        },
        "path_14_7": {
            "type": "def",
            "id": "path_14_7",
            "d": "M243 422 V 399 A 15 15 0 0 1 258 384 H 439 A 15 15 0 0 0 454 369 V 307",
            "startSlot": "top_right",
            "endSlot": "bottom_left"
        },
        "path_5_14": {
            "type": "def",
            "id": "path_5_14",
            "d": "M223 105 V 422",
            "startSlot": "bottom",
            "endSlot": "top"
        },
        "path_13_7": {
            "type": "def",
            "id": "path_13_7",
            "startSlot": "right",
            "endSlot": "left",
            "d": "M146 256 H 423"
        }
    },
    "lines": {
        "line_path_5_7": {
            "type": "line",
            "id": "line_path_5_7",
            "href": "#path_5_7",
            "color": "rgb(0, 0, 0)",
            "position": 1
        },
        "line_path_5_13": {
            "type": "line",
            "id": "line_path_5_13",
            "href": "#path_5_13",
            "color": "rgb(0, 0, 0)",
            "position": 4
        },
        "line_path_14_7": {
            "type": "line",
            "id": "line_path_14_7",
            "href": "#path_14_7",
            "color": "rgb(0, 0, 0)",
            "position": 0
        },
        "line_path_5_14": {
            "type": "line",
            "id": "line_path_5_14",
            "href": "#path_5_14",
            "color": "rgb(0, 0, 0)",
            "position": 3
        },
        "line_path_13_7": {
            "type": "line",
            "id": "line_path_13_7",
            "color": "#000000",
            "href": "#path_13_7",
            "position": 0
        }
    },
    "animations": {
        "anim_path_5_7": {
            "type": "animation",
            "id": "anim_path_5_7",
            "href": "#path_5_7",
            "color": "rgb(255, 206, 74)",
            "threshold": 0,
            "source": 1,
            "animation_properties": "positive"
        },
        "anim_path_5_13": {
            "type": "animation",
            "id": "anim_path_5_13",
            "href": "#path_5_13",
            "color": "rgb(255, 206, 74)",
            "threshold": 0,
            "source": 3,
            "animation_properties": "negative",
            "active_only": false,
            "animation_option": false
        },
        "anim_path_14_7": {
            "type": "animation",
            "id": "anim_path_14_7",
            "href": "#path_14_7",
            "color": "rgb(255, 206, 74)",
            "threshold": 10,
            "source": 1,
            "animation_properties": "negative",
            "animation_option": true
        },
        "anim_path_5_14": {
            "type": "animation",
            "id": "anim_path_5_14",
            "href": "#path_5_14",
            "color": "rgb(255, 206, 74)",
            "threshold": 0,
            "source": "0",
            "animation_properties": "positive",
            "animation_option": true,
            "active_only": true
        },
        "anim_path_13_7": {
            "type": "animation",
            "id": "anim_path_13_7",
            "href": "#path_13_7",
            "source": 3,
            "animation_properties": "positive",
            "animation_option": false,
            "threshold": null,
            "dots": null,
            "duration": null,
            "power": null,
            "animation_type": -1,
            "css_general": "",
            "css_active_positive": "",
            "css_inactive_positive": "",
            "css_active_negative": "",
            "css_inactive_negative": ""
        }
    },
    "icons": {},
    "datasources": {
        "0": {
            "source": "fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerPV.value",
            "alias": "Erzeugung",
            "factor": 1
        },
        "1": {
            "source": "fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerLoad.value",
            "alias": "Einspeisung/Verbrauch",
            "factor": 1
        },
        "3": {
            "source": "fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerBattCharge.value",
            "alias": "Speicher",
            "factor": 1
        },
        "4": {
            "source": "fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.BattSOC.value",
            "alias": "Speicher %",
            "factor": 1
        },
        "6": {
            "source": "fronius-solarweb.0.6f41428b-0208-4f01-ab38-c11b57543b46.flowdata.PowerFeedIn.value",
            "alias": "Netz",
            "factor": 1
        }
    }
}

[hotspot_2]

Hallo, ich habe bei mir über den Menüpunkt "Datenquellen" einen neuen Datenpunkt hinzugefügt. Hat auch soweit alles geklappt, beim Check ist alles grün.

Wenn ich nun einen bereits vorhanden Datenpunkt kopiere und dann versuche ihm die neue Datenquelle zuzuweisen finde ich die Bezeichnung nicht unter den vorhanden Datenquellen im Auswahlfenster.

Woran kann das liegen? Mache ich da was falsch?

[Homoran]

@hotspot_2 sagte:

Woran kann das liegen

Gespeichert??

Ansonsten mal beides zeigen

[hotspot_2]

Ja, ich habe gespeichert und auch gespeichert und beendet.

Hier fehlt der die Datenquelle "jahr_ofen" in den Datenquellen ist sie aber angelegt.

[Homoran]

@hotspot_2 sagte:

Hier fehlt der die Datenquelle

Bist du da bei ID??
Geh mal in das Feld Datenquelle für Anzeige!

[hotspot_2]

Das war es. Danke, bin ich irgendwie auf dem Schlauch gestanden.