Ledda/rpi-sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added some widgets in grid layour (mostly dummies)

Browse Source
This commit is contained in:
Daniel Ledda
2020-11-29 14:01:22 +01:00
parent 16b4be1cd4
commit a308844639
6 changed files with 275 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
webapp/dist/charts.html vendored
View File

@@ -7,9 +7,31 @@
<script src="{{.}}/static/main.js"></script> <script src="{{.}}/static/main.js"></script>
</head> </head>
<body id="root"> <body id="root">
<div class="chart-container center"> <div class="center">
<h1>Ledda's Room Climate</h1> <h1>Ledda's Room Climate</h1>
<canvas id="myChart"></canvas> <div class="main-content-grid">
<div id="chart-container" class="widget">
<canvas id="myChart"></canvas>
</div>
<div id="timer-widget" class="widget">
<div>
<h2>Next update in:</h2>
<p id="timer">0.00</p>
</div>
</div>
<div id="mins-widget" class="widget">
<div>
<h2>Minutes Displayed:</h2>
<p id="mins-displayed">60</p>
</div>
</div>
<div id="timezone-widget" class="widget">
<div>
<h2>Displayed Timezone:</h2>
<p>UTC</p>
</div>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

175
webapp/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

71
webapp/dist/styles.css vendored
View File

@@ -10,6 +10,18 @@ html, body {
opacity: 100%; opacity: 100%;
} }
.main-content-grid {
height: 80%;
width: 80%;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(12, 1fr);
text-align: center;
}
.main-content-grid > * {
display: block;
}
.center { .center {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -17,6 +29,7 @@ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column;
margin: auto; margin: auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -31,26 +44,48 @@ html, body {
z-index: -1; z-index: -1;
} }
.chart-container {
padding: 10vw;
width: calc(100% - 20vw);
height: calc(100% - 20vw);
text-align: center;
flex-flow: column;
}
.chart-container > * {
display: block;
}
#myChart {
background-color: white;
padding: 1vw;
border-radius: 1vw;
border: 3px #c7ab82 solid;
}
h1 { h1 {
display: block;
font-family: "Georgia", serif; font-family: "Georgia", serif;
font-weight: normal; font-weight: normal;
color: #7b5b2f; color: #7b5b2f;
} }
.widget {
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 1em;
padding: 1em;
border-radius: 1em;
border: 0.2em #c7ab82 solid;
background-color: white;
}
.widget h2 {
font-family: "Georgia", serif;
font-weight: normal;
color: #7b5b2f;
font-size: 1em;
display: inline-block;
}
.widget p {
margin: 0;
}
#timer-widget {
grid-area: 1 / 11 / span 1 / span 2;
}
#mins-widget {
grid-area: auto / 11 / span 2 / span 2;
}
#timezone-widget {
grid-area: auto / 11 / span 2 / span 2;
}
#chart-container {
grid-area: 1 / 1 / span 5 / span 10;
}

2
webapp/src/climateChartConfig.ts
View File

@@ -40,6 +40,8 @@ export function generateClimateChartConfig(settings: ClimateChartSettings): Char
}] }]
}, },
options: { options: {
responsive: true,
maintainAspectRatio: false,
legend: { legend: {
position: "top", position: "top",
align: "end", align: "end",

4
webapp/src/config.json
View File

@@ -1,3 +1,5 @@
{ {
"development": false "development": true,
"defaultMinuteSpan": 60,
"reloadIntervalSec": 30
} }

23
webapp/src/main.ts
View File

@@ -3,6 +3,10 @@ import config from "./config.json";
export {config}; export {config};
const CHART_DOM_ID: string = "myChart"; const CHART_DOM_ID: string = "myChart";
let climateChart: ClimateChart;
let timer = config.reloadIntervalSec * 1000;
let timerElement: HTMLElement;
let lastTimerUpdate = new Date().getTime();
let rootUrl: string = ""; let rootUrl: string = "";
function createClimateChart() { function createClimateChart() {
@@ -10,7 +14,7 @@ function createClimateChart() {
if (pathname !== "/") { if (pathname !== "/") {
rootUrl += pathname.match(/\/[^?\s]*/)[0]; rootUrl += pathname.match(/\/[^?\s]*/)[0];
} }
let minutesDisplayed = 60; let minutesDisplayed = config.defaultMinuteSpan;
const argsStart = window.location.search.search(/\?minute-span=/); const argsStart = window.location.search.search(/\?minute-span=/);
if (argsStart !== -1) { if (argsStart !== -1) {
const parsedMins = Number(window.location.search.substring(13)); const parsedMins = Number(window.location.search.substring(13));
@@ -21,6 +25,17 @@ function createClimateChart() {
return new ClimateChart(CHART_DOM_ID, minutesDisplayed); return new ClimateChart(CHART_DOM_ID, minutesDisplayed);
} }
async function updateChart() {
timer = config.reloadIntervalSec * 1000;
climateChart.update();
}
function updateTimer() {
timer -= new Date().getTime() - lastTimerUpdate;
timerElement.innerText = (timer / 1000).toFixed(2);
lastTimerUpdate = new Date().getTime();
}
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.classList.add('overlay', 'center'); overlay.classList.add('overlay', 'center');
const textContainer = document.createElement('span'); const textContainer = document.createElement('span');
@@ -28,11 +43,13 @@ textContainer.innerText = 'Loading data...';
overlay.appendChild(textContainer); overlay.appendChild(textContainer);
document.onreadystatechange = (e) => { document.onreadystatechange = (e) => {
timerElement = document.getElementById('timer');
document.getElementById("root").appendChild(overlay); document.getElementById("root").appendChild(overlay);
const climateChart = createClimateChart(); climateChart = createClimateChart();
climateChart.onLoaded(() => { climateChart.onLoaded(() => {
overlay.classList.add('hidden'); overlay.classList.add('hidden');
setInterval(() => climateChart.update(), 30 * 1000); setInterval(updateTimer, 10);
setInterval(updateChart, config.reloadIntervalSec * 1000);
}); });
climateChart.onErrored((e) => { climateChart.onErrored((e) => {
overlay.classList.remove('hidden'); overlay.classList.remove('hidden');