Skip to content

Instantly share code, notes, and snippets.

@Meroje

Meroje/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Save Meroje/e36004faf32dd52c04e9 to your computer and use it in GitHub Desktop.
Save Meroje/e36004faf32dd52c04e9 to your computer and use it in GitHub Desktop.
Download ZIP
Map Marker
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Pen</title>
</head>
<body>
<canvas id="demo" width="500" height="400"></canvas>
<button id="clearMarks">Clear Marks</button>
<button id="deleteMark">Remove selected</button>
<select name="stands" id="stands">
<option value="stand1">stand 1</option>
<option value="stand2">stand 2</option>
<option value="stand3">stand 3</option>
<option value="stand4">stand 4</option>
<option value="stand5">stand 5</option>
<option value="stand6">stand 6</option>
</select>
<button id="setMark">Set name</button>
<button id="unsetMark">Unset name</button>
<button id="exportMarks">Export Marks</button>
<textarea name="marks" id="marks" cols="30" rows="10"></textarea>
<input type="text" id="currentMark" style="width:200px">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
var stage = new createjs.Stage("demo"),
w = stage.width,
h = stage.height,
bitmap = new createjs.Bitmap("map.png"),
stands = document.getElementById('stands'),
marks = new createjs.Container();
marks.selectedChild = null;
createjs.Shape.prototype.selected = false;
createjs.Shape.prototype.standId = null;
createjs.Shape.prototype.setSelected = function(selected) {
if (selected == true) {
this.selected = true;
if (marks.selectedChild !== null) {
marks.children[marks.selectedChild].setSelected(false);
}
marks.selectedChild = marks.getChildIndex(this);
this.graphics.inject(function(color) {
this.fillStyle = color;
}, "blue");
document.getElementById('currentMark').value = JSON.stringify({
'x': this.x,
'y': this.y,
'name': this.name
});
} else {
this.selected = false;
marks.selectedChild = null;
this.graphics.inject(function(color) {
this.fillStyle = color;
}, this.name ? "green" : "red");
}
};
document.addEventListener('DOMContentLoaded', function() {
stage.addChild(bitmap);
stage.addChild(marks);
bitmap.image.onload = function() {
stage.canvas.width = bitmap.image.width;
stage.canvas.height = bitmap.image.height;
stage.update();
};
stage.addEventListener("click", function(e) {
if (marks.selectedChild !== null) {
marks.children[marks.selectedChild].setSelected(false);
}
var name = null;
if (stands.selectedIndex != -1) {name = stands.selectedOptions[0].value}
addMark(e.stageX, e.stageY, name);
stage.update();
});
stage.update();
});
function addMark(x, y, name) {
if (marks.children.length == stands.length) return;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 7);
circle.x = x;
circle.y = y;
circle.addEventListener("click", handleClick);
marks.addChild(circle);
circle.setSelected(true);
stage.update();
if (marks.children.length == stands.length) alert('All marks placed !');
}
function clearMarks() {
marks.removeAllChildren();
stage.update();
}
document.getElementById('clearMarks').addEventListener("click", clearMarks);
function deleteMark() {
if (marks.children[marks.selectedChild].standId !== null)
stands[marks.children[marks.selectedChild].standId].disabled = false;
marks.removeChildAt(marks.selectedChild);
marks.selectedChild = null;
stage.update();
}
document.getElementById('deleteMark').addEventListener("click", deleteMark);
function setMark() {
if (marks.selectedChild === null && stands.selectedOptions.length == 0) return;
var mark = marks.children[marks.selectedChild];
mark.name = stands.selectedOptions[0].value;
mark.standId = stands.selectedOptions[0].index;
document.getElementById('currentMark').value = JSON.stringify({
'x': mark.x,
'y': mark.y,
'name': mark.name
});
stands.selectedOptions[0].disabled = true;
var i = stands.selectedIndex;
stands.options[++i%stands.options.length].selected = true;
if (stands.selectedOptions[0].disabled == true) {
stands.selectedIndex = -1;
alert('All Done !');
}
stage.update();
}
document.getElementById('setMark').addEventListener("click", setMark);
function unsetMark() {
if (marks.selectedChild === null && marks.children[marks.selectedChild].name == null) return;
var mark = marks.children[marks.selectedChild];
mark.name = null;
stands[mark.standId].disabled = false;
stands.selectedIndex = mark.standId;
mark.standId = null;
stage.update();
}
document.getElementById('unsetMark').addEventListener("click", unsetMark);
function exportMarks() {
var exports = [];
for (var i = 0; i < marks.children.length; i++) {
var child = marks.children[i];
if (child.name == null) continue;
exports.push({
'x': child.x,
'y': child.y,
'name': child.name
});
};
document.getElementById('marks').value = JSON.stringify(exports);
}
document.getElementById('exportMarks').addEventListener("click", exportMarks);
function handleClick(e) {
e.stopPropagation();
if (e.target.selected == false) {
e.target.setSelected(true);
} else {
e.target.setSelected(false);
}
stage.update();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment