Category Archives: iot

Build a simple WFH Messaging System

Working from home – either you enjoy it, or doing so has been thrust upon you. As a world-class introvert I’ve always enjoyed being self-employed and working from my own office. However others do not, as they have missed out on the activity and interacting with other people in their workplace.

I was recently asked by an associate to make up a simple messaging system, that would allow them to indicate their work status and also request a coffee or whatnot from their husband, which has resulted in the simple messaging system described in this article – which you can build too.

Being somewhat lazy efficient I needed a simple WiFi-based solution that allowed for simple control of some digital output pins from a web page. A bit of research resulted with the Particle Photon, a compact WiFi-enabled microcontroller that includes all the Internet-connectivity without any hard work or recurring payments.

After consultation it was decided that there should be five messages that can be sent and will need to be indicated to the receiver:

  • “I’m in a meeting, do not disturb”
  • “I’m working alone, so I can be disturbed”
  • Bring coffee
  • Bring Water
  • “I’ve finished work for the day”

So that would need the control of five LEDs, and a buzzer to alert the receiver of new messages. Six digital outputs in total to be controlled remotely. Easily done with the Photon.

All the digital outputs on the Photon are 3.3V, and you can power the lot via the micro USB socket. Now let’s get started. I’ll go through the hardware first, then the software and connectivity.


First, let’s consider the hardware. We’ll need:

The whole thing is a minimalist design, as shown below:

The PCB shown in this article was made for a buzzer with 16mm between the pins, as it was available locally. If soldering is new to you, or you need a refresher – watch Dave Jones’ video.

This is a simple circuit you can knock out on a solderless breadboard or your own PCB with KiCAD). Click here for the Photon KiCAD library. Click here if you want the gerber files to order your own PCB. You can view the gerbers using tools such as gerblook.

At the time of writing this I have a few PCBs left over… if you live in Australia I’ll send you one for free – email

In my infinite wisdom I forgot to get some inline header sockets (as you don’t really want to directly solder the Photon to the PCB). However having hundreds spare, a work around was to use six 8 pin IC sockets, and trim one side of the pins off from each socket. Which worked …well enough:

Fitting the rest of the parts was a doddle, and resulted with the following board:

The messages were purposely not printed on the PCB silkscreen, instead all that white space is for the users to apply their own labels – as they may want to change the messages later on.

The M3 threaded spacers and nuts are fitted to the holes on the PCB to give it some legs to stand up on. So now that the hardware is finished, it’s time to get all this working with the code and connectivity.

Software and Connectivity

There are a few steps for you to complete in order to build this system, and I’ll run through them in order now.

First, follow the instructions provided by Particle which will involve you setting up a Particle account, registering and testing your Photon. During this process you will be given your “device ID” – save this as you’ll need it later. It will also save the WiFi access point details into the Photon, so do this step using the WiFi network that will host the messaging system.

Next, install the Particle CLI (Command Line Interface). It is available for Windows, Linux and MacOS. This takes about five minutes, so get up and have a stretch.

Now you need an access token, a unique identifier for your Particle account. Open the terminal on your computer and run the command “particle token create –never-expires“. You’ll be prompted for your Particle account email address and password, then presented with the token (the long random string of text). Save the token for later.

I’ve blocked out my email address and part of the token to keep troublemakers at bay.

The next step is to build the web page that contains the buttons to be pressed to send the required messages. Open a text editor and save the following as an HTML file:

