Commit 10b11592ab7fa534355c937aef89087b042d9c90

  • avatar
  • arvind
  • Wed Jul 10 17:17:45 IST 2013
UI changes
  Highlight the element in text annotation when the related xpath is clicked.
	Fixing keywords for search API for consistency with old data.
  • Diff rendering mode:
  • inline
  • side by side

server.py

90 del(i['_id'])90 del(i['_id'])
91 ret[y] = i91 ret[y] = i
92 y = y + 192 y = y + 1
93
94 return render_template('blank.html', content = ret)
93 return render_template('blank.html', content = ret, flag = request.args['flag'])
9594
9695
97@app.route('/submit', methods=['POST'])96@app.route('/submit', methods=['POST'])

static/config.js.sample

1var config = {
2 'indexer':'http://127.0.0.1:5000'
3}

static/myVector.js

62{62{
63 for(var i in ans.ans)63 for(var i in ans.ans)
64 {64 {
65 if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom'])
66 {
65 // if(feature.geometry.bounds['left'] == ans.ans[i]['left'] && feature.geometry.bounds['right'] == ans.ans[i]['right'] && feature.geometry.bounds['top'] == ans.ans[i]['top'] && feature.geometry.bounds['bottom'] == ans.ans[i]['bottom'])
66 // {
67 str = {};67 str = {};
68 if(ans.ans[i]['character'])68 if(ans.ans[i]['character'])
69 str['character'] = ans.ans[i]['character'];69 str['character'] = ans.ans[i]['character'];
……
72 str['material'] = ans.ans[i]['material'];72 str['material'] = ans.ans[i]['material'];
73 // str['jewellery'] = ans.ans[i]['jewellery']73 // str['jewellery'] = ans.ans[i]['jewellery']
74 }74 }
75
75 if(ans.ans[i]["how"])
76 {
76 z = new OpenLayers.Popup.FramedCloud(77 z = new OpenLayers.Popup.FramedCloud(
77 "test",78 "test",
78 feature.geometry.getBounds().getCenterLonLat(),79 feature.geometry.getBounds().getCenterLonLat(),
79 new OpenLayers.Size(640,480),80 new OpenLayers.Size(640,480),
80 '<iframe src='+config.indexer+"/search?data="+JSON.stringify({'nodes': ans.ans[i]["nodes"]})+" ></iframe>",null,true);
81 '<iframe src='+config.indexer+"/search?flag=0&data="+JSON.stringify({'nodes': ans.ans[i]["how"]})+" ></iframe>",null,true);
82 }
83 else
84 {
85 z = new OpenLayers.Popup.FramedCloud(
86 "test",
87 feature.geometry.getBounds().getCenterLonLat(),
88 new OpenLayers.Size(640,480),
89 '<iframe src='+config.indexer+"/search?flag=0&data="+JSON.stringify({'nodes': ans.ans[i]["nodes"]})+" ></iframe>",null,true);
90
91 }
92
81 feature.popup = z;93 feature.popup = z;
82 z.panMapIfOutOfView = true;94 z.panMapIfOutOfView = true;
83 map.addPopup(z);95 map.addPopup(z);
84 break;96 break;
85 }
86 else{
87 if(i == ans.count-1)
88 {
89 z = new OpenLayers.Popup.FramedCloud(
90 "test",
91 feature.geometry.getBounds().getCenterLonLat(),
92 new OpenLayers.Size(640,480),
93 '<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
94 feature.popup = z;
95 z.panMapIfOutOfView = true;
96 map.addPopup(z);
97 }
98 }
97 //}
98 //else{
99 // if(i == ans.count-1)
100 // {
101 // z = new OpenLayers.Popup.FramedCloud(
102 // "test",
103 // feature.geometry.getBounds().getCenterLonLat(),
104 // new OpenLayers.Size(640,480),
105 // '<iframe width="480" height="360" src="http://www.youtube.com/embed/WwNUnmZ_aww" frameborder="0" allowfullscreen></iframe>',null,true);
106 // feature.popup = z;
107 // z.panMapIfOutOfView = true;
108 // map.addPopup(z);
109 // }
110 //}
99 }111 }
100112
101}113}
……
196 $.get(config.indexer+"/fetch",{uri:"default"} , function(data){196 $.get(config.indexer+"/fetch",{uri:"default"} , function(data){
197 if (data != undefined)197 if (data != undefined)
198 {198 {
199 console.log(data);
199 ans.ans = data;200 ans.ans = data;
200 for(var i in ans.ans)201 for(var i in ans.ans)
201 {202 {
……
329}329}
330function makeBoxes(x)330function makeBoxes(x)
331{331{
332
332 if(x.left)
333 {
333 bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);334 bounds = new OpenLayers.Bounds(x['left'], x['bottom'], x['right'], x['top']);
334 box = new OpenLayers.Feature.Vector(bounds.toGeometry());335 box = new OpenLayers.Feature.Vector(bounds.toGeometry());
335 box3.addFeatures(box);336 box3.addFeatures(box);
336 addLabel(x['left'],x['top'],x['name']);337 addLabel(x['left'],x['top'],x['name']);
338 }
339 else if(x.where)
340 {
341 position = JSON.parse(x.where.split("#")[1]);
342 console.log(position);
343 bounds = new OpenLayers.Bounds(position[2], position[1], position[3], position[0]);
344 box = new OpenLayers.Feature.Vector(bounds.toGeometry());
345 box3.addFeatures(box);
346 addLabel(position[2],position[0],x['name']);
347
348 }
337}349}
338// function onmouse(data){350// function onmouse(data){
339// console.log(data);351// console.log(data);
……
496 myJSON = [];496 myJSON = [];
497 });497 });
498 });498 });
499}
500var config = {
501 'postTweetUrl':'http://demo.swtr.us/add',
502 'indexer':'http://folkhampi.openrun.net/mural-annotation'
503}499}

