Add colour variable to custom module

Hi,

I’d like to add a colour variable that will be attached to the track names like the articulation buttons in the code.

What will I need to reference inside OSC to make the widgets to change their colour depending on the name of the tracks?
Also this should work for the faders that are changing depending on the banks from Reaper.
Here is the OSC file:

I’m sorry but I’m having trouble understanding your problem, could you try formulating it differently and describe the problem as precisely as possible ?

Hi Jean-Emmanuel,

The problem is Reaper specific but it’s much easier for you to configure the OSC project to work with Reaper rather than explaining to Reaper users in the Cockos forum how Open Stage works. Let me know if you need instructions on how to setup this for testing purposes.

If you take a look at the custom module attached you’ll see that there are already some widgets that are toggled on/off depending on the name of the focused track in Open Stage Control.

I’m trying to implement coloured faders (or all the relevant widgets for that matter) in my OSC project but since Reaper doesn’t have a dedicated OSC address for track colours I need a similar workaround.

I need to have different colours on each strip and somehow reference the track name in OSC. e.g. If “violins 1 staccato” is selected no matter where it’s displayed on the fader bank it’s always going to have the exact same colour. The only thing that stays the same is the track name, not the position on the banks or the track number from Reaper etc.
Also if the rules aren’t met (not enough tracks in the project or name not specified in the custom module) the widgets colour will be the default black.

The problem is Reaper specific but it’s much easier for you to configure the OSC project to work with Reaper rather than explaining to Reaper users in the Cockos forum how Open Stage works.

I don’t mean to be harsh but it sounds a bit like you’d rather have me do it instead of learning how o-s-c works. Maintaining and supporting o-s-c takes a lot of time already, I do it with pleasure but I cannot develop specific solutions for every user out there. For starters, I don’t even use Reaper and it’s arguably harder to learn than o-s-c.

Now to help you getting there, here a few tips:

  1. You could start by defining a name vs color dictionary in the custom module
var colors = {
  // left-side: track name as sent by the daw
  // right-side: css color code
  "track name 1": "#FF0000",
  // etc
}
  1. Assuming the daw sends the tracks’ names in the current bank at some point, you should be able to write another function like articulationFilter in the oscInFilter that would retrieve the color codes for each track (in a very similar way as articulationFilter does) and send them to the interface.
// trackname & tracknumber must be defined
var colorcode = colors[trackname]
receive("/color/track_" + tracknumber, colorcode)
  1. With the OSC{} syntax (documented here) you’ll be able to use the color codes, in the widgets’ css or color properties

Thank you very much for the tips!

I totally respect your thoughts but the docs are really cryptic for people that aren’t fluent in Java and CSS or with a developer’s mindset and skills.

If it was a simple case of adjusting existing code I wouldn’t even ask for help but when more complex coding concepts are needed what am I supposed to do? Spend years to learn the language from scratch?

I’m not trying to get people to do the work for me, I just need help with scripting because I’m not used to that way of thinking yet. It takes time to figure out this stuff. It’s my first time that I need a tool which requires undocumented scripting from scratch… most of us are maybe primarily musicians.

Anyway, I’ll try my best to figure this out. :slight_smile:

Thanks again.

Could you provide more detailed step by step instructions please?

receive("/color/track_" + tracknumber, colorcode) 

Where does this "/color/track_" come from or the tracknumber ? Do I have to define them myself or placeholders to be replaced by something really specific from O-S-C or data sent from Reaper?

Does the function code look ok so far?

 
function colorFilter(address, args){

        // check again for track name??
        if (address !== '/track/name') return

        // retreive the track's name as above?
        var trackname = args[0].value

      /* 
  Now I need some help here
      */
      // loop through all colors?
      for (var color in colors) {
// do these lines go here or later in the return section?
          var colorcode = colors[trackname] 
        receive("/color/track_" + tracknumber, colorcode)
       }

    }

Please help me just a bit more to better understand the principles behind the code. Thanks again.

"/color/track_" + tracknumber is an arbitrary address meant to be used on the interface side with the OSC{} syntax to retreive the color. I made the assumption that tracknumber can be deducted from what the DAW sends, but the actual implementation may require infos from the DAW’s documentation.

I think you might get more relevant help on Cockos forums since the main issue here is to know how to interpret the messages from the DAW. Besides if I remember correctly javascript is commonly used in Reaper.

Reaper sends this address for track numbers:
/track/@{parent.variables.n}/number/str

I already know what OSC addresses I need to read from Reaper. This isn’t a Reaper issue.
Plus, there aren’t users of O-S-C on Cockos forums with your insight.

Tell me what else you need to know from the DAW and I’ll provide it. I just need help with the module and some instructions for the integration of the code in my O-S-C session. I’ll do the rest. I don’t want the finished working result.

I’m doing my best to learn Javascript right now so that I won’t have to ask again for simple coding advice, hopefully. But this takes time especially for such a specific application.

Ok, I think I figured it out thanks to another osc/reaper project.

  1. Assuming your .reaperOSC file contains the following line
    TRACK_NAME s/track/name s/track/@/name

  2. O-S-C will receive messages that contain both the track number and the track name, the custom module function will look like this:

