Energy view

[randykramer07]

It would be nice to have a view option for energy.

Including:

• Consumption

• Production

• Solar Energy

• Maybe therefore the lovelace one is usuable (like the power flow card from HACS)

[matt8707]

This is super low priority, since I don't use the energy view myself, I don't have the setup or context needed to develop or test against it.

[tomx101cz]

I think you can do this in the current version using a browser-mod popup. Here is an example to use a service:

                service: |-
                service: browser_mod.popup
                target:
                  entity_id: binary_sensor.tablet_test
                data:
                  dismissable: true
                  title: Energy State
                  autoclose: false
                  content:
                    type: vertical-stack
                    cards:
                      - type: energy-distribution
                        aspect_ratio: 50%
                  size: wide
                  style: |2-
                      --popup-min-width: 40vw;
                      --popup-max-width: 600px;
                      --popup-border-radius: 10px;
                      --popup-padding-x: 10px;
                      --popup-padding-y: 10px;
                      --dialog-backdrop-filter: blur(0.5em) brightness(0.75);

[pimp1310]

I think you can do this in the current version using a browser-mod popup. Here is an example to use a service:

                service: |-
                service: browser_mod.popup
                target:
                  entity_id: binary_sensor.tablet_test
                data:
                  dismissable: true
                  title: Energy State
                  autoclose: false
                  content:
                    type: vertical-stack
                    cards:
                      - type: energy-distribution
                        aspect_ratio: 50%
                  size: wide
                  style: |2-
                      --popup-min-width: 40vw;
                      --popup-max-width: 600px;
                      --popup-border-radius: 10px;
                      --popup-padding-x: 10px;
                      --popup-padding-y: 10px;
                      --dialog-backdrop-filter: blur(0.5em) brightness(0.75);

thats the best hint i ever get!!!

now its possible to show custom popups in Fusion, here light groups and devices with low batteries

[fastxl2024]

@tomaslikar or @pimp1310 What is your config for this? I can't fix it.

[anonymousaxx]

@tomaslikar @pimp1310 your code is not working, do I have to consider anything?

I have the browser_mod service and used it successfully with Matt's first dashboard layout. Adding your code to the service field (or via code editor) still shows the standard light pop-up instead of the browser_mod pop-up. Any help is appreciated.

[tomx101cz]

Make sure to disable “Show more info” in the Fusion button configuration

[jonasjeeliasson]

@tomaslikar I'm trying it out as well but nothing happens. Do you need to specify the target.entity_id and what value should it then have?

I tried this:

- id: 4763180828941
  type: button
  entity_id: media_player.kok_hub
  template:
    service: |-
      service: browser_mod.popup
      data: 
        title: Testar
        content: Hello
  more_info: false

[jonasjeeliasson]

@tomaslikar I'm trying it out as well but nothing happens. Do you need to specify the target.entity_id and what value should it then have?

I tried this:

- id: 4763180828941
  type: button
  entity_id: media_player.kok_hub
  template:
    service: |-
      service: browser_mod.popup
      data: 
        title: Testar
        content: Hello
  more_info: false

Tried registering the device in browser_mod as well and using one of the binary sensors that was created for it but with no luck:

- id: 1933934625909
  type: button
  entity_id: media_player.kok_hub
  template:
    service: |-
      service: browser_mod.popup
      target:
        entity_id: binary_sensor.mbp_arc
      data: 
        title: Testar
        content: Hello
  more_info: false

[tomx101cz]

Sorry, it's hard to tell what's going on - there is too many variables with browser_mod. Sometimes clearing cache will help, but it does not always work consistently. You can try calling the service first via Home Assistant Developer Tab and see if it works that way before using it in a dashboard.

[matt8707]

Just to clarify, browser_mod.popup is not supported in ha-fusion and only works in home assistant frontend, not when exposing port with addon and not when using docker. Discussion https://community.home-assistant.io/t/browser-mod-turn-your-browser-into-a-controllable-device-and-a-media-player/123806/1

[jonasjeeliasson]

Aha, maybe I misunderstood then, looked like the screenshot showed ha-fusion in the background with browser_mod popups. I've already have browser_mod setup and use it heavily in my normal dashboard (which is heavily inspired by Matt's previous nice dashboard :)). But there I use it with the fire-event thingy, but also trying out the service call both of these work (i.e with and without the target):

type: button
name: Test button
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    title: test
    content: test

and

type: button
name: Test button
tap_action:
  action: call-service
  service: browser_mod.popup
  target:
    entity_id: binary_sensor.mbp_arc
  data:
    title: test
    content: test

It would just have been a nice to have until ha-fusion is more prime time ready. I could have put some of the stuff that is missing in these popups in the mean time :)

Other than that, great work! I'll have a beta dashboard with fusion running on the side to follow along with your progress!

[jonasjeeliasson]

Got it working, now I think I understood what you said with "only works in home assistant frontend" :) When I run it through my normal HA frontend (and not through http://url:8099) the popups work!

I.e this works:

- id: 1933934625909
  type: button
  entity_id: media_player.kok_hub
  template:
    service: |-
      service: browser_mod.popup
      data: 
        title: Testar
        content: Hello

[benepixx]

Ive made this in fusion for now, gives a good overview for energy and used the same colours for the icons as the HA power flow card for familiarity. Sure it's not a graph, but it works nicely for what I need it for.

[benepixx]

Hi All, FYI, you can add custom cards to the sidebar using the web page element and creating a new dashboard in HA with the single card you want to display. this is a bit of a gamechanger and I wish id thought of it sooner. see attached power flow in sidebar.

[atomicsp]

@benepixx Im getting browser errors on this, saying HA will not allow the site to be embedded. Is there a specific URL I need to use towards this single card dashboard?

[atomicsp]

@benepixx Im getting browser errors on this, saying HA will not allow the site to be embedded. Is there a specific URL I need to use towards this single card dashboard?

Nvm, got it working. Had to add HACS --> kiosk-mode and add this to the HA config:

http:
  use_x_frame_options: false

Then use the url with "?kiosk" at the end

[sergego84]

Just stumbled upon this and implemented the iframe with energy flow card in my sidebar. Thanks for the tip. However, does anyone know how to make browser_mod to stop showing popups inside the iframe? I have a button in one of the sections that when pressed shows a browser_mod popup. However, the same popup shows in an iframe inside the sidebar.