Commit d6119719590359a48c796beb2d3b4dde40538e16

arvind
Tue Mar 26 21:26:08 IST 2013

Tree SHA1: c193e6c
Parent SHA1: 2f548fd (Fix annotation tree not loading)
raw diff | raw patch

Major changes
			- Implementing panorama viewer.
			- Removing JSON editing and saving on server side.  Switching to another graph for annotation.

Diff rendering mode:
inline
side by side


2	2	from flask import request
3	3	from flask import render_template
4	4	from flask import make_response
	5	from flask import jsonify
5	6	import logging
6	7	from logging import FileHandler
7		import json
8	8	import pymongo
9		import os
10		import glob
11	9
	10
12	11	app = Flask(__name__)
13	12
14	13	@app.route('/', methods=['GET'])
15	14	def index():
16		if request.args.has_key('json'):
17		return render_template('index.html', json=request.args['json'])
	15	if request.args.has_key('url'):
	16	return render_template('index.html', url=request.args['url'])
18	17	else:
19	18	return render_template('index.html')
20	19
21		@app.route('/editor', methods=['GET'])
22		def editor():
23		if request.args.has_key('json'):
24		filename = request.args['json']
25		else:
26		filename = 'test.json'
27		filename = os.path.join(os.path.join(os.path.dirname(__file__), 'static'), filename)
28		try:
29		f = open(filename, 'r')
30		except:
31		f = open(os.path.join(os.path.join(os.path.dirname(__file__), 'static'), 'test.json'), 'r')
32		buf = f.read()
33		f.close()
34		return render_template('editor.html', json = buf)
	20	@app.route('/fetch',methods=['GET'])
	21	def fetch():
	22	connection = pymongo.Connection()
	23	db = connection['mural']
	24	collection = db['data']
	25	ret = {}
	26	x = 0
	27	for i in collection.find({'url':request.args['url']}):
	28	del(i['_id'])
	29	ret[x] = i
	30	x = x + 1
	31	jsonify(ret)
35	32
36		@app.route('/saveJSON', methods=['POST'])
37		def saveJSON():
38		if request.method == 'POST':
39		response = make_response()
40		JSON = request.form['json']
41		filename = os.path.join(os.path.join(os.path.dirname(__file__), 'static'), request.form['filename'])
42		ls = glob.glob(filename)
43		if len(ls) > 0:
44		response.status_code = 409
45		response.status ="409 Conflict"
46		response.data = "The file that you were trying to save already exits, please try a different name."
47		return response
48		f = open(filename, 'w')
49		f.write(JSON)
50		f.close()
51		return response
52		else:
53		response = make_response()
54		response.code = 400
55		return reponse
56	33
57		@app.route('/history', methods=['GET'])
58		def listJSON():
59		path = os.path.join(os.path.join(os.path.dirname(__file__), 'static'), '*.json')
60		ls = glob.glob(path)
61		def sanitize(i):
62		return i.split('/')[-1]
63		ls = map(sanitize, ls)
64		return render_template('history.html', ls=ls)
65
66	34	#Log the errors, don't depend on apache to log it for you.
67	35	fil = FileHandler(os.path.join(os.path.dirname(__file__), 'logme'),mode='a')
68	36	fil.setLevel(logging.ERROR)
…	…
39	39
40	40	if __name__ == "__main__":
41	41	app.run(debug=True, host='0.0.0.0')
42
43		# #from bson.code import *
44		# #from urllib import unquote_plus
45		# def application(environ, start_response):
46		# status = '200 OK'
47		# response_headers = [('Content-type', 'application/json'),('Access-Control-Allow-Origin', '*')]
48		# start_response(status, response_headers)
49		# c = pymongo.Connection()
50		# db = c['mural']
51		# coll = db['data']
52		# ret = {}
53		# x = 0
54		# for i in coll.find():
55		# del(i['_id'])
56		# ret[x] = i
57		# x = x + 1
58		# #return repr(recieved)
59		# return json.dumps(ret)


