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 ## 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 ## Production
To compile the project and generate distribution files run `npm run build`. 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> <label for="toDate">To date:</label>
<datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime> <datetime @input="rangeUpdated" v-model="to" id="toDate" type="datetime" input-class="form-control"></datetime>
</div> </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>
<div class="row"> <div class="row">
<img v-if="graphIsLoading" ref="loader" style="margin: auto" :src="loaderUrl" /> <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 FROM_DEFAULT = moment().add('-24', 'hours').toISOString();
const TO_DEFAULT = moment().toISOString(); const TO_DEFAULT = moment().toISOString();
const DEFAULT_BIN_SIZE = 1;
export default { export default {
name: 'Science', name: 'Science',
data() { data() {
return { return {
binSize: DEFAULT_BIN_SIZE,
lastBinSize: DEFAULT_BIN_SIZE,
from: FROM_DEFAULT, from: FROM_DEFAULT,
to: TO_DEFAULT, to: TO_DEFAULT,
lastFrom: FROM_DEFAULT, lastFrom: FROM_DEFAULT,
@ -70,6 +77,12 @@ export default {
this.updateDownloadUrl(); this.updateDownloadUrl();
} }
}, },
binSizeUpdated() {
if (this.lastBinSize != this.binSize) {
this.lastBinSize = this.binSize;
this.loadGraphImage();
}
},
updateDownloadUrl() { updateDownloadUrl() {
let from = moment(this.from).unix(); let from = moment(this.from).unix();
let to = moment(this.to).unix(); let to = moment(this.to).unix();
@ -82,11 +95,10 @@ export default {
let from = moment(this.from).unix(); let from = moment(this.from).unix();
let to = moment(this.to).unix(); let to = moment(this.to).unix();
let root = this.$http.options.root; let root = this.$http.options.root;
let binSize = 1;
this.$refs.graph.src = ''; this.$refs.graph.src = '';
this.graphIsLoading = true; 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; this.$refs.graph.src = imageUrl;
}, },
}, },

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

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