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.

Hardware

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

• Five 10mm LEDs
• Five 130 ohm resistors
• One buzzer that can be annoying at 3.3V DC
• One Particle Photon with headers
• Inline header sockets
• PCB (see below)
• M3 threaded standoffs and nuts
• USB power supply to micro USB plug to power system.

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 admin@tronixstuff.com.

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:

	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js"></script>
	<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;
	}
	);
	}
	</script>
	</head>
	<body>
	<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>&nbsp;</p>
	<p><span id="statusSpan"></span></p>
	</div>
	</body>
	</html>

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 https://build.particle.io/build/new. 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 particle.io 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.
	Particle.function("led",ledToggle);
	// 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);
	delay(1000);
	digitalWrite(buzzer, LOW);
	}
	void coffeeAlert()
	{
	for (int i=0; i<5; i++)
	{
	digitalWrite(buzzer, HIGH);
	delay(100);
	digitalWrite(buzzer, LOW);
	delay(100);
	}
	}
	void waterAlert()
	{
	for (int i=0; i<2; i++)
	{
	digitalWrite(buzzer, HIGH);
	delay(500);
	digitalWrite(buzzer, LOW);
	delay(100);
	}
	}
	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
	soundAlert();
	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
	soundAlert();
	return 0;
	}
	else if (command=="D2On") {
	digitalWrite(led2,HIGH); // coffee request
	coffeeAlert();
	delay(2000);
	digitalWrite(led2,LOW);
	return 0;
	}
	else if (command=="D3On") {
	digitalWrite(led3,HIGH); // water request
	waterAlert();
	delay(2000);
	digitalWrite(led3,LOW);
	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
	soundAlert();
	return 0;
	}
	else {
	return –1;
	}
	}

view raw wfhmessaging.ino hosted with ❤ by GitHub

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:

Particle.function("led",ledToggle);

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.