Is it possible to use browser-mod to expand the collapse attributes on the more-info pop-up, without entirely replacing the standard more-info card? Iām looking for a way to not have to click a second time (on attributes) every time I click for more-info.
1 Like
Edit: I went the route of replacing the sensor with a custom popup as instructed by the readme instead of calling a custom popup on tap action.
Hi! Iāve created a popup that helps read a small chart thatās using ApexCharts card and itās perfect! Well, almost. Anytime someone taps on the header item thatās supposed to open the popup, it of course opens up on all devices. I tried converting it to fire-dom-event, but it seems that ApexCharts card doesnāt support it. Or am I doing something wrong?
Any thoughts on how to get ApexCharts to support local popups? Or maybe I could have a deviceID set dynamically to the device from which the action originated. Has anyone tried that?
Hi all,
Wondering,
Isnāt it possible to have a tap-action just on the image of the picture-elements itself ?
- title: Merc
icon: 'mdi:car-sports'
path: auto
type: custom:grid-layout
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto ## or 4 if you want to be strict about it
grid-template-areas: |
"buttons1 buttons1 "
"picture1 picture1 "
"buttons2 buttons2 "
cards:
- type: custom:button-card
view_layout: buttons1
title : Mercedes GLE350 DE
- type: horizontal-stack
view_layout:
grid-area: picture1
cards:
- type: picture-elements
image: /local/merclogo.png
tap_action: !include popup/mercedes.yaml
hold_action: !include popup/mercedes.yaml
elements:
- type: state-badge
entity: sensor.2_amu_833_fuel_level
title: Fuel level
style:
top: 15%
left: 10%
Should fire up (from other yaml-file) pop-up with more information:
action: fire-dom-event
browser_mod:
command: popup
title: Mercedes
hide_header: true
style:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 90vw;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
}
card:
- type: custom:layout-card
column_num: 3
column_width: [385, 385, 385]
layout: vertical
cards:- type: entities
title: Battery and Range
class: add_header
state_color: true
show_header_toggle: false
entities:
- type: entities
But when I try to click on the image, ... just nothing happens...
Can anyone help ?
Kr,
BartHi! Any idea why none of my configuration.yaml options are having any effect?
Hereās my config:
browser_mod:
prefix: 'browser_'
devices:
9cc935ba-86298435:
name: Browser Casper Chrome
04a8b117-9e734fc8:
name: Browser Kitchen Tablet Chrome
camera: true
c6dd59ba-aedc6250:
name: Browser Samsung Galaxy S10 App
a52afc49-84f07054:
name: Browser Bathroom Tablet Chrome
camera: true
disable:
- all
And here are the devices showing up without aliases despite the ādisable allā option, none of them have camera integrations enabled and none have prefixes (although ādisable allā should eliminate the need for the prefix).
āBrowser Samsung Galaxy S10 Appā seems to have now showed up, but the entities donāt have the alias stillā¦
Iāve tried hard refreshes, closing the apps, restarting home assistantā¦
Hi,
After I upgrade card-mod to 3.1.1, my swipe cards donāt show entities, button- cards, only picture-entity show in browser pop-up window. If I try config without pop-up card, it works fine.
Without pop-up card:
Config:
cards:
- camera_image: camera.utolso_csengetes_csengo
camera_view: live
entity: camera.utolso_csengetes_csengo
type: picture-entity
- camera_image: camera.utolso_csengetes_elso_kamera
camera_view: live
entity: camera.utolso_csengetes_elso_kamera
type: picture-entity
- entities:
- automation.terasz_ventilator_megallitas_120_perc
- entity: timer.terasz_fan
name: IdÅ kikapcsolĆ”sig
type: entities
parameters:
allowTouchMove: true
centeredSlides: true
navigation:
keyboard:
enabled: true
onlyInViewport: true
pagination:
type: progressbar
slidesPerView: auto
spaceBetween: 8
type: custom:swipe-card
With pop-up card:
Config:
ā¦
aspect_ratio: 3/1
color_type: card
entity: binary_sensor.csengettek
layout: vertical
name: CsengÅ
show_last_changed: true
state:
- color: red
icon: mdi:bell
name: Csengettek!
styles:
card:
- animation: blink 2s ease infinite
value: 'on'
- color: '#d4d4d4'
icon: mdi:bell
operator: default
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr 30%
icon:
- width: 70%
label:
- color: gray
- font-size: 10px
- justify-self: start
- padding-left: 10px
- padding-top: 10px
name:
- justify-self: start
- padding-top: 5px
- font-weight: bold
- padding-left: 10px
tap_action:
action: fire-dom-event
browser_mod:
command: popup
service_data: null
card:
card:
cards:
- camera_image: camera.utolso_csengetes_csengo
camera_view: live
entity: camera.utolso_csengetes_csengo
type: picture-entity
- camera_image: camera.utolso_csengetes_elso_kamera
camera_view: live
entity: camera.utolso_csengetes_elso_kamera
type: picture-entity
- entities:
- automation.terasz_ventilator_megallitas_120_perc
- entity: timer.terasz_fan
name: IdÅ kikapcsolĆ”sig
type: entities
parameters:
allowTouchMove: true
centeredSlides: true
navigation:
keyboard:
enabled: true
onlyInViewport: true
pagination:
type: progressbar
slidesPerView: auto
spaceBetween: 8
type: custom:swipe-card
type: custom:mod-card
deviceID:
- this
- dashboard
large: false
title: UtolsĆ³ csengetĆ©s
type: custom:button-card
Has anyone experienced such a mistake?
Thanks
Hi! Any hints as to why my config is not having any effect?
Hi, installed this,
When I press from android phone Browser mod: debug in services, I get device ID
When I press from Windows 10 - Chrome tab Browser mod: debug in services, I get ā¦ nothing (no popup, nada)
EDIT: Ahhh if I have in my browser http://192.168.1.12:8123 it shows all, if I use https://ha.mydomain.com is not showing ā¦
How can I solve this?
p.s.
And donāt understand where to find custom card browser-player , its not there???
Playing with this nice toy, cool on my android phone.
When the android phone screen is on, the HA app is on display is all working (like a popup call for example or the camera),
When the android phone screen is OFF, it will not show the pop-up (need to turn on the screen go to the HA app open t and it shows the pop-up.
Is there anyway to make the android phone turn on and show the popup automatically?
Create an automation/script with Notification Commands to start HA as Activity as the first action and then the popup command as the second action. Keep in mind that itās impossible for HA to unlock your device. If your device is unlocked it will launch the app on the selected lovelage page however with the command.
Your request has nothing to do with browser_mod btw. Thatās not something browser_mod can do on itās own.
you have suggestions on how to do it?
@Klagio see my post above you
service: notify.mobile_app_your_phone_example
data:
message: "command_webview"
title: "/lovelace/home"
This will launch Home Assistant app on your phone and open the dashboard /lovelace/home. Use this with the browser_mod popup service call in a script/automation so it opens the app and shows the popup.
If your goal is to show a camera, you can also just send a snapshot of the camera through notification: Standard Attachments | Home Assistant Companion Docs
1 Like
is it possible to give unique IDās to popups?
Hi all, Iām having some troubles trying to have a popup with custom button-card that have icons that change color dynamically. As I read in some other post, if I press the button it works but to see the color changed I have to close and open again the popup (so the icon is not changing dynamically).
Below my code, a suggestion on how fix this problem would be much appreciated.
type: custom:button-card
template: button-template
name: popup
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
style:
.: |
:host .content {
align: center !important;
margin: 20px !important;
}
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: var(--primary-background-color) !important;
border-radius: 15px;
border-style: solid;
border-color: rgb(55,161,247);
border-width: 1px;
}
card:
type: vertical-stack
cards:
- cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
icon: mdi:power
show_icon: true
show_name: false
size: 90%
styles:
card:
- justify-self: middle
- box-shadow: none
- position: relative
- border-radius: 20px
- width: 40px
- height: 40px
- left: 0px
- top: 0px
- background-color: var(--primary-background-color)
- margin: 0px
icon:
- color: var(--primary-text-color)
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: climate.fan_shim
hvac_mode: 'off'
- type: custom:button-card
icon: mdi:snowflake
show_icon: true
show_name: false
size: 90%
styles:
card:
- justify-self: middle
- box-shadow: none
- position: relative
- border-radius: 20px
- width: 40px
- height: 40px
- left: 0px
- top: 0px
- background-color: var(--primary-background-color)
- margin: 0px
icon:
- color: |
[[[
if (states['climate.fan_shim'].state == 'cool')
return "rgb(55,161,247)";
else
return "var(--primary-text-color)";
]]]
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: climate.fan_shim
hvac_mode: cool
- type: custom:button-card
icon: mdi:fire
show_icon: true
show_name: false
size: 90%
styles:
card:
- justify-self: middle
- box-shadow: none
- position: relative
- border-radius: 20px
- width: 40px
- height: 40px
- left: 0px
- top: 0px
- background-color: var(--primary-background-color)
- margin: 0px
icon:
- color: |
[[[
if (states['climate.fan_shim'].state == 'heat')
return "rgb(251, 183, 65)";
else
return "var(--primary-text-color)";
]]]
- type: custom:button-card
color_type: blank-card
type: horizontal-stack
Thanks
Anyone succeeded to use this great addon with tasker for Android phones/tablets?
My goal is to make the phone RING upon an event, whatever the status of the phone (locked, DND silent and so on)
Possible?
If you use the mobile app you can do it natively with notifications.
Wellā¦ almost, instead of a ringing it can speak using TTS.
Iām trying to get this to work on my Fire Tablet running Fully Kiosk paid version to show the front door camera when the doorbell rings. I can get it to show up on my computer (Chrome) when I run
service: browser_mod.more_info
data:
entity_id: camera.front_door
deviceID:
- ae4aca0d-f29eece9
but not on the tablet.
service: browser_mod.more_info
data:
entity_id: camera.front_door
deviceID:
- fire_tablet
I have activated Settings->Advanced Web Settings->Javascript Interface (PLUS) and Settings->Motion Detection (PLUS)->Enable Visual Motion Detection .
What am I missing here?
Hi guys.
I was wondering, is it possible to have multiple cards in a popup?
Hi all, and thanks for a great card @thomasloven !
Iām running a casting service to a Nest hub, however when I press my button that does the browser mod popout service, the pop up is showing up on my computer and not on the nest. What am I missing? Tried adding the browser.js in resources, but it doesnāt seem to change any behaviour.
Thoughts/ideas?
@thomasloven, Iām getting this error in my log:
Logger: homeassistant.helpers.entity
Source: helpers/entity.py:549
First occurred: 12:10:58 (6 occurrences)
Last logged: 12:10:59
Entity light.14421223_2931a223 (<class 'custom_components.browser_mod.light.BrowserModLight'>) implements device_state_attributes. Please report it to the custom component author.
Entity sensor.14421223_2931a223 (<class 'custom_components.browser_mod.sensor.BrowserModSensor'>) implements device_state_attributes. Please report it to the custom component author.
Entity media_player.e6df632d_98839884 (<class 'custom_components.browser_mod.media_player.BrowserModPlayer'>) implements device_state_attributes. Please report it to the custom component author.
Entity light.e6df632d_98839884 (<class 'custom_components.browser_mod.light.BrowserModLight'>) implements device_state_attributes. Please report it to the custom component author.
Entity sensor.e6df632d_98839884 (<class 'custom_components.browser_mod.sensor.BrowserModSensor'>) implements device_state_attributes. Please report it to the custom component author.