joseph back at it again

app.js

@@ -5,7 +5,23 @@ var app = express();
 var path = require('path');
 var server = http.createServer(app);
 var port = 8000;
-// const osc = require('osc');
+var osc = require('osc');
+
+var udpPort = new osc.UDPPort({
+  // This is the port we're listening on.
+  localAddress: "0.0.0.0",
+  localPort: 57121,
+
+  // This is where sclang is listening for OSC messages.
+  remoteAddress: "192.168.2.147", //this is the hamsters ip
+  remotePort: 57120, //this is the hamsters port :*s
+  metadata: true
+});
+
+// Open the socket.
+udpPort.open();
+
+
 
 const { SerialPort } = require('serialport')
 const { ReadlineParser } = require('@serialport/parser-readline')
@@ -38,6 +54,23 @@ io.on('connection', function(socket) {
 
   socket.on('chat message', (msg) => {
     console.log('[user][' + socket.id + '][' + msg + ']');
+    socket.broadcast.emit('chat message', msg);
+
+    var oscmsg = {
+      address: "/silentserver",
+      args: [
+          {
+              type: "s",
+              value: "user"
+          },
+          {
+              type: "s",
+              value: msg
+          }
+        ]
+    };
+
+    udpPort.send(oscmsg);
   });
 
   socket.on('userposition', (msg) => {

package.json

@@ -18,7 +18,8 @@
   "homepage": "https://github.com/louisafriederike/xpub_prototype_citynet#readme",
   "dependencies": {
     "express": "^4.18.1",
-    "johnny-five": "^2.1.0",
+    "node-gyp": "^9.4.0",
+    "osc": "^2.4.4",
     "package.js": "^1.1.3",
     "package.json": "^2.0.1",
     "serialport": "^10.4.0",

public/dist/bundle.js

@@ -0,0 +1 @@
+(()=>{var e={50:()=>{}},r={};function s(o){var n=r[o];if(void 0!==n)return n.exports;var t=r[o]={exports:{}};return e[o](t,t.exports,s),t.exports}s(50).createSocket("udp4").send(void 0,8080,"192.168.2.1",(e=>{e?console.error("Error sending UDP message:",e):console.log("UDP message sent successfully")}))})();

public/index.html

@@ -9,47 +9,8 @@
         <link href="style.css" rel="stylesheet">
         <!-- <script src="js/p5.js"></script>
         <script src="js/p5.geolocation.js"></script> -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
-        <script>
-          const socket = io();
-
-          socket.on('node-data', function(data) {
-            console.log(data);
-
-            // Split the data into separate parts
-            const [node, value] = data.split(' ');
-
-            document.getElementById('log-text').textContent = `user ${value} entered zone ${node}`;
-            
-            if (node === '3' && value === '15') {
-              // Change the background color to red
-              document.body.style.backgroundColor = 'red';
-              document.getElementById('location-log').style.display = 'block';
-
-              } else if (node === 'node4' && value === '21') {
-                // Change the background color to blue
-                document.body.style.backgroundColor = 'blue';
-              } else {
-                // Restore the default background color
-                document.body.style.backgroundColor = rgb(26, 26, 26);
-            }
-          });
-
-          //testing socket message from textinput field to arduino
-          function sendMessage() {
-            const inputField = document.getElementById('input');
-            const message = inputField.value;
-
-            if (message === 'BLINK') {
-                socket.emit('blink');
-                console.log('socket: blink');
-            }
-
-            inputField.value = '';
-        }
-
-        </script>
         <script src='socket.io/socket.io.js'></script>   
+        
         <meta property="og:title" content="EIXOGEN" />
         <meta property="og:description" content="EIXOGEN" />
         <meta property="og:image" content="" />
@@ -59,6 +20,7 @@
         <div class="flex-container">
                     <div class="flex-left">
                         <div class="section">
+                          <ul id="messages"></ul>
                             <!-- <progress id="file" max="100" value="70"> 70% </progress> -->                      
                         <p>>>> CACHE CODE:</p>
                         <span><form id="form" action="">
@@ -168,9 +130,9 @@
      
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
         <!-- <script type="text/javascript" src="js/fence.js"></script> -->
-        <script type="text/javascript" src="js/level.js"></script>
+        <!-- <script type="text/javascript" src="js/level.js"></script> -->
-        <script type="text/javascript" src="js/input.js"></script>
+       
-        <script>
+        <!-- <script>
          window.onload = checkLevel();
          function checkLevel(){
 
@@ -205,6 +167,65 @@
 
          }else {levelOne()}; 
          };
-         </script>   
+         </script>    -->
+
+    
     </body>
+    <script>
+      const socket = io();
+
+      socket.on('node-data', function(data) {
+        console.log(data);
+
+        // Split the data into separate parts
+        const [node, value] = data.split(' ');
+
+        document.getElementById('log-text').textContent = `user ${value} entered zone ${node}`;
+        
+        if (node === '3' && value === '15') {
+          // Change the background color to red
+          document.body.style.backgroundColor = 'red';
+          document.getElementById('location-log').style.display = 'block';
+
+          } else if (node === 'node4' && value === '21') {
+            // Change the background color to blue
+            document.body.style.backgroundColor = 'blue';
+          } else {
+            // Restore the default background color
+            document.body.style.backgroundColor = rgb(26, 26, 26);
+        }
+      });
+
+      //testing socket message from textinput field to arduino
+      var messages = document.getElementById('messages');
+
+
+      function sendMessage() {
+        const inputField = document.getElementById('input');
+        const message = inputField.value;
+        var item = document.createElement('li');
+        item.textContent = message;
+        item.className = 'me';
+        messages.appendChild(item);
+
+        if (message === 'BLINK') {
+            socket.emit('blink');
+            console.log('socket: blink');
+        }
+
+        inputField.value = '';
+
+        socket.emit('chat message', message);
+        
+    }
+
+    socket.on('chat message', function(msg){
+      var item = document.createElement('li');
+      item.textContent = msg;
+      item.className = 'others';
+      messages.appendChild(item);
+    });
+
+  </script>
+   <script type="text/javascript" src="js/input.js"></script>S
 </html>

public/js/input.js

@@ -1,4 +1,4 @@
-var socket = io();
+
 
 socket.on('data', function(data){
     console.log(data);

public/js/osc-client.js

@@ -0,0 +1,24 @@
+const serverAddress = '192.168.2.1'; // Replace with the OSC server's IP address
+const serverPort = 8080; // Replace with the OSC server's port
+
+function sendOSCMessage(address, data) {
+  const message = createOSCMessage(address, data);
+  const socket = new WebSocket(`ws://${serverAddress}:${serverPort}`);
+
+  socket.addEventListener('open', () => {
+    socket.send(message);
+    console.log('WebSocket message sent successfully');
+  });
+
+  socket.addEventListener('error', (error) => {
+    console.error('Error with WebSocket connection:', error);
+  });
+}
+
+function createOSCMessage(address, data) {
+  // Create an OSC message based on the address and data
+  // Return the serialized OSC message as a string
+}
+
+// Example usage
+sendOSCMessage('/my/message', 'Hello, OSC!');