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: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
MauriceAndre
Posts: 9
Joined: Fri Aug 17, 2012 12:32 am

freeform buttons

Post by 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!

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

Re: freeform buttons

Post by openworld » Sun Mar 05, 2017 4:44 am

Maurice,

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?

Best,

Mark Frazier
Openworld

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.

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

Re: freeform buttons

Post by openworld » Mon Mar 06, 2017 5:24 am

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

http://www.pressreader.com/australia/ma ... 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?

Best,

Mark

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5462
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: freeform buttons

Post by 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: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

AndyP
Posts: 298
Joined: Wed Aug 27, 2008 12:57 pm
Location: Seeheim, Germany (ex UK)
Contact:

Re: freeform buttons

Post by 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"
   else
      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
Attachments
graphicbutton.zip
(5.63 KiB) Downloaded 50 times
Andy Piddock

http://2108.co.uk/tinyide/ - TinyIDE gives you more space to develop your ideas

http://2108.co.uk/script-editor-themer/ Script Editor Themer - Your code has never looked so good

My software never has bugs. It just develops random features

Post Reply

Return to “Feature Requests”