124	124	z.panMapIfOutOfView = true;
125	125	map.addPopup(z);
126	126	}
127		function init(){
128		var options = {
129		controls: [],
130		maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
131		maxResolution: 128.000000,
132		numZoomLevels: 8,
133		restrictedExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 )
134		};
135		map = new OpenLayers.Map('map', options);
136		$.get(config.indexer+"/fetch", function(data){
137		if (data != undefined)
138		{
139		ans.ans = data;
140		for(var i in ans.ans)
141		{
142		ans.count+=1;
143		makeBoxes(ans.ans[i]);
144		}
	127	function init(url){
	128	box2 = new OpenLayers.Layer.Vector( "Boxes");
	129	box3 = new OpenLayers.Layer.Vector( "Boxes");
	130	if(url != undefined)
	131	{
	132	var options = {
	133	controls: [],
	134	maxExtent: new OpenLayers.Bounds( 0.0, -928.0, 6744.0, 0.0 ),
	135	maxResolution: 32.000000,
	136	numZoomLevels: 6
	137	};
	138	map = new OpenLayers.Map('map', options);
145	139
146		}
	140	$.get(config.indexer+"/fetch",{url:decodeURIComponent(window.location.search.split("=")[1]).replace("\"","","gi")} , function(data){
	141	if (data != undefined)
	142	{
	143	ans.ans = data;
	144	for(var i in ans.ans)
	145	{
	146	ans.count+=1;
	147	makeBoxes(ans.ans[i]);
	148	}
147	149
148		});
	150	}
149	151
150		buffer0 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	152	});
	153
	154
	155	buffer0 = new OpenLayers.Layer.TMS( "TMS Layer","static/withpiv/",
151	156	{ url: '', serviceVersion: '.', layername: 'buffer0', alpha: true,
152	157	type: 'png', getURL: overlay_getTileURL, buffer:0, singleTile: false
153	158	});
154	159
155		buffer1 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	160	buffer1 = new OpenLayers.Layer.TMS( "TMS Layer","static/withpiv/",
156	161	{ url: '', serviceVersion: '.', layername: 'buffer1', alpha: true,
157	162	type: 'png', getURL: overlay_getTileURL, buffer:1, singleTile: false
158	163	});
159	164
160		buffer2 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	165	buffer2 = new OpenLayers.Layer.TMS( "TMS Layer","static/withpiv/",
161	166	{ url: '', serviceVersion: '.', layername: 'buffer2', alpha: true,
162	167	type: 'png', getURL: overlay_getTileURL, buffer:2, singleTile: false
163	168	});
164	169
165		var layer = new OpenLayers.Layer.TMS( "TMS Layer","static/",
166		{ url: '', serviceVersion: '.', layername: '.', alpha: true,
167		type: 'png', getURL: overlay_getTileURL, isBaseLayer:true
	170	var layer = new OpenLayers.Layer.TMS( "TMS Layer","static/withpiv/",
	171	{ url: '', serviceVersion: '.', layername: '.', alpha: true,
	172	type: 'png', getURL: overlay_getTileURL, isBaseLayer:true
	173	});
	174	}
	175	else{
	176	var options = {
	177	controls: [],
	178	maxExtent: new OpenLayers.Bounds( 0.0, -4668.0, 31110.0, 0.0 ),
	179	maxResolution: 128.000000,
	180	numZoomLevels: 8
	181	};
	182	map = new OpenLayers.Map('map', options);
	183	$.get(config.indexer+"/fetch",{url:window.location.href} , function(data){
	184	if (data != undefined)
	185	{
	186	ans.ans = data;
	187	for(var i in ans.ans)
	188	{
	189	ans.count+=1;
	190	makeBoxes(ans.ans[i]);
	191	}
	192
	193	}
	194
	195	});
	196
	197	buffer0 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	198	{ url: '', serviceVersion: '.', layername: 'buffer0', alpha: true,
	199	type: 'png', getURL: overlay_getTileURL, buffer:0, singleTile: false
168	200	});
	201
	202	buffer1 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	203	{ url: '', serviceVersion: '.', layername: 'buffer1', alpha: true,
	204	type: 'png', getURL: overlay_getTileURL, buffer:1, singleTile: false
	205	});
	206
	207	buffer2 = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	208	{ url: '', serviceVersion: '.', layername: 'buffer2', alpha: true,
	209	type: 'png', getURL: overlay_getTileURL, buffer:2, singleTile: false
	210	});
	211
	212	var layer = new OpenLayers.Layer.TMS( "TMS Layer","static/",
	213	{ url: '', serviceVersion: '.', layername: '.', alpha: true,
	214	type: 'png', getURL: overlay_getTileURL, isBaseLayer:true
	215	});
	216
	217
	218	addLabel('3759.0000','-1274.33337','Face');
	219	addLabel('3719','-1771','Jewelery');
	220	addLabel('4263.0000','-1345.33337', 'Video');
	221
	222	for (var i = 0; i < box_extents.length; i++) {
	223	ext = box_extents[i];
	224	bounds = OpenLayers.Bounds.fromArray(ext);
	225
	226	box = new OpenLayers.Feature.Vector(bounds.toGeometry());
	227	box2.addFeatures(box);
	228	}
	229	for (var i = 0; i < box_extents1.length; i++) {
	230	ext = box_extents1[i];
	231	bounds = OpenLayers.Bounds.fromArray(ext);
	232
	233	box = new OpenLayers.Feature.Vector(bounds.toGeometry());
	234	box3.addFeatures(box);
	235	}
	236
	237	}
169	238	boxes = new OpenLayers.Layer.Vector( "Boxes" );
170	239	map.addLayers([layer, buffer0, buffer1, buffer2, boxes]);
171	240
	241	layer.wrapDateLine = true;
172	242	boxes.events.register('featureadded', boxes, myfeatureadded);
173		box2 = new OpenLayers.Layer.Vector( "Boxes" );
174		for (var i = 0; i < box_extents.length; i++) {
175		ext = box_extents[i];
176		bounds = OpenLayers.Bounds.fromArray(ext);
177	243
178		box = new OpenLayers.Feature.Vector(bounds.toGeometry());
179		box2.addFeatures(box);
180		}
181		box3 = new OpenLayers.Layer.Vector( "Boxes");
182		for (var i = 0; i < box_extents1.length; i++) {
183		ext = box_extents1[i];
184		bounds = OpenLayers.Bounds.fromArray(ext);
185
186		box = new OpenLayers.Feature.Vector(bounds.toGeometry());
187		box3.addFeatures(box);
188		}
189	244	map.addLayers([box2, box3]);
190	245
191	246	selectControl = new OpenLayers.Control.SelectFeature(box3,
…	…
258	258	select: selectControl
259	259	};
260	260
261		map.zoomToExtent( mapBounds );
	261
262	262	for(var key in drawControls){
263	263	map.addControl(drawControls[key]);
264	264	}
265	265	drawControls['select'].activate();
266		addLabel('3759.0000','-1274.33337','Face');
267		addLabel('3719','-1771','Jewelery');
268		addLabel('4263.0000','-1345.33337', 'Video');
269	266	map.addControl(new OpenLayers.Control.PanZoomBar());
270	267	map.addControl(new OpenLayers.Control.MousePosition());
271	268	map.addControl(new OpenLayers.Control.Navigation());
272	269	map.addControl(new OpenLayers.Control.KeyboardDefaults());
273	270	map.addControl(new OpenLayers.Control.LayerSwitcher());
274		map.zoomToExtent( mapBounds );
	271	map.zoomToExtent( options['maxExtent'] );
275	272	//document.getElementById('noneToggle').checked = true;
276	273	}
277	274	function addLabel(left, top, name)
…	…
455	455	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.
456	456	myJSON[i].text = encodeURIComponent(myJSON[i].text);
457	457	myJSON[i].user = user; // User need not know the modification to the JSON.
458		myJSON[i].title = 'Annotation for '+window.location.href;
	458	if(window.location.search == ""){
	459	myJSON[i].title = 'Annotation for '+window.location.href;
	460	myJSON[i].url = window.location.href;
	461	}
	462	else{
	463	myJSON[i].title = 'Annotation for '+ decodeURIComponent(window.location.search.split("=")[1]).replace("\"","","gi");
	464	myJSON[i].url = decodeURIComponent(window.location.search.split("=")[1]).replace("\"","","gi");
	465	}
