Cant Install clock view

[brunomoreirab]

Hi all! This is my first time posting here, so please let me know if I'm doing anything wrong.

I'm following the tutorial (wiki + videos) to install the View Assist on a Galaxy Tablet that I don't use anymore. I'm even using the exact same names so I don't mess anything up. Nevertheless, I'm having problems when I try to install the clock view. I'm getting a weird error when I paste the clock code (which I copied from the Wiki) into the Custom-Button Card.

I would appreciate any help, and congratulations to Dinki for the project! It's amazing.

Error:

Here follows the full error:

ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.st...' tap_action: action: call-service service: python_script.set_state service_data: entity_id: '[[[ return variables.var_assistsat_entity ]]]' mode: hold type: custom:button-card group_expand: false hold_action: action: call-service service: switch.toggle service_data: entity_id: '[[[ return variables.var_mic_switch ]]]' double_tap_action: action: call-service service: python_script.set_state service_data: entity_id: '[[[ return variables.var_assistsat_entity ]]]' mode: normal layout: vertical size: 40% color_type: icon show_name: false show_state: false show_icon: false show_units: true show_label: false show_entity_picture: false show_live_stream: false card_size: 3 variables: assist_group: group.viewassist_satellites var_weather_entity: weather.forecast_home use_24_hour_time: true default_satellite: |- [[[ return hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.type === "view_audio") ]]]
var_current_time: | [[[ if (variables.use_24_hour_time) { var options = { hour: "2-digit", minute: "2-digit", hour12: false }; } else { var options = { hour: "numeric", minute: "2-digit" };
} return new Date().toLocaleTimeString([], options).replace("AM","").replace("PM",""); ]]] var_date_short: | [[[
const options = { weekday: "short", month: "short", day: "numeric", }; return new Date().toLocaleDateString([], options); ]]] var_date_long: | [[[ const options = { weekday: "long", month: "long", day: "numeric", year: 'numeric' }; return new Date().toLocaleDateString([], options) ]]] var_assistsat_entity: |- [[[ return hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; ]]] var_assisting: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var micdevice = hass.states[assistbid].attributes.mic_device; var micstate = hass.states[micdevice].state; var assisting = micstate.includes("start"); return ${assisting} ]]] var_mic_device: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var micdevice = hass.states[assistbid].attributes.mic_device; var micdevice = micdevice.replace("sensor","switch").replace("stt","mic");
return ${micdevice} ]]] var_mic_mute: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var micdevice = hass.states[assistbid].attributes.mic_device; var micdevice = micdevice.replace("sensor","switch").replace("stt","mic");
var micstate = hass.states[micdevice].state; return ${micstate} ]]] var_mic_switch: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var micdevice = hass.states[assistbid].attributes.mic_device; var micswitch = micdevice.replace("sensor","switch").replace("stt","mic");
return ${micswitch} ]]]
var_mediaplayer_device: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var mediadevice = hass.states[assistbid].attributes.mediaplayer_device; return ${mediadevice} ]]]
var_mediaplayer_mute: |- [[[ var assistbid = hass.states[variables.assist_group].attributes.entity_id .find((eid) => hass.states[eid].attributes.browser_id === localStorage.getItem("browser_mod-browser-id")) ?? variables.default_satellite; var mediadevice = hass.states[assistbid].attributes.mediaplayer_device; var mediaplayerstate = hass.states[mediadevice].attributes.is_volume_muted; return ${mediaplayerstate} ]]] var_title: '[[[ return states[variables.var_assistsat_entity].attributes.title; ]]]' var_message: '[[[ return states[variables.var_assistsat_entity].attributes.message; ]]]' var_image: '[[[ return states[variables.var_assistsat_entity].attributes.image; ]]]' var_font_size: >- [[[ return states[variables.var_assistsat_entity].attributes.message_font_size; ]]] var_weather_temperature: |- [[[ return (states[variables.var_weather_entity].attributes.temperature + '°');
]]]
var_weather_icon: |- [[[ const weatherIconsDay = { "clear-night": "mdi:weather-night", "cloudy": "mdi:weather-cloudy", "dust":"mdi:weather-dust", "fog": "mdi:weather-fog", "hail": "mdi:weather-hail", "hazy": "mdi:weather-hazy", "hurricane": "mdi:weather-hurricane", "lightning": "mdi:weather-lightning", "lightning-rainy": "mdi:weather-lightning-rainy", "partlycloudy": "mdi:weather-partly-cloudy", "partly-lightning": "mdi:weather-partly-lightning", "partly-rainy": "mdi:weather-partly-rainy", "partly-snowy": "mdi:weather-partly-snowy", "partly-snowy-rainy": "mdi:weather-partly-snowy-rainy", "pouring": "mdi:weather-pouring", "rainy": "mdi:weather-rainy", "snowy": "mdi:weather-snowy", "snowy-heavy": "mdi:weather-snowy-heavy", "snowy-rainy": "mdi:weather-snowy-rainy", "sunny": "mdi:weather-sunny", "tornado":"mdi:weather-tornado", "windy": "mdi:weather-windy", "windy-variant": "mdi:weather-windy-variant", }; const weatherIconsNight = { ...weatherIconsDay, clear: "mdi:weather-night", sunny: "mdi:weather-night", partlycloudy: "mdi:weather-night-partly-cloudy", }; var condition = states[variables.var_weather_entity].state; if (states['sun.sun'] === 'above_horizon') { var weather_icon = weatherIconsDay[condition]; } else { var weather_icon = weatherIconsDay[condition]; }

  if (typeof(weather_icon) === 'undefined') { 
    var weather_icon = "mdi:help" 
  }   
  return `${weather_icon}` 
]]]

