Skip to content

Commit

Permalink
Changed specific visualizations and added nav bar to main page
Browse files Browse the repository at this point in the history 
Signed-off-by: Gustavo Olivares <[email protected]>
  • Loading branch information
@guolivar
guolivar committed Oct 3, 2016
1 parent a9b1e9a commit 414de3a
Show file tree
Hide file tree
Showing 16 changed files with 194 additions and 287 deletions.
9 changes: 5 additions & 4 deletions air1/pacman.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,11 +134,11 @@ def parse_line(self, line):
co2 = err_value #6
#PACMAN controlled activities
# Deactivate screensaver when something is close by (1.5m)
if (distance<150):
os.system("xscreensaver-command -deactivate &") #If something is close by... deactivate the screensaver
#if (distance<150):
#os.system("xscreensaver-command -deactivate &") #If something is close by... deactivate the screensaver
# Update the frame of data for scale
self.frameCO2 = [co2] + self.frameCO2[:-1]
self.frameDUST = [dust] + self.frameDUST[:-1]
self.frameDUST = [pm10] + self.frameDUST[:-1]
self.frameTEMP = [t1] + self.frameTEMP[:-1]
# Calculate the max/min for each stream only for valid data lines
if (pm10>0):
Expand All @@ -149,6 +149,7 @@ def parse_line(self, line):
self.maxTEMP = max(self.frameTEMP)
self.minTEMP = min(self.frameTEMP)
# C D E F G A B
#print(distance)
#print(co2)
# 0 1 2 3 4 5 6 7 8 9 10 11 12
print(pm1, dust, pm10, distance, t1, rh, co2, self.minCO2, self.maxCO2, self.minDUST, self.maxDUST, self.minTEMP, self.maxTEMP)
return (pm1, dust, pm10, distance, t1, rh, co2, self.minCO2, self.maxCO2, self.minDUST, self.maxDUST, self.minTEMP, self.maxTEMP)
Binary file added air1/static/images/RangitotoIsland1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added air1/static/images/Strawberry_ice_cream_cone.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified air1/static/images/cold.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified air1/static/images/hot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added air1/static/images/snail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 8 additions & 7 deletions air1/templates/bars.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,29 +18,29 @@
<ul>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>Humidity</h1>
<!-- <h1>Humidity</h1> -->
<div id="rh_widget" style="background-color: #0000ff"></div>
</div>
<div class="widget_bar">
<h1>Temperature</h1>
<!-- <h1>Temperature</h1> -->
<div id="temperature_widget" style="background-color: #ff0000"></div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>Dust</h1>
<!-- <h1>Dust</h1> -->
<div id="dust_widget" style="background-color: #008000"></div>
</div>
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>CO2</h1>
<!-- <h1>CO2</h1> -->
<div id="co2_widget" style="background-color: #800080"></div>
</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>Distance</h1>
<!-- <h1>Distance</h1> -->
<div id="distance_widget" style="background-color: #ffa500"></div>
</div>
</li>
Expand All @@ -60,7 +60,7 @@ <h1>Distance</h1>
// start gridster
$('.gridster ul').gridster({
widget_margins: [5, 5],
widget_base_dimensions: [400, 1000],
widget_base_dimensions: [340, 768],
max_cols: 4
});

Expand Down Expand Up @@ -128,14 +128,15 @@ <h1>Distance</h1>
} else if (key == 'pacman_data') {
setValue('distance', data[key][3]);
setValue('pm1', data[key][0]);
setValue('pm10', data[key][2]);
setValue('temperature_1', data[key][4]);
setValue('rh', data[key][5]);
setValue('dust', data[key][1]);
setValue('co2', data[key][6]);

setProgressBarHeight("rh_widget", data[key][5], 50, 100, '#0000ff');
setProgressBarHeight("temperature_widget", data[key][4], 5, 30, '#ff0000');
setProgressBarHeight("dust_widget", data[key][1], 0, 100, '#008000');
setProgressBarHeight("dust_widget", data[key][2], 0, 100, '#008000');
setProgressBarHeight("co2_widget", data[key][6], data[key][7],data[key][8], '#800080');
setProgressBarHeight("distance_widget", data[key][3], 0, 120, '#ffa500');

Expand Down
47 changes: 12 additions & 35 deletions air1/templates/co2_qual.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,10 @@
<link rel="stylesheet" href="{{ static_url("app.css") }}" type="text/css"/>
<script src="script_min.js"></script>
</head>
<body style="background-color: black; margin: 0;" onload="setTimeout('init();', 100);">
<center>
<div><img id="mjpeg_dest" /></div>
</center>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>CO2</h1>
<div id="co2_widget" style="background-color: #800080"></div>
</div>
</li>
</ul>
</div>
<body style="background-color: white; margin: 0;" onload="setTimeout('init();', 100);">
<center>
<div><img src="{{ static_url('images/co2.png') }}" id="co2_widget" /></div>
</center>
<audio id="audiosource">
<source type="audio/mp3" />
Your browser does not support the audio element.
Expand Down Expand Up @@ -83,20 +73,22 @@ <h1>CO2</h1>
});
};

