Setup HomeAssistant on QNAP Container using Docker

Lets begin by making the Home Assistant installation, find it on QNAP Container Station. Go to the ‘Create’ menu, search ‘homeassistant’ in the search bar, make sure you select the ‘Docker Hub’ tab as the ‘Recommended’ tab will shows an out of date version. You should see homeassistant/home-assistant click on ‘Install’ or ‘Create’.

I recommend that you manually select the highest version, ‘latest’ will choose the version you have currently installed as ‘latest’. This would help avoid getting confused, when you wish to update HomeAssistant, the latest at the moment is 0.112.4.

Add a new “TZ” environment to set your TimeZone, check out the List of tz database time zones

Set a static volume for the container to use, I just use QNAP “New Volume” directory. You can make your own volume using “Volume from host”, though I find permissions being a problem on some docker. For this example I shall make a folder ‘homeassistant-config’ that will point to the docker ‘/config’ folder.

Remember to expose the container 8123 port to any host port, can set it as 8123 if you wish.

You should have the basic installation ready at [I.P Address]:[Port].

You now have HomeAssistant running.

Add QNAP Sensor

What do HomeAssistant do for you and your QNAP? You can have it to monitor multiple QNAP all in one place, let me show you how.

You need to create a homeassistant account that is admin, it doesn’t need any other access but just being admin. So you can deny all “Application Privileged” and “Shared Folder Permissions”. This account will be used for HomeAssistant to login and check the status of the device.

Go to FileStation and get to the homeassistant-config volume, it is located in a nested directory.

Container/container-station-data/lib/docker/volumes/homeassistant-config/_data

We need to add the user details for HomeAssistant, it is best to put these details in the ‘secrets.yaml’.

qnap_1_host: [ip_address]
qnap_1_username: [username]
qnap_1_password: [password]
qnap_1_port: [port]
qnap_1_ssl: false
qnap_1_verify_ssl: false

Create a new yaml file called sensors.yaml, easier to just copy and paste any yaml file and rename it. The sensors file is used to provide any sensor device for HomeAssistant to monitor, for example we want to use the QNAP integration sensor. https://www.home-assistant.io/integrations/qnap/

For good practices do not put your configurations such as username and password outside of the secret file, otherwise it can be read in plain text. HomeAssistant will know that ‘!secret” means to get the config parameter from the secrets.yaml file. You can use ‘#’ to comment out unneeded things to monitor.

  - platform: qnap
    host: !secret qnap_1_host
    port: !secret qnap_1_port
    username: !secret qnap_1_username
    password: !secret qnap_1_password
    ssl: !secret qnap_1_ssl
    verify_ssl: !secret qnap_1_verify_ssl
    monitored_conditions:
      - status
      - system_temp
      - cpu_temp
      - cpu_usage
      - memory_free
      - memory_used
#      - network_tx
#      - network_rx
      - drive_temp
      - volume_size_free
      - volume_size_used

Edit the configuration file to include the sensors.yaml file for sensor.

sensor: !include sensors.yaml

Restart HomeAssistant, either through HomeAssistant by Configuration>Server Control>Restart or just restart the container.

You should see all the sensors available for your QNAP

You can make the interface much better by ‘Configure UI’

It will warn you that HomeAssistant will manage the layout for you, just press ‘Take Control’

First step add ‘Gauge’ card.

You will be able to select which ever entity of the sensor to display as a gauge, RAM and Volumes are great to be displayed as gauges but it’s personal preference.

How about displaying CPU temperature, we can just use a sensor card.

This will display the temperature in a simple layout.

I prefer to have a line graph for extra details.

Now that you understand how to add basic cards on the screen, the cards seems to waste alot of space for one card. There is the horizontal stack that you can used to group these cards.

Due to the complexity of this card, you have to manually add the config yourself.
For example to show the System Temp, CPU Temp and CPU load you add this:

type: horizontal-stack
cards:
  - type: sensor
    entity: sensor.[name]_system_temperature
    name: System
    accuracy: 25
    graph: line
  - type: sensor
    entity: sensor.[name]_cpu_temperature
    name: CPU
    accuracy: 25
    graph: line
  - type: sensor
    entity: sensor.[name]_cpu_usage
    name: CPU Usage
    accuracy: 25
    graph: line

If you want to go crazy you can use ‘Picture Elements’ to have image background with entity on top. Here’s example how I set up my QNAP switch summary cards.

Save this image, and put them in the ‘homeassistant-config’ folder, and then you make ‘www’ folder and then an ‘images’ folder

Make a ‘Horizontal Stack’ card in manual, here is a conditional element to check if the entity exist before displaying. Useful in prevent empty bays being displayed.

type: horizontal-stack
cards:
  - type: picture-elements
    image: /local/images/qnap_qgd-1600p.png
    elements:
      - type: conditional
        conditions:
          - entity: sensor.[name]_status
            state_not: unavailable
        elements:
          - type: state-label
            entity: sensor.[name]_status
            prefix: 'Status: '
            style:
              top: 85%
              left: 50%
              color: black
      - type: conditional
        conditions:
          - entity: sensor.[name]_temperature_drive_0_1
            state_not: unavailable
        elements:
          - type: state-label
            entity: sensor.[name]_temperature_drive_0_1
            prefix: ''
            style:
              top: 29%
              left: 35%
              color: white
      - type: conditional
        conditions:
          - entity: sensor.[name]_temperature_drive_0_2
            state_not: unavailable
        elements:
          - type: state-label
            entity: sensor.[name]_temperature_drive_0_2
            prefix: ''
            style:
              top: 53%
              left: 35%
              color: white

You would need to restart HomeAssistant for it to see the new ‘www/images/’ folder. Once done you get this.

Additional custom cards in another post:

HomeAssistant Custom Card