Page 1 of 1

Rounded corners for text field ? How to

Posted: Sun Feb 11, 2018 11:05 pm
by teriibi
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

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 12:26 am
by jmburnod
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

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 4:19 am
by bogs
Here is an example of a group (several actually) like jmburnod mentioned.
Image

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 3:09 pm
by teriibi
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. :?

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 3:39 pm
by bogs
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.

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 4:38 pm
by Klaus
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.

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 4:48 pm
by bogs
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

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 5:27 pm
by Klaus
I presumed an EDITABLE field, cherie! :D

Re: Rounded corners for text field ? How to

Posted: Mon Feb 12, 2018 5:35 pm
by bogs
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.

Re: Rounded corners for text field ? How to

Posted: Wed Feb 28, 2018 2:39 am
by teriibi
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 !

Re: Rounded corners for text field ? How to

Posted: Wed Feb 28, 2018 3:21 am
by bogs
Erm, I *think* you meant the above reply for your other topic where Richard pointed out that your "loc" needed 2 coordinates :D

Re: Rounded corners for text field ? How to

Posted: Wed Feb 28, 2018 3:31 am
by teriibi
Oopss, right, pulled a Topic , my bad ! :lol:

Re: Rounded corners for text field ? How to

Posted: Wed Feb 28, 2018 4:24 am
by FourthWorld
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.