Conditional card based on browser being Chrome?

HI,

testing the cast.homeassistant service, Id like to only show this:

  - type: entities
    title: Cast Control
    show_header_toggle: false
    entities:
      - type: cast
        name: System
        view: 'home_assistant'

      - type: cast
        name: Lights
        view: 'lights'

when browsing in a Chrome browser since my other browsers don’t support the cast api.

16

Can we somehow check for browser in the states?

Maybe with the deviceID from the state-switch?

Yes, I did look into the already, and installed browser-mod. Havent found the way yet though…

Would have hoped to be able to use the user_agent, like Custom Header can. Haven’t found that yet either :wink:
found that:

{{'Chrome' in states.sensor.browser_redacted14a.attributes.userAgent}}

should do it, though that is a verbose way I don’t really like. Maybe I need to combine the device_id with this somehow.

update…

still somewhat confused about how to use this device_id, which is set through browser-mod.

I think I can find the device_id’s of the chrome browser in the states, but setting that as a condition defeats the issue really, because by setting that, I in fact verbosely set the condition. While I simply want to display the card on any device when using Chrome. Selecting the device_id forces me to do the works.

simply said: for any browser, or maybe device_id: this being Chrome, display the card. Not for device_id.1, device_id.2, device_id.3 display the card…

Hope this makes sense.

update2

been going around in circles here, I fear I need @thomasloven to the rescue, please except me tagging you here.

Is there no way I can have a conditional card in the Lovelace configuration that only shows up if displayed in a (any) Chrome browser?

I do know the device_id’s of my current Chrome browsing devices, but would also like it to do so on other, not yet known browsers.

Don’t think I can use the device_id: this since it isn’t in a service like here

can we somehow combine

{{'Chrome' in states.sensor.browser_redacted14a.attributes.userAgent}}

with device_id: this at all?

Hope you can have a look, thanks!

as an update:
no way yet found to show a conditional card on user_agent: Chrome.

would have hoped to be able to use template-entity-row, but that won’t allow a type: Cast I think.

Only option I found now, and that is quite elegant, is to create a dedicated view, and use @mayker s magic Custom Header and its option for an exception based on user_agent, to show or hide that view/tab.

I’ve found a way that uses the HACS custom:button-card (which has now become my favorite display card), and it’s useful for showing different displays based on whether it is chrome or being Goggle Casted or whatnot.

First, on my floorplan or whatever component, I use a button like this (it shows normally on other dashboards and is used to cast to the kitchen but, as so shouldn’t show on the Kitchen Nest Hub or other casted devices):

  - type: custom:button-card
    entity: script.cast_to_kitchen
    template: dont_show_casted
    icon: mdi:alpha-k-circle
    tap_action:
      action: call-service
    style:
      top: 59%
      left: 47%
      transform: translate(-50%,-50%) scale(.7,.7)

This uses the “dont_show_casted” template, which I define with as:

 dont_show_casted:
    styles:
      card:
        - background-color: "rgba(255, 255, 255, 0.3)"
        - --iron-icon-stroke-color: "#969696"
        - border-radius: 50%
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - display: |
            [[[
              return hass.user.name == 'Home Assistant Cast' ? 'none': 'block' 
            ]]]
      icon:
        - width: 42px

(I’ve put in all the other display stuff as it’s really useful for getting nice-looking circular icons, but the key area is the JavaScript that’s executed on the display. This gets run as JavaScript that determines whether a css style tag should be display:none (e.g. hidden) or display:block (e.g. normal). If the current hass user is “Home Assistant Cast” then it sets display:none.

You should be able to put in your own JavaScript to detect if it’s Chrome or render things differently based on different users.