Making Things Pretty in Home Assistant without HACS

[Nov. 3, 2021 edit: if you like Celsius for your printer feed, but use Imperial as your base measurement on HA, something broke the below process. I wrote a new post, adding some conversion templates to restore this feature. We now return you to the article...]

So my title is a little misleading. If you want the dark-grey theme, and the little icons in the third set of rows...you need HACS. But otherwise it's just stock-HA white, which is totally fine. 

Reading Home Assistant forums, browsing youtube videos - you hear the glory of HACS (Home Assistant Community Store). Home Assistant is free & open-source, done by volunteers, same with HACS. HACS comes with a disclaimer: it's risky. Don't use it unless you know a bit about Home Assistant.

And then there's some common-sense directions on how to install it. I pulled myself in, because I wanted themes and Font Awesome icons. I really don't want to tackle adding HACS or fontawesome as a tutorial - HACS was easy enough to do, fontawesome was...weird. It took multiple attempts, and I'm still not sure how it actually started working.

This is the "noctis-grey" theme

Error with Grids

This project is happening because I need it for the Home Assistant app on my Android phone. I *did* have an error "this.toggleAttribute is not a function" - for any grid button, but one of the developers suggested I try connecting through Chrome on the phone - after updating Chrome, I noticed I didn't have javascript enabled on Chrome for the Home Assistant IP...well, that solution wasn't obvious. But it works now.

On Android


What You Can Do Without HACS

If you've read my earlier posts, I had some long, blocky buttons. The new theme and icons make it a lot nicer to look at. You make small buttons in Lovelace without HACS - the only things that HACS enabled here were icons and the noctis-grey theme.

This v2.0 of my 3D Printer dashboard has two primary "grids", one for each printer - the same, except for which printer they point to. When you +ADD CARD, "grid" is all the way at the bottom - just type in "grid" in the search card box. I turn off "Render cards as squares" out of habit. I find one column looks nicer than stuffing in more columns.

I added a Gauge button for the top row, clicked the "+" to add an Entity button for the second row to show 4 sensor readings, another "+" to add another grid...this time with 4 columns - still no cards as squares. This gives you the 4 button row. My current flow just has them as buttons, but I might make them conditional buttons in the future - maybe they only appear when Octoprint is connected to the printer. 

Conditionals! 

Those are probably the most fun part of this. After you've added the 4 buttons in the grid, click on that initial "+" again, to add another component. This time search for "conditional". It has two parts to it: the "conditions" where you put one or more states that have to exist before the card will appear.

I made two conditional cards, based on "binary_sensor.octoprint_mini_printing" if it was on or off. (You do not need quotes for these states.) If the Octoprint Mini is not printing, I want the ability to use the "Z-home" button, to return my print head to its highest vertical position. If it IS printing...clicking the Z-home button doesn't do anything - Octoprint will disregard the command. On the flip side, "Cancel Print" doesn't do anything if there is no print.

As they take up the same logic - if one exists, the other one does not...it's not going to break things if I have only one showing at a time.

The other conditional card was situation where I wanted the button to go to the same place...but change the text on the button (from "Pause Print" to "Resume Print"). If "sensor.octoprint_mini_current_state" state is not equal to paused, it shows Pause. If the state is equal to paused, it will show Resume. (Technically, it only needs to pause when there is printing going on - but I didn't want an empty space.)

Realistically ALL of these things could be conditional blocks, except for turning on the Octoprint connection - everything else could show up when the button is clicked.

The Card Code

This is my card's code (the icons-as-coded won't work, unless you have fontawesome [solids] installed). You can just copy and paste this into a card, using the "Show Code Editor" option.

type: grid

