Added support for arbitrary marker colours

frontend/js/ng.js

@@ -57,20 +57,12 @@
 	facilpadApp.directive("fpColourPicker", function() {
 		var colourPicker = $("#colour-picker").hide();
 
-		function textColour(colour) {
-			var r = parseInt(colour.substr(0, 2), 16)/255;
-			var g = parseInt(colour.substr(2, 2), 16)/255;
-			var b = parseInt(colour.substr(4, 2), 16)/255;
-			// See http://stackoverflow.com/a/596243/242365
-			return (Math.sqrt(0.241*r*r + 0.691*g*g + 0.068*b*b) <= 0.5) ? "ffffff" : "000000";
-		}
-
 		return {
 			restrict: 'A',
 			link: function(scope, element, attrs) {
 				scope.$watch(attrs.ngModel, function(v) {
 					var colour = (v && v.match(/^[0-9a-f]{6}$/i) ? v : 'ffffff');
-					element.css({ 'background-color': '#' + colour, 'color' : '#' + textColour(colour)});
+					element.css({ 'background-color': '#' + colour, 'color' : '#' + fp.makeTextColour(colour)});
 				});
 
 				var handler = function(e) {
@@ -198,7 +190,7 @@
 				$scope.closeDialog();
 		});
 
-		$scope.$watch("currentMarker.style", function() {
+		$scope.$watch("currentMarker.colour", function() {
 			if($scope.currentMarker != null)
 				fp.addMarker($scope.currentMarker);
 		});

frontend/js/pad.js

@@ -200,7 +200,7 @@ var FacilPad = {
 		fp.deleteMarker(marker);
 
 		var style = {
-			externalGraphic: "img/marker-"+marker.style+".png",
+			externalGraphic: fp.createMarkerGraphic(marker.colour),
 			graphicWidth: 21,
 			graphicHeight: 25,
 			graphicXOffset: -9,
@@ -352,7 +352,7 @@ var FacilPad = {
 
 			if(!end) {
 				for(var i=0; i<line.points.length; i++) {
-					var marker = { id: "linePoint"+i, position: line.points[i], style: "gold", i: i };
+					var marker = { id: "linePoint"+i, position: line.points[i], colour: "ffd700", i: i };
 					markers.push(marker);
 					fp.addMarker(marker);
 				}
@@ -378,6 +378,31 @@ var FacilPad = {
 		return randomPadId;
 	};
 
+	fp.createMarkerGraphic = function(colour) {
+		var borderColour = fp.makeTextColour(colour, 0.3);
+
+		var svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>' +
+			'<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" version="1.1">' +
+			'<g transform="matrix(0.962318,0,0,0.962318,0.35255058,-988.3149)">' +
+			'<path style="fill:#' + colour + ';stroke:#' + borderColour + ';stroke-width:1" d="m 0.31494999,1035.8432 10.20437901,-8.1661 10.20438,8.1661 -10.20438,16.204 z" />' +
+			'<path style="fill:#' + borderColour + ';stroke:none" d="m 361.63462,62.160149 c 0,10.181526 -8.25375,18.435283 -18.43528,18.435283 -10.18153,0 -18.43528,-8.253757 -18.43528,-18.435283 0,-10.181526 8.25375,-18.435284 18.43528,-18.435284 10.18153,0 18.43528,8.253758 18.43528,18.435284 z" transform="matrix(0.1366727,0,0,0.1366727,-36.38665,1028.6074)" />' +
+			'</g>' +
+			'</svg>';
+
+		return "data:image/svg+xml;base64,"+btoa(svg);
+	};
+
+	fp.makeTextColour = function(backgroundColour, threshold) {
+		if(threshold == null)
+			threshold = 0.5;
+
+		var r = parseInt(backgroundColour.substr(0, 2), 16)/255;
+		var g = parseInt(backgroundColour.substr(2, 2), 16)/255;
+		var b = parseInt(backgroundColour.substr(4, 2), 16)/255;
+		// See http://stackoverflow.com/a/596243/242365
+		return (Math.sqrt(0.241*r*r + 0.691*g*g + 0.068*b*b) <= threshold) ? "ffffff" : "000000";
+	};
+
 	fp.padId = location.pathname.match(/[^\/]*$/)[0];
 
 })(FacilPad);

frontend/pad.html

@@ -108,13 +108,8 @@
 					<dt><label for="edit-marker-name">Name</label></dt>
 					<dd><input id="edit-marker-name" ng-model="currentMarker.name" /></dd>
 
-					<dt><label for="edit-marker-style">Style</label></dt>
-					<dd><select id="edit-marker-style" ng-model="currentMarker.style">
-						<option value="red">Red</option>
-						<option value="green">Green</option>
-						<option value="blue">Blue</option>
-						<option value="gold">Yellow</option>
-					</select></dd>
+					<dt><label for="edit-marker-colour">Colour</label></dt>
+					<dd><input id="edit-marker-colour" ng-model="currentMarker.colour" fp-colour-picker></dd>
 
 					<dt><label for="edit-marker-description">Description</label></dt>
 					<dd><textarea id="edit-marker-description" ng-model="currentMarker.description"></textarea></dd>

server/lib/databaseBackendMongodb.js

@@ -2,6 +2,8 @@ var mongoose = require("mongoose");
 var config = require("../config");
 var utils = require("./utils");
 
+var OLD_MARKER_COLOURS = { blue: "8da8f6", green: "90ee90", gold: "ffd700", red: "ff0000" };
+
 function connect(callback) {
 	var connectionString = "mongodb://"
 		+ (config.db.user ? encodeURIComponent(config.db.user) + ":" + encodeURIComponent(config.db.password) + "@" : "")
@@ -31,7 +33,7 @@ var markerSchema = mongoose.Schema({
 	position : positionType,
 	name : { type: String, default: "Untitled marker" },
 	description : String,
-	style : { type: String, default: "red" }
+	colour : { type: String, default: "ff0000" }
 });
 
 var lineSchema = mongoose.Schema({
@@ -208,6 +210,12 @@ function _fixId(data) {
 			for(var i=0; i<data.points.length; i++)
 				delete data.points[i]._id;
 		}
+
+		// Backwards compatibility for markers
+		if(data.style) {
+			data.colour = OLD_MARKER_COLOURS[data.style];
+			delete data.style;
+		}
 	}
 	return data;
 }