SmartHome im Weihnachtshaus - AZ-Delivery

0 comments

The Christmas House kit has the Nano Microcontroller only has limited functions, such as turning on the light using the button next to the door.

In this blog post, the set is to be transformed into a small smart home with WiFi function with a Christmas look using a D1 mini microcontroller.

Hardware

For implementation you need:

Christmas House Kit

D1 mini ESP8266 (other versions also possible)

LED Christmas Tree kit (other versions also possible)

Connect the level converter to the D1mini using the silicone cables as follows:

Figure 1: Wiring D1mini

For the right side you can use a D1mini socket strip. If you have the appropriate tools, a crimped connection is of course the professional option.

After assembling the Christmas House kit according to the instructions, open the roof panel on the side of the battery box.

Now connect the relay and the DHT22 to the following connections on the Nano-Shields on.

DHT22	Shield	relay	Shield
+	V11	-	G7
OUT	S11	+	(V 7)
-	G11	S	S7

The already installed modules from the kit remain at the connections described in the instructions.

The WS2812 LED strip is not used in this blog, instead the LED Christmas tree is controlled via the relay. This can also be used by adjusting the number of LEDs.

Connect the LED tree as follows:

tree	relay	Shield
VCC		v
GND	NO
	COM	G

Figure 2: Connections for 5V power supply

Note:

If you supply the project with the relay and Christmas tree via an external voltage source (e.g. battery pack on the back), the additional components can cause the low dropout regulator to heat up significantly if there is a high current requirement. This can potentially lead to damage. If the current requirement is over 500mA, use a separate voltage source or a buck converter.

The relays and the DHT22 sensor can now be fixed in the house with double-sided adhesive tape, for example.

Continue to leave the rear portion of the roof open for the next steps.

Software

Since the Nano does not have a WLAN interface, the D1 mini is required. This person's sole task is to provide the web server for the control. The information is then sent to the UART interface Nano, which takes over the entire control of the components.

Since the two microcontrollers exchange data via the UART interface, the connection must be separated to flash a microcontroller.

Preparing Arduino IDE

If you are dealing with microcontrollers for the first time, you will still need to download the appropriate driver in order to be able to transfer the program to the board.

You can download the installation file for the appropriate driver here download.

For the D1 mini you need an additional package. To install it, copy the following link in the Arduino IDE under: File->Preferences->Additional boards manager URLs:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

and install the ESP32 package in the Arduino IDE board management.

Furthermore, libraries are required to be able to control the LCD display, the LED module and DHT22 sensor:

Adafruit_NeoPixel

LiquidCrystal_I2C

DHT_sensor_library

You can install the libraries using the library management integrated in the Arduino IDE or download them as .zip using the link from Github and go to
Sketch > include Library > Add .zip Library …

incorporate.

Code Nano

Download the following program Nano:

#include <Wire.h>
#include <Adafruit_NeoPixel.h>
#include <LiquidCrystal_I2C.h>
#include "DHT.h"

#define LED           A0
#define BUTTON        2
#define LDR           A3
#define RELAY         7
#define DHTPIN        11

#define NUMPIXELS     4
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

long lastMillis;

LiquidCrystal_I2C lcd(0x27, 16, 2);
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUMPIXELS, LED, NEO_GRB + NEO_KHZ800);
DHT dht(DHTPIN, DHTTYPE);

void handleSensors() {
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();

  float b = map(analogRead(LDR), 900, 100, 0, 100);
  //Sensorwerte Auslesen
  String json = "{";
  json += "\"v1\":" + String(b) + ",";
  json += "\"v2\":" + String(t) + ",";
  json += "\"v3\":" + String(h) + "";
  json += "}";

  Serial.println(json);
}

String readLine(Stream &port, unsigned long timeout = 1000) {
  String line = "";
  unsigned long start = millis();
  while (millis() - start < timeout) {
    while (port.available()) {
      char c = port.read();
      if (c == '\r') continue;
      if (c == '\n') return line;
      line += c;
      if (line.length() > 256) return line;
    }
  }
  return line;
}

void setup() {
  Serial.begin(9600);
  dht.begin();
  lcd.begin(16, 2);
  lcd.clear();
  lcd.backlight();
  pinMode(RELAY, OUTPUT);
  strip.begin();
}