background: /local/viewassist/pinkbluesky.jpg clockcardversion: 1.0.0 triggers_update: all aspect_ratio: 2/1 styles: grid:

• grid-template-areas: | "title status"
  "message message" "assist assist"
• grid-template-rows: min-content 4fr min-content
• grid-template-columns: 1fr 1fr
• row-gap: .5rem
• grid-template-areas: | "title status"
  "time time" "date date" "assist assist"
• grid-template-rows: min-content min-content min-content min-content
• grid-template-columns: 1fr 1fr card:
• min-height: 100vh
• background-color: '#059bf1'
• background-size: cover
• border-radius: 0px
• overflow: hidden
• color: white
• font-family: '"Roboto", sans-serif'
• font-weight: 300
• background: '[[[ return center / cover no-repeat url(${variables.background}) ]]]'
• background-size: cover custom_fields: title:
  • justify-self: start
  • align-self: start
  • z-index: 2
  • font-size: 200%
  • font-weight: 400
  • width: max-content
  • margin-left: 2%
  • margin-top: '-5%' status:
  • justify-self: end
  • align-self: start
  • z-index: 2
  • font-size: 200%
  • font-weight: 400
  • width: max-content
  • margin-top: '-10%' assist:
  • justify-self: end
  • height: 10px
  • position: absolute
  • width: 100%
  • z-index: 2
  • top: 95%
  • animation: >- [[[ if (variables.var_assisting == "true") return "pulse 2s infinite"; else return "" ]]]
  • height: 10px time:
  • justify-self: center
  • z-index: 2
  • font-size: 2000%
  • font-weight: bold
  • position: absolute
  • color: white date:
  • justify-self: center
  • align-self: center
  • z-index: 2
  • font-size: 500%
  • width: max-content
  • position: absolute
  • top: 75% night:
  • position: absolute
  • min-height: 200%
  • width: 200%
  • backdrop-filter: brightness(10%)
  • overflow: hidden
  • display: >- [[[ if (hass.states[variables.var_assistsat_entity].attributes.mode === "night") return "block"; else return "none"; ]]]
  • z-index: 3 extra_styles: | @keyframes pulse { 0%, 100% { background-color: #f56a3f; } 50% { background-color: #9e42b0; } }
    custom_fields: assist: '' title: card: type: custom:button-card icon: '[[[ return variables.var_weather_icon ]]]' name: '[[[ return variables.var_weather_temperature ]]]' tap_action: action: navigate navigation_path: /dashboard-viewassist/weather styles: card:
    • background-color: transparent
    • border-width: 0px
    • width: 50%
    • margin-left: 5%
    • margin-top: '-5%' grid:
    • grid-template-areas: '"i n"'
    • grid-template-rows: min-content min-content name:
    • font-size: 400%
    • color: white icon:
    • width: 80%
    • color: white status: card: type: custom:button-card styles: grid:
    • grid-template-areas: | "mediaplayer mic hold dnd"
    • grid-template-rows: min-content
    • grid-template-columns: 1fr 1fr 1fr 1fr card:
    • background-color: transparent
    • border-width: 0px custom_fields: mediaplayer:
      • position: relative
      • display: >- [[[ if (variables.var_mediaplayer_mute === "true") return "block"; else return "none"; ]]] mic:
      • position: relative
      • display: >- [[[ if (variables.var_mic_mute === "off") return "block"; else return "none"; ]]] hold:
      • position: relative
      • display: >- [[[ if (hass.states[variables.var_assistsat_entity].attributes.mode === "hold") return "block"; else return "none"; ]]]
        dnd:
      • position: relative
      • display: >- [[[ if (hass.states[variables.var_assistsat_entity].attributes.do_not_disturb === true) return "block"; else return "none"; ]]]
        custom_fields: mediaplayer: card: type: custom:button-card icon: mdi:volume-off show_name: false color_type: card styles: card:
        • background-color: transparent
        • border-width: 0px icon:
        • color: white
        • height: 90% tap_action: action: call-service service: media_player.volume_mute service_data: entity_id: '[[[ return variables.var_mediaplayer_device ]]]' is_volume_muted: false mic: card: type: custom:button-card icon: mdi:microphone-off show_name: false color_type: card styles: card:
        • background-color: transparent
        • border-width: 0px icon:
        • color: white
        • height: 90% tap_action: action: call-service service: homeassistant.turn_on service_data: entity_id: '[[[ return variables.var_mic_device ]]]' hold: card: type: custom:button-card icon: mdi:hand-back-left show_name: false color_type: card styles: card:
        • background-color: transparent
        • border-width: 0px icon:
        • color: white
        • height: 90% tap_action: action: call-service service: python_script.set_state service_data: mode: normal entity_id: '[[[ return variables.var_assistsat_entity ]]]' dnd: card: type: custom:button-card icon: mdi:minus-circle show_name: false color_type: card styles: card:
        • background-color: transparent
        • border-width: 0px icon:
        • color: white
        • height: 90% tap_action: action: call-service service: python_script.set_state service_data: do_not_disturb: false entity_id: '[[[ return variables.var_assistsat_entity ]]]' time: '[[[ return variables.var_current_time ]]]' date: '[[[ return variables.var_date_short ]]]' night: . template:
      • variable_template
      • body_template state: [] lock: enabled: false duration: 5 unlock: tap

[dinki]

Hey there! Welcome to View Assist. The things to check here will be your View Assist device configuration and that you created the VA group in YAML and not as a helper. Also, it is way faster to troubleshoot in Discord if that option is available and convenient for you. Can troubleshoot here of course but you'll probably get additional help from others and quicker on Discord.

[dinki]

Resolved in discord. Problem was with device configuration naming of timer. Simple fix and now user is moving forward. Rock on!

[loryanstrant]

I've got this same problem and am not on Discord. What was the resolution for the naming of the timer? I created the device config & VA group in YAML.

I did however create a single timer called: timer.viewassist_study via the UI as that's what I presumed needed to be done based on this line in the documentation:

A timer helper device (eg timer.viewassist-livingroom) must be created for each VA satellite of type "view_audio" or "view_only".

Where I'm a bit confused is that I chose to configure the stream as "audio_only". What should I be doing for the naming of the timer in that instance?

[dinki]

Yes I can see where that could be confusing. I'm talking about the VA device itself. VA support satellites with displays and audio only (ESPHome devices).

To your problem, more than likely this is being caused by naming of the sensors in your configuration. Know that Home Assistant (HA) doesn't like dashes in the actual entity names and converts them to underscores. It will, however, allow them in the display name so that makes things harder to catch. What you show above in my example is definitely not a valid name. I will update the wiki.

What I suggest is go into dev tools -> states and filter by the entity names from your VA config and make sure all are valid. If you have any HA entities that contain dashes then you will note a problem. The Browser Mod I'd can have dashes.

Other that, be sure that your group is defined by YAML and check that your VA devices are listed. If all else fails, post your YAML for VA device config and group. Use the markdown format to make it easier to read.

[loryanstrant]

All good, I set it back to "view_audio" and the other related areas to the same and the clock works fine now.

[changeling]

I'm experiencing the same issue, and can't find anything with dashes. Any suggestions on debugging? If it helps, I'll gladly post my YAML. But I'd love any tips for debugging myself. (It's super annoying that the ButtonCardJSTemplateError truncates. Is that a ButtonCard issue, or a JS issue or an HA issue?)

[dinki]

Hey @changeling . Sorry to hear you are having some issues. You are right about the truncation being annoying. I am not sure where the problem lies but it would definitely make it easier to determine where the problem lies. I am planning to rewrite a lot of this code and perhaps in doing that I'll find better methods.

Try going through these troubleshooting tips: https://github.com/dinki/View-Assist/wiki/View-Assist-device-configuration#troubleshooting-problems

Short of that, I can help here but really the best place is on our Discord server where other users and myself can help in what will probably be a quicker manner: https://discord.com/invite/3WXXfGAf8T