Skip to content

Commit 9b5ad1d

Browse files
Caleb-ParksCaleb-Parks
committed
Finish brightness, contrast, saturation, and blur sliders. Replace simple-color-picker with svelte-awesome-color-picker.
1 parent a721808 commit 9b5ad1d

4 files changed

Lines changed: 129 additions & 90 deletions

File tree

‎package-lock.json‎

Lines changed: 19 additions & 45 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"proskomma-json-tools": "^0.7.1",
4949
"proskomma-tools": "^0.0.5",
5050
"rimraf": "^5",
51-
"simple-color-picker": "^1.0.5",
5251
"svelte": "^3",
52+
"svelte-awesome-color-picker": "^2.4.7",
5353
"svelte-check": "^3",
5454
"svelte-eslint-parser": "^0.30",
5555
"svelte-french-toast": "^1.0.3",

‎src/lib/components/VerseOnImage.svelte‎

Lines changed: 109 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The verse on image component.
2424
import config from '$lib/data/config';
2525
import { toPng } from 'html-to-image';
2626
import ImagesIcon from '$lib/icons/image/ImagesIcon.svelte';
27-
import ColorPicker from 'simple-color-picker';
27+
import ColorPicker from 'svelte-awesome-color-picker';
2828
2929
$: barColor = $themeColors['SliderBarColor'];
3030
$: progressColor = $themeColors['SliderProgressColor'];
@@ -61,7 +61,6 @@ The verse on image component.
6161
let voi_refItalic = $s['ui.text-on-image']['font-style'] == 'italic';
6262
let voi_refFontPercent = 80;
6363
let voi_fontColor = $s['ui.text-on-image']['color'];
64-
let voi_colorPicker;
6564
let voi_letterSpacing = 0;
6665
let voi_lineHeight_x100 = 0;
6766
$: voi_lineHeight = 1 + voi_lineHeight_x100 / 100;
@@ -72,7 +71,7 @@ The verse on image component.
7271
let voi_textBoxHeight;
7372
$: voi_textBox_maxHeight = voi_height - voi_textPosY;
7473
let voi_textShadow_mode = 'glow';
75-
let voi_textShadow_value = 15; //DEBUG: should be 75% of max
74+
let voi_textShadow_value = 15;
7675
$: voi_textShadow =
7776
voi_textShadow_mode == 'none'
7877
? ''
@@ -83,6 +82,10 @@ The verse on image component.
8382
'px ' +
8483
(voi_fontSize * voi_textShadow_value) / 100
8584
: '0 0 ' + ((voi_fontSize * voi_textShadow_value) / 100) * 2) + 'px black'; //DEBUG: from Android: Shadow size goes 0 to 0.2.
85+
let voi_imageBrightness = 100;
86+
let voi_imageContrast = 100;
87+
let voi_imageSaturation = 100;
88+
let voi_imageBlur = 0;
8689
8790
$: update_voi_textBoxHeight(
8891
txtFormatted,
@@ -115,16 +118,38 @@ The verse on image component.
115118
/*DEBUG*/ console.log('voi_textBoxHeight=', voi_textBoxHeight);
116119
}
117120
118-
$: render(voi_imgSrc);
121+
$: render(
122+
voi_imgSrc,
123+
voi_imageBrightness,
124+
voi_imageContrast,
125+
voi_imageSaturation,
126+
voi_imageBlur
127+
);
119128
120-
function render(imgSrc) {
129+
function render(imgSrc, imgBrightness, imgContrast, imgSaturation, imgBlur) {
121130
if (!cnv) return;
122131
cnv_background = new Image();
123132
cnv_background.src = base + '/backgrounds/' + imgSrc;
124133
// Make sure the image is loaded first otherwise nothing will draw.
125134
cnv_background.onload = function () {
126135
const context = cnv.getContext('2d');
136+
// context.filter = `brightness(${ingBrightness}%) contrast(${imgContrast}) saturate(${imgSaturation}%)`;
137+
context.filter = `brightness(${imgBrightness}%) contrast(${imgContrast}%) saturate(${imgSaturation}%) blur(${imgBlur}px)`;
127138
context.drawImage(cnv_background, 0, 0, cnv.width, cnv.height);
139+
140+
// // //Contrast
141+
// // context.globalCompositeOperation = 'color';
142+
// // context.fillStyle = `rgba(${voi_imageContrast}%, ${voi_imageContrast}%, ${voi_imageContrast}%, 1)`;
143+
// // context.fillRect(0, 0, cnv.width, cnv.height); // apply the contrast comp filter
144+
145+
// //Saturation
146+
// context.globalCompositeOperation = 'saturation';
147+
// context.fillStyle = 'hsl(0,' + imgSaturation + '%,50%)'; // saturation at 100%
148+
// context.fillRect(0, 0, cnv.width, cnv.height); // apply the saturation comp filter
149+
150+
// context.globalCompositeOperation = 'source-over'; // restore default comp
151+
152+
/*DEBUG*/ console.log(context.filter);
128153
};
129154
}
130155
@@ -133,17 +158,6 @@ The verse on image component.
133158
134159
voi_imgSrc = config.backgroundImages[0].filename;
135160
136-
voi_colorPicker = new ColorPicker({
137-
color: '#FF0000',
138-
background: '#454545',
139-
// el: document.getElementsByTagName('colorPickerContainer'),
140-
width: 200,
141-
height: 200
142-
// window: document.getElementsByTagName('colorPickerContainer').contentWindow
143-
});
144-
145-
// voi_colorPicker.appendTo('#colorPickerContainer');
146-
147161
centerButton(0);
148162
});
149163
@@ -532,6 +546,7 @@ The verse on image component.
532546