void loop() {
  if(millis()-lastMillis >= 1000) { //every second
    handleSensors();
    lastMillis = millis();
  }

  String line = readLine(Serial);
  int idx1 = line.indexOf(';');
  int idx2 = line.indexOf(';', idx1 + 1);
  int idx3 = line.indexOf(';', idx2 + 1);
  int idx4 = line.indexOf(';', idx3 + 1);

  if (idx1 < 0 || idx2 < 0 || idx3 < 0 || idx4 < 0) return;

  String recvHexColor = line.substring(1, idx1);//.toInt();
  String recvText1    = line.substring(idx1 + 1, idx2);
  String recvText2    = line.substring(idx2 + 1, idx3);
  boolean relay = line.substring(idx3 + 1, idx4).toInt() == 1;

  unsigned long colorInt = strtoul(recvHexColor.c_str(), NULL, 16);

     for(int i=0; i<=4; i++) {
      strip.setPixelColor(i, colorInt);
    }
    strip.show();

  lcd.setCursor(0, 0);
  lcd.print(recvText1);
  lcd.setCursor(0, 1);
  lcd.print(recvText2);

  digitalWrite(RELAY, relay);
}

The complete code can here be downloaded.

Explanation:

At the beginning, the libraries are integrated and macros are created for the pin names of the connected modules.

This is followed by the initialization of the global variables and objects of the libraries.

The following method reads the sensor values and generates a json string from them, which is then sent to the D1mini via the serial interface (UART) so that the climate values can be displayed on the website. Since the LDR is only a resistor and therefore not calibrated at the factory, the actual limit values may vary. You can set this in the map() function. (900 below limit 0%; 100 upper limit 100%)

The following readLine() function forms a string from the individual characters received via the UART interface. The characters are added together here until a new line (\n) begins. The function is required for later data evaluation.

In setup(), the start methods of the libraries are called and the IO of the relay is configured as output.

The loop() starts by executing the handleSensors function every second. The time delay is implemented here with a comparison using the millis() function. This means the loop() is not blocked.
The string with the input from the web server is then evaluated and the LED is then set to the selected color, the text is shown on the display and finally the relay is set to the transmitted state.

Web server:

Now follows the html code which displays the web server:

<html>
<head>
<meta charset="UTF-8">
<title>AZ Christmas House Control</title>

