Hy,
I added a HABPanel like Octodash and expanded the MQTT thing and items.
How can I create a Template from them?
What ist the best technic for Responsive Design?
the following is required for the panel:
Octodash: https://github.com/UnchartedBull/OctoDash
OctoPrint-MQTT: https://github.com/OctoPrint/OctoPrint-MQTT/blob/master/README.md
Things
Thing mqtt:topic:octoprint "octoprint" (mqtt:broker:psmqtt) @ "3D PRINTER" {
Channels:
Type string : connected "Connected" [ stateTopic="octoPrint/mqtt" ]
Type string : state "State" [ stateTopic="octoPrint/event/PrinterStateChanged", transformationPattern="JSONPATH:$.state_string" ]
Type string : event "Event" [ stateTopic="octoPrint/event/+", transformationPattern="JSONPATH:$._event" ]
Type string : filename "Filename" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.job.file.name" ]
Type number : progress "Progress" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.progress.completion" ]
Type number : printTime "Time Printed" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.progress.printTime" ]
Type number : printTimeLeft "Time Left" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.progress.printTimeLeft" ]
Type number : temperature_bed_actual "Temperature Bed Actual" [ stateTopic="octoPrint/temperature/bed", transformationPattern="JSONPATH:$.actual" ]
Type number : temperature_bed_target "Temperature Bed Target" [ stateTopic="octoPrint/temperature/bed", transformationPattern="JSONPATH:$.target" ]
Type number : temperature_hotend_actual "Temperature Hotend Actual" [ stateTopic="octoPrint/temperature/tool0", transformationPattern="JSONPATH:$.actual" ]
Type number : temperature_hotend_target "Temperature Hotend Target" [ stateTopic="octoPrint/temperature/tool0", transformationPattern="JSONPATH:$.target" ]
Type number : filvolume "Filament Volumen" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.job.filament.*.volume" ]
Type number : fillength "Filament Length" [ stateTopic="octoPrint/progress/printing", transformationPattern="JSONPATH:$.printer_data.job.filament.*.length" ]
Type string : fanspeed "Fanspeed" [ stateTopic="octoPrint/event/DisplayLayerProgress_progressChanged", transformationPattern="JSONPATH:$.fanspeed" ]
Type number : currentLayer "Current Layer" [ stateTopic="octoPrint/event/DisplayLayerProgress_progressChanged", transformationPattern="JSONPATH:$.currentLayer" ]
Type number : totalLayer "Total Layer" [ stateTopic="octoPrint/event/DisplayLayerProgress_progressChanged", transformationPattern="JSONPATH:$.totalLayer" ]}
Items
Group gOctoprint "octoprint" (gAll)
// MQTT
String OctoprintConnected "Connected [%s]" <network> (gOctoprint) {channel="mqtt:topic:octoprint:connected"}
String OctoprintState "State [%s]" <office> (gOctoprint) {channel="mqtt:topic:octoprint:state"}
String OctoprintEvent "Event [%s]" <office> (gOctoprint) {channel="mqtt:topic:octoprint:event"}
String OctoprintJobFileName "Filename [%.26s ...]" <office> (gOctoprint) {channel="mqtt:topic:octoprint:filename"}
Number:Dimensionless OctoprintJobProgressCompletion "Completion [%.0f %%]" <battery> (gOctoprint) {channel="mqtt:topic:octoprint:progress"}
Number OctoprintPrintTime "Time Printed [%.0f s]" <time> (gOctoprint) {channel="mqtt:topic:octoprint:printTime"}
String OctoprintPrintTimeString "Time Printed [%s]" <time> (gOctoprint)
Number OctoprintPrintTimeLeft "Time Left [%.0f s]" <time> (gOctoprint) {channel="mqtt:topic:octoprint:printTimeLeft"}
String OctoprintPrintTimeLeftString "Time Left [%s]" <time> (gOctoprint)
String OctoprintPrintETAString "ETA [%s]" <time> (gOctoprint)
DateTime OctoprintPrintETADateTime "ETA [%1$tA, %1$td.%1$tm.%1$tY %1$tH:%1$tM]" <time> (gOctoprint)
Number:Temperature OctoprintPrinterHotEndTemp "Nozzle temp [%.1f Ā°C]" <temperature> (gOctoprint) {channel="mqtt:topic:octoprint:temperature_hotend_actual"}
Number:Temperature OctoprintPrinterHotEndTempTarget "Nozzle target [%.1f Ā°C]" <temperature> (gOctoprint) {channel="mqtt:topic:octoprint:temperature_hotend_target"}
Number:Temperature OctoprintPrinterBedTemp "Bed temp [%.1f Ā°C]" <temperature> (gOctoprint) {channel="mqtt:topic:octoprint:temperature_bed_actual"}
Number:Temperature OctoprintPrinterBedTempTarget "Bed target [%.1f Ā°C]" <temperature> (gOctoprint) {channel="mqtt:topic:octoprint:temperature_bed_target"}
Number OctoprintFilVolume "Filament Volume [%.2f]" (gOctoprint) {channel="mqtt:topic:octoprint:filvolume"}
Number OctoprintFilLength "Filament Length [%.2f]" (gOctoprint) {channel="mqtt:topic:octoprint:fillenght"}
Switch OctoprintPower "Power" (gOctoprint) {channel="mqtt:topic:sonoff-plug-1:power"}
Switch OctoprintShutdownAfterPrint "Turn Off after Print" (gOctoprint)
Number OctoprintPrintTime "Time Printed [%.0f s]" <time> (gOctoprint) {channel="mqtt:topic:octoprint:printTime"}
Number OctoprintFilVolume "Filament Volume [%.2f]" (gOctoprint) {channel="mqtt:topic:octoprint:filvolume"}
Number OctoprintFilLength "Filament Length [%.2f]" (gOctoprint) {channel="mqtt:topic:octoprint:fillenght"}
String OctoprintFanspeed "Fanspeeed [%s]" <office> (gOctoprint) {channel="mqtt:topic:octoprint:fanspeed"}
Number OctoprintTotalLayer "Layer total [%.2f]" <flowpipe> (gOctoprint) {channel="mqtt:topic:octoprint:totalLayer"}
Number OctoprintCurrentLayer "Layer current [%.2f]" <flowpipe> (gOctoprint) {channel="mqtt:topic:octoprint:currentLayer"}
Here it the VIEW in Classic UI
Octodash on Raspberry HyperPixel 4.0 https://www.thingiverse.com/make:727128