Smart Garden – When DFRobot meets HomeAssistant(Part 2)

42 Aug 12.2020

0 40747 Medium

In this section, we are going to create and configure some files to set up the user interface.

Before that, we will set up an MQTT broker on the LattePanda first. MQTT (Message Queuing Telemetry Transport) is a lightweight protocol, based on the principle of publishing messages and subscribing to topics.

In this project, the EPS32 module plays a client role to collect the information from the sensors and publish it with different topics, ie. /smartgarden/humidity, /pond/temperature. And the LattePanda plays both the MQTT server and web server.

Now let’s install Mosquitto Broker

1.Update the package list first

CODE

$ sudo apt-get update

2. Install the latest Mosquitto Broker and enter y to continue

CODE

$ sudo apt-get install mosquitto

3. Install the Mosquitto clients

CODE

$ sudo apt-get install mosquitto-clients

4. Now we can test the MQTT server now, open a terminal and subscribe a topic “test_topic”

CODE

$ mosquitto_sub -t “test_topic”

5. Open another new terminal, and publish a message “hello dfrobot” to the topic “test_topic”

CODE

$ mosquitto_pub -m “hello dfrobot” -t “test_topic”

6.Then you will find a message “hello dfrobot” received and displayed in other terminal where mosuitto_sub is running.

Now we have a MQTT server running on the LattePanda.

Home Assistant configuration

In the previous instruction, we have launched a home assistant for the first time, and it will create some default files in the directory you set. And there is a file named “configuration.yaml”, which is a main file containing integrations to be loaded. We will configure this file first.

Change the directory first and list the files, you will see the default files and use nano to edit the configuration.yaml

CODE

$ cd HA_stable/
$ ls
$ sudo nano configuration.yaml

Replace the original code with the following code.

Homeassistant:

You can change the basic information as you want.

Lovelace:

It’s the Home Assistant user interface, don’t worry about this, we will talk about this latter.

MQTT:

We have set up the MQTT broker just now, please change it to your own IP address. (you can use ifconfig command to find the IP address)

Sensor and switch: usually every entity need its own entry in the configuration file. In this example, we create a temperature sensor and a light switch entity here. And as you can see we set the MQTT topics here. The topic for temperature is “/test/temperature” and the topic for light switch is "/test/light".

CODE

homeassistant:
  name: Dfrobot
  latitude: 31.0449
  longitude: 121.4012
  elevation: 65
  unit_system: metric
  time_zone: Asia/Shanghai

lovelace:
  mode: yaml

mqtt:
  broker: 192.168.9.17
  port: 1883
  client_id: home-assistant-1
  keepalive: 60


sensor 1:
  - platform: mqtt
    state_topic: "/test/temperature"
    unit_of_measurement: "C"
    name: "temperature"


switch:
  - platform: mqtt
    name: "lighting"
    command_topic: "/test/light"
    payload_on: "1"
    payload_off: "0"
    qos: 0
    retain: true

Save the configuration file (CTRL+X, y and enter).

Now we need to configure the ui-lovelace.yaml. This file will not be generated automatically.

CODE

$ sudo nano ui-lovelace.yaml

And copy and paste the following code.

CODE

title: DFRobot
views:
  - icon: mdi:flower
    id: home
    title: Home
    cards:
#sensor 
      - type: vertical-stack
        cards:
          - type: entities 
            title: Sensor
            entities:
              - sensor.temperature

#switch
      - type: vertical-stack
        cards:
          - type: entities
            title: Switch
            entities:
              - entity: switch.lighting
                icon: mdi:lightbulb-on

Save the file (CTRL+X, y and enter).

And now we can test we have done with the UI. Restart the home assistant.

CODE

$ sudo docker restart home-assistant

Open a browser and enter localhost:8123 (or yourIPaddress:8123). You should have following the page.

You probably find that the value of the temperature is unknown. That’s because there is no data sent to the MQTT server. We can send a fake value to test if the MQTT broker work properly. Open a new terminal, and publish a message “28” to the topic “/test/temperature”.

CODE

$ mosquitto_pub -t “/test/temperature” -m “28”

Then you will see the temperature value on the website changed to 28.

We can also check the switch function. Open a terminal and subscribe a topic “/test/light”.

CODE

$ mosquitto_sub -t “/test/light”

Try toggling the light switch on the website. You will see the messages “1” and “0” received and displayed in terminal.

Now we can try adding some words and pictures on our website. Edit the ui-lovelace.yaml.

CODE

$ sudo nano ui-lovelace.yaml

Replace original code with the following code

CODE

title: DFRobot

views:
  - icon: mdi:flower
    id: home
    title: Home
    cards:
      - type: vertical-stack
        cards:
         # - type: picture
         #   image: /local/images/DFRobot Logo/4.jpg
          - type: markdown
            title: Welcome to Smart Garden
            content: >
                   Powered by DFRobot and HA

Save the file (CTRL+X, y and enter).

And now we can test we have done with the UI. Restart the home assistant.

CODE

$ sudo docker restart home-assistant

Refresh the website. You will see the following page and you can edit the content in the ui-lovelace file as you want.

You also can add a picture on your web site.

You need to open the configuration folder and create a new folder named “www”.

And then I create an images folder and put any picture in it.

And now open the ui-lovelace file and uncomment the following code.

CODE

# - type: picture
#   image: /local/images/DFRobot Logo/4.jpg

Restart the home assistant and then you will see the picture shown on the website.

License

All Rights

Reserved

Tags Arduino IoT

42 Apr 08.2020

3010 M-point

21 Makelogs