Open Stage Control (Tutorial) - An alternative to Lemur and TouchOSC

Discussion in 'Workflow Tips & DIYs' started by Manaberry, Jun 19, 2018.

  1. Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    Hi everyone! I've been using Open Stage Control for 3 weeks now, and I find it enough good to share what I have done with it, and how to use it. This is a freeware developed by jean-emmanuel, available on Windows, OSX, Linux. It's a long post, sorry!

    Welcome to this very quick tutorial (for Windows 10) to set up and use Open Stage Control as a MIDI/OSC controller using your web browser. It is similar to Lemur or TouchOSC, but in order to work, it requires a server installed on a computer on your network.

    Introduction to Open Stage Control


    Open Stage Control is a desktop OSC bi-directionnal control surface application. It's built on web technologies and runs as an Electron web server that accepts any number of clients.

    [​IMG]
    (screenshot from OSC template for Ardour)

    What are you able to do with Open Stage Control?

    You can use it to create your own mixing table with endless tracks. You can create a modal window that pops up for your articulation to save room. You can set a single input field and spread the value with a variable through the whole thing (devs know). You can just do all of the previous things within a single one screen area. There is similarities as Lemur on the script side.


    I'm using a Dell P2418HT screen.
    There is a problem with the audio, I really don't know why.. My little camera seems to be a bit broken on that side. At least, you can see how my touchscreen works.

    In my case, I did my own articulations panel, a custom touch keyboard to rename my tracks without having to use my dedicated PC keyboard (so that I can rename things on multiple machines with a single virtual keyboard).I also have a lot of midi messages translated to keystroke sequences to interact with my DAW. I also created my own colors palette - there is some CSS (Cascade Style Sheet, the common way to controls appearance of elements in a front-end web environment) fields so, there are no limits here. I can set a color for my strings articulations for instance, and it applies to all my strings related push buttons at once. Well, the more you work on your Open Stage Control template, the more you can do sophisticated things.
    But first, we have to install the server!


    [​IMG]
    My main screen "all-in-one"

    [​IMG]
    My articulations modal window


    Step 1: Core installation


    You have to know that this tutorial is for Windows 10 only (I didn’t try this on other Windows version, but that should not be a problem). Libraries are needed to make this work. Let’s install them.


    1. Install C/C++ Build Tools

    2. Install python



    3. Install rtmidi python package (command prompt)
    Step 1: Run the Command prompt as Administrator:
    Search for “cmd”, right-click, Run as Administrator.


    Step 2: Go to the Scripts directory (grey color = command/response in the command prompt)
    Use the following command to access python directory. (“cd” means, Change Directory). You can also go to the parent folder by using “cd ..”

    cd C:\Users\YOURUSERNAME\AppData\Local\Programs\Python36\Scripts
    Step 3: Run the rtmidi command to install the package
    Enter the following command in the command prompt and let the magic happen.

    pip install rtmidi

    (If you have an error: LINK: fatal error LNK1181: cannot open input file ‘python34.lib’, go to libs folder in the python install directory; duplicate python36.lib and rename it to python34.lib. Now go back to step 3. It’s looking for an older version of python lib. We do like updated things, but maybe later.

    ***

    If there is no error (forget the “update pip” - I’m not sure if we really do like updated things after all.. at least, we don't need pip to be updated to continue our journey), we are good to go! Now, we need to create a virtual midi port in order to initialize our little server. In my case I’m using rtpMidi. The next step of this tutorial is featuring screenshots of this software.



    Step 2: MIDI Setup


    Open Stage Control is not that hard to set up. It’s pretty easy, to be honest, but follow the next steps carefully; it will be helpful for further maintenance if something went wrong.


    Virtual midi port
    Open Stage Control needs a free midi port to work. If you want to run the server on your working computer, then loopMidi is enough.

    Just create a midi port. In this tutorial, It will be named “VIControl”.​

    [​IMG]

    • Two computers (network) (rtpMidi)
    For clarity, MC is for Master Computer (the one receiving midi). And SC for Slave Computer (the one running the server and sending midi to the MC).​


    1.1 On the slave computer (SC) that will run the server, let’s create a new session named “toVIControl” on rtpMidi.

    [​IMG]
    1.2 On the master computer (MC), let’s create “VIControl” session.

    [​IMG]

    MC We already see the session from the slave computer (toVIControl). Press “Connect” to add this one to the list of Participants.
    SC Same step, connect “VIControl” from Directory list to the participants list in the “toVIControl” session.


    rtpMidi should ping and connect both computers on their mutual sessions. You should see some latency as a proof of a successful pairing.


    OK, virtual midi port is created. You can already add VIControl as a new midi controller in your favorite DAW on the MC. The MC part is done.

    Now let’s run the server on the SC.
     
    Last edited: Aug 16, 2018
    bryla and Jdiggity1 like this.
  2. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    Step 3: Configuration/Initialization

    You have downloaded Open Stage Control and you just extracted all the files. Great! Now, once you launched the soft, you should see this:

    [​IMG]

    Well, I already see you coming. There is an update. We will take care of this one later (...)


    So many fields, so many options. For now only two of them are mandatory for this tutorial: send and midi.

    For additional informations, please check the official documentation.


    Send is the IP of the machine that MIDI messages will be send to. In our case, we want to send MIDI msgs to MC. Check the MC IP in the Network Connection Details (Control Panel\Network and Internet\Network Connections).

    xxx.xxx.xxx.xxx:8000


    In the midi field, we tell Open Stage Control to use our virtual midi. The command looks like that:


    --midi MIDIPORTNAME:INPUTPORT,OUTPUTPORT


    ! If you remember well the midi session on SC: it will be only VIControl for the single computer solution.


    --midi toVIControl:INPUTPORT,OUTPUTPORT


    We don’t know the input/ouput port number for toVIControl. Don't panic, there is a command for that!

    Add the following command in the midi field and press “START”.


    --midi list

    Some informations should appear in the console:

    [​IMG]


    Perfect! Input port 6, output port 7. We can complete the command line:

    --midi toVIControl:6,7


    We have all we need to start the server. You should have both MC ip and midi command line set.


    To change settings we need to stop the server. No need to close the window to do so. To relaunch, Right click > App > Relaunch.


    Congrats! Open Stage Control is now launched on SC. Now we can spend the rest of our lives making a nice GUI for our DAW and libraries!

    [​IMG]

    You can now access Open Stage Control with a compatible web browser (chromium based) anywhere on the network just by using the IP of the machine running the server (SC) and the port 8080 (by default).

    xxx.xxx.xxx.xxx:8080


    Step 4: a GUI to rule them all

    You pressed new, so you should see something like this. Welcome to Open Stage Control. Now, I regret to tell you that you will spend a lot of time on this editor view... Because there are so many things to do!

    [​IMG]

    Before I let you go do some experimentations, there is one last thing you should know. To send midi message correctly, you have to tell your buttons what to do.


    Let’s create a push button. Right-click on the grid > Add widget > Buttons > Push.

    Click on the button freshly created. On the right panel “OPEN STAGE CONTROL”, there is a couple of fields. Scroll down to the “OSC” category.

    A push button might be configured as follows in order to send a MIDI note whose velocity is defined by the button's on/off value: (from official documentation)
    • address: /note
    • preArgs: [1, 60] (for MIDI channel 1, and note 60 / C3)
    • on: 100 (for noteOn velocity of 100 on button push)
    • off: 0 (to send a noteOff on button release)
    • target: ["midi:device_name"] (where device_name is one of the declared midi devices defined during setup)

    You should have something like this:

    [​IMG]

    For this example, we are using a push button. But remember: you have to fill the target field with midi:toVIControl on every widget you create!


    Precision is the number after the decimal. For the /note address, we don’t need 2 of precision, but for /control - on a track volume for instance, 1 of precision (-6.4db) or 2 (-6.43db) can make a big difference!


    If you press the push button, you should have a midi input signal on the MC.


    I’m using Midi Translator to convert MIDI msgs to emulate keystrokes. It’s easy to use and powerful! It has to be installed on the MC.


    You have everything in your hands to create your own GUI on Open Stage Control.
    The last part is some CSS code and tips to help you in the creation process. Good luck and have fun!


    Step 5: Tricks and CSS code


    Here is a Spreadsheet with my buttons and css code.​

    If you have any questions or if you need help, feel free to ask on this thread! I will help as much as I can!

    The Open Stage Control developer is highly active. If you have some errors, bugs, or even features ideas; feel free to help him by posting on the project github.

    Thank you so much for reading. I hope you enjoyed this tutorial and this software!

    Manaberry
     
  3. wst3

    wst3 my office these days

    3,612
    845
    Apr 2, 2010
    Pottstown, PA
    WOW! Thanks for all of that!
     
  4. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
  5. bryla

    bryla Senior Member

    3,144
    513
    Aug 16, 2006
    I don’t think I’ll need this in my workflow any time soon but that is a great post! Thank you!
     
  6. I am getting an error on installing pip rtmidi, but not the one you have listed. Also you put that you can forget the update pip part, but I do not see that in your walk-through either :/

    As I am trying to do that ;)
     
  7. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    If the python build has the updated pip version, you will not get the message.
    Can you please post the error message? We will find a way to make it work ;)
     
    Last edited: Jun 24, 2018
  8. Ok man,

    I have installed:
    Python 3.6 (all options)
    vs Build-tools (made selection of just VS 2017 options under install tab)
    Was not sure if I was meant to install the full 4GB?

    Here you go (see attached)
     

    Attached Files:

  9. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    You have to install the Visual Studio Build Tools. It's 1Gb download but indeed, it is 4GB of space required.
    If you have not installed it that way, it's maybe the problem.
    If some part of my tutorial is unclear, I will improve it of course ;)
     
  10. So you want us to install the whole of the vs Build Tools?
    Just that from your instructions you put '2017' in brackets, so I removed all the 'extras' :)

    But no matter, adding the rest now
     
  11. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    Yes, in order to use O-S-C, this is needed files for Windows : <

    You should have this installed:

    [​IMG]

    (Visual C++ Build Tools core features and Visual C++ 2017 Redistributable Update).
    Optional = Windows 10 Sdk and Testing tools core

    I'm uninstalling it to reinstall it to capture screenshots of the process for the tutorial.
     
    Last edited: Jun 24, 2018
    Shad0wLandsUK likes this.
  12. Ok, so I installed all of Build Tools and now it has worked, after copying and renaming python36.lib and then making python34.lib too

    Before that I got the 1181 error, but remembered the steps you mentioned :)

    All installed successfully now
    Unsure how to update pip though :/
     
  13. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    Wonderful!
    You don't have to update pip (but if you want to, there is the command in the command prompt: see the screen you captured). Pip is usually used to install packages. You did install the package (rtmidi) we want to install. The command prompt part is done, so you can leave pip alone :D
     
  14. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    Just to let you guys know, I'm working on releasing my template (still few things to fix). I'm also making vector icons for my daw (Live). If you want some for your specific DAW, tell me on the thread! I will try to do something ;)

    On the dev side, the developer released nice new versions. You can now use icons (with 700+ icons font). You can also use your own with base64 method. A dark version is also available directly with a command line, based on my UI work.
    You can ask for your own features on the github if needed.
     
    lucor and jadedsean like this.
  15. jadedsean

    jadedsean Senior Member

    117
    22
    Jun 28, 2016
    Is it possible to use this template within a different DAW? I'm using Reaper
     
  16. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    My template is using channel 16, and I've made a quick Python remote control to make it work with Ableton. But the template itself can be rearranged based on what you need.
    You can try the reaper template first, and once you get familiar with the software, you merge both.

    Here is the thing for Reaper.
     
  17. jadedsean

    jadedsean Senior Member

    117
    22
    Jun 28, 2016
    Oh that's cool thank you so much, really appreciate it.
     
  18. Gaijin14

    Gaijin14 Member

    5
    1
    Aug 16, 2018
    When I run the '--midi list' message I get these error codes. Any idea what I have done wrong?

    A JavaScript error occurred in the main process: Uncaught Exception: Error: spawn python ENOENT at exports._errnoException (util.js:1024:11) at Process.ChildProcess._handle.onexit (internal/child_process.js:192:19) at onErrorNT (internal/child_process.js:374:16) at _combinedTickCallback (internal/process/next_tick.js:138:11) at process._tickCallback (internal/process/next_tick.js:180:9)

    [Renderer process error] TypeError: null is not an object (evaluating 'e.socket.send') at http://192.168.1.215:8080/browser/scripts.js:414:1449 (no stacktrace available)

    No worries if you don't!
     
  19. OP
    OP
    Manaberry

    Manaberry Senior Member

    104
    60
    Apr 9, 2018
    I'm investigating your issue to see if I find any solution.
    Have you reported this on the github directly to the developer?

    Does the error occur even without the --midi list line?

    EDIT:

    Okay, I had the same issue. You are running the wrong version of Python.
    Be sure to run the x64 version of Python if you are on 64 bit OS.

    Tell me if it solves the problem :>
     
    Last edited: Aug 16, 2018
  20. Gaijin14

    Gaijin14 Member

    5
    1
    Aug 16, 2018

    You were right about the wrong version; however, when I run the RTmidi command I get this:

    C:\Users\david\AppData\Local\Programs\Python36\Scripts>pip install rtmidi
    Traceback (most recent call last):
    File "c:\users\david\appdata\local\programs\python\python36\lib\runpy.py", line 193, in _run_module_as_main
    "__main__", mod_spec)
    File "c:\users\david\appdata\local\programs\python\python36\lib\runpy.py", line 85, in _run_code
    exec(code, run_globals)
    File "C:\Users\david\AppData\Local\Programs\Python36\Scripts\pip.exe\__main__.py", line 5, in <module>
    ModuleNotFoundError: No module named 'pip._internal'


    Any ideas what I have done wrong this time around?
     
    Last edited: Aug 17, 2018

Share This Page