Dashticz: show current power kWh?

[renerene]

How to create a large text fiels showing current power consumption / delivery?

Two problems, one nicetohave:
1) code below show 8 devices, I'm only interested in the first one (current/actual)

Code: Select all

blocks['kWh'] = {
  idx: 427,                   //The Domoticz device id
  title: 'kWh',       //The title of the block as shown in the dial.
  width: 6,                   //The width of the block relative to the column width
}

2) making the font bigger in CSS does not adjust the background, the big font floats over the small background rectangle
custom.css:

Code: Select all

.block_kWh {
   font-size:120px !important;
}

3) an alarm clock font would be nice

[EdwinK]

Try with idx: '427_1' to get only the first device.

[renerene]

Try with idx: '427_1' to get only the first device.

No, that does not work. Here is the result:

[HansieNL]

Can you post your blockcode. Did you exactly use the idx: '427_1' ?

[renerene]

Can you post your blockcode. Did you exactly use the idx: '427_1' ?

this was my code;

Code: Select all

blocks['kWh'] = {
  idx: 427_1,                   //The Domoticz device id
  title: 'kWh',       //The title of the block as shown in the dial.
  width: 6,                   //The width of the block relative to the column width
}

but after changing to code below, it works. Thanks!

Code: Select all

blocks['kWh'] = {
  idx: '427_1',                   //The Domoticz device id
  title: 'kWh',       //The title of the block as shown in the dial.
  width: 6,                   //The width of the block relative to the column width
}

only issue left is ugly layout. Text is placed to low, background rectangle does not resize with font size

[Lokonli]

By default the height of each Domoticz device block is fixed at a certain value (85 pixels to be precise)

You can make the height adjust to the content by using the following in custom.css:

Code: Select all

 .block_kWh {
    font-size: 120px;
    height: unset!important
 }

[renerene]

You can make the height adjust to the content by using the following in custom.css:

thanks!

Got it working now:

Code: Select all

.block_kWh {
   font-size:80px !important;
   height: unset!important
 }
}

Code: Select all

blocks['kWh'] = {
  idx: '427_1',                   //The Domoticz device id
  title: 'kWh',       //The title of the block as shown in the dial.
  width: 6,                   //The width of the block relative to the column width
  hide_title: true,
  unit: ' Watt',
}