My Button Bar

Moderators: LCMark, LCfraser

Post Reply
pink
Posts: 224
Joined: Wed Mar 12, 2014 6:18 pm

My Button Bar

Post by pink » Fri Aug 10, 2018 3:15 pm

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?
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

LCMark
Livecode Staff Member
Livecode Staff Member
Posts: 996
Joined: Thu Apr 11, 2013 11:27 am

Re: My Button Bar

Post by LCMark » Fri Aug 10, 2018 5:17 pm

@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.

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1785
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: My Button Bar

Post by [-hh] » Fri Aug 10, 2018 5:19 pm

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

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
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.
  • 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

pink
Posts: 224
Joined: Wed Mar 12, 2014 6:18 pm

Re: My Button Bar

Post by pink » Fri Aug 10, 2018 10:56 pm

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
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 1785
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: My Button Bar

Post by [-hh] » Fri Aug 10, 2018 11:06 pm

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

pink
Posts: 224
Joined: Wed Mar 12, 2014 6:18 pm

Re: My Button Bar

Post by pink » Mon Aug 13, 2018 4:30 pm

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?
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

pink
Posts: 224
Joined: Wed Mar 12, 2014 6:18 pm

Re: My Button Bar

Post by pink » Tue Aug 14, 2018 7:32 pm

For anyone interested in testing, here is the code for my button bar:

https://github.com/madpink/buttonbar-livecode-builder

Still have more planned..
Greg (pink) Miller

MadPink, LLC
I'm Mad, Pink and Dangerous to Know

Post Reply

Return to “LiveCode Builder”