Added background colour (pending gradient/pattern fills)

README.md

@@ -21,7 +21,7 @@ implementation for better interactivity.
 [<img width="256" src="gallery/cli/acoustic.png">](gallery/cli/acoustic.png)
 [<img width="256" src="gallery/webgpu/line-bw.png">](gallery/webgpu/line-bw.png)
 [<img width="256" src="gallery/webgpu/gradient-yellow.png">](gallery/webgpu/gradient-yellow.png)
-[<img width="256" src="gallery/webgpu/gradient3C.png">](gallery/webgpu/gradient3C.png)
+[<img width="256" src="gallery/webgpu/gradient3E.png">](gallery/webgpu/gradient3E.png)
 
 ## Releases
 

gallery/GALLERY.md

@@ -12,4 +12,9 @@
 [<img width="256" src="webgpu/gradient-purple.png">](webgpu/gradient-purple.png)
 
 [<img width="256" src="webgpu/gradient3.png">](webgpu/gradient3.png)
-[<img width="256" src="webgpu/gradient3C.png">](webgpu/gradient3C.png)
+[<img width="256" src="webgpu/gradient3C.png">](webgpu/gradient3C.png)
+[<img width="256" src="webgpu/gradient3E.png">](webgpu/gradient3E.png)
+
+
+[<img width="256" src="webgpu/gradient3.png">](webgpu/gradient3F.png)
+[<img width="256" src="webgpu/gradient3G.png">](webgpu/gradient3G.png)

webgpu/html/css/components.css

@@ -34,6 +34,35 @@ legend {
   white-space: nowrap;
 }
 
+fieldset.background {
+  width: 100%;
+  height: fit-content;
+  border: 1px solid #c0c0c0;
+  border-radius: 8px;
+  padding-top: 4px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+fieldset.background legend {
+  padding-left: 2px;
+  padding-right: 2px;
+  color: grey;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 0.8em;
+  white-space: nowrap;
+}
+fieldset.background div {
+  display: flex;
+  flex-direction: column;
+}
+fieldset.background input[type=color] {
+  width: 48px;
+  height: 48px;
+  border: none;
+}
+
 fieldset.fill {
   width: 100%;
   height: fit-content;

webgpu/html/css/unsupported.css

@@ -149,7 +149,7 @@ div#workspace #canvas {
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: auto;
-  background: rgba(17, 17, 17, 0.0666666667);
+  background: #ffffff;
   border-radius: 4px;
 }
 div#workspace #canvas canvas {

webgpu/html/css/wav2png.css

@@ -149,7 +149,7 @@ div#workspace #canvas {
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: auto;
-  background: rgba(17, 17, 17, 0.0666666667);
+  background: #ffffff;
   border-radius: 4px;
 }
 div#workspace #canvas canvas {

webgpu/html/index.html

@@ -53,6 +53,7 @@
       </div>
 
       <div id="toolbox">
+        <wav2png-background id="background" colour="#ffffff"></wav2png-background>
         <wav2png-fill     id="fill" colour="#000000ff"></wav2png-fill>
         <wav2png-grid     id="grid" colour='#00ff00ff'></wav2png-grid>
         <wav2png-waveform id="waveform" vscale='1.0' colour="#80ccff"></wav2png-waveform>
@@ -68,6 +69,15 @@
       <canvas part="canvas" class="overlay" width="1920" height="160"></canvas>
     </template>
 
+    <template id="template-background">
+      <fieldset class="background">
+        <legend>Background</legend>
+        <div>
+          <input id="rgb" type="color" value="#000000" />
+        </div>
+      </fieldset>
+    </template>
+
     <template id="template-fill">
       <fieldset class="fill">
         <legend>Fill</legend>

webgpu/html/javascript/canvas.js

@@ -1,4 +1,4 @@
-import { background } from './background.js'
+import { fill } from './fill.js'
 import { grid } from './grid.js'
 import { waveform } from './waveform.js'
 import { LINE } from './styles.js'
