For Anyone wanting it I created an Octoprint 3D Printer card to use with Matthias’s UI style:
button_card_templates.yaml code:
printer:
template:
- base
aspect_ratio: 1/1
show_state: true
show_icon: false
show_name: true
show_current_temperature: true
show_control: true
state:
- operator: template
value: sensor.octoprint_print_state
custom_fields:
circle: >
[[[
if (Math.round(states['sensor.octoprint_percentage_complete'].state) > 0 && states['sensor.octoprint_percentage_complete'].state < 100) {
const input = states['sensor.octoprint_percentage_complete'].state
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - input / 100 * circumference};
}
tspan {
font-size: 10px;
}
</style>
<circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
</svg>
`;
}
]]]
Modify the line below in the “base” template to include “Printing” as an “on” state:
Note: This is what controls when a card’s background turns white for future reference…
base:
template:
- settings
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing','Printing'].indexOf(entity === undefined || entity.state) !== -1; ]]]
state: >
.
.
.
#Rest of base template
Icon Code (to be added to the bottom of button_card_templates.yaml):
icon_3dprinter:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: 1%
- margin-top: 5%
custom_fields:
icon: >
<svg viewBox="0 0 90 73">
<<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><rect fill="#9da0a2" x="0" y="63" width="90" height="10" rx="3"></rect><rect fill="#9da0a2" transform="translate(10.000000, 33.000000) rotate(90.000000) translate(-10.000000, -33.000000) " x="-23" y="30" width="66" height="6" rx="3"></rect><rect fill="#9da0a2" transform="translate(78.000000, 34.000000) rotate(90.000000) translate(-78.000000, -34.000000) " x="44" y="31" width="68" height="6" rx="3"></rect><path d="M7,3 C7,1.34314575 8.34757814,6.41357826e-15 9.99253964,6.2593707e-15 L78.0074604,-1.16714867e-16 C79.6601944,-2.71651068e-16 81,1.34651712 81,3 L81,3 C81,4.65685425 79.6524219,6 78.0074604,6 L9.99253964,6 C8.33980564,6 7,4.65348288 7,3 L7,3 Z" fill="#9da0a2"></path><rect fill="#9da0a2" x="16" y="56" width="56" height="3"></rect><rect fill="#9da0a2" transform="translate(44.000000, 26.500000) scale(1, -1) translate(-44.000000, -26.500000) " x="12" y="25" width="64" height="3"></rect><rect fill="#9da0a2" transform="translate(44.000000, 19.500000) scale(1, -1) translate(-44.000000, -19.500000) " x="12" y="18" width="64" height="3"></rect><rect fill="#9da0a2" x="25" y="23" width="15" height="10"></rect><rect fill="#9da0a2" x="31" y="31" width="3" height="4"></rect></g></g>>
</svg>
lovelace.yaml code: add this to where you want the card to live in your dashboard
- type: custom:button-card
entity: sensor.octoprint_print_state
tap_action: !include popup/Printer.yaml
name: 3D Printer
template:
- base
- printer
- icon_3dprinter
and popup/Printer.yaml code: (this requires the threedy card from HACS)
action: fire-dom-event
browser_mod:
command: popup
title: Printer
style:
.: |
:host .content {
width: calc(385px + 510px);
max-width: 90vw;
}
threedy-card div div div:nth-child(2) {
height: auto !important;
opacity: 1 !important;
transform: none !important;
}
layout-card$grid-layout:
$: |
hui-vertical-stack-card {
animation: border 1s forwards;
}
@keyframes border {
0%, 100% {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
/* phone */
@media screen and (max-width: 800px) {
hui-vertical-stack-card {
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
padding-right: 0;
animation: none;
}
}
$hui-vertical-stack-card:
$: |
hui-horizontal-stack-card {
padding: 0em 2em 2.3em 2em;
}
$hui-entities-card$: |
.card-content {
padding: var(--card-content-padding);
}
$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly;
}
card:
type: custom:threedy-card
base_entity: sensor.octoprint
monitored:
- Status
- ETA
- Elapsed
- Hotend
- Bed
- Remaining
printer_type: I3
name: Prusa Mk2.5S Bear
theme: Default
temperature_unit: C
NOTE: using this card requires you to add the following template sensors:
template:
- sensor:
- unique_id: OctoPrint Time Elapsed
name: "OctoPrint Time Elapsed"
unit_of_measurement: "s"
availability: >
{{ not is_state('sensor.octoprint_start_time', 'unavailable') }}
state: >
{% set start = as_timestamp(states('sensor.octoprint_start_time')) %}
{% if is_number(start) %}
{{ (as_timestamp(now()) - start) | int }}
{% else %}
unknown
{% endif %}
attributes:
start_time: "states('sensor.octoprint_start_time')"
- unique_id: OctoPrint Time Remaining
name: "OctoPrint Time Remaining"
unit_of_measurement: "s"
availability: >
{{ not is_state('sensor.octoprint_estimated_finish_time', 'unavailable') }}
state: >
{% set finish = as_timestamp(states('sensor.octoprint_estimated_finish_time')) %}
{% if is_number(finish) %}
{{ (finish - as_timestamp(now())) | int }}
{% else %}
unknown
{% endif %}
attributes:
start_time: "states('sensor.octoprint_estimated_finish_time')"
- unique_id: OctoPrint Percentage complete
name: "OctoPrint Percentage Complete"
unit_of_measurement: "%"
state: >
{{ states['sensor.octoprint_job_percentage'].state | round(0)}}
- unique_id: OctoPrint Print State
name: "OctoPrint Print State"
state: >
{% if is_state('sensor.octoprint_current_state', 'Operational') %}
idle
{% elif is_state('sensor.octoprint_current_state', 'Printing from SD') %}
Printing
{% elif is_state('sensor.octoprint_current_state', 'Starting print from SD') %}
Printing
{% else %}
Down
{% endif %}
Threedy Card can be found here although be warned it seems to be a dead project:
https://github.com/dangreco/threedy
BE WARNED: The pop-up card does not currently scale to mobile resolutions as the code above stands… I’m not an expert by any means but I THINK it’s because the threedy card does not support it but if someone wants to swing by the thread and see if I messed up the scaling somewhere along the way let me know…
