JavaScript Color Libraries

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Apr 18 2017 09:22:49 GMT-0400 (EDT)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: JavaScript Color Libraries
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 350879168630a018b4dc04c79b8bae09
Keywords: 

My Notes
--------
I want to try out some JavaScript color libraries, to see which one(s) I might be able to use in Xholon apps.

google: javascript color library

To run:
    http://127.0.0.1:8888/XholonCOLORS.html?app=JavaScript%20Color%20Libraries&src=lstr&gui=clsc

References
----------
(1) https://github.com/bgrins/TinyColor
    TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.

(2) https://github.com/Qix-
  ) https://github.com/Qix-/color
    Javascript color conversion and manipulation library

(3) https://www.w3schools.com/w3css/w3css_color_libraries.asp

(4) http://rileyjshaw.com/sweep/
  ) https://github.com/rileyjshaw/sweep
    sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces.

(5) http://linkbroker.hu/stuff/kolorwheel.js/

(6) https://github.com/brehaut/color-js
    A color management API for javascript

]]></Notes> 

<_-.XholonClass>
<PhysicalSystem/>

  <TinyColor/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  
  <TinyColor/>
</PhysicalSystem>

<TinyColorbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, svgNode, fillInc, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  var color = $wnd.tinycolor("red");
  me.println(color);
  me.println(color.getBrightness());
  me.println(color.isLight());
  me.println(color.isDark());
  fillInc = 1;
  svgNode = null;
},
act: function() {
  me.println("testing ...");
  if (!svgNode) {
    svgNode = $doc.querySelector("div#xhsvg>div>svg>g>rect");
  }
  me.println(svgNode);
  var fill = svgNode.getAttribute("fill");
  me.println(fill);
  var tc = $wnd.tinycolor(fill);
  me.println(tc);
  var newFill;
  newFill = tc.lighten(fillInc).toString();
  me.println(newFill);
  svgNode.setAttribute("fill", newFill);
  if (newFill.substring(1) >= 0xd9fbd9) {
    fillInc *= -1;
  }
  else if (newFill.substring(1) <= 0x32cd32) {
    fillInc *= -1;
  }
}
}
]]></TinyColorbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/TinyColor" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/TinyColor" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>