From 9b5ad1d442017812e94231d05971912369004126 Mon Sep 17 00:00:00 2001 From: Cahleeb Date: Thu, 17 Aug 2023 14:17:05 -0700 Subject: [PATCH] Finish brightness, contrast, saturation, and blur sliders. Replace simple-color-picker with svelte-awesome-color-picker. --- package-lock.json | 64 ++++------- package.json | 2 +- src/lib/components/VerseOnImage.svelte | 150 ++++++++++++++++++------- src/routes/+layout.svelte | 3 - 4 files changed, 129 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2d0a3491..3f43df45e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,8 +37,8 @@ "proskomma-json-tools": "^0.7.1", "proskomma-tools": "^0.0.5", "rimraf": "^5", - "simple-color-picker": "^1.0.5", "svelte": "^3", + "svelte-awesome-color-picker": "^2.4.7", "svelte-check": "^3", "svelte-eslint-parser": "^0.30", "svelte-french-toast": "^1.0.3", @@ -1521,12 +1521,6 @@ "dev": true, "peer": true }, - "node_modules/@types/insert-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@types/insert-css/-/insert-css-2.0.1.tgz", - "integrity": "sha512-slUriXg8Y0JvpQoZlQ96bzzi86AU0DvtstKmGtBWpzJilFnpMUDbREi28Gpa+ZaIrTTCQUfvpDS7z7F1uwlYjQ==", - "dev": true - }, "node_modules/@types/jsdom": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.1.tgz", @@ -4810,12 +4804,6 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, - "node_modules/insert-css": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", - "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==", - "dev": true - }, "node_modules/internal-slot": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", @@ -7256,16 +7244,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/simple-color-picker": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/simple-color-picker/-/simple-color-picker-1.0.5.tgz", - "integrity": "sha512-MUsSVfO/51zTrBA6nsmX5ABe/FXmhd6N+hie6EAWb6Ph4eydtQNRZ9hyb/HmLaG403YB/JAtpry70AaCd8AwBw==", - "dev": true, - "dependencies": { - "@types/insert-css": "^2.0.0", - "insert-css": "^2.0.0" - } - }, "node_modules/sirv": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz", @@ -7586,6 +7564,15 @@ "node": ">= 8" } }, + "node_modules/svelte-awesome-color-picker": { + "version": "2.4.7", + "resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-2.4.7.tgz", + "integrity": "sha512-LW9n16pR3V9vxFXdq0rmtBYJXv57zBZmLV/KNPtFqTo0kYwu7NsQhZZxFv6qoB/5PUXyPMfe3VCllyauFEY3SQ==", + "dev": true, + "dependencies": { + "colord": "^2.9.3" + } + }, "node_modules/svelte-check": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.4.3.tgz", @@ -9857,12 +9844,6 @@ "dev": true, "peer": true }, - "@types/insert-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@types/insert-css/-/insert-css-2.0.1.tgz", - "integrity": "sha512-slUriXg8Y0JvpQoZlQ96bzzi86AU0DvtstKmGtBWpzJilFnpMUDbREi28Gpa+ZaIrTTCQUfvpDS7z7F1uwlYjQ==", - "dev": true - }, "@types/jsdom": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.1.tgz", @@ -12400,12 +12381,6 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, - "insert-css": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", - "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==", - "dev": true - }, "internal-slot": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", @@ -14270,16 +14245,6 @@ "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==", "dev": true }, - "simple-color-picker": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/simple-color-picker/-/simple-color-picker-1.0.5.tgz", - "integrity": "sha512-MUsSVfO/51zTrBA6nsmX5ABe/FXmhd6N+hie6EAWb6Ph4eydtQNRZ9hyb/HmLaG403YB/JAtpry70AaCd8AwBw==", - "dev": true, - "requires": { - "@types/insert-css": "^2.0.0", - "insert-css": "^2.0.0" - } - }, "sirv": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz", @@ -14523,6 +14488,15 @@ "integrity": "sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==", "dev": true }, + "svelte-awesome-color-picker": { + "version": "2.4.7", + "resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-2.4.7.tgz", + "integrity": "sha512-LW9n16pR3V9vxFXdq0rmtBYJXv57zBZmLV/KNPtFqTo0kYwu7NsQhZZxFv6qoB/5PUXyPMfe3VCllyauFEY3SQ==", + "dev": true, + "requires": { + "colord": "^2.9.3" + } + }, "svelte-check": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.4.3.tgz", diff --git a/package.json b/package.json index c34b4fb62..f8a060451 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,8 @@ "proskomma-json-tools": "^0.7.1", "proskomma-tools": "^0.0.5", "rimraf": "^5", - "simple-color-picker": "^1.0.5", "svelte": "^3", + "svelte-awesome-color-picker": "^2.4.7", "svelte-check": "^3", "svelte-eslint-parser": "^0.30", "svelte-french-toast": "^1.0.3", diff --git a/src/lib/components/VerseOnImage.svelte b/src/lib/components/VerseOnImage.svelte index bbae76540..770816e50 100644 --- a/src/lib/components/VerseOnImage.svelte +++ b/src/lib/components/VerseOnImage.svelte @@ -24,7 +24,7 @@ The verse on image component. import config from '$lib/data/config'; import { toPng } from 'html-to-image'; import ImagesIcon from '$lib/icons/image/ImagesIcon.svelte'; - import ColorPicker from 'simple-color-picker'; + import ColorPicker from 'svelte-awesome-color-picker'; $: barColor = $themeColors['SliderBarColor']; $: progressColor = $themeColors['SliderProgressColor']; @@ -61,7 +61,6 @@ The verse on image component. let voi_refItalic = $s['ui.text-on-image']['font-style'] == 'italic'; let voi_refFontPercent = 80; let voi_fontColor = $s['ui.text-on-image']['color']; - let voi_colorPicker; let voi_letterSpacing = 0; let voi_lineHeight_x100 = 0; $: voi_lineHeight = 1 + voi_lineHeight_x100 / 100; @@ -72,7 +71,7 @@ The verse on image component. let voi_textBoxHeight; $: voi_textBox_maxHeight = voi_height - voi_textPosY; let voi_textShadow_mode = 'glow'; - let voi_textShadow_value = 15; //DEBUG: should be 75% of max + let voi_textShadow_value = 15; $: voi_textShadow = voi_textShadow_mode == 'none' ? '' @@ -83,6 +82,10 @@ The verse on image component. 'px ' + (voi_fontSize * voi_textShadow_value) / 100 : '0 0 ' + ((voi_fontSize * voi_textShadow_value) / 100) * 2) + 'px black'; //DEBUG: from Android: Shadow size goes 0 to 0.2. + let voi_imageBrightness = 100; + let voi_imageContrast = 100; + let voi_imageSaturation = 100; + let voi_imageBlur = 0; $: update_voi_textBoxHeight( txtFormatted, @@ -115,16 +118,38 @@ The verse on image component. /*DEBUG*/ console.log('voi_textBoxHeight=', voi_textBoxHeight); } - $: render(voi_imgSrc); + $: render( + voi_imgSrc, + voi_imageBrightness, + voi_imageContrast, + voi_imageSaturation, + voi_imageBlur + ); - function render(imgSrc) { + function render(imgSrc, imgBrightness, imgContrast, imgSaturation, imgBlur) { if (!cnv) return; cnv_background = new Image(); cnv_background.src = base + '/backgrounds/' + imgSrc; // Make sure the image is loaded first otherwise nothing will draw. cnv_background.onload = function () { const context = cnv.getContext('2d'); + // context.filter = `brightness(${ingBrightness}%) contrast(${imgContrast}) saturate(${imgSaturation}%)`; + context.filter = `brightness(${imgBrightness}%) contrast(${imgContrast}%) saturate(${imgSaturation}%) blur(${imgBlur}px)`; context.drawImage(cnv_background, 0, 0, cnv.width, cnv.height); + + // // //Contrast + // // context.globalCompositeOperation = 'color'; + // // context.fillStyle = `rgba(${voi_imageContrast}%, ${voi_imageContrast}%, ${voi_imageContrast}%, 1)`; + // // context.fillRect(0, 0, cnv.width, cnv.height); // apply the contrast comp filter + + // //Saturation + // context.globalCompositeOperation = 'saturation'; + // context.fillStyle = 'hsl(0,' + imgSaturation + '%,50%)'; // saturation at 100% + // context.fillRect(0, 0, cnv.width, cnv.height); // apply the saturation comp filter + + // context.globalCompositeOperation = 'source-over'; // restore default comp + + /*DEBUG*/ console.log(context.filter); }; } @@ -133,17 +158,6 @@ The verse on image component. voi_imgSrc = config.backgroundImages[0].filename; - voi_colorPicker = new ColorPicker({ - color: '#FF0000', - background: '#454545', - // el: document.getElementsByTagName('colorPickerContainer'), - width: 200, - height: 200 - // window: document.getElementsByTagName('colorPickerContainer').contentWindow - }); - - // voi_colorPicker.appendTo('#colorPickerContainer'); - centerButton(0); }); @@ -532,6 +546,7 @@ The verse on image component.
+ + + + +
-
-

Editor Content 3

+ + +

Editor Content 3 - Color

@@ -615,6 +640,8 @@ The verse on image component. color={voi_textShadow_mode == 'none' ? progressColor : unselectedColor} /> + + + +
-

Editor Content 5

+ +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ +
+
-

Editor Content 6

+ +
+
+ +
+
+ +
+
@@ -758,25 +847,4 @@ The verse on image component. height: var(--imgWidth); padding: 0.125rem; } - - .Scp { - border: 10px solid pink; - } - - #colorPickerContainer .Scp-hue { - border: 10px solid pink; - } - - #colorPickerContainer .Scp-hSelector { - border: 10px solid pink; - transform: translateX(198px); - } - - #colorPickerContainer div .Scp { - border: 10px solid pink; - } - - div.colorPicker div.Scp { - border: 3px solid teal; - } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 04f977de7..c38ac0a30 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -76,9 +76,6 @@ - - -