@@ -58,6 +58,11 @@ class Canvas {
     return this.internal.styles
   }
 
+  /* eslint-disable-next-line accessor-pairs */
+  set background (v) {
+    this.internal.canvas.style.background = v
+  }
+
   /* eslint-disable-next-line accessor-pairs */
   set fill (v) {
     this.internal.styles.fill = v
@@ -105,7 +110,7 @@ class Canvas {
 
     ctx.configure({ device: this.device, format, alphaMode: 'premultiplied' })
 
-    layers.push(background(ctx, device, format, styles.fill))
+    layers.push(fill(ctx, device, format, styles.fill))
     layers.push(waveform(ctx, device, format, audio, styles.waveform))
     layers.push(grid(ctx, device, format, styles.grid))
 

webgpu/html/javascript/components/background.js

@@ -0,0 +1,98 @@
+export class Background extends HTMLElement {
+  static get observedAttributes () {
+    return ['colour', 'color']
+  }
+
+  constructor () {
+    super()
+
+    this.internal = {
+      onChange: null,
+      onChanged: null
+    }
+
+    const template = document.querySelector('#template-background')
+    const stylesheet = document.createElement('link')
+    const content = template.content
+    const shadow = this.attachShadow({ mode: 'open' })
+    const clone = content.cloneNode(true)
+
+    stylesheet.setAttribute('rel', 'stylesheet')
+    stylesheet.setAttribute('href', '/css/components.css')
+
+    shadow.appendChild(stylesheet)
+    shadow.appendChild(clone)
+  }
+
+  connectedCallback () {
+    const shadow = this.shadowRoot
+    const rgb = shadow.querySelector('input#rgb')
+
+    rgb.oninput = (event) => onChange(this)
+    rgb.onchange = (event) => onChanged(this)
+  }
+
+  disconnectedCallback () {
+  }
+
+  adoptedCallback () {
+  }
+
+  attributeChangedCallback (name, from, to) {
+    if (name === 'colour' || name === 'color') {
+      this.colour = to
+    }
+  }
+
+  get onchange () {
+    return this.internal.onChange
+  }
+
+  set onchange (v) {
+    this.internal.onChange = v
+  }
+
+  get onchanged () {
+    return this.internal.onChanged
+  }
+
+  set onchanged (v) {
+    this.internal.onChanged = v
+  }
+
+  get colour () {
+    const shadow = this.shadowRoot
+    const input = shadow.querySelector('input#rgb')
+    const rgb = input.value
+
+    return `${rgb}ff`
+  }
+
+  set colour (v) {
+    const shadow = this.shadowRoot
+    const input = shadow.querySelector('input#rgb')
+    const match = `${v}`.match(/^#([a-fA-F0-9]{6})([a-fA-F0-9]{2})?$/)
+
+    if (match != null) {
+      const rgb = Number.parseInt(match[1], 16).toString(16).padStart(6, '0')
+
+      input.value = `#${rgb}`
+    }
+  }
+}
+
+function onChange (component) {
+  const colour = component.colour
+  if (component.onchange) {
+    component.onchange(colour)
+  }
+}
+
+function onChanged (component) {
+  const colour = component.colour
+  if (component.onchanged) {
+    component.onchanged(colour)
+  }
+}
+
+customElements.define('wav2png-background', Background)

webgpu/html/javascript/components/components.js

@@ -1,3 +1,4 @@
+export { Background } from './background.js'
 export { Fill } from './fill.js'
 export { Grid } from './grid.js'
 export { Waveform } from './waveform.js'

webgpu/html/javascript/background.js → webgpu/html/javascript/fill.js

@@ -1,6 +1,6 @@
 /* global GPUBufferUsage,GPUShaderStage */
 
-export function background (context, device, format, colour) {
+export function fill (context, device, format, colour) {
   const vertices = new Float32Array([
     -1.0, -1.0,
     +1.0, -1.0,

webgpu/html/javascript/offscreen.js

@@ -1,4 +1,4 @@
-import { background } from './background.js'
+import { fill } from './fill.js'
 import { grid } from './grid.js'
 import { waveform } from './waveform.js'
 import { LINE } from './styles.js'
@@ -60,6 +60,10 @@ class Offscreen {
     return this.internal.styles
   }
 
+  /* eslint-disable-next-line accessor-pairs */
+  set background (v) {
+  }
+
   /* eslint-disable-next-line accessor-pairs */
   set fill (v) {
     this.internal.styles.fill = v
@@ -107,7 +111,7 @@ class Offscreen {
 
     ctx.configure({ device: this.device, format, alphaMode: 'premultiplied' })
 
-    layers.push(background(ctx, device, format, this.styles.fill))
+    layers.push(fill(ctx, device, format, this.styles.fill))
     layers.push(waveform(ctx, device, format, audio, styles.waveform))
     layers.push(grid(ctx, device, format, this.styles.grid))
 

webgpu/html/javascript/overview.js

@@ -1,4 +1,4 @@
-import { background } from './background.js'
+import { fill } from './fill.js'
 import { grid } from './grid.js'
 import { waveform } from './waveform.js'
 import { black, rgba } from './colours.js'
@@ -130,7 +130,7 @@ class Overview {
 
     ctx.configure({ device: this.device, format, alphaMode: 'premultiplied' })
 
-    layers.push(background(ctx, device, format, styles.fill))
+    layers.push(fill(ctx, device, format, styles.fill))
     layers.push(waveform(ctx, device, format, audio, styles.waveform))
     layers.push(grid(ctx, device, format, styles.grid))
 

webgpu/html/javascript/wav2png.js

@@ -34,11 +34,16 @@ export async function initialise () {
   overview.redraw()
   canvas.redraw()
 
+  const background = document.getElementById('background')
   const fill = document.getElementById('fill')
   const grid = document.getElementById('grid')
   const waveform = document.getElementById('waveform')
   const xaxis = document.getElementById('x-axis')
 
+  background.onchange = (c) => {
+    stale = true
+  }
+
   fill.onchange = (c) => {
     stale = true
   }
@@ -241,14 +246,17 @@ function redraw () {
   stale = false
 
   return new Promise(() => {
+    const background = document.getElementById('background').colour
     const fill = document.getElementById('fill').colour
     const grid = document.getElementById('grid').colour
     const waveform = document.getElementById('waveform').style
 
+    canvas.background = background
     canvas.fill = rgba(fill)
     canvas.grid = { colour: rgba(grid) }
     canvas.waveform = waveform
 
+    offscreen.background = background
     offscreen.fill = rgba(fill)
     offscreen.grid = { colour: rgba(grid) }
     offscreen.waveform = waveform

webgpu/sass/base/_colours.scss

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 
 $black: #222222;
+$white: #ffffff;
 $shadow: #11111111;
 $grey: grey;

webgpu/sass/components/_background.scss

@@ -0,0 +1,33 @@
+fieldset.background {
+    width: 100%;
+    height: fit-content;
+    border: 1px solid #c0c0c0;
+    border-radius: 8px;
+
+    padding-top: 4px;
+    padding-bottom: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
+
+    legend {
+        padding-left: 2px;
+        padding-right: 2px;
+
+        color: grey;
+        font-family: sans-serif;
+        font-style: italic;
+        font-size: 0.8em;
+        white-space: nowrap;  
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+
+    input[type="color"] {
+        width: 48px;
+        height: 48px;
+        border: none;
+    }
+}

webgpu/sass/modules/_wav2png.scss

@@ -153,7 +153,7 @@ div#workspace {
     grid-template-columns: auto;
     grid-template-rows: auto;
 
-    background: $shadow;
+    background: $white;
     border-radius: 4px;
 
     canvas {

webgpu/sass/stylesheets/components.scss

@@ -3,6 +3,7 @@
 @import '../base/_default';
 @import '../base/_fonts';
 @import '../components/_components';
+@import '../components/_background';
 @import '../components/_fill';
 @import '../components/_grid';
 @import '../components/_waveform';