Trouble installing: Custom element doesn’t exist: landroid-card

[roofburner]

Dear,

I'm trying to install the Barma-lej card, but I'm getting this error: "Custom element doesn’t exist: landroid-card."

I'm using Lovelace in YAML mode.

I have installed your custom repo and it appears in my HACS - Frontend as "Landroid Cloud". Correct?

Here's my file located:

/usr/share/homeassistant# ll www/community/landroid-card/
total 548
drwxr-xr-x 2 root root   4096 Oct  4 21:45 ./
drwxr-xr-x 6 root root   4096 Oct  4 21:45 ../
-rw-r--r-- 1 root root 408647 Oct  4 21:45 landroid-card.js
-rw-r--r-- 1 root root 141830 Oct  4 21:45 landroid-card.js.gz

I included this in my ui-lovelace.yaml:

resources:
  - url: /hacsfiles/landroid-card/landroid-card.js
    type: module

My Landroid Cloud seems to work, as the entity vacuum.mower appears in my Developer Tools

I ran a debug, but it doesn't seem to throw an error on the card setup/usage.

What are my options?

[Barma-lej]

Use HACS please

[roofburner]

I use HACS. I added your repo via https://hacs.xyz/docs/faq/custom_repositories/

[Barma-lej]

You don't need to include in your ui-lovelace.yaml. Can you see the landroid-card in your HACS?

[roofburner]

Yes, I do. It appears in HACS -> Frontend -> Landroid Card. I'm using Lovelace in YAML mode. How do I import the card? I cannot edit the dashboard: "The edit UI is not available when in YAML mode."

[Barma-lej]

Try to force clear browser cache

I cannot edit the dashboard: "The edit UI is not available when in YAML mode."

https://community.home-assistant.io/t/the-edit-ui-is-not-available-when-in-yaml-mode/370290

[roofburner]

I have access my home assistant though a private brower (chrome and firefox). Still no card. How can I be sure the js is loaded?

[roofburner]

I don't know much about Chrome debug (F12) but I don't see the js loaded:

[Barma-lej]

[roofburner]

It look like the js isn't loaded:

[Barma-lej]

I hope do you installed the card?

[roofburner]

I hope you mean this by installing:

I copied this https://github.com/Barma-lej/landroid-card/releases/download/0.2.3/landroid-card.js to www/community/landroid-card/

I included this in ui-lovelace.yaml.

resources:
  - url: /local/community/landroid-card/landroid-card.js
    type: module

I also included the card in ui-lovelace, as I did for my other cards:

view
  - icon: mdi:robot-mower-outline
    title: Landroid
    id: landroid
    cards:
      - type: "custom:landroid-card"
        image: default
        compact_view: false
        show_status: true
        show_name: true
        show_toolbar: true
        entity: vacuum.mower
        stats:
          default:
            - attribute: blades.total_on
              subtitle: Total blade time
              value_template: '{{ as_timedelta((value | float(0) * 60) | string) }}'
            - attribute: blades.current_on
              subtitle: Current blade time
              value_template: '{{ as_timedelta((value | float(0) * 60) | string) }}'
            - attribute: statistics.worktime_blades_on
              subtitle: Work time
              value_template: '{{ as_timedelta((value | float(0) * 60) | string) }}'
            - attribute: statistics.distance
              value_template: '{{ (value | float(0) / 1000) | round(3) }}'
              unit: km
              subtitle: Distance
          mowing:
            - attribute: orientation.yaw
              subtitle: Yaw
              unit: °
            - attribute: orientation.roll
              subtitle: Roll
              unit: °
            - attribute: orientation.pitch
              subtitle: Pitch
              unit: °
        shortcuts:
          - name: Notification
            service: automation.toggle
            icon: mdi:bell
            service_data:
              entity_id: automation.mower_notify_status

[roofburner]

This is the card:

[Barma-lej]

No, it's wrong.

1. Remove folder www/community/landroid-card/
2. Remove

   - url: /local/community/landroid-card/landroid-card.js
   type: module

   from ui-lovelace.yaml

You can use either the HACS method or the manual method

[roofburner]

I'm confused.

I emptied www/community/landroid-card/.

find /usr/share/homeassistant/ -name "landroid-card" -print => gives 0 results.

Where is the landroid-card javascript code now?

find / -name "landroid-card" -print => gives no result

I removed the resources lines. Still the same error.

[Barma-lej]

Reinstall using HACS Then clear cache

[roofburner]

After reinstall:

# find / -name "*landroid-card*" -print
/usr/share/homeassistant/www/community/landroid-card
/usr/share/homeassistant/www/community/landroid-card/landroid-card.js
/usr/share/homeassistant/www/community/landroid-card/landroid-card.js.gz

No resources lines in ui-lovelace.yaml

Have cleard my cache (had to log in everywhere). But, no luck... Getting desperate...

[Barma-lej]

Have a look at this guide

[Barma-lej]

You have to see this line in the "Resources" tab /hacsfiles/landroid-card/landroid-card.js?hacstag=xxxxxxxxx

[Barma-lej]

Can you publish HA log?

[roofburner]

Dear Barma-lej,

I have fixed the issue, thanks to your hint: Resources.

I'm using the Lovelace interface in YAML mode.

When I try to configure resources I get this:

Settings -> Dashboard -> 3dots -> Resources -> Add Resource -> "You are using your dashboard in YAML mode, therefore you cannot manage your resources through the UI. Manage them in configuration.yaml."

I checked my configuration.yaml file, and found this:

lovelace:
  mode: yaml
  resources: !include lovelace/resources/resources.yaml

It seem in that file I already included resources once, but totally forgot!

- url: /local/custom_ui/weather-card/weather-card.js
  type: module
- url: /local/community/lovelace-fold-entity-row/fold-entity-row.js
  type: module
- url: /local/auto-entities.js
  type: module
- url: /local/mini-graph-card-bundle.js?v=0.9.3
  type: module
- url: /local/community/landroid-card/landroid-card.js
  type: module

Thanks a lot!

Kind regards