533547
<div class="dy-carousel-item items-center editorPane">
534548
<div class="flex flex-row items-center">
549+
<!-- Left align button -->
535550
<button
536551
class="dy-btn-sm dy-btn-ghost editorPane_button"
537552
on:click={() => {
@@ -542,6 +557,8 @@ The verse on image component.
542557
color={voi_textAlign == 'left' ? progressColor : unselectedColor}
543558
/>
544559
</button>
560+
561+
<!-- Center align button -->
545562
<button
546563
class="dy-btn-sm dy-btn-ghost editorPane_button"
547564
on:click={() => {
@@ -552,6 +569,8 @@ The verse on image component.
552569
color={voi_textAlign == 'center' ? progressColor : unselectedColor}
553570
/>
554571
</button>
572+
573+
<!-- Right align button -->
555574
<button
556575
class="dy-btn-sm dy-btn-ghost editorPane_button"
557576
on:click={() => {
@@ -598,8 +617,14 @@ The verse on image component.
598617
</div>
599618

600619
<div class="dy-carousel-item items-center editorPane">
601-
<div id="colorPickerContainer" class="colorPicker" />
602-
<h1 style="width:100%;">Editor Content 3</h1>
620+
<!-- Color Picker -->
621+
<ColorPicker
622+
isPopup="false"
623+
toRight="true"
624+
label="Test Label For Now"
625+
bind:color={voi_fontColor}
626+
/>
627+
<h1 style="width:100%;">Editor Content 3 - Color</h1>
603628
</div>
604629

605630
<div class="dy-carousel-item items-center editorPane">
@@ -615,6 +640,8 @@ The verse on image component.
615640
color={voi_textShadow_mode == 'none' ? progressColor : unselectedColor}
616641
/>
617642
</button>
643+
644+
<!-- Text shadow toggle -->
618645
<button
619646
class="dy-btn-sm dy-btn-ghost editorPane_button"
620647
on:click={() => {
@@ -625,6 +652,8 @@ The verse on image component.
625652
color={voi_textShadow_mode == 'shadow' ? progressColor : unselectedColor}
626653
/>
627654
</button>
655+
656+
<!-- Text glow toggle -->
628657
<button
629658
class="dy-btn-sm dy-btn-ghost editorPane_button"
630659
on:click={() => {
@@ -655,11 +684,71 @@ The verse on image component.
655684
</div>
656685

657686
<div class="dy-carousel-item items-center editorPane">
658-
<h1 style="width:100%;">Editor Content 5</h1>
687+
<!-- Image brightness slider -->
688+
<div class="flex flex-row flex-nowrap items-center editorPane_slider">
689+
<div style="margin-right: 1rem;">
690+
<ImageIcon.Brightness color={$monoIconColor} size="1.5rem" />
691+
</div>
692+
<div class="grid grid-cols-1" style="width: 100%;">
693+
<Slider
694+
bind:value={voi_imageBrightness}
695+
{barColor}
696+
{progressColor}
697+
min="20"
698+
max="180"
699+
/>
700+
</div>
701+
</div>
702+
703+
<!-- Image contrast slider -->
704+
<div class="flex flex-row flex-nowrap items-center editorPane_slider">
705+
<div style="margin-right: 1rem;">
706+
<ImageIcon.Contrast color={$monoIconColor} size="1.5rem" />
707+
</div>
708+
<div class="grid grid-cols-1" style="width: 100%;">
709+
<Slider
710+
bind:value={voi_imageContrast}
711+
{barColor}
712+
{progressColor}
713+
min="10"
714+
max="190"
715+
/>
716+
</div>
717+
</div>
718+
719+
<!-- Image saturation slider -->
720+
<div class="flex flex-row flex-nowrap items-center editorPane_slider">
721+
<div style="margin-right: 1rem;">
722+
<ImageIcon.Saturation color={$monoIconColor} size="1.5rem" />
723+
</div>
724+
<div class="grid grid-cols-1" style="width: 100%;">
725+
<Slider
726+
bind:value={voi_imageSaturation}
727+
{barColor}
728+
{progressColor}
729+
min="0"
730+
max="200"
731+
/>
732+
</div>
733+
</div>
659734
</div>
660735

661736
<div class="dy-carousel-item items-center editorPane">
662-
<h1 style="width:100%;">Editor Content 6</h1>
737+
<!-- Image blur slider -->
738+
<div class="flex flex-row flex-nowrap items-center editorPane_slider">
739+
<div style="margin-right: 1rem;">
740+
<ImageIcon.Blur color={$monoIconColor} size="1.5rem" />
741+
</div>
742+
<div class="grid grid-cols-1" style="width: 100%;">
743+
<Slider
744+
bind:value={voi_imageBlur}
745+
{barColor}
746+
{progressColor}
747+
min="0"
748+
max="15"
749+
/>
750+
</div>
751+
</div>
663752
</div>
664753

665754
<div class="dy-carousel-item items-center editorPane">
@@ -758,25 +847,4 @@ The verse on image component.
758847
height: var(--imgWidth);
759848
padding: 0.125rem;
760849
}
761-
762-
.Scp {
763-
border: 10px solid pink;
764-
}
765-
766-
#colorPickerContainer .Scp-hue {
767-
border: 10px solid pink;
768-
}
769-
770-
#colorPickerContainer .Scp-hSelector {
771-
border: 10px solid pink;
772-
transform: translateX(198px);
773-
}
774-
775-
#colorPickerContainer div .Scp {
776-
border: 10px solid pink;
777-
}
778-
779-
div.colorPicker div.Scp {
780-
border: 3px solid teal;
781-
}
782850
</style>

0 commit comments

Comments
 (0)