Using a nicer Button "Pressed" state (than the default square)

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Sun Mar 18, 2018 2:31 am

Hi,
Does anhone knows if there is another better looking "Pressed state" that can be displayed after a button has been pressed down.

This is what the default one looks like on a round rectangle button. I wish I can remove it and use something elese.

This next capture is made from an Android Device and Not from the LC IDE (where it looks different).
(The Square thick selection surrounding the rounded corners is not very appelaing to me :? )

(Pressed state is shown/zoomed at the top- while Bottom part is when button is at normal state---

thanks for mentioning any alternative ways of displaying a "pressed state" :idea:
Image
Attachments
Remove selection effect zoomed.jpg

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3708
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Using a nicer Button "Pressed" state (than the default square)

Post by richmond62 » Sun Mar 18, 2018 9:52 am

I very rarely bother with LiveCode's in-built buttons, and tend to use images as buttons:
FIB.png
FIB.png (32.99 KiB) Viewed 1762 times
File removed as updated version available further down this window.
Last edited by richmond62 on Sun Mar 18, 2018 7:29 pm, edited 1 time in total.

jmburnod
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2395
Joined: Sat Dec 22, 2007 5:35 pm
Location: Genève
Contact:

Re: Using a nicer Button "Pressed" state (than the default square)

Post by jmburnod » Sun Mar 18, 2018 10:42 am

Hi,
If i understand you correctly, You may use a checkbox btn with two imgs for icons.
Best
Jean-Marc

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Sun Mar 18, 2018 11:21 am

Thanks Richmond,
I thought of using SVG once...will check your stack and if noone comes with some nicer tip...

What tool do you use do you create any specific text titles buttons to meet all your need :?:
I dont get how this fake button exist and work - :lol: - not a real SVG, right ?
:wink:

bogs
Posts: 3912
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a nicer Button "Pressed" state (than the default square)

Post by bogs » Sun Mar 18, 2018 3:02 pm

That isn't bad Richmond, although teriibi might want to change the one without the red line to the mouseDown message if it isn't a toggled button, and set the 2nd to mouseUp. Then it would behave more like an actual button.

Of course, you don't have to use images at all, similar things can be done with the built in graphics in Lc itself. Keep in mind, though, that
..1. they worked hard to maintain the look of a (button, field, etc) that looks native to the os it is on, and
..2. your creation may not look as close, and
..3. the image you posted is pretty well blown up, I doubt most people even see it in regular use where a button click takes less than a second to perform.

Aside from all of the above, since I mentioned making them with nothing but livecode, heres a couple of similar examples I did when I first started learning Lc. One is a list of actual buttons that went into a program, the 2nd was to test how buttons would react/look in certain situations and with different properties (unfinished, mostly just the top row works heh). Should work from v6.x to current I would think. Hope you find it helpful.
CustomButtons.zip
(4.85 KiB) Downloaded 36 times
*Edit - for smoother lines set the antialiased property on the graphic.
Image

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 3708
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Using a nicer Button "Pressed" state (than the default square)

Post by richmond62 » Sun Mar 18, 2018 7:32 pm

Here's a thought:
on mouseDown
set the borderColor of me to green
end mouseDown

on mouseUp
set the borderColor of me to yellow
end mouseUp

on mouseEnter
set the borderColor of me to red
end mouseEnter

on mouseleave
set the borderColor of me to blue
end mouseleave
Try it:
FIB.png
FIB.livecode.zip
Here's the stack
(15.48 KiB) Downloaded 28 times

bogs
Posts: 3912
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a nicer Button "Pressed" state (than the default square)

Post by bogs » Sun Mar 18, 2018 8:53 pm

Yup, thats pretty much the code in the stack I posted, all stuck in the stack level script. GMTA eh? Heh.

I should have mentioned, if you stick code like that where I do, if you handle one of those messages higher, remember to put 'pass mouse(handler)' so that it does what is going on in the stack too.
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Mon Mar 19, 2018 1:24 am

Ok, i m happy witht the shadow effect from start and if i can find the way to hide this Shadow when pressed (along with the Square selection - to eventualy add a surrounding Glow white light in place of those two effects... that would be enuff to me.
(doesnt make sense to me to still display a shadow when your button is down. right ?..and a Glow white light would fit any stack background in case I d change its color)

A Glow style as those fancy Power On buttons with a surrounding ring Led light.

bogs
Posts: 3912
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a nicer Button "Pressed" state (than the default square)

Post by bogs » Mon Mar 19, 2018 7:04 am

Well, all that stuff can be done, a great deal of it can be done without writing a line of code to do it. Shrinking shadows and re-growing them would require coding, but it isn't horribly difficult, probably 2-4 lines.
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Mon Mar 19, 2018 4:43 pm

Cant find tjhe oposite of :

Code: Select all

   set the dropShadow of button "BHD" to empty
:shock:
not true...full...normal...ignite :?: :?:

bogs
Posts: 3912
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a nicer Button "Pressed" state (than the default square)

Post by bogs » Mon Mar 19, 2018 4:55 pm

Try 'dropShadow' in the dictionary or in Max's wiki -
dropShadow["size"]
...The size of the shadow, i.e. how large the shadow is. This is between 0 and 255.
You can experiment with all these settings in the property inspector under 'Graphic Effects'.

As a simple test, put a graphic on the stack, the code for the graphic is

Code: Select all

on mouseDown
// smaller since the graphic is theoretically lower in height...
   set the dropShadow["size"] of me to "5"
end mouseDown

on mouseUp
// larger since the graphic is theoretically higher off the card...
   set the dropShadow["size"] of me to "10"
end mouseUp
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Tue Mar 20, 2018 12:17 am

Yop, I had seen both before I posted the question... :lol: (I always do now)

So I tried Normal..but didnt help.

os instead of showing/hidding...the idea ir more towards setting the Shadow on 0 or More to
get a simialr result, right ?

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Tue Mar 20, 2018 1:49 am

Thanks Bogs,
The Set Shadow to 0-255 will do the Job as for me ! I had not try that one since I focused on the empty/??? value (so many test to do try before finding the right prop/value)

So actualy what would be the Word to get the Shadow prop. back seems to be a mistery, one can easely remove it but not get it back..! :lol:

bogs
Posts: 3912
Joined: Sat Feb 25, 2017 10:45 pm

Re: Using a nicer Button "Pressed" state (than the default square)

Post by bogs » Tue Mar 20, 2018 3:16 am

The same code I put up there puts a drop shadow of the size your looking for, whether there was one there or not previously.
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Using a nicer Button "Pressed" state (than the default square)

Post by teriibi » Wed Mar 21, 2018 1:30 pm

thanks again. Somehow I had failed testing it... :roll:

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”