<script src=""></script>
var particle = new Particle();
// This is incredibly insecure, and only ideal for local tasks of no consequence if things go wrong.
const accessToken = 'ENTER YOUR ACCESS TOKEN HERE';
const deviceId = 'ENTER YOUR DEVICE ID HERE';
function ledControl(cmd) {
// Used to turn on or off the LED by using the Particle.function "led"
document.getElementById("statusSpan").innerHTML = '';
particle.callFunction({deviceId, name:'led', argument: cmd, auth:accessToken}).then(
function(data) {
document.getElementById("statusSpan").innerHTML = 'Message sent.';
function(err) {
document.getElementById("statusSpan").innerHTML = 'Error calling device: ' + err;
<div id="mainDiv">
<h3>WFH Messaging System</h3>
<p><button id="ledOnButton" onclick="ledControl('D1On')">Working Alone.</button>&nbsp;
<button id="ledOffButton" onclick="ledControl('D0On')">In a meeting – DND.</button></p>
<button id="ledOnButton" onclick="ledControl('D2On')">I need coffee!</button>&nbsp;
<button id="ledOffButton" onclick="ledControl('D3On')">Please bring me some water.</button></p>
<button id="ledOnButton" onclick="ledControl('D4On')">Finished for the day.</button>&nbsp;
<p><span id="statusSpan"></span></p>
view raw hello.html hosted with ❤ by GitHub

Enter your access token and device ID as noted in the HTML file. Just for the record, this system is incredibly insecure and shouldn’t be used for anything of any consequence, so if you modify this to control your door locks or alarm system, that’s on you.

You don’t need to be an expert on HTML, however if you’re not sure about it check out this great HTML tutorial site.

Now open the file using a web browser, and make it a bookmark for the user to easily fine. You will be presented with a simple interface:

You can easily change the text on each button, just edit the HTML and save the file. Now review the HTML, and note that for each button there’s the text (for example):

onclick=”ledControl(‘D1On’)”>Working Alone.

This snippet will send the text “D1On” back to the Photon when the button “Working Alone.” is pressed. The idea is that we need all the buttons to send back a unique message to the Photon, so it knows what to do with the LEDs and/or buzzer. Take note that each button press sends a different piece of text back to the Photon.

Moving on, we now need to enter and upload the code to the Photon. In a web browser, visit You may need to log in to your Particle account during this process. After a moment, you’ll be presented with a text editor that may look familiar to anyone working with Arduino. Photon code is based off the Arduino plaform, so Arduino users or AVR C users will have a head start.

Give your project a title, then copy and paste the following code into the editor:

// WFH Messaging system.
// Modified version of code provided by documentation.
// Use at your own risk.
int led0 = D0;
int led1 = D1;
int led2 = D2;
int led3 = D3;
int led4 = D4;
int buzzer = D5;
void setup()
// set pins connected to LEDs and buzzer as outputs
pinMode(led0, OUTPUT);
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
pinMode(led3, OUTPUT);
pinMode(led4, OUTPUT);
pinMode(buzzer, OUTPUT);
// We are also going to declare a Particle.function so that we can turn the LEDs on and off from the cloud.
// This is saying that when we ask the cloud for the function "led", it will employ the function ledToggle() from this app.
// Turn off LEDs upon reset
digitalWrite(led0, LOW);
digitalWrite(led1, LOW);
digitalWrite(led2, LOW);
digitalWrite(led3, LOW);
digitalWrite(led4, LOW);
digitalWrite(buzzer, LOW);
void loop()
// Nothing to do here as waiting for text from control webpage
void soundAlert()
digitalWrite(buzzer, HIGH);
digitalWrite(buzzer, LOW);
void coffeeAlert()
for (int i=0; i<5; i++)
digitalWrite(buzzer, HIGH);
digitalWrite(buzzer, LOW);
void waterAlert()
for (int i=0; i<2; i++)
digitalWrite(buzzer, HIGH);
digitalWrite(buzzer, LOW);
int ledToggle(String command) {
// function receives a string from control webpage (the commands such as D0On) and acts on them
if (command=="D0On") {
digitalWrite(led0,HIGH); // in a meeting – DND
digitalWrite(led1,LOW); // turn off working alone LED
digitalWrite(led4,LOW); // turn off finished for the day LED
return 1;
else if (command=="D1On") {
digitalWrite(led1,HIGH); // working alone
digitalWrite(led0,LOW); // turn off DND LED
digitalWrite(led4,LOW); // turn off finished for the day LED
return 0;
else if (command=="D2On") {
digitalWrite(led2,HIGH); // coffee request
return 0;
else if (command=="D3On") {
digitalWrite(led3,HIGH); // water request
return 0;
else if (command=="D4On") {
digitalWrite(led4,HIGH); // finished for the day
digitalWrite(led0,LOW); // cancel DND LED if on
digitalWrite(led1,LOW); // cancel working alone LED if on
return 0;
else {

This code configures the digital output pins for the LEDs and buzzer from lines 5 to 10, which are then set to outputs from lines 15 to 20. We then turn them all off from lines 27 to 32, so every time the Photon is reset or turned on after a power off, no LEDs or the buzzer are on.

On line 23 we have the following:


This the link between the code on the HTML page you created earlier, and the function starting from line 70 in the Photon code. “led” is linked in the HTML line with “particle.callFunction”, and “ledToggle” is the function in the Photon code.

So whenever a button is pressed, the message (such as “D4On”) winds its way from the web browser via the magic of the Internet to the Photon, and then compared against the “if” statements in the function from line 73.

For example, when “D4On” is received, it is matched at line 101 by the Photon, which then turns on LED number 4 (for “Finished for today”), and also turns off the “DND” and “Working Alone” LEDs.

For all the other messages you can follow the code from line 73 to see how each button press on the webpage controls various combinations of LEDs and buzzer outputs. To save time there’s three custom buzzer functions that are used for differents audible alerts, so the message recipient can hear if the sender’s status has changed, or if they want a coffee or water. Pity the end user of this.

Finally, when you’ve entered the code in the Photon editor, click the little folder a the top-left of the screen which saves your code in the online storage provided by Particle:

Then you can upload the code to the Photon by clicking the lightning bolt. If there are no errors in the code, it will be compiled and shot off to the Photon. During this process, the LED on the Photon will blink slowly then quickly, then “breathe” on and off when it’s ready to go.

This could take up to a minute depending on your Internet connection. However if there’s something wrong, this will be shown in the bottom of the Photon editor page. Follow the messages to determine what’s wrong, then save and try again.

By now it should all be working. Now add labels next to the LEDs for the recipient to know what the sender is trying to say or demand, and you’re finished. A quick demonstration is shown in the following video:

So there you have it. On a broader sense, this can also be considered a demonstration of how to easily control things from a distance using a Particle Photon and a web-enabled device.

I hope you enjoyed making this or at least reading about it. If you find this sort of thing interesting, please consider ordering one or both of my books from No Starch Press, or other book sellers:

  • Arduino Workshop, 2nd Edition – a hands-on introduction to electronics and Arduino with 65 projects
  • AVR Workshop – A comprehensive introduction to working with electronics and the Microchip AVR 8-bit family of microcontrollers with over 55 projects

And as always, have fun and make something.

Arduino Tutorials – Chapter 16 – Ethernet

In this chapter we will introduce and examine the use of Ethernet networking with Arduino over local networks and the greater Internet.

It will be assumed that you have a basic understanding of computer networking, such as the knowledge of how to connect computers to a hub/router with RJ45 cables, what an IP and MAC address is, and so on. Furthermore, here is a good quick rundown about Ethernet.

Getting Started

You will need an Arduino Uno or compatible board with an Ethernet shield that uses the W5100 Ethernet controller IC (pretty much all of them):

W5100 Ethernet shield for Arduino from PMD Way

Furthermore you will need to power the board via the external DC socket – the W5100 IC uses more current than the USB power can supply. A 9V 1.5A plug pack/wall wart will suffice.

Finally it does get hot – so be careful not to touch the W5100 after extended use. In case you’re not sure – this is the W5100 IC:

W5100 Ethernet shield for Arduino from PMD Way

Once you have your Ethernet-enabled Arduino, and have the external power connected – it’s a good idea to check it all works. Open the Arduino IDE and select File > Examples > Ethernet > Webserver. This loads a simple sketch which will display data gathered from the analogue inputs on a web browser. However don’t upload it yet, it needs a slight modification.

You need to specify the IP address of the Ethernet shield – which is done inside the sketch. This is simple, go to the line:

IPAddress ip(192,168,1, 177);

And alter it to match your own setup. For example, in my home the router’s IP address is, the printer is and all PCs are below …50. So I will set my shield IP to by altering the line to:

IPAddress ip(10,1,1,77);

You also have the opportunity to change your MAC address. Each piece of networking equipment has a unique serial number to identify itself over a network, and this is normall hard-programmed into the equipments’ firmware. However with Arduino we can define the MAC address ourselves.

If you are running more than one Ethernet shield on your network, ensure they have different MAC addresses by altering the hexadecimal values in the line:

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

However if you only have one shield just leave it be. There may be the very, very, statistically rare chance of having a MAC address the same as your existing hardware, so that would be another time to change it.

Once you have made your alterations, save and upload the sketch. Now open a web browser and navigate to the IP address you entered in the sketch, and you should be presented with something similar to the following:


What’s happening? The Arduino has been programmed to offer a simple web page with the values measured by the analogue inputs. You can refresh the browser to get updated values.

At this point – please note that the Ethernet shields use digital pins 10~13, so you can’t use those for anything else. Some Arduino Ethernet shields may also have a microSD card socket, which also uses another digital pin – so check with the documentation to find out which one.

Nevertheless, now that we can see the Ethernet shield is working we can move on to something more useful. Let’s dissect the previous example in a simple way, and see how we can distribute and display more interesting data over the network. For reference, all of the Ethernet-related functions are handled by the Ethernet Arduino library. If you examine the previous sketch we just used, the section that will be of interest is:

 for (int analogChannel = 0; analogChannel < 6; analogChannel++) 
            int sensorReading = analogRead(analogChannel);
            client.print("analog input ");
            client.print(" is ");
            client.println("<br />");       

Hopefully this section of the sketch should be familiar – remember how we have used serial.print(); in the past when sending data to the serial monitor box? Well now we can do the same thing, but sending data from our Ethernet shield back to a web browser – on other words, a very basic type of web page.

However there is something you may or may not want to  learn in order to format the output in a readable format – HTML code. I am not a website developer (!) so will not delve into HTML too much.

However if you wish to serve up nicely formatted web pages with your Arduino and so on, here would be a good start. In the interests of simplicity, the following two functions will be the most useful:

client.print(" is ");

Client.print (); allows us to send text or data back to the web page. It works in the same way as serial.print(), so nothing new there. You can also specify the data type in the same way as with serial.print(). Naturally you can also use it to send data back as well. The other useful line is:

client.println("<br />");

which sends the HTML code back to the web browser telling it to start a new line. The part that actually causes the carriage return/new line is the <br /> which is an HTML code (or “tag”) for a new line. So if you are creating more elaborate web page displays, you can just insert other HTML tags in the client.print(); statement.

If you want to learn more about HTML commands, here’s a good tutorial site. Finally – note that the sketch will only send the data when it has been requested, that is when it has received a request from the web browser.

Accessing your Arduino over the Internet

So far – so good. But what if you want to access your Arduino from outside the local network?

You will need a static IP address – that is, the IP address your internet service provider assigns to your connection needs to stay the same. If you don’t have a static IP, as long as you leave your modem/router permanently swiched on your IP shouldn’t change. However that isn’t an optimal solution.

If your ISP cannot offer you a static IP at all, you can still move forward with the project by using an organisation that offers a Dynamic DNS. These organisations offer you your own static IP host name (e.g. instead of a number, keep track of your changing IP address and linking it to the new host name. From what I can gather, your modem needs to support (have an in-built client for…) these DDNS services. As an example, two companies are No-IP Please note that I haven’t used those two, they are just offered as examples.

Now, to find your IP address… usually this can be found by logging into your router’s administration page – it is usually but could be different. Check with your supplier or ISP if they supplied the hardware. For this example, if I enter in a web browser, and after entering my modem administration password, the following screen is presented:


What you are looking for is your WAN IP address, as you can see in the image above. To keep the pranksters away, I have blacked out some of my address.

The next thing to do is turn on port-forwarding. This tells the router where to redirect incoming requests from the outside world. When the modem receives such a request, we want to send that request to the port number of our Ethernet shield. Using the:

EthernetServer server(125);

function in our sketch has set the port number to 125. Each modem’s configuration screen will look different, but as an example here is one:


So you can see from the line number one in the image above, the inbound port numbers have been set to 125, and the IP address of the Ethernet shield has been set to – the same as in the sketch.

After saving the settings, we’re all set. The external address of my Ethernet shield will be the WAN:125, so to access the Arduino I will type my WAN address with :125 at the end into the browser of the remote web device, which will contact the lonely Ethernet hardware back home.

Furthermore, you may need to alter your modem’s firewall settings, to allow the port 125 to be “open” to incoming requests. Please check your modem documentation for more information on how to do this.

Now from basically any Internet connected device in the free world, I can enter my WAN and port number into the URL field and receive the results. For example, from a phone when it is connected to the Internet via LTE mobile data:


So at this stage you can now display data on a simple web page created by your Arduino and access it from anywhere with unrestricted Internet access. With your previous Arduino knowledge you can now use data from sensors or other parts of a sketch and display it for retrieval.

Displaying sensor data on a web page

As an example of displaying sensor data on a web page, let’s use an inexpensive and popular temperature and humidity sensor – the DHT22. You will need to install the DHT22 Arduino library which can be found on this page. If this is your first time with the DHT22, experiment with the example sketch that’s included with the library so you understand how it works.

Connect the DHT22 with the data pin to Arduino D2, Vin to the 5V pin and GND to … GND.

Now for our sketch – to display the temperature and humidity on a web page. If you’re not up on HTML you can use online services such as this to generate the code, which you can then modify to use in the sketch.

In the example below, the temperature and humidity data from the DHT22 is served in a simple web page:

#include <SPI.h>
#include <Ethernet.h>

// for DHT22 sensor
#include "DHT.h"
#define DHTPIN 2
#define DHTTYPE DHT22

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {   0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10,1,1,77);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(125);

void setup() 
 // Open serial communications and wait for port to open:
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  Serial.print("server is at ");

void loop() 
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c =;
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == 'n' && currentLineIsBlank) 
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
	  client.println("Refresh: 30");  // refresh the page automatically every 30 sec
          client.println("<!DOCTYPE HTML>");

          // get data from DHT22 sensor
          float h = dht.readHumidity();
          float t = dht.readTemperature();

          // from here we can enter our own HTML code to create the web page
          client.print("<head><title>Office Weather</title></head><body><h1>Office Temperature</h1><p>Temperature - ");
          client.print(" degrees Celsius</p>");
          client.print("<p>Humidity - ");
          client.print(" percent</p>");
          client.print("<p><em>Page refreshes every 30 seconds.</em></p></body></html>");
        if (c == 'n') {
          // you're starting a new line
          currentLineIsBlank = true;
        else if (c != 'r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
    // give the web browser time to receive the data
    // close the connection:
    Serial.println("client disonnected");

It is a modification of the IDE’s webserver example sketch that we used previously – with a few modifications. First, the webpage will automatically refresh every 30 seconds – this parameter is set in the line:

client.println("Refresh: 30");  // refresh the page automatically every 30 sec

… and the custom HTML for our web page starts below the line:

// from here we can enter our own HTML code to create the web page

You can then simply insert the required HTML inside client.print() functions to create the layout you need.

Finally – here’s an example screen shot of the example sketch at work:


You now have the framework to create your own web pages that can display various data processed with your Arduino.

Remote control your Arduino from afar

We have a separate tutorial on this topic, that uses the teleduino system.


So there you have it, another useful way to have your Arduino interact with the outside world.

This post is brought to you by – everything for makers and electronics enthusiasts, with free delivery worldwide.

To keep up to date with new posts at, please subscribe to the mailing list in the box on the right, or follow us on twitter @tronixstuff.