freeform buttons

Something you want to see in a LiveCode product? Want a new forum set up for a specific topic? Talk about it here.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

freeform buttons

Postby MauriceAndre » Wed Apr 29, 2015 9:28 pm

Drag'n drop freefrom buttons / clickable controls - - - that would be a huge plus.

Currently, if you want to use the built-in button functionality (e.g., mouse-over and click state changes, tooltips etc), rather than building a button behavior from scratch, you have to use a transparent button, and then use your custom-made & -shaped graphics as icons. But then you 'inherit' the restrictive, rectangular bounding box of the button, so a round button, e.g., will behave as though it were rectangular one, and "hilite" bevor the mouse is actually within its visual boundary. And that makes for some ugly, non-pro visual feedback, unseemly of LiveCode.

Would be great if you could just use any PNG from UI design tools like Sketch, and LiveCode would respect the transparent portions of the PNG, and let you assign button functionality to it.

Please, please, please! Think of all those UI designers and prototypers out there who love Sketch: they'll be instantly converted to aspiring coders.

--- I do realize that you can probably set this up as a Widget in the new LCB api. So, I'll probably start reading up on SVG scripting... Still, freeform buttons would be fab, and I can't imagine that being hard to implement for one of those C++ cracks!
Posts: 9
Joined: Fri Aug 17, 2012 12:32 am

Re: freeform buttons

Postby openworld » Sun Mar 05, 2017 4:44 am


Fully agree with what you're saying about buttons that can be shaped to fit the exact shape of a .svg icon (or a .png image shape, trimming off the transparent background)

My hope is to be able to assemble and group such buttons into a meaningful form – for example, to resemble the branch structure of a tree, or the various forks in a trail – in a way that would be sensitive to which particular button the user clicked on.

Have you found any way this might be done?


Mark Frazier

PS A stretch goal – the location and rotation angle for each button to be set algorithmically as they appeared and linked together to create a familiar shape. This would allow for creation of adaptive landscapes based on lookups of which learning trails and "knowledge trees" the user had earlier explored, or shown interest in.
Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA

Re: freeform buttons

Postby openworld » Mon Mar 06, 2017 5:24 am

Here's a link describing how Livecode stacks can appear in any custom shape –- ... 2627558239

Perhaps such stacks can be used to overcome the problem of transparent rectangles that haunts freeform buttons, and also affects similar irregularly shaped .png images (both of which intercept mouseclicks on their transparent rectangles, rather than pass them through to objects below).

If stacks with irregular shapes (only) detect mouseclicks that are within their visible bounds, could they be scripted to act as freeform buttons of the sort Maurice has been seeking?


Posts: 63
Joined: Sat Sep 11, 2010 3:56 am
Location: Virginia, USA

Re: freeform buttons

Postby FourthWorld » Mon Mar 06, 2017 7:47 am

Maurice, have you considered using graphic objects?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems:
LiveCode User Group on Facebook :
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5137
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles

Re: freeform buttons

Postby AndyP » Mon Mar 06, 2017 6:14 pm

If using a png with transparency, then the mouse click will only action when within the solid sections of the image.

Add this to the image to create button effects.

so for an image named ImageBut1

Code: Select all
on mouseUp
   set the colorOverlay of the target to "false"
   set the dropShadow of the target to "false"
   --your action code here
end mouseUp

on mouseDown
   set the colorOverlay["color"] of the target to "255,0,0"
end mouseDown

on mouseMove
   if within(image "ImageBut1",the mouseLoc) & the mouseUp of the target is "true" then
      set the dropShadow of the target to "true"
      set the dropShadow["color"] of the target to "0,0,0"
      set the colorOverlay of the target to "false"
      set the dropShadow of the target to "false"
      exit mouseMove
   end if
end mouseMove

on mouseLeave
   set the colorOverlay of the target to "false"
   set the dropShadow of the target to "false"
end mouseLeave

See attachment stack
(5.63 KiB) Downloaded 28 times
Andy Piddock - TinyIDE gives you more space to develop your ideas Script Editor Themer - Your code has never looked so good

My software never has bugs. It just develops random features
Posts: 276
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)

Re: freeform buttons

Postby dixita » Mon Apr 10, 2017 12:43 pm

Hey any one can discuss about new features and new update ??
Posts: 5
Joined: Wed Mar 15, 2017 11:33 am

Re: freeform buttons

Postby Klaus » Mon Apr 10, 2017 1:53 pm

dixita wrote:Hey any one can discuss about new features and new update ??

Hey, this is the right place, so please start a discussion right here and now! 8)
Posts: 9234
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany

Return to Feature Requests

Who is online

Users browsing this forum: No registered users and 2 guests