Looking to change button image on value change

[Jsh]

Hello all,

So what I’m trying to achieve is to have a modulator for changing the oscillator waveform (well, this will other uses as well) such that when I click on the sine wave for example the sine wave image will light up, send the midi message to change waveform and the other waveform image that was selected will dim, etc.

I have a hacky way of doing this atm where I have 4 image buttons, 1 for each wave type that is doing nothing other than displaying the image of both on & off in the image for values 0 & 1, I then have a uiCustomComponent sitting on top of the four buttons with mouse down event using event.x for mouse position (or event.y depending on orientation) to set the value 0~3 and change the value of the image buttons so that the corresponding button has a value of 1 and that waveform is in the highlighted image position (rambling a bit). The uiCutstomComponent is invisible and just sitting on top of the buttons, and I’m not even really sure what it is or what it’s for…so it’s pretty messy

The problem with having multiple modulators changing waveforms rather than just 1 is that I need to be able to automate it in my DAW and I’d rather not have a bunch of redundant modulators used just for images but I’m not too sure what the best approach is or how to work with images and this side of things properly.

Cheers

[dnaldoog]

Hi Jsh,

If you’ve got as far as detecting Mouse Events on uiComponent, you can embed the images directly into the uiComponent with code like: (this is for if the image size is exactly what you want otherwise use drawImage()). You could dynamically change opacity depending on which image was clicked on.

Does this help?

frResource=resources:getResource("myImage")
	if frResource~=nil then
		frImage	= Image()
		frImage = frResource:asImage()
                g:setOpacity(1.0)  -- 0.0 - 1.0		
                g:drawImageAt(frImage,0,0,false) -- x,y position in uiComponent
		--g:drawImage(frImage,A,B,C,D,E,F,G,H,false)
	end -- image found	
end

UPDATE 2/19/2021

I realised there’s some redundancy in the code:

frResource=resources:getResource("myImage")	
if frResource~=nil then
		frImage	= Image()
		frImage = frResource:asImage()

Better to do:

local frImage = Image(resources:getResourceAsImage("myImage"))
    if frImage ~= nil then

re: github.com/RomanKubiak/ctrlr/discussions/173

• This reply was modified 3 years, 2 months ago by dnaldoog. Reason: changed the old code github.com/RomanKubiak/ctrlr/discussions/173

[Jsh]

This is exactly what I was looking for!

Thanks, Dlandog

[goodweather]

Well, even if the code above is working, the simplest is just to have 2 uiImageSliders modulators:
– one to select the waveform: use an image of a 4 position button, values 0-3
– one to display the wave: use an image with your 4 waveforms, values 0-3

When changing the waveform button, change the value of the wave modulator to the same value with a small Lua code (uncomplete code below but to give you the idea)

--
-- Called when a modulator value changes
-- @mod   http://ctrlr.org/api/class_ctrlr_modulator.html
-- @value    new numeric value of the modulator
--
Wave_OnChange = function(--[[ CtrlrModulator --]] mod, --[[ number --]] value, --[[ number --]] source)
modWaveform:setValue(value, true)
end

Look at my OscShape_OnChange method in my Pro2 panel. Button OSC 1 Shape/noise for example.
It is more complex than what I describe above because I’m also adapting the LCD screen, enabling/disabling other pulldowns based on the wave selection…

But the way I propose is easier than using custom components.
Anyway, in programming, there are always many different ways to achieve the same objective 😉

[Author]

Posts