Differences

This shows you the differences between two versions of the page.

--- notes:mqtt [2024/04/18 20:17] – discord
+++ notes:mqtt [2024/04/20 20:46] (current) – discord
@@ Line 1: / Line 1: @@
-Written by Jacob Haip on April 17, 2024
+====== MQTT and Microcontroller Folk Integrations ======
+Jacob Haip, April 2024
-I am interested in integrating more physical hardware and sensors into Folk Computer to help expand the scope to the full room and to take advantage of the affordances of hardware that the projected AR system alone can't do. Things like sensing the noise level of the environment, motors that spin a fan and create wind, and the physical feel of a knob that clicks when turning off.
+I am interested in integrating more physical hardware and sensors into Folk Computer to expand computing to the size of the room and to take advantage of the affordances of hardware that the projected AR system alone can't do. Things like sensing the noise level of the environment, motors that spin a fan and create wind, and the physical feel of a knob that clicks when turning off.
 WiFi-connected microcontrollers are the primary tool I have been using to integrate sensors and actuators with Folk. Boards I have used include the [[https://www.adafruit.com/product/5400|Adafruit Feather ESP32]], [[https://www.adafruit.com/product/5526|RPi Pico W]], and the [[https://store.particle.io/products/photon-2|Particle Photon]]. They are either programmed using Arduino or MicroPython. I have also integrated microcontrollers using BLE or a wired serial connection but I tend to like WiFi for long-lived stable devices embedded in my space.
@@ Line 72: / Line 73: @@
 </code>
-=== Getting a button input into Folk ===
+===== Getting a button input into Folk =====
-TODO: GIF of button press.
+{{micro-button-press.gif}}
 <code c rpi-pico-w-micropython-button-press.py>
@@ Line 174: / Line 175: @@
 </code>
-=== Output from Folk to Microcontroller ===
+===== Output from Folk to Microcontroller =====
 I have this cool [[https://www.adafruit.com/product/4745|Adafruit MatrixPortal M4]] Pixel Screen that can be programmed with Arduino. I set it up to listen on the /home/matrixportal MQTT topic where a message is a new screen to display.
@@ Line 349: / Line 350: @@
 {{matrixportal-live-edit.gif}}
+===== Using MQTT on web pages for bidirectional communication with Folk =====
+Making simple web pages using the [[https://github.com/mqttjs/MQTT.js|MQTT.js]] library also bring bidirectional communication to Folk. In the current state of the Folk code, you had to long poll for updates but using MQTT like this is nice because you don't have to poll. I like these basic web apps as a way to bring phones and laptops into the Folk system as new inputs and outputs.
+First we make a web app that plays a sound when it receives an MQTT messages:
+<code html play-sound.html>
+<html>
+  <head><title>Websocket client</title></head>
+  <body>
+    <h1>Plays a sound when /web/playsound receives a MQTT message</h1>
+    <audio id="myAudio" controls preload="preload">
+        <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
+        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+    <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
+    <script>
+const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
+const host = 'ws://192.168.1.34.local:8080'
+const options = {
+  keepalive: 60,
+  clientId: clientId,
+  protocolId: 'MQTT',
+  protocolVersion: 4,
+  clean: true,
+  reconnectPeriod: 1000,
+  connectTimeout: 30 * 1000,
+  will: {
+    topic: 'WillMsg',
+    payload: 'Connection Closed abnormally..!',
+    qos: 0,
+    retain: false
+  },
+}
+console.log('Connecting mqtt client')
+const client = mqtt.connect(host, options)
+client.on('error', (err) => {
+  console.log('Connection error: ', err)
+  client.end()
+})
+client.on('reconnect', () => {
+  console.log('Reconnecting...')
+})
+client.on('connect', () => {
+  console.log('Client connected:' + clientId)
+  client.subscribe('/web/playsound', { qos: 0 })
+});
+client.on('message', (topic, message, packet) => {
+  console.log('Received Message: ' + message.toString() + '\nOn topic: ' + topic)
+  document.getElementById("myAudio").currentTime = 0;
+  document.getElementById("myAudio").play();
+});
+</script>
+  </body>
+</html>
+</code>
+And then in folk you can make every phone and laptop with that web page open play a sound when a button is pressed:
+{{button-horse.mp4}}
+<code tcl trigger-sound.folk>
+When MQTT claims message /message/ topic "/button1" timestamp /t/ {
+   Wish $this is labelled "BUTTON 1 PRESSED"
+   set ts [clock milliseconds]
+   Wish MQTT publish "make some noise" on topic "/web/playsound" at timestamp $ts
+}
+</code>