Css setting no interaction

Community Usage questions
1

Hi,
in a panel i have one button and two modals.

interaction of the button is set like this:

#{@{xxx}@{parent.variables.stomp}Sel} !== '00 00'}

it should be pressable only when the modals value is not '00 00' -> that works fine

in the css prop is now:

:host.no-interaction { filter: grayscale(1);}

now this should be set similiar to interaction means, i need a grayscale of 0 when it is '00 00' (the button is lightgrey when switching to '00 00')

i tried it like this:

#{ if ( @{xxx}@{parent.variables.stomp}Sel} !== '00 00'} ) {
:host.no-interaction { filter: grayscale(1);}
} else {
:host.no-interaction { filter: grayscale(0);}
}

assume that this should return the correct css string to the css property (tried it with JS{{}} and return statement too).

A rather simple task, how to do this properly?

Thanks!

2

There's no need for scripting here, :host.no-interaction { filter: grayscale(1);} is enough to do what you describe (the no-interaction class is only applied when interaction is disabled).

#{ if ( @{xxx}@{parent.variables.stomp}Sel} !== '00 00'} ) {
:host.no-interaction { filter: grayscale(1);}
} else {
:host.no-interaction { filter: grayscale(0);}
}

#{} prepends a return statement to the code, this can't work (return if (...) is not possible in js)

3

Yeah thanks this approach makes no sense.

I have to describe it better...

When choosing presets in the template a lot of buttons (and their corresponding modal ) are set to a value and the button is turned on or off.

via "receive" the gui is updated.

when there is 'off' (value '00 00') then the button should not be pressable( and greyed out).
When loading a preset this is not the case (not greyed out, just not pressable).
I assume this is because the interaction property is not evaluated because the modal has not changed.
(when checking the interaction property it says "false" correctly)

Button interaction property:

#{ if ( @{xxx}@{parent.variables.stomp}Sel} !== '00 00'}

When selecting the value '00 00' by hand (the label property has a OSC listener which triggers the modal) it is working like expected.

4

If the button is not pressable, then it has the no-interaction class (you can check this using the browser's inspector (f12)), or at least one of its parents has it.

5

Hmm, i found it in the inspector.

When loading the preset (with '00 00') the class "no-interaction" is present, the button is not pushable, but not greyed out.
When loading another preset (not '00 00') the class "no-interaction" disappears.
Switching then to "00 00" correctly greys it out, class "no-interaction" is there again.

I don't know..

6

On a side note

#{ if ( @{xxx}@{parent.variables.stomp}Sel} !== '00 00'}

has the same problem I pointed out earlier

7

Sorry this was a copy paste error, it is just without "if ()"

8

@{xxx}@{parent.variables.stomp}Sel}

Maybe that's a copy-paste error too, but the syntax here is incorrect (opening @{ missing ?)

If you can provide a session with very precise steps to reproduce the issue I may be able to help.

9

The interaction property :

#{@{stomp@{parent.variables.stomp}Sel} !== '00 00'}

I can of course provide you a session but you would need the hardware(a kemper amplifier).

I made a short youtube video, which i posted on the kemper forum to get people try it out and for feedback.

On the left screen side you see Buttons labeled "STOMP A, STOMP B".
What i tried to describe can be seen at second 21, i load a preset, and on right (beside the button) it switches the modal labels to "off" (-> '00 00').
The button(STOMP A, STOMPB,..)is not pressable and not greyed out.

At second 57 i toggle all STOMPS off and on (the same as selecting OFF or '00 00'), there you can see that now STOMP A, STOMP B,... are correctly greyed out.

Thank you!