Bar-Card, auf Windows, iOS in Ordnung, auf Android nicht in Ordnung

Dashboards
1

Hi,

angeregt durch diesen Topic, habe ich mir den Code (danke dafür) von @jayjojayson geschnappt und das für mein IPhone angepasst.
Funktioniert auch, aber während das auf meinem WinPC

ScreenWin
ScreenWin500×198 7.38 KB

und selbst auf meinem IPhone
ScreenIphone
ScreenIphone500×341 11.3 KB

angezeigt wird, bekomme ich auf meinem Android 14, Allnet Prime One Tablett eine Fehlermeldung:
„Custom element does not exist: bar-card“
ScreenAndroid
ScreenAndroid191×290 8.75 KB

Mein code ist dieser:

type: custom:bar-card
name: Iphone 15
positions:
  name: inside
  value: inside
  indicator: "off"
  icon: "off"
unit_of_measurement: "%"
max: 100
height: 25px
severity:
  - color: red
    from: 0
    to: 20
  - color: green
    from: 20
    to: 100
entities:
  - entity: sensor.iphone_14_battery_level
grid_options:
  columns: 12
  rows: 1
visibility:
  - condition: state
    entity: sensor.iphone_14_battery_state
    state: Charging
card_mod:
  style: |
    ha-card {
    }
    #states {
      padding: 16px !important;
    }

Ich habe gelesen, das die Bar-Card seit neuem zickt und z.B. im Visu. Editor einfriert (mir auch schon passiert), Animationen lassen sich auch nicht anwenden usw.
Aber daß das auf einer Plattform läuft und auf anderer nicht ist seltsam ?!
Was könnte das Problem sein?

Gruß Jürgen

2

Moin, hast du testweise mal den Browserverlauf (Cache) gelöscht und dann Fully auf dem iphone neu gestartet? Bei Apple gibt es bestimmt wie bei android auch, die Möglichkeit den Cache der App (Fully Kiosk) zu löschen.

1 „Gefällt mir“
3

Hi, auch nen guten morgen,

Ja, das war tatsächlich das Problem, allerdings aufm Android Tablett, das Iphone hatte kein Problem :grinning:.
Da wäre ich nicht drauf gekommen, ein fettes Danke :+1: !!

Kannst du eventuell noch über diesen Code

type: custom:bar-card
name: Iphone 15
positions:
  name: inside
  value: inside
  indicator: "off"
  icon: "off"
unit_of_measurement: "%"
max: 100
height: 25px
severity:
  - color: red
    from: 0
    to: 20
  - color: green
    from: 20
    to: 100
entities:
  - entity: sensor.iphone_14_battery_level
grid_options:
  columns: 12
  rows: 1
visibility:
  - condition: state
    entity: sensor.iphone_14_battery_state
    state: Charging
card_mod:
  style: |

    ha-card {
    :host {
    {% if is_state('sensor.iphone_14_battery_state','Charging') %}
    animation: filling 5s linear infinite;
    {% endif %}
    --bar-percent: 0 !important;
    }
    @keyframes filling {
    0% {
      --bar-target-percent: 0;
    }
    10% {
      --bar-target-percent: 10%;
    }
    20% {
      --bar-target-percent: 20%;
    }
    30% {
      --bar-target-percent: 30%;
    }
    40% {
      --bar-target-percent: 40%;
    }
    50% {
      --bar-target-percent: 50%;
    }
    60% {
      --bar-target-percent: 60%;
    }
    70% {
      --bar-target-percent: 70%;
    }
    80% {
      --bar-target-percent: 80%;
    }
    90% {
      --bar-target-percent: 90%;
    }
    100% {
      --bar-target-percent: 100%;
    }

    #states {
      padding: 16px !important;
    }

schauen? :grimacing:
Dieser sollte das Laden animieren, tut es aber nicht, auf keinem System.

Vielleicht wenn du mal Zeit hast… :upside_down_face:

Gruß Jürgen

1 „Gefällt mir“
4

Mit der Animierung scheint es derzeit Probleme zu geben. Läuft bei mir aktuell auch nicht, es wird nur farbig eingefärbt, aber nicht animiert.

Ich weiß auch noch nicht, warum die Keyframes nicht mehr gesetzt werden, schaue mir das heute Abend nochmal an. Vielleicht finde ich eine Lösung. :slight_smile:

hier so hatte ich es gemacht.

type: custom:bar-card
card_mod:
  style: |
    ha-card {
      border: none !important;
      margin-top: -20px;
      --primary-color: #7bc13c !important;  
    }
    #states {
      padding: 16px !important;
    }  
    bar-card-currentbar {
      border-radius: 3px !important; 
        
      {% if states['switch.ecoflow_river_2_ac_enabled'].state == 'on' %}
      background: linear-gradient(270deg, red, orange, green);
      background-size: 300% 100%;
      animation: gradientShiftNormal 3s linear infinite;
      clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);

      {% elif states['switch.ecoflow_river_2_dc_12v_enabled'].state == 'on' %}
      background: linear-gradient(270deg, red, orange, green);
      background-size: 300% 100%;
      animation: gradientShiftReverse 3s linear infinite;
      clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);

      {% else %}
      background: linear-gradient(to right, darkorange 15%, orange 25%, yellow 50%, green 100%);
      clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);
      {% endif %}
    }                   
    bar-card-backgroundbar { 
      border-radius: 3px !important; 
      background: linear-gradient(to right, darkorange 15%, orange 25%, yellow 50%, green 100%);
      clip-path: inset(0 calc(100% - var(--bar-percent)) 0 0);
    }
    @keyframes gradientShiftNormal {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    @keyframes gradientShiftReverse {
      100% { background-position: 0% 50%; }
      0% { background-position: 100% 50%; }
    }
name: EcoFlow River 2
positions:
  name: inside
  value: inside
  indicator: "off"
  icon: "off"
unit_of_measurement: "%"
max: 100
height: 25px
entities:
  - entity: sensor.ecoflow_river_2_battery_level
5

Hi jayjojayson

Ja genau, von da habe ich den Code für meine Card :grinning:

Das wäre cool, eilt aber nicht, ist ja schließlich Wochenende. :+1:
Hier auch mal das Topic mit der Animation.

Danke und gruß
Jürgen

1 „Gefällt mir“