pingu_98/cosmicpi-rpi_V1.5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add bin size parameter for histogram image creation

Browse source
This commit is contained in:
Darko Lukic 2018-03-26 23:35:38 +02:00
parent a467027adc
commit 87f486c770
3 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cosmicpi/ui/README.md
View file

@ -1,5 +1,5 @@
## Development
Make sure you have Node.js and npm installed on your computer. Run `npm run dev` to open application in a development mode.
Make sure you have Node.js and npm installed on your computer. Run `npm run dev` to open application in a development mode. You can also specify different REST url by setting up an environment variable `API_URL`, eg. `API_URL=http://127.0.0.1:5000/api/ npm run dev`.
## Production
To compile the project and generate distribution files run `npm run build`.

16
cosmicpi/ui/src/components/Science.vue
View file

@ -15,6 +15,10 @@
<label for="toDate">To date:</label>
<datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
</div>
<div class="form-group col">
<label for="binSize">Bin size (s):</label>
<input type="number" min="1" @change="binSizeUpdated" v-model="binSize" id="binSize" class="form-control" />
</div>
</div>
<div class="row">
<img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" />
@ -38,11 +42,14 @@ import moment from 'moment';
const FROM_DEFAULT = moment().add('-24', 'hours').toISOString();
const TO_DEFAULT = moment().toISOString();
const DEFAULT_BIN_SIZE = 1;
export default {
name: 'Science',
data() {
return {
binSize: DEFAULT_BIN_SIZE,
lastBinSize: DEFAULT_BIN_SIZE,
from: FROM_DEFAULT,
to: TO_DEFAULT,
lastFrom: FROM_DEFAULT,
@ -70,6 +77,12 @@ export default {
this.updateDownloadUrl();
}
},
binSizeUpdated() {
if (this.lastBinSize != this.binSize) {
this.lastBinSize = this.binSize;
this.loadGraphImage();
}
},
updateDownloadUrl() {
let from = moment(this.from).unix();
let to = moment(this.to).unix();
@ -82,11 +95,10 @@ export default {
let from = moment(this.from).unix();
let to = moment(this.to).unix();
let root = this.$http.options.root;
let binSize = 1;
this.$refs.graph.src = '';
this.graphIsLoading = true;
let imageUrl = `${root}histogram.png?from=${from}&to=${to}&bin_size=${binSize}`;
let imageUrl = `${root}histogram.png?from=${from}&to=${to}&bin_size=${this.binSize}`;
this.$refs.graph.src = imageUrl;
},
},

14
cosmicpi/ui/webpack.config.js
View file

@ -1,5 +1,12 @@
var path = require('path')
var webpack = require('webpack')
const path = require('path')
const webpack = require('webpack')
const DEFAULT_API_URL = (process.env.NODE_ENV === 'production') ?
'/api/' : 'http://192.168.1.26:5000/api/';
const API_URL = (process.env.API_URL === undefined) ?
DEFAULT_API_URL : process.env.API_URL;
module.exports = {
entry: './src/main.js',
@ -69,8 +76,7 @@ module.exports = {
devtool: '#eval-source-map',
plugins: [
new webpack.DefinePlugin({
'API_URL': JSON.stringify(process.env.NODE_ENV === 'production' ?
'/api/' : 'http://192.168.1.26:5000/api/'),
'API_URL': JSON.stringify(API_URL),
})
]
}