scale project for wemos d1 | Botshop
Wifi Scale project for Wemos D1 board Part two

Wifi Scale project for Wemos D1 board Part two

wemos d1 project

Scale project for Wemos D1 part 2- from pallet wood 

Now that we got the scale to work with an Arduino it is time to see how we will get it to work with a Wemos D1 board so that we can view the scale data from a Wifi connection on a web browser. This can also be a web browser on a cellular phone if you so wish. In short, we want to now expand our project to an IOT (Internet of things) scale. This scale project for Wemos D1 part 2 focus on the wifi part of this project, in part one we focus more on the load cells and amplification so first have a look (there is a link above).

Getting the D1 to work with the Arduino IDE.

In our review of this board, we gave details on how to get it to work with your Arduino IDE in the “Use your Arduino IDE to program the chip” section.

To recap:
  1. To install drivers remove all previous esp boards download and
  2. install http://www.arduined.eu/files/CH341SER.zip
  3. next open file>preferences
  4. enter http://arduino.esp8266.com/stable/package_esp8266com_index.json in the additional board manager urls area
  5. open tools>board>board manager
  6. search ESP8266 and
  7. install “esp8266 by ESP8266 community” version “1.6.5-947-g39819f0”
  8. next restart the Arduino IDE then select
  9. tools>board>WeMos D1 R2 & mini
  10. select upload speed at 115200 baud

 

Scale project for Wemos D1 – Hooking up the load cell HX711 amplifier

In part one of this project, we showed you how to connect the load cells to the amplifier board as well as to an Arduino Uno. We also talked about the pin differences between the Arduino and Wemos D1. Below is a picture again as well as a diagram connecting the amp to the Wemos board.

In the code, we also show, as comments in the pinouts for the Arduino.

Wemos D1 pin assignments

Wemos diagram

The LCD screen pinout can also be seen in the code.

LiquidCrystal lcd(0, 2, 4, 14, 12, 13); // WEMOS pins differ from UNO pins translated to uno would be (8, 9, 4, 5, 6, 7)

Scale project for Wemos D1: Explaining the code

Connecting to your WIFI network

To connect to a WiFi connection we use these 2 libraries (all the WiFi libraries will be automatically installed with the ESP8266 files when you add the board to your Arduino IDE):

#include <ESP8266WiFi.h>
#include <WiFiClient.h>

Next, you need to enter your WiFii details to connect to the network. Look for the lines below in the code and change the **** with your network name and network password.

const char* ssid = "*********"; 
const char* password = "*******";

Setting up the board as a web server

The first thing to understand is that we want to setup the D1 as a web server. If you are not familiar with web servers it basically means that we want to hand out web pages to web browsers for displaying when the web browsers connect to the D1 board. Hence the name web server – it serves web pages to your browser when the browser connects to it.

In the code (see below) you will use a library called ESP8266WebServer.h and the code to start the web server is simple:

ESP8266WebServer server(80);

The (80) specify the port the server should listen to and is standard as all web browsers by default try to connect to web servers on port 80. A port is nothing more than a number that distinguishes what data is intended for what application on a server. Thus, a web browser will connect to the web server and communicate that it wants to connect to the software that is assigned the number 80. Port numbers are of cause very important when you have many applications like FTP, email etc on one server,  else there is no way you will know for what application the data to your server is for.

Web page code

A web page is a text file with very basic code in it, this code is called HTML, In short, HTML code tells your web browser how to display and what to display on the web browser. It tells your web browser things like the size, font and colour of the text, where to find the images in the web page, where on the page the images must display and so on. (Note, that the images are not “in” this text file but rather a link to where the browser will find it on either the Internet or in the web servers file directory). A web browser thus “understand” HTML code and will generate the page you see in the web browser according to this code.

Here is an example of HTML in the code we will use soon:

webString=”<html><head><meta http-equiv=’refresh’ content=’3′> </head><body>Weight: “+String((float)value)+”kg</body></html>”;

This image below is what you will see in your web browser:

browser view plain

In short all web page code start with <html> and end with </hml> . We then have the <head> tag that gives your browser information like the name of the page and so on, in the example above we use the “refresh” tag that tells the web browser to reload the page, in this case, every 3 seconds. This is required because we want the web page to refresh by itself so it will display the weight of the scale when the weight changes. The <body> tag tells the browser what it should actually display in the browser window and the </body> tag tells the browser when the end is reached of what should be displayed.  In between the body tags we display the Weight from the scale in the browser.

If you spice up your HTML knowledge a bit you can make it look better. I added a picture and some other formatting to the code so it shows our logo.

