Hilited Text in scrolling field becomes transparent on PC

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 10094
Joined: Fri Feb 19, 2010 10:17 am

Re: Hilited Text in scrolling field becomes transparent on PC

Post by richmond62 » Sat Nov 20, 2021 7:19 pm

I wonder if, instead of setting a textColor one could set an icon as a textColor
and that would work?
-
SShot 2021-11-20 at 20.16.46.png
-
Attachments
Hiliter.livecode.zip
Here's a mad attempt.
(1.56 KiB) Downloaded 142 times

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Hilited Text in scrolling field becomes transparent on PC

Post by jacque » Sat Nov 20, 2021 8:02 pm

The hilitecolor is not the same as the textcolor. Windows determines how to change the textcolor based on the saturation of the hilitecolor behind the text.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 3069
Joined: Sun Jun 04, 2006 9:39 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by stam » Sun Nov 21, 2021 1:24 am

You can manage the text colour yourself to make sure contrast between background and text is appropriate.

I've done this previously by converting RBG to YIQ to decide white or black text, inspired by https://24ways.org/2010/calculating-color-contrast/
The main function (1st code block) returns either 'black' or 'white' for the text colour - so all i do is pass the background colour and set the textColor to getHiContrastForColor(<the background color>)

My function has an extra step so i can pass a background colour either as RBG, hex or colorName to the function (see the 2nd code block below).

Code: Select all

function getHiContrastColorForColor  pColor
    local tR, tG, tB, YIQ, tRGBtriplet
    put RGBFromAnyColorFormat (pColor) into tRGBtriplet
    put item 1 of tRGBtriplet into tR
    put item 2 of tRGBtriplet into tG
    put item 3 of tRGBtriplet into tB
    put ((tR * 299) + (tG * 587) + (tB * 114))/1000 into YIQ
    if YIQ >= 128 then 
        return "black"
    else
        return "white"
    end if
end getHiContrastColorForColor
if you set the textColor of the hilitedLine to this, you'll always get appropriate contrast.

My handlers to return an RGB triplet regardless if passed Hex, color name or RGB are below. I know there is a more efficient way get the RBG of a color name, just haven't got round to testing it yet...

Code: Select all

function RGBFromAnyColorFormat pColor
    # take a color as color name, hex or RGB and return RGB
    local tRGBtriplet
    if "#" is in pColor then  // convert hex to RGB
        put _RGBFromHex(pColor) into tRGBtriplet
    else if  "," is not in pColor then // if not hex and not RGB convert color name to RGB
        put _RGBFromColorName(pColor) into tRGBtriplet
    else
        put pColor into tRGBtriplet
    end if
    return tRGBtriplet
end RGBFromAnyColorFormat

function _RGBFromColorName pColorName 
    # Convert any color name to RGB
    # taken from: https://lessons.livecode.com/m/2592/l/125746-translating-a-color-name-to-an-rgb-numeric-triplet
    local tRGBColor, tTool
    put the tool into tTool
    if pColorName is not a color then return "Error: not a color"
    create invisible button
    if the result is not empty then return "Error"
    set the backgroundColor of last button to pColorName
    set the foregroundColor of last button to pColorName
    set the backgroundPixel of last button to the backgroundPixel of last button
    put the backgroundColor of last button into tRGBColor
    delete last button
    send "set the tool to tTool" to me in 10 milliseconds
    return tRGBColor
end _RGBFromColorName

function _RGBFromHex pHex
    # Convert Hex to RGB
    local tRGB
    put char 2 to -1 of pHex  into tRGB
    put "," after char 2 of tRGB
    put "," before char -2 of tRGB
    repeat with x = 1 to 3
        put baseConvert(item x of tRGB, 16, 10) into item x of tRGB
    end repeat
    return tRGB
end _RGBFromHex
Last edited by stam on Sun Nov 21, 2021 2:30 am, edited 1 time in total.

