Lovelace template import issues

[tahikib]

I have having troubles getting the lovelace templates to import. I have the require HACS install for button-card, vertical-stack-in-card, and auto-entities,

when I put the yaml files in themes I get error

Configuration errors Invalid config for 'frontend' at themes/templates/network_share.yaml, line 19: value should be a string for dictionary value 'frontend->themes->button_network_share->styles', got {'grid': [{'grid-template-areas': '"i n" "i bar" "i state"'}, {'grid-template-columns': '40px auto'}, {'column-gap': '5px'}, {'grid-template-rows': '1fr'}], 'card': [{'color': '#000'}, {'font-size': '1em'}, {'border-style': 'none'}, {'--mdc-ripple-color': 'none'}], 'icon': [{'width': '100%'}], 'img_cell': [{'justify-content': 'start'}], 'name': [{'justify-self': 'start'}], 'custom_fields': {'bar': [{'grid-area': 'bar'}, {'font-size': '0.8em'}, {'padding': '2px 0'}, {'width': '100%'}], 'state'... Invalid config for 'frontend' at themes/templates/network_share.yaml, line 2: value should be a string for dictionary value 'frontend->themes->button_network_share->variables', got {'warning_from_state': 80, 'critical_from_state': 90, 'bar_color_normal': '#69B34C', 'bar_color_warning': '#FAB733', 'bar_color_critical': '#FF4E11', 'bar_color_background': '#E5E6E8'} Invalid config for 'frontend' at themes/templates/network_share.yaml, line 49: value should be a string for dictionary value 'frontend->themes->button_network_share->custom_fields', got {'state': '[[[\n if (isNaN(entity.state)) {\n return \'Unknown\';\n }\n\n function formatBytes(a,b=2){if(!+a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1000));return${parseFloat((a/Math.pow(1000,d)).toFixed(c))} ${["Bytes", "KB","MB","GB","TB","PB","EB","ZB","YB"][d]}}\n\n var free = parseInt(entity.attributes.free);\n var used = parseInt(entity.attributes.used);\n\n var spaceFree = Math.max(0, free * 1000);\n var spaceTotal = (free+used) * 1000;\n\n return... Invalid config for 'frontend' at themes/templates/simple_bar.yaml, line 18: value should be a string for dictionary value 'frontend->themes->button_simple_bar->styles', got {'grid': [{'grid-template-areas': '"n bar s"'}, {'grid-template-columns': 'auto 1fr auto'}, {'grid-template-rows': 'auto'}], 'card': [{'color': '#000'}, {'font-size': '1em'}, {'margin': '5px 0'}, {'padding': 0}, {'border-style': 'none'}, {'--mdc-ripple-color': 'none'}], 'name': [{'text-align': 'left'}, {'min-width': '[[[ return variables.name_padding ]]]'}], 'state': [{'font-weight': 500}, {'text-align': 'right'}, {'min-width': '[[[ return variables.state_padding ]]]'}]} Invalid config for 'frontend' at themes/templates/simple_bar.yaml, line 37: value should be a string for dictionary value 'frontend->themes->button_simple_bar->custom_fields', got {'bar': '[[[\n let pctUsed = (isNaN(entity.state)) ? 100 : (100*(entity.state / variables.max_value));\n let barColor = variables.bar_color_normal;\n \n barColor = (pctUsed > variables.warning_from_state ) ? variables.bar_color_warning : barColor;\n barColor = (pctUsed > variables.critical_from_state ) ? variables.bar_color_critical : barColor;\n barColor = (isNaN(entity.state)) ? variables.bar_color_background : barColor;\n \n return<div style="background-color:${variables.bar_colo... Invalid config for 'frontend' at themes/templates/simple_bar.yaml, line 4: value should be a string for dictionary value 'frontend->themes->button_simple_bar->variables', got {'name_padding': '50px', 'state_padding': '50px', 'max_value': 100, 'warning_from_state': 50, 'critical_from_state': 80, 'bar_color_normal': '#69B34C', 'bar_color_warning': '#FAB733', 'bar_color_critical': '#FF4E11', 'bar_color_background': '#E5E6E8'} Invalid config for 'frontend' at themes/templates/unraid_disk.yaml, line 19: value should be a string for dictionary value 'frontend->themes->button_unraid_disk->tap_action', got {'action': "[[[\n return (entity.attributes.transport) ? 'more-info' : 'none';\n]]]\n"} Invalid config for 'frontend' at themes/templates/unraid_disk.yaml, line 24: value should be a string for dictionary value 'frontend->themes->button_unraid_disk->styles', got {'card': [{'padding': 0}, {'padding-top': '2px'}, {'color': '#000'}, {'font-size': '1em'}, {'border-radius': 'unset'}, {'--mdc-ripple-color': 'none'}, {'background-color': "[[[\n // Server is offline\n if (variables.connectivity_entity !== '' && isNaN(states[variables.connectivity_entity].state)) {\n return variables.color_disk_unavailable;\n }\n\n // Define temperature ranges\n let activeTempRange = [variables.max_temp_normal_ata, variables.max_temp_warning_ata]\n \n if (entity.at... Invalid config for 'frontend' at themes/templates/unraid_disk.yaml, line 2: value should be a string for dictionary value 'frontend->themes->button_unraid_disk->variables', got {'connectivity_entity': '', 'max_temp_normal_ata': 40, 'max_temp_warning_ata': 45, 'max_temp_normal_nvme': 50, 'max_temp_warning_nvme': 60, 'color_disk_empty': 'transparent', 'color_disk_standby': '#D2D2D2', 'color_disk_unavailable': '#F2F2F2', 'color_disk_eror': '#FF4E11', 'color_temp_normal': '#69B34C', 'color_temp_warning': '#FAB733', 'color_temp_critical': '#FF4E11'} Invalid config for 'frontend' at themes/templates/unraid_disk.yaml, line 99: value should be a string for dictionary value 'frontend->themes->button_unraid_disk->custom_fields', got {'icon': "[[[\n if (entity.attributes.color) {\n if (entity.attributes.color.startsWith('yellow')) { return '⚠'; }\n else if (entity.attributes.color.startsWith('red')) { return '✖'; }\n }\n else {\n return '?';\n }\n]]]\n", 'temp': "[[[\n if (entity.state !== 'unknown' && entity.attributes.size > 0) return ${entity.state}°C;\n]]]\n", 'info': '[[[\n function formatBytes(a,b=2){if(!+a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1000));return...`

Is is possible to give some instructions on how to setup the Home Assistant part?

I have this setup in unraid and it is reporting to MQTT server. I see the entities in MQTT, I cannot get any of the cards in the server example to work.

[IDmedia]

Oh, can you try to install card-mod as well and report back if that solves it? I may have forgotten to add that to the list of requirements. :)

https://github.com/thomasloven/lovelace-card-mod

[tahikib]

I have place frontend: extra_module_url:

• /www/community/lovelace-card-mod/card-mod.js in the config with no change.

I also copied out the buttom_simple_bar.yaml code out and place it in with the code.

I get this when I try to import the yaml

[IDmedia]

The first screenshot tells you that Home Assistant can't find the button-card templates. I see that I might have forgot some info in the docs:

1. Make sure that /config/lovelace/templates/button_card/ contains:

   network_share.yaml
   simple_bar.yaml
   unraid_disk.yaml

2. Make sure you have this in your ui-lovelace.yaml file (tells button-card where to find the templates):

   button_card_templates: !include_dir_merge_named lovelace/templates/button_card

[tahikib]

I don't have a ui-lovelace.yaml or can't find it.

[IDmedia]

I don't have a ui-lovelace.yaml or can't find it.

"In your configuration folder if you’re using YAML mode. Most folks won’t be, so you’ll use the raw UI config editor."

I use YAML-mode myself. But you should be able to just add it to your dashboard and it should work. If not check the button-card documentation. I'm closing this issue because it's more about how to configure button-card then about my code. Please open a new issue if you have other issues.