<style>
body { font-family:Arial; margin: 20px; background:#f0f0f0; }
#box { padding:20px; background:white; border-radius:10px; width:300px; }
label { font-weight:bold; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input.input { display:none; }
.slider {
position: absolute; cursor: pointer; great: 0; left: 0; right: 0; bottom: 0;
background-color: #ccc; transition: .4s; border-radius: 24px;
}
.slider:before {
position: absolute; content: ""; height: 18px; width: 18px;
left: 3px; bottom: 3px; background-color:white;
transition: .4s; border-radius: 50%;
}
input.input:checked + .slider { background-color: #4CAF50; }
input.input:checked + .slider:before { transform: translateX(26px); }
</style>

</head>

<body>
<various id="box">
<h1> Christmas House </h1>
<h2> Smart home</h2>

<label>Lighting:</label><br>
<input.input type="color" id="color" onchange="sendColor()"><br><br>

<label>Display:</label><br>
<input.input type="text" id="t1" maxlength="16"><br><br>

<input.input type="text" id="t2" maxlength="16"><br><br>

<button onclick="sendText()">Ads</button><br><br>

<label>Tree:</label><br>
<label class="switch">
<input.input type="checkbox" id="toggle" onchange="sendToggle()">
<Spanish class="slider"></Spanish>
</label><br><br>

<h3>Climate:</h3>
Brightness: <Spanish id="v1">--</Spanish> % <br>
Temperature: <Spanish id="v2">--</Spanish> °C <br>
Humidity: <Spanish id="v3">--</Spanish> %H <br>

</various>

<script>
// ----------------- Load initial values -----------------
window.window.onload = function() {
fetch("/getState")
    .then(r => r.json())
    .then(data => {
      document.getElementById("color").value = data.color;
      document.getElementById("t1").value = data.text1;
      document.getElementById("t2").value = data.text2;
      document.getElementById("toggle").checked = data.toggle;
    });
};

// ---- Send RGB ----
function sendColor(){
let col = document.getElementById("color").value;
fetch("/setColor?hex=" + encodeURIComponent(col));
}

// ---- Send texts ----
function sendText(){
let tx1 = document.getElementById("t1").value;
let tx2 = document.getElementById("t2").value;
fetch("/setText?t1=" +tx1+ "&t2=" + tx2);
}

// ---- Send switch ----
function sendToggle(){
let st = document.getElementById("toggle").checked? 1 : 0;
fetch("/setToggle?state=" + st);
}

// ---- Get values from ESP ----
setInterval(()=>{
fetch("/values")
    .then(response => response.json())
    .then(data =>{
      document.getElementById("v1").innerHTML = data.v1;
      document.getElementById("v2").innerHTML = data.v2;
      document.getElementById("v3").innerHTML = data.v3;
    });
},1000);
</script>

</body>
</html>

Basically every html file is in one head and body divided. The configuration takes place in the head. This also includes the styling of the elements.

The body also contains the individual HTML elements such as input fields and buttons script Part which contains methods.
When you press a button, an assigned method is executed, which then transmits the input to the microcontroller.

However, the exact HTML functions and structure will not be discussed further here.

D1mini code

Download the full program (download at the end) on the D1mini:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

// Gespeicherte Werte
String colorHex = "#ff0000";
String text1 = "";
String text2 = "";
bool toggleState = false;

String data;
String jsonVal = "{\"v1\":-99,\"v2\":-99,\"v3\":-99}";

long lastMillis;

// ----------------------- HTML -----------------------
const char MAIN_page[] PROGMEM = R"=====(

//Webserver html//
)=====";

// ----------------------------------------------------------

void handleRoot() {
  server.send_P(200, "text/html", MAIN_page);
}

void handleSetColor() {
  colorHex = server.arg("hex");
  server.send(200, "text/plain", "OK");
}

void handleSetText() {
  text1 = server.arg("t1");
  text2 = server.arg("t2");
  server.send(200, "text/plain", "OK");
}

void handleSetToggle() {
  toggleState = (server.arg("state") == "1");
  server.send(200, "text/plain", "OK");
}

void handleValues() {
  server.send(200, "application/json", jsonVal);
}

void handleGetState() {
  String json = "{";
  json += "\"color\":\"" + colorHex + "\",";
  json += "\"text1\":\"" + text1 + "\",";
  json += "\"text2\":\"" + text2 + "\",";
  json += "\"toggle\":" + String(toggleState ? "true" : "false");
  json += "}";
  server.send(200, "application/json", json);
}

String readLine(Stream &port, unsigned long timeout = 1000) {
  String line = "";
  unsigned long start = millis();
  while (millis() - start < timeout) {
    while (port.available()) {
      char c = port.read();
      if (c == '\r') continue;
      if (c == '\n') return line;
      line += c;
      if (line.length() > 256) return line;
    }
    yield();
  }
  return line;
}

void setup() {
  Serial.begin(9600);

  WiFi.softAP("SmartHome", "");

  server.on("/", handleRoot);
  server.on("/setColor", handleSetColor);
  server.on("/setText", handleSetText);
  server.on("/setToggle", handleSetToggle);
  server.on("/values", handleValues);
  server.on("/getState", handleGetState);

  server.begin();
}

void loop() {
  if(millis()-lastMillis >= 500) {
    String paket = colorHex + ";" + text1 + ";" + text2 + ";" + toggleState + ";";
    Serial.println(paket);
    lastMillis = millis();
  }

  server.handleClient();
  data = readLine(Serial);
  if(data.indexOf("{") == 0) {
    jsonVal = data;
  }
}

The complete code can here be downloaded.

Explanation:

As in the code for the Nano, At the beginning, the libraries are integrated and objects and global variables are initialized.

The html code is also loaded into memory here. The entire html file has been omitted here for clarity.

The following methods are the callback functions of the web server, with which the entries are read and displayed when a change is made.

The readLine function basically corresponds to that in Nanoprogram used. The only difference is that the yield() function is used here, which allows functions to be executed in the background. This means there are no problems with the web server due to blocked background processes.

An access point is started in setup() so that you can connect directly to the D1mini and so no WiFi connection is necessary.
The callback methods are then assigned and the web server is started.

The loop() is again structured analogously to the Nano's program. Here the received string is not evaluated, but is sent directly to the server because it is already in json format.

After both microcontrollers have been flashed, plug the D1 mini assembly into the free UART pin header on the Nano-Shield. Make sure that it is connected correctly (you can use the GND pin as a reference in the above wiring.

After uploading, connect to the open “SmartHome” network. If you receive a notification that the network does not have Internet access, enable it Maintain connection for the network. Once connected to the network, open the browser on the connected device and enter the address 192.168.4.1. The following page will then be displayed where you can control the smart home.

Figure 3: Screenshot from the web server

Conclusion:

Now that you can control the individual parts of the project via a web server, you can still set up automations on the Nano program it in, for example to use the button as a control. However, make sure that no blocks (while or delay) are used in the loop() so as not to interrupt the web server's processing of the data.

With these automations and possibly additional sensors or modules, you can implement and expand your own small smart home project.

Have fun replicating it :)

For readers with advanced knowledge, it is also worth taking a look at the blog hack a tree, in which the Christmas tree kit is reprogrammed and you can program your own patterns.

Tags: Projekte für anfänger, Smart home, Specials

Previous article Next article