raugert
Posts: 112
Joined: Thu May 26, 2016 9:30 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by raugert » Sun Nov 21, 2021 1:32 am

I believe Jacque is on to something. I'm not sure about the "saturation" of the color behind the text but this is what I found..

It appears that the hilited textColor will inherit the color of the backgroundColor of the field (this might be was Jacque was eluding to). If it is set to "empty", it will actually inherit the color of the card.

I guess it's just a windows oddity. I'm more of a Mac user.

Thanks all for the discussions. It's great to see the colaboration on this forum.

Richard

Just I as was going to post this I saw reply from Stam ! Interesting concept for managing text and hilite colors. One would think it would be part of the OS :?


Hiliter 2.livecode.zip
(18.09 KiB) Downloaded 155 times
Livecode Indy 9.6.11 (Stable)
MacOS Sonoma 14.2
Xcode 15.0.1 SDK 17.0

stam
Posts: 3069
Joined: Sun Jun 04, 2006 9:39 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by stam » Sun Nov 21, 2021 2:28 am

raugert wrote:
Sun Nov 21, 2021 1:32 am
Just I as was going to post this I saw reply from Stam ! Interesting concept for managing text and hilite colors. One would think it would be part of the OS :?
There are many situations where the OS won't manage this. I use this mainly for text in or on top of graphics - but works fine in any situation... I initially created this when i created a small stack to list all of the IDE colorNames, represented in a data grid where each line's backgroundColor was the colorName - the problem is that the textColor wouldn't be appropriate half the time, this sorts it out...

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Hilited Text in scrolling field becomes transparent on PC

Post by jacque » Sun Nov 21, 2021 11:00 pm

I looked at the lesson that _RGBFromColorName was from, I like the first comment where the poster uses the templateButton instead of a real one. That way there is no extra button on the card to deal with.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

stam
Posts: 3069
Joined: Sun Jun 04, 2006 9:39 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by stam » Sun Nov 21, 2021 11:06 pm

Yeah i saw that FerrusLogic had this snippet on their website:

Code: Select all

function colorToRGB pColor
    local tColorRGB

    if pColor is a color then
        set the colorOverlay["color"] of the templateGraphic to pColor
        put the colorOverlay["color"] of the templateGraphic into tColorRGB
        reset the templateGraphic
        return tColorRGB  for value
				
    else return empty for value
end colorToRGB
I'll get round to testing it and if it works as expected will be replacing the method i borrowed from the LC lesson - just haven't got round to it yet ;)

raugert
Posts: 112
Joined: Thu May 26, 2016 9:30 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by raugert » Fri Dec 17, 2021 5:05 pm

My use case was to allow users to change the backgroundColor of the field and yet maintain readability for the hilitedLine. By adjusting the text color and the hilite color using the HiContrast formula (thanks Stam !), I was able to achieve what I want. This is what I came up with:

Screen Shot 2021-12-17 at 9.51.00 AM.png

Code: Select all

on mouseUp
   answer color
   put it into tBG
   set the backGroundColor of fld "List" to tBG
   set the textColor of fld "List" to getHiContrast(tBG)
   set the hiliteColor of fld "List" to getHiContrast(tBG)
end mouseUp

function getHiContrast  pColor
   put pColor into tRGB
   set the itemdelimiter to comma
   put ((item 1 of tRGB * 299) + (item 2 of tRGB * 587) + (item 3 of tRGB * 114))/1000 into tContrast
   if tContrast >= 128 then return "black" else return "white"
end getHiContrast
Thanks to all for your contributions :D


Hiliter 2.livecode.zip
(18.32 KiB) Downloaded 146 times
Livecode Indy 9.6.11 (Stable)
MacOS Sonoma 14.2
Xcode 15.0.1 SDK 17.0

stam
Posts: 3069
Joined: Sun Jun 04, 2006 9:39 pm

Re: Hilited Text in scrolling field becomes transparent on PC

Post by stam » Fri Dec 17, 2021 6:05 pm

