Cabbage Logo
Back to Cabbage Site

Label on top of button?

#1

I want to place a label on top of a button. Is it possible to stack widgets like this?

Thank you!

#2

A label widget on top of a button widget will block interaction with the button but if you put the label underneath the button you will no longer be able to see it. The way around this is to make the button slightly translucent using its alpha channel.

label   bounds(10,10,200,30), text("LABEL"), colour("white"), backgroundColour(0,0,0,0)
button  bounds(10,10,200,30), channel("button"), text("",""), colour:0(100,100,100,150), colour:1(100,100,100,150)
#3

What is indicating which is on top?

#4

I’m basically trying to replicate the normal button behavior, but with bigger text (I don’t see a fontSize option for the button widgets). I guess I’d need to do a cabbageGet and cabbageSet in Csound to change the text colour when the button is pushed?

<Cabbage>
form caption("Button with Label on Top") size(400, 300), colour(58, 110, 182), pluginid("def1")

#define BUTTON_RM colour:0(51, 51, 51, 255) colour:1(30, 144, 255, 200) fontColour:0(204, 204, 204, 255) fontColour:1(204, 204, 204, 255) corners(0) outlineColour(255, 255, 255, 255) outlineThickness(1) text("RM","RM")  
button bounds(10, 10, 35, 35) channel("rm2_button"), $BUTTON_RM textSize(20)


label   bounds(80,10,35,35), text("RM"), colour("51,51,51,255"), fontSize(20) fontColour(204, 204, 204, 255)
button  bounds(80,10,35,35), channel("button"), text("",""), colour:0(0,0,0,0), colour:1(0,0,0,0) outlineColour(255, 255, 255, 255) outlineThickness(1)

</Cabbage>
<CsoundSynthesizer>
<CsOptions>
-odac
</CsOptions>
<CsInstruments>

instr 1
    kButton chnget "myButton"

endin

</CsInstruments>
<CsScore>
f0 z
i1 0 [60*60*24*7] ; Run for a week
</CsScore>
</CsoundSynthesizer>
#5

The order in which widgets are declared in Cabbage code determines the order in which they are layered. There is also a toFront() identifier which can be used in a Csound instrument to change the layering order during performance. It has no effect within Cabbage code.

#6

Yes I think so. Probably something along these lines:

<Cabbage>
form caption("Untitled") size(400, 300), guiMode("queue"), pluginId("def1")
label   bounds(10,10,60,30), text("OFF"), fontColour(0,255,0), colour(0,105,0), channel("label"), outlineThickness(2), outlineColour("white")
button  bounds(10,10,60,30), channel("button"), text("",""), colour:0(0,0,0,0), colour:1(0,0,0,0), outlineThickness(2), outlineColour("white")
</Cabbage>
<CsoundSynthesizer>
<CsOptions>
-n -d -+rtmidi=NULL -M0 --midi-key-cps=4 --midi-velocity-amp=5
</CsOptions>
<CsInstruments>
; Initialize the global variables. 
ksmps = 32
nchnls = 2
0dbfs = 1

;instrument will be triggered by keyboard widget
instr 1
kbutton cabbageGetValue "button"
if trigger:k(kbutton,0.5,0)==1 then
 cabbageSet k(1),"label","text","ON"
 cabbageSet k(1),"label","fontColour",255,0,0
 cabbageSet k(1),"label","colour",105,0,0
elseif trigger:k(kbutton,0.5,1)==1 then
 cabbageSet k(1),"label","text","OFF"
 cabbageSet k(1),"label","fontColour",0,255,0
 cabbageSet k(1),"label","colour",0,105,0
endif
endin

</CsInstruments>
<CsScore>
;causes Csound to run for about 7000 years...
i  1 0 z
</CsScore>
</CsoundSynthesizer>
#7

Is this a bad way to do this? Should I be using images or something else instead?

#8

You can also leave the text blank on the button, and then place an image over it with interactive(0), which means mouse presses will pass to the widget beneath it.

#9

That sounds like it might be a reasonable way forward. Do you then swap the image on button presses as needed?

Is interactive(0) something that could be added to the label widget?

I used to build interfaces in TouchOSC and a label on top of a button was a common thing to do.

#10

You know that you can just use a label as a button? Just assign a channel, and a value of 0 or 1 will be sent each time you click it. When a click is detected you can update the text. Btw, the same is true of the image widget.

#11

Really? I had no idea that was possible. That blew my mind!

1 Like