One Button to Rule Them All

Learn how to connect a simple web app written in JavaScript to Arduino Cloud.

One Button to Rule Them All

Things used in this project

Hardware components

Arduino MKR1000
Arduino MKR1000
× 1
SparkFun big dome red button
× 1

Software apps and online services

Arduino Web Editor
Arduino Web Editor
Arduino Cloud
Arduino Cloud

Story

Attaching here the resulting modified sketch.

#include <WiFi101.h>
#include <WiFiSSLClient.h>
#include <MQTTClient.h>
int status = WL_IDLE_STATUS;
MQTTClient client;
WiFiSSLClient net;
int buttonPin = 2;
boolean buttonState = false;
boolean oldButtonState = false;
boolean lightStatus=false;
const char* ssid  = "***";     //  your network SSID (name)
const char* password = "***";  // your network password
const char* userName = "***";
const char* deviceName = "button";
const char* deviceId = "*****************************";
const char* devicePsw = "*****************************";
void setup() {
 Serial.begin(9600);
 WiFi.begin(ssid, password);
 client.begin("mqtt.arduino.cc", 8883, net);
 connect();
 pinMode(2, INPUT);
}
void connect() {
 Serial.print("checking wifi...");
 while ( status != WL_CONNECTED) {
   Serial.print("Attempting to connect to WPA SSID: ");
   Serial.println(ssid);
   // Connect to WPA/WPA2 network:
   status = WiFi.begin(ssid, password);
   // wait 10 seconds for connection:
   delay(4000);
 }
 Serial.println("connecting...");
 while (!client.connect(deviceName, deviceId, devicePsw)) {
   Serial.print(".");
 }
 Serial.println("connected!");
}
void loop() {
 client.loop();
 buttonState = digitalRead(buttonPin);
 if (!buttonState && oldButtonState) {
   lightStatus = !lightStatus;
   if (lightStatus) {
     client.publish("/<username>/button/status", "on");
     Serial.println("publishing on");
   } else {
     client.publish("/<username>/button/status", "off");
     Serial.println("publishing off");
   }
 }
 oldButtonState = buttonState;
 delay(50);
}
void messageReceived(String topic, String payload, char * bytes, unsigned int length) {
 Serial.print("incoming: ");
 Serial.print(topic);
 Serial.print(" - ");
 Serial.print(payload);
 Serial.println();
}

Now it is time to create our single webpage that respond whenever we click the button.

Start by downloading the base web-app sketch from Github.

In order to test the server locally on your computer you will need to use a local web-server.

You can use Python SimpleHTTPServer  for this. Just move to the folder “baseWebApp” inside the repo you downloaded and launch the server:

python -m SimpleHTTPServer 8080

If everything goes fine, you should be able to see the page in a browser at this address: http://0.0.0.0:8080.

Fill in the required fields in the top of the web page with the browser credential you got from cloud.arduino.cc.

It’s important that in the topic field you write the device name you want to subscribe to, followed by the topic. In our case: button/status.

If you press the big button you should see the “on” box turning red and green again according to the “status” of the button.

One Button to Rule Them All schematics

 

Code

Connect a button to a web page via Arduino Cloud — Read More

Arduino


About The Author

Ibrar Ayyub

I am an experienced technical writer with a Master's degree in computer science from BZU Multan University. I have written for various industries, mainly home automation and engineering. My writing style is clear and simple, and I am skilled in using infographics and diagrams. I am a great researcher and am able to present information in a well-organized and logical manner.

Follow Us:
LinkedinTwitter
Scroll to Top