webString=”<html><head><meta http-equiv=’refresh’ content=’3′> </head><style>body {background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style><body><img src=’https://www.botshop.co.za/wp-content/uploads/2017/03/logowebsite2.png’><br><b>Weight: “+String((float)value)+”kg</body></html>”;

Here is the result:

browser view formatted

Connect to the D1 web server

Once your server is running use your web browser to connect to the D1. In the URL field in your web browser type the IP address (see below on where to get it) of your web server and press Enter. In our code, we created an additional page called test. To get to it use your ipaddress/test e.g 192.168.0.1/test

Get your IP from serial monitor. We simply used the code below to get the IP address you should connect to and that will display in serial monitor for you to know what the IP is. You can also display it on the LCD display if you so wish.

Serial.print(“IP address: “); // displays ssid and IP on serial monitor and also IP on LCD
Serial.println(WiFi.localIP()); //

Code

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <HX711.h>
#include <LiquidCrystal.h>

LiquidCrystal lcd(0, 2, 4, 14, 12, 13); // WEMOS pins differ from UNO pins translated to uno would be (8, 9, 4, 5, 6, 7)

#define DOUT 16 // uno pin 2
#define CLK 5 // uno pin 3

float value;
String webString=””;
#define calibration_factor 21900 // Do Not change unless other load cells are used
HX711 scale(DOUT, CLK); // initialize load cell amplifire

const char* ssid = “*********”; // function as metioned in bellow comments
const char* password = “*******”; //

ESP8266WebServer server(80); // starts server on port 80

const int led = 13;

void handleRoot() { //
digitalWrite(led, 1); //
server.send(200, “text/plain”, “please enter correct page”);
digitalWrite(led, 0); //
char temp[400]; //
} //

void handleNotFound(){ //
digitalWrite(led, 1); //
String message = “File Not Found\n\n”; //
message += “URI: “; //
message += server.uri(); //
message += “\nMethod: “; //
message += (server.method() == HTTP_GET)?”GET”:”POST”; //
message += “\nArguments: “; // typical error 404/page not found
message += server.args(); //
message += “\n”; //
for (uint8_t i=0; i<server.args(); i++){ //
message += ” ” + server.argName(i) + “: ” + server.arg(i) + “\n”; //
} //
server.send(404, “text/plain”, message); //
digitalWrite(led, 0); //
} //

void setup(void){
pinMode(led, OUTPUT);
digitalWrite(led, 0);
Serial.begin(115200);
WiFi.begin(ssid, password);
lcd.begin(16, 2);
Serial.println(“”);
scale.set_scale(calibration_factor); // calibrate scale
scale.tare(); // zero scale
/*
while (WiFi.status() != WL_CONNECTED) { // I have disabled this to allow client to play with device,
delay(500); // What this does is it waits for the WiFi to be connected
Serial.print(“.”); // and while waiting it displays which ssid it is trying to
lcd.setCursor(0,0); // connect to I was thinking to add a script to show all
lcd.print(“Connecting to”); // available ssid’s so the client can select which one to use
lcd.setCursor(0,1); // using the keypad on lcd shield and also enter the password
lcd.print(ssid); //
} //
delay(750); // allows enough time to see that its connecting
*/
Serial.println(“”); //
Serial.print(“Connected to “); //
Serial.println(ssid); //
Serial.print(“IP address: “); // displays ssid and IP on serial monitor and also IP on LCD
Serial.println(WiFi.localIP()); //
lcd.setCursor(0,1); //
lcd.print(WiFi.localIP()); //

if (MDNS.begin(“esp8266”)) {
Serial.println(“MDNS responder started”);
}

server.on(“/”, handleRoot); //home page

server.on(“/test”, [](){        //enter IP followed by /test
char temp[400]; //to display scale value
value=scale.get_units(), 0; //
webString=”<html><head><meta http-equiv=’refresh’ content=’3′> </head><body>Weight: “+String((float)value)+”kg</body></html>”; //this line has an automatic refresh built in it is also the string to display the value
server.send(200, “text/html”, webString); //
}); //

server.onNotFound(handleNotFound); // 404 error

server.begin();
Serial.println(“HTTP server started”);
}

void loop(void){
server.handleClient(); // monitors user interaction on web
value=scale.get_units(), 0; //
lcd.setCursor(0,0); //displays scale vallue and ip on lcd
lcd.print(“Wheight: “); //
lcd.print(value); //
lcd.print(“kg”); //for some reason this jumps around alot
delay(1000); //
}

scaleCode text file