function colorFilter(address, args){

    // check that address matches /track/@/name using a "regular expression" or "regexp"
    if (!address.match(/\/track\/[0-9]+\/name/) return

    // split the address at each '/' character
    // /track/1/number -> ['', 'track', '1', 'number']
    // array index:        0      1      2      3
    var tracknumber = address.split('/')[2]

    // get track name
    var trackname = args[0].value

    // get color code based on trackname
    var colorcode = colors[trackname]
    // we can even set a default color here if trackname is not found in the colors object:
    // var colorcode = colors[trackname] || '#ff0000'  


    // send color to osc receiver : OSC{/color/@{parent.variables.n}}
    receive("/color/" + tracknumber, colorcode)

}
1 Like

Thanks!!
I added this in my module but I tried many different OSC listeners and nothing changes.
What is the correct OSC listener?
Do I have to add the colorFilter here?

    return {

        oscInFilter:function(data){

            var {address, args, host, port} = data

            // insert our custom filter in the loop
            articulationFilter(address, args)
            // add colorfilter here?
            

            //
            return {address, args, host, port}

        }

    }

I tried to add this to the code but then I got an error “receive not defined”. I changed receive to receiveOsc (like in the articulation filter) and then got another error: Cannot read property length of undefined.

Do I have to add the colorFilter here?

Yes

I tried to add this to the code but then I got an error “receive not defined”.

Your version of o-s-c is not up to date then, please update it.

OK Thanks! All errors gone now. Still nothing changes though. If I put the OSC listener as you specified in the code comment OSC{/color/@{parent.variables.n}} then the widget’s highlights get black. I tried both in the colour field and in the CSS code using the #{ OSC… } inside the :host { … }

Did you configure reaper so that it sends /track/@/name (with @ being a number) ? You can check what o-s-c receives by enabling the debug option.

Hi JM It is working FINALLY !!! It was a simple typing error on my part. I’m sorry. It works great!

But I noticed something strange. When I’m changing banks all the widgets change colours correctly except for faders if there set to compact = true. Is this a bug maybe?

I’ll try to find other ways to do pan nobs so that I can work around the issue if it is difficult to fix. No worries. Thank you again for your help.

By the way this OSC listener works only for text colouring. I’m trying to change the background but I don’t know how OSC addresses need to be written to work in the CSS code.

When I’m changing banks all the widgets change colours correctly except for faders if there set to compact = true.

Compact faders are slightly different and you may need to adjust your css in order to work with them. Try putting the receiver in the color property, you’ll see if the color is received. Also, in the editor you can click on a property’s name to display a popup that shows the “computed” value of this property, this may help understanding what you’re doing.

I’m trying to change the background but I don’t know how OSC addresses need to be written to work in the CSS code.

OSC{/...} blocks are just replaced with the received value, you can use them for any purpose.

If you meant to have a background color that’s different from the 1st color (ie 2 colors infos per tracks) then you could change the colors variable in your custom module so that each track name is associated with two colors:

var colors = {
  "name 1": ["#ff0000", "#00ff00"]
}
// ... and in colorFilter(): 
var colorcode = colors[trackname] || ["#000000", "#000000" ]
receive("/color_1/" + tracknumber, colorcode[0])
receive("/color_2/" + tracknumber, colorcode[1])

Yes the colour is received but the compact fader doesn’t go to its blank state as the other widgets do. Once they get coloured they are stuck no matter what bank I have selected.

The OSC address is working only for objects inside a parent container (strip etc.) How can I receive the same colour value to objects that need to follow the track selection, and thus the colour?

Do I need a whole new other function and filter or is it simply a matter of correctly writing the OSC address to the CSS syntax?
background-color: #(here something that follows the name & number)

I can’t reproduce that, can you upload your session file ?

The OSC address is working only for objects inside a parent container (strip etc.) How can I receive the same colour value to objects that need to follow the track selection, and thus the colour?

Doesn’t reaper send a specific /track/name message for selected track ? you could filter it and send the color to the appropriate receiver.

211nocolor.json (354.4 KB)
And here is the custom module
modulewithcolors.js (7.1 KB)

Doesn’t reaper send a specific /track/name message for selected track ? you could filter it and send the color to the appropriate receiver.

Could you explain how this would work? I already filter the name with the articulationFilter and it toggles the visibility of widget_id_x. Can we add something to that filter to change the background colour as well in one go?

Where are these compact faders exactly ?

Could you explain how this would work

I’m pretty sure we’ve covered everything you need to do that:

  • filtering messages against a specific address
  • retrieving the color depending on the track’s name
  • sending it to an osc receiver with an arbitrary osc address (for example /color/select).

in the MIXER tab under then track names there are some pan knobs. I used horizontal compact faders since they took less space. In the session file the 1st fader has the compact fader that gets stuck.

I’m pretty sure we’ve covered everything you need to do that:

Ok I’ll try my best to figure this out by myself. Thanks for your help again