One Button to Rule Them All

Arduino Web Editor

Arduino MKR1000

Arduino IoT Cloud

big dome red button

Following this tutorial you are going to learn how to make your <a href="http://www.arduino.cc/en/Main/ArduinoMKR1000">Arduino or Genuino MKR1000</a> or <a href="http://www.arduino.cc/en/Main/ArduinoWiFiShield101">WiFi Shield 101</a> interact with a simple webpage hosted in a browser via <a href="http://cloud.arduino.cc/">Arduino Cloud</a>.<h3 >Connect to Arduino Cloud</h3>If this is the first time you are using Arduino Cloud we highly encourage to follow the <a href="https://cloud.arduino.cc/cloud/getting-started">getting started guide</a>.Start by creating a new thing, we are going to call this thing &#34;button&#34;!<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/3b195e0f-c46e-4977-af88-804e9913339d.png alt="" ><figcaption contenteditable="true"><div>caption (optional)</div></figcaption></figure></div>Once created, take note of the credentials, you will need to insert those in the Arduino Sketch.<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/319c0706-aa5c-4847-aece-29ea1f5dc4dd.png alt="" ></figure></div>Now you have to create a second set of credentials that are going to be used by the browser to connect to Arduino Cloud.<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/516dd3f8-e809-4d89-a7f4-e763d0f3c98e.png alt="" ></figure></div><h3 >The Arduino Sketch</h3>If you followed the Arduino Cloud getting started flow, you can start coding the Arduino sketch using the one you downloaded as a starting point.Otherwise just copy-paste the one down here and start filling in the data required to connect to your wifi and your device credential.<pre ><code >#include &lt;SPI.h&gt; #include &lt;WiFi101.h&gt; #include &lt;WiFiSSLClient.h&gt; #include &lt;MQTTClient.h&gt; const char ssid[] = &#34;***&#34;; const char pass[] = &#34;***&#34;; const char server[] = &#34;mqtt.arduino.cc&#34;; const char userName[] = &#34;***&#34;; const char deviceName[] = &#34;button&#34;; const char deviceId[] = &#34;**************************&#34;; const char devicePsw[] = &#34;**************************&#34;; MQTTClient client; WiFiSSLClient net; int ledPin = LED_BUILTIN; void setup() { Serial.begin(9600); pinMode(ledPin, OUTPUT); Serial.print(&#34;Attempting to connect to WPA SSID: &#34;); Serial.println(ssid); // Connect to WPA/WPA2 network: while (WiFi.begin(ssid, pass) != WL_CONNECTED) { Serial.print(&#34;failed ... &#34;); delay(4000); Serial.print(&#34;retrying ... &#34;); } client.begin(server, 8883, net); connect();; } void connect() { Serial.println(&#34;connecting...&#34;); while (!client.connect(deviceName, deviceId, devicePsw)) { Serial.print(&#34;.&#34;); } Serial.println(&#34;connected!&#34;); } void loop() { client.loop(); client.publish(&#34;/&lt;username&gt;/&lt;devicename&gt;/blink&#34;, &#34;on&#34;); Serial.println(&#34;publishing up&#34;); digitalWrite(ledPin, HIGH); delay(1000); client.publish(&#34;/&lt;username&gt;/&lt;devicename&gt;/blink&#34;, &#34;off&#34;); Serial.println(&#34;publishing low&#34;); digitalWrite(ledPin, LOW); delay(1000); } void messageReceived(String topic, String payload, char * bytes, unsigned int length) { Serial.print(&#34;incoming: &#34;); Serial.print(topic); Serial.print(&#34; - &#34;); Serial.print(payload); Serial.println(); } </code></pre>In this example sketch we are using the function <code >client.publish()</code>  to send messages to the Arduino Cloud. To be more specific, we are sending MQTT messages to the topic at this address:<code >/&lt;username&gt;/&lt;devicename&gt;/blink</code>Devices can send value to a topic while other devices can subscribe to that same topic and listen to it.Because of how Arduino Cloud is configured, each thing can just publish messages to a topic after <code >/&lt;username&gt;/&lt;devicename&gt;/</code> . Therefore two devices cannot publish to the same topic.Every device, however, can subscribe to all the topic after  <code >/&lt;username&gt;/</code> , thus allowing each device to listen to all the messages coming from devices under the same user account.We are going to simply modify this sketch to send a message to the topic <code >/pressed</code>  every time the button connected to the Arduino board will be pressed.Attaching here the resulting modified sketch.<pre ><code >#include &lt;WiFi101.h&gt; #include &lt;WiFiSSLClient.h&gt; #include &lt;MQTTClient.h&gt; int status = WL_IDLE_STATUS; MQTTClient client; WiFiSSLClient net; int buttonPin = 2; boolean buttonState = false; boolean oldButtonState = false; boolean lightStatus=false; const char* ssid = &#34;***&#34;; // your network SSID (name) const char* password = &#34;***&#34;; // your network password const char* userName = &#34;***&#34;; const char* deviceName = &#34;button&#34;; const char* deviceId = &#34;*****************************&#34;; const char* devicePsw = &#34;*****************************&#34;; void setup() { Serial.begin(9600); WiFi.begin(ssid, password); client.begin(&#34;mqtt.arduino.cc&#34;, 8883, net); connect(); pinMode(2, INPUT); } void connect() { Serial.print(&#34;checking wifi...&#34;); while ( status != WL_CONNECTED) { Serial.print(&#34;Attempting to connect to WPA SSID: &#34;); Serial.println(ssid); // Connect to WPA/WPA2 network: status = WiFi.begin(ssid, password); // wait 10 seconds for connection: delay(4000); } Serial.println(&#34;connecting...&#34;); while (!client.connect(deviceName, deviceId, devicePsw)) { Serial.print(&#34;.&#34;); } Serial.println(&#34;connected!&#34;); } void loop() { client.loop(); buttonState = digitalRead(buttonPin); if (!buttonState &amp;&amp; oldButtonState) { lightStatus = !lightStatus; if (lightStatus) { client.publish(&#34;/&lt;username&gt;/button/status&#34;, &#34;on&#34;); Serial.println(&#34;publishing on&#34;); } else { client.publish(&#34;/&lt;username&gt;/button/status&#34;, &#34;off&#34;); Serial.println(&#34;publishing off&#34;); } } oldButtonState = buttonState; delay(50); } void messageReceived(String topic, String payload, char * bytes, unsigned int length) { Serial.print(&#34;incoming: &#34;); Serial.print(topic); Serial.print(&#34; - &#34;); Serial.print(payload); Serial.println(); } </code></pre>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 <a href="https://github.com/CasaJasmina/Big-Red-Button">Github</a>.In order to test the server locally on your computer you will need to use a local web-server.You can use Python <code ><a href="https://docs.python.org/2/library/simplehttpserver.html#module-SimpleHTTPServer">SimpleHTTPServer</a></code>  for this. Just move to the folder &#34;baseWebApp&#34; inside the repo you downloaded and launch the server:<pre ><code >python -m SimpleHTTPServer 8080 </code></pre>If everything goes fine, you should be able to see the page in a browser at this address: <a href="http://0.0.0.0:8080/">http://0.0.0.0:8080</a>.<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/df8bbd24-7579-4a7f-9f02-416c937998d4.png alt="" ></figure></div>Fill in the required fields in the top of the web page with the browser credential you got from <a href="http://cloud.arduino.cc/">cloud.arduino.cc</a>.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.<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/257204c3-292d-40ed-acb2-4125f576bf53.png alt="" ></figure></div><div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/a97a376d-60d7-407d-8676-6d223716cbb7.png alt="" ></figure></div>If you press the big button you should see the &#34;on&#34; box turning red and green again according to the &#34;status&#34; of the button.<div class="se-component se-image-container __se__float-none" contenteditable="false"> <figure style="margin: 0px;"><img src=https://projects.arduinocontent.cc/e73a825d-dbb7-4f85-85bb-faa13f4b68f6.png alt="" ></figure></div>The basic sketch is based on <a href="https://eclipse.org/paho/clients/js/">paho mqtt js client</a>. Check out the code of the myScript.js to see how you can connect to Arduino Cloud from a browser.<pre ><code >var mqttBrokerURI = &#34;wss://mqtt.arduino.cc:9002/&#34;; var userName = &#34;&#34;; var deviceName = &#34;&#34;; var deviceId = &#34;&#34;; var devicePsw = &#34;&#34;; var topic=&#34;&#34;; $(document).ready(function() { console.log (localStorage.getItem(&#34;userName&#34;)); $(&#34;input[name=userName]&#34;).val(localStorage.getItem(&#34;userName&#34;)); $(&#34;input[name=deviceName]&#34;).val(localStorage.getItem(&#34;deviceName&#34;)); $(&#34;input[name=deviceId]&#34;).val(localStorage.getItem(&#34;deviceId&#34;)); $(&#34;input[name=devicePsw]&#34;).val(localStorage.getItem(&#34;devicePsw&#34;)); $(&#34;input[name=topic]&#34;).val(localStorage.getItem(&#34;topic&#34;)); $(&#34;.monitor&#34;).click(function() { if ($(&#34;.monitor .messages&#34;).hasClass(&#34;hidden&#34;)) { $(&#34;.monitor .messages&#34;).removeClass(&#34;hidden&#34;); } else { $(&#34;.monitor .messages&#34;).addClass(&#34;hidden&#34;); } }); }); function connect() { setProperties(); client = new Paho.MQTT.Client(mqttBrokerURI, deviceName); // set callback handlers client.onConnectionLost = onConnectionLost; client.onMessageArrived = onMessageArrived; // connect the client client.connect({ userName: deviceId, password: devicePsw, onSuccess: onConnect, onFailure: onConnectionFail }); } function setProperties() { userName = $(&#34;input[name=userName]&#34;).val(); deviceName = $(&#34;input[name=deviceName]&#34;).val(); deviceId = $(&#34;input[name=deviceId]&#34;).val(); devicePsw = $(&#34;input[name=devicePsw]&#34;).val(); topic = $(&#34;input[name=topic]&#34;).val(); localStorage.setItem(&#34;userName&#34;, userName); localStorage.setItem(&#34;deviceName&#34;, deviceName); localStorage.setItem(&#34;deviceId&#34;, deviceId); localStorage.setItem(&#34;devicePsw&#34;, devicePsw); localStorage.setItem(&#34;topic&#34;, topic); console.log(localStorage.getItem(&#34;userName&#34;)); console.log(localStorage.getItem(&#34;deviceName&#34;)); console.log(localStorage.getItem(&#34;deviceId&#34;)); console.log(localStorage.getItem(&#34;devicePsw&#34;)); } // Create a client instance // called when the client connects function onConnect() { // Once a connection has been made, make a subscription and send a message. console.log(&#34;connected&#34;); client.subscribe(&#34;/&#34;+userName+&#34;/&#34;+topic); console.log(&#34;subscribing to &#34;+topic); } function onConnectionFail(response) { // Once a connection has been made, make a subscription and send a message. console.log(&#34;Impossible to connect&#34;); console.log(response); } // called when the client loses its connection function onConnectionLost(responseObject) { if (responseObject.errorCode !== 0) { console.log(&#34;onConnectionLost:&#34; + responseObject.errorMessage); } } // called when a message arrives function onMessageArrived(message) { console.log(message); $('.messages tr:first').after(&#34;&lt;tr&gt;&lt;td&gt;&#34; + message.destinationName + &#34;&lt;/td&gt;&lt;td&gt;&#34; + message.payloadString + &#34;&lt;/td&gt;&lt;/tr&gt;&#34;); $('.megabutton').removeClass('on'); $('.megabutton').removeClass('off'); $('.megabutton').addClass(''+message.payloadString); $('.megabutton').text(''+message.payloadString); } function sendMessage(topic, val) { console.log(&#34;sending &#34; + val + &#34; to &#34; + deviceName + &#34;/&#34; + topic); message = new Paho.MQTT.Message(val); message.destinationName = deviceName + &#34;/&#34; + topic; message.payloadString = val; client.send(message); } </code></pre>

One Button to Rule Them All

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