From 265ce2812a446606566c2886864e916fb460a5d7 Mon Sep 17 00:00:00 2001 From: Anon Ray Date: Fri, 8 Feb 2013 07:20:39 +0530 Subject: [PATCH] JSON editor and history for demo Implemented a JSON editor, saving it and displaying the list of JSON files. The saving doesn't work right now. --- fetch.py | 41 +++++++++ static/jit.js | 65 ++++++++------ static/old.json | 235 ++++++++++++++++++++++++++++++++++++++++++++++++ static/test.json | 6 +- static/tree.js | 235 +++--------------------------------------------- templates/editor.html | 56 ++++++++++++ templates/history.html | 18 ++++ templates/index.html | 72 +++++++-------- 8 files changed, 442 insertions(+), 286 deletions(-) create mode 100644 static/old.json create mode 100644 templates/editor.html create mode 100644 templates/history.html diff --git a/fetch.py b/fetch.py index ceeabd4..8f19cb5 100644 --- a/fetch.py +++ b/fetch.py @@ -1,8 +1,11 @@ from flask import Flask from flask import request from flask import render_template +from flask import make_response import json import pymongo +import os +import glob app = Flask(__name__) @@ -13,6 +16,44 @@ def index(): else: return render_template('index.html') +@app.route('/editor', methods=['GET']) +def editor(): + if request.args.has_key('json'): + filename = request.args['json'] + else: + filename = 'test.json' + filename = os.path.join('static', filename) + try: + f = open(filename, 'r') + except: + f = open('static/test.json', 'r') + buf = f.read() + f.close() + return render_template('editor.html', json = buf) + +@app.route('/saveJSON', methods=['POST']) +def saveJSON(): + if request.form: + data = request.form + JSON = data['json'] + filename = os.path.join('static', data['filename']) + f = open(filename, 'w') + f.write(JSON) + f.close() + return (data, 200) + else: + return (json.dumps(request.form), 200) # Bad Request + +@app.route('/history', methods=['GET']) +def listJSON(): + path = os.path.join('static', '*.json') + ls = glob.glob(path) + def sanitize(i): + return i.split('/')[-1] + ls = map(sanitize, ls) + return render_template('history.html', ls=ls) + + if __name__ == "__main__": app.run(debug=True, host='0.0.0.0') diff --git a/static/jit.js b/static/jit.js index 260c540..6c2473b 100644 --- a/static/jit.js +++ b/static/jit.js @@ -6764,35 +6764,44 @@ THE SOFTWARE. } this.plot() }, - reposition:function(){ - this.compute("end"); - var w=this.graph.getNode(this.root).pos.getc().scale(-1); - e.Util.moebiusTransformation(this.graph,[w],["end"],"end","ignore"); - this.graph.eachNode(function(x){ - if(x.ignore){ - x.endPos.rho=x.pos.rho; - x.endPos.theta=x.pos.theta - } - }) - }, - plot:function(){ - this.fx.plot() - }, - onClick:function(y,w){ -// Ajay - Visual target selection - if (this.graph.getNode(y)._angularWidth <= 0.5) { - if (this.graph.getNode(y).data.band == "Character") { - $("#character-value").html(this.graph.getNode(y).name); - } else if (this.graph.getNode(y).data.band == "Jewellery") { - $("#jewellery-value").html(this.graph.getNode(y).name); - } else if (this.graph.getNode(y).data.band == "Material") { - $("#material-value").html(this.graph.getNode(y).name); - } - } -// Ajay - end of visual target selection - var x=this.graph.getNode(y).pos.getc(true); - this.move(x,w) + reposition: function() { + this.compute("end"); + var w=this.graph.getNode(this.root).pos.getc().scale(-1); + e.Util.moebiusTransformation(this.graph,[w],["end"],"end","ignore"); + this.graph.eachNode(function(x) { + if(x.ignore){ + x.endPos.rho=x.pos.rho; + x.endPos.theta=x.pos.theta + } + }); }, + plot: function() { + this.fx.plot(); + }, + tree_info_template: _.template($('#tree-info-template').html()), + onClick: function(y, w) { + // Ajay - Visual target selection + /*if (this.graph.getNode(y)._angularWidth <= 0.5) { + if (this.graph.getNode(y).data.band == "Character") { + $("#character-value").html(this.graph.getNode(y).name); + } else if (this.graph.getNode(y).data.band == "Jewellery") { + $("#jewellery-value").html(this.graph.getNode(y).name); + } else if (this.graph.getNode(y).data.band == "Material") { + $("#material-value").html(this.graph.getNode(y).name); + } + }*/ + // Ajay - end of visual target selection + var node = this.graph.getNode(y); + var children = $jit.json.getSubtree(tree_json, node.id).children; + if(_.isEmpty(children)) { + $('#tree-info ul').append(this.tree_info_template({ + band: node.data.band, + node: node.name + })); + } + var x = node.pos.getc(true); + this.move(x, w); + }, move:function(A,y){ var x=r(A.x,A.y); if(this.busy===false&&x.norm()<0.9){ // Ajay - make it clickable upto the depth of tree DIRECTLY. Increase in value = deeper the length. diff --git a/static/old.json b/static/old.json new file mode 100644 index 0000000..e6488e1 --- /dev/null +++ b/static/old.json @@ -0,0 +1,235 @@ +{ + "id": "characteristics", + "name": "Characteristics", + "children": [ + { + "id": "character", + "name": "Character", + "data": { + "band": "Characteristics", + "relation": "coordinators.html" + }, + "children": [ + { + "id": "shiva", + "name": "Shiva", + "data": { + "band": "Character", + "relation": "individual_ranganathan.html" + }, + "children": [] + }, + { + "id": "parvathi", + "name": "Parvathi", + "data": { + "band": "Character", + "relation": "individual_sharat.html" + }, + "children": [] + }, + { + "id": "ganesha", + "name": "Ganesha", + "data": { + "band": "Character", + "relation": "individual_sharat.html" + }, + "children": [] + }, + { + "id": "bramha", + "name": "Bramha", + "data": { + "band": "Character", + "relation": "individual_sharat.html" + }, + "children": [] + }, + { + "id": "vishnu", + "name": "Vishnu", + "data": { + "band": "Character", + "relation": "individual_sharat.html" + }, + "children": [] + }, + { + "id": "krishna", + "name": "Krishna", + "data": { + "band": "Character", + "relation": "individual_muralimohan.html" + }, + "children": [] + }, + { + "id": "radha", + "name": "Radha", + "data": { + "band": "Character", + "relation": "individual_muralimohan.html" + }, + "children": [] + } + ] + }, + { + "id": "ornament", + "name": "Ornament", + "data": { + "band": "Characteristics", + "relation": "cultural.html" + }, + "children": [ + { + "id": "jewellery", + "name": "Jewellery", + "data": { + "band": "Ornament" + }, + "children": [ + { + "id": "ear-ring", + "name": "Ear-ring", + "data": { + "band": "Jewellery" + }, + "children": [] + }, + { + "id": "ring", + "name": "Ring", + "data": { + "band": "Jewellery" + }, + "children": [] + }, + { + "id": "nose-ring", + "name": "Nose-ring", + "data": { + "band": "Jewellery", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "pendent", + "name": "Pendent", + "data": { + "band": "Jewellery", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "ankelet", + "name": "Ankelet", + "data": { + "band": "Jewellery", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "bracelet", + "name": "Bracelet", + "data": { + "band": "Jewellery", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "bangles", + "name": "Bangles", + "data": { + "band": "Jewellery", + "relation": "project_murals.html" + }, + "children": [] + } + ] + }, + { + "id": "material", + "name": "Material", + "data": { + "band": "Ornament", + "relation": "project_knowledge.html" + }, + "children": [ + { + "id": "gold", + "name": "Gold", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "silver", + "name": "Silver", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "bronze", + "name": "Bronze", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "ruby", + "name": "Ruby", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "copper", + "name": "Copper", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "diamond", + "name": "Diamond", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + }, + { + "id": "topaz", + "name": "Topaz", + "data": { + "band": "Material", + "relation": "project_murals.html" + }, + "children": [] + } + ] + } + ] + } + ], + "data": { + "relation": "index.html" + } +} \ No newline at end of file diff --git a/static/test.json b/static/test.json index 5c526b8..3f62313 100644 --- a/static/test.json +++ b/static/test.json @@ -64,4 +64,8 @@ "children":[] } ]} - ]} + ], + "data": { + "relation": "index.html" + } +} diff --git a/static/tree.js b/static/tree.js index dbc974c..54a8778 100644 --- a/static/tree.js +++ b/static/tree.js @@ -1,4 +1,4 @@ -var labelType, useGradients, nativeTextSupport, animate, ht; +var labelType, useGradients, nativeTextSupport, animate, ht, tree_json; (function() { var ua = navigator.userAgent, @@ -13,224 +13,19 @@ var labelType, useGradients, nativeTextSupport, animate, ht; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); -})(); -function inits(){ - //init data - var json = { - "id": "characteristics", - "name": "Characteristics", - "children": [ - // Location - { - "id": "character", - "name": "Character", - "data": { - "band": "Characteristics", - "relation": "coordinators.html" - }, - "children": [{ - "id": "shiva", - "name": "Shiva", - "data": { - "band": "Character", - "relation": "individual_ranganathan.html" - }, - "children": [] + //load JSON data. + // FIXME: the url is hardcoded, maybe you have to change it + // if the file is a variable one + $.getJSON('static/old.json', function(json) { + console.log('json', json); + tree_json = json; + inits(); + }); - }, { - "id": "parvathi", - "name": "Parvathi", - "data": { - "band": "Character", - "relation": "individual_sharat.html" - }, - "children": [] - }, { - "id": "ganesha", - "name": "Ganesha", - "data": { - "band": "Character", - "relation": "individual_sharat.html" - }, - "children": [] - }, { - "id": "bramha", - "name": "Bramha", - "data": { - "band": "Character", - "relation": "individual_sharat.html" - }, - "children": [] - }, { - "id": "vishnu", - "name": "Vishnu", - "data": { - "band": "Character", - "relation": "individual_sharat.html" - }, - "children": [] - }, { - "id": "krishna", - "name": "Krishna", - "data": { - "band": "Character", - "relation": "individual_muralimohan.html" - }, - "children": [] - }, { - "id": "radha", - "name": "Radha", - "data": { - "band": "Character", - "relation": "individual_muralimohan.html" - }, - "children": [] - }] - }, - // Languages - { - "id": "ornament", - "name": "Ornament", - "data": { - "band": "Characteristics", - "relation": "cultural.html" - }, - "children": [{ - "id": "jewellery", - "name": "Jewellery", - "data": { - "band": "Ornament" - // "relation": "project_murals.html" - }, - "children": [{ - "id": "ear-ring", - "name": "Ear-ring", - "data": { - "band": "Jewellery" - // "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "ring", - "name": "Ring", - "data": { - "band": "Jewellery" - // "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "nose-ring", - "name": "Nose-ring", - "data": { - "band": "Jewellery", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "pendent", - "name": "Pendent", - "data": { - "band": "Jewellery", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "ankelet", - "name": "Ankelet", - "data": { - "band": "Jewellery", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "bracelet", - "name": "Bracelet", - "data": { - "band": "Jewellery", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "bangles", - "name": "Bangles", - "data": { - "band": "Jewellery", - "relation": "project_murals.html" - }, - "children": [] - }] - }, { - "id": "material", - "name": "Material", - "data": { - "band": "Ornament", - "relation": "project_knowledge.html" - }, - "children": [{ - "id": "gold", - "name": "Gold", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "silver", - "name": "Silver", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "bronze", - "name": "Bronze", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "ruby", - "name": "Ruby", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "copper", - "name": "Copper", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "diamond", - "name": "Diamond", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - },{ - "id": "topaz", - "name": "Topaz", - "data": { - "band": "Material", - "relation": "project_murals.html" - }, - "children": [] - }] - }] - }], - "data": { - "relation": "index.html" - } - }; - //end +})(); + +function inits() { var infovis = document.getElementById('infovis'); var w = infovis.offsetWidth + 500; var h = infovis.offsetHeight + 385; @@ -305,13 +100,9 @@ function inits(){ style.left = (left - w / 2) + 'px'; }, }); - //load JSON data. - ht.loadJSON(json); + ht.loadJSON(tree_json); //compute positions and plot. ht.refresh(); //end ht.controller.onComplete(); } - -document.addEventListener("DOMContentLoaded", inits, false); - diff --git a/templates/editor.html b/templates/editor.html new file mode 100644 index 0000000..f81fd5d --- /dev/null +++ b/templates/editor.html @@ -0,0 +1,56 @@ + + + + Lepakshi Mural - JSON editor + + + + + +


+
+

JSON Editor

+ + + + Enter JSON filename + + +
+ + + + + + diff --git a/templates/history.html b/templates/history.html new file mode 100644 index 0000000..477cf4d --- /dev/null +++ b/templates/history.html @@ -0,0 +1,18 @@ + + + + Lepakshi Mural - JSON history + + + + +
+

JSON history

+ +
+ + diff --git a/templates/index.html b/templates/index.html index be64ab6..4e680af 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,7 +10,6 @@ - - Flask Lepakshi Mural + Lepakshi Mural @@ -84,6 +83,10 @@ Success! Post successfully posted. +
@@ -93,6 +96,10 @@

+ + + +

Generated by MapTilerGDAL2Tiles, Copyright © 2008 Klokan Petr Pridal, GDAL & OSGeo GSoC @@ -100,8 +107,8 @@
- - + +
@@ -118,19 +125,9 @@
-
-
-
    -
  • Character:
    • -
  • - Ornament: -
      -
    • Material:
      • -
    • Jewellery:
      • -
    -
    • -
-
+
+
+
    @@ -139,6 +136,10 @@
    + + - - {% if json %} - - {% endif %} - + -- 1.7.10.4