update api add library for better text color detection

ardittristan · Dec 28, 2023 · 7d409f8 · 7d409f8
1 parent 9d100df
commit 7d409f8
Show file tree

Hide file tree

Showing 3 changed files with 1,023 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -144,9 +144,10 @@ When the user clicks the OK button, it puts the color code in the element's valu
  /**
  * Makes text white or black according to background color
  * @param {String} rgbaHex 8 long hex value in string form, eg: "#123456ff"
- * @returns {String} "black" or "white"
+ * @param {number} threshold Contrast threshold to control the resulting font color, float values from 0 to 1. Default is 0.5.
+ * @returns {( '#ffffff'|'#000000')} hex color
  */
- game.modules.get("colorsettings").api.getTextColor: getTextColor(rgbaHex) => String "white"|"black"
+ game.modules.get("colorsettings").api.getTextColor: getTextColor(rgbaHex, threshold = 0.5) => String "white"|"black"
 
  /**
  * Convert a Array of rgba[r, g, b, a] in string format to a hex string
@@ -173,13 +174,22 @@ When the user clicks the OK button, it puts the color code in the element's valu
  * @return rgba as string e.g. rgba('xxx','xxx','xxx','xxx')
  */
  game.modules.get("colorsettings").api.hexToRGBAString(colorHex, alpha = 1)
+
+ /**
+ * Calculate brightness value by RGB or HEX color.
+ * @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
+ * @returns (Number) The brightness value (dark) 0 ... 255 (light)
+ * @return {number} brigthness
+ */
+ game.modules.get("colorsettings").api.brightnessByColor(colorHexOrRgb):
 ```
 
 ## Changelog
 
-Check the [Changelog](https://github.com/ardittristan/VTTColorSettings/blob/master/CHANGELOG.md)
+Check the [Changelog](/CHANGELOG.md)
 
 ## Libraries used
 
-1. [vanilla-picker](https://github.com/Sphinxxxx/vanilla-picker)
-2. [html2canvas](https://github.com/niklasvh/html2canvas)
+- [vanilla-picker](https://github.com/Sphinxxxx/vanilla-picker) with license [ISC](https://github.com/Sphinxxxx/vanilla-picker/blob/master/LICENSE.md)
+- [html2canvas](https://github.com/niklasvh/html2canvas) with license [MIT](https://github.com/niklasvh/html2canvas/blob/master/LICENSE)
+- [font-color-contrast](https://github.com/russoedu/font-color-contrast) with license [MIT](https://github.com/russoedu/font-color-contrast/blob/master/LICENSE)
diff --git a/api.js b/api.js
@@ -1,9 +1,11 @@
+import {fontColorContrast} from "./lib/FontColorContrast.js"
+
 const API = {
  /**
- * Turn hex rgba into rgba object
- * @param {String} hex 8 long hex value in string form, eg: "#123456ff"
- * @returns object of {r, g, b, a}
- */
+  * Turn hex rgba into rgba object
+  * @param {String} hex 8 long hex value in string form, eg: "#123456ff"
+  * @returns object of {r, g, b, a}
+  */
  hexToRGBA(hex) {
  const hexArr = hex.slice(1).match(new RegExp(".{2}", "g"));
  const [r, g, b, a] = hexArr.map((hexStr) => {
@@ -20,24 +22,31 @@ const API = {
  },
 
  /**
- * Makes text white or black according to background color
- * @param {String} rgbaHex 8 long hex value in string form, eg: "#123456ff"
- * @returns {String} "black" or "white"
- */
- getTextColor(rgbaHex) {
+ * Makes text white or black according to background color
+ * @href https://wunnle.com/dynamic-text-color-based-on-background
+ * @href https://stackoverflow.com/questions/54230440/how-to-change-text-color-based-on-rgb-and-rgba-background-color
+ * @param {String} rgbaHex 8 long hex value in string form, eg: "#123456ff"
+ * @param {number} threshold Contrast threshold to control the resulting font color, float values from 0 to 1. Default is 0.5.
+ * @returns {( '#ffffff'|'#000000')} hex color
+ */
+ getTextColor(rgbaHex, threshold = 0.5) {
+ // return game.modules.get("colorsettings").api.getTextColor(rgbaHex);
+
  const rgba = this.hexToRGBA(rgbaHex);
- const brightness = Math.round((
- (rgba.r * 299) +
- (rgba.g * 587) +
- (rgba.b * 114)
- ) / 1000);
+ // OLD METHOD
+ /*
+ //const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : 1;
+ const brightness = Math.round((rgba.r * 299 + rgba.g * 587 + rgba.b * 114) / 1000);
  // const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : 1;
  if (this._isRealNumber(rgba.a) && rgba.a > 0.5) {
-  return (brightness > 125) ? 'black' : 'white';
+ return brightness > 125 ? "black" : "white";
  } else {
-  //return 'black';
-  return (brightness > 125) ? 'black' : 'white';
+ //return 'black';
+ return brightness > 125 ? "black" : "white";
  }
+ */
+ const hexTextColor = fontColorContrast(rgba.r, rgba.g, rgba.b, threshold);
+ return hexTextColor;
  },
 
  /**
@@ -107,14 +116,48 @@ const API = {
  const colorHex2 = `${colorHex}${Math.floor(alpha * 255)
  .toString(16)
  .padStart(2, "0")}`;
-  rgba = this.hexToRGBA(colorHex2);
+ rgba = this.hexToRGBA(colorHex2);
  // const c = Color.from(colorHex);
  // rgba = c.toRGBA();
  }
  const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : alpha;
  return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + realAlpha + ")";
  },
 
+ /**
+ * Calculate brightness value by RGB or HEX color.
+ * @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
+ * @returns (Number) The brightness value (dark) 0 ... 255 (light)
+ * @return {number} brigthness
+ */
+ brightnessByColor(colorHexOrRgb) {
+ let color = "" + colorHexOrRgb;
+ let isHEX = color.indexOf("#") == 0;
+ let isRGB = color.indexOf("rgb") == 0;
+ let r = 0;
+ let g = 0;
+ let b = 0;
+ if (isHEX) {
+ const rgba = this.hexToRGBA(color);
+ r = rgba.r;
+ g = rgba.g;
+ b = rgba.b;
+ }
+ if (isRGB) {
+ var m = color.match(/(\d+){3}/g);
+ if (m) {
+ r = m[0];
+ g = m[1];
+ b = m[2];
+ }
+ }
+ if (typeof r != "undefined") {
+ return (r * 299 + g * 587 + b * 114) / 1000;
+ } else {
+ return undefined;
+ }
+ },
+
  _isRealNumber(inNumber) {
  return !isNaN(inNumber) && typeof inNumber === "number" && isFinite(inNumber);
  }