cards:

  - type: gauge

    min: 0

    max: 100

    entity: sensor.octoprint_micro_job_percentage

  - type: horizontal-stack

    cards:

      - type: entities

        entities:

          - entity: sensor.octoprint_micro_current_state

          - entity: sensor.octoprint_micro_time_remaining

          - entity: sensor.octoprint_micro_actual_tool0_temp

          - entity: sensor.octoprint_micro_actual_bed_temp

        state_color: false

  - type: grid

    cards:

      - type: button

        tap_action:

          action: toggle

        entity: input_boolean.octoprint_micro_connect

        name: micro

        icon_height: 30px

        icon: 'fas:satellite-dish'

        show_state: false

      - type: button

        tap_action:

          action: toggle

        entity: input_boolean.octoprint_micro_preheat

        name: Preheat

        icon_height: 30px

        icon: 'fas:temperature-high'

      - type: button

        entity: input_boolean.octoprint_micro_extrude

        name: Extrude

        icon: 'fas:angle-double-down'

        icon_height: 30px

      - type: button

        tap_action:

          action: toggle

        entity: input_boolean.octoprint_micro_retract

        name: Retract

        icon: 'fas:angle-double-up'

        icon_height: 30px

    columns: 4

    square: false

  - type: grid

    cards:

      - type: conditional

        conditions:

          - entity: sensor.octoprint_micro_current_state

            state_not: paused

        card:

          type: button

          tap_action:

            action: toggle

          entity: input_boolean.octoprint_micro_resume

          name: Pause Print

          show_icon: false

      - type: conditional

        conditions:

          - entity: sensor.octoprint_micro_current_state

            state: paused

        card:

          type: button

          tap_action:

            action: toggle

          entity: input_boolean.octoprint_micro_resume

          name: Resume Print

          show_icon: false

      - type: conditional

        conditions:

          - entity: binary_sensor.octoprint_micro_printing

            state: 'on'

        card:

          type: button

          tap_action:

            action: toggle

          entity: input_boolean.octoprint_micro_cancel

          name: Cancel Print

          show_icon: false

      - type: conditional

        conditions:

          - entity: binary_sensor.octoprint_micro_printing

            state: 'off'

        card:

          type: button

          tap_action:

            action: toggle

          entity: input_boolean.octoprint_micro_home_z

          name: Z-home

          show_icon: false

    columns: 2

    square: false

columns: 1

square: false

Comments

Post a Comment

Popular posts from this blog

Home Assistant Controlling Octoprint through MQTT - Chapter 1

Image
I'm going to start listing software versions - sometimes I hit a wall, because of dated information. Home Assistant evolves continually...a year from now, this might have a different solution. Components and their versions: Home Assistant Core 2021.1.0 (HA) Operating System 5.9 (HA) Node Red 7.2.11 (HA) Mosquitto Broker 5.1 (HA) Octoprint 1.5.2 MQTT 0.8.7 (Octoprint plugin) MQTT-Subscribe 0.1.6 (Octoprint plugin) MQTT Explorer 0.3.5 (Linux, optional)  My goal is to create buttons in a Lovelace dashboard, to trigger actions for my two 3D printers. Actions like "connect/disconnect" to start a connection between Octoprint and the printer, "preheat nozzle" so I can have the nozzle go to 180 degrees Celsius to change filament, "Extrude" to extrude 10mm of filament, or "Retract" to retract 10mm of filament, and maybe a "heat bed" so I can heat up the bed to remove a print. I'll start with a "Connect" button for my Lulzbot ...
Read more

Setting up MQTT on HA and Octoprint

Image
  I'm going to start listing versions - sometimes I hit a wall, because of dated information. Home Assistant evolves continually...a year from now, this might have a different solution. Components and their versions: Home Assistant Core 2021.1.0 (HA) Operating System 5.9 (HA) Node Red 7.2.11 (HA) Mosquitto Broker 5.1 (HA - this is the MQTT Broker) Octoprint 1.5.2 MQTT 0.8.7 (Octoprint plugin) MQTT-Subscribe 0.1.6 (Octoprintg plugin) MQTT Explorer 0.3.5 (Linux, optional)  My goal is to create buttons in a Lovelace dashboard, to trigger actions for my two 3D printers. Actions like "connect/disconnect" to start a connection between Octoprint and the printer, "preheat nozzle" so I can have the nozzle go to 180 degrees Celsius to change filament, "Extrude" to extrude 10mm of filament, or "Retract" to retract 10mm of filament, and maybe a "heat bed" so I can heat up the bed to remove a print. I'm running Home Assistant on a...
Read more

Home Assistant Controlling Octoprint through MQTT - Chapter 2

Image
What I didn't mention in the previous post, was the struggle to get it working. I'm not a programmer or a savant that can pick up anything. The next part is wiring up other buttons for different commands, and that means using more of the Octoprint API, as of this writing, here: https://docs.octoprint.org/en/master/api/ Current issues Ongoing problem #1: I mentioned how I got connect to work. Using the same pseudo-code, it should be super easy to execute {"command":"disconnect"}. It even pops up the same area as the command: connect did...but it doesn't disconnect. Ongoing problem #2: Extrude/Retract - this happens frequently when changing out filament, or in some cases...the print fails to start after homing on the corners. Before the homing occurred, it retracted. If I were to just start again, it would retract again! (The nozzle needs to be preheated, extruded, and then turned off.) Ongoing problem #3: Preheat to 230/turn off - as I just mentioned in #...
Read more