Looks great, thank you! Iāll try it.
Would be much elegant without one more add-on or plugin, just something like:
{% if is_stateā¦} or muct better to have a build in condition in a conditional chips card.
You can specify the max value for each entity. It will show it as a %.
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: 'CPU Temperatures'
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
header:
show: true
series:
- entity: sensor.glances_core_0_temperature
name: Core 1
color: rgb(7, 188, 211)
max: 150
show:
legend_value: true
- entity: sensor.glances_core_1_temperature
name: Core 2
color: rgb(252, 233, 64)
max: 150
show:
legend_value: true
- entity: sensor.glances_core_2_temperature
name: Core 3
color: rgb(157, 44, 176)
max: 150
chart_type: radialBar
apex_config:
legend:
show: true
chart:
height: 265px
Is there a way too see no decimals? Or should i create a new sensor?
Yep, with a template card:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.lounge_sensor_temperature
primary: '{{ states(entity) | round(0) }} Ā°C'
secondary: Temperature
icon: mdi:thermometer
icon_color: red
- type: custom:mushroom-template-card
entity: sensor.lounge_sensor_humidity
primary: '{{ states(entity) | round(0) }} %'
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.lounge_sensor_temperature
name: Temperature
color: rgb(244, 67, 54)
- entity: sensor.lounge_sensor_humidity
name: Humidity
color: rgb(33, 150, 243)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
group: true
show:
name: false
icon: false
state: false
legend: false
fill: true
I thought I would share my Mushroom Gauge. I like how it turned out. This combo card requires in addition to the Mushroom cards, apexcharts-card, stack-in-card and card-mod.
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.cpu_temperature
color: rgb(255, 87, 34)
max: 90
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperature
primary_info: state
secondary_info: name
name: CPU Temp
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.disk_free
color: rgb(33, 150, 243)
max: 240
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.disk_free
primary_info: state
secondary_info: name
name: Disk Free Space
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
41 Likes
Yes you can do it like this:
type: custom:mushroom-template-card
icon: ''
primary: LS50
secondary: '{{ states(entity) | title }} '
entity: switch.lounge_amp_center
fill_container: false
multiline_secondary: false
picture: /local/ls50.png
card_mod:
style: |
mushroom-card {
{{ 'filter: grayscale(100%);' if is_state('switch.lounge_amp_center', 'off') }}
}
1 Like
Thank you that worked for me!
Thanks again!
Is there any way I can get into edit mode on mobile when the topbar is hidden?
This is awesome, I just started working on this too. I have some huge HP Latex printers and thereās not really a lot of documentation about IDās how are you figuring them out for your sensors?
4 Likes
You have to be more specific like which part ?
A little bit OT for this thread, but I use MIB Browser to do an SNMP Walk. Make sure you load the appropriate MIBs for printers, usually RFC1213 and Printer-MIB. Most of the OIDs are standardized with minor differences, such as the number of toner/ink supplies and the order of them, while the base OID remains the same.
2 Likes
Yeah I was using a different program and there was thousands of OIDās. Still trying to find a few but got the card looking very nice! Thanks for saving me some time and making a great looking card!
8 Likes
Sorry 
I mean the icons on this room card, i struggling to find the right code to get it to work for me.
Thanks for posting these and for being so willing to help the community throughout this thread. These examples are great and get the creativity flowing for sure. Couple of quick questions:
-
in the first two side-by-side examples, it appears weāre looking at the base āwelcome screenā as it has the overall dashboard indicators e.g. presence, door, alarm, weather. However, the stuff underneath is different in each example (now playing is first in one, rooms is first in the other). Can I infer from this the top pane is ālockedā such that you can scroll vertically below the header and see the rest of the content? I fiddled briefly with trying to do this in CSS with contentContainer and such but never quite made it work. Or, does the top scroll off as you scroll down?
-
generally, what strategy would you consider if you were to adapt the mobile-friendly layout you have here to a wider screen e.g. a wall-mounted tablet? The room cards should be easy - they could be popups or just navigate to a new page. But for the āfront pageā, I think itād be basically creating a grid and carving out the sections of the primary layout into cards that made sense in my own implementation, is that right?
Thanks again, still fighting through getting mine to even somewhat look like yours and others here, but the sharing and collaboration is so very helpful.
2 Likes
No, the top pane is not locked, it scrolls off the top. The āCurrently Playingā uses Universal Media Player to show any playing media and is hidden if there is nothing playing. I wanted a quick way to pause, skip or adjust volume without having to go into a room card. This way the media player doesnāt take up space when it is not needed. I also use Universal Media Players in rooms that have more than one media source, ie TV, Squeezebox & Plex, to reduce clutter.
I havenāt started on a tablet layout yet, but would probably have a side card with room navigation down the left and expand content out to the right.
This is probably a simple one, but I canāt for the life of me work it outā¦ can anyone tell me what the magic code is to make a template chip follow the icon of the entity rather than having to specify it manually as part of the yaml ?
Iām thinking there must be a template way to get the entities icon ??
Post your code here.