var setProgressBarHeight = function(id, value, min, max, color) {
var setCO2Element = function(id, value) {
var element = document.getElementById(id);
if (undefined !== element && null !== element) {
var inputLow = min;
var inputHigh = max;
// TODO: remove duplication; see setTemperatureThermometer
var inputLow = -500;
var inputHigh = 0;

var outputLow = 0;
var outputHigh = 100;

var result = ((value - inputLow) / (inputHigh - inputLow)) * (outputHigh - outputLow) + outputLow;
var rounded = Number(result).toFixed(2);

element.setAttribute('style', 'height: ' + rounded + '%; width: 100%; background-color: ' + color + ';');
}

element.setAttribute('style','width: '+rounded+'%; height: '+rounded+'%;');
}
};

var onHeartbeat = function(data) {
Expand All @@ -110,8 +102,7 @@ <h1>CO2</h1>
setValue('rh', data[key][5]);
setValue('dust', data[key][1]);
setValue('co2', data[key][6]);

setProgressBarHeight("co2_widget", data[key][6], data[key][7],data[key][8], '#800080');
setCO2Element("co2_widget", data[key][6]);
if (data[key][6]>=data[key][8]) {
document.getElementById("audiosource").setAttribute("src", '{{ static_url("sounds/win.mp3") }}');
document.getElementById("audiosource").setAttribute("autoplay", "autoplay");
Expand All @@ -129,20 +120,6 @@ <h1>CO2</h1>
socket = null;
isopen = false;
}
// For the camera
var mjpeg_img;
function reload_img () {
mjpeg_img.src = "cam_pic.php?time=" + new Date().getTime();
}
function error_img () {
setTimeout("mjpeg_img.src = 'cam_pic.php?time=' + new Date().getTime();", 100);
}
function init() {
mjpeg_img = document.getElementById("mjpeg_dest");
mjpeg_img.onload = reload_img;
mjpeg_img.onerror = error_img;
reload_img();
}

// Handling actions in the UI
// $('#my_button').click(function() {
Expand Down
39 changes: 11 additions & 28 deletions air1/templates/distance.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,10 @@
<link rel="stylesheet" href="{{ static_url("app.css") }}" type="text/css"/>
<script src="script_min.js"></script>
</head>
<body style="background-color: black; margin: 0;" onload="setTimeout('init();', 100);">
<body style="background-color: white; margin: 0;" onload="setTimeout('init();', 100);">
<center>
<div><img id="mjpeg_dest" /></div>
<div><img src="{{ static_url('images/snail.png') }}" id="distanceimage" /></div>
</center>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div class="widget_bar">
<h1>Distance</h1>
<div id="distance_widget" style="background-color: #ffa500"></div>
</div>
</li>
</ul>
</div>
<audio id="audiosource">
<source type="audio/mp3" />
Your browser does not support the audio element.
Expand All @@ -35,12 +25,6 @@ <h1>Distance</h1>
<script src="{{ static_url("app.js") }}" type="text/javascript"></script>
<script type="text/javascript">
$(function() { // only when the page has loaded and jQuery is ready
// start gridster
$('.gridster ul').gridster({
widget_margins: [5, 5],
widget_base_dimensions: [1000, 1000],
max_cols: 5
});

var isopen = false;
var socket = new WebSocket("ws://127.0.0.1:8080/ws");
Expand Down Expand Up @@ -82,21 +66,21 @@ <h1>Distance</h1>
entry.innerHTML = value;
});
};

var setProgressBarHeight = function(id, value, min, max, color) {
var setDistanceElement = function(id, value) {
var element = document.getElementById(id);
if (undefined !== element && null !== element) {
var inputLow = min;
var inputHigh = max;
var inputLow = 0;
var inputHigh = 120;

var outputLow = 0;
var outputHigh = 100;

var result = ((value - inputLow) / (inputHigh - inputLow)) * (outputHigh - outputLow) + outputLow;
var rounded = Number(result).toFixed(2);

element.setAttribute('style', 'height: ' + rounded + '%; width: 100%; background-color: ' + color + ';');
}

element.setAttribute('style','width: '+rounded+'%; height: '+rounded+'%;');
}
};

var onHeartbeat = function(data) {
Expand All @@ -110,9 +94,8 @@ <h1>Distance</h1>
setValue('rh', data[key][5]);
setValue('dust', data[key][1]);
setValue('co2', data[key][6]);

setProgressBarHeight("distance_widget", data[key][3], 0, 120, '#ffa500');
if (data[key][3] < 30 && data[key][3] > 0) {
setDistanceElement('distanceimage',data[key][3]);
if (data[key][3] < 30) {
document.getElementById("audiosource").setAttribute("src", '{{ static_url("sounds/C.mp3") }}');
document.getElementById("audiosource").setAttribute("autoplay", "autoplay");
} else if (data[key][3] < 45) {
Expand Down Expand Up @@ -141,7 +124,7 @@ <h1>Distance</h1>
}
}
};