459	466	}
460	467	$.post(config.indexer+'/submit', JSON.stringify(myJSON),function(){
461	468	$.post(config.postTweetUrl, {"data":JSON.stringify(myJSON)}, function(data) {


	1		<!DOCTYPE html>
	2		<html>
	3		<head>
	4		<title>Lepakshi Mural - JSON editor</title>
	5		<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
	6		<meta charset="utf-8" />
	7		<style>
	8		textarea {
	9		width: 500px;
	10		}
	11		</style>
	12		</head>
	13		<body>
	14		<p></p><br>
	15		<div class="container">
	16		<h3> JSON Editor </h3>
	17		<div id="json-saved" class="alert alert-success" style="display: none; width: 300px; margin: auto;">
	18		<button type="button" class="close" data-dismiss="alert">×</button>
	19		<b>Success!</b> JSON saved. See <a href="/history">here</a>
	20		</div>
	21		<div id="json-error" class="alert alert-error" style="display: none; width: 300px; margin: auto;">
	22		<button type="button" class="close" data-dismiss="alert">×</button>
	23		<b>Invalid JSON!</b> Verify at <a href="http://jsonlint.com">jsonlint.com</a>
	24		</div>
	25		<textarea id="json" rows="30">
	26		{{ json }}
	27		</textarea>
	28		Enter JSON filename
	29		<input type="text" id="filename" placeholder="newname.json">
	30		<button class="btn" onclick="save();"> Save </button>
	31		</div>
	32		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	33		<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
	34		<script type="text/javascript" src="static/bootstrap.js"></script>
	35		<script>
	36		function save() {
	37		var json = $('#json').val();
	38		var filename = $('#filename').val();
	39		if(!filename.match(/.json$/)) {
	40		filename += '.json';
	41		}
	42		try {
	43		json = JSON.parse(json);
	44		$.post('/saveJSON', {"json": JSON.stringify(json), "filename": filename}, function(data) {
	45		console.log(data);
	46		$('#json-saved').show();
	47		}, 'json');
	48		} catch(e) {
	49		$('#json-error').show();
	50		}
	51		}
	52		</script>
	53		</body>
	54		</html>


	1		<!DOCTYPE html>
	2		<html>
	3		<head>
	4		<title>Lepakshi Mural - JSON history</title>
	5		<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
	6		<meta charset="utf-8" />
	7		</head>
	8		<body>
	9		<div class="container">
	10		<h3> JSON history </h3>
	11		<ul>
	12		{% for file in ls %}
	13		<li><a href=" {{ url_for('editor') }}?{{ file }}">{{ file }}</a></li>
	14		{% endfor %}
	15		</ul>
	16		</div>
	17		</body>
	18		</html>


1	1	<!DOCTYPE html>
2	2	<html>
3		<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	3	<meta charset="utf-8">
	4	<head>
6	5	<script type="text/javascript">
7	6	function annotationTree() {
8	7	$('#annotation-tree').modal();
…	…
10	10	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
11	11	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
12	12	<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
13		<!-- <script type="text/javascript" src="static/tree.js"></script> -->
	13	<script type="text/javascript" src="static/jit.js"></script>
	14	<script type="text/javascript" src="static/tree.js"></script>
14	15	<style type='text/css'>
15	16	/*#annotation-tree {
16	17	position:fixed;
…	…
24	24	z-index:99999;
25	25	}*/
26	26	</style>
27		<title>Lepakshi Mural</title>
	27	<title>Flask Lepakshi Mural</title>
28	28	<meta http-equiv='imagetoolbar' content='no'/>
29	29	<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link>
30	30	<!--link rel="stylesheet" type="text/css" href="./tree.css"></link-->
…	…
36	36	#map {border: 1px solid #888;}
37	37	</style>
38	38	<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
39		<script type="text/javascript" src="static/bootstrap.js"></script>
40		<script type="text/javascript" src="static/jit.js"></script>
41		<script type="text/javascript" src="static/tree.js"></script>
42	39	<script type="text/javascript" src="static/myVector.js"></script>
	40	<script type="text/javascript" src="static/bootstrap.js"></script>
43	41	<script type="text/javascript">
44	42	function treeClose() {
45	43	$('#annotation-tree').modal('hide');
…	…
48	48	}
49	49	</script>
50	50	</head>
51		<body onload="init();">
	51	{% if url %}
	52	<body onload='init({{ url\|string\|safe }});'>
	53	{% else %}
	54	<body onload="init();">
	55	{% endif %}
52	56	<!--div id="header"><h1>Lepakshi Mural</h1></div-->
53	57	<div class="fluid-container">
54	58
…	…
88	88	<button type="button" class="close" data-dismiss="alert">×</button>
89	89	<b>Success!</b> Post successfully posted.
90	90	</div>
91		<div id="tree-json-loaded" class="alert alert-success" style="display: none; width: 300px; margin: auto;">
92		<button type="button" class="close" data-dismiss="alert">×</button>
93		<b>Success!</b> New JSON loaded.
94		</div>
95	91
96	92	<div class="btn-group">
97	93	<button onclick="handler.trigger();" class="btn btn-small">Mural</button>
98	94	<button onclick="handler.trigger1();" class="btn btn-small"> Face</button>
99	95	<button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button>
100	96	</div>
101
102	97	<p></p>
103
104		<input type="text" id="tree-json-file" value="old.json">
105		<button class="btn" id="load-tree-json" onclick="loadTreeJSON();">Load JSON</button>
106		<button class="btn" id="edit-tree-json" onclick="editTreeJSON();">Edit JSON</button>
107		<p></p>
108	98	<div id="map"></div>
109
110	99	<div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a><a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright © 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> & <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
111	100	<!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU -->
112	101	</div>
113	102
114		<div class="edit-json">
115		<button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON to tweet</button>
116		<textarea rows="20" cols="50" id="edit-json" style="display: none;"></textarea>
117		<button class="btn" id="save-json" style="display: none;" onclick="saveJSON();">Save</button>
118		</div>
119
120	103	</div>
121	104
122	105	<script type="text/javascript" >resize();</script>
…	…
113	113	</div>
114	114	</div>
115	115	<div class="modal-body">
116		<div id="infovis"> </div>
117		<div id="tree-info" class="well text-info">
118		<ul></ul>
	116	<div id="infovis">
	117	<div class="well text-info">
	118	<ul>
	119	<li><b>Character:</b> <span id="character-value"></span></li>
	120	<li>
	121	<b>Ornament:</b>
	122	<ul>
	123	<li><b>Material:</b> <span id="material-value"></span></li>
	124	<li><b>Jewellery:</b> <span id="jewellery-value"></span></li>
	125	</ul>
	126	</li>
	127	</ul>
	128	</div>
119	129	</div>
120	130	</div>
121	131	<div class="modal-footer">
…	…
133	133	<button class="btn btn-primary" onclick="treeClose();">Save changes</button>
134	134	</div>
135	135	</div>
136
137		<script type="text/template" id="tree-info-template">
138		<li><b><%= band %></b>: <span id="<%= node %>-value"><%= node %></span></li>
139		</script>
140
141		<script type="text/javascript">
142		function annotationTree() {
143		$('#annotation-tree').modal();
144		$('#edit-json').hide();
145		$('#edit-json-btn').show();
146		}
147		function editJSON() {
148		$('#edit-json').show();
149		$('#save-json').show();
150		$('#edit-json-btn').hide();
151		$('#edit-json').val(JSON.stringify(myJSON));
152		}
153		function saveJSON() {
154		$('#edit-json').hide();
155		$('#save-json').hide();
156		$('#edit-json-btn').show();
157		try {
158		myJSON = JSON.parse($('#edit-json').val());
159		} catch(e) {
160		alert('The JSON you entered is invalid. Please try again');
161		myJSON = [];
162		}
163		}
164		function treeClose() {
165		$('#annotation-tree').modal('hide');
166		$('#tree-info ul li').each(function(idx, elem) {
167		var key = $(elem).find('b').text().toLowerCase();
168		var val = $(elem).find('span').text().toLowerCase();
169		attribs[key] = val;
170		});
171		myJSON.push(attribs);
172		$("#publish").attr("disabled", false);
173		}
174		function loadTreeJSON() {
175		var file = $('#tree-json-file').val();
176		$.getJSON('static/'+file, function(json) {
177		ht.loadJSON(json);
178		ht.refresh();
179		ht.controller.onComplete();
180		$('#tree-json-loaded').show();
181		});
182		}
183		function editTreeJSON() {
184		var json = $('#tree-json-loaded').val();
185		window.open("{{ url_for('editor') }}?json="+json);
186		}
187		</script>
188	136	</body>
189	137	</html>

Commit d6119719590359a48c796beb2d3b4dde40538e16

Gitorious