Rounded corners for text field ? How to

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

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

Rounded corners for text field ? How to

Post by teriibi » Sun Feb 11, 2018 11:05 pm

Hi,
I can t locate the Properties for rounding each corners of a Text field...or any other fld, list, DG.
Usualy you can check each corners and even define a radius, 5, 10... to define larger/smaller round corners.

anyone knows how to do that :?:
tkx
something like that...
Image
Attachments
round corners.png

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

Re: Rounded corners for text field ? How to

Post by jmburnod » Mon Feb 12, 2018 12:26 am

Hi,
As far I know, you can't have rounded corner for a fld
When I need something like that i use a group. One grc and one fld
Jean-Marc

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

Re: Rounded corners for text field ? How to

Post by bogs » Mon Feb 12, 2018 4:19 am

Here is an example of a group (several actually) like jmburnod mentioned.
Image
Image

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

Re: Rounded corners for text field ? How to

Post by teriibi » Mon Feb 12, 2018 3:09 pm

Ok, so the 2 last lines of the coding below are not possible (yet), right ?

Code: Select all

on mouseup 
   ## rounding grafic 
   set the roundRadius of graphic "Rectango" to 10
   set the style of graphic "Rectango" to roundRect
   ## rounding text field 
   set the roundRadius of fld "Finput" to 10
   set the style of fld "Finput" to roundRect
   
Are you using group to indeed apply a grafic rectangle on top of an input field and rounding the rectangle corners to make it look like the underlying input fields have rounded corners ?
for I grouped fields but dont know if I can actualy apply rounded corners to the group that would actualy affect corners of all the input fields included within this group. :?
Last edited by teriibi on Mon Feb 12, 2018 9:47 pm, edited 1 time in total.

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

Re: Rounded corners for text field ? How to

Post by bogs » Mon Feb 12, 2018 3:39 pm

I don't know about the last two lines of code, I've never tried em :)

As far as I know, you don't even have to group the controls, in this version of that timer (earlier prototype), the controls were just laid out on the card as you see in the project browser. Then I either made the field or graphic more or less transparent to get the effect I wanted.
Image
I removed the title bar from the window, and used two buttons to move it around or close it. I didn't start grouping parts of it until I needed to move things around, since it is easier to move / position a group than individual components where one is above the other in the layers.
Image

Klaus
Posts: 10327
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Rounded corners for text field ? How to

Post by Klaus » Mon Feb 12, 2018 4:38 pm

Fields in Livecode are ALWAYS rectangular, no rounded corners available, same for groups!

Put a graphic (rounded rect) BEHIND your field to get this effect.

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

Re: Rounded corners for text field ? How to

Post by bogs » Mon Feb 12, 2018 4:48 pm

Klaus wrote:
Mon Feb 12, 2018 4:38 pm
Put a graphic (rounded rect) BEHIND your field to get this effect.
Well, behind or on top, depending on the effect your trying to achieve :D

Don't forget to turn off the 'border' on the field.
Image
*Edited to show examples -
Image
Made into a quick 'custom window shape'
Image
Last edited by bogs on Mon Feb 12, 2018 5:28 pm, edited 1 time in total.
Image

Klaus
Posts: 10327
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Rounded corners for text field ? How to

Post by Klaus » Mon Feb 12, 2018 5:27 pm

I presumed an EDITABLE field, cherie! :D

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

Re: Rounded corners for text field ? How to

Post by bogs » Mon Feb 12, 2018 5:35 pm

Klaus wrote:
Mon Feb 12, 2018 5:27 pm
I presumed an EDITABLE field, cherie! :D
Well, it depends on how fancy you want to get, although Klaus brings up a good point. If your field is 'behind' the graphic, and the graphic is set to opaque (like what I put in above), you will have to code so that the graphic doesn't block the field, but it can be done and isn't horribly difficult.

If the graphic is *not* opaque, and your only using the border to enclose the field, no issues.

If you want the graphic and *don't* want someone to edit the field behind it, that is even easier, by default as Klaus points out, opaque graphics are blocking what is behind them, no matter what blend level you set :D

As advice, I'd set the scrollbar in a scrolling field to 'small' to boot, the smaller it is, the closer to the edges of the radiused corners you can put it without it overlapping past them.
Image

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

Re: Rounded corners for text field ? How to

Post by teriibi » Wed Feb 28, 2018 2:39 am

Ahhhhhhhhhh ! :lol:
Well, I m glad I ve learned this today.
(The doc is so substancial and with so litle samples one has to figure it all, I believe that many would d save a loooooooot of time with more examples on each functions.)
didnt think 2 values were mandatory indeed...
TKS !

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

Re: Rounded corners for text field ? How to

Post by bogs » Wed Feb 28, 2018 3:21 am

Erm, I *think* you meant the above reply for your other topic where Richard pointed out that your "loc" needed 2 coordinates :D
Image

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

Re: Rounded corners for text field ? How to

Post by teriibi » Wed Feb 28, 2018 3:31 am

Oopss, right, pulled a Topic , my bad ! :lol:

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

Re: Rounded corners for text field ? How to

Post by FourthWorld » Wed Feb 28, 2018 4:24 am

teriibi wrote:
Wed Feb 28, 2018 2:39 am
(The doc is so substancial and with so litle samples one has to figure it all, I believe that many would d save a loooooooot of time with more examples on each functions.)
Sounds like you've been reading the Dictionary. Which is a great resource for quick reference on specific language elements, but to get a sense of how they fit together check out the User Guide (accessed through the Help menu).

Pg 145 starts an introduction to scripting the user interface, which sounds like a good fit for where you are right now.

Worth at least a quick skim of the rest as well, so you'll know where you can learn more about specific topics as you need them later on.
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/

Post Reply

Return to “Rich Media”