I’ve been doing some digging and I haven’t found any nice dashboard cards for ovens?
I have a Philips Home Connect oven - the integration is solid, but I haven’t found a good way to display the current temperature (with changes) on/off controls, current mode etc
I know I can just dump all this together, but before i just do it, surely someone must have created a nice card for an oven somewhere!?
Thanks!
Okay, well given the lack of response I decided to tackle this myself
if anyone else looking there are a couple of options below
Option 1: Visual Oven
type: picture-elements
image: /local/images/boschoven.png
elements:
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state_not: "on"
elements:
- type: icon
icon: mdi:power
entity: switch.bosch_oven_power
tap_action:
action: toggle
style:
top: 50%
left: 50%
transform: translate(-50%, -50%)
color: black
background: "linear-gradient(135deg, #f5f5f5, #a0a0a0, #d0d0d0, #a0a0a0, #f5f5f5)"
border-radius: 50%
padding-top: 15px
padding-bottom: 20px
padding-left: 35px
padding-right: 35px
border: 3px solid grey
font-size: 36px
- type: image
entity: switch.bosch_oven_power
image: /local/images/trans-singlepixel.png
tap_action:
action: toggle
style:
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100px
height: 100px
background-color: rgba(255,255,255,0.01)
border-radius: 50%
cursor: pointer
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
elements:
- type: icon
icon: mdi:power
entity: switch.bosch_oven_power
tap_action:
action: toggle
style:
top: 8%
left: 90%
color: green
background-color: white
border-radius: 50%
padding: 6px
- type: image
entity: switch.bosch_oven_power
image: /local/images/trans-singlepixel.png
tap_action:
action: toggle
style:
top: 8%
left: 90%
width: 36px
height: 36px
background-color: rgba(255,255,255,0.01)
border-radius: 50%
cursor: pointer
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: select.bosch_oven_active_programme
state_not: unknown
elements:
- type: state-label
entity: select.bosch_oven_active_programme
style:
top: 90%
left: 50%
transform: translateX(-50%)
background-color: rgba(0,0,0,0.6)
color: white
padding: 6px 12px
border-radius: 8px
font-size: 16px
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: sensor.bosch_oven_operation_state
state_not: ready
elements:
- type: state-label
entity: number.oven_target_temperature
style:
top: 45%
left: 50%
transform: translateX(-50%)
color: white
font-size: 18px
background-color: rgba(0,0,0,0.5)
padding: 4px 8px
border-radius: 6px
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: sensor.bosch_oven_current_oven_cavity_temperature
state_not: "{{ states('number.oven_target_temperature') }}"
- entity: sensor.bosch_oven_operation_state
state_not: ready
elements:
- type: icon
entity: number.oven_target_temperature
icon: mdi:fire
tap_action:
action: more-info
style:
top: 55%
left: 50%
transform: translateX(-50%)
color: orange
font-size: 24px
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: sensor.bosch_oven_current_oven_cavity_temperature
state: "{{ states('number.oven_target_temperature') }}"
- entity: sensor.bosch_oven_operation_state
state_not: Ready
elements:
- type: icon
entity: number.oven_target_temperature
icon: mdi:thermometer
tap_action:
action: more-info
style:
top: 55%
left: 50%
transform: translateX(-50%)
color: green
font-size: 24px
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: sensor.bosch_oven_operation_state
state: Ready
elements:
- type: icon
icon: mdi:check-circle-outline
tap_action:
action: more-info
style:
top: 55%
left: 50%
transform: translateX(-50%)
color: lightgreen
font-size: 24px
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
- entity: sensor.bosch_oven_current_oven_cavity_temperature
state_not: "{{ states('number.oven_target_temperature') }}"
- entity: sensor.bosch_oven_operation_state
state: Running
elements:
- type: state-label
entity: sensor.bosch_oven_current_oven_cavity_temperature
style:
top: 62%
left: 50%
transform: translateX(-50%)
color: white
font-size: 14px
background-color: rgba(0,0,0,0.4)
padding: 2px 6px
border-radius: 4px
Option 2: Native Cards
type: custom:layout-card
layout_type: vertical
cards:
- type: custom:mushroom-title-card
title: 🍽️ Bosch Oven Control
subtitle: Manage power, temperature & programmes
card_mod:
style: |
ha-card {
background: linear-gradient(135deg, #fdf6e3, #f5f5f5);
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
- type: custom:mushroom-entity-card
entity: switch.bosch_oven_power
name: Oven Power
icon: mdi:power
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
mushroom-state-info {
font-weight: bold;
}
- type: conditional
conditions:
- entity: switch.bosch_oven_power
state: "on"
card:
type: custom:mushroom-number-card
entity: number.oven_target_temperature
name: Target Temp
icon: mdi:thermometer-chevron-up
layout: horizontal
display_mode: slider
card_mod:
style: |
mushroom-slider {
--slider-color: #ff7043;
}
- type: conditional
conditions:
- entity: sensor.bosch_oven_operation_state
state: Running
card:
type: custom:mushroom-template-card
primary: >
{% set current =
states('sensor.bosch_oven_current_oven_cavity_temperature') | float %}
{% set target = states('number.oven_target_temperature') | float %} {%
if current < target %}
Heating up
{% elif current > target %}
Cooling down
{% else %}
At target
{% endif %}
secondary: >
Current: {{ states('sensor.bosch_oven_current_oven_cavity_temperature')
}}°C Target: {{ states('number.oven_target_temperature') }}°C
icon: >
{% set current =
states('sensor.bosch_oven_current_oven_cavity_temperature') | float %}
{% set target = states('number.oven_target_temperature') | float %} {%
if current < target %}
mdi:fire
{% elif current > target %}
mdi:snowflake
{% else %}
mdi:check-circle
{% endif %}
layout: horizontal
card_mod:
style: |
ha-card {
background-color: #fff3e0;
border-left: 6px solid
{% set current = states('sensor.bosch_oven_current_oven_cavity_temperature') | float %}
{% set target = states('number.oven_target_temperature') | float %}
{% if current < target %}
#ff7043
{% elif current > target %}
#64b5f6
{% else %}
#81c784
{% endif %};
}
- type: conditional
conditions:
- entity: sensor.bosch_oven_operation_state
state: Running
card:
type: custom:mushroom-select-card
entity: select.bosch_oven_active_programme
name: Programme
icon: mdi:chef-hat
layout: horizontal
card_mod:
style: |
ha-card {
background-color: #f0f4c3;
}
Thanks for the dashboard. I have a Bosch (via Home Connect).
I’m going with your second option (hint: include the PNG files in your post and maybe some screenshots of the end result).
I did notice that, in order to turn on the oven, I had to select a programme first. So I’m adding that to the view as well (without condition that the oven should be on).
A better way to do it (which i did since posting this post that nobody else was interested in at the time) was to actually select the heating mode with the power button. It doesn’t ever want/need to be in an unknown state and we 90% of the time use Hot Air
action: call-service
service: select.select_option
service_data:
entity_id: select.bosch_hrg6769s6b_68a40e2f4442_programs
option: Cooking.Oven.Program.HeatingMode.HotAir
Oh and in response to the hint… don’t look a gift horse in the mouth… i posted this swiftly to close off the thread that had zero interest at the time in the hope that it would get people started if they ever came searching… i could have just left my initial post with no response as many others do 
Thanks, your input is appreciated! Don’t underestimate the value of some usefull YAML.
