Add Sensor Entity Support to Device Card
Michelone86 opened this issue · comments
Hi @neilimixamo, I have some numeric entities that I would like to monitor.
For example: UPS battery percentage, server temperature, mailbox sensor, etc.
Do you have any ideas on how to integrate them into your awesome QLM Dashboard?
Thank you 😉
Hi @Michelone86, although QLM cards can manage these devices, they might not be the best fit for a system monitoring view.
That's why I would opt for native HA or cutom cards that specialize in displaying data through charts and graphs like 'gauge', 'mini-graph-card', 'apexcharts', or others. These are more effective for visually tracking device statistics and you can integrate them manually with the rest of your QLM dashboard.
I would then group those numerical entities in a dedicated sub-view for system monitoring. Here is some inspiration from the community to help you determine your design. Name this sub-view, for example, 'system_monitoring.yaml', place it in the '/dashboards/quick_look_mobile/expanded' directory and add your charts/graphs (custom)cards.
You could then configure access to this technical subview through a main QLM card like a 'device_expandable' card which features a clickable chevron that, when tapped, could redirect you to this system monitoring sub-view. This main card could also act as a "global" monitoring indicator : if all of your numerical entities are in their normal state, main card stays blue but if one of those numerical entities fails, card turns red and indicates you so to navigate to the system subview.
Hope these explanations are clear, don't hesitate to let me know if they aren't.
Once you've decided on the design for this view, I can assist in implementing it to match the QLM theme. It might be helpful if you could send over some screenshots, images, or sketches of your envisioned layout
Hi @neilimixamo, I would have preferred to use your qlm system directly since I don't care about graphs, I'm only interested in reading the entity name and its value.
Alternatively, I could use gauges but I would need to figure out how to view the system_monitoring.yaml tab within your qlm Dashboard. Thank you!
Alright, I have updated the 'device' card to handle entities like batteries, temperatures and presumably any other type of sensors to meet your request. But since these sensors can not be toggled, they will remain grayed out, which personally seems adequate to me for quickly distinguishing between activatable cards and non-activatable ones.
Just update the "device.yaml" and "device_expandable.yaml" cards as follows:
device (v2.0.1).yaml
device:
template:
- basic_card
- badge_battery
variables:
entity: ''
name: ''
label_on: 'Active'
on_state:
- 'on'
- 'active'
- 'cleaning'
label_off: 'Inactive'
off_state:
- 'off'
- 'docked'
- 'idle'
- 'paused'
icon_tap_action: ''
icon_hold_action: ''
name_tap_action: ''
styles:
card:
- background-color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-background-active)';
} else {
return 'var(--device-background-inactive)';
}
]]]
custom_fields:
icon:
card:
icon: |
[[[
if (variables.entity) {
if (variables.icon) {
return variables.icon;
} else {
return '';
}
} else {
return 'mdi:help';
}
]]]
styles:
card:
- overflow: visible
- background-color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-icon-background-active)';
} else {
return 'var(--device-icon-background-inactive)';
}
]]]
icon:
- color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-icon-active)';
} else {
return 'var(--device-icon-inactive)';
}
]]]
custom_fields:
badge:
type: custom:button-card # calls for the 'badge_battery' template
name:
card:
label: |
[[[
if (variables.entity) {
if (states[variables.entity].state === 'unavailable' || states[variables.entity].state === 'unknown') {
return "Unavailable";
} else if (variables.label) {
return variables.label;
} else {
var state = states[variables.entity].state;
var unit = states[variables.entity].attributes.unit_of_measurement || '';
var stateLabel = '';
if (variables.on_state.includes(state)) {
stateLabel = variables.label_on;
} else if (variables.off_state.includes(state)) {
stateLabel = variables.label_off;
} else {
stateLabel = `${state} ${unit}`;
}
return stateLabel.charAt(0).toUpperCase() + stateLabel.slice(1);
}
} else {
return "Label";
}
]]]device_expandable (v2.0.1).yaml
device_expandable:
template:
- basic_card_expandable
- badge_battery
variables:
entity: ''
name: ''
label_on: 'Active'
on_state:
- 'on'
- 'active'
- 'cleaning'
label_off: 'Inactive'
off_state:
- 'off'
- 'docked'
- 'idle'
- 'paused'
icon_tap_action: ''
icon_hold_action: ''
name_tap_action: ''
styles:
card:
- background-color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-background-active)';
} else {
return 'var(--device-background-inactive)';
}
]]]
custom_fields:
icon:
card:
icon: |
[[[
if (variables.entity) {
if (variables.icon) {
return variables.icon;
} else {
return '';
}
} else {
return 'mdi:help';
}
]]]
styles:
card:
- overflow: visible
- background-color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-icon-background-active)';
} else {
return 'var(--device-icon-background-inactive)';
}
]]]
icon:
- color: |
[[[
if (variables.entity && (variables.on_state.includes(states[variables.entity].state))) {
return 'var(--device-icon-active)';
} else {
return 'var(--device-icon-inactive)';
}
]]]
custom_fields:
badge:
type: custom:button-card # calls for the 'badge_battery' template
name:
card:
label: |
[[[
if (variables.entity) {
if (states[variables.entity].state === 'unavailable' || states[variables.entity].state === 'unknown') {
return "Unavailable";
} else if (variables.label) {
return variables.label;
} else {
var state = states[variables.entity].state;
var unit = states[variables.entity].attributes.unit_of_measurement || '';
var stateLabel = '';
if (variables.on_state.includes(state)) {
stateLabel = variables.label_on;
} else if (variables.off_state.includes(state)) {
stateLabel = variables.label_off;
} else {
stateLabel = `${state} ${unit}`;
}
return stateLabel.charAt(0).toUpperCase() + stateLabel.slice(1);
}
} else {
return "Label";
}
]]]
What would you like to add or modify from here?
Hi @neilimixamo, I tried to insert a simple battery percentage sensor, your card worked fine!
But if I create a group of sensors for displaying the UPS and call it via device_expandable, I get an error.
Could you help me? Thank you!
Hi @neilimixamo , I made some mistakes in the previous configuration, I think I fixed the files correctly but unfortunately it still doesn't work...
Your error probably comes from the entity group.gruppo_sensori_UPS which should instead correspond to sensor.gruppo_sensori_UPS. Additionally, creating a group that mixes different sensors such as battery, duration, etc. does not seem ideal to me. Since the "_expandable" card does not require a group entity, I would simply associate one of your UPS sensors with the main "device_expandable" card, the one that will allow you to know if this device is active or not eg switch/binary_sensor entity or a sensor entity returning 'on/active' state. Then, in the "subview devices_expanded_2", I would create a card for each sensor of this device, as you have already done.
Thanks so much @neilimixamo, you were right, everything works great now! Over and out ;)