Lovelace Entities not showing up in Android Companion App

Mobile Apps Home Assistant Companion for Android
1

After much tinkering, I was able to add a similar fitbit custom card to this one here (https://sharethelove.io/picture-elements-cards/fitbit-card). After the latest Home Assistant Upgrade, the custom:hui-markdown-card section stopped working on my desktop, so I added my name as part of the background png.

The big problem, though, is that the cards do not show up in the companion app in my custom tab. when I load that tab in the app, I get the message “Unable to connect to Home Assistant”. If press “Wait”, I can edit the dashboard and see the placeholder, where I can edit the code.

This works without issue if I access this dashboard from chrome on my phone

Also, the icon color definition is not working (default color and I am not using any themes, yet)

Any advice would be appreciated.

type: picture-elements
elements:
  - type: 'custom:circle-sensor-card'
    entity: sensor.ste_weight_loss
    max: 117
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: loss
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    style:
      top: 5%
      left: 80%
      width: 4em
      height: 4em
      transform: none
  - type: 'custom:circle-sensor-card'
    entity: sensor.ste_fitbit_steps
    max: 10000
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: steps
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    color_stops:
      '1': '#09C7E8'
      '10000': '#0BDF0E'
    style:
      top: 70%
      left: 5%
      width: 4em
      height: 4em
      transform: none
  - type: 'custom:circle-sensor-card'
    entity: sensor.fitbit_ste_floors
    max: 10
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: floors
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    color_stops:
      '1': '#09C7E8'
      '10': '#0BDF0E'
    style:
      top: 70%
      left: 24%
      width: 4em
      height: 4em
      transform: none
  - type: 'custom:circle-sensor-card'
    entity: sensor.fitbit_ste_distance
    max: 10
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: miles
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    color_stops:
      '1': '#09C7E8'
      '10': '#0BDF0E'
    style:
      top: 70%
      left: 43%
      width: 4em
      height: 4em
      transform: none
  - type: 'custom:circle-sensor-card'
    entity: sensor.ste_fitbit_calories
    max: 3500
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: cals
    shadow: true
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    color_stops:
      '1': '#09C7E8'
      '3000': '#0BDF0E'
    style:
      top: 70%
      left: 62%
      width: 4em
      height: 4em
      transform: none
  - type: 'custom:circle-sensor-card'
    entity: sensor.fitbit_ste_minutes_very_active
    max: 30
    min: 0
    stroke_width: 15
    gradient: true
    fill: '#125054'
    name: active
    units: ' '
    font_style:
      font-size: 1.1em
      font-color: white
      text-shadow: 2px 2px black
    color_stops:
      '1': '#09C7E8'
      '30': '#0BDF0E'
    style:
      top: 70%
      left: 80%
      width: 4em
      height: 4em
      transform: none
  - type: state-icon
    entity: sensor.fitbit_ste_weight
    title: Weight
    style:
      left: 3%
      top: 7%
      '--iron-icon-fill-color': '#09C7E8'
      transform: none
  - type: state-label
    entity: sensor.fitbit_ste_weight
    title: Weight
    style:
      left: 12%
      top: 8%
      color: white
      transform: none
  - type: state-icon
    entity: sensor.fitbit_ste_bmi
    title: BMI
    style:
      left: 31%
      top: 7%
      '--iron-icon-fill-color': '#09C7E8'
      transform: none
  - type: state-label
    entity: sensor.fitbit_ste_bmi
    title: BMI
    style:
      left: 40%
      top: 8%
      color: white
      transform: none
  - type: state-icon
    entity: sensor.fitbit_ste_body_fat
    title: Body Fat
    style:
      left: 59%
      top: 7%
      '--iron-icon-fill-color': '#09C7E8'
      transform: none
  - type: state-label
    entity: sensor.fitbit_ste_body_fat
    title: Body Fat
    style:
      left: 67%
      top: 8%
      color: white
      transform: none
  - type: state-icon
    entity: sensor.fitbit_ste_resting_heart_rate
    title: Resting HR
    style:
      left: 3%
      top: 21%
      '--iron-icon-fill-color': red
      transform: none
  - type: state-label
    entity: sensor.fitbit_ste_resting_heart_rate
    title: Resting HR
    style:
      left: 12%
      top: 22%
      color: white
      transform: none
image: 'https://xxx.xxx.xxx.xxx:8123/local/local/lovelace/ste_fitbit_card_1.png'
2

if it works in chrome for android there are only 2 things to do. First is to check that Android System Webview is up to date. Second is to file an issue with the custom card developer. Third is to try to do what you are trying to achieve without a custom card. If the issue still exists then it might be a front end issue. Also you can try to clear data in the app to see if that works.

1 Like
3

So, I tried this advice, and it still didn’t work (contacting the developer does not seem to be an option as there are multiple issues that have not been addressed in new code and suggested changes had to be made manually), but you had me thinking and that did lead to the solution.

The main card is not a custom card. It is a picture-elements card, so it should have worked no problem. So, I took the following steps:

  1. Tried the demo Picture Elements card and that worked.
  2. Tried the picture elements card and changed the picture to my hosted file
    a. Worked on desktop, android chrome browser, did not work on home assistant companion android app
  3. Tried the custom circle-sensor card with a known good sensor
    a. worked in all instances

So, I knew the picture elements card itself was at least contributing to the issue. I’m using SSL, so chrome could connect through internal and external ports no problem. However, the companion app is only connected through the external DDNS (due to some limitation of google I have read). My hosted file used my internal IP as the host in the yaml. I changed it to the external address and it fixed it.

It has been over 20 years since I’ve done any programming, so I should have gone back to the basics of testing the individual components. I spent a couple of hours last night looking at it, updating my phone, clearing cache and restarting before posting here.

Thanks for the guidance. This newcomer appreciates it.

So, the solution was using the external host as the IP address for hosted files instead of the internal IP if you want to be able to see the cards (or files) remotely.

1 Like