var onAction = function(data) {
console.log("Action: " + data);
};
Expand Down
12 changes: 3 additions & 9 deletions air1/templates/dust.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,7 @@
<link rel="stylesheet" href="{{ static_url("app.css") }}" type="text/css"/>
</head>
<body style="background-color: black; margin: 0;">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="dust_widget" style="background-color: #2c3e50">
<div id="particles-js" width="940px" height="940px" style="width: 940px; height: 940px; min-height: 940px;"></div>
</li>
</ul>
</div>
<div id="particles-js" width="940px" height="940px" style="width: 940px; height: 940px; min-height: 940px;"></div>
<audio id="audiosource">
<source type="audio/mp3" />
Your browser does not support the audio element.
Expand Down Expand Up @@ -82,7 +76,7 @@
};

var updateParticles = function(amount) {
window.pJSDom[0].pJS.particles.number.value = (amount/100)^3;
window.pJSDom[0].pJS.particles.number.value = 10*amount;
window.pJSDom[0].pJS.fn.particlesEmpty();
window.pJSDom[0].pJS.fn.particlesCreate();
//window.pJSDom[0].pJS.fn.particlesRefresh();
Expand All @@ -100,7 +94,7 @@
setValue('dust', data[key][1]);
setValue('co2', data[key][6]);

updateParticles(data[key][1]);
updateParticles(data[key][2]);
if (data[key][1]>=data[key][10]) {
document.getElementById("audiosource").setAttribute("src", '{{ static_url("sounds/win.mp3") }}');
document.getElementById("audiosource").setAttribute("autoplay", "autoplay");
Expand Down
68 changes: 38 additions & 30 deletions air1/templates/index2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,46 @@
<link rel="stylesheet" type="text/css" href="{{ static_url("semantic/semantic.min.css") }}">
<link rel="stylesheet" href="{{ static_url("app.css") }}" type="text/css"/>
</head>
<body id="home" style="margin-top: 2%">
<div class="ui text container">
<h1 class="ui header" align="center" id="tracker_name">DustyACorn</h1>
</div>

<div class="ui container" id="main-content">

<p style="margin-bottom: 0cm; line-height: 100%">
<a href="./bars.html">
<img src="{{ static_url("images/all.svg") }}" name="All" align="left" width="319" height="91" border="0"/></a>

</p>
<p style="margin-bottom: 0cm; line-height: 100%">
<a href="./dust.html">
<img src="{{ static_url("images/dust.svg") }}" name="Dust" align="left" width="319" height="91" border="0"/>

<a href="./co2.html">
<img src="{{ static_url("images/co2.svg") }}" name="CO2" align="left" width="319" height="91" border="0"/>
</p>
<p style="margin-bottom: 0cm; line-height: 100%">
<a href="./temperature.html">
<img src="{{ static_url("images/temperature.svg") }}" name="temperature" align="left" width="319" height="91" border="0"/>

<a href="./rh.html">
<img src="{{ static_url("images/humidity.svg") }}" name="rh" align="left" width="319" height="91" border="0"/>
</p>

<p style="margin-bottom: 0cm; line-height: 100%">
<a href="./distance.html">
<img src="{{ static_url("images/distance.png") }}" name="distance" align="left" width="319" height="91" border="0"/></a>
<style>
div.navigation {
background-color: black;
width:10%;
height:100%;
float:left;
}
div.visualization {
background-color: white;
width:90%;
height:100%;
float:right;

}
</style>
<body id="home">

<div class="navigation" id="nav-bar">
<a href="./bars.html">
<img src="{{ static_url("images/all.svg") }}" name="All" align="left" width="319" height="91" border="0"/></a>
<a href="./dust.html">
<img src="{{ static_url("images/dust.svg") }}" name="Dust" align="left" width="319" height="91" border="0"/>
<a href="./co2.html">
<img src="{{ static_url("images/co2.svg") }}" name="CO2" align="left" width="319" height="91" border="0"/>
<a href="./temperature.html">
<img src="{{ static_url("images/temperature.svg") }}" name="temperature" align="left" width="319" height="91" border="0"/>
<a href="./rh.html">
<img src="{{ static_url("images/humidity.svg") }}" name="rh" align="left" width="319" height="91" border="0"/>
<a href="./distance.html">
<img src="{{ static_url("images/distance.png") }}" name="distance" align="left" width="319" height="91" border="0"/></a>
</p>
<a href="./temperature_qual.html">
<img src="{{ static_url("images/temperature.svg") }}" name="temperature_q" align="left" width="319" height="91" border="0"/></a>
</div>
<div class="visualization">
<iframe src="./bars.html" width=100% height=100%>
<!--TO DO:
Update the iframe with the right page when clicking the right nav button-->
</div>

</body>
<script src="{{ static_url("jquery.min.js") }}" type="text/javascript"></script>
<script src="{{ static_url("semantic/semantic.min.js") }}"></script>
Expand Down
Loading

0 comments on commit 414de3a

Please sign in to comment.