add RESTful API server example

examples/protocols/http_server/restful_server/front/web-demo/src/App.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer v-model="drawer" fixed app clipped>
+      <v-list dense>
+        <v-list-tile to="/">
+          <v-list-tile-action>
+            <v-icon>home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Home</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile to="/chart">
+          <v-list-tile-action>
+            <v-icon>show_chart</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Chart</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile to="/light">
+          <v-list-tile-action>
+            <v-icon>highlight</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Light</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar color="red accent-4" dark fixed app clipped-left>
+      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+      <v-toolbar-title>ESP Home</v-toolbar-title>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid fill-height>
+        <router-view></router-view>
+      </v-container>
+    </v-content>
+    <v-footer color="red accent-4" app fixed>
+      <span class="white--text">&copy; ESPRESSIF SYSTEMS (SHANGHAI) CO., LTD. All rights reserved.</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      drawer: null
+    };
+  }
+};
+</script>

examples/protocols/http_server/restful_server/front/web-demo/src/main.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import './plugins/vuetify'
+import App from './App.vue'
+import router from './router'
+import axios from 'axios'
+import store from './store'
+
+Vue.config.productionTip = false
+
+Vue.prototype.$ajax = axios
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

examples/protocols/http_server/restful_server/front/web-demo/src/plugins/vuetify.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
+
+Vue.use(Vuetify, {
+  iconfont: 'md',
+})

examples/protocols/http_server/restful_server/front/web-demo/src/router.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+import Chart from './views/Chart.vue'
+import Light from './views/Light.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/chart',
+      name: 'chart',
+      component: Chart
+    },
+    {
+      path: '/light',
+      name: 'light',
+      component: Light
+    }
+  ]
+})

examples/protocols/http_server/restful_server/front/web-demo/src/store.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    chart_value: [8, 2, 5, 9, 5, 11, 3, 5, 10, 0, 1, 8, 2, 9, 0, 13, 10, 7, 16],
+  },
+  mutations: {
+    update_chart_value(state, new_value) {
+      state.chart_value.push(new_value);
+      state.chart_value.shift();
+    }
+  },
+  actions: {
+    update_chart_value({ commit }) {
+      axios.get("/api/v1/temp/raw")
+        .then(data => {
+          commit("update_chart_value", data.data.raw);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  }
+})

examples/protocols/http_server/restful_server/front/web-demo/src/views/Chart.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-container fluid>
+    <v-sparkline
+      :value="get_chart_value"
+      :gradient="['#f72047', '#ffd200', '#1feaea']"
+      :smooth="10"
+      :padding="8"
+      :line-width="2"
+      stroke-linecap="round"
+      gradient-direction="top"
+      auto-draw
+    ></v-sparkline>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timer: null
+    };
+  },
+  computed: {
+    get_chart_value() {
+      return this.$store.state.chart_value;
+    }
+  },
+  methods: {
+    updateData: function() {
+      this.$store.dispatch("update_chart_value");
+    }
+  },
+  mounted() {
+    clearInterval(this.timer);
+    this.timer = setInterval(this.updateData, 1000);
+  },
+  destroyed: function() {
+    clearInterval(this.timer);
+  }
+};
+</script>

examples/protocols/http_server/restful_server/front/web-demo/src/views/Home.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <v-layout text-xs-center wrap>
+      <v-flex xs12 sm6 offset-sm3>
+        <v-card>
+          <v-img :src="require('../assets/logo.png')" contain height="200"></v-img>
+          <v-card-title primary-title>
+            <div class="ma-auto">
+              <span class="grey--text">IDF version: {{version}}</span>
+              <br>
+              <span class="grey--text">ESP cores: {{cores}}</span>
+            </div>
+          </v-card-title>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      version: null,
+      cores: null
+    };
+  },
+  mounted() {
+    this.$ajax
+      .get("/api/v1/system/info")
+      .then(data => {
+        this.version = data.data.version;
+        this.cores = data.data.cores;
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+};
+</script>

examples/protocols/http_server/restful_server/front/web-demo/src/views/Light.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-container>
+    <v-layout text-xs-center wrap>
+      <v-flex xs12 sm6 offset-sm3>
+        <v-card>
+          <v-responsive :style="{ background: `rgb(${red}, ${green}, ${blue})` }" height="300px"></v-responsive>
+          <v-card-text>
+            <v-container fluid grid-list-lg>
+              <v-layout row wrap>
+                <v-flex xs9>
+                  <v-slider v-model="red" :max="255" label="R"></v-slider>
+                </v-flex>
+                <v-flex xs3>
+                  <v-text-field v-model="red" class="mt-0" type="number"></v-text-field>
+                </v-flex>
+                <v-flex xs9>
+                  <v-slider v-model="green" :max="255" label="G"></v-slider>
+                </v-flex>
+                <v-flex xs3>
+                  <v-text-field v-model="green" class="mt-0" type="number"></v-text-field>
+                </v-flex>
+                <v-flex xs9>
+                  <v-slider v-model="blue" :max="255" label="B"></v-slider>
+                </v-flex>
+                <v-flex xs3>
+                  <v-text-field v-model="blue" class="mt-0" type="number"></v-text-field>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-text>
+          <v-btn fab dark large color="red accent-4" @click="set_color">
+            <v-icon dark>check_box</v-icon>
+          </v-btn>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return { red: 160, green: 160, blue: 160 };
+  },
+  methods: {
+    set_color: function() {
+      this.$ajax
+        .post("/api/v1/light/brightness", {
+          red: this.red,
+          green: this.green,
+          blue: this.blue
+        })
+        .then(data => {
+          console.log(data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  }
+};
+</script>
+