HADashboard: Changing Aspect Ratios to fit your tablet

Third party integrations HADashboard
1

This is a repost of something I posted about the original ST implementation of HA dashboard - I think it might be useful to reiterate here.

Every tablet has a different aspect ratio, and to get HADashboard to match yours perfectly without requiring any scrolling there are a few simple steps to take.

The first thing to realize is that you need to match the tiles to the aspect ratio of the tablet. If you do not, the tablet will zoom to one of the dimensions and the other dimension will require scrolling to see it.

The first step to fixing the aspect ratio is to get the number of tiles close to right. Play with the dashboard and add lines and columns until you are close. You should have less than half a tile scrolling in any direction when you get there. For the iPad Retina, 7 across by 5 wide worked for me, but you can have other combinations on the same tablet if for instance you wanted more across.

The next step is fine tuning. Edit the file assets/javascripts/application.coffee and look for a line like the following:

Dashing.widget_base_dimensions ||= [145, 145]

This defines the aspect ratio of the individual tiles, and you need to make a slight change so that they all fit properly. On the iPad, I had around half a tile scrolling to the left and right so I took 7 off the X dimension:

Dashing.widget_base_dimensions ||= [138, 145]

Now the tiles fit perfectly.

As a last step, I needed to slightly reduce the text and icon sizes for the tiles now they were slightly smaller, and some tiles with more text on were stretching the tile downward. This is done in /assest/stylesheets/application.scss. You are looking for the following code:

h1 {
  margin-bottom: 6px;
  text-align: center;
  font-size: 150%;
  font-weight: 400;
}
h2 {
  text-transform: uppercase;
  font-size: 380%;
  font-weight: 700;
  color: $text-color;
}

h1 defines the size of the text and h2 defines the size of the icons. I changed h1 to 140% and h2 to 340% and everything fit perfectly.

If you are making drastic changes to the tile aspect ratio you may run into trouble with a couple of specific widgets that override these values, for instance Weather, in which case you will need to go in and edit the scss files in the appropriate widgets directory - it wasn’t necessary for the iPad.

The downside to this is that you will need to re-apply these changes when you refresh your version of HADashboard - I’ll see if I can make these parameters configurable in a future release.

3 Likes
2

you can set these settings only once, right?
so it applies to all your tablets and mobiles and PCs

it is nice that it we can set it to 1 specific tablet or mobile, but what if you have a few different sizes?

this should actually be set on dashboardlevel.

wont this changes dissapear with the next time we update hadashboard?
because then it would be wise to keep track of every change we make.

3

Hi Rene, your are correct on the above points. I am not aware of a way to do this per dashboard although I’ll have a look.

4

i dont think it is created that way.
i think it would take some real changing off dashboard to get that.

but the update part is what disturbs me the most.
i am making quite some changes and most of the time i am to lazy or to busy to take note of every change i make.

but if you make some nice extra things i want those also.

5

You can set these per dashboard by putting the following at the top of your dashboard file after the content line:

<script type='text/javascript'>
$(function() {
  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
  Dashing.widget_margins = [4, 4]
  Dashing.widget_base_dimensions = [60, 60]
  Dashing.numColumns = 10
});
</script>
2 Likes
6

ill try that.

i guess that that way there is no need at all to change the application.coffee and then there are also no problems with updating.

7

Correct - this would be in your main.erb which is not overwritten on update - thanks for this @mezz64.