diff options
| -rw-r--r-- | fractiform.js | 28 | ||||
| -rw-r--r-- | index.html | 97 |
2 files changed, 89 insertions, 36 deletions
diff --git a/fractiform.js b/fractiform.js index 9fe9681..0e9eb81 100644 --- a/fractiform.js +++ b/fractiform.js @@ -72,6 +72,7 @@ function on_key_press(e) { if (e.target.tagName === 'INPUT') { return; } + console.log('key press', code); switch (code) { case 32: // space @@ -82,6 +83,9 @@ function on_key_press(e) { set_ui_shown(!ui_shown); e.preventDefault(); break; + case 13: // return + get_shader_source(); + break; } } @@ -107,6 +111,22 @@ function on_click(e) { } } +function get_shader_source() { + let widgets = []; + for (let widget of document.getElementsByClassName('widget')) { + let names = widget.getElementsByClassName('name'); + console.assert(names.length <= 1, 'multiple name inputs for widget'); + let name = names.length > 0 ? names[0].value : null; + let func = widget.dataset.func; + let inputs = {}; + for (let input of widget.getElementsByClassName('in')) { + let name = input.getElementsByTagName('label')[0].innerText; + inputs[name] = input.getElementsByTagName('input')[0].value; + } + console.log(name, func, inputs); + } +} + function startup() { page = document.getElementById('page'); canvas = document.getElementById('canvas'); @@ -160,9 +180,9 @@ function startup() { function frame(time) { current_time = time * 1e-3; - - let page_width = page.offsetWidth; - let page_height = page.offsetHeight; + let ui_width = ui_shown ? ui_div.offsetWidth : 0; + let page_width = page.offsetWidth - ui_width; + let page_height = page.offsetHeight; let aspect_ratio = width / height; let canvas_x = 0, canvas_y = 0; @@ -180,7 +200,7 @@ function frame(time) { canvas.width = viewport_width; canvas.height = viewport_height; - canvas.style.left = canvas_x + 'px'; + canvas.style.left = ui_width + canvas_x + 'px'; canvas.style.top = canvas_y + 'px'; let step = true; @@ -21,21 +21,14 @@ #page { width: 100vw; - position: relative; - } - #page[data-ui-shown="1"] { - top: var(--ui-height); - height: calc(100vh - var(--ui-height)); - } - #page[data-ui-shown="0"] { - top: 0; height: 100vh; + position: relative; } - #canvas, #ui-canvas { + #canvas { position: absolute; left: 0; - top: 0; + bottom: 0; } #ui-canvas { @@ -68,32 +61,39 @@ outline: 2px solid #0a0; } #ui { - display: block; - width: 100vw; - height: var(--ui-height); - background-color: #111; - border-bottom: 2px solid var(--ui-border); position: absolute; top: 0; left: 0; - vertical-align:middle; + width: 20vw; + height: 100vh; + resize: horizontal; + overflow: scroll; + border-right: 2px solid white; + padding: 0.2em; } input, button { vertical-align: middle; display: inline-block; - height: 2.0em; margin: 0.3em 0 0.3em 0.3em; border: 2px solid var(--ui-border); - background-color: black; + background-color: transparent; color: white; } + button { + height: 2.0em; + } + input { + height: 1.5em; + font-size: inherit; + } #ui input[type=color] { padding: 0; } - #ui input[type=text], #ui input[type=number] { - width: 3em; - font-size: inherit; - height: 1.5em; + .in input { + width: 5em; + } + .out { + font-weight: bold; } input[type=number] { /* disable increment/decrement buttons (firefox) */ @@ -103,15 +103,27 @@ /* disable increment/decrement buttons (webkit) */ -webkit-appearance: none; } - #ui label { - margin-right: 0.5em; - } - #ui div { - display: inline-block; - } img.icon { height: 1.5em; } + .widget { + border: 2px solid white; + border-radius: 5px; + padding: 5px; + margin: 0.5em; + background: #111; + position: relative; + } + .outs { + position: absolute; + bottom: 0.2em; + right: 0.2em; + } + .widget-title { + font-weight: bold; + margin: 2px; + display: block; + } </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> @@ -170,13 +182,37 @@ void main() { <body> <script src="fractiform.js" type="text/javascript"></script> -<div id="page" data-ui-shown="1"> +<div id="page"> <noscript> <p> This page requires JavaScript to function.<br> Try using a modern browser such as <em>Netscape Navigator</em>®. </p> </noscript> + <div id="ui"> + <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> + <div class="in"><input type="text" id="src2"> <label for="src2">src2</label></div> + <div class="in"><input type="text" id="mix"> <label for="mix">mix</label></div> + <div class="outs"> + <div class="out">out</div> + </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="asrc1"> <label for="asrc1">src1</label></div> + <div class="in"><input type="text" id="asrc2"> <label for="asrc2">src2</label></div> + <div class="in"><input type="text" id="amix"> <label for="amix">mix</label></div> + <div class="outs"> + <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> <canvas id="canvas"> <p> Your browser doesn't support HTML5 <canvas>.<br> @@ -184,9 +220,6 @@ void main() { </p> </canvas> </div> -<div id="ui"> - a -</div> <dialog id="error-dialog"> <pre id="error-message" class="error"></pre> |