Skip to content

Commit

Permalink
Reworked 3-point line gradient to use wav2png-gradient
Browse files Browse the repository at this point in the history
  • Loading branch information
@twystd
twystd committed Oct 15, 2023
1 parent 53b594d commit 6a4d647
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 111 deletions.
61 changes: 18 additions & 43 deletions webgpu/html/css/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,9 @@ fieldset.waveform div#settings div.panel {
border: 1px solid grey;
border-radius: 4px;
}
fieldset.waveform div#settings div.panel.hidden {
display: none;
}
fieldset.waveform div#settings div.line {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccffff 100%, #80ccff00 100%);
display: grid;
Expand All @@ -231,9 +234,6 @@ fieldset.waveform div#settings div.line input.alpha {
grid-column: 2;
grid-row: 3;
}
fieldset.waveform div#settings div.line.hidden {
display: none;
}
fieldset.waveform div#settings div.gradient {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccffff 100%, #80ccff00 100%);
display: grid;
Expand Down Expand Up @@ -261,65 +261,40 @@ fieldset.waveform div#settings div.gradient input#alpha2 {
grid-column: 2;
grid-row: 2;
}
fieldset.waveform div#settings div.gradient.hidden {
display: none;
}
fieldset.waveform div#settings div.gradient3 {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccff40 50%, #80ccff80 100%);
display: grid;
grid-template-columns: 14px auto;
grid-template-rows: auto auto auto auto auto auto;
grid-template-areas: "exemplar swatch3" "exemplar alpha3" "exemplar swatch2" "exemplar alpha2" "exemplar swatch1" "exemplar alpha1";
column-gap: 12px;
}
fieldset.waveform div#settings div.gradient3 input.exemplar {
grid-area: exemplar;
transform: rotate(-90deg);
place-self: center;
-webkit-appearance: none;
}
fieldset.waveform div#settings div.gradient3 input.exemplar:focus {
outline: none;
}
fieldset.waveform div#settings div.gradient3 input.exemplar::-webkit-slider-thumb {
height: 12px;
width: 12px;
background: #ffffff;
margin-top: -3.5px;
padding-top: 2px;
border: 1px solid #000000;
border-radius: 8px;
cursor: pointer;
-webkit-appearance: none;
}
fieldset.waveform div#settings div.gradient3 input.exemplar::-webkit-slider-runnable-track {
height: 6px;
width: 100%;
background: var(--gradient);
border: 1px solid #000000;
border-radius: 2px;
cursor: pointer;
fieldset.waveform div#settings div.gradient3 wav2png-gradient {
grid-column: 1;
grid-row: 1/7;
}
fieldset.waveform div#settings div.gradient3 input.rgb1 {
grid-area: swatch1;
grid-column: 2;
grid-row: 5;
}
fieldset.waveform div#settings div.gradient3 input.alpha1 {
grid-area: alpha1;
grid-column: 1;
grid-row: 6;
}
fieldset.waveform div#settings div.gradient3 input.rgb2 {
grid-area: swatch2;
grid-column: 1;
grid-row: 3;
}
fieldset.waveform div#settings div.gradient3 input.alpha2 {
grid-area: alpha2;
grid-column: 1;
grid-row: 4;
}
fieldset.waveform div#settings div.gradient3 input.rgb3 {
grid-area: swatch3;
grid-column: 1;
grid-row: 1;
}
fieldset.waveform div#settings div.gradient3 input.alpha3 {
grid-area: alpha3;
}
fieldset.waveform div#settings div.gradient3.hidden {
display: none;
grid-column: 1;
grid-row: 2;
}

