Looking to change button image on value change

Home Forums General Programming Looking to change button image on value change

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #120028
    • Topics: 6
    • Replies: 12
    • Total: 18

    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.


    • Topics: 4
    • Replies: 470
    • Total: 474
    • ★★

    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?

    	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
    	end -- image found	
    • Topics: 6
    • Replies: 12
    • Total: 18

    This is exactly what I was looking for!

    Thanks, Dlandog

    • Topics: 45
    • Replies: 546
    • Total: 591
    • ★★★

    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)

    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 😉

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
There is currently 0 users and 27 guests online
No users are currently active
Forum Statistics
Threads: 2,442, Posts: 17,213, Members: 52,905
Most users ever online was 12 on January 22, 2019 3:47 pm
Do NOT follow this link or you will be banned from the site!