LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Apply {{snackbarMessage}} DISMISS
CSS
.application--wrap {
  background: #eee;
}
.card {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
JS
Vue.use(VueResource)
new Vue({
  el: '#app',
  computed: {
    color () {
      return tinycolor({
        r: this.red,
        g: this.green,
        b: this.blue
      })
    }
  },
  methods: {
    apply() {
      console.log('Applying!')
      let vm = this
      this.$http.get('http://' + this.address + '/rgbw', {
        params: {
          r: this.red,
          g: this.green,
          b: this.blue,
          w: this.white
        }
      }).then(response => {
        console.log('Success')
        console.log(response)
        // vm.snackbarMessage = 'Success'
        // vm.snackbar = true
      }, response => {
        // console.log('Failure')
        // console.log(response)
        vm.snackbarMessage = 'Failure'
        vm.snackbar = true
      });
    }
  },
  data () {
    return {
      red: 0,
      green: 0,
      blue: 0,
      white: 0,
      address: '192.168.1.89',
      snackbar: false,
      snackbarMessage: ''
    }
  },
  mounted () {
    let vm = this
    this.$http.get('http://' + this.address + '/status', {}).then(response => {
      console.log(response.body)
      vm.red = response.body.r
      vm.blue = response.body.b
      vm.green = response.body.g
      vm.white = response.body.w
    }, response => {
      console.error(response)
      vm.snackbarMessage = 'Unable to get RGBW status from Arduino Controller.'
      vm.snackbar = true
    })
  },
  watch: {
    red () {
      this.apply()
    },
    green () {
      this.apply()
    },
    blue () {
      this.apply()
    },
    white () {
      this.apply()
    }
  }
})
Term
Wed, 12/27/2017 - 07:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv