arti/peltier_jacket
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

kikupask

Browse Source
This commit is contained in:
Arti Zirk 2016-10-16 18:30:47 +02:00
parent 2759b7c3aa
commit 20381b3760
2 changed files with 76 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
main.js
View File

@ -1,33 +1,40 @@
console.log("bla") console.log("bla")
var gauge = document.getElementById('temp-gauge'); var gauge = document.getElementById('temp-gauge');
var gauge2 = document.getElementById('temp-gauge2');
// Randomly add a data point every 500ms // Randomly add a data point every 500ms
var random = new TimeSeries(); var random = new TimeSeries();
var random2 = new TimeSeries();
setInterval(function() { setInterval(function() {
fetch("/temps.json").then(function (resp) { fetch("/temps.json").then(function (resp) {
return resp.json(); return resp.json();
}).then(function (resp) { }).then(function (resp) {
console.log(resp) console.log("resp: " + resp);
var nr = Math.random() * 100; var nr = Math.random() * 100;
nr = resp.pop() var nr2 = Math.random() * 100;
nr = resp.pop();
nr2 = resp.pop();
console.log("nr: " + nr);
random.append(new Date().getTime(), nr); random.append(new Date().getTime(), nr);
random2.append(new Date().getTime(), nr2);
gauge.dataset.value = nr; gauge.dataset.value = nr;
gauge2.dataset.value = nr2;
}); });
}, 500); }, 500);
function createTimeline() { function createTimeline() {
var chart = new SmoothieChart({grid:{fillStyle:'transparent'}, labels:{fillStyle:'#000000'}}); var chart = new SmoothieChart({grid:{fillStyle:'transparent'}, labels:{fillStyle:'#000000'}});
chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 0, 0, 1)', fillStyle: 'rgba(0, 0, 0, 0.1)', lineWidth: 4 }); chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 1, 0, 1)', fillStyle: 'rgba(0, 0, 0, 0.1)', lineWidth: 4 });
chart.addTimeSeries(random2, { strokeStyle: 'rgba(0, 0, 1, 1)', fillStyle: 'rgba(0, 0, 0, 0.1)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500); chart.streamTo(document.getElementById("chart"), 500);
} }
fetch("/temps.json").then(function (resp) { fetch("/temps.json").then(function (resp) {
return resp.json(); return resp.json();
}).then(function (resp) { }).then(function (resp) {
console.log(resp) console.log("resp: " + resp);
for (val of resp) { random.append(new Date().getTime(), resp[0]);
random.append(new Date().getTime(), val) random2.append(new Date().getTime(), resp[1]);
}
}); });
function heat(h) { function heat(h) {

70
main.py
View File

@ -46,7 +46,7 @@ html = """<!DOCTYPE html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Temperature</title> <title>Jacket Temperature</title>
<meta name="description" content="A simple message board written in python"> <meta name="description" content="A simple message board written in python">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
@ -78,22 +78,32 @@ html = """<!DOCTYPE html>
display: inline-block; display: inline-block;
}} }}
</style> </style>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<!--[if lt IE 7]> <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <![endif]-->
<h1>Temperature</h1> <div class="container">
<h1>Jacket Temperature</h1>
<div class="row">
<div class="col-md-4">
<div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;">
<div id="temp_container">
<div style="display: inline-block; position: relative; top: -24px;">
<!--input type="text" style="display: block; width: 46px; font-size: 20px; padding: 0; margin: 20px 0;"-->
<button style="display:block; height:50px; width:100px;padding:10px;font-size: 25px;" onclick="heat('1')">↑</button>
<button style="display:block; height:50px; width:100px;padding:10px;font-size: 25px;" onclick="heat('2')">OFF</button>
<button style="display:block; height:50px; width:100px;padding:10px;font-size: 25px;" onclick="heat('0')">↓</button>
</div>
<canvas data-width="100" <canvas data-width="100"
data-height="300" data-height="300"
data-type="linear-gauge" data-type="linear-gauge"
@ -105,12 +115,50 @@ html = """<!DOCTYPE html>
data-major-ticks="15,20,25,30,35" data-major-ticks="15,20,25,30,35"
data-highlights="" data-highlights=""
id="temp-gauge"></canvas> id="temp-gauge"></canvas>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-lg active" onclick="heat('1');">
<input type="radio" name="options" id="option1" autocomplete="off" checked> ↑
</label>
<label class="btn btn-primary btn-lg" onclick="heat('2');">
<input type="radio" name="options" id="option2" autocomplete="off"> OFF
</label>
<label class="btn btn-primary btn-lg" onclick="heat('0');">
<input type="radio" name="options" id="option3" autocomplete="off"> ↓
</label>
</div>
<canvas data-width="100"
data-height="300"
data-type="linear-gauge"
data-min-value="15"
data-max-value="35"
data-animation-rule="elastic"
data-animation-duration="500"
data-minor-ticks="5"
data-major-ticks="15,20,25,30,35"
data-highlights=""
id="temp-gauge2"></canvas>
</div>
<div class="col-md-8">
<canvas id="chart" width="600" height="300"></canvas>
</div> </div>
</div> </div>
<canvas id="chart" width="650" height="200"></canvas>
<hr> <hr>
<small><a href="https://git.wut.ee/arti/peltier_jacket" style="color:black;">Source code</a></small>, <small>Good luck!</small> <small><a href="https://git.wut.ee/arti/peltier_jacket" style="color:black;">Source code</a></small>, <small>Good luck!</small>
</div>
<script type="text/javascript" src="/smoothie.js"></script> <script type="text/javascript" src="/smoothie.js"></script>
<script type="text/javascript" src="/fetch.js"></script> <script type="text/javascript" src="/fetch.js"></script>
<script type="text/javascript" src="/gauge.min.js"></script> <script type="text/javascript" src="/gauge.min.js"></script>