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.
Adding some more informationā¦
I inspected the elements of my chip cards and found that there are two color styles being defined for my icons. Its unfortunately defaulting to the rgb(225,225,225) making all of my chip icons white. I have no idea why or where this value is coming from.
This was seen by inspecting an existing chip, but I created a new light chip with a color light and saw the same issue. This is also only being applied to the chip cards. All other cards, even other mushroom cards (from the ones I tested), are working as expected.
I feel like iām closer to figuring out whatās wrong but I have no idea what I need to do to fix it.
Thanks!
Any chance you can share your 3d printer card? I tried modifying the printer one to it, but didnāt look as nice. TIA!
What am I doing wrong with my if statements? I just keep getting a broken picture icon
{% if is_state("input_boolean.night_mode_green", "off") %}
/local/mushroom_icons/green_mode1.png
{% if is_state("input_boolean.night_mode_red", "on") %}
/local/mushroom_icons/red_mode1.png
{% endif %}
Should be elif
{% if is_state("input_boolean.night_mode_green", "off") %}
/local/mushroom_icons/green_mode1.png
{% elif is_state("input_boolean.night_mode_red", "on") %}
/local/mushroom_icons/red_mode1.png
{% endif %}
Sure, here is my 3D Printer Card. This is still a WIP though:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:mushroom-template-card
primary: 3D Printer
entity: switch.3d_printer_power
secondary: '{{ states(entity) | title }}'
icon: mdi:printer-3d
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.3d_printer_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.3d_printer_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: auto
entity: camera.3d_printer_camera
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
border_radius: true
margin: true
cards:
- type: custom:mushroom-template-card
entity: button.octoprint_pause_job
icon: mdi:pause
icon_color: orange
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-orange), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
entity: button.octoprint_resume_job
icon: mdi:play
icon_color: green
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-green), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
entity: button.octoprint_stop_job
icon: mdi:stop
icon_color: red
layout: vertical
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-red), 0.1);
width: 66px;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
#background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 197px auto
margin: '-4px -4px -8px -4px'
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.octoprint_current_state
icon_color: green
tap_action:
action: url
url_path: http://octopi.biscuit.local/?#tab_plugin_dashboard
icon: si:octopusdeploy
card_mod:
style: |
ha-card {
--badge-size: 0px !important;
}
primary_info: name
secondary_info: state
name: OctoPrint Status
- type: custom:mushroom-entity-card
entity: sensor.octoprint_estimated_finish_time
icon_color: light-blue
tap_action:
action: none
primary_info: name
secondary_info: state
name: Est. Finish Time
- type: custom:mushroom-template-card
entity: sensor.3d_printer_power_power
icon_color: '{{ ''amber'' if states(entity) | int > 0 else ''disabled'' }}'
tap_action:
action: none
primary: Power Use
secondary: '{{ states(entity) }} W'
icon: mdi:flash
card_mod:
style: |
ha-card {
margin-top: 6px;
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
header:
show: false
series:
- entity: sensor.octoprint_job_percentage
name: Job Progress
color: rgb(3, 169, 244)
show:
legend_value: false
chart_type: radialBar
apex_config:
legend:
show: false
chart:
height: 230px
plotOptions:
radialBar:
hollow:
size: 80%
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
- type: custom:mushroom-entity-card
entity: sensor.octoprint_job_percentage
primary_info: state
secondary_info: name
name: Job Progress
icon_color: light-blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -165px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.octoprint_actual_bed_temp
color: rgb(103, 58, 183)
max: 110
show:
legend_value: false
- entity: sensor.octoprint_target_bed_temp
color: rgb(103, 58, 183)
max: 110
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -15
startAngle: -105
endAngle: 105
hollow:
size: 60%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
chart:
height: 220px
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
- type: custom:mushroom-template-card
primary: Bed Temp
secondary: >-
{{ states(entity) | round(1) }} Ā°C / {{
states('sensor.octoprint_target_bed_temp') | round (1)
}} Ā°C
icon: mdi:thermometer-lines
entity: sensor.octoprint_actual_bed_temp
icon_color: deep-purple
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -80px;
width: 175px;
margin-left: auto;
margin-right: auto;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.octoprint_actual_tool0_temp
color: rgb(233, 30, 99)
max: 240
show:
legend_value: false
- entity: sensor.octoprint_target_tool0_temp
color: rgb(233, 30, 99)
max: 240
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -15
startAngle: -105
endAngle: 105
hollow:
size: 60%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
chart:
height: 220px
stack: true
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
- type: custom:mushroom-template-card
primary: Tool Temp
secondary: >-
{{ states(entity) | round(1) }} Ā°C / {{
states('sensor.octoprint_target_tool0_temp') | round (1)
}} Ā°C
icon: mdi:printer-3d-nozzle
entity: sensor.octoprint_actual_tool0_temp
icon_color: pink
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -80px;
width: 175px;
margin-left: auto;
margin-right: auto;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
27 Likes
@rhysb thank you. Now how do I add a final statement saying if neither of those conditions are met, display a different picture?
Like this:
{% if is_state("input_boolean.night_mode_green", "off") %}
/local/mushroom_icons/green_mode1.png
{% elif is_state("input_boolean.night_mode_red", "on") %}
/local/mushroom_icons/red_mode1.png
{% else %}
/local/some_other_picture.png
{% endif %}
What theme are you using?
Iāve switched between a few with the same results on all of them.
Iāve tried minimalist-desktop from the minimalist theme integration.
Iāve used the mushroom theme from HACS
And Iāve even tried using the ādefaultā theme.
Have you tried in a different browser? Also try disabling any browser extensions/plugins if you have any
try to use this. can you tell me what this is? ā input_boolean.amps_dropdown
That is a toggle helper to store the state of the dropdown. You can name it whatever you want.