Smart Garden – When DFRobot meets HomeAssistant(Part 2)
0 563 Medium

Part 1:Link      Part 3: Link

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.

projectImage

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
projectImage

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

CODE
$ sudo apt-get install mosquitto 
projectImage
projectImage

3. Install the Mosquitto clients 

CODE
$ sudo apt-get install mosquitto-clients
projectImage

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

CODE
$ mosquitto_sub -t “test_topic”
projectImage

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” 
projectImage

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

projectImage

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
projectImage

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
projectImage

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
projectImage

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

projectImage

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”
projectImage

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

projectImage

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

CODE
$ mosquitto_sub -t “/test/light”
projectImage

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.

projectImage

You also can add a picture on your web site.

projectImage

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.

projectImage

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
licensBg
0