• Products
    • Isadora
    • Get It
    • ADD-ONS
    • IzzyCast
    • Get It
  • Forum
  • Help
  • Werkstatt
  • Newsletter
  • Impressum
  • Dsgvo
  • Press
  • Isadora
  • Get It
  • ADD-ONS
  • IzzyCast
  • Get It
  • Press
  • Dsgvo
  • Impressum

Navigation

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags

    [ANSWERED/PROOF OF CONCEPT] Control Isadora User Interface via Webbrowser?

    How To... ?
    9
    22
    50882
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Michel
      Michel Izzy Guru @RL last edited by

      @rl

      I would not know how to broadcast Isadora's user interface to a webpage. I guess your best way would be to use the Companion App from Bitfocus (https://bitfocus.io/companion/) you don't need a stream deck for it to work.

      Best Michel

      Michel Weber | www.filmprojekt.ch | rMBP (2019) i9, 16gig, AMD 5500M 8 GB, OS X 10.15 | located in Winterthur Switzerland.

      1 Reply Last reply Reply Quote 0
      • dbini
        dbini last edited by

        i did something years ago with WebSockets to enable a user to send OSC into Isadora from a browser. I had all members of the audience logged into a web app and random users would get access to sliders to control elements of lighting or sound on stage. I'm afraid I can't be more specific about the methods used - I didn't do the programming of the web app and we ditched that idea quite swiftly.

        John Collingswood
        taikabox.com
        2019 MBPT 2.6GHZ i7 OSX15.3.2 16GB
        plus an old iMac and assorted Mac Minis for installations

        1 Reply Last reply Reply Quote 1
        • DusX
          DusX Tech Staff @RL last edited by

          @rl said:

          Isadora-Patch from a webbrowser

           Will you be on the same network as the Isadora patch, or are you looking to be fully remote (over the www)?

          If you are looking to run within the same network, you likely have a few options, where you setup and run a webserver/site and use a scripting language to pass OSC commands to Isadora.
          A simple server and site can be setup in Python using the Flask framework in a short time. Adding OSC to http get requests is also rather quick.

          For fully remote control I would likely setup a site/server online that takes your commands and when Isadora asks for the latest commands (polls for these regularly) is returned a JSON list of commands. Once Isadora runs the latest command it could then tell the server that command can be removed from the list. This wouldn't be fully real-time, but could be useful in many use cases. It avoids the networking aspects of setting up WebSockets or another direct network connection.

          Troikatronix Technical Support

          • New Support Ticket Link: https://support.troikatronix.com/support/tickets/new
          • My Add-ons: https://troikatronix.com/add-ons/?u=dusx
          • Profession Services: https://support.troikatronix.com/support/solutions/articles/13000109444-professional-services

          Running: Win 11 64bit, i7, M.2 PCIe SSD's, 32gb DDR4, nVidia GTX 4070 | located in Ontario Canada.

          R 1 Reply Last reply Reply Quote 0
          • mark
            mark @RL last edited by

            @rl

            I'm not enough of a Javascript expert to say, but it would seem that this library uses Node.js to allow OSC to be sent from a browser.

            @DusX -- do you have the skills to do something with this, and avoid the web sockets part of the equation?

            (Of course this only covers a local connection... not from city to city, etc.)

            Best Wishes,
            Mark

            Media Artist & Creator of Isadora
            Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

            DusX 1 Reply Last reply Reply Quote 0
            • DusX
              DusX Tech Staff @mark last edited by

              @mark said:

              do you have the skills to do something with this

               Unfortunately this library seems to require Node-JS. I haven't spent much time with Node-JS.
              I am sure, someone with Node-JS experience could get it up and running pretty quickly.

              I could mock something up in Python/Flask in a short time if that would be helpful?

              Troikatronix Technical Support

              • New Support Ticket Link: https://support.troikatronix.com/support/tickets/new
              • My Add-ons: https://troikatronix.com/add-ons/?u=dusx
              • Profession Services: https://support.troikatronix.com/support/solutions/articles/13000109444-professional-services

              Running: Win 11 64bit, i7, M.2 PCIe SSD's, 32gb DDR4, nVidia GTX 4070 | located in Ontario Canada.

              1 Reply Last reply Reply Quote 0
              • R
                RL @DusX last edited by

                @dusx

                Yes, I think I will stay on the same network. Maybe even on the same computer (sounds weird, but the client wants it so, because a browser page can be designed better). 

                MacBook Pro 2017
                OSX 10.14.6

                DusX 1 Reply Last reply Reply Quote 0
                • DusX
                  DusX Tech Staff @RL last edited by

                  @rl Ok, so the library Mark posted, seems to allow Websocket connection between the website and the node.js server (the node.js server then sends OSC). This should allow for things like Sliders on the webpage to control real-time OSC values that Isadora receives. Without the Websocket connection, you would be looking at sending values more periodically (this could still be done quickly, but not as smoothly, probably with AJAX). 
                  This can all be done in different environments, for example Python has rather easy to use Websocket libraries as well. I would likely use CherryPy as my webserver/framework since I find it very quick/easy to work with and its webserver is production ready (unlike what Flasks builtin webserver)

                  Troikatronix Technical Support

                  • New Support Ticket Link: https://support.troikatronix.com/support/tickets/new
                  • My Add-ons: https://troikatronix.com/add-ons/?u=dusx
                  • Profession Services: https://support.troikatronix.com/support/solutions/articles/13000109444-professional-services

                  Running: Win 11 64bit, i7, M.2 PCIe SSD's, 32gb DDR4, nVidia GTX 4070 | located in Ontario Canada.

                  1 Reply Last reply Reply Quote 0
                  • mark
                    mark @RL last edited by mark

                    @rl said:

                    I would like to control my Isadora-Patch from a webbrowser. Basically I would like to eather broadcast my user interface to a webpage or receive Commands (OSC Commands for example) from a webpage and use those to control the user interface....

                    So I followed up on the osc.js library I wrote about earlier. Here are step-by-step instructions for macOS, that will give you bidirectional OSC communication between a web browser and Isadora. It all worked really well for me

                    Note, this procedure is for intermediate to advanced users. More novice users can still succeed, but you'll need to take your time if you're not familiar with using the command line.

                    This is a proof of concept. Expanding this to add your own controls is going to take a bit programming expertise, both in HTML/CSS and by modifying the index.js file inside of the izzy-browser folder. Helping you accomplish that is beyond the scope of what I can offer here, but hopefully this first step will get you rolling.

                    Enjoy,
                    Mark


                    SETTING UP NODE.JS AND PREPARING TO COMMUNICATE

                    1) If you don't already have Homebrew installed, follow the instruction under "Install Homebrew" on the Homebrew home page.

                    2) If you don't already have Xcode installed, download and install it from the App Store.

                    3) Follow these instructions to install node and npm via homebrew.

                    4) Go to the osc.js examples GitHub repository at https://github.com/colinbdclark/osc.js-examples. Click on the green "Code" button and choose "Download ZIP".

                    5) Unzip the file and place the resulting folder (osc.js-examples-master) on your Desktop.

                    6) Inside osc.js-examples-master folder, duplicate the folder called udp-browser and change the name of the result to izzy-browser. Double click izzy-browser to open it.

                    7) Open the file index.js in your favorite text editor. On line 31, where it says 7500, change the value to 1234, which is Isadora's default OSC port number. 

                    var udp = new osc.UDPPort({
                        localAddress: "0.0.0.0",
                        localPort: 7400,
                        remoteAddress: "127.0.0.1",
                        remotePort: 1234. // <<<< change 7500 to 1234!
                    });

                    Save the file and exit the text editor.

                    8) Open Apple's Terminal program and type the following lines, hitting the return key after entering each line:

                    cd ~/Desktop/osc.js-examples-master/izzy-browser
                    npm install
                    cd web
                    npm install
                    cd ..

                    You will need to wait for the files to be downloaded each time you enter 'npm install' 

                    9) Now, with the necessary node.js components installed, start up node.js by typing the following into Terminal and hitting return

                    node .

                    10) You will see the following reply in the terminal:

                    Listening for OSC over UDP.
                     Host: 192.168.0.220, Port: 7400
                     Host: 192.168.0.129, Port: 7400
                    Broadcasting OSC over UDP to 127.0.0.1, Port: 1234

                    You're almost ready to communicate.


                    RECEIVING OSC IN ISADORA

                    1) Go to Isadora and choose Communications > Stream Setup... Click the "Auto-Detect Input" button to enable it.

                    2) Go into the the web folder (inside the izzy-browser folder) and double click the file index.html to open the page in your default browser. (I used Safari.)


                    Arrange the browser window so you can see the Stream Setup dialog behind it.

                    3) Click the "Send OSC" button in the browser window. You will see Isadora respond, showing the OSC address /hello and the text value 'world'.

                    4) Go back to Isadora, set the 'channel' for the new OSC address "/hello" to 1. Then click OK to close the dialog.

                    5) Add an OSC Listener actor, changing the 'type' input to 'text'. 

                    6) Add a Text Draw actor and connect the 'value' output of the OSC Listener to the 'text' input of the Text Draw actor. Then connect the Text Draw actor to a Projector actor, and choose Output > Show Stages

                    7) Go back to the browser and click the "Send OSC" button again. The word "world" will appear on the Stage.


                    SENDING OSC TO THE BROWSER

                    1) Go to Isadora and add an OSC Transmit actor.

                    2) Set the 'port' input to 7400 and the 'address' input to /test

                    3) Add a Wave Generator actor and connect its 'value' output to the 'value' input of the OSC Transmit actor.

                    4) Go look at the browser. You'll see something like this:

                    Media Artist & Creator of Isadora
                    Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                    bonemap 1 Reply Last reply Reply Quote 1
                    • liminal_andy
                      liminal_andy last edited by

                      As an alternative if you want this all done for you, with a budget, you can use Universe Show Control. It can publish its controls to a browser so you can pick it up from anywhere on LAN (or soon, WAN!), and then communicate with Isadora via OSC. It can also take in NDI, so you could get an in-browser preview of your Izzy stages.

                      Andy Carluccio
                      Zoom Video Communications, Inc.
                      www.liminalet.com

                      [R9 3900X, RTX 2080, 64GB DDR4 3600, Win 10, Izzy 3.0.8]
                      [...also a bunch of hackintoshes...]

                      mark 1 Reply Last reply Reply Quote 2
                      • mark
                        mark @liminal_andy last edited by

                        @liminal_andy said:

                        As an alternative if you want this all done for you, with a budget, you can use Universe Show Control. It can publish its controls to a browser so you can pick it up from anywhere on LAN (or soon, WAN!), and then communicate with Isadora via OSC.

                        Interesting. Can the free version do that? Or only the paid versions?

                        Best Wishes,
                        Mark

                        Media Artist & Creator of Isadora
                        Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                        liminal_andy 1 Reply Last reply Reply Quote 0
                        • liminal_andy
                          liminal_andy @mark last edited by

                          @mark You can build out your interface on the free version and then license it when it needs to be used in production. A paid tier is needed to prevent the app from blocking incoming and external communications after two hours. Universe has a deep ZoomOSC integration, and so if you ever want to connect with them, I am happy to facilitate. They're very kind folks, and great engineers. Universe and Isadora together can provide a whole lot of value when they marry inter-device communications, control interfaces, and the backbone of Isadora's live processing capabilities.  

                          Andy Carluccio
                          Zoom Video Communications, Inc.
                          www.liminalet.com

                          [R9 3900X, RTX 2080, 64GB DDR4 3600, Win 10, Izzy 3.0.8]
                          [...also a bunch of hackintoshes...]

                          bonemap 1 Reply Last reply Reply Quote 0
                          • bonemap
                            bonemap Izzy Guru @liminal_andy last edited by

                            @liminal_andy said:

                            blocking incoming and external communications after two hours

                            That's interesting because I read their documentation for the free trial and thought/got the impression that there was only a five minute window before it closed the connections. The price point is not trivial, but the integration for fixed installations looks really worthwhile.

                            Best Wishes

                            Russell

                            http://bonemap.com | Australia
                            Izzy STD 4.2 | USB 3.6 | + Beta
                            MBP 16” 2019 2.4 GHz Intel i9 64GB AMD Radeon Pro 5500 8 GB 4TB SSD | 14.5 Sonoma
                            Mac Studio 2023 M2 Ultra 128GB | OSX 15.3 Sequoia
                            A range of deployable older Macs

                            liminal_andy 1 Reply Last reply Reply Quote 0
                            • bonemap
                              bonemap Izzy Guru @mark last edited by

                              @mark

                              Thanks for the clear process instructions for Node.js and building a test interface. It required installing additional software (Xcode and Homebrew) but I was due to install them anyway. I had a quick play and it appears to be quite functional for Mac. I would be happy to see this further developed, considering it is powerful and free.

                              Best Wishes

                              Russell

                              http://bonemap.com | Australia
                              Izzy STD 4.2 | USB 3.6 | + Beta
                              MBP 16” 2019 2.4 GHz Intel i9 64GB AMD Radeon Pro 5500 8 GB 4TB SSD | 14.5 Sonoma
                              Mac Studio 2023 M2 Ultra 128GB | OSX 15.3 Sequoia
                              A range of deployable older Macs

                              mark 1 Reply Last reply Reply Quote 0
                              • mark
                                mark @bonemap last edited by mark

                                @bonemap said:

                                It required installing additional software (Xcode and Homebrew) but I was due to install them anyway. 

                                Thanks for the tip. As a developer, I have these Xcode and Homebrew installed already. I've added their installation to the instructions.

                                Best Wishes,
                                Mark

                                Media Artist & Creator of Isadora
                                Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                                1 Reply Last reply Reply Quote 0
                                • Eager Iguana
                                  Eager Iguana last edited by

                                  This may be of interest. https://github.com/jean-emmanu...

                                  May be you've seen this and it's not a solution, but it does OSC/Midi over network using a browser client. And free.

                                  Regards.

                                  Clive Davies ¦ MSI - i7-10750H CPU @ 2.60GHz - 16.0 GB - RTX 3060 6GB - Win 10 ¦ Based Southern UK.

                                  jfg 1 Reply Last reply Reply Quote 1
                                  • liminal_andy
                                    liminal_andy @bonemap last edited by

                                    @bonemap said:

                                    <p>@liminal_andy said:</p> <blockquote>blocking incoming and external communications after two hours</blockquote> <p>That's interesting because I read their documentation for the free trial and thought/got the impression that there was only a five minute window before it closed the connections. The price point is not trivial, but the integration for fixed installations looks really worthwhile.</p><p>Best Wishes</p><p>Russell</p>

                                    When they launched the ZoomOSC device, they extended to two hours, but I am not sure how long that offer runs for. I agree, the cost is significant. My thinking is that for most theatrical gigs, it's probably not needed, but for installations or professional systems that are handed off to clients, it might be a worthy line item on an invoice considering how it can extend Isadora's functionality.

                                    Then again, for some of us, the custom code might be more fun :) 

                                    Andy Carluccio
                                    Zoom Video Communications, Inc.
                                    www.liminalet.com

                                    [R9 3900X, RTX 2080, 64GB DDR4 3600, Win 10, Izzy 3.0.8]
                                    [...also a bunch of hackintoshes...]

                                    1 Reply Last reply Reply Quote 1
                                    • jfg
                                      jfg @Eager Iguana last edited by jfg

                                      @eager-iguana

                                      Have you used it with Isadora? I get the OSC messages in OSCulator but not in Isadora.

                                      Edit: sorry, after I started Isadora again, it worked

                                      best

                                      Jean-François

                                      • Izzy 3.2.6
                                      - MacBook Pro M1 Max 16" 64GB RAM, Mac OS 15.3.2 Sequoia
                                      - Mac Pro 5.1 middle 2012 (3,33 GHz 6-Core Intel Xeon, 32GB RAM, Radeon RX 580 8 GB ),
                                      Mac OS 10.14.6 (Mojave)
                                      - Mac mini Pro M4, Mac OS 15.3.2 Sequoia

                                      • A range of deployable older Macs
                                        Located in Bremen, Germany
                                      1 Reply Last reply Reply Quote 0
                                      • bonemap
                                        bonemap Izzy Guru last edited by bonemap

                                        Hi,

                                        Updating progress with web page elements:

                                        The video shows the remote LAN computer on the right and the web page hosted by Node.js on the left. This prototype demonstrates button, number field and range slider elements. The Isadora patch scene itself includes over 2500 3D Line modules in 72 user actors.

                                        Controlling Isadora with a Web browser interface over a network from Bonemap on Vimeo.

                                        Best Wishes

                                        Russell

                                        http://bonemap.com | Australia
                                        Izzy STD 4.2 | USB 3.6 | + Beta
                                        MBP 16” 2019 2.4 GHz Intel i9 64GB AMD Radeon Pro 5500 8 GB 4TB SSD | 14.5 Sonoma
                                        Mac Studio 2023 M2 Ultra 128GB | OSX 15.3 Sequoia
                                        A range of deployable older Macs

                                        mark 1 Reply Last reply Reply Quote 0
                                        • mark
                                          mark @bonemap last edited by mark

                                          @RL @Michel @jfg @dbini @dusX @bonemap @liminal_andy

                                          And yet another entry into this discussion, suggested on the Facebook group. Here's what user Marc C. had to say:

                                          NodeRed + NodeRed-contrib-osc = drag n’ drop speedy no-code way of doing the same with responsive touch elements

                                          Have a look at the NodeRed home page for more.

                                          Best Wishes,
                                          Mark

                                          Media Artist & Creator of Isadora
                                          Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                                          1 Reply Last reply Reply Quote 2
                                          • liminal_andy
                                            liminal_andy last edited by

                                            if simple buttons are all that's needed, try bitfocus companion. Web emulator means there is no need for a physical stream deck, but if you have one, you can use it. The web interface can also be used via any browser on LAN or via a mobile app. 

                                            Andy Carluccio
                                            Zoom Video Communications, Inc.
                                            www.liminalet.com

                                            [R9 3900X, RTX 2080, 64GB DDR4 3600, Win 10, Izzy 3.0.8]
                                            [...also a bunch of hackintoshes...]

                                            1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post