diff options
| -rw-r--r-- | css/sally.css | 2 | ||||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | js/tool.js | 11 | ||||
| -rw-r--r-- | js/ui/controls.js | 9 | ||||
| -rw-r--r-- | js/ui/palette.js | 9 |
5 files changed, 30 insertions, 4 deletions
diff --git a/css/sally.css b/css/sally.css index 9621d18..b7e3cab 100644 --- a/css/sally.css +++ b/css/sally.css @@ -88,7 +88,7 @@ textarea { font-size:12pt; width: 37%; height: 300px; background: #333; color: # .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; } - +#experimental_palette_toggle.focused { box-shadow: none; } #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; } .selector_el { border: 1px dashed #fff !important; @@ -10,7 +10,8 @@ <div style="clear:both"> <div class="block"> - <div id="palette_rapper"></div><br> + <div id="palette_rapper"></div> + <span id="experimental_palette_toggle">.</div><br> <div id="custom_rapper"></div> </div> <div id="brush_container" class="block"> @@ -34,3 +34,14 @@ var Checkbox = Tool.extend({ else this.el.innerHTML = "_ " + this.name } }) + +var HiddenCheckbox = Tool.extend({ + init: function (span){ + this.__init(span) + var state = this.name[0] == "o" + this.update(state) + }, + update: function(state){ + this.el.innerHTML = state ? "o" : "." + } +}) diff --git a/js/ui/controls.js b/js/ui/controls.js index 1a8011c..e666464 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -155,6 +155,12 @@ var controls = (function(){ var state = shader.toggle() this.update(state) } + + controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle) + controls.experimental_palette.use = function(state){ + var state = palette.experimental() + this.update(state) + } // @@ -213,7 +219,8 @@ var controls = (function(){ controls.shader, controls.animate, controls.save, - controls.load + controls.load, + controls.experimental_palette ].forEach(function(tool){ tool.span.addEventListener('mousedown', function(e){ tool.focus() diff --git a/js/ui/palette.js b/js/ui/palette.js index f42ad6b..f5dee8c 100644 --- a/js/ui/palette.js +++ b/js/ui/palette.js @@ -6,7 +6,7 @@ var palette = (function(){ var palette_list = [all_hue, all_inv_hue, mirc_color, mirc_color_reverse] var palette_fn = palette_list[palette_index] var palette_chars = " ▓▒░" - var palette = new Matrix (32, 5, function(x,y){ + var palette = new Matrix (32, 2, function(x,y){ var lex = new Lex (x,y) return lex }) @@ -27,6 +27,13 @@ var palette = (function(){ }) } palette.repaint() + var use_experimental_palette = false + palette.experimental = function(){ + use_experimental_palette = ! use_experimental_palette + use_experimental_palette ? palette.resize(32, 5) : palette.resize(32, 2) + palette.repaint() + return use_experimental_palette + } palette.bind = function(){ palette.forEach(function(lex, x, y){ |