canvas.overlay {
Expand Down
2 changes: 1 addition & 1 deletion webgpu/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
</div>

<div for="gradient3" class="panel gradient3 hidden">
<input id="midpoint" class="exemplar" type="range" step="any" min="0.0" max="1.0" value="0.5" />
<wav2png-gradient class="gradient"></wav2png-gradient>
<input id="rgb3" class="swatch" type="color" value="#80ccff" />
<input id="alpha3" class="alpha" type="range" step="1" min="0" max="255" value="192" />
<input id="rgb2" class="swatch" type="color" value="#80ccff" />
Expand Down
10 changes: 3 additions & 7 deletions webgpu/html/javascript/components/waveform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,7 @@ export class Waveform extends HTMLElement {
const styles = Array.from(shadow.querySelectorAll('#waveforms input[type="radio"]'))
const swatches = Array.from(shadow.querySelectorAll('#settings input.swatch'))
const alphas = Array.from(shadow.querySelectorAll('#settings input.alpha'))
const gradients = [
shadow.querySelector('#settings div[for="line"] wav2png-gradient'),
shadow.querySelector('#settings div[for="gradient"] wav2png-gradient'),
shadow.querySelector('#settings input#midpoint')
]
const gradients = Array.from(shadow.querySelectorAll('#settings wav2png-gradient'))
const vscale = shadow.querySelector('#settings input#vscale')

styles.forEach((e) => {
Expand Down Expand Up @@ -201,7 +197,7 @@ export class Waveform extends HTMLElement {
const alpha2 = settings.querySelector('input#alpha2').value
const rgb3 = settings.querySelector('input#rgb3').value
const alpha3 = settings.querySelector('input#alpha3').value
const midpoint = settings.querySelector('input#midpoint').value
const midpoint = settings.querySelector('wav2png-gradient').value

return styles.gradient3Style(this.vscale, rgba(rgb1, alpha1), rgba(rgb2, alpha2), rgba(rgb3, alpha3), midpoint)
}
Expand Down Expand Up @@ -323,7 +319,7 @@ function recolour (component) {
{
const settings = shadow.querySelector('div[for="gradient3"]')
const stops = ['#80ccff80', '#80ccff40', '#80ccffff']
const midpoint = Math.round(settings.querySelector('input#midpoint').value * 100)
const midpoint = Math.round(settings.querySelector('wav2png-gradient').value * 100)

{
const rgb = settings.querySelector('input#rgb3').value
Expand Down
79 changes: 19 additions & 60 deletions webgpu/sass/components/_waveform.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ fieldset.waveform {
border-radius: 4px;
}

div.panel.hidden {
display: none;
}

div.line {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccffff 100%, #80ccff00 100%);

Expand All @@ -96,10 +100,6 @@ fieldset.waveform {
}
}

div.line.hidden {
display: none;
}

div.gradient {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccffff 100%, #80ccff00 100%);

Expand Down Expand Up @@ -134,89 +134,48 @@ fieldset.waveform {
}
}

div.gradient.hidden {
display: none;
}


div.gradient3 {
--gradient: linear-gradient(90deg, #80ccffff 0%, #80ccff40 50%, #80ccff80 100%);

display: grid;
grid-template-columns: 14px auto;
grid-template-rows: auto auto auto auto auto auto;
grid-template-areas:
"exemplar swatch3"
"exemplar alpha3"
"exemplar swatch2"
"exemplar alpha2"
"exemplar swatch1"
"exemplar alpha1";
column-gap: 12px;

input.exemplar {
grid-area: exemplar;
transform: rotate(-90deg);
place-self: center;
-webkit-appearance: none;
}

input.exemplar:focus {
outline: none;
}

input.exemplar::-webkit-slider-thumb {
height: 12px;
width: 12px;
background: #ffffff;
margin-top: -3.5px;
padding-top: 2px;
border: 1px solid #000000;
border-radius: 8px;
cursor: pointer;

-webkit-appearance: none;
}

input.exemplar::-webkit-slider-runnable-track {
height: 6px;
width: 100%;
background: var(--gradient);
border: 1px solid #000000;
border-radius: 2px;
cursor: pointer;
wav2png-gradient {
grid-column: 1;
grid-row: 1 / 7;
}

input.exemplar::focus::-webkit-slider-runnable-track {
}

input.rgb1 {
grid-area: swatch1;
grid-column: 2;
grid-row: 5;
}

input.alpha1 {
grid-area: alpha1;
grid-column: 1;
grid-row: 6;
}

input.rgb2 {
grid-area: swatch2;
grid-column: 1;
grid-row: 3;
}

input.alpha2 {
grid-area: alpha2;
grid-column: 1;
grid-row: 4;
}

input.rgb3 {
grid-area: swatch3;
grid-column: 1;
grid-row: 1;
}

input.alpha3 {
grid-area: alpha3;
grid-column: 1;
grid-row: 2;
}
}

div.gradient3.hidden {
display: none;
}
}
}

0 comments on commit 6a4d647

Please sign in to comment.