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.

READ  How to make your own Arduino board

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

 

READ  WattUp – RF based Wireless Charging at a Distance

Code

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

Arduino




Leave a Comment

*
= 3 + 0

(Spamcheck Enabled)

Read previous post:
Arduino Alcohol Detector Circuit Board
Arduino Alcohol Detector Circuit Board

In this project, I am going to Interface an Alcohol Sensor with Arduino. Here I have designed an Arduino Shield...

Close
Scroll to top