Permalink
Browse files

New palette

  • Loading branch information...
1 parent 8d4496c commit 23faa4aae39cb094348f48b35331b7cb99f6471e @trethaller committed Sep 6, 2013
Showing with 81 additions and 25 deletions.
  1. +4 −0 out/css/app.css
  2. +40 −13 out/js/teztura.js
  3. +37 −12 src/app.coffee
View
@@ -15,3 +15,7 @@ body {
#tools {
}
+
+#palette {
+ cursor:crosshair;
+}
View
@@ -212,21 +212,48 @@ createCommandsButtons = function($container) {
};
createPalette = function($container) {
- var $slider;
- $slider = $('<div/>').slider({
- min: -1.0,
- max: 1.0,
- value: editor.get('targetValue'),
- step: 0.005,
- change: function(evt, ui) {
- return editor.set('targetValue', ui.value);
+ var $canvas, ctx, local, mouseEvt, repaint;
+ $canvas = $('<canvas/>').attr({
+ width: $container.width(),
+ height: 50
+ });
+ $container.append($canvas);
+ ctx = $canvas[0].getContext('2d');
+ repaint = function() {
+ var grd, val;
+ val = Math.round(editor.get('targetValue') * 127.0 + 128.0);
+ ctx.fillStyle = "rgb(" + val + "," + val + "," + val + ")";
+ ctx.fillRect(0, 0, $canvas.width(), $canvas.height() / 2);
+ grd = ctx.createLinearGradient(0, 0, $canvas.width(), $canvas.height());
+ grd.addColorStop(0, '#000');
+ grd.addColorStop(1, '#fff');
+ ctx.fillStyle = grd;
+ ctx.fillRect(0, $canvas.height() / 2, $canvas.width(), $canvas.height() / 2);
+ ctx.strokeStyle = "#aaa";
+ return ctx.strokeRect(0, 0, $canvas.width(), $canvas.height());
+ };
+ local = {};
+ local.drag = false;
+ mouseEvt = function(e) {
+ var val, xpos;
+ if (local.drag) {
+ xpos = e.pageX - $container.position().left;
+ val = (xpos / $container.width()) * 2 - 1;
+ return editor.set('targetValue', val);
}
- }).appendTo($container);
- return editor.on('change:targetValue', function() {
- return $slider.slider({
- value: editor.get('targetValue')
- });
+ };
+ $container.mousedown(function(e) {
+ local.drag = true;
+ return mouseEvt(e);
+ });
+ $(document).mouseup(function(e) {
+ return local.drag = false;
+ });
+ $container.mousemove(mouseEvt);
+ editor.on('change:targetValue', function() {
+ return repaint();
});
+ return repaint();
};
loadGradient = function(name, url) {
View
@@ -160,19 +160,44 @@ createCommandsButtons = ($container)->
cmd.func(editor.get('doc'))
createPalette = ($container)->
- $slider = $('<div/>').slider({
- min: -1.0
- max: 1.0
- value: editor.get('targetValue')
- step: 0.005
- change: (evt, ui)->
- editor.set('targetValue', ui.value)
- }).appendTo($container)
-
- editor.on 'change:targetValue', ()->
- $slider.slider
- value: editor.get('targetValue')
+ $canvas = $('<canvas/>').attr {width: $container.width(), height:50}
+ $container.append($canvas)
+ ctx = $canvas[0].getContext('2d')
+
+ repaint = ->
+ val = Math.round(editor.get('targetValue') * 127.0 + 128.0)
+ ctx.fillStyle = "rgb(#{val},#{val},#{val})"
+ ctx.fillRect(0, 0, $canvas.width(), $canvas.height()/2)
+
+ grd = ctx.createLinearGradient(0, 0, $canvas.width(), $canvas.height())
+ grd.addColorStop(0, '#000')
+ grd.addColorStop(1, '#fff')
+ ctx.fillStyle = grd
+ ctx.fillRect(0, $canvas.height()/2, $canvas.width(), $canvas.height()/2)
+
+ ctx.strokeStyle = "#aaa";
+ ctx.strokeRect(0, 0, $canvas.width(), $canvas.height())
+
+ local = {}
+ local.drag = false
+
+ mouseEvt = (e)->
+ if local.drag
+ xpos = e.pageX - $container.position().left
+ val = (xpos / $container.width()) * 2 - 1
+ editor.set('targetValue', val)
+
+ $container.mousedown (e)->
+ local.drag = true
+ mouseEvt(e)
+ $(document).mouseup (e)->
+ local.drag = false
+ $container.mousemove mouseEvt
+
+ editor.on 'change:targetValue', ->
+ repaint()
+ repaint()
loadGradient = (name, url)->
$canvas = $('<canvas/>').attr {width: 512, height:1}

0 comments on commit 23faa4a

Please sign in to comment.