myhelloiot icon indicating copy to clipboard operation
myhelloiot copied to clipboard

How to modify valueformat

Open Nic2012 opened this issue 2 years ago • 3 comments

Hi, thank you for providing us with this interesting project, I am trying to customize a bit the "light" template, how can i declare as unit "watt" for electric power and for another switch control I need different values as ON-OFF, I have for example "up" and "down". Where or how can set it in template?

    <Card title="Shelly Plug Power [Watt]">
      <ViewUnit
        subtopic="shellies/shellyplug/relay/0/power"
        format={ControlIconFormat(
          {
            title: "Power",
            min: 0,
            max: 2000,
            step: 1,
            labelstep: 1,
            valueformat: {
              style: "unit",
              unit: "celsius",
            },
          }
        )}
      />
    </Card>

Best regards, Nic

Nic2012 avatar Jan 15 '23 17:01 Nic2012

Hi i am sitting with similar issue i want to declare % watt volt amp as”unit” or even nothing for that matter.

leonstorm avatar May 27 '23 04:05 leonstorm

In the new wersion you can use all the properties defined in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options for formatting numbers.

For example:

    <ViewUnit
      topic="myhelloiot/temperature"
      format={NumberIconValueFormat({
        notation: "engineering",
        min: -10,
        max: 60,
        step: 1
      })}
    />

Will display numbers in engineering notation: 1 will be formatted as 1E0.

In this example:

    <ViewUnit
      topic="myhelloiot/temperature"
      format={NumberIconValueFormat({
        style: "percent",
        min: -10,
        max: 60,
        step: 1
      })}
    />

0.1 will be formatted as 10 %.

adrianromero avatar Nov 08 '23 17:11 adrianromero

Hi @Nic2012, this is the code for your request:

<ViewCard 
    title="Shelly Plug Power [Watt]"
    topic="shellies/shellyplug/relay/0/power"
    format={FuelIconFormat({
      title: "Power [Watt]", 
      unitDisplay: "long",
      ...Celsius({
              style: "unit",
              unit: "pound-per-mile"
              }),
      min: 0,
      max: 2000,
      step: 50,
      labelstep: 250
    })}
/>

The valid units of measurement are: angle, area, concentration, digital, duration, length, mass, temperature and volume https://v8.dev/features/intl-numberformat. Power/energy units will probably be available in the near future. https://es.discourse.group/t/addition-of-power-energy-units-to-intl-numberformat/1702

Hector-72 avatar May 03 '24 01:05 Hector-72