Controlling the inverse color of selected text

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

Post Reply
Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Controlling the inverse color of selected text

Post by Hans-Helmut » Sat Mar 04, 2017 7:05 pm

In other programs, there is a possibility to not just select the letters of a text string in a field, but to select the whole text of the field in a way which is visually more appealing.
HilitedField.JPG
HilitedField.JPG (9.26 KiB) Viewed 9012 times
1: Not only the letters of the selected text shall be hilited, but choosing a full text selection would mean: The hilited area would stretch to the full width of the field. Around the hilite area a visible offset space should be seen.

2: I would like to fully control the inverted color of the selected text. In other words, when text is selected, the text color changes automatically depending on the hilite color. The hilited TEXT color should then be controllable. But I do not see where this could be done.

Is there any setting, any property which I miss?

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9658
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Controlling the inverse color of selected text

Post by dunbarx » Sat Mar 04, 2017 11:46 pm

Hi.

I am not sure if the full empty extent past the actual text can be "selected". Others may know better.

I can think of a few kluges that will do what you want, and nobody but you and I would know the difference. But lets wait until we are sure that the way you asked for is not possible.

One kluge might be to set a borderless semi-transparent graphic over the field, sized just the way you want. It can easily cover multiple lines. It can pass messages to the field below if you need it to, and can control its own backColor, as well as the textColor of the field. It has the advantage of being its own control, which gives you much more power and flexibility with whatever shenanigans you want to do to that field.

Craig Newman

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Sun Mar 05, 2017 9:44 am

Hi Craig, thank you for the response.
One kluge might be to set a borderless semi-transparent graphic over the field
Well, yes, I was thinking this way. But it adds a "kluge". A nice word by the way ). In German language "klug" means "witty" or "smart".

The problem is that placing a semi-transparent field or other object will not allow to use the selected text. Also, the textcolor - for example if black - will become light bluish.
SelectedText2.JPG
SelectedText2.JPG (8.86 KiB) Viewed 8971 times
The example field control I am showing is just doing that.
It consists of a basic field in Livecode plus a overlay rectangle.
I have put a semi-transparent rectangle with a bluish background color on top. The border lines are white creating the distinction between selection and field boundaries.

PROBLEM 1: The user can no longer select the text.
PROBLEM 2: If the text is selected then it might disappear because it will be white when the hilitecolor of the control is blue for example. So, actually, also in this case, the text must not be selected at all. But then, the user wants to do something with the chunk of text selected...

Maybe there is another solution. I have not found it yet.

Since, I believe, details of UX and component design become more and more important, there are more such property details for a field (or control in general) should be addressed.

I would also appreciate very much to see additional properties for fields, buttons and other objects where this makes sense:

- "Hilitecolor" of a chunk of text (set, get) for fields or wherever text could be hilited in response to hiliting the object
- Rounded corners (degrees) for fields, buttons, graphic objects
- Possibility to define separate left, top, right and bottom borders and theis styles/colors/line sizes
- Allowing to place images / SVG / icons into fields which then can have a margin to push the text to the side or let text flow around

Further thoughts:
- Allowing bulleted/numbered lists as styles in text fields (selecting bullet styles or defining some)
- Allowing visually to set tabs and margins (before, after, left, right) as well as the leading using a ruler or a separate control where such values could be set?
- In-built style system allowing to define styles for paragraphs of chunks of text, ... (and other objects). So, at least we could have text styles and paragraph styles? (We can develop this on our own of course.) But does it make sense when everyone has to develop his/her own style system?
- Allowing table definitions in fields (?) - well, we have table fields, but can they be styled on such level of detail as with CSS? -- and can they be part of a flow? Maybe, that may also be possible to a degree even now.

Is it possible to do? Would it soon be possible using LCB? This would just mean to be on-pair with HTML/CSS styling and probably even be a requirement for serious detailed work for UX designers?

Just it comes to my mind: Then I could really possibly see a very large number of people working with LC defining web applications which would translate to HTML/CSS. And LC code would translate to Javascript. Well, just an additional thought here. Partially it seems to be done already.

Hans-Helmut

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Sun Mar 05, 2017 12:22 pm

well, I tried another way for the full selection of a field:

1. Use a rectangle without border in the same color as the color of the selection of text
2. Use 4 thick white lines around so that selecting the chunk of text is still possible to separate the text from the field border without the user not being able to edit
3. Move the inserted selection mimicking rectangle to the right of the text. In case the user would start editing, the rectangle must disappear and then appear again when user is selecting again, but resizing it so that its left side is always adjusted to be adjunct to the right side of the text chunk and also resizing it to the width of the field minus the white border around the selection.

This works, but I do not know why I can not set the extended selection mimicking rectangle without the visual effect that the standard selection the text does NOT match with this rectangle. There is a minimal difference - but it is visible.

I can set sizes to fractions of pixels, but it just does not allow to match nevertheless. See how it looks:
F.JPG
F.JPG (9.26 KiB) Viewed 8958 times

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Controlling the inverse color of selected text

Post by [-hh] » Sun Mar 05, 2017 11:41 pm

Try with the following in the field's script.

Code: Select all

on mouseDown
   lock screen; lock messages
   set foreColor of me to "0,0,0"
   set hiliteColor of me to "255,255,0"
   set locktext of me to false
   set listbehavior of me to false
   unlock screen; unlock messages
end mouseDown

on exitField
   closeField
end exitField

on returnInField
  closeField
end returnInField

on closeField
   lock screen; lock messages
   set foreColor of me to "255,255,255"
   set hiliteColor of me to "128,128,255"
   set listbehavior of me to true
   set hilitedline of me to 1
   unlock screen; unlock messages
end closeField
shiftLock happens

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9658
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Controlling the inverse color of selected text

Post by dunbarx » Mon Mar 06, 2017 2:21 am

Why not leave the editable field in front, set its opaque property to "false", and size a smaller field behind it, with its backColor set to whatever?

There are no limits to the kluges within LC.

Craig

AxWald
Posts: 578
Joined: Thu Mar 06, 2014 2:57 pm

Re: Controlling the inverse color of selected text

Post by AxWald » Mon Mar 06, 2017 10:15 am

Hi,

Found something in my dormant table project ;-)
Is this what you think of, vaguely at least?
Textfield.png
a test from months ago
Textfield.png (2.52 KiB) Viewed 8883 times
4 fields & a bg grc, nothing else.
The idea was to keep it as simple as possible, when blown up to a real table every additional element would hurt.
The "inverse color of selected text" itself I cannot control this way, only the backcolor of "the selectedCell" and the hilitecolor of the selectedText - maybe using the "blending voodoo" would accomplish this?

Have fun!
All code published by me here was created with Community Editions of LC (thus is GPLv3).
If you use it in closed source projects, or for the Apple AppStore, or with XCode
you'll violate some license terms - read your relevant EULAs & Licenses!

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Tue Mar 07, 2017 12:33 am

Thank you for all the nice suggestion. I had the same idea during my rest last night as suggested by dunbarx:
y dunbarx » Mon Mar 06, 2017 1:21 am

Why not leave the editable field in front, set its opaque property to "false", and size a smaller field behind it, with its backColor set to whatever?
I have succeeded doing this! But nevertheless, there still some cases where it needs to be improved.

So, instead of using the usual text selection (full text) where the text is hilited, here the full text width in the field is hilited. This is done in many other programs where all the text of a field needs to be hilited and show for the full width of the field.
fullSelection.JPG
fullSelection.JPG (11.51 KiB) Viewed 8855 times
1. User tabs from one field to the next. All the text is selected and the hilite of the field is shown. Actually, the text is hilited. User clicks with the mouse into the field. The same.

2. User leaves field using mouse or clicking elsewhere. The indication of a selection is removed.

These "full selection" fields consist of three controls: 1 field and 2 graphics

Status: Hilited
Field: Opaque = false, hilite color = blue, text color = white, text style = bold, autohilite = true
Boundary of the field is a graphic of type rectangle with opaque = false
The "hilite graphic" behind the field is a rectangle with background color = blue and no borders shown

Status: Normal
Opaque = true of false, text color = black, text style = plain
The "hilite graphic" is the rectangle with which is hidden

Code: Select all


# Trial and test LCS script: 07-Mar-2017, 00:30, by hhh

# Needs improvement as there is redundant code. Could be a "behaviour" of fields defined elsewhere.

# Using a text edit field with opaque = false, a rectangle to hilite the field for it's full length behind the field and a rectangle as a field boundary. The hilite color of the field should be the same as the color of the "hiliteMe" rectangle. The field's autohilite is true.

on openField
   lock screen
   set the textcolor of me to white
   set the textstyle of me to bold     
   set the backgroundcolor of graphic "hiliteMe" to blue
   show graphic "hiliteMe"
end openField

on exitField
   lock screen
   set the textcolor of me to black
   set the textstyle of me to plain
   hide graphic "hiliteMe"
   pass exitField
end exitField

Of course, there will be better ways than this. I think the bounding box is not needed, but I used it to gain more control over the appearance. I want to eventually create a "rectangle" using four graphics of type "line" so that I can set colors and thickness of each line individually.
Last edited by Hans-Helmut on Wed Mar 08, 2017 8:22 am, edited 1 time in total.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9658
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Controlling the inverse color of selected text

Post by dunbarx » Tue Mar 07, 2017 3:49 am

Glad you have a way forward. Good luck.

I was concerned, however, that we seem now to have two "HH" members here. One with a minus sign.

It is to be hoped that the two of you never meet, so as to avoid annihilation.

Craig

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Wed Mar 08, 2017 8:26 am

dubarx: I was concerned, however, that we seem now to have two "HH" members here. One with a minus sign.
HH+ and HH- together may create void. But did the whole universe not start from such void? :)

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9658
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Controlling the inverse color of selected text

Post by dunbarx » Wed Mar 08, 2017 4:00 pm

If you are talking about Hydrogen and anti-Hydrogen, maybe. But that element, mostly, is not in its diatomic state.

Too hot, you see.

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Sat Mar 11, 2017 10:01 pm

Thank you danbarx. As I found, NASA gave an estimate of $62.5 trillion for the production of 1 gram. This would help Livecode to become the leading programming language. So, plus and minus do have their values. :D

https://en.wikipedia.org/wiki/Antihydrogen

By the way, I created a stack which I am publishing here. I was able to develop a field behavior which comes very close to what I was intending to do. I would be happy to receive feedback and critical remarks.

I do not know how to upload a file here, but I am giving a link below and I am hoping that someone can profit from this beginners task.

Selecting the entire content when opening a field

(Latest version see last message.)

Hans-Helmut
Last edited by Hans-Helmut on Wed Mar 15, 2017 6:56 pm, edited 3 times in total.

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Sun Mar 12, 2017 6:18 pm

Selecting the entire content when opening a field

(Latest version see last message.)

Hans-Helmut
Last edited by Hans-Helmut on Wed Mar 15, 2017 6:55 pm, edited 2 times in total.

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Controlling the inverse color of selected text

Post by Hans-Helmut » Wed Mar 15, 2017 6:49 pm

So, here is a new version - and this is all for beginners !!! I am learning myself.

There are little changes, but I have put two buttons that would usually be hidden (or their script to be called through some other mechanism) setting behaviors. Look at their script.

Some additional small refinements applied. The next shall be to allow the hiliting rectangle to cover also multi-line fields when in editing mode and also give a visual feedback when the mouse is just over a field.

Then I want fields to reflect today's style guides for UI design (I am focused on Windows) incorporating pictures and icons, for example the "x" icon to allow users to delete what they typed.

/* I found a bug which is not reproducible. But it appears from time to time. Suddenly and automatically the cursor is jumping between two fields repeating times, and it is not possible to stop it. I have to quit and restart. It is as if one script is calling the other. I do not know yet how to prevent it. */

/* Also, still to be investigated: If the bottom rectangle (called graphic "fieldglow") is opaque then the rectangle (called graphic "hiliter") placed on top of has a pale color. But there is no transparency level.*/
SelectField.JPG
https://drive.google.com/file/d/0B92XGU ... sp=sharing

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”