3

Monitor your solar setup in your browser

TUTORIAL

The WiFi connection is started, and a static IP address

assigned in the following section.

void startWIFI(void) {

Serial.print(“Connecting to “);

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(200);

}

WiFi.config(ip, gateway, subnet);

}

An instance of a WiFi server is created to

receive requests to access the website from other

devices, clients.

WiFiServer myserver(80);

String req;

FEELING RESPONSIVE

The sketch waits for web requests to be received over

the WiFi and then returns the webpage with the latest

data from the sensor (Figure 1).

The dashboard is drawn by drawing a black

background circle, an arc with angle related to the

value to be displayed, a silver circle on top with the

value displayed as a number, and finally a text title. The

complicated bit is drawing the correct arc. This involves

calculating the screen co-ordinates of the four vertices

of the light blue arc, shown in the diagram (Figure 2).

A full arc will have an angle of 270 degrees.

The webpage is created by printing lines of HTML

and SVG code to the client. HTML instructions mainly

cover setting up a webpage, layout, and text. To produce

interesting graphics, an extension like SVG is required.

Each time the solar web server receives a valid

request from a client, it calculates the co-ordinates of

the arc on the dashboard and produces the image. SVG

files are a text-based XML format, so we can generate

them easily in the code.

The main SVG instructions used are circle, path with

the arc(A) setting, and text.

In the sketch, when a double quote (“) character

has to be sent to a client using the client.println()

instruction, it must be preceded by \, or it will be

interpreted as the end of a string. This makes the code

more complicated to read. For example, the first line in

the SVG creation is sent with:

client.println(“<svg version=\”1.1\” xmlns=\

“http://www.w3.org/2000/svg\”

height=\”” +

String(3*centreOffsetY)

+ “\” width=\””

To allow it to be easily adapted for other applications,

the webpage drawing code is split into two sections:

the first is application-specific, and the second a

generic part which draws the dashboard.

In the application-specific part, the message that

a client will use to request information, the units of

the variable being displayed, the title for the display,

and the full-scale value are specified. In addition, it

needs a function called dashCollectValue() which will

return the value to be displayed. This value should be

between zero and the full-scale value.

The dashboard is drawn in the watchForMessage()

function. It starts by responding to contact from

the client over the WiFi. The dashboard creation

section takes the value to be displayed, calculates

the co-ordinates of the arc, and then ‘prints’ the

appropriate HTML and SVG code to the client. This

section is not reproduced in full here, but detailed

The Arduino IDE runs on PCs using the Linux, Windows, and Mac OSX operating systems. Go

to the Arduino site arduino.cc and download the appropriate version for your PC.

To set up the Arduino IDE for ESP8266 boards, follow the straightforward instructions

at hsmag.cc/hHqHDU.

Once this is complete, select the correct board in the IDE by using Tools > Board and

choosing NodeMCU 1.0.

The TSL2561 library can be directly loaded in the Arduino IDE:

1. In the Arduino IDE, select Sketch > Include Library > Manage Libraries.


2. This will display a new window. The IDE will contact a server to update a reasonably
   comprehensive list of libraries available. Once this has finished, type TSL2561 in the
   filter box to find the library for this project; the TSL2561 one from SparkFun is the
   required one.


3. Click More Info, select the latest version, and then Install.

INSTALLING THE ARDUINO IDE FOR

ESP8266-BASED BOARDS

B

A

D

C

Figure 2

Dashboard

arc labelling