Returning a certain String within a JS{ } block that calls a OSC listener even when the OSC listener hasn't received a value yet

Hi there,

So I'm giving the color to a Widget according to the incoming velocity of it, but I have changed the syntax and now instead of doing this

"type": "button",
"id": "trackFocus02",
"colorWidget": "JS{{

var velocityReceived = OSC{/note};
var colors = @{colorsArrayA}
return colors[velocityReceived] || \"#E0E0E0\";

}}",
"address": "/note",
"preArgs": "[
  @{deviceMode},
  42
]",
"target": "midi:virtual-launchcontrolxl",

Now I'm implementing this to be called on a globaly defined function such as
(You can skip this block of code and read the next)

"id": "functionDefinitions",
"script": "

// startof startof startof startof function
// Function: it takes the inputVelocity from a MIDI Device , and decode it to
// hsl ready output , the output is an array = [outputHue, outputLightness]
globals.launchControlXlLedColors2 = function launchControlXlLedColors2 (inputVelocity) {
'use strict';
let mixColor = [0 , 0];
let outputColor = [];
// Adjusting the color for velocity off (needed for open-stage-control)
if(inputVelocity == 0) {
    outputColor = [0 , 94.1];
} else {
    inputVelocity = inputVelocity.toString(2);
    inputVelocity = inputVelocity.padStart(6 , 0);
    console.log(inputVelocity);
    for(let i = 0 ; i < inputVelocity.length ; i++) {
        if( inputVelocity[i] == 1 ) {
            switch (i) {
                case 0:
                    mixColor[1] += 2;
                break;
                case 1:
                    mixColor[1] += 1;
                break;
                case 2:
                break;
                case 3:
                break;
                case 4:
                    mixColor[0] += 2;
                break;
                case 5:
                    mixColor[0] += 1;
                break;
                default:
                // Nothing forecasted in here
            }
        }
    } if (mixColor[1] === mixColor[0] && mixColor[0] === 0 ) {
        outputColor = [0 , 94.1];
    } else if (mixColor[1] === 0) {
        outputColor[0] = 0;
        switch (mixColor[0]) {
            case 3:
                outputColor[1] = 50;
            break;
            case 2:
                outputColor[1] = 40;
            break;
            case 1:
                outputColor[1] = 20;
            break;
        }
    } else if (mixColor[0] === 0) {
        outputColor[0] = 120;
        switch (mixColor[1]) {
            case 3:
                outputColor[1] = 50;
            break;
            case 2:
                outputColor[1] = 40;
            break;
            case 1:
                outputColor[1] = 20;
            break;
        }
    } else if (mixColor[0] === mixColor[1]){
        outputColor[0] = 60;
        switch (mixColor[1]) {
            case 3:
                outputColor[1] = 50;
            break;
            case 2:
                outputColor[1] = 43.3;
            break;
            case 1:
                outputColor[1] = 30;
            break;
        }
    } else if (mixColor[0] !==  mixColor[1]) {
        outputColor[1] = 50;
    let colorDif = mixColor[0] - mixColor[1];
        switch (colorDif) {
            case 2:
                outputColor[0] = 36;
            break;
            case 1:
                outputColor[0] = 41.5;
            break;
            case -1:
                outputColor[0] = 78.5;
            break;
            case -2:
                outputColor[0] = 84;
            break;
        }
    }
}
return outputColor;
}
// eof eof eof eof eof eof eof eof eof eof eof
// eof eof eof eof eof eof eof eof eof eof eof
",

Which is called by the widget in the following way

"type": "button",
"id": "trackFocus01",
"colorWidget": "JS{{
// colorWidget property
var c = globals.launchControlXlLedColors2(OSC{/note});
return 'hsl('
+ c[0] + ',100%,' + c[1] + '%)';
}}",
"address": "/note",
"preArgs": "[
  @{deviceMode},
  41
]",

This syntax works for when the device receive a velocity message but when just initiated the device , the OSC listener is undefined so it gives an error on the console such as Cannot read properties of undefined (reading 'undefined').

I have tried following the previous syntax to sort this out in the following way

JS{{
// colorWidget property
var c = globals.launchControlXlLedColors2(OSC{/note});
return 'hsl(' + c[0] + ',100%,' + c[1] + '%)' || 'hsl(0 ,100%, 94.1%)';
}}

It doesn't work (same undefined error)

I have tried refining this expression with

JS{{
// colorWidget property
var c = globals.launchControlXlLedColors2(OSC{/note});
if (typeof c !== 'undefined') {
return 'hsl(' + c[0] + ',100%,' + c[1] + '%)';
 } else {
return 'hsl(0 ,100%, 94.1%)';
}
}}

Obviously that was not going to work neither as c is defined in this context I guess.

Any ideas?

You could pass a default value in case the OSC{} is undefined:

var c = globals.launchControlXlLedColors2(OSC{/note} || [0, 0]);

Note: 'undefined' and undefined are not the same thing (the former is a string).

1 Like

Thank you , all working!!