Fullscreen images (cameras, weather radars) on click for HADashboard

Third party integrations HADashboard
1

For those who are looking for fullscreen images on HADash, I made a little hack.You just need to add short code to variables.yaml in your skin definiton folder.
You can set two options:

// set timeout in sec to auto hide fullscreen mode, 0 to stay untill you click again
  ihRetainTimeout = 30,
// based on widget name (be carefull as non alfa letters are replaced with '-'; leave empty [] for all images with 'img-frame' class
  ihIdKeywords = ['cam', 'radar'];

here is code: Gist

2 Likes
2

Nice! Thanks for that. If anyone else is wondering, just copy/create the fullcode.js file (from git) in the same folder as the variable.yaml file.

1 Like
3

Can you explain more? Do I need both files (variables.yaml and fullcode.js) located in the appdaemon folder somewhere? I’m running HassOS with the AD add-on and I only have the following folders in my config directory.

image

4

you need to create a custom skin.
https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skins
https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development

that means:

  1. create a dir called custom_css
  2. in that dir create a subdir with your skinname
  3. copy the both files from the gist to that subdir
  4. find a file dashboard.css that has the settings that you like (default can be found here: https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default) and copy that also to the subdir
  5. make sure that the files have the right filerights (appdaemon needs full control over those files
  6. from that moment on add ?skin=skinname to the url that you normally use to go to the dashboard
1 Like
5

Thank you! I’ll give that a try as I really need that ‘pop-up’ feature for the camera widget to be functional and with a high WAF! :slight_smile:

6

the best and easiest way for that is to use appdaemon or an automation to show a dashboard with a fullscreen camera.
https://appdaemon.readthedocs.io/en/latest/AD_API_REFERENCE.html#dash-navigate
https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#external-commands

that way you can check for motion from any sensor, or a door opening or any event and automaticly all your dashboards will show the chosen dashboard for a chosen amount of time.

7

Thanks, that might be even easier. Strangely, I had already created a dash button to give me a fullscreen image so I don’t know why I didn’t think of using a HA automation to call that.

8

:slight_smile:
the other easy way is to add a navigate button to that same dashboard.

this extra piece of code is only saving 1 widgetspace (which can be helpfull for some people, but overkill for others.

9

Any chance you could share an example API call from HA to call a dash? I had one in Postman a while ago it seems but I overwrote it accidentally.

10

you dont need api

in this link Andrew did write down how you simply can use a script in HA.

because i use appdaemon apps i dont have any need to call AD from HA, i do it the other way around :wink:

11

I noticed that the maximized image will still allow clicks/presses through to other widgets. Is there a simple way to block that?

12

i dont understand what you mean.
if you got a full size image then there are no other widgets.

so you need to share more about what problem you have.

13

@ReneTode

For some reason, you can still activate the widgets that are behind the fullsize image. It’s as if the image is not fullscreen (even though it visually is).

14

i didnt look at this very old hack.
i guess youll need to change the hack to get the result you want.

a better solution would be to create a dashboard with a fullscreen image and then navigate to that.
or use 1 of the custom camera widgets that are on the forum.

15

@ReneTode

This is unfortunately the most streamline solution available. Navigating to another dashboard is tedious an un-intuitive, and the custom widgets available only work when cameras are added to HA. Using Blueiris, I find it is much more resource effective to simply use an iframe from a currently running window.

I have 9 heavily used tablets around the house, so it’s important to optimize the user experience. This can be difficult with Hadashboard, but I still find it to be the best solution available.

16

then modify your own iframe widget so that it navigates to another dashboard (combine iframe code with navigate code)
for the user it would look the same, but there would be no widgets on the background.

17

@ReneTode

That’s a good idea, but it’s above my head, I don’t code :frowning:

18

then i am afraid you are stuck with this hack for now.
allthough i still would chose for a navigate button below the images.
if you change the colors from the widget and chose the title right, every user would get used to it fast enough.

you could even chose to go full creative and use a dashboard in an iframe to make the button very special.

19

Agreed. I use Wallpanel and navigate takes 2-4 seconds to move to other dashboards. We’ll see if I can find some help on the widget.

20

speed depends on a few things.

  1. do you have recompile on or off (its possible to set recompile only for some cases (first time use, restarts, etc.)
  2. the wifi (hard to influence)
  3. the device loading the dashboard (also hard to influence when you already invested)
  4. the program loading the dashboard (try if chrome or fully are faster)
  5. whats on the dashboard (try a dashboard as clean as possible to see if things on your dashboard effect loading time)
  6. the use of cache (allthough it can also result in problems)

it helps to know where the bottlenecks are, maybe you can optimise, maybe not.