Fixed Canvas Layout Example for Solar panels

OH3.2 adds a new, but somewhat hidden UI enhancement: fixed canvas layout.

It works a bit like a floorplan: on top of a background image (svg) you can put dynamic elements. A floorplan though, only lets you use ‘markers’, which have very limited possibilities.

With the fixed canvas layout, you can use all kinds of OH components and you can position them anywhere.

Here is an example of a schematic representation of our new solar panel installation:

  • The numbers are Label Cards
  • The battery is also a label card with an icon that shows the state of charge (soc) with 11 levels: one icon oh:batt, followed by icons oh:batt-5 to oh:batt-100. These are displayed with iconusestate: true.
  • The arrows are oh-icon components that get a different direction depending on the charge direction or grid direction. The choice is made by referring to the icon with a calculated number behind: icon: = “oh:zppijlbg” + Math.round(items.zpGridStatus.state*1). I did’t find a shorter way to add the icon number.
  • The totals are a Label List Card. But there is a catch: the menus of the oh-label-items (picture below) don’t work. You must edit the YAML of the oh-list-card (top right button)