| 1 |
<!DOCTYPE html> |
| 2 |
<html> |
| 3 |
<meta charset="utf-8"> |
| 4 |
<head> |
| 5 |
<script type="text/javascript"> |
| 6 |
function annotationTree() { |
| 7 |
$('#annotation-tree').modal(); |
| 8 |
} |
| 9 |
</script> |
| 10 |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> |
| 11 |
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script> |
| 12 |
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script> |
| 13 |
<script type="text/javascript" src="static/tree.js"></script> |
| 14 |
<style type='text/css'> |
| 15 |
/*#annotation-tree { |
| 16 |
position:fixed; |
| 17 |
top:0px; |
| 18 |
left:0px; |
| 19 |
width:100%; |
| 20 |
height:100%; |
| 21 |
background-color:rgba(0, 0, 0, 0.5); |
| 22 |
display:none; |
| 23 |
z-index:99999; |
| 24 |
}*/ |
| 25 |
</style> |
| 26 |
<title>Lepakshi Mural</title> |
| 27 |
<meta http-equiv='imagetoolbar' content='no'/> |
| 28 |
<link rel="stylesheet" type="text/css" href="static/bootstrap.css"></link> |
| 29 |
<!--link rel="stylesheet" type="text/css" href="./tree.css"></link--> |
| 30 |
<style type="text/css"> v\:* {behavior:url(#default#VML);} |
| 31 |
label { display: inline;} |
| 32 |
h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; } |
| 33 |
#header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; } |
| 34 |
#subheader { height: 12px; text-align: right; font-size: 10px; color: #555;} |
| 35 |
#map {border: 1px solid #888;} |
| 36 |
</style> |
| 37 |
<script src="http://www.openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script> |
| 38 |
<script type="text/javascript" src="static/myVector.js"></script> |
| 39 |
<script type="text/javascript" src="static/bootstrap.js"></script> |
| 40 |
<script type="text/javascript"> |
| 41 |
function treeClose() { |
| 42 |
$('#annotation-tree').modal('hide'); |
| 43 |
attribs["character"] = $("#character-value").text(); |
| 44 |
attribs["material"] = $("#material-value").text(); |
| 45 |
myJSON.push(attribs); |
| 46 |
$("#publish").attr("disabled", false); |
| 47 |
} |
| 48 |
</script> |
| 49 |
</head> |
| 50 |
<body onload="init();"> |
| 51 |
<!--div id="header"><h1>Lepakshi Mural</h1></div--> |
| 52 |
<div class="fluid-container"> |
| 53 |
|
| 54 |
<div class="navbar"> |
| 55 |
<div class="navbar-inner"> |
| 56 |
<a class="brand" href="#">Lepakshi Mural</a> |
| 57 |
<ul class="nav"> |
| 58 |
<li class="active"><a href="#">Home</a></li> |
| 59 |
<li><a></a></li> |
| 60 |
<li><a href="#" class="disabled"> |
| 61 |
<label><input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);"> Pan</label> |
| 62 |
<!--label for="allowPanCheckbox"><small>allow pan while drawing</small></label--> |
| 63 |
</a></li> |
| 64 |
<li> |
| 65 |
<!--label><input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked"> Navigate</label--> |
| 66 |
<!--label><input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);"> Tag</label--> |
| 67 |
<!--label for="noneToggle">navigate</label--> |
| 68 |
<span class="btn-group" data-toggle="buttons-radio"> |
| 69 |
<button class="btn active" value="none" id="control-select" onclick="toggleControl(this);" checked="checked">Navigate</button> |
| 70 |
<button class="btn" value="box" id="control-box" onclick="toggleControl(this);">Tag</button> |
| 71 |
</span> |
| 72 |
</li> |
| 73 |
<li><a></a></li> |
| 74 |
<li><a></a></li> |
| 75 |
<li><button class="btn" onClick="publish();" id="publish" disabled="true"/>Publish</button></li> |
| 76 |
</ul> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
|
| 80 |
<div id="notification"> |
| 81 |
</div> |
| 82 |
<div id="posted" class="alert alert-success" style="display: none; width: 300px; margin: auto;"> |
| 83 |
<button type="button" class="close" data-dismiss="alert">×</button> |
| 84 |
<b>Success!</b> Post successfully posted. |
| 85 |
</div> |
| 86 |
<div id="tree-json-loaded" class="alert alert-success" style="display: none; width: 300px; margin: auto;"> |
| 87 |
<button type="button" class="close" data-dismiss="alert">×</button> |
| 88 |
<b>Success!</b> New JSON loaded. |
| 89 |
</div> |
| 90 |
|
| 91 |
<div class="btn-group"> |
| 92 |
<button onclick="handler.trigger();" class="btn btn-small">Mural</button> |
| 93 |
<button onclick="handler.trigger1();" class="btn btn-small"> Face</button> |
| 94 |
<button onclick="handler.trigger2();" class="btn btn-small">Jewellery</button> |
| 95 |
</div> |
| 96 |
|
| 97 |
<p></p> |
| 98 |
|
| 99 |
<input type="text" id="tree-json-file" value="old.json"> |
| 100 |
<button class="btn" id="load-tree-json" onclick="loadTreeJSON();">Load JSON</button> |
| 101 |
<button class="btn" id="edit-tree-json" onclick="editTreeJSON();">Edit JSON</button> |
| 102 |
<p></p> |
| 103 |
<div id="map"></div> |
| 104 |
|
| 105 |
<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> |
| 106 |
<!-- PLEASE, LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. THANK YOU --> |
| 107 |
</div> |
| 108 |
|
| 109 |
<div class="edit-json"> |
| 110 |
<button id="edit-json-btn" class="btn" onclick="editJSON();">Edit JSON to tweet</button> |
| 111 |
<textarea rows="20" cols="50" id="edit-json" style="display: none;"></textarea> |
| 112 |
<button class="btn" id="save-json" style="display: none;" onclick="saveJSON();">Save</button> |
| 113 |
</div> |
| 114 |
|
| 115 |
</div> |
| 116 |
|
| 117 |
<script type="text/javascript" >resize();</script> |
| 118 |
|
| 119 |
<div id="annotation-tree" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
| 120 |
<div class="modal-header"> |
| 121 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
| 122 |
<div id="myModalLabel"> |
| 123 |
<h3>Annotation attributes</h3> |
| 124 |
<small>Select attributes for annotation</small> |
| 125 |
</div> |
| 126 |
</div> |
| 127 |
<div class="modal-body"> |
| 128 |
<div id="infovis"> </div> |
| 129 |
<div id="tree-info" class="well text-info"> |
| 130 |
<ul></ul> |
| 131 |
</div> |
| 132 |
</div> |
| 133 |
<div class="modal-footer"> |
| 134 |
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> |
| 135 |
<button class="btn btn-primary" onclick="treeClose();">Save changes</button> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
|
| 139 |
<script type="text/template" id="tree-info-template"> |
| 140 |
<li><b><%= band %></b>: <span id="<%= node %>-value"><%= node %></span></li> |
| 141 |
</script> |
| 142 |
|
| 143 |
<script type="text/javascript"> |
| 144 |
function annotationTree() { |
| 145 |
$('#annotation-tree').modal(); |
| 146 |
$('#edit-json').hide(); |
| 147 |
$('#edit-json-btn').show(); |
| 148 |
} |
| 149 |
function editJSON() { |
| 150 |
$('#edit-json').show(); |
| 151 |
$('#save-json').show(); |
| 152 |
$('#edit-json-btn').hide(); |
| 153 |
$('#edit-json').val(JSON.stringify(myJSON)); |
| 154 |
} |
| 155 |
function saveJSON() { |
| 156 |
$('#edit-json').hide(); |
| 157 |
$('#save-json').hide(); |
| 158 |
$('#edit-json-btn').show(); |
| 159 |
try { |
| 160 |
myJSON = JSON.parse($('#edit-json').val()); |
| 161 |
} catch(e) { |
| 162 |
alert('The JSON you entered is invalid. Please try again'); |
| 163 |
myJSON = []; |
| 164 |
} |
| 165 |
} |
| 166 |
function treeClose() { |
| 167 |
$('#annotation-tree').modal('hide'); |
| 168 |
$('#tree-info ul li').each(function(idx, elem) { |
| 169 |
var key = $(elem).find('b').text().toLowerCase(); |
| 170 |
var val = $(elem).find('span').text().toLowerCase(); |
| 171 |
attribs[key] = val; |
| 172 |
}); |
| 173 |
myJSON.push(attribs); |
| 174 |
$("#publish").attr("disabled", false); |
| 175 |
} |
| 176 |
function loadTreeJSON() { |
| 177 |
var file = $('#tree-json-file').val(); |
| 178 |
$.getJSON('static/'+file, function(json) { |
| 179 |
ht.loadJSON(json); |
| 180 |
ht.refresh(); |
| 181 |
ht.controller.onComplete(); |
| 182 |
$('#tree-json-loaded').show(); |
| 183 |
}); |
| 184 |
} |
| 185 |
function editTreeJSON() { |
| 186 |
var json = $('#tree-json-loaded').val(); |
| 187 |
window.open('/editor?json='+json); |
| 188 |
} |
| 189 |
</script> |
| 190 |
<script type="text/javascript" src="static/jit.js"></script> |
| 191 |
</body> |
| 192 |
</html> |
