My Button Bar
My Button Bar
I'm working on my first widget which is a block full of "buttons".
The intent here is that this will be for a survey application so these will be the answer options.
Still quite new to LCB, so I'm unsure if the way I'm planning to do others makes sense...
Drawing a bunch of round rectangles and the text is the easy part, but there are 2 things I would like to figure out how to do:
1. when a user presses a "rectangle" I need to determine which one is pressed and have that readable in some way... possibly just saving it as a property or returning it through mouseUp
2. when a "rectangle" is pressed, i need to inverse the colors to indicate that it is "selected" (or maybe change to a different color)
so my current strategy is...
-as the rects are drawn I will keep their locations in a List
-on mouseUp, I will get the location of the click and compare it across the List to see if it falls into one of the rects
-if I find one, then I will record the number of it in a property
-I will redraw the widget, each time comparing the element number to the save number and altering the colors accordingly.
before I wander too far into this, am I missing something simpler for determining what rect was clicked?
The intent here is that this will be for a survey application so these will be the answer options.
Still quite new to LCB, so I'm unsure if the way I'm planning to do others makes sense...
Drawing a bunch of round rectangles and the text is the easy part, but there are 2 things I would like to figure out how to do:
1. when a user presses a "rectangle" I need to determine which one is pressed and have that readable in some way... possibly just saving it as a property or returning it through mouseUp
2. when a "rectangle" is pressed, i need to inverse the colors to indicate that it is "selected" (or maybe change to a different color)
so my current strategy is...
-as the rects are drawn I will keep their locations in a List
-on mouseUp, I will get the location of the click and compare it across the List to see if it falls into one of the rects
-if I find one, then I will record the number of it in a property
-I will redraw the widget, each time comparing the element number to the save number and altering the colors accordingly.
before I wander too far into this, am I missing something simpler for determining what rect was clicked?
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
Re: My Button Bar
@pink: Your suggestion sounds more than reasonable... One thing which would potentially cut down on code (and runtime state) though would be to algorithmically derive the button hit by a mouseclick - rather than by iterating through rectangles...
e.g. If your button bar is horizontal, the width of the button bar is divided up equally amongst the buttons, then the button which was hit can be computed by:
put (x div (my width div sButtonCount)) + 1 into sSelectedButtonIndex
In terms of highlighting then you have the right pattern there - use a different color in OnPaint when rendering sSelectedButtonIndex.
I'm sure you've seen this already, but you can use 'redraw all' after setting the sSelectedButtonIndex to force the engine to repaint your widget.
e.g. If your button bar is horizontal, the width of the button bar is divided up equally amongst the buttons, then the button which was hit can be computed by:
put (x div (my width div sButtonCount)) + 1 into sSelectedButtonIndex
In terms of highlighting then you have the right pattern there - use a different color in OnPaint when rendering sSelectedButtonIndex.
I'm sure you've seen this already, but you can use 'redraw all' after setting the sSelectedButtonIndex to force the engine to repaint your widget.
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: My Button Bar
To 1.
Keep the rects (not the locs) in a list mGridRects and find the clicked rect in OnMouseDown:
put the click position into mClickLoc
put gridCellWithin(mClickLoc) into mClickedRect
To 2.
In OnPaint switch the color for stroking and filling your grid pathes according to mClickedRect and (you have to use also a variable for that) the state of the mouse.
Remarks.
Keep the rects (not the locs) in a list mGridRects and find the clicked rect in OnMouseDown:
put the click position into mClickLoc
put gridCellWithin(mClickLoc) into mClickedRect
Code: Select all
handler gridCellWithin(in pPoint as Point) returns Number
variable tC as Number
repeat with tC from 1 up to the number of elements in mGridRects
if pPoint is within mGridRects[tC] then
return tC
end if
end repeat
return 0
end handler
In OnPaint switch the color for stroking and filling your grid pathes according to mClickedRect and (you have to use also a variable for that) the state of the mouse.
Remarks.
- In OnMouseRelease you may use gridCellWithin(the mouse position) for a check whether your click was "canceled".
- Write your handlers in a way that allows further extensions, for example dragging your "buttons".
- You could compare your final widget to my widget iconGrid:
http://forums.livecode.com/viewtopic.ph ... 12#p158112
shiftLock happens
Re: My Button Bar
oddly enough, icongrid is what I am emulating in my mind (except I'm just including the text and no icons)
I've been hoping that it might get updated for 9.0
I've been hoping that it might get updated for 9.0
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: My Button Bar
I'll update all my widgets after the first final release of 9.1, hoping LCB has some more elementary features until then (mouse and keyboard support).
shiftLock happens
Re: My Button Bar
So my problem seems to be storing the rectangles...
I tried making a list, pushing each rectangle to the end and then in the mouseup handler, putting the corresponding element into a rectangle variable, however, it keeps telling me that the rectangle is in the wrong format.
So I tried making an array where I stored the top, bottom, left and right of each rectangle, then in the mouseup I:
-converted each value to a number
-set the top/bottom/left/right of a rectangle to each of the saved numbers
and I still get an error saying the rectangle format is incorrect
how can I save the rectangle information so that later I can retrieve it and test it?
I tried making a list, pushing each rectangle to the end and then in the mouseup handler, putting the corresponding element into a rectangle variable, however, it keeps telling me that the rectangle is in the wrong format.
So I tried making an array where I stored the top, bottom, left and right of each rectangle, then in the mouseup I:
-converted each value to a number
-set the top/bottom/left/right of a rectangle to each of the saved numbers
and I still get an error saying the rectangle format is incorrect
how can I save the rectangle information so that later I can retrieve it and test it?
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
Re: My Button Bar
For anyone interested in testing, here is the code for my button bar:
https://github.com/madpink/buttonbar-livecode-builder
Still have more planned..
https://github.com/madpink/buttonbar-livecode-builder
Still have more planned..
Greg (pink) Miller
MadPink, LLC
I'm Mad, Pink and Dangerous to Know
MadPink, LLC
I'm Mad, Pink and Dangerous to Know