From e1c530032a27e4c3d81f071ac33575cba9b3a4fe Mon Sep 17 00:00:00 2001
From: pommicket <pommicket@gmail.com>
Date: Wed, 21 Jun 2023 19:02:19 -0400
Subject: start widget gen

---
 fractiform.js | 36 ++++++++++++++++++++++++++++++++++++
 index.html    | 12 +++++++-----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/fractiform.js b/fractiform.js
index 816a289..af0cdd1 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -27,6 +27,7 @@ let ui_shown = true;
 let ui_div;
 let viewport_width, viewport_height;
 let shift_key = false, ctrl_key = false;
+let html_id = 0;
 
 let width = 1920, height = 1920;
 
@@ -355,6 +356,39 @@ function type_vec(base_type, component_count) {
 	}
 }
 
+function add_widget(func) {
+	let info = widget_info[func];
+	console.assert(info !== undefined, 'bad widget name: ' + func);
+	let root = document.createElement('div');
+	root.dataset.func = func;
+	root.classList.add('widget');
+	
+	{ // title
+		let title = document.createElement('div');
+		title.classList.add('widget-title');
+		title.appendChild(document.createTextNode(info.name));
+		root.appendChild(title);
+	}
+	
+	for (let input of info.inputs) {
+		let container = document.createElement('div');
+		container.classList.add('in');
+		let input_element = document.createElement('input');
+		input_element.type = 'text';
+		input_element.id = 'gen-input-' + (++html_id);
+		let label = document.createElement('label');
+		label.htmlFor = input_element.id;
+		label.appendChild(document.createTextNode(input.name));
+		container.appendChild(input_element);
+		container.appendChild(document.createTextNode(' '));
+		container.appendChild(label);
+		root.appendChild(container);
+	}
+	
+	ui_div.appendChild(root);
+	return true;
+}
+
 class GLSLGenerationState {
 	constructor(widgets) {
 		this.widgets = widgets;
@@ -645,6 +679,8 @@ void main() {
 	sampler_texture = gl.createTexture();
 	
 	set_up_framebuffer();
+	add_widget('output');
+	add_widget('mod');
 	
 	frame(0.0);
 	window.addEventListener('keydown', on_key_press);
diff --git a/index.html b/index.html
index 92a6eb5..a6b759b 100644
--- a/index.html
+++ b/index.html
@@ -142,6 +142,12 @@
 		</p>
 	</noscript>
 	<div id="ui">
+		Add <input type="text" placeholder="Name">
+	<!--
+		<div class="widget" data-func="output">
+			<div class="widget-title">Output color</div>
+			<div class="in"><input type="text" id="out"> <label for="out">value</label></div>
+		</div>
 		<div class="widget" data-func="mix">
 			<div class="widget-title">Mix <input placeholder="name" class="name" type="text"></div>
 			<div class="in"><input type="text" id="src1"> <label for="src1">src1</label></div>
@@ -167,10 +173,6 @@
 				<div class="out">out</div>
 			</div>
 		</div>
-		<div class="widget" data-func="output">
-			<div class="widget-title">Output Color</div>
-			<div class="in"><input type="text" id="out"> <label for="out">value</label></div>
-		</div>
 		<div class="widget" data-func="mul">
 			<div class="widget-title">Multiply <input placeholder="name" class="name" type="text"></div>
 			<div class="in"><input type="text" id="a04"> <label for="a04">a</label></div>
@@ -196,7 +198,7 @@
 			<div class="outs">
 				<div class="out">out</div>
 			</div>
-		</div>
+		</div>-->
 	</div>
 	<canvas id="canvas">
 		<p>
-- 
cgit v1.2.3