diff options
| -rw-r--r-- | fractiform.js | 36 | ||||
| -rw-r--r-- | 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); @@ -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> |