Updated broewser clients to note end of support for PAHO and feature …

…mqtt.js
tigoe · Feb 19, 2025 · 72d4d22 · 72d4d22
1 parent fb204d0
commit 72d4d22
Show file tree

Hide file tree

Showing 14 changed files with 837 additions and 13 deletions.
diff --git a/browser-clients/eclipse-pahojs/mqtt-midi-client/sketch.js b/browser-clients/eclipse-pahojs/mqtt-midi-client/sketch.js
@@ -9,7 +9,7 @@
     but has also been tested on https://test.mosquitto.org
 
     created 11 Nov 2020
-    modiified 23 Nov 2020
+    modified 23 Nov 2020
     by Tom Igoe
 */
 

diff --git a/browser-clients/eclipse-pahojs/mqtt-midi-controller/script.js b/browser-clients/eclipse-pahojs/mqtt-midi-controller/script.js
@@ -10,7 +10,7 @@
     but has also been tested on https://test.mosquitto.org
 
     created 11 Nov 2020
-    modiified 12 Apr 2021
+    modified 12 Apr 2021
     by Tom Igoe
 */
 

diff --git a/browser-clients/eclipse-pahojs/readme.md b/browser-clients/eclipse-pahojs/readme.md
@@ -1,7 +1,6 @@
 # Eclipse PAHO JavaScript Library
 
-* [Eclipse PAHO home](https://www.eclipse.org/paho/index.php?page=clients/js/index.php)
-* [PAHO JS documentation](https://www.eclipse.org/paho/files/jsdoc/index.html)
+There is an MQTT client library from the Eclipse foundation, the [Eclipse PAHO library](https://github.com/eclipse-paho/paho.mqtt.javascript), but it appears to be no longer supported by the foundation.
 
 There are several examples for Eclipse PAHO in [this directory]({{site.codeurl}}/browser-clients/eclipse-pahojs/). 
 

diff --git a/browser-clients/mqttjs/mqtt-midi-controller/index.html b/browser-clients/mqttjs/mqtt-midi-controller/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.10.3/mqtt.min.js"></script><script src="script.js"></script>
+  <script src="script.js"></script>
+  <link rel="stylesheet" href="style.css">
+  <title>Document</title>
+</head>
+<body>
+  <h1>MIDI MQTT Message Sender and Receiver</h1>
+  <p>This page connects to an MQTT broker, and uses WebMIDI to connect to any MIDI inputs or outputs on your system. It will auto-detect new MIDI devices as they are connected or disconnected from your system.</p>
+  <p>When a MIDI message is received, it is converted to an MQTT message on a topic called Midi, and sent out to the MQTT broker. Likewise, when an MQTT message is received, it is converted to a MIDI message and sent to the selected MIDI output device.</p>
+  <p>You can also generate MIDI messages (and MQTT messages) by typing the keys below.</p>
+  <p>The Local Echo checkbox selects whether the MIDI output takes messages from local sources, or just from MQTT.</p>
+
+  <select id="inputs"></select><br>
+  <select id="outputs"></select><br>
+  <label for="echo">Local echo: </label><input type="checkbox"  id="echo"><br>
+  <div id="local">local messages will go here</div>
+  <div id="remote">waiting for messages</div>
+  <div id="messages">messages will go here</div>
+
+  <h2>Keyboard Input:</h2>
+  <span id="black-keys">&nbsp;W E&nbsp;&nbsp;&nbsp;&nbsp;T Y U&nbsp;&nbsp;&nbsp;O</span><br>
+  <span id="white-keys">A S D F G H J K L</span><br>
+  <span id="notes">C3 D3 E3 F3 G3 A4 B4 C4 D4</span>
+</body>
+</html>