Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
displaying-musicalenvironment-content [2024/01/01 18:41] – [Send MusicalEnvironment Information To The Browser] steve.wang | displaying-musicalenvironment-content [2024/03/20 18:35] (current) – [Changing WebSocketServer Port] steve.wang | ||
---|---|---|---|
Line 3: | Line 3: | ||
**Overview: ** Imagine. One day, there was a guy named Tom. He created a very complicated MusicalEnvironment but did understand it completely and could not see what it did clearly. He also wanted to show his teammates his current MusicalEnvironment so that they could explain to him. | **Overview: ** Imagine. One day, there was a guy named Tom. He created a very complicated MusicalEnvironment but did understand it completely and could not see what it did clearly. He also wanted to show his teammates his current MusicalEnvironment so that they could explain to him. | ||
- | **Things To Note:** This tutorial assumes you have already installed Konduktiva successfully using the [[https:// | + | |
+ | **Things To Note:** This tutorial assumes you have already installed Konduktiva successfully using the [[https:// | ||
+ | <code javascript> | ||
+ | const K = require(' | ||
+ | let e = K.setUpMusicalEnvironment(K.defaultConfigurationObject, | ||
+ | </ | ||
===== Displaying Content Of MusicalEnvironment Through Web Sockets | ===== Displaying Content Of MusicalEnvironment Through Web Sockets | ||
Line 13: | Line 18: | ||
==== Connecting To The WebSocket Server ==== | ==== Connecting To The WebSocket Server ==== | ||
- | Wherever Konduktiva is installed, go there and open index.html in the browser. | + | Wherever Konduktiva is installed, go there and open |
+ | |||
+ | It should look something like this: | ||
+ | |||
+ | {{ : | ||
==== Send MusicalEnvironment Information To The Browser ==== | ==== Send MusicalEnvironment Information To The Browser ==== | ||
Line 23: | Line 32: | ||
</ | </ | ||
This will send the information of //e// to all clients connected. The full documentation of how to use this method can be found here. (INSERT LINK after done) | This will send the information of //e// to all clients connected. The full documentation of how to use this method can be found here. (INSERT LINK after done) | ||
+ | |||
+ | The page will then automatically update to look something like this: | ||
+ | {{ : | ||
+ | |||
+ | ==== Using The Interface ==== | ||
+ | The MusicalEnvironment viewer tool is useful for understanding the QuantizedMaps. It will display the QuantizedMaps in terms of graphs using the JavaScript [[https:// | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | The search bar and item tab is also very useful for getting acquainted with the different variables in the musicalEnvironment: | ||
+ | {{ : | ||
+ | ==== Changing WebSocketServer Port ===== | ||
+ | |||
+ | Use the function called changeWebsocketServerPort like so: | ||
+ | <code javascript> | ||
+ | //assign the webscoket server to a variable: | ||
+ | K.wss = K.connectVariableToCurrentWss() | ||
+ | |||
+ | //Change the port: | ||
+ | K.wss = K.changeWebsocketServerPort(8081, | ||
+ | </ | ||
+ | |||
+ | **Remember** You have to reassign K.wss for it to work. Also pass K.wss as the last argument. The first argument is the new port. | ||
+ | Next you will have to change the port the client listens to inside the file test.js line 25. | ||
+ | It looks like this currently change it to the port you want to: | ||
+ | ``` | ||
+ | const serverPort = 8080; // Replace with the port number on which the server is running | ||
+ | ``` | ||
+ | After that save and reload the client browser page. |