[gnome-maps] Add color utils
- From: Marcus Lundblad <mlundblad src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps] Add color utils
- Date: Wed, 15 Feb 2017 20:00:27 +0000 (UTC)
commit f75d65dac2c27de375b0d717b53d02c6561b2242
Author: Marcus Lundblad <ml update uu se>
Date: Fri Jun 3 00:23:43 2016 +0200
Add color utils
Add a new module with utility functions for computing lumninance
and contrast for background and foreground colors and for parsing
color components from hex-encoded color strings.
This is needed to compute good contrasting colors for transit route
labels.
https://bugzilla.gnome.org/show_bug.cgi?id=755808
src/color.js | 94 ++++++++++++++++++++++++++++++++++
src/org.gnome.Maps.src.gresource.xml | 1 +
2 files changed, 95 insertions(+), 0 deletions(-)
---
diff --git a/src/color.js b/src/color.js
new file mode 100644
index 0000000..7216a28
--- /dev/null
+++ b/src/color.js
@@ -0,0 +1,94 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2017, Marcus Lundblad
+ *
+ * GNOME Maps is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * GNOME Maps is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with GNOME Maps; if not, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Marcus Lundblad <ml update uu se>
+ */
+
+/* Minimum contrast ratio for foreground/background color for i.e. route labels */
+const MIN_CONTRAST_RATIO = 3.0;
+
+/**
+ * Parses a given color component index (0: red, 1: green, 2: blue)
+ * from a hex-encoded color string. Optionally, if defaultValue is supplied,
+ * fallback to that if color is undefined.
+ */
+function parseColor(color, component, defaultValue) {
+ if (color) {
+ let index = component * 2;
+ return parseInt(color.substring(index, index + 2), 16) / 255;
+ } else {
+ return defaultValue;
+ }
+}
+
+/**
+ * Returns the relative luminance (0.0 - 1.0) of a color, expressed in HTML
+ * notation (i.e. ffffff for white) according to the W3C WCAG definition:
+ * https://www.w3.org/WAI/GL/wiki/Relative_luminance
+ */
+function relativeLuminance(color) {
+ let rsRGB = parseColor(color, 0);
+ let gsRGB = parseColor(color, 1);
+ let bsRGB = parseColor(color, 2);
+ let r = rsRGB <= 0.03928 ?
+ rsRGB / 12.92 : Math.pow(((rsRGB + 0.055) / 1.055), 2.4);
+ let g = gsRGB <= 0.03928 ?
+ gsRGB / 12.92 : Math.pow(((gsRGB + 0.055) / 1.055), 2.4);
+ let b = bsRGB <= 0.03928 ?
+ bsRGB / 12.92 : Math.pow(((bsRGB + 0.055) / 1.055), 2.4);
+
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Returns the contrast ratio between two colors, expressed in HTML notation
+ * (i.e. ffffff for white) according to the W3C WCAG defintion:
+ * https://www.w3.org/WAI/GL/wiki/Contrast_ratio
+ */
+function contrastRatio(color1, color2) {
+ let lc1 = relativeLuminance(color1);
+ let lc2 = relativeLuminance(color2);
+ /* order by luminance, lighter before darker */
+ let l1 = Math.max(lc1, lc2);
+ let l2 = Math.min(lc1, lc2);
+
+ return (l1 + 0.05) / (l2 + 0.05);
+}
+
+/**
+ * Finds a suitable foreground (text) color for a given background color.
+ * If the desiredForegroundColor argument is defined, return this color if it
+ * has enough contrast against the background, otherwise (or if that argument
+ * is undefined), return the one of black or white giving the higest contrast
+ */
+function getContrastingForegroundColor(backgroundColor,
+ desiredForegroundColor) {
+ if (!desiredForegroundColor ||
+ (contrastRatio(backgroundColor, desiredForegroundColor) <
+ MIN_CONTRAST_RATIO)) {
+ let contrastAgainstWhite = contrastRatio(backgroundColor, 'ffffff');
+ let contrastAgainstBlack = contrastRatio(backgroundColor, '000000');
+
+ if (contrastAgainstWhite > contrastAgainstBlack)
+ return 'ffffff';
+ else
+ return '000000';
+ } else {
+ return desiredForegroundColor;
+ }
+}
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index dbf82a5..c079264 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -6,6 +6,7 @@
<file>busyMarker.js</file>
<file>checkIn.js</file>
<file>checkInDialog.js</file>
+ <file>color.js</file>
<file>contactPlace.js</file>
<file>contextMenu.js</file>
<file>epaf.js</file>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]