How to add all values to HA?

[KixMan28]

Hi! First of all thank you for this custom component. I have set it up in my HA and it extracts the data for my region (Budaörs). How can I add all these sensor values easily to my HA? If I add the sensor to an entity or sensor card it shows only one value.

Can you post a template which extracts all the values nicely in a card? Eventually can I have the values color sensitive depending on their status: below/above or inside/outside limits?

Thank you for your support.

[amaximus]

Hi, this is a custom integration while your request is on displaying data on the frontend, which is out of scope for this repo (however it would be nice to have).

Until I come up with something and update the README with an example you may experiment with examples from one of my other custom integration met_alerts_hu. The approach should be similar: parse through the list provided by the water_quality attribute and display the name if the state of that element is "out of range".

[amaximus]

Added an example of a conditional custom button to the README.

[KixMan28]

Thank you for the sample code, but it give me error when I try to use it. Here is the error code:

Configuration errors detected:
duplicated mapping key (22:5)

 19 |     icon:
 20 |       - color: var(--paper-item-ico ...
 21 |     layout: icon_label
 22 |     label: >
----------^
 23 |       [[[
 24 |         var label = ""

[amaximus]

Fixed the relative indentation.

[KixMan28]

Thank you. I copied your code into a lovelace card and it shows nothing. What should be displayed in the card?

[amaximus]

The example is a conditional card, so if there are no elements above the threshold, the state of the sensor will be 0 and the conditional card will not appear.

[KixMan28]

I noticed this condition. I tried to change the code to list all the values but for some reason it didn't worked. See below my modified code.

type: conditional
conditions:
  - entity: sensor.water_quality_fvm
    state: '0'
card:
  type: custom:button-card
  color_type: icon
  show_label: true
  show_name: false
  show_icon: true
  entity: sensor.water_quality_fvm
  size: 30px
  styles:
    label:
      - font-size: 90%
      - text-align: left
    card:
      - height: 80px
    icon:
      - color: var(--paper-item-icon-active-color)
  layout: icon_label
  label: |
    [[[
      var label = ""
      var w_alerts = states['sensor.water_quality_fvm'].attributes.water_quality;
      for (var k=0; k < states['sensor.water_quality_fvm'].state; k++) {
        if ( w_alerts[k].state = "ok" ) {
          label += w_alerts[k].name + ": " + w_alerts[k].value + " " +
                   w_alerts[k].unit + "&nbsp;&nbsp;(" + w_alerts[k].limit +
                   " " + w_alerts[k].unit + ")" + `<br>`
        }
      }
      return label;
    ]]]

What am I doing wrong? Can you post a card configuration which lists all values without condition?

[amaximus]

Besides the conditional part, the for loop in the label also uses the state of the sensor, which will be 0 in case there are no elements above the threshold. You may remore the conditional card part and replace states['sensor.water_quality_fvm'].state in the for loop with a numberical value (e.g. 8). Bear in mind that the card won't be able to display more than 4-5 elements.