Commit 4ae9d616 authored by bbaer's avatar bbaer
Browse files

generation of color switches

parent 4e57fba5
......@@ -17,10 +17,6 @@ $(function (n) {
this.canvas.on('mouse:move', function (e) { qFabric.defaultMouseMoveEvent(e) });
this.canvas.on('mouse:out', function (e) { qFabric.defaultMouseOutEvent(e) });
this.canvas.on('after:render', function(){ this.calcOffset(); });
this.modeButtons;
this.saveOne = false;
this.saveTwo = false;
this.saveThree = false;
this.activeColor = {red: 0, green: 68, blue: 255, opacity: 1};
this.brushSize = 2;
this.borderSize = 5;
......@@ -37,11 +33,17 @@ $(function (n) {
this.origY = 0;
function ModeSettings() {
this.qFabric = qFabric;
this.qFabric;
this.myButtons = [];
this.myColors = [];
this.myModes = {modes: [], currentMode: ""};
}
ModeSettings.prototype.initialize = function(qfqFabric, uri) {
this.qFabric = qfqFabric;
this.getMyModes(uri);
};
ModeSettings.prototype.getMyModes = function (uri) {
var that = this;
$.getJSON(uri, function(data) {
......@@ -73,6 +75,19 @@ $(function (n) {
that.qFabric.buttonPress(modePressed, $button)
});
});
var $colorSelector = $("<div>");
$controlWrapper.append($colorSelector);
this.myModes.colors.forEach(function (o) {
var $button = $("<button>", {
type: 'button',
id: o.selector,
class: "text-bg-toggle",
style: "background-color: rgba(" + o.red +"," + o.green + "," + o.blue + ",1)"
});
$colorSelector.append($button);
that.myColors.push($button);
});
};
ModeSettings.prototype.setMyModes = function (data) {
......@@ -85,20 +100,27 @@ $(function (n) {
var that = this;
$.each(this.myModes.modes, function(i, o) {
if (o.name == that.myModes.currentMode) {
console.log(o.requiresDrawing);
if (o.requiresDrawing) {
n.fabric.canvas.isDrawingMode = true;
that.qFabric.canvas.isDrawingMode = true;
console.log(that.qFabric);
} else {
n.fabric.canvas.isDrawingMode = false;
that.qFabric.canvas.isDrawingMode = false;
}
if (o.requiresSelection) {
n.fabric.canvas.selection = true;
that.qFabric.canvas.selection = true;
} else {
n.fabric.canvas.selection = false;
that.qFabric.canvas.selection = false;
}
if (o.isToggle) {
$button.removeClass("btn-default");
$button.addClass("btn-primary");
that.qFabric[o.toggle] = true;
}
if (o.hasToggleElement) {
console.log(o.toggleElement);
$("#" + o.toggleElement).slideToggle();
}
} else {
that.deactivateMode(o);
......@@ -112,8 +134,9 @@ $(function (n) {
var $button = this.getButtonById(o.selector);
$button.removeClass("btn-primary");
$button.addClass("btn-default");
n.fabric[o.toggle] = false;
this.qFabric[o.toggle] = false;
}
};
ModeSettings.prototype.getButtonById = function (needle) {
......@@ -121,7 +144,6 @@ $(function (n) {
this.myButtons.forEach(function (haystack) {
if (haystack[0].id === needle) {
needleInHaystack = haystack;
return true;
}
});
if (needleInHaystack === {}) {
......@@ -141,7 +163,7 @@ $(function (n) {
};
this.modeSettings = new ModeSettings();
this.modeSettings.getMyModes('mockData/fabric.modes.json');
this.modeSettings.initialize(this, 'mockData/fabric.modes.json');
fabric.Object.prototype.transparentCorners = false;
......@@ -168,7 +190,7 @@ $(function (n) {
};
n.Fabric.prototype.deactivateRectangleDrawing = function() {
this.drawRectangleMode = false;
//this.drawRectangleMode = false;
this.drawTextBoxMode = false;
this.isDown = false;
var rect = this.canvas.getActiveObject();
......@@ -199,6 +221,8 @@ $(function (n) {
+ opacity + ")";
};
// Has to be changed for Fabric 2.0! Group selection are deprecated then, still needed
// for Fabric 1.x and current Fabric 2.0 beta has major drawing bug.
n.Fabric.prototype.deleteActiveGroup = function() {
var that = this;
if (this.canvas.getActiveGroup()) {
......@@ -264,6 +288,8 @@ $(function (n) {
this.canvas.selection = false;
};
// Used by both textbox and rectangle sizing. Maybe fusing those function later, since
// they reuse code and have significant overlap.
n.Fabric.prototype.resizeRectangle = function(o) {
if (!this.isDown) return;
var rect = this.canvas.getActiveObject();
......@@ -296,6 +322,7 @@ $(function (n) {
this.canvas.freeDrawingBrush.width = this.brushSize;
};
// Default Canvas mouse events are currently strangely implemented.
n.Fabric.prototype.defaultMouseUpEvent = function(e) {
if (this.moveMode) {
this.deactivatePanning();
......@@ -333,38 +360,54 @@ $(function (n) {
}
};
// Calls additional functions on button press, could eventually be integrated to
// the button json
n.Fabric.prototype.buttonPress = function(string, $button) {
this.modeSettings.activateMode(string, $button);
switch(string) {
case "draw":
console.log("totally Drawing now");
this.draw();
break;
case "highlight":
console.log("highlighting now");
this.highlight();
break;
case "write":
console.log("writing my disertation");
break;
case "rectangle":
console.log("Oh yeah");
break;
case "move":
console.log("moving arround");
break;
case "delete":
this.delete();
break;
default:
console.error("unrecognized mode");
break;
}
};
n.Fabric.prototype.delete = function() {
this.deleteActiveGroup();
};
n.Fabric.prototype.draw = function() {
this.activeColor.opacity = 0.8;
this.brushSize = 2;
this.setBrush();
};
n.Fabric.prototype.highlight = function() {
this.activeColor.opacity = 0.4;
this.brushSize = 14;
this.setBrush();
};
n.Fabric.prototype.rectangle = function() {
this.drawRectangleMode = true;
};
// Just for mockup, init() function called from new QfqNS.Plugin class maybe.
n.fabric = new n.Fabric();
n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
// Button Events
$("#clear-canvas").on( "click", function() {
n.fabric.deleteActiveGroup();
});
// Will be integrated shortly
$("#text-bg-submit").on("click", function() {
n.fabric.userText = $("#text-user-value").val();
......@@ -372,56 +415,9 @@ $(function (n) {
$("#text-user-value").val('');
});
$("#drawing-mode").on( "click", function() {
n.fabric.isDrawingMode = !n.fabric.isDrawingMode;
if (n.fabric.isDrawingMode) {
n.fabric.modeSettings.activateMode("draw");
n.fabric.activeColor.opacity = 0.8;
n.fabric.brushSize = 2;
n.fabric.setBrush();
}
else {
n.fabric.canvas.isDrawingMode = false;
$(this).removeClass("btn-primary");
$(this).addClass("btn-default");
}
});
$("#highlight-mode").on( "click", function() {
n.fabric.isHighlightMode = !n.fabric.isHighlightMode;
if (n.fabric.isHighlightMode) {
n.fabric.modeSettings.activateMode("highlight");
n.fabric.activeColor.opacity = 0.4;
n.fabric.brushSize = 14;
n.fabric.setBrush();
}
else {
n.fabric.canvas.isDrawingMode = false;
$(this).removeClass("btn-primary");
$(this).addClass("btn-default");
}
});
$("#move-mode").on("click", function() {
n.fabric.moveMode = !n.fabric.moveMode;
if (n.fabric.moveMode) {
n.fabric.modeSettings.activateMode("move");
}
});
$("#add-text").on("click", function() {
$("#user-text-control").slideToggle();
n.fabric.modeSettings.activateMode("write");
});
$("#add-rect").on("click", function() {
n.fabric.drawRectangleMode = !n.fabric.drawRectangleMode;
if (n.fabric.drawRectangleMode) {
n.fabric.modeSettings.activateMode("rectangle");
} else {
n.fabric.modeSettings.deactivateMode(n.fabric.modeSettings.getModeByName("rectangle"));
}
});
/*
To be integrated, save to localstorage & at the and as ajax to server.
Export to image is a maybe.
$("#save1").on("click", function() {
if (!n.fabric.saveOne) {
......@@ -455,6 +451,8 @@ $(function (n) {
});
*/
$("#draw-blue").on("click", function() {
n.fabric.activeColor.red = 0;
n.fabric.activeColor.green = 68;
......
......@@ -177,30 +177,6 @@ i.@{spinner_class} {
border: none;
}
#draw-yellow {
background-image: url("../icons/yellow_cube.png");
}
#draw-green {
background-image: url("../icons/green_cube.png");
}
#draw-blue {
background-image: url("../icons/blue_cube.png");
}
#draw-light-blue {
background-image: url("../icons/light_blue_cube.png");
}
#draw-red {
background-image: url("../icons/red_cube.png");
}
#draw-pink {
background-image: url("../icons/pink_cube.png");
}
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
display: block !important;
......
......@@ -42,12 +42,7 @@
</div>
<div class="form-group" id>
<button class="btn btn-primary" id="drawing-mode"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-default" id="highlight-mode"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-default" id="add-text"><span class="glyphicon glyphicon-text-height"></span></button>
<button class="btn btn-default" id="add-rect"><span class="glyphicon glyphicon-stop"></span></button>
<button class="btn btn-default" id="move-mode"><span class="glyphicon glyphicon-move"></span></button>
<button class="btn btn-danger" id="clear-canvas"><span class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="drawing-control" id="user-drawing-control">
<div class="drawing-options">
......
......@@ -30,7 +30,7 @@
"isToggle": true,
"toggle": "drawTextBoxMode",
"hasToggleElement": true,
"toggleElement": "#user-text-control",
"toggleElement": "user-text-control",
"icon": "glyphicon-text-height"
},
{
......@@ -67,5 +67,49 @@
"icon": "glyphicon-trash"
}
],
"currentMode": "draw"
"currentMode": "draw",
"colors": [
{
"name": "blue",
"selector": "draw-blue",
"red": 0,
"green": 68,
"blue": 255
},
{
"name": "light-blue",
"selector": "draw-light-blue",
"red": 0,
"green": 204,
"blue": 255
},
{
"name": "red",
"selector": "draw-red",
"red": 255,
"green": 0,
"blue": 0
},
{
"name": "pink",
"selector": "draw-pink",
"red": 255,
"green": 53,
"blue": 177
},
{
"name": "green",
"selector": "draw-green",
"red": 133,
"green": 169,
"blue": 75
},
{
"name": "yellow",
"selector": "draw-yellow",
"red": 255,
"green": 204,
"blue": 0
}
]
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment