Custom card for newbie

Configuration Frontend
1

I am very low on the learning curve of HA. I have a device with two sensors, full and empty. Thus, there are four states, empty, full, not empty nor full, and invalid. I would like to display these states as an icon(?) that is the color white, blue, light blue and red, respectively. How is this done? Please, I am not familiar with HA, much less the minutiae, so your patience and details are appreciated.

2

You should look into the button_card custom component. Using that you can define a set of criteria and the different icons, colors, etc. that should be applied for those criteria.

Here is an example to get you started:

type: custom:button-card
color_type: icon
name: Sensor
state:
  - operator: template
    value: >
      [[[
        return (states['light.sensor1'].state == 'off' && states['light.sensor2'].state == 'off')
      ]]]
    icon: mdi:alert
    color: green
  - operator: template
    value: >
      [[[
        return (states['light.sensor1'].state == 'on' && states['light.sensor2'].state == 'off')
      ]]]
    icon: mdi:lightbulb
    color: yellow

Read up the documentation here: