--- /dev/null +++ b/README.md @@ -1 +1,2 @@ +A project to facilitate annotation of murals, by breaking the murals into tiles so that they can panned and zoomed. --- a/index.html +++ b/index.html @@ -2,30 +2,9 @@
- - - - -"+ JSON.stringify(json, null, ' ') +"
";
json = json.replace(/\{\n/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').
replace(/\"/g, '');
- z = new OpenLayers.Popup.FramedCloud(
- "test",
- new OpenLayers.LonLat(x, y), // Always should be at the center of the map, not the center of viewport.
- new OpenLayers.Size(640,480),
- json
- ,null,true);
- feature.popup = z;
- z.panMapIfOutOfView = true;
- map.addPopup(z);
+ z = new OpenLayers.Popup.FramedCloud(
+ "test",
+ new OpenLayers.LonLat(x, y), // Always should be at the center of the map, not the center of viewport.
+ new OpenLayers.Size(640,480),
+ json
+ ,null,true);
+ feature.popup = z;
+ z.panMapIfOutOfView = true;
+ map.addPopup(z);
}
-function init(){
- var options = {
- controls: [],
- maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
- maxResolution: 128.000000,
- numZoomLevels: 8
- };
- map = new OpenLayers.Map('map', options);
- $.get(config.indexer+"/fetch", function(data){
- return;
- if (data.length != 0)
- {
- ans.ans = JSON.parse(data);
- for(var i in ans.ans)
- {
- ans.count+=1;
- makeBoxes(ans.ans[i]);
- }
- }
+function init() {
+ var options = {
+ controls: [],
+ maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
+ maxResolution: 128.000000,
+ numZoomLevels: 8
+ };
+ map = new OpenLayers.Map('map', options);
+ $.get(config.indexer+"/fetch", function(data) {
+ return;
+ if (data.length != 0) {
+ ans.ans = JSON.parse(data);
+ for(var i in ans.ans) {
+ ans.count+=1;
+ makeBoxes(ans.ans[i]);
+ }
+ }
+ });
+ var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
+ { url: '', serviceVersion: '.', layername: '.', alpha: true,
+ type: 'png', getURL: overlay_getTileURL
+ });
+ boxes = new OpenLayers.Layer.Vector( "Boxes" );
+ map.addLayers([layer, boxes]);
- });
- var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
- { url: '', serviceVersion: '.', layername: '.', alpha: true,
- type: 'png', getURL: overlay_getTileURL
- });
- boxes = new OpenLayers.Layer.Vector( "Boxes" );
- map.addLayers([layer, boxes]);
+ boxes.events.register('featureadded', boxes, myfeatureadded);
+ box2 = new OpenLayers.Layer.Vector( "Boxes" );
+ for (var i = 0; i < box_extents.length; i++) {
+ ext = box_extents[i];
+ bounds = OpenLayers.Bounds.fromArray(ext);
- boxes.events.register('featureadded', boxes, myfeatureadded);
- box2 = new OpenLayers.Layer.Vector( "Boxes" );
- for (var i = 0; i < box_extents.length; i++) {
- ext = box_extents[i];
- bounds = OpenLayers.Bounds.fromArray(ext);
+ box = new OpenLayers.Feature.Vector(bounds.toGeometry());
+ box2.addFeatures(box);
+ }
+ box3 = new OpenLayers.Layer.Vector( "Boxes");
+ for (var i = 0; i < box_extents1.length; i++) {
+ ext = box_extents1[i];
+ bounds = OpenLayers.Bounds.fromArray(ext);
- box = new OpenLayers.Feature.Vector(bounds.toGeometry());
- box2.addFeatures(box);
- }
- box3 = new OpenLayers.Layer.Vector( "Boxes");
- for (var i = 0; i < box_extents1.length; i++) {
- ext = box_extents1[i];
- bounds = OpenLayers.Bounds.fromArray(ext);
+ box = new OpenLayers.Feature.Vector(bounds.toGeometry());
+ box3.addFeatures(box);
+ }
+ map.addLayers([box2, box3]);
- box = new OpenLayers.Feature.Vector(bounds.toGeometry());
- box3.addFeatures(box);
- }
- map.addLayers([box2, box3]);
+ selectControl = new OpenLayers.Control.SelectFeature(box3,
+ {onSelect: onFeatureSelect});
- selectControl = new OpenLayers.Control.SelectFeature(box3,
- {onSelect: onFeatureSelect});
+ drawControls = {
+ box : new OpenLayers.Control.DrawFeature(boxes,
+ OpenLayers.Handler.RegularPolygon, {
+ handlerOptions: {
+ sides: 4,
+ irregular: true
+ }
+ }
+ ),
+ select: selectControl
+ };
- drawControls = {
- box : new OpenLayers.Control.DrawFeature(boxes,
- OpenLayers.Handler.RegularPolygon, {
- handlerOptions: {
- sides: 4,
- irregular: true
- }
- }
- ),
- select: selectControl
- };
-
- map.zoomToExtent( mapBounds );
- for(var key in drawControls){
- map.addControl(drawControls[key]);
- }
- drawControls['select'].activate();
- addLabel('3759.0000','-1274.33337','Face');
- addLabel('3719','-1771','Jewelery');
- addLabel('4263.0000','-1345.33337', 'Video');
- map.addControl(new OpenLayers.Control.PanZoomBar());
- map.addControl(new OpenLayers.Control.MousePosition());
- map.addControl(new OpenLayers.Control.MouseDefaults());
- map.addControl(new OpenLayers.Control.KeyboardDefaults());
- map.addControl(new OpenLayers.Control.LayerSwitcher());
- map.zoomToExtent( mapBounds );
- //document.getElementById('noneToggle').checked = true;
+ map.zoomToExtent( mapBounds );
+ for(var key in drawControls){
+ map.addControl(drawControls[key]);
+ }
+ drawControls['select'].activate();
+ addLabel('3759.0000','-1274.33337','Face');
+ addLabel('3719','-1771','Jewelery');
+ addLabel('4263.0000','-1345.33337', 'Video');
+ map.addControl(new OpenLayers.Control.PanZoomBar());
+ map.addControl(new OpenLayers.Control.MousePosition());
+ map.addControl(new OpenLayers.Control.MouseDefaults());
+ map.addControl(new OpenLayers.Control.KeyboardDefaults());
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ map.zoomToExtent( mapBounds );
+ //document.getElementById('noneToggle').checked = true;
+ resize();
}
-function addLabel(left, top, name)
-{
- var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
- renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
- vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
- styleMap: new OpenLayers.StyleMap({'default':{
- strokeColor: "#000",
- strokeOpacity: 1,
- strokeWidth: 3,
- fillColor: "#FFF",
- fillOpacity: 1,
- pointRadius: 2,
- pointerEvents: "visiblePainted",
- // label with \n linebreaks
- label : "${name}\n",
-//\nage: ${age}",
+function addLabel(left, top, name) {
+ var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+ renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
- fontColor: "#000",
- fontSize: "16px",
- fontFamily: "Georgia, Serif",
- fontWeight: "bold",
- labelAlign: "${align}",
- labelXOffset: "${xOffset}",
- labelYOffset: "${yOffset}",
- labelOutlineColor: "white",
- labelOutlineWidth: 3
- }}),
- renderers: renderer
- });
+ vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+ styleMap: new OpenLayers.StyleMap({'default':{
+ strokeColor: "#000",
+ strokeOpacity: 1,
+ strokeWidth: 3,
+ fillColor: "#FFF",
+ fillOpacity: 1,
+ pointRadius: 2,
+ pointerEvents: "visiblePainted",
+ // label with \n linebreaks
+ label : "${name}\n",
+ //\nage: ${age}",
- var labelOffsetPoint = new OpenLayers.Geometry.Point(left, top)
+ fontColor: "#000",
+ fontSize: "16px",
+ fontFamily: "Georgia, Serif",
+ fontWeight: "bold",
+ labelAlign: "${align}",
+ labelXOffset: "${xOffset}",
+ labelYOffset: "${yOffset}",
+ labelOutlineColor: "white",
+ labelOutlineWidth: 3
+ }}),
+ renderers: renderer
+ });
+
+ var labelOffsetPoint = new OpenLayers.Geometry.Point(left, top)
var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
- labelFeature.attributes = {
- align: 'cm',
- favColor: 'blue',
- };
- labelFeature.attributes['name'] = name;
- map.addLayer(vectorLayer);
- vectorLayer.drawFeature(labelFeature);
- vectorLayer.addFeatures([labelFeature]);
+ labelFeature.attributes = {
+ align: 'cm',
+ favColor: 'blue',
+ };
+ labelFeature.attributes['name'] = name;
+ map.addLayer(vectorLayer);
+ vectorLayer.drawFeature(labelFeature);
+ vectorLayer.addFeatures([labelFeature]);
}
- function makeBoxes(x)
-{
- bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
- box = new OpenLayers.Feature.Vector(bounds.toGeometry());
- box3.addFeatures(box);
- addLabel(x['left'],x['top'],x['name']);
- }
+function makeBoxes(x) {
+
+ bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
+ box = new OpenLayers.Feature.Vector(bounds.toGeometry());
+ box3.addFeatures(box);
+ addLabel(x['left'],x['top'],x['name']);
+}
+
// function onmouse(data){
// console.log(data);
// }
-function myfeatureadded(myObj)
-{
- var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
- renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
- vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
- styleMap: new OpenLayers.StyleMap({'default':{
- strokeColor: "#000",
- strokeOpacity: 1,
- strokeWidth: 3,
- fillColor: "#FF5500",
- fillOpacity: 0.5,
- pointRadius: 2,
- pointerEvents: "visiblePainted",
- // label with \n linebreaks
- label : "${name}\n",
-//\nage: ${age}",
+function myfeatureadded(myObj) {
+ var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+ renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
- fontColor: "#000",
- fontSize: "16px",
- fontFamily: "Georgia, Serif",
- fontWeight: "bold",
- labelAlign: "${align}",
- labelXOffset: "${xOffset}",
- labelYOffset: "${yOffset}",
- labelOutlineColor: "white",
- labelOutlineWidth: 3
- }}),
- renderers: renderer
- });
+ vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+ styleMap: new OpenLayers.StyleMap({'default':{
+ strokeColor: "#000",
+ strokeOpacity: 1,
+ strokeWidth: 3,
+ fillColor: "#FF5500",
+ fillOpacity: 0.5,
+ pointRadius: 2,
+ pointerEvents: "visiblePainted",
+ // label with \n linebreaks
+ label : "${name}\n",
+ //\nage: ${age}",
- var labelOffsetPoint = new OpenLayers.Geometry.Point(myObj.feature.geometry.bounds.left, myObj.feature.geometry.bounds.top);
- var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
- labelFeature.attributes = {
- align: 'cm',
- favColor: 'blue',
+ fontColor: "#000",
+ fontSize: "16px",
+ fontFamily: "Georgia, Serif",
+ fontWeight: "bold",
+ labelAlign: "${align}",
+ labelXOffset: "${xOffset}",
+ labelYOffset: "${yOffset}",
+ labelOutlineColor: "white",
+ labelOutlineWidth: 3
+ }}),
+ renderers: renderer
+ });
+
+ var labelOffsetPoint = new OpenLayers.Geometry.Point(myObj.feature.geometry.bounds.left, myObj.feature.geometry.bounds.top);
+ var labelFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
+ labelFeature.attributes = {
+ align: 'cm',
+ favColor: 'blue',
+ };
+ labelFeature.attributes['name'] = prompt("Enter a label for the annotation..");
+ user = prompt("Enter your name");
+ if(labelFeature.attributes['name'])
+ {
+ topValue = myObj.feature.geometry.bounds.top;
+ bottom = myObj.feature.geometry.bounds.bottom;
+ left = myObj.feature.geometry.bounds.left;
+ right = myObj.feature.geometry.bounds.right;
+ name = labelFeature.attributes['name'];
+ map.addLayer(vectorLayer);
+ vectorLayer.drawFeature(labelFeature);
+ vectorLayer.addFeatures([labelFeature]);
+ annotationTree();
+ attribs = {
+ "top": topValue,
+ "bottom": bottom,
+ "right": right,
+ "left": left,
+ "name": name
};
- labelFeature.attributes['name'] = prompt("Enter a label for the annotation..");
- user = prompt("Enter your name");
- if(labelFeature.attributes['name'])
- {
- topValue = myObj.feature.geometry.bounds.top;
- bottom = myObj.feature.geometry.bounds.bottom;
- left = myObj.feature.geometry.bounds.left;
- right = myObj.feature.geometry.bounds.right;
- name = labelFeature.attributes['name'];
- map.addLayer(vectorLayer);
- vectorLayer.drawFeature(labelFeature);
- vectorLayer.addFeatures([labelFeature]);
- annotationTree();
- attribs = {
- "top": topValue,
- "bottom": bottom,
- "right": right,
- "left": left,
- "name": name
- };
- }
- else
- myObj.feature.destroy();
+ }
+ else
+ myObj.feature.destroy();
}
function toggleControl(element) {
@@ -332,72 +329,96 @@
}
function overlay_getTileURL(bounds) {
- var res = this.map.getResolution();
- var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
- var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
- var z = this.map.getZoom();
- if (x >= 0 && y >= 0) {
- return this.url + z + "/" + x + "/" + y + "." + this.type;
- } else {
- return "http://www.maptiler.org/img/none.png";
- }
+ var res = this.map.getResolution();
+ var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
+ var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
+ var z = this.map.getZoom();
+ if (x >= 0 && y >= 0) {
+ return this.url + z + "/" + x + "/" + y + "." + this.type;
+ } else {
+ return "http://www.maptiler.org/img/none.png";
+ }
}
function getWindowHeight() {
- if (self.innerHeight) return self.innerHeight;
- if (document.documentElement && document.documentElement.clientHeight)
- return document.documentElement.clientHeight;
- if (document.body) return document.body.clientHeight;
- return 0;
+ if (self.innerHeight) return self.innerHeight;
+ if (document.documentElement && document.documentElement.clientHeight)
+ return document.documentElement.clientHeight;
+ if (document.body) return document.body.clientHeight;
+ return 0;
}
function getWindowWidth() {
- if (self.innerWidth) return self.innerWidth;
- if (document.documentElement && document.documentElement.clientWidth)
- return document.documentElement.clientWidth;
- if (document.body) return document.body.clientWidth;
- return 0;
+ if (self.innerWidth) return self.innerWidth;
+ if (document.documentElement && document.documentElement.clientWidth)
+ return document.documentElement.clientWidth;
+ if (document.body) return document.body.clientWidth;
+ return 0;
}
function resize() {
- var map = document.getElementById("map");
- var header = document.getElementById("header");
- var subheader = document.getElementById("subheader");
- map.style.height = (getWindowHeight()-180) +"px";
- map.style.width = (getWindowWidth()-60) + "px";
- //header.style.width = (getWindowWidth()-60) + "px";
- subheader.style.width = (getWindowWidth()-60) + "px";
- if (map.updateSize) { map.updateSize(); };
+ var map = document.getElementById("map");
+ var header = document.getElementById("header");
+ var subheader = document.getElementById("subheader");
+ map.style.height = (getWindowHeight()-180) +"px";
+ map.style.width = (getWindowWidth()-60) + "px";
+ //header.style.width = (getWindowWidth()-60) + "px";
+ subheader.style.width = (getWindowWidth()-60) + "px";
+ if (map.updateSize) { map.updateSize(); };
}
+
function allowPan(element) {
- var stop = !element.checked;
- for(var key in drawControls){
- drawControls[key].handler.stopDown = stop;
- drawControls[key].handler.stopUp = stop;
- }
- }
-onresize=function(){ resize();};
-function publish()
-{
- if(myJSON.length < 1){
- return;}
- for(var i in myJSON){
- jString = JSON.stringify(myJSON[i]).replace(/\{/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').replace(/\][,]/g, '').
- replace(/\"/g, '');
- myJSON[i].text = ' annotated '+window.location.href+"#[top="+myJSON[i].top+",bottom="+myJSON[i].bottom+",left="+myJSON[i].left+",right="+myJSON[i].right+"] as "+myJSON[i].name+" "+jString+" #swtr"; //The string which gets posted as a tweet.
- myJSON[i].text = encodeURIComponent(myJSON[i].text);
- myJSON[i].user = user; // User need not know the modification to the JSON.
- myJSON[i].title = 'Annotation for '+window.location.href;
- }
- $.post(config.indexer+'/submit', JSON.stringify(myJSON),function(){
- $.post(config.postTweetUrl, {"data":JSON.stringify(myJSON)}, function(data) {
- $('#posted').show();
- myJSON = [];
- });
- });
+ var stop = !element.checked;
+ for(var key in drawControls){
+ drawControls[key].handler.stopDown = stop;
+ drawControls[key].handler.stopUp = stop;
+ }
}
+
+var onresize = function() {
+ resize();
+};
+
+function publish() {
+ if(myJSON.length < 1) {
+ return;
+ }
+ for(var i in myJSON) {
+ //clean up the JSON to post as tweet
+ jString = JSON.stringify(myJSON[i]).replace(/\{/g, '').replace(/\}[,]*/g, '').replace(/\[/g, '').
+ replace(/\][,]/g, '').replace(/\"/g, '');
+
+ // construct the tweet string
+ myJSON[i].text = ' annotated '+ window.location.href + "#[top="+myJSON[i].top +
+ ",bottom=" + myJSON[i].bottom + ",left=" + myJSON[i].left + ",right=" +
+ myJSON[i].right + "] as " + myJSON[i].name + " " + jString + " #swtr";
+
+ myJSON[i].text = encodeURIComponent(myJSON[i].text);
+ myJSON[i].user = user; // User need not know the modification to the JSON.
+
+ myJSON[i].title = 'Annotation for '+window.location.href;
+ }
+
+ $.post(config.indexer+'/submit', JSON.stringify(myJSON),function() {
+ $.post(config.postTweetUrl, {"data":JSON.stringify(myJSON)}, function(data) {
+ $('#posted').show();
+ myJSON = [];
+ });
+ });
+}
+
+function publish2() {
+ if(myJSON.length < 1) {
+ return;
+ }
+ console.log(myJSON);
+ $.post(config.postTweetUrl, {'data': JSON.stringify(myJSON)}, function() {
+ console.log('posted to ', config.postTweetUrl);
+ });
+}
+
var config = {
- 'postTweetUrl':'http://127.0.0.1:5000/add',
- 'indexer':'http://192.168.100.56:82'
+ 'postTweetUrl':'http://demo.swtr.us/add',
+ 'indexer':'http://192.168.100.56:82'
}