raugert wrote:
Fri Dec 17, 2021 5:05 pm
thanks Stam !
You're welcome ;)

I find this an really helpful function in many situations, which is why i've abstracted it to be able to pass any colour format to it.
I prefer a more verbose version as if i ever come back to it years later it's easier to understand what i've done lol...

It sits in my swiss-army-knife general script only library i use with most projects so i don't need to look at the code, just call getHiContrastColorForColor pColor and can pass it an RGB, Hex or colorName and it works a treat...

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7390
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Hilited Text in scrolling field becomes transparent on PC

Post by jacque » Sat Dec 18, 2021 9:30 pm

Here are a few color functions I've collected over the years. Some are very old and there may be better ways to do things now.

Code: Select all

-- colorname to RGB:

Faster, newer method (Jan Schenkel):

 set the colorOverlay["color"] of the templateGraphic to tColorName
 put the colorOverlay["color"] of the templateGraphic into tColorRGB1

Older method:

function translateColorName pColorName -- using templateButton
  set the backcolor of the templateButton to pColorName
  get the effective backpixel of the templateButton
  set the backcolor of the templateButton to empty
  set the backpixel of the templateButton to it
  put the backcolor of the templateButton into tRGB
  reset the templateButton
  return tRGB
end translateColorName

-- Choose text color based on lightness of background:
Works for most values, iffy when one of the triplets is near zero.
Based on first method from this comment from Ben Rubinstein: "In the standard formula for RGB -> HSL (Hue, Saturation, Lightness), Lightness is calculated as the average of the max and min of the RGB values.  In the standard formula for RGB -> HSV (Hue, Saturation, Value), Value is the max of the RGB values."

function calcLightness
  put the backcolor of this cd into tRGB
  get avg(max(tRGB),min(tRGB))
  if it > 150 then return "black"
  return "white"
end calcLightness


-- to & from HSV: [Monte Goulding]

function RGBtoHSV r, g, b
   if the paramcount is 1 then
      put item 3 of r into b
      put item 2 of r into g
      put item 1 of r into r
   end if
   local maxv, minv, diff, s, rc, gc, bc, h
   set the numberFormat to "0.###############"
   put r / 255 into r
   put g / 255 into g
   put b / 255 into b
   put max(r,g,b) into maxv
   put min(r,g,b) into minv
   put maxv - minv into diff
   if maxv <> 0 and diff <> 0 then
      put diff / maxv into s
      put (maxv - r) / diff into rc
      put (maxv - g) / diff into gc
      put (maxv - b) / diff into bc
      if r = maxv then put bc - gc into h
      else if g = maxv then put 2 + rc - bc into h
      else if b = maxv then put 4 + gc - rc into h
      multiply h by 60
      if h < 0 then
         add 360 to h
      end if
   else
      put 0 into s
      put 0 into h
   end if
   return round(h),round(s * 100),round(maxv * 100)
end RGBtoHSV

function HSVtoRGB h, s, v
     if the paramcount is 1 then
      put item 3 of h into v
      put item 2 of h into s
      put item 1 of h into h
   end if
  local rgb, i, f, p, q, t
  set the numberFormat to "0.###############"
  divide s by 100
  divide v by 100
  if s is 0 then put v,v,v into rgb
  else
    divide h by 60
    put trunc(h) into i
    put h - i into f
    put v * (1 - s) into p
    put v * (1 - s * f) into q
    put v * (1 - s * (1- f)) into t
    if i is 0 then put v,t,p into rgb
    if i is 1 then put q,v,p into rgb
    if i is 2 then put p,v,t into rgb
    if i is 3 then put p,q,v into rgb
    if i is 4 then put t,p,v into rgb
    if i is 5 then put v,p,q into rgb
  end if
  return round(item 1 of rgb * 255), round(item 2 of rgb * 255), round(item 3 of rgb * 255)
end HSVtoRGB 
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply