Git Product home page Git Product logo

tinycolor's Introduction

TinyColor for LiveCode

This LiveCode Script library is based on Brian Grinstead's TinyColor v1.4.2 microframework. Which was translated into LiveCode Script by the FerrusLogic team

With this library you will be able to convert colors from one format to another in an easy and fast way. It has around 70 functions and commands to manipulate colors.

tinycolor's People

Contributors

stam66 avatar torocruzand avatar williamdelrey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

tinycolor's Issues

lighten and darken fail with RGB colors

I'm having an issue with lighten/darken (not tested other functions yet). If i pass a colorName or hex value, these all work as expected.

However if i pass the color of a control (which is set as an RGB value) or if i simply pass an RGB value, darken returns black and lighten returns a dark grey, no matter what color is passed as RBG.

The attached stack is a simple test - the buttons on the left assign aa color to 'source' by color name, RGB or hex, the buttons on the right lighten/darken the 'destination' graphic based on the 'source' background color.
tinyColor test.livecode.zip

hiContrastColor (e.g. black or white) depending on color brightness - for overlying text

I often need the textColor of buttons, fields or widgets to change based on background colour (eg on highlight), and need this to be black or white (or at least a defined dark and light colour, rather than a random opposing colour) to provide a consistent interface.

I may have missed it, but can't see such a function in the library, although it's simple enough.
If i understood the mostReadable function correctly it determines what the most readable colour is, but not necessarily what i want for my interface; and defaults to black or white only when the 'most readable' isn't readable.

While this is useful, i prefer a simpler, more straightforward methods such as:

// Dichotomous color (eg. black or white) defined by brightness of given color 
// intended for text color for max contrast with underlying colour
function hiContrastForColor pColor, colorForLight, colorForDark
    if colorForLight is empty then put "black" into colorForLight //i.e. defaults to black for light colours
    if colorForDark is empty then put "white" into colorForDark //i.e. defaults to white for dark colours
    if isDark(pColor) then
        return colorForDark
    else
        return colorForLight
    end if
end hiContrastForColor

would it be possible to consider this or something like this for an addition to the library?
Of if it's already present please do point this out.
Thank you

getBrightness() set to work with RGB format only - should be available for any format

As it stands getBrightness(pRGB) is set up for RGB formatted colours only, and by extension this applies to isLight() and isDark() as well.

This creates unnecessary work in liveCode to pass a colour formatted as RGB - for example if a control has had a colour attribute set by colorName or hex then this is passed to isDark() for example, the developer has to write extra code to translate this to RGB format (if you don't you get an error in the messageBox).

This is easily fixable by passing a color (rather than specifically RBG) and just making it the tinyColor sColor, from which the RBG is seamlessly extracted.

With the principle of minimising any changes to existing code, the handler could look like this:

function getBrightness pColor
    // http://www.w3.org/TR/AERT#color-contrast
    local tRGB
    get tinyColor(pColor, empty)
    put _fixRGB(toRGB(true)) into tRGB 
    split tRGB by comma
    return ((tRGB[1]* 299) + (tRGB[2]* 587) + (tRGB[3]* 114)) / 1000
end getBrightness

This works seamlessly with any color format passed - but i don't understand the _fixRBG() handler.
If the RBG values are revived directly from the tinyColor sColor this shouldn't be needed but have left in as i don't understand it.

if it isn't needed now, the handler could be a bit simpler:

function getBrightness pColor
    // http://www.w3.org/TR/AERT#color-contrast
    local tRGB
    get tinyColor(pColor, empty)
    put toRGB(true) into tRGB 
    split tRGB by comma
    return ((tRGB[1]* 299) + (tRGB[2]* 587) + (tRGB[3]* 114)) / 1000
end getBrightness

isDark() returns true regardless of color passed

using isDark() or isLight() fails to discern light or dark colours.

These are based on getBrightness()

getBrightness calls private function _fixRGB pRGB

private function _fixRGB pRGB returns text triplet

getBrigthness pRGB expects an array but calls _fixRGB which returns a triplet!

So then in getBrightness fails because tRBG is a text triplet, but getBrightness uses this as an array:
return (tRGB["r"]* 299 + tRGB["g"]* 587 + tRGB["b"]* 114) / 1000

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.