Rescale for alternate resolutions

[epruesse]

I've got a collection of (older) devices running the WallPanel app to display the dashboards having various resolutions and aspect ratios. Maintaining different dash-es for each of them is rather tedious.

Would there be a way to simply rescale the display to whatever is supported by the device? I.e. calculate the tile size from the number of rows/columns given the device's display size?

[epruesse]

Modifying the cached xxx_init.js by hand, I did a proof of concept:

//    content_width = (122 + 5) * 10 + 5;
//    $('.gridster').width(content_width)
    row_height = (window.innerHeight - 5) / 6 - 5;
    col_width = (window.innerWidth - 5) / 10 - 5;
    $(".gridster ul").gridster({
        widget_margins: [5, 5],
       widget_base_dimensions: [col_width, row_height],
        avoid_overlapped_widgets: true,
        shift_widgets_up: false,
    }).data('gridster').disable();

This works. It doesn't look perfect because images don't get scaled, etc., but at least it shows everything.

[epruesse]

Is there a way to customize the template_dir?

[ReneTode]

there are several ways to go to rescale. first off, the dashboard expects that a browser does the scaling (which doesnt work with some outdated devices) second you can rescale in any dashboard by just changing widget_dimensions. (and thats way better then adjusting init.js) third you can chose to create your own skin.

i dont know why you want to change any from the original files from appdaemon, because its not needed. maybe you want to look at the docs? https://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#

[epruesse]

first off, the dashboard expects that a browser does the scaling (which doesnt work with some outdated devices)

I've tested >30 combinations of devices with current Android, iOS, Linux, macOS and various current browsers on each. It doesn't work anywhere. The best I get is Safari on iOS, which will rescale if I pinch, but will not adjust to a different aspect ratio.

second you can rescale in any dashboard by just changing widget_dimensions. (and thats way better then adjusting init.js)

That means creating an extra dash for each type of device, because all of them have different screen sizes. It also means I cannot use self.dash_navigate, because that will point all viewers to the same, new dash.

third you can chose to create your own skin.

How would you suggest doing that? I can't see how CSS would be able to set sizes that are not overridden by gridster again.

Isn't it much easier to just grab the size of the local screen at page load, calculate how large the tiles must be to acomodate an nxm grid, and set them accordingly? The way the grid is configured from within HADashboard, anything but fixed grid dimensions would be very hard to control anyway.

As a feature, I'd just enable this behavor if the widget_dimensions are not specified, of if they are set to a keyword. Technically, gridster can do "responsive layout" itself (auto keyword), but for HADashboard the "user changes size of viewport" case is rather unlikely, so it might as well be computed at page load.

I'm open to alternatives - I'm not much of an HTML/CSS/JS guy. But the current state really doesn't work on any of my devices.

[ReneTode]

I've tested >30 combinations of devices with current Android, iOS, Linux, macOS and various current browsers on each.

in general the best way is to use google chrome. but it will still depend on your dashboard settings. it wont rescale from 4:3 format to widescreen format.

That means creating an extra dash for each type of device, because all of them have different screen sizes. It also means I cannot use self.dash_navigate, because that will point all viewers to the same, new dash.

thats right. there is no possible option to create a dashboard that will show the same on a device with resolution 1920x1080 as on a device resolution 1280x1024

Isn't it much easier to just grab the size of the local screen at page load, calculate how large the tiles must be to acomodate an nxm grid, and set them accordingly? The way the grid is configured from within HADashboard, anything but fixed grid dimensions would be very hard to control anyway.

so you would like it that you wont have any option to change how the dashboard looks? the gridsize would be fixed, but then also the icon size, the title size, etc. everything would be fixed and cant be set by the user. i dont think there would have been much users if it would work that way.

auto calculating would need to calculate every detail from every widget. allthough it would be theoratical possible, that would make custom widgets almost impossible, and it would be very hard to do with little flexibility. people want in general the freedom to change their dashboards to their wishes.

I'm not much of an HTML/CSS/JS guy. But the current state really doesn't work on any of my devices. you are welcome to open a topic on the forum where i will help you to create dashboards that are created for your wishes, but there is no one size fit all possibility, so dashboards need to be made specific for the device you want to show it on.

dashboard is designed to create wallpanels. (you can do way more with it, but the design was for wallpanels) a wallpanel in general is a dashboard that fits the room that the wallpanel is in on and the device that shows the dashboard.

How would you suggest doing that? I can't see how CSS would be able to set sizes that are not overridden by gridster again.

in the variables.yaml it is possible to create calculations that resize things based on 1 single setting. you could create a skin for every screensize you want and show 1 dashboard on different devices with different screens. but indeed if you dont cant or dont want to use CSS and/or JS then your options are limited.

[epruesse]

in the variables.yaml it is possible to create calculations that resize things based on 1 single setting. you could create a skin for every screensize you want and show 1 dashboard on different devices with different screens.

I'll have a look at that.

[ReneTode]

i have a scalefactor in my lcars skin, but i remembered wrong. there is still a need to change the dimension settings in that one also.

its probably possible to do a rescaling for the widget dimensions in the skin though, but then you need to create a javascript that goes in the head.

you can take a look what i did with lcars here:

https://github.com/ReneTode/My-AppDaemon/tree/master/custom_css/lcars

[DaveDixon]

I vote for something like

widget_dimensions: [$tile_width, $tile_height]

I query the device and set the tile dimensions in the javascript for my skin, so $tile_width and $tile_height already exist.

Currently I have seven different devices. I've figured out the optimal tile dimensions for each one. When I get a new device (a phone, usually) I add it (or replace it) in a bash script. Widget dimensions for each device and orientation are held in an array in the bash code. Then I run the bash script to construct all the dashboards I need (13 pages x 7 devices x 2 orientations = 182 dashboards). Bash writes the header with comments, title, widget_dimensions, widget_margins, and -include of the template for the page/orientation. Like this

##
## Climate Controls
##
## generated by make_device_dashboards.bash
##
title: Climate Controls
widget_dimensions: [97, 27]
widget_margins: [5, 5]
columns: 8
 
layout:
  - include: templates/Climate_landscape_Rev8

So I'm only maintaining 13 pages x 2 orientations = 26 templates to manage 182 dashboards. If I could do something like

widget_dimensions: [$tile_width, $tile_height]

I wouldn't have to maintain tile size calculations in two different places, it would only happen in the skin code. Where it belongs :)

[ReneTode]

recalculating dashboards based on outside variables is only possible if the entire code that writes dashboards is rewritten. AD writes the dashboard based on the yaml, without any knowledge from a skin, so the setting cant be in the skin.

there is not even the possibility to do something like: widget_dimensions: [screenwidth/12, screeheight/8] because the dashboard is created in python before it is loaded, so the code cant be aware from screensize.

what you ask would mean that the entire python code that creates the dashboards, would be rewritten in JS and the entire dashboard would be created in JS. which would slow down loading dashboards extremely.

so creating your dashboards with a bash file (or even better in an appdaemon app) is the only way to get 1 dashboard for different size devices.

that said: most people wouldnt use a scaling like that anyway, because you resize the tiles, but you dont resize the icons, titles, textsizes, etc. (allthough thats also possible, but thats better done by creating different skins for different devices.)

[DaveDixon]

As always, @ReneTode, I appreciate your deep knowledge of the architecture. Thanks!

I appreciate scoping and if yaml's scope is the limitation, then it is what it is. The bash solution is really easy and really quick. What would be the advantage of an appdaemon app?

Thanks again.

[ReneTode]

if you update the app yaml (list with devices for example) the dashboards could be automaticly updated. you could monitor the dashboards, and automaticly update dashboard A, when dashboard B changes.

another option: let a small JS script (can be placed in custom_javascript or the skin) create a sensor that contains the screensize. when a new device with different screensize is added, the app could notice that, and add it to your list, then build a dashboard based on that.