Button Icon Placement

Devin Asay devin_asay at byu.edu
Tue Feb 23 12:29:37 EST 2010


On Feb 23, 2010, at 10:23 AM, Devin Asay wrote:

> On Feb 23, 2010, at 10:03 AM, Dan Friedman wrote:
>
>> Hello...
>>
>> Is there a way to have an icon on a button and have the label
>> centered, but not under the button?  I know if you set the textStyle
>> to left or right, then the icon is centered.  But, if you set the
>> textStyle to centered, then the text lies below the icon.
>>
>> My goal is to use a custom button graphic (up and down states) and
>> the button name (label) would display normally, over the icon.
>>
>> Any insight would be appreciated.
>
>
> Dan,
>
> Check out this thread from the list from one year ago:
>
> http://n4.nabble.com/Dynamic-labels-for-buttons-with-oddshaped-icon-images-td337687.html#a337687
>
> It dealt with the very issue you're asking about. In essence, you play
> with the margins of the button to move the label over the icon image.

And then, I'd almost forgotten, I played around with the idea and came  
up with the following script. The image I was using was a simple, 3-D- 
looking circle. The script sets the icon and a bunch of properties to  
superimpose the label on the image:

on mouseUp
    put the short name of img "redCircle" into tTargetIcon
    set the height of btn "myBtn" to the height of img tTargetIcon
    set the width of btn "myBtn" to the width of img tTargetIcon
    put the margins of btn "myBtn" into s
    set the icon of btn "myBtn" to the ID of img tTargetIcon
    set the showBorder of btn "myBtn" to false
    set the opaque of btn "myBtn" to false
    set the textColor of btn "myBtn" to "220,255,220"
    set the textSize of btn "myBtn" to 14
    set the textStyle of btn "myBtn" to "bold"

    # my massaging of Jacque's and Klaus's version
    --put (the height of btn "myBtn" - the textheight of btn "myBtn" -  
the effective textsize of btn "myBtn") div 2 into tMargin
    --   put the height of btn "myBtn" div 2 into tTopMarg
    --   put tTopMarg - (the textheight of btn "myBtn" div 2)- 1 into  
tBottomMarg
    --   set the margins of btn "myBtn" to 0,tTopMarg,0,tBottomMarg

    # Wilhelm's version
    put the icon of btn "myBtn" into tID
    put the height of img ID tID into timgheight
    set the height of btn "myBtn" to (timgheight  + the textHeight of  
btn "myBtn")
    put the height of btn "myBtn" into tBtHeight
    # the line above to simplify the following computations
    put (2* (tBtHeight-(the textHeight of btn "myBtn" + the effective  
textSize of btn "myBtn"))) / tBtHeight into tDivFactor
    put (the height of btn "myBtn" - the textHeight of btn "myBtn" -  
the effective textSize of btn "myBtn") / tdivfactor into tMargin
    set the margins of btn "myBtn" to 0,tMargin,0,tMargin

end mouseUp

  HTH

Devin

Devin Asay
Humanities Technology and Research Support Center
Brigham Young University




More information about the use-livecode mailing list