Differences

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

--- displaying-musicalenvironment-content [2024/02/19 21:48] – 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.
-**Things To Note:** This tutorial assumes you have already installed Konduktiva successfully using the [[https://github.com/renickbell/konduktiva|Konduktiva installation]] instructions and have read through and understood the [[:first_steps|first steps tutorial]]. The tutorial also assumes that you have imported Konduktiva to the //K// variable and assigned any of the example MusicalEnvironments to the //e// variable.
+**Things To Note:** This tutorial assumes you have already installed Konduktiva successfully using the [[https://github.com/renickbell/konduktiva|Konduktiva installation]] instructions and have read through and understood the [[:first_steps|first steps tutorial]]. The tutorial also assumes 2 things. One, Konduktiva has been assigned to the //K// variable. Two, user created a Musical Environment using the //setUpMusicalEnvironment// function using //K.defaultConfigurationObject// as the first argument and //'exampleMidiPlayer'// as the third argument then, assigned the output to the //e// variable.
+<code javascript>
+const K = require('konduktiva')
+let e = K.setUpMusicalEnvironment(K.defaultConfigurationObject,4,'exampleMidiPlayer', K.exampleMusicalEnvironmentsExtraConfig)
+</code>
 ===== Displaying Content Of MusicalEnvironment Through Web Sockets  =====
@@ Line 17: / Line 22: @@
 It should look something like this:
-{{ :musical-environment-viewer-unconnected.png?600 |}}
+{{ :musical-environment-viewer-unconnected.png?1000 |}}
 ==== Send MusicalEnvironment Information To The Browser ====
@@ Line 29: / Line 34: @@
 The page will then automatically update to look something like this:
-{{ :musical-environment-viewer-connected.png?800 |}}
+{{ :musical-environment-viewer-connected.png?1000 |}}
 ==== 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://plotly.com/javascript/|Plotly Graphing library]]:
-{{ :musical-environment-viewer-graph1.png?800 |}}
+{{ :musical-environment-viewer-graph1.png?1000 |}}
 The search bar and item tab is also very useful for getting acquainted with the different variables in the musicalEnvironment:
-{{ :musical-environment-viewer-search-bar.png?300 |}}
+{{ :musical-environment-viewer-search-bar.png?200 |}}
 ==== 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, K.wss)
 </code>