Commit 51c08e40 authored by Porter Libby's avatar Porter Libby
Browse files
parents 71eb7e6a 65c7fcc1
......@@ -13,7 +13,6 @@ Contributors: Porter Libby
[ Live Demo Version ](http://cluster.earlham.edu:9900/)
[ Mobile Front-end ](https://github.com/probably-not-porter/datavis-mobile)
......
......@@ -13,7 +13,7 @@
}
#data{
margin-top: 120px;
margin-top: 100px;
text-align: center;
padding-bottom: 100px;
}
......
......@@ -38,9 +38,9 @@ html, body, #viewDiv{
margin-top: 0px;
border-radius: 10px;
border: 1px solid var(--theme2);
-webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
-moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.35);
-webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
-moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.15);
}
.nav-view-button:hover{
background-color: var(--theme3);
......
@media only screen and (max-width: 600px) {
#navcontrols{
top:2px;
}
.nav-view-button{
vertical-align: top;
}
#title{
font-size: 15px;
}
}
\ No newline at end of file
......@@ -251,26 +251,27 @@ function getReadings(spot_id){
url: '/readings',
data: {spotid: spot_id, sectorid: query_selection[2], siteid: query_selection[1], tripid: query_selection[0]},
success: function(response) {
var streamings = [];
var readings = [];
for(x = 0; x < response.length; x++){
streamings.push(response[x]);
readings.push(response[x]);
}
console.info('DATA - STREAMINGS');
console.info('Loaded ' + streamings.length + " points.");
console.info('DATA - readings');
console.info('Loaded ' + readings.length + " points.");
var color = getRandomColor();
query_data = streamings;
query_data = readings;
createReading(streamings,'test',color);
createPoints([readings[0]], color);
createGraphReading(readings, query_selection, color);
var dataview = document.getElementById("dataView")
dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
dataview.querySelector("#nav-button-map").classList.add("new_data_button");
document.getElementById('reading').innerHTML = "";
document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
document.getElementById('data-prompt').innerHTML = "Loaded "+readings.length+" points to the graph and map!";
document.getElementById("button_permalink").disabled = false;
document.getElementById("button_csv").disabled = false;
......@@ -364,18 +365,28 @@ function getStreamings(date){
var color = getRandomColor();
query_data = streamings;
createGraph(streamings,date,color);
createPoints(streamings,color);
if (streamings.length != 0){
createGraphStreaming(streamings,date,color);
createPoints(streamings,color);
var dataview = document.getElementById("dataView")
dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
dataview.querySelector("#nav-button-map").classList.add("new_data_button");
var dataview = document.getElementById("dataView")
dataview.querySelector("#nav-button-graph").classList.add("new_data_button");
dataview.querySelector("#nav-button-map").classList.add("new_data_button");
document.getElementById('streaming').innerHTML = "";
document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
document.getElementById('streaming').innerHTML = "";
document.getElementById('data-prompt').innerHTML = "Loaded "+streamings.length+" points to the graph and map!";
document.getElementById("button_permalink").disabled = false;
document.getElementById("button_csv").disabled = false;
document.getElementById("button_permalink").disabled = false;
document.getElementById("button_csv").disabled = false;
}
else{
console.error('ERR: empty set');
document.getElementById('streaming').innerHTML = "";
document.getElementById('data-prompt').innerHTML = "Selected set contains no valid points";
}
},
error: function(xhr, status, err) {
console.log(xhr.responseText);
......@@ -492,14 +503,6 @@ function renderStreamingsDates(dates){
togglediv('#streamingsplatforms-ls','streamingsplatforms-button');
}
}
function createReading(data,title,color){
createPoints([data[0]], color);
for(x=0;x<data.length;x++){
console.log(data[x]);
}
}
/*
Other
......
......@@ -24,7 +24,54 @@ $( document ).ready(function() {
}
});
});
function createGraph(dataset, title,color){
function createGraphReading(dataset, q_arr, color){
//reset containers
document.getElementById('readingStats').style.display = 'block';
document.getElementById('line-chart').style.display = 'none';
//prepare active container
var parent = document.getElementById('readingStats');
parent.innerHTML = "";
// create title
var trip = q_arr[0];
var site = q_arr[1];
var sector = q_arr[2];
var spot = q_arr[3];
var title = document.createElement('h');
title.innerHTML = "Trip " + trip + ", Site " + site + ", Sector " + sector + ", Spot " + spot;
parent.append(title);
//fill with content
var textElem = document.createElement('p');
textElem.innerHTML = "Latitude: " + dataset[x].latitude;
parent.append(textElem);
var textElem = document.createElement('p');
textElem.innerHTML = "Longitude: " + dataset[x].longitude;
parent.append(textElem);
var textElem = document.createElement('p');
textElem.innerHTML = "Elevation: " + dataset[x].elevation;
parent.append(textElem);
var textElem = document.createElement('p');
textElem.innerHTML = "Accuracy: " + dataset[x].accuracy;
parent.append(textElem);
for (x=0;x<dataset.length;x++){
var textElem = document.createElement('p');
textElem.innerHTML = dataset[x].sensorid + ": " + dataset[x].value;
parent.append(textElem);
}
}
function createGraphStreaming(dataset, title,color){
// reset some containers
document.getElementById('line-chart').style.display = 'block';
document.getElementById('readingStats').style.display = 'none';
title = ''
times_arr = []; // x axis ticks (timestamps)
data = [[]]; // this array will each set of data (split by sensor)
......@@ -70,6 +117,7 @@ function addData(chart,times,data,types,color,title) {
if (chart){
chart.destroy(); // clear old information so it doesnt overflow
}
chart = new Chart(document.getElementById("line-chart"), { // create new chart structure for streaming data
type: 'scatter',
data: {},
......
......@@ -35,7 +35,7 @@ require(["esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/Graphic
center: [-13.68, 65.29],
container: "viewDiv",
map: map,
zoom: 11
zoom: 15
});
var basemapToggle = new BasemapToggle({
viewModel: { // autocasts as new BasemapToggleViewModel()
......
......@@ -43,65 +43,54 @@ function switchToData(){
setTimeout(function(){ document.getElementById("loading").style.display = "none"; }, 10);}
// TEAMPLATES FOR DOM PIECES
function createRadioElementTrips( mode, name, checked, label, id ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getSites(' + id + ')" type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label + "</strong><span class='detailed_info'> (ID: " + id +')</span></label></div>';
return radioHtml;
}
function createRadioElementSites( mode, name, checked, label, siteid ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getSectors('+ siteid + ')" type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
// generalized formula
function createRadioElement(name, id, label, f){
console.log(name,id,label);
var radioHtml = '<div class="elem-div elem-0">'
if (typeof id === 'string' || id instanceof String){
radioHtml += '<input class="data-radio form-radio" onchange="'+ f +'(';
radioHtml += "'" + id + "'";
radioHtml +=')" type="radio" name="' + name + '" id="' + label + '" />';
}else{
radioHtml += '<input class="data-radio form-radio" onchange="'+ f +'(' + id + ')" type="radio" name="' + name + '" id="' + label + '" />';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + siteid +')</span></label></div>';
radioHtml += '<label for="' + label + '">';
radioHtml += '<strong>'+ label + "</strong>";
radioHtml += '<span class="detailed_info"> (ID: ' + id +')</span>';
radioHtml += '</label></div>';
return radioHtml;
}
function createRadioElementSectors( mode, name, checked, label,sectorid ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" '
// switch for streaming
if (query_type == 1){
radioHtml += 'onchange="getStreamingsPlatforms('+ sectorid + ')"';
}else{
radioHtml += 'onchange="getSpots('+ sectorid + ')"';
}
radioHtml += ' type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>'+ label +"</strong><span class='detailed_info'> (ID: " + sectorid +')</span></label></div>';
return radioHtml;
// take information from data.js and write it into html
function createRadioElementTrips( mode, name, checked, label, id ) {
var f = "getSites";
return createRadioElement(name, id, label, f);
}
function createRadioElementSpots( mode, name, checked, label,spotid ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getReadings('+ spotid + ')" type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>Spot #'+ label +'</strong></label></div>';
return radioHtml;
function createRadioElementSites( mode, name, checked, label, id ) {
var f = "getSectors";
return createRadioElement(name, id, label, f);
}
function createRadioElementStreamingsPlatforms( mode, name, checked, id,name ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getStreamingsDates('+ "'" +id.toString()+ "'" +')"type="radio" name="' + 'streamingplatforms' + '" id="' + name + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
// this one is different since it changes for reading and streaming
function createRadioElementSectors( mode, name, checked, label, id ) {
var f = "getSpots"; // if reading
if (query_type == 1){ // if streaming
f = "getStreamingsPlatforms";
}
radioHtml += '/>';
radioHtml += '<label for="' + name + '"><strong>'+ name + "</strong><span class='detailed_info'> (ID: " + id + ")" +'</span></label></div>';
return createRadioElement(name, id, label, f);
}
function createRadioElementSpots( mode, name, checked, label,id ) {
var f = "getReadings";
return createRadioElement(name, id, label, f);
return radioHtml;
}
function createRadioElementStreamingsPlatforms( mode, name, checked, id, label ) {
var f = "getStreamingsDates";
return createRadioElement(name, id, label, f);
}
// this one doesnt use the general formula.
function createRadioElementStreamingsDates( mode, name, checked, date ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onchange="getStreamings('+ "'" + date + "'" +')"type="radio" name="' + name + '" id="' + date + '"';
if ( checked ) {
......@@ -113,22 +102,12 @@ function createRadioElementStreamingsDates( mode, name, checked, date ) {
return radioHtml;
}
function createRadioElementStreamings( mode, name, checked, label ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onclick="displayStreamings(' + "'" + label + "'" + ')" type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>Set '+ label +'</strong></label></div>';
return radioHtml;
var f = "displayStreamings";
return createRadioElement(name, name, label, f);
}
function createRadioElementReadings( mode, name, checked, label ) {
var radioHtml = '<div class="elem-div elem-' + mode + '"><input class="data-radio form-radio" onclick="displayReadings(' + "'" + label + "'" + ')" type="radio" name="' + name + '" id="' + label + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
radioHtml += '<label for="' + label + '"><strong>Set '+ label +'</strong></label></div>';
return radioHtml;
var f = "displayReadings";
return createRadioElement(name, label, label, f);
}
function getRandomColor() {
......
......@@ -20,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="css/graph.css" />
<link rel="stylesheet" type="text/css" href="css/data.css" />
<link rel="stylesheet" type="text/css" href="css/map.css" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
</head>
<body>
<div id='loading'>
......@@ -67,6 +68,7 @@
<div id='graphView'>
<div id='graph'>
<canvas id="line-chart"></canvas>
<div id='readingStats' style='position:absolute;z-index: 10;width: 100%; height: 100%;'></div>
</div>
<div id='navcontrols'>
<div class='tooltip2'>
......@@ -107,8 +109,7 @@
<div id='dataView'>
<div id='title'>
<span style='font-size:30px;'>IFS Datavis Tool</span><br>
<span style='font-size:15px;'>Additional Info</span>
<span style='font-size:20px;'>IFS Datavis Tool</span><br>
</div>
<div id='data'>
<div class='data-catagory' id='query_type'>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment