Docs, Legend, Refactoring
diff --git a/asterix-examples/src/main/resources/black-cherry/cherry.tpl b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
index 02016a5..7989dae 100755
--- a/asterix-examples/src/main/resources/black-cherry/cherry.tpl
+++ b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
@@ -10,6 +10,16 @@
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+ <!-- Bootstrap Javascript -->
+ <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
+
+ <script src="http://code.jquery.com/jquery.min.js"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
+ <script src="static/js/bootstrap.min.js"></script>
+ <script src="static/js/asterix-sdk-stable.js"></script>
+ <script src="static/js/rainbowvis.js"></script>
+ <script src="static/js/cherry.js"></script>
+
<style type="text/css">
#map_canvas img {
@@ -33,7 +43,6 @@
#keyword-textbox, #location-text-box {
width: 100%;
}
-
</style>
</head>
<body style="width: 100%; height: 100%;">
@@ -163,21 +172,28 @@
<div id="report-message"></div>
</div>
- <div class="col-md-7">
+ <div class="col-md-7"
<!-- Map Container -->
<div class="container well" id="right-col">
<div id="map_canvas" style="max-width: 100%; height: auto;"></div>
</div>
<!-- Legend Container -->
- <div id="rainbow-legend-container" class="container well">
- <div id="legend-min" class="col-md-1"></div>
- <div id="legend-gradient" class="col-md-6"></div>
- <div id="legend-max" class="col-md-2"></div>
- <div class="col-md-3">
- <button id="windows-off-btn" class="btn btn-default">
- Close Counts
- </button>
+ <div id="rainbow-legend-container" class="container well" style="display:none;">
+
+ <div class="row">
+ <div class="col-md-5 col-md-offset-2" style="text-align: center;"># Tweets</div>
+ </div>
+
+ <div class="row">
+ <div id="legend-min" class="col-md-2" style="text-align:right;"></div>
+ <div id="legend-gradient" class="col-md-5" style="text-align: center;"></div>
+ <div id="legend-max" class="col-md-2"></div>
+ <div class="col-md-3">
+ <button id="windows-off-btn" class="btn btn-default">
+ Close Counts
+ </button>
+ </div>
</div>
</div>
@@ -272,7 +288,7 @@
<!-- Tutorial Part 3: Search Results, Drilling Down, Saving Comments -->
<div style="margin-bottom: 2em; text-align: center;">
- <!--<img src="static/img/Tutorial3.png" style="max-width:100%;">-->
+ <img src="static/img/Tutorial3.png" style="max-width:100%;">
</div><hr/>
<!-- Tutorial Part 4: Review Mode -->
@@ -286,14 +302,5 @@
</div><!-- /About -->
</div><!-- container -->
-
- <!-- Bootstrap Javascript -->
- <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
- <script src="http://code.jquery.com/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
- <script src="static/js/bootstrap.min.js"></script>
- <script src="static/js/asterix-sdk-stable.js"></script>
- <script src="static/js/rainbowvis.js"></script>
- <script src="static/js/cherry.js"></script>
</body>
</html>
diff --git a/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png b/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png
new file mode 100644
index 0000000..4a207af
--- /dev/null
+++ b/asterix-examples/src/main/resources/black-cherry/static/img/Tutorial3.png
Binary files differ
diff --git a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
index 84fc8c9..81de2c2 100755
--- a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
+++ b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
@@ -531,6 +531,7 @@
var coordinates = [];
var weights = [];
var maxWeight = 0;
+ var minWeight = Number.MAX_VALUE;
// Parse resulting JSON objects. Here is an example record:
// { "cell": { rectangle: [{ point: [22.5, 64.5]}, { point: [24.5, 66.5]}]}, "count": { int64: 5 }}
@@ -552,10 +553,11 @@
}
maxWeight = Math.max(coordinate["weight"], maxWeight);
+ minWeight = Math.min(coordinate["weight"], minWeight);
coordinates.push(coordinate);
});
- triggerUIUpdate(coordinates, maxWeight);
+ triggerUIUpdate(coordinates, maxWeight, minWeight);
}
/**
@@ -563,7 +565,7 @@
* @param [Array] mapPlotData, an array of coordinate and weight objects
* @param [Array] plotWeights, a list of weights of the spatial cells - e.g., number of tweets
*/
-function triggerUIUpdate(mapPlotData, maxWeight) {
+function triggerUIUpdate(mapPlotData, maxWeight, minWeight) {
/** Clear anything currently on the map **/
mapWidgetClearMap();
@@ -610,7 +612,12 @@
});
// Add this marker to global marker cells
- map_cells.push(map_circle);
+ map_cells.push(map_circle);
+
+ // Show legend
+ $("#legend-min").html(minWeight);
+ $("#legend-max").html(maxWeight);
+ $("#rainbow-legend-container").show();
});
}
@@ -1142,6 +1149,8 @@
}
map_tweet_markers = [];
+ $("#rainbow-legend-container").hide();
+
$("#submit-button").attr("disabled", false);
}
@@ -1157,8 +1166,9 @@
// Fill in legend area with colors
var gradientColor;
- for (i = 0; i=100; i++) {
- $("#rainbow-legend-container").append("" + rainbow.colourAt(i));
+ for (i = 0; i<100; i++) {
+ //$("#rainbow-legend-container").append("" + rainbow.colourAt(i));
+ $("#legend-gradient").append('<div style="display:inline-block; max-width:2px; background-color:#' + rainbow.colourAt(i) +';"> </div>');
}
// Window clear button closes all info count windows
