Setting text style of disabled controls

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

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Setting text style of disabled controls

Post by golife » Thu May 24, 2018 4:55 pm

There are different states already built into LiveCode controls such as buttons.

1. Normal state (inactive, without focus, but not disabled)
2. Mouse over (mouseEnter, mouseWithin)
3. Mousedown (on mouseDown)
4. Disabled (the disabled of control xy)

I would like to override the built-in styles for such states. This seems to be only partially possible through scripting and detecting the current state of the control, whether focused, active, etc. or upon messages that are sent.

Now, I want to change the default behavior of a button which is disabled. I did not find any way through scripting or other ways to change, for example, the text color or text style of disabled buttons. The text color is always grey on a white background and 3D raised.

A workaround, such as covering the disabled button/control with some graphics when the button/control is disabled, is not a good solution since again, the label must still be visible, and the only way to show text as intended is using a field or button on top of the disabled button which is then not disabled. It is not a preferred solution.

Maybe someone made a style guide for controls for each of the states and the associated settings which are there by default, and how they could be set using built-in properties? So far, I could not find.

Actually, I would like to build a library of themes and styles which include the settings for states for each theme and style including style names. Controls would then have a style property, and the theme could be changed to also change all the styles for each control. Maybe also this already exists?

Any suggestions? And thank you in advance. I just hope that others do have similar questions.

Golife

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

Re: Setting text style of disabled controls

Post by jmburnod » Thu May 24, 2018 6:06 pm

Hi Golife,
What about using a group ?
One btn or field to back with a grc blendlevel 30 visble for disable state in front and invisible for enable state ?
Best regards
Jean-Marc
https://alternatic.ch

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

Re: Setting text style of disabled controls

Post by FourthWorld » Thu May 24, 2018 6:21 pm

What will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?

Once we know the goal we'll be better able to find a good solution to support it.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: Setting text style of disabled controls

Post by bogs » Thu May 24, 2018 7:55 pm

golife wrote:
Thu May 24, 2018 4:55 pm
A workaround, such as covering the disabled button/control with some graphics when the button/control is disabled, is not a good solution since again, the label must still be visible, and the only way to show text as intended is using a field or button on top of the disabled button which is then not disabled. It is not a preferred solution.
Those two choices are not the only ways to go about using a graphic to cover a button. For instance, with nothing more than the button and graphic, you can show the name of the graphic itself, with no label on the button.
Selection_003.png
Selection_003.png (5.13 KiB) Viewed 7501 times
and simply align the graphic over the button ...
Selection_004.png
Selection_004.png (4.63 KiB) Viewed 7501 times
You can then manipulate the graphic's name in any number of ways by whatever measure you need. Probably the simplest would be (the id below is whatever id your graphic is)...

Code: Select all

 set the name of graphic id 1005 to "Disabled"
You can format the text of the name of the graphic anyway you need to as well...
Untitled 1 -_005.png
Untitled 1 -_005.png (2.67 KiB) Viewed 7501 times
...as well as do all the manipulations of the graphic you might want to normally do.

Just some food for thought.
Image

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Setting text style of disabled controls

Post by golife » Fri May 25, 2018 8:26 pm

FourthWorld wrote:
Thu May 24, 2018 6:21 pm
What will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?

Once we iknow the goal we'll be better able to find a good solution to support it.
Hi Richard, to the contrary, I want to use styles that are part of other style guides and are established as well. I almost never use the default style of LiveCode. Sometimes, it makes also sense breaking a style. That should be possible as well - in other words, developers should be enabled to customize whatever if the desire arises. But yes, first we must learn established rules before breaking them. )

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Setting text style of disabled controls

Post by golife » Fri May 25, 2018 8:30 pm

I must admit, it never occured to me that I can show graphic names. Much easier workaround. I completely missed that. Thank you.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Setting text style of disabled controls

Post by jacque » Fri May 25, 2018 9:08 pm

golife wrote:
Thu May 24, 2018 4:55 pm
Now, I want to change the default behavior of a button which is disabled. I did not find any way through scripting or other ways to change, for example, the text color or text style of disabled buttons. The text color is always grey on a white background and 3D raised.
You can script this:

Code: Select all

on btnEnable pBool
  if pBool = false then
    set the backcolor of me to "gray70"
    set the textcolor of me to "white"
    set the threeD of me to false
    set the showborder of me to false
    set the enabled of me to false
  else
    set the backcolor of me to "white"
    set the textcolor of me to "green"
    set the threeD of me to true
    set the showborder of me to true
    set the enabled of me to true
  end if
end btnEnable
You can set any other properties you want as well. Note that to change textstyles, the font must support a built-in font of the desired style. If there is no "Arial Bold.ttf" installed, setting the textstyle to "bold" won't do anything. LC stopped supporting artificial styling some time ago.

To enable or disable the button, send "btnEnable <true|false>" to the button. The easiest way to use this handler is to set it as a behavior of the buttons that need to respond.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: Setting text style of disabled controls

Post by bogs » Fri May 25, 2018 11:19 pm

golife wrote:
Fri May 25, 2018 8:30 pm
I must admit, it never occured to me that I can show graphic names. Much easier workaround. I completely missed that. Thank you.
My pleasure, but we all learn something, and Jacque's method is far superior (and educational).
Image

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Setting text style of disabled controls

