From c9e1f8d3e6362a4e543ed3ada4b26cefb81e2a29 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sat, 16 Nov 2019 01:00:07 +0300
Subject: [PATCH] tweaking...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/experiments/canvas-waveform.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui (gen4)/experiments/canvas-waveform.html b/ui (gen4)/experiments/canvas-waveform.html
index e34d6c33..66fdd620 100644
--- a/ui (gen4)/experiments/canvas-waveform.html	
+++ b/ui (gen4)/experiments/canvas-waveform.html	
@@ -286,6 +286,7 @@ var histogram = function(img, canvas, mode, color){
 }
 
 // XXX make defaults externally savable -- options???
+// XXX add support for img URL...
 var makeWaveform = function(img, mode, color, controls){
 	mode = mode || 'color'
 
@@ -307,6 +308,16 @@ var makeWaveform = function(img, mode, color, controls){
 					b.classList.add('current') 
 					: b.classList.remove('current') }) } 
 
+	// handle img urls...
+	if(typeof(img) == typeof('str')){
+		var src = img
+		img = document.createElement('img')
+		img.onload = function(){
+			container.setAttribute('image-width', img.width)
+			container.setAttribute('image-height', img.height)
+			update() }
+		img.src = src }
+
 	// container...
 	var container = document.createElement('div')
 	container.classList.add('graph', type)
@@ -345,7 +356,7 @@ var makeWaveform = function(img, mode, color, controls){
 	container.setAttribute('image-height', img.height)
 
 	// init...
-	update(mode)
+	update()
 
 	return container
 }
@@ -358,6 +369,8 @@ var start = function(){
 
 	//document.body.appendChild(makeWaveform(document.getElementById('input'), 'color', 'normalized'))
 	document.body.appendChild(makeWaveform(document.getElementById('input')))
+
+	document.body.appendChild(makeWaveform('../images/splash-800x500.jpg'))
 }
 
 </script>