{
  "version": 1,
  "minor_version": 1,
  "key": "lovelace.ender5_printer",
  "data": {
    "config": {
      "views": [
        {
          "title": "Ender 5",
          "path": "printer",
          "icon": "mdi:printer-3d-nozzle",
          "type": "sections",
          "max_columns": 3,
          "subview": false,
          "sections": [
            {
              "type": "grid",
              "cards": [
                {
                  "type": "heading",
                  "icon": "mdi:printer",
                  "heading_style": "title",
                  "heading": "Ender 5",
                  "badges": [
                    {
                      "type": "entity",
                      "show_state": true,
                      "show_icon": false,
                      "entity": "sensor.octoprint_print_status"
                    },
                    {
                      "type": "button",
                      "icon": "mdi:pause",
                      "text": "Pause",
                      "tap_action": {
                        "action": "perform-action",
                        "perform_action": "switch.turn_on",
                        "target": {
                          "entity_id": "switch.octoprint_pause_print"
                        }
                      },
                      "visibility": [
                        {
                          "condition": "state",
                          "entity": "binary_sensor.octoprint_paused",
                          "state": "off"
                        },
                        {
                          "condition": "state",
                          "entity": "binary_sensor.octoprint_printing",
                          "state": "on"
                        }
                      ]
                    },
                    {
                      "type": "button",
                      "icon": "mdi:play",
                      "text": "Resume",
                      "tap_action": {
                        "action": "perform-action",
                        "perform_action": "switch.turn_off",
                        "target": {
                          "entity_id": "switch.octoprint_pause_print"
                        }
                      },
                      "visibility": [
                        {
                          "condition": "state",
                          "entity": "binary_sensor.octoprint_paused",
                          "state": "on"
                        }
                      ]
                    },
                    {
                      "type": "button",
                      "icon": "mdi:stop",
                      "text": "Cancel",
                      "color": "#F44336",
                      "tap_action": {
                        "action": "perform-action",
                        "perform_action": "button.press",
                        "target": {
                          "entity_id": "button.octoprint_cancel_print"
                        },
                        "confirmation": {
                          "text": "Cancel the current print?"
                        }
                      },
                      "visibility": [
                        {
                          "condition": "state",
                          "entity": "binary_sensor.octoprint_printing",
                          "state": "on"
                        }
                      ]
                    },
                    {
                      "type": "button",
                      "icon": "mdi:alert-octagon",
                      "text": "Emergency stop",
                      "color": "#F44336",
                      "tap_action": {
                        "action": "perform-action",
                        "perform_action": "button.press",
                        "target": {
                          "entity_id": "button.octoprint_emergency_stop"
                        },
                        "confirmation": {
                          "text": "Emergency stop the printer NOW?"
                        }
                      }
                    }
                  ]
                },
                {
                  "type": "horizontal-stack",
                  "cards": [
                    {
                      "type": "custom:button-card",
                      "entity": "sensor.octoprint_tool_0_temperature",
                      "show_name": false,
                      "show_state": false,
                      "show_icon": false,
                      "tap_action": {
                        "action": "more-info"
                      },
                      "custom_fields": {
                        "content": "[[[\n  const sec = 'var(--secondary-text-color)';\n  const pri = 'var(--primary-text-color)';\n  const v = (Math.round(parseFloat(states['sensor.octoprint_tool_0_temperature']?.state) || 0)) + '\\u00B0C';\n  const s = 'target: ' + (Math.round(parseFloat(states['sensor.octoprint_tool_0_target']?.state) || 0)) + '\\u00B0C';\n  return `\n    <div style=\"position:absolute; top:10px; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px;\">\n      <div style=\"display:flex; align-items:center; gap:4px;\">\n        <ha-icon icon=\"mdi:printer-3d-nozzle\" style=\"color:#4CAF50; --mdc-icon-size:12px;\"></ha-icon>\n        <span style=\"font-size:10px; color:${sec}; text-transform:uppercase; letter-spacing:0.05em;\">Nozzle</span>\n      </div>\n      <span style=\"font-size:18px; font-weight:600; color:${pri}; line-height:1;\">${v}</span>\n      <span style=\"font-size:10px; color:${sec};\">${s}</span>\n    </div>\n  `;\n]]]"
                      },
                      "styles": {
                        "card": [
                          {
                            "background": "var(--ha-card-background, var(--card-background-color))"
                          },
                          {
                            "border-radius": "12px"
                          },
                          {
                            "padding": "0"
                          },
                          {
                            "height": "74px"
                          },
                          {
                            "position": "relative"
                          },
                          {
                            "box-shadow": "none"
                          },
                          {
                            "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                          }
                        ],
                        "custom_fields": {
                          "content": [
                            {
                              "position": "absolute"
                            },
                            {
                              "inset": "0"
                            },
                            {
                              "padding": "0"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "type": "custom:button-card",
                      "entity": "sensor.octoprint_bed_temperature",
                      "show_name": false,
                      "show_state": false,
                      "show_icon": false,
                      "tap_action": {
                        "action": "more-info"
                      },
                      "custom_fields": {
                        "content": "[[[\n  const sec = 'var(--secondary-text-color)';\n  const pri = 'var(--primary-text-color)';\n  const v = (Math.round(parseFloat(states['sensor.octoprint_bed_temperature']?.state) || 0)) + '\\u00B0C';\n  const s = 'target: ' + (Math.round(parseFloat(states['sensor.octoprint_bed_target']?.state) || 0)) + '\\u00B0C';\n  return `\n    <div style=\"position:absolute; top:10px; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px;\">\n      <div style=\"display:flex; align-items:center; gap:4px;\">\n        <ha-icon icon=\"mdi:radiator\" style=\"color:#4CAF50; --mdc-icon-size:12px;\"></ha-icon>\n        <span style=\"font-size:10px; color:${sec}; text-transform:uppercase; letter-spacing:0.05em;\">Print bed</span>\n      </div>\n      <span style=\"font-size:18px; font-weight:600; color:${pri}; line-height:1;\">${v}</span>\n      <span style=\"font-size:10px; color:${sec};\">${s}</span>\n    </div>\n  `;\n]]]"
                      },
                      "styles": {
                        "card": [
                          {
                            "background": "var(--ha-card-background, var(--card-background-color))"
                          },
                          {
                            "border-radius": "12px"
                          },
                          {
                            "padding": "0"
                          },
                          {
                            "height": "74px"
                          },
                          {
                            "position": "relative"
                          },
                          {
                            "box-shadow": "none"
                          },
                          {
                            "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                          }
                        ],
                        "custom_fields": {
                          "content": [
                            {
                              "position": "absolute"
                            },
                            {
                              "inset": "0"
                            },
                            {
                              "padding": "0"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "type": "custom:button-card",
                      "entity": "sensor.octoprint_print_time_left",
                      "show_name": false,
                      "show_state": false,
                      "show_icon": false,
                      "tap_action": {
                        "action": "more-info"
                      },
                      "custom_fields": {
                        "content": "[[[\n      const sec = 'var(--secondary-text-color)';\n      const pri = 'var(--primary-text-color)';\n      const t = parseFloat(states['sensor.octoprint_print_time_left']?.state) || 0;\n      const h = Math.floor(t / 3600);\n      const m = Math.round((t % 3600) / 60);\n      let primary = '--';\n      if (t > 0) {\n        primary = h > 0 ? `${h}h ${m}m` : `${m}m`;\n      }\n      let secondary = '';\n      const et = states['sensor.octoprint_approximate_completion_time']?.state;\n      if (et && !['unknown','unavailable',''].includes(et)) {\n        const d = new Date(et);\n        secondary = `Done: ~${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;\n      }\n      return `\n        <div style=\"position:absolute; top:10px; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px;\">\n          <div style=\"display:flex; align-items:center; gap:4px;\">\n            <ha-icon icon=\"mdi:clock-outline\" style=\"color:#4CAF50; --mdc-icon-size:12px;\"></ha-icon>\n            <span style=\"font-size:10px; color:${sec}; text-transform:uppercase; letter-spacing:0.05em;\">Time left</span>\n          </div>\n          <span style=\"font-size:18px; font-weight:600; color:${pri}; line-height:1;\">${primary}</span>\n          <span style=\"font-size:10px; color:${sec};\">${secondary}</span>\n        </div>\n      `;\n    ]]]"
                      },
                      "styles": {
                        "card": [
                          {
                            "background": "var(--ha-card-background, var(--card-background-color))"
                          },
                          {
                            "border-radius": "12px"
                          },
                          {
                            "padding": "0"
                          },
                          {
                            "height": "74px"
                          },
                          {
                            "position": "relative"
                          },
                          {
                            "box-shadow": "none"
                          },
                          {
                            "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                          }
                        ],
                        "custom_fields": {
                          "content": [
                            {
                              "position": "absolute"
                            },
                            {
                              "inset": "0"
                            },
                            {
                              "padding": "0"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "type": "custom:button-card",
                      "entity": "sensor.octoprint_current_z",
                      "show_name": false,
                      "show_state": false,
                      "show_icon": false,
                      "tap_action": {
                        "action": "more-info"
                      },
                      "custom_fields": {
                        "content": "[[[\n  const sec = 'var(--secondary-text-color)';\n  const pri = 'var(--primary-text-color)';\n  const v = states['sensor.octoprint_current_z']?.state + ' mm';\n  const s = '';\n  return `\n    <div style=\"position:absolute; top:10px; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px;\">\n      <div style=\"display:flex; align-items:center; gap:4px;\">\n        <ha-icon icon=\"mdi:axis-z-arrow\" style=\"color:#4CAF50; --mdc-icon-size:12px;\"></ha-icon>\n        <span style=\"font-size:10px; color:${sec}; text-transform:uppercase; letter-spacing:0.05em;\">Height</span>\n      </div>\n      <span style=\"font-size:18px; font-weight:600; color:${pri}; line-height:1;\">${v}</span>\n      <span style=\"font-size:10px; color:${sec};\">${s}</span>\n    </div>\n  `;\n]]]"
                      },
                      "styles": {
                        "card": [
                          {
                            "background": "var(--ha-card-background, var(--card-background-color))"
                          },
                          {
                            "border-radius": "12px"
                          },
                          {
                            "padding": "0"
                          },
                          {
                            "height": "74px"
                          },
                          {
                            "position": "relative"
                          },
                          {
                            "box-shadow": "none"
                          },
                          {
                            "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                          }
                        ],
                        "custom_fields": {
                          "content": [
                            {
                              "position": "absolute"
                            },
                            {
                              "inset": "0"
                            },
                            {
                              "padding": "0"
                            }
                          ]
                        }
                      }
                    }
                  ]
                },
                {
                  "type": "custom:button-card",
                  "entity": "sensor.octoprint_print_progress",
                  "show_name": false,
                  "show_state": false,
                  "show_icon": false,
                  "tap_action": {
                    "action": "none"
                  },
                  "custom_fields": {
                    "content": "[[[\n          const pct = Math.round(parseFloat(states['sensor.octoprint_print_progress']?.state) || 0);\n          let file = states['sensor.octoprint_print_file']?.state || '--';\n          if (['unknown','unavailable'].includes(file)) file = 'No file';\n          file = file.replace(/\\.gcode$/i, '');\n          return `\n            <div style=\"position:absolute; top:14px; left:16px; right:16px; bottom:14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px;\">\n              <div style=\"display:flex; align-items:center; gap:5px;\">\n                <ha-icon icon=\"mdi:chart-line\" style=\"color:#4CAF50; --mdc-icon-size:14px;\"></ha-icon>\n                <span style=\"font-size:11px; color:var(--secondary-text-color); text-transform:uppercase; letter-spacing:0.05em;\">Print progress</span>\n              </div>\n              <div style=\"display:flex; align-items:baseline; gap:10px;\">\n                <span style=\"font-size:32px; font-weight:600; color:var(--primary-text-color); line-height:1;\">${pct}%</span>\n                <span style=\"font-size:13px; color:var(--secondary-text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%;\">${file}</span>\n              </div>\n              <div style=\"width:100%; height:6px; background:rgba(var(--rgb-primary-text-color), 0.1); border-radius:3px; overflow:hidden; margin-top:auto;\">\n                <div style=\"width:${pct}%; height:100%; background:#4CAF50; border-radius:3px;\"></div>\n              </div>\n            </div>\n          `;\n        ]]]"
                  },
                  "styles": {
                    "card": [
                      {
                        "background": "var(--ha-card-background, var(--card-background-color))"
                      },
                      {
                        "border-radius": "12px"
                      },
                      {
                        "padding": "0"
                      },
                      {
                        "height": "74px"
                      },
                      {
                        "position": "relative"
                      },
                      {
                        "box-shadow": "none"
                      },
                      {
                        "height": "100px"
                      }
                    ],
                    "custom_fields": {
                      "content": [
                        {
                          "position": "absolute"
                        },
                        {
                          "inset": "0"
                        },
                        {
                          "padding": "0"
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "vertical-stack",
                  "cards": [
                    {
                      "type": "custom:webrtc-camera",
                      "url": "octoprint",
                      "mode": "mse",
                      "style": "border-radius: 12px 12px 0 0; overflow: hidden;"
                    },
                    {
                      "type": "custom:mushroom-light-card",
                      "entity": "light.3d_printer_lights",
                      "name": "Lamp",
                      "icon": "mdi:lightbulb",
                      "show_brightness_control": true,
                      "layout": "horizontal"
                    }
                  ]
                },
                {
                  "type": "custom:apexcharts-card",
                  "header": {
                    "show": false
                  },
                  "graph_span": "1h",
                  "series": [
                    {
                      "entity": "sensor.octoprint_tool_0_temperature",
                      "name": "Nozzle",
                      "color": "#E53935",
                      "stroke_width": 2,
                      "extend_to": "now"
                    },
                    {
                      "entity": "sensor.octoprint_bed_temperature",
                      "name": "Bed",
                      "color": "#FB8C00",
                      "stroke_width": 2,
                      "extend_to": "now"
                    }
                  ],
                  "apex_config": {
                    "chart": {
                      "height": 130,
                      "toolbar": {
                        "show": false
                      }
                    },
                    "stroke": {
                      "curve": "smooth"
                    },
                    "grid": {
                      "borderColor": "rgba(var(--rgb-primary-text-color), 0.05)"
                    },
                    "yaxis": {
                      "min": 0,
                      "max": 280,
                      "labels": {
                        "style": {
                          "fontSize": "9px"
                        },
                        "maxWidth": 28
                      }
                    },
                    "xaxis": {
                      "labels": {
                        "style": {
                          "fontSize": "9px"
                        }
                      },
                      "datetimeFormatter": {
                        "hour": "HH:mm",
                        "minute": "HH:mm"
                      }
                    },
                    "tooltip": {
                      "x": {
                        "format": "HH:mm"
                      }
                    },
                    "legend": {
                      "show": true,
                      "fontSize": "10px",
                      "horizontalAlign": "left",
                      "offsetX": 28
                    }
                  }
                },
                {
                  "type": "horizontal-stack",
                  "cards": [
                    {
                      "type": "custom:button-card",
                      "entity": "binary_sensor.octoprint_connected",
                      "show_name": false,
                      "show_icon": false,
                      "tap_action": {
                        "action": "none"
                      },
                      "custom_fields": {
                        "content": "[[[\n          const connected = states['binary_sensor.octoprint_connected']?.state === 'on';\n          const printing = states['binary_sensor.octoprint_printing']?.state === 'on';\n          const paused = states['binary_sensor.octoprint_paused']?.state === 'on';\n          const prints = states['sensor.octoprint_printer_prints_today']?.state || '0';\n          const ptime = states['sensor.octoprint_printer_print_time_today']?.state || '--';\n          const fil = ((parseFloat(states['sensor.octoprint_filament_daily']?.state) || 0) / 10).toFixed(1);\n\n          const row = (label, value, vc) => `\n            <div style=\"display:grid; grid-template-columns:1fr auto; align-items:center; padding:5px 0; border-bottom:1px solid rgba(var(--rgb-primary-text-color),0.06); width:100%;\">\n              <span style=\"font-size:12px; color:var(--secondary-text-color);\">${label}</span>\n              <span style=\"font-size:12px; font-weight:500; color:${vc || 'var(--primary-text-color)'}; text-align:right;\">${value}</span>\n            </div>`;\n          return `\n            <div style=\"position:absolute; top:14px; left:16px; right:16px; bottom:14px; display:flex; flex-direction:column;\">\n              <div style=\"display:flex; align-items:center; gap:5px; margin-bottom:10px;\">\n                <ha-icon icon=\"mdi:stethoscope\" style=\"color:#4CAF50; --mdc-icon-size:14px;\"></ha-icon>\n                <span style=\"font-size:11px; color:var(--secondary-text-color); text-transform:uppercase; letter-spacing:0.05em;\">Diagnostics</span>\n              </div>\n              ${row('Connected', connected ? 'Yes' : 'No', connected ? '#4CAF50' : '#F44336')}\n              ${row('Status', printing ? (paused ? 'Paused' : 'Printing') : 'Idle', printing ? '#4CAF50' : null)}\n              ${row('Prints today', prints, null)}\n              ${row('Time today', ptime + ' h', null)}\n              ${row('Filament today', fil + ' m', null)}\n            </div>\n          `;\n        ]]]"
                      },
                      "styles": {
                        "card": [
                          {
                            "background": "var(--ha-card-background, var(--card-background-color))"
                          },
                          {
                            "border-radius": "12px"
                          },
                          {
                            "padding": "0"
                          },
                          {
                            "height": "74px"
                          },
                          {
                            "position": "relative"
                          },
                          {
                            "box-shadow": "none"
                          },
                          {
                            "height": "190px"
                          }
                        ],
                        "custom_fields": {
                          "content": [
                            {
                              "position": "absolute"
                            },
                            {
                              "inset": "0"
                            },
                            {
                              "padding": "0"
                            }
                          ]
                        }
                      }
                    },
                    {
                      "type": "vertical-stack",
                      "cards": [
                        {
                          "type": "horizontal-stack",
                          "cards": [
                            {
                              "type": "custom:button-card",
                              "entity": "switch.octoprint_connect_to_printer",
                              "show_state": false,
                              "tap_action": {
                                "action": "toggle"
                              },
                              "name": "Connect",
                              "icon": "mdi:lan-connect",
                              "state": [
                                {
                                  "value": "off",
                                  "name": "Disconnect",
                                  "icon": "mdi:lan-disconnect"
                                }
                              ],
                              "styles": {
                                "card": [
                                  {
                                    "height": "91px"
                                  },
                                  {
                                    "border-radius": "12px"
                                  },
                                  {
                                    "box-shadow": "none"
                                  },
                                  {
                                    "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                                  },
                                  {
                                    "background": "var(--ha-card-background, var(--card-background-color))"
                                  }
                                ],
                                "name": [
                                  {
                                    "font-size": "11px",
                                    "font-weight": "500"
                                  }
                                ],
                                "icon": [
                                  {
                                    "--mdc-icon-size": "26px"
                                  },
                                  {
                                    "margin-top": "6px"
                                  },
                                  {
                                    "color": "[[[ return states['switch.octoprint_connect_to_printer']?.state === 'on' ? '#4CAF50' : 'var(--secondary-text-color)'; ]]]"
                                  }
                                ]
                              }
                            },
                            {
                              "type": "custom:button-card",
                              "entity": "switch.octoprint_camera_snapshot",
                              "show_state": false,
                              "tap_action": {
                                "action": "toggle"
                              },
                              "name": "Snapshots",
                              "icon": "mdi:camera",
                              "state": [
                                {
                                  "value": "off",
                                  "name": "Snapshots",
                                  "icon": "mdi:camera-off"
                                }
                              ],
                              "styles": {
                                "card": [
                                  {
                                    "height": "91px"
                                  },
                                  {
                                    "border-radius": "12px"
                                  },
                                  {
                                    "box-shadow": "none"
                                  },
                                  {
                                    "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                                  },
                                  {
                                    "background": "var(--ha-card-background, var(--card-background-color))"
                                  }
                                ],
                                "name": [
                                  {
                                    "font-size": "11px",
                                    "font-weight": "500"
                                  }
                                ],
                                "icon": [
                                  {
                                    "--mdc-icon-size": "26px"
                                  },
                                  {
                                    "margin-top": "6px"
                                  },
                                  {
                                    "color": "[[[ return states['switch.octoprint_camera_snapshot']?.state === 'on' ? '#4CAF50' : 'var(--secondary-text-color)'; ]]]"
                                  }
                                ]
                              }
                            }
                          ]
                        },
                        {
                          "type": "horizontal-stack",
                          "cards": [
                            {
                              "type": "custom:button-card",
                              "name": "GCode viewer",
                              "icon": "mdi:cube-outline",
                              "show_state": false,
                              "tap_action": {
                                "action": "url",
                                "url_path": "https://ender5pro.duckdns.org/#gcode"
                              },
                              "styles": {
                                "card": [
                                  {
                                    "height": "91px"
                                  },
                                  {
                                    "border-radius": "12px"
                                  },
                                  {
                                    "box-shadow": "none"
                                  },
                                  {
                                    "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                                  },
                                  {
                                    "background": "var(--ha-card-background, var(--card-background-color))"
                                  }
                                ],
                                "name": [
                                  {
                                    "font-size": "11px",
                                    "font-weight": "500"
                                  }
                                ],
                                "icon": [
                                  {
                                    "--mdc-icon-size": "26px"
                                  },
                                  {
                                    "margin-top": "6px"
                                  },
                                  {
                                    "color": "#4CAF50"
                                  }
                                ]
                              }
                            },
                            {
                              "type": "custom:button-card",
                              "name": "Pretty GCode",
                              "icon": "mdi:cube-scan",
                              "show_state": false,
                              "tap_action": {
                                "action": "url",
                                "url_path": "https://ender5pro.duckdns.org/#tab_plugin_prettygcode"
                              },
                              "styles": {
                                "card": [
                                  {
                                    "height": "91px"
                                  },
                                  {
                                    "border-radius": "12px"
                                  },
                                  {
                                    "box-shadow": "none"
                                  },
                                  {
                                    "border": "1px solid rgba(var(--rgb-primary-text-color), 0.08)"
                                  },
                                  {
                                    "background": "var(--ha-card-background, var(--card-background-color))"
                                  }
                                ],
                                "name": [
                                  {
                                    "font-size": "11px",
                                    "font-weight": "500"
                                  }
                                ],
                                "icon": [
                                  {
                                    "--mdc-icon-size": "26px"
                                  },
                                  {
                                    "margin-top": "6px"
                                  },
                                  {
                                    "color": "#4CAF50"
                                  }
                                ]
                              }
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}