ESP8266-based RGBW controller
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

190 lines
3.9 KiB

<template>
<div>
<h3>{{ $t('status.title') }}</h3>
<div v-if="static === null" class="loading">
<LoadingIndicator></LoadingIndicator>
</div>
<div v-else>
<Radio :title="$i18n.t('status.static')" v-model="type" id="static"></Radio>
<div class="slidercontainer">
<input type="range" min="0" max="255" class="slider red" v-model.number="static.r">
</div>
<div class="slidercontainer">
<input type="range" min="0" max="255" class="slider green" v-model.number="static.g">
</div>
<div class="slidercontainer">
<input type="range" min="0" max="255" class="slider blue" v-model.number="static.b">
</div>
<div class="slidercontainer">
<input type="range" min="0" max="255" class="slider white" v-model.number="static.w">
</div>
<div class="buttons">
<a class="button button-secondary" @click.prevent="staticOff">{{ $t('status.staticOff') }}</a>
</div>
<Radio :title="$i18n.t('status.rainbow.title')" v-model="type" id="rainbow"></Radio>
<p>{{ $i18n.t('status.rainbow.speed') }}</p>
<div class="slidercontainer">
<input type="range" min="0" max="200" class="slider white" v-model.number="rainbow.speed">
</div>
<p>{{ $i18n.t('status.rainbow.lightness') }}</p>
<div class="slidercontainer">
<input type="range" min="0" max="255" class="slider white" v-model.number="rainbow.lightness">
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import LoadingIndicator from '@/components/loadingIndicator.vue';
import BaseVM from '@/BaseVM';
import Radio from '@/components/radio.vue';
export default {
mixins: [BaseVM],
components: {
LoadingIndicator,
Radio
},
data()
{
return {
type: 'static',
static: null,
rainbow: null
}
},
mounted()
{
const self = this;
self.updating = false;
self.updateTimer = false;
self.load()
.then(() =>
{
self.$watch(
() =>
{
return [
this.type,
this.static.r, this.static.g, this.static.b, this.static.w,
this.rainbow.speed, this.rainbow.lightness
];
},
() =>
{
self.changed();
});
});
},
methods: {
load()
{
const self = this;
return axios.get('/api/strip/status')
.then(response =>
{
self.type = response.data.setting;
self.static = response.data.static.color;
self.rainbow = response.data.rainbow;
})
.catch(e => self.handleAPIError('error.getStripStatus', e));
},
staticOff()
{
this.static = {
r: 0,
g: 0,
b: 0,
w: 0
};
},
changed()
{
const self = this;
if (self.updateTimer === false)
self.updateTimer = setTimeout(() =>
{
self.update();
}, 200);
},
update()
{
const self = this;
if (self.updating)
{
self.updateTimer = setTimeout(() =>
{
self.update();
}, 200);
return;
}
let url;
let params;
switch (this.type)
{
case 'static':
url = '/api/set/static';
params = {
r: this.static.r,
g: this.static.g,
b: this.static.b,
w: this.static.w,
fadeTime: 200
};
break;
case 'rainbow':
url = '/api/set/rainbow';
params = this.rainbow;
break;
default:
return;
}
self.updating = true;
self.updateTimer = false;
axios.get(url, { params: params })
.then(response =>
{
})
.catch(e => self.handleAPIError('error.setColor', e))
.then(() =>
{
self.updating = false;
});
}
}
}
</script>