Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add palette slider

  • Loading branch information...
commit 8ca25532bf13cd6aaee8da4a88aadf45a7e1b4fb 1 parent 40c30ba
@trethaller authored
View
2  index.html
@@ -20,10 +20,12 @@
<div class="buttons"></div>
<div class="properties"></div>
</div>
+ <div id="commands"></div>
<div class="row">
<div class="document-view span8">
</div>
<div id="tools" class="span4">
+ <div id="palette"></div>
<div class="buttons"></div>
<div class="properties"></div>
</div>
View
57 js/app.coffee
@@ -16,6 +16,7 @@ Editor = Backbone.Model.extend({
})
editor = new Editor {
+ doc: null
tool: null
renderer: null
tiling: true
@@ -24,6 +25,16 @@ editor = new Editor {
Renderers = [GammaRenderer, NormalRenderer]
Tools = [RoundBrush, Picker]
+Commands = [
+ {
+ name: "Fill"
+ func: (doc)->
+ val = editor.get('targetValue')
+ fillLayer doc.layer, (x,y)->
+ return val
+ refresh()
+ },
+]
class DocumentView
drawing: false
@@ -159,13 +170,18 @@ getPenPressure = () ->
return 1.0
# ---
-
+
+
status = (txt)->
$('#status-bar').text(txt)
view = null
+refresh = ()->
+ view.reRender()
+ view.rePaint()
+
PropertyView = Backbone.View.extend
className: "property"
@@ -234,6 +250,8 @@ editor.on 'change:renderer', ()->
view.reRender()
view.rePaint()
+
+
createToolsButtons = ($container)->
$container.empty()
Tools.forEach (b)->
@@ -252,16 +270,31 @@ createRenderersButtons = ($container)->
editor.set('renderer', r)
$container.append($btn)
+createCommandsButtons = ($container)->
+ Commands.forEach (cmd)->
+ $btn = $('<button/>').
+ attr({'class':'btn'}).
+ text(cmd.name).
+ appendTo($container)
+ $btn.click (e)->
+ cmd.func(editor.get('doc'))
+
+createPalette = ($container)->
+ $slider = $('<div/>').slider({
+ min: -1.0
+ max: 1.0
+ value: 0
+ step: 0.005
+ change: (evt, ui)->
+ editor.set('targetValue', ui.value)
+ }).appendTo($container)
+
+ editor.on 'change:targetValue', ()->
+ $slider.slider
+ value: editor.get('targetValue')
+
$(document).ready ()->
doc = new Document(512, 512)
-
- '''
- fillLayer doc.layer, (x,y)->
- x += 1.0
- y += 1.0
- return (Math.round(x*40) % 2) * 0.1 -
- (Math.round(y*40) % 2) * 0.1
- '''
fillLayer doc.layer, (x,y)->
return -1
@@ -269,6 +302,10 @@ $(document).ready ()->
createToolsButtons($('#tools > .buttons'))
createRenderersButtons($('#renderers > .buttons'))
-
+ createPalette($('#palette'))
+ createCommandsButtons($('#commands'))
+
+ editor.set('doc', doc)
editor.set('tool', RoundBrush)
editor.set('renderer', GammaRenderer)
+ editor.set('targetValue', 0.0)
View
59 js/app.js
@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.6.3
-var Document, DocumentView, Editor, PropertyPanel, PropertyView, Renderers, Tools, createRenderersButtons, createToolsButtons, editor, getPenPressure, status, toolsProperties, view;
+var Commands, Document, DocumentView, Editor, PropertyPanel, PropertyView, Renderers, Tools, createCommandsButtons, createPalette, createRenderersButtons, createToolsButtons, editor, getPenPressure, refresh, status, toolsProperties, view;
Document = (function() {
function Document(width, height) {
@@ -29,6 +29,7 @@ Editor = Backbone.Model.extend({
});
editor = new Editor({
+ doc: null,
tool: null,
renderer: null,
tiling: true,
@@ -39,6 +40,20 @@ Renderers = [GammaRenderer, NormalRenderer];
Tools = [RoundBrush, Picker];
+Commands = [
+ {
+ name: "Fill",
+ func: function(doc) {
+ var val;
+ val = editor.get('targetValue');
+ fillLayer(doc.layer, function(x, y) {
+ return val;
+ });
+ return refresh();
+ }
+ }
+];
+
DocumentView = (function() {
DocumentView.prototype.drawing = false;
@@ -214,6 +229,11 @@ status = function(txt) {
view = null;
+refresh = function() {
+ view.reRender();
+ return view.rePaint();
+};
+
PropertyView = Backbone.View.extend({
className: "property",
initialize: function() {
@@ -329,16 +349,49 @@ createRenderersButtons = function($container) {
});
};
+createCommandsButtons = function($container) {
+ return Commands.forEach(function(cmd) {
+ var $btn;
+ $btn = $('<button/>').attr({
+ 'class': 'btn'
+ }).text(cmd.name).appendTo($container);
+ return $btn.click(function(e) {
+ return cmd.func(editor.get('doc'));
+ });
+ });
+};
+
+createPalette = function($container) {
+ var $slider;
+ $slider = $('<div/>').slider({
+ min: -1.0,
+ max: 1.0,
+ value: 0,
+ step: 0.005,
+ change: function(evt, ui) {
+ return editor.set('targetValue', ui.value);
+ }
+ }).appendTo($container);
+ return editor.on('change:targetValue', function() {
+ return $slider.slider({
+ value: editor.get('targetValue')
+ });
+ });
+};
+
$(document).ready(function() {
var doc;
doc = new Document(512, 512);
- 'fillLayer doc.layer, (x,y)->\n x += 1.0\n y += 1.0\n return (Math.round(x*40) % 2) * 0.1 -\n (Math.round(y*40) % 2) * 0.1';
fillLayer(doc.layer, function(x, y) {
return -1;
});
view = new DocumentView($('.document-view'), doc);
createToolsButtons($('#tools > .buttons'));
createRenderersButtons($('#renderers > .buttons'));
+ createPalette($('#palette'));
+ createCommandsButtons($('#commands'));
+ editor.set('doc', doc);
editor.set('tool', RoundBrush);
- return editor.set('renderer', GammaRenderer);
+ editor.set('renderer', GammaRenderer);
+ return editor.set('targetValue', 0.0);
});
View
2  js/tools.coffee
@@ -39,8 +39,6 @@ class StepBrush
endDraw: (pos) ->
@lastpos = null
@drawing = false
- console.log("#{@nsteps} steps drawn")
-
BlendModes =
add: "{dst} += {src} * intensity"
View
3  js/tools.js
@@ -54,8 +54,7 @@ StepBrush = (function() {
StepBrush.prototype.endDraw = function(pos) {
this.lastpos = null;
- this.drawing = false;
- return console.log("" + this.nsteps + " steps drawn");
+ return this.drawing = false;
};
return StepBrush;
Please sign in to comment.
Something went wrong with that request. Please try again.