Post by golife » Mon May 28, 2018 5:08 pm

Jacqueline wrote:
You can set any other properties you want as well. Note that to change textstyles, the font must support a built-in font of the desired style. If there is no "Arial Bold.ttf" installed, setting the textstyle to "bold" won't do anything. LC stopped supporting artificial styling some time ago.
I tried your handler script snippet, Jacqueline, setting the properties. As before, the textcolor is not affected when the enabled of the button is false. I am using built-in text fonts in LiveCode 9 on Windows 10.

Looking through most of the text properties, what remains unchangeable is the textcolor.

So, in this case, and if strongly needed, I would then overlay the button with a graphic and set its name to what I want.

But generally, I very much prefer to not have to put up more than one control to have controls appear as they should for different states. We must desire another layer of detailed properties for standard objects such as fields, buttons, etc.

Thanks to all for thinking and suggesting solutions.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Setting text style of disabled controls

Post by jacque » Mon May 28, 2018 6:12 pm

That's odd, the textcolor changes here on my Mac. What type of button are you using?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: Setting text style of disabled controls

Post by FourthWorld » Mon May 28, 2018 6:40 pm

golife wrote:
Fri May 25, 2018 8:26 pm
FourthWorld wrote:
Thu May 24, 2018 6:21 pm
What will be the benefit to the user in breaking from well established conventions for the appearance of disabled controls?

Once we iknow the goal we'll be better able to find a good solution to support it.
Hi Richard, to the contrary, I want to use styles that are part of other style guides and are established as well. I almost never use the default style of LiveCode. Sometimes, it makes also sense breaking a style. That should be possible as well - in other words, developers should be enabled to customize whatever if the desire arises. But yes, first we must learn established rules before breaking them. )
I'm not a big fan of rules pe we (I cut my teeth during the punk years), but I am a big fan of usability, where consistency can play a big role in predictability.

Font, size, etc are all easily changeable while maintaining behaviors that are consistent with everything else the user encounters.

What guidelines recommend new behaviors for disabled controls, and how was research done to establish user benefit?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Setting text style of disabled controls

Post by jacque » Mon May 28, 2018 6:57 pm

@Richard, custom skins are common, games do it all the time. I agree with you that consistency is important if the app uses OS-standard controls though.

If my example handler isn't working on Windows the OP might consider custom icons instead. Those can be anything.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

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

Re: Setting text style of disabled controls

Post by FourthWorld » Mon May 28, 2018 7:19 pm

jacque wrote:
Mon May 28, 2018 6:57 pm
@Richard, custom skins are common, games do it all the time. I agree with you that consistency is important if the app uses OS-standard controls though.
Agreed, it can be. I'm just trying to learn what the desired behavior is and how it scored in user testing.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: Setting text style of disabled controls

Post by bogs » Mon May 28, 2018 8:32 pm

golife wrote:
Mon May 28, 2018 5:08 pm
But generally, I very much prefer to not have to put up more than one control to have controls appear as they should for different states.
I agree it is far preferable to use one control instead of overlaying, so when I am trying for a unique look, I just use the graphic instead of the button, it is easy to simulate the necessary button like qualities in the graphic, a few lines of code at most.
Image

golife
Posts: 103
Joined: Fri Apr 02, 2010 12:10 pm

Re: Setting text style of disabled controls

Post by golife » Mon May 28, 2018 9:01 pm

Hi Richard, thank you for answering and raising the question to me. Well, it is simply a matter of choice whether a disabled button just has a grey text without any 3D effect, or not, or maybe has a light bluish or reddish grey when going into details of design. It will still "appear" to be disabled within the context of the theme used.

A link I will give as just one example:
https://material.io/design/components/b ... ext-button

Actually, there are 5 states for buttons defined in Material Design.
  • Hover (mouseEnter)
  • Pressed (mouseDown)
  • Enabled (general state)
  • Focused
  • Disabled (as discussed)
Now, also Material Design has certain themes and gives guidelines about behavior and visual appearance. While we can at least do a subset, we currently will have problems implementing the full scale of such design framework.

I am trying to achieve defining themes for applications made with LiveCode where individual components (groups, fields, buttons, images, etc.) follow such design and behavior guidelines while on the level of controls each control has a style property which could easily be redefined in the context of themes. Changing the theme would change the appearance and (eventually) behaviors.

Following, for example, Material Design I started working on field groups consisting of the field itself, behavior according to a domain (text, number, date, etc.) and with leading and trailing icons or images, indicator, label, helper text etc. It is more work once but also achieves a great user experience.

https://material.io/design/components/t ... ml#anatomy

Depending on whether users are working on desktop or mobile or reduce the windows size (responsive design), and to achieve good and pleasant user interfaces no matter the size of the monitor, such components would behave consistently and adapt even almost automatically. The work does not have to be done again and again.

My goal would be a design that automatically adapts -- I know that this is impossible -- has the same behavior for all similar components, can change a theme "on the fly" and builds on a UX that other designers and developers have created elsewhere spending thousands of hours and offer this work for free. Then any new application would already inherit such design and behavior and the biggest part of work is already done.

I am just a lazy guy ). That is why ). And I love good design.

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”