static/text-annotation.css

18 width: 500px;18 width: 500px;
19 margin: -250px 0 0 28%;19 margin: -250px 0 0 28%;
20}20}
21.highlight{
22background-color: rgba(255, 212, 0, 0.6);
23
24}

static/text-annotation.js

14 modal.id = 'modal-wrap';14 modal.id = 'modal-wrap';
15 document.body.appendChild(modal);15 document.body.appendChild(modal);
16 modal.innerHTML = modal_template();16 modal.innerHTML = modal_template();
17 $('#publish').click(function() {
17 $("#list-anno").on("hidden", function(){
18 $(".well a").off("click");
19 $(".highlight").removeClass("highlight");
20
21 })
22 $('#publish').click(function() {
18 sweet.publish();23 sweet.publish();
19 });24 });
20 };25 };
……
42 };42 };
43 window.listAnno = function() { // list annotations of current page43 window.listAnno = function() { // list annotations of current page
44 console.log('listing annotations');44 console.log('listing annotations');
45 $.get(config.indexer + '/search?data=' +
45
46 $.get(config.indexer + '/search?flag=1&data=' +
46 JSON.stringify({'where': window.location.search.split('url=')[1]}),47 JSON.stringify({'where': window.location.search.split('url=')[1]}),
47 function(data) {48 function(data) {
48 //console.log(data);49 //console.log(data);
……
51 $('#list-anno').modal({51 $('#list-anno').modal({
52 backdrop: false,52 backdrop: false,
53 });53 });
54 $('.well a').click(function(event){
55 xpath = $(event.currentTarget).text().split('#')[1];
56 var nodes = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE,null);
57 result = nodes.iterateNext();
58 while(result){
59 $(result).addClass("highlight");
60 result = nodes.iterateNext();
61 }
62 });
54 });63 });
55 };64 };
5665

templates/blank.html

1<!doctype html>
2<body>
3{% if flag == '1' %}
1{% for obj in content %}4{% for obj in content %}
2<div class="well">5<div class="well">
3{% for key in content[obj].keys() %}
4 <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
6 {% for key in content[obj].keys() %}
7 {% if key == "where" or key == "xpath" %}
8 <p><b>{{ key }}</b>:<a href="#"> {{ content[obj][key] }}</a></p>
9 {% else %}
10 <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
11 {% endif %}
12 {% endfor %}
13</div>
5{% endfor %}14{% endfor %}
15{% else %}
16{% for obj in content %}
17<div class="well">
18 {% for key in content[obj].keys() %}
19 <p><b>{{ key }}</b>: {{ content[obj][key] }}</p>
20 {% endfor %}
6</div>21</div>
7{% endfor %}22{% endfor %}
23{% endif %}
24</body>
25</html>

templates/index.html

14 <script type="text/javascript" src="static/tree.js"></script>14 <script type="text/javascript" src="static/tree.js"></script>
15 <script type="text/javascript" src="static/myVector.js"></script>15 <script type="text/javascript" src="static/myVector.js"></script>
16 <script type="text/javascript" src="static/bootstrap.js"></script>16 <script type="text/javascript" src="static/bootstrap.js"></script>
17 <script type="text/javascript" src="{{ url_for('static',filename='config.js') }}"></script>
17</head>18</head>
18{% if url %}19{% if url %}
19 <body onload='init({{ url|string|safe }});'>20 <body onload='init({{ url|string|safe }});'>