Status LIST help

[mkellyjr]

I'm trying to show a list in a single tile with specific lights and their state WITH the proper icon depending on state.
Basically a status tile for the lights with visual queues.

I'm clear on the entity and state, what I cannot get is the dynamic icon depending on the state.

[knemo20000]

I do something similar for battery levels. What you're interested in is the "icon: function" block. I also added two lines to the custom.css file to handle proper spacing for my tablet.

battery_level.js file:

var battery_level = function(x, y) {
  return {
    position: [x, y],
    width: 2,
    height: 2,
    title: 'Battery Levels',
    type: TYPES.TEXT_LIST,
    id: {}, // using empty object for an unknown id
	customStyles: {'background-color':'#296cca'},
    classes: ['-batteryinfo-list'],
    state: false, // disable state element
    list: [
      {
        title: 'Front Door Lock',
        icon: function () {
            var batlevel = this.states['sensor.frontdoor_battery'].state;
            var batround = Math.round(batlevel / 10) * 10;
            if (batround >= 100) {
              return 'mdi-battery';
              }
            else if (batround > 0) {
              return 'mdi-battery-' + batround;
              }
            else return 'mdi-battery-alert';
            },
        value: '&sensor.frontdoor_battery.state &sensor.frontdoor_battery.attributes.unit_of_measurement'
        },
      }
    ]
  }
};

custom.css file:

.-batteryinfo-list .item-list--name {
  width: 60%;
}
.-batteryinfo-list .item-list--value {
  width: 40%;
}

[alphasixtyfive]

You can use map() to work with the list of items and also do custom CSS for certain mdi-battery-XXX icons i.e. have mdi-battery-alert as red.

{
        width: 2,
        height: 1,
        title: '',
        id: {},
        type: TYPES.TEXT_LIST,
        state: false,
        list: [
            'binary_sensor.front_door',
            'binary_sensor.lounge_window',
            'binary_sensor.bedroom_window',
            'binary_sensor.study_window',
            'binary_sensor.kids_room_window',
            'binary_sensor.landing_baby_gate'
        ].map(function(item) {

            return {
                title: function() {
                    return this.states[item].attributes.friendly_name;
                },
                icon: function() {
                    var battery_level = this.states[item].attributes.battery_level || this.states[item.substring(7) + '_battery'].state || 0;
                    var battery_round = parseInt(battery_level / 10) * 10;

                    if (battery_round >= 100) return 'mdi-battery';
                    else if (battery_round > 0) return 'mdi-battery-' + battery_round;
                    else return 'mdi-battery-alert';
                },
                value: function() {
                    return this.states[item].state === 'off' ? 'Closed' : 'Open';
                }
            }
        })
    }