From b41cd65747eb98284394ec7bb93dcd4aca91d5f4 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Sun, 14 Jul 2019 09:19:41 -0700 Subject: [PATCH 1/2] feat: Add demo page back index.html --- examples/css/screen.css | 12 ++--- examples/img/{image2.jpg => image-2.jpg} | Bin examples/js/demo.js | 18 ++++--- index.html | 64 +++++++++++++++++++++++ 4 files changed, 80 insertions(+), 14 deletions(-) rename examples/img/{image2.jpg => image-2.jpg} (100%) create mode 100644 index.html diff --git a/examples/css/screen.css b/examples/css/screen.css index 4caf9d7..bc1d830 100644 --- a/examples/css/screen.css +++ b/examples/css/screen.css @@ -22,7 +22,7 @@ /* Base * *----------------------------------------------- */ -/** { +* { box-sizing: border-box; } @@ -31,10 +31,10 @@ body { padding: 0; background: var(--bg-color); } -*/ + /* Typography * *----------------------------------------------- */ -/* + html { font-size: 16px; font-family: var(--font); @@ -64,10 +64,10 @@ code { font-family: var(--code-font); overflow-wrap: break-word; } -*/ + /* -- Layout ------------------------------------------------------------------ */ -/* + .image-section { border-bottom: 1px solid #ccc; padding: 16px 16px 32px 16px; @@ -92,4 +92,4 @@ code { .time { color: var(--muted-color); font-weight: normal; -}*/ +} diff --git a/examples/img/image2.jpg b/examples/img/image-2.jpg similarity index 100% rename from examples/img/image2.jpg rename to examples/img/image-2.jpg diff --git a/examples/js/demo.js b/examples/js/demo.js index 11f8acb..0ef7923 100644 --- a/examples/js/demo.js +++ b/examples/js/demo.js @@ -1,12 +1,9 @@ var colorThief = new ColorThief(); var images = [ - 'black.png', - 'red.png', - 'rainbow-horizontal.png', - 'rainbow-vertical.png', - // 'transparent.png', - // 'white.png', + 'image-1.jpg', + 'image-2.jpg', + 'image-3.jpg', ]; // Render example images @@ -28,9 +25,11 @@ document.querySelectorAll('.image').forEach((image) => { // Run Color Thief functions and display results below image. // We also log execution time of functions for display. const showColorsForImage = function(image, section) { - // getColor(img) let start = Date.now(); + + // 🎨🔓 let result = colorThief.getColor(image); + let elapsedTime = Date.now() - start; const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, { color: result, @@ -40,10 +39,13 @@ const showColorsForImage = function(image, section) { // getPalette(img) let paletteHTML = ''; - let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20]; + let colorCounts = [2, 9]; colorCounts.forEach((count) => { let start = Date.now(); + + // 🎨🔓 let result = colorThief.getPalette(image, count); + let elapsedTime = Date.now() - start; paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, { count, diff --git a/index.html b/index.html new file mode 100644 index 0000000..7383844 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + + Color Thief + + + + + + + + + + + +
+ + + + + + + + + + + + + From a271686ab9fbf2300225f252ae4a75d78bae2c7a Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Sun, 14 Jul 2019 09:19:57 -0700 Subject: [PATCH 2/2] fix: Test tpl using wrong elapsedTime var --- cypress/test-pages/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/test-pages/index.html b/cypress/test-pages/index.html index dc9bad8..9d7a3a5 100644 --- a/cypress/test-pages/index.html +++ b/cypress/test-pages/index.html @@ -28,7 +28,7 @@
{{colorStr}}
-
{{elapsedTimeForGetColor}}ms
+
{{elapsedTime}}ms
 @@ -43,7 +43,7 @@
{{paletteStr}}
-
{{elapsedTimeForGetPalette}}ms
+
{{elapsedTime}}ms