Cabbage Logo
Back to Cabbage Site

Idea: mouse controls through image layer?

#1

Whether implemented as a new widget type (perhaps called “overlay”, or “shader”?), or whether as a new option to the existing image widget… I think it could be useful to have a way to use an image style widget as an overlay that still allows mouse interaction to widgets below it.

Basically this could be used to “grey out” or otherwise wash out an area, while still allowing interaction with controls beneath. For example, if you look VERY carefully in his video, you can see some knobs just above where it says “Waveshaping Table”, an image with colour(5,0,20,230) is obscuring them, but they can’t be interacted with.

That appears darker than I’m imagining for this scenario, but an example that comes to mind is a bypass button that visually greys out the entire screen, while still leaving the possibility for the user to edit controls even if they have no effect in the moment due to being bypassed.

I suspect it could be useful in simplifying complex UIs too, particularly if image files can use a transparency mask… but I’m getting outside of my skillset there :wink:

(edit for speeling)

#2

I could add an identifier to the image class, that allows mouse clicks to pass through? You could do allowmouseclicks(0) ?

#3

I think that is a perfectly acceptable solution!

#4

Thinking about this, and just to be clear… it can’t just be mouse clicks. Scroll wheel can be used to manipulate an object under the cursor too!

I’ll think some more, might be forgetting something else obvious. I mostly use a track pad.

#5

I’ve added a new identifier mouseinteraction(0/1) for the image widget. Seems to work fine for me here. It’s a nice feature :wink:

Latest build here

1 Like
Option Button with svg images
#6

Having an issue getting it to work.

First thought, the name is a little ambiguous… so I tried both 0 and 1 just in case.

Second thought, does anything special need to be done to have it work in imported widget files? Almost everything I use is one of those these days :nerd_face:

#7

Yeah, that might be it alright. I’ll test here. Regarding the name, mouseinteraction, I’m not sure how this is ambiguous? It enables or disables ALL mouse interaction with a widget?

#8

Does 1 mean the image intercepts mouse interaction, blocking interaction from underneath?

Or does 1 mean the image does not have mouse interaction, ALLOWING interaction below it?

#9

Yes, which is the default behaviour for every widget. You’ll only ever need to set this to 0 to achieve what you are looking for. Otherwise you’ll never need to call this identifier.

#10

Right, but do you see how you can look at the name two ways? Not a big deal tho if not…

What is a bigger deal, it doesn’t seem like this is working in a non-imported widget either. Unfortunately I’m just about to sign off for the night tho, so I can’t test for a while. I was hoping for it to work to confirm the theory… but so much for that.

#11

That’s odd, I’m actually using this feature for a new plugin I’m working on. I’ll double check that the version in Azure is correct. :wink:

#12

I nuked my install, redownloaded, and tried again… still no luck.

I’m trying:
image bounds(0,0,380,450) colour(255,255,255,155), mouseinteraction(0)
and:
image bounds(0,0,380,450) colour(255,255,255,155), mouseinteraction(1)

But I can’t control widgets below it (aka widgets appearing first in the .csd):
image

#13

Oh, I tested in a simple instrument with no imports or macros at all too! :innocent:

#14

Yup, my bad. Those changes did not propagated through. :see_no_evil: New build just started here.

And here’s how it works in practice:

2020-06-19 09.53.43
2020-06-19 09.53.431034×557 334 KB

**GUI for demo purposes only! Credit goes to the designers of the Phase motion plugin!

1 Like
How to add image identifiers?
#15

Just trying to understand what I’m seeing for the GUI… is it actually baked into the build?

It looks very slick… I’m just skinning colo(u)rs right now, but maybe one day I’ll learn to make my work look so well polished!

#16

Ha, no, I don’t deserve any credit for this one! I just made a screenshot of the Phase Motion plugin UI, and madepat of its sliders transparent. Then, placed it on top of an existing Cabbage slider. With your new feature it works pretty well. Oh, I just noticed that it’s an image rather than a gif. I’ll update that…

#17

Oh man, this might get pretty useful… I lucked out! :innocent:

#18

There was another post recently about creating custom UIs. I must relink this post to it. It’s pretty neat!

#19

I’m still not getting it to work from the pipeline build. :thinking:

Here’s the test file:

<Cabbage>
form caption("image test") size(400, 381), colour(58, 110, 182), pluginid("imgt")
keyboard bounds(8, 276, 381, 95)
rslider bounds(10,10,50,50)
image bounds(0,0,280,450) colour(255,255,255,155), mouseinteraction(0)
</Cabbage>
<CsoundSynthesizer>
<CsOptions>
-n -d -+rtmidi=NULL -M0 -m0d --midi-key-cps=4 --midi-velocity-amp=5
</CsOptions>
<CsInstruments>
; Initialize the global variables. 
ksmps = 32
nchnls = 2
0dbfs = 1

instr 1
    aOut vco2 p5*.5, p4

    outs aOut, aOut
endin

</CsInstruments>
<CsScore>
f0 z
</CsScore>
</CsoundSynthesizer>
#20

Something funky is going on. Let me take a look…

[edit] I had made my changes to a new fork. Sorry, just merging back to develop now… :roll_eyes:

Should be cooked in a few minutes.
https://dev.azure.com/rorywalsh/cabbage/_build/results?buildId=684&view=results

1 Like