diff options
| -rw-r--r-- | css/sally.css | 4 | ||||
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | js/ui/controls.js | 17 |
3 files changed, 26 insertions, 0 deletions
diff --git a/css/sally.css b/css/sally.css index e9fb35b..e2410f6 100644 --- a/css/sally.css +++ b/css/sally.css @@ -85,6 +85,10 @@ textarea { font-size:12pt; width: 37%; height: 300px; background: #333; color: # .bucket #canvas_rapper { cursor: url(../img/bucket.png) 3 15, auto; } +.close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; } +#webcam_rapper { display: none; position: absolute; top: 0px; left: 0px; width:100%;height:100%; box-sizing:border-box; border: 40px solid rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5); } +#webcam_iframe { position: absolute; top: 0px; left: 0px; width:100%;height:100%; background-color: rgba(0,0,0,0.5); border: 0; } + #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; } .selector_el { border: 1px dashed #fff !important; @@ -41,6 +41,7 @@ <div id="textarea_mode"> <div> <span id="shader_el" class="tool">shader</span> + <span id="webcam_el" class="tool">webcam</span> <span id="load_el" class="tool">load</span> <span id="save_el" class="tool">save</span> </div> @@ -66,6 +67,10 @@ </div> </div> + <div id="webcam_rapper" class="transparent"> + <span class="close" id="webcam_close">x</span> + <iframe id="webcam_iframe"></iframe> + </div> <input type="text" id="cursor_input"> diff --git a/js/ui/controls.js b/js/ui/controls.js index 982871a..fa2a240 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -90,6 +90,22 @@ var controls = (function(){ controls.clear.use = function(){ canvas.erase() } + + controls.webcam = new Tool (webcam_el) + controls.webcam.load = function(){ + webcam_close.addEventListener("click", function(){ controls.webcam.blur() }) + } + controls.webcam.use = function(){ + if (! this.loaded) { + this.load() + } + webcam_iframe.src = "webcam.html" + webcam_rapper.style.display = "block" + } + controls.webcam.done = function(){ + webcam_iframe.src = "" + webcam_rapper.style.display = "none" + } controls.grid = new Checkbox (grid_el) controls.grid.use = function(){ @@ -196,6 +212,7 @@ var controls = (function(){ controls.select, controls.clear, controls.grid, + controls.webcam, controls.fg, controls.bg, controls.char, |