├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── living.jpg
└── src
    ├── App.vue
    ├── main.js
    └── views
        ├── device.vue
        ├── devices.vue
        ├── family.vue
        ├── home.vue
        ├── living.vue
        ├── logs.vue
        ├── rooms.vue
        ├── scenes.vue
        ├── search.vue
        ├── settings.vue
        ├── status.vue
        └── tv.vue


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | ## [0.1.6](https://github.com/zircleui/tutorial/compare/v0.1.5...v0.1.6) (2019-05-02)
 6 | 
 7 | 
 8 | 
 9 | <a name="0.1.5"></a>
10 | ## [0.1.5](https://github.com/zircleui/tutorial/compare/v0.1.4...v0.1.5) (2019-04-22)
11 | 
12 | 
13 | 
14 | <a name="0.1.4"></a>
15 | ## [0.1.4](https://github.com/zircleui/tutorial/compare/v0.1.3...v0.1.4) (2019-01-06)
16 | 
17 | 
18 | 
19 | <a name="0.1.3"></a>
20 | ## [0.1.3](https://github.com/zircleui/tutorial/compare/v0.1.2...v0.1.3) (2018-11-25)
21 | 
22 | 
23 | ### Bug Fixes
24 | 
25 | * 🐛 home name ([071b762](https://github.com/zircleui/tutorial/commit/071b762)), closes [#1](https://github.com/zircleui/tutorial/issues/1)
26 | 
27 | 
28 | 
29 | <a name="0.1.2"></a>
30 | ## [0.1.2](https://github.com/zircleui/tutorial/compare/v0.1.1...v0.1.2) (2018-11-19)
31 | 
32 | 
33 | 
34 | <a name="0.1.1"></a>
35 | ## 0.1.1 (2018-08-17)
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018-present, Juan Martín Muda
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Zircle-ui: smart-home tutorial
 2 | 
 3 | > :wave: This app is powered by [**zircle-ui**](https://github.com/zircleUI/zircleUI) :rocket: and is part of [its official tutorial](https://zircleui.github.io/docs/tutorial/). You can play with a working demo on [**CodeSandbox**](https://codesandbox.io/s/23wlzq4l1r?view=preview)
 4 | 
 5 | <img src="https://raw.githubusercontent.com/zircleUI/docs/master/docs/.vuepress/public/smart-home.jpg" style="margin-top: 20px; display: block; margin-left: auto; margin-right: auto; width: 100%;" />
 6 | 
 7 | 
 8 | ## Project setup
 9 | 
10 | ```
11 | git clone https://github.com/zircleUI/tutorial.git
12 | 
13 | ```
14 | 
15 | After cloning the repository, execute:
16 | 
17 | ```
18 | npm install
19 | ```
20 | 
21 | ### Compiles and hot-reloads for development
22 | ```
23 | npm run serve
24 | ```
25 | 
26 | ### Compiles and minifies for production
27 | ```
28 | npm run build
29 | ```
30 | 
31 | ### Lints and fixes files
32 | ```
33 | npm run lint
34 | ```
35 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "smart-home",
 3 |   "version": "0.1.6",
 4 |   "description": "Demo app for zircle-ui tutorial",
 5 |   "author": "Juan Martín Muda <juan.martin.muda@gmail.com>",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "keywords": [
12 |     "zircle",
13 |     "smart-home",
14 |     "tutorial",
15 |     "vue",
16 |     "javascript"
17 |   ],
18 |   "dependencies": {
19 |     "leaflet": "^1.4.0",
20 |     "smoothie": "^1.35.0",
21 |     "vue": "^2.6.10",
22 |     "vue-router": "^3.0.6",
23 |     "zircle": "^1.2.5"
24 |   },
25 |   "devDependencies": {
26 |     "@vue/cli-plugin-babel": "^3.6.0",
27 |     "@vue/cli-plugin-eslint": "^3.6.0",
28 |     "@vue/cli-service": "^3.6.0",
29 |     "@vue/eslint-config-standard": "^3.0.5",
30 |     "node-sass": "^4.12.0",
31 |     "sass-loader": "^7.0.1",
32 |     "vue-template-compiler": "^2.6.10"
33 |   },
34 |   "repository": {
35 |     "type": "git",
36 |     "url": "git+https://github.com/zircleui/tutorial.git"
37 |   },
38 |   "bugs": {
39 |     "url": "https://github.com/zircleui/tutorial/issues"
40 |   },
41 |   "homepage": "https://github.com/zircleui/tutorial#readme",
42 |   "license": "MIT"
43 | }
44 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zircleUI/smarthome-tutorial/65ef72c79c29718d88f9e427fc8882987431b90e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>smart-home</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but smart-home doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/public/living.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zircleUI/smarthome-tutorial/65ef72c79c29718d88f9e427fc8882987431b90e/public/living.jpg


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-canvas :views='$options.components'></z-canvas>
 3 | </template>
 4 | <script>
 5 | // TO SET UP VUE-ROUTER UNCOMMENT THE FOLLOWING LINES
 6 | // import Vue from 'vue'
 7 | // import Router from 'vue-router'
 8 | // Vue.use(Router)
 9 | // const router = new Router()
10 | export default {
11 |   components: {
12 |     tv: () => import('./views/tv'),
13 |     living: () => import('./views/living'),
14 |     search: () => import('./views/search'),
15 |     device: () => import('./views/device'),
16 |     home: () => import('./views/home'),
17 |     settings: () => import('./views/settings'),
18 |     rooms: () => import('./views/rooms'),
19 |     devices: () => import('./views/devices'),
20 |     status: () => import('./views/status'),
21 |     scenes: () => import('./views/scenes'),
22 |     family: () => import('./views/family'),
23 |     logs: () => import('./views/logs')
24 |   },
25 |   mounted () {
26 |     this.$zircle.config({
27 |       mode: 'full',
28 |       style: {
29 |         theme: 'black',
30 |         mode: 'dark'
31 |       },
32 |       debug: true
33 |     })
34 |     this.$zircle.setView('home')
35 |   }
36 | }
37 | </script>
38 | <style>
39 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
40 | @import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import zircle from 'zircle'
 4 | import 'zircle/dist/zircle.css'
 5 | Vue.use(zircle)
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/src/views/device.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     {{category}}
 4 |     <z-spot slot="extension"
 5 |       to-view='home'
 6 |       :distance='130'
 7 |       :angle='30'
 8 |       size='small' >
 9 |       {{qty}}
10 |     </z-spot>
11 |   </z-view>
12 | </template>
13 | <script>
14 | /*eslint-disable*/
15 | // just $route.params.category and $route.params.qty
16 | export default {
17 |   computed: {
18 |     category () {
19 |       if (this.$zircle.getParams() !== undefined) {
20 |         return this.$zircle.getParams().category
21 |       }
22 |     },
23 |     qty () {
24 |       if (this.$zircle.getParams() !== undefined) {
25 |         return this.$zircle.getParams().qty
26 |       }
27 |     }
28 |   }
29 | }
30 | </script>
31 | 
32 | 


--------------------------------------------------------------------------------
/src/views/devices.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     <section slot="extension">
 4 |       <z-list
 5 |         :items="devices"
 6 |         :per-page="5">
 7 |           <z-spot
 8 |             slot-scope="props"
 9 |             :index="props.index"
10 |             :distance="60"
11 |             :to-view="{ name: 'device', params: {category: props.category, qty: props.qty}}"
12 |             :label="props.category">
13 |             <span style="color: white;">{{props.qty}}</span>
14 |             <z-spot slot="extension"
15 |               :style="props.category === 'care' ? 'background-color: red; border: none;': 'background-color: green; border: none;'"
16 |               :angle='-45'
17 |               size='xxs'>
18 |             </z-spot>
19 |           </z-spot>
20 |       </z-list>
21 |     </section>
22 | </z-view>
23 | </template>
24 | <script>
25 | export default {
26 |   data () {
27 |     return {
28 |       devices: [
29 |         { category: 'cameras & sensors', qty: 4 },
30 |         { category: 'care', qty: 1 },
31 |         { category: 'climate', qty: 2 },
32 |         { category: 'doors & locks', qty: 2 },
33 |         { category: 'energy', qty: 1 },
34 |         { category: 'garage doors', qty: 1 },
35 |         { category: 'home & family', qty: 6 },
36 |         { category: 'lawn & garden', qty: 0 },
37 |         { category: 'lights & switches', qty: 13 },
38 |         { category: 'smoke & co', qty: 3 },
39 |         { category: 'voice assistant', qty: 1 },
40 |         { category: 'water', qty: 1 },
41 |         { category: 'windows & blinds', qty: 3 },
42 |         { category: 'entertainment', qty: 3 }
43 |       ]
44 |     }
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/views/family.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <z-view label="Leaflet | OpenStreetMap | CartoDB" ref="map">
 3 |     <div slot="media" :id="$zircle.getCurrentViewName()" style="height:100%; width: 100%;">
 4 |     </div>
 5 |     <section slot="extension">
 6 |        <z-spot button
 7 |         :angle="-90"
 8 |         size="s"
 9 |         :style="active === 0 ? 'border-color: purple; color: purple;' : ''"
10 |         label="Mary"
11 |         label-pos="top"
12 |         @click.native="showMe(0, 'purple')">
13 |         <i class="fas fa-female"></i>
14 |       </z-spot>
15 |       <z-spot button
16 |         :angle="30"
17 |         size="s"
18 |         label="John"
19 |         :style="active === 1 ? 'border-color: green; color: green;' : ''"
20 |         @click.native="showMe(1, 'green')">
21 |         <i class="fas fa-male"></i>
22 |       </z-spot>
23 |       <z-spot button
24 |         :angle="150"
25 |         size="s"
26 |         label="Peter"
27 |         :style="active === 2 ? 'border-color: orange; color: orange;' : ''"
28 |         @click.native="showMe(2, 'orange')">
29 |         <i class="fas fa-child"></i>
30 |       </z-spot>
31 |     </section>
32 |   </z-view>
33 | </template>
34 | <script>
35 | /*eslint-disable*/
36 | import L from 'leaflet'
37 | export default {
38 |   data () {
39 |     return {
40 |       map: null,
41 |       markers: [],
42 |       active: ''
43 |     }
44 |   },
45 |   methods: {
46 |     initMap () {
47 |       this.map = L.map(this.$zircle.getCurrentViewName(), {attributionControl: false, zoomControl: false}).setView([38.63, -90.23], 14)
48 |       L.tileLayer(
49 |         'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png',
50 |         { 
51 |           zoom: 18
52 |         }).addTo(this.map)
53 |       this.markers.push(
54 |         L.marker([38.60, -90.20]).bindPopup("Mary at work").addTo(this.map),
55 |         L.marker([38.63, -90.23]).bindPopup("John at home.").addTo(this.map).openPopup(),
56 |         L.marker([38.66, -90.26]).bindPopup("Peter at school").addTo(this.map)
57 |       )
58 |       this.active = 1
59 |       this.showMe(1, 'green')
60 |     },
61 |     showMe (index, color) {
62 |       this.map.panTo(this.markers[index].getLatLng())
63 |       this.markers[index].openPopup()
64 |       this.active = index
65 |       this.$refs.map.$el.style.borderColor = color
66 |     }
67 |   },
68 |   mounted () {
69 |     this.initMap()
70 |   }
71 | }
72 | </script>
73 | <style>
74 |   @import url('https://unpkg.com/leaflet@1.3.1/dist/leaflet.css');
75 | </style>
76 | 
77 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     11:53 PM
 4 |     <br>
 5 |     Monday, Oct.
 6 |     <br>
 7 |     <br>
 8 |     <h1>Night mode</h1>
 9 |     <br>
10 |     Outside 29˚C, sunny
11 |     <br>
12 |     Inside 25˚C
13 |     <div slot="extension">
14 |       <!-- status monitor -->
15 |       <z-spot
16 |         style="background-color: orange; border-width: 4px; border-color: var(--background-color);"
17 |         :angle="-145"
18 |         size="m"
19 |         :distance="120"
20 |         to-view="status">
21 |         <i style="color: var( --accent-text-color)" class="fas fa-bell"></i><br>
22 |         <span style="color: var( --accent-text-color)">15</span>
23 |       </z-spot>
24 |       <!-- family-->
25 |       <z-spot
26 |         :angle="-30"
27 |         size="s"
28 |         :distance="120"
29 |         label="family"
30 |         label-pos="right"
31 |         to-view="family">
32 |         <i class="fas fa-map-marker-alt"></i>
33 |       </z-spot>
34 |       <!-- scenes-->
35 |       <z-spot
36 |         :angle="0"
37 |         size="s"
38 |         :distance="120"
39 |         label="scenes"
40 |         label-pos="right"
41 |         to-view="scenes">
42 |         4
43 |       </z-spot>
44 |       <!-- rooms-->
45 |       <z-spot
46 |         :angle="30"
47 |         size="s"
48 |         :distance="120"
49 |         label="Rooms"
50 |         label-pos="right"
51 |         to-view="rooms">
52 |         5
53 |       </z-spot>
54 |       <!-- devices-->
55 |       <z-spot
56 |         :angle="60"
57 |         :distance="120"
58 |         size="s"
59 |         label="Devices"
60 |         label-pos="right"
61 |         to-view="devices">
62 |         45
63 |       </z-spot>
64 |       <!-- settings-->
65 |       <z-spot
66 |         :angle="150"
67 |         :distance="120"
68 |         size="s"
69 |         label="Settings"
70 |         to-view="settings">
71 |         <i class="fas fa-sliders-h"></i>
72 |       </z-spot>
73 |     </div>
74 |   </z-view>
75 | </template>
76 | 


--------------------------------------------------------------------------------
/src/views/living.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <z-view
  3 |   style="border-width: 8px"
  4 |   slider
  5 |   :progress="progress">
  6 |     <span style="color: var(--accent-text-color)">Living room
  7 |       <h1>{{activeScene}}</h1>
  8 |       {{msg}}
  9 |     </span>
 10 |     <img slot="image" src="living.jpg" width="100%" height="100%" style="opacity: 0.3">
 11 |     <div slot="extension">
 12 |       <z-spot
 13 |         v-for="(device, index) in devices"
 14 |         :button="device.name !== 'AC'"
 15 |         :knob="device.name === 'AC'"
 16 |         v-bind.sync="device.temp"
 17 |         :angle="1 + (180 / (devices.length - 1) * index)"
 18 |         :distance="100"
 19 |         size="m"
 20 |         :to-view="device.view"
 21 |         :label="device.name"
 22 |         :key="'dev_' + index">
 23 |         <i :class="device.icon"></i>
 24 |         <z-spot slot="extension"
 25 |           button
 26 |           :angle="-45"
 27 |           size="xxs"
 28 |           :style="device.state === 'on' ? 'border-color: green; background-color: green;' : 'border-color: red; background-color: red;'">
 29 |         </z-spot>
 30 |       </z-spot>
 31 |       <z-spot
 32 |         v-for="(scene, index) in scenes"
 33 |         button
 34 |         size="s"
 35 |         :angle="225 + (90 / (scenes.length - 1) * index)"
 36 |         :distance="125"
 37 |         :label="scene.name"
 38 |         label-pos="top"
 39 |         :key="'scn_' + index"
 40 |         @click.native="showMe(scene.name)">
 41 |         <i :class="scene.icon"></i>
 42 |       </z-spot>
 43 |     </div>
 44 |   </z-view>
 45 | </template>
 46 | <script>
 47 | /*eslint-disable*/
 48 | export default {
 49 |   data () {
 50 |     return {
 51 |       progress: 0,
 52 |       msg: '',
 53 |       activeScene: '',
 54 |       devices: [],
 55 |       scenes: [
 56 |         {name: 'Relax', state: 'active', icon: 'fas fa-book'},
 57 |         {name: 'Theatre', state: 'deactive', icon: 'fas fa-film'},
 58 |         {name: 'Party', state: 'deactive', icon: 'fas fa-birthday-cake'}
 59 |       ]
 60 |     }
 61 |   },
 62 |   computed: {
 63 |     retrieveParams () {
 64 |       if (this.$zircle.getParams() !== undefined) {
 65 |         return this.$zircle.getParams().room
 66 |       }
 67 |     }
 68 |   },
 69 |   methods: {
 70 |     log (data) {
 71 |       console.log(data)
 72 |     },
 73 |     showMe (scene) {
 74 |       if (this.activeScene !== scene) {
 75 |         this.progress = 5
 76 |         this.activeScene = scene
 77 |         this.msg = 'Activating devices...'
 78 |         var vm = this
 79 |         var id = setInterval(function () {
 80 |           if (vm.progress >= 100) {
 81 |             clearInterval(id)
 82 |             vm.progress = 0
 83 |             vm.msg = scene.msg
 84 |           } else if (vm.progress === 40) { 
 85 |             vm.msg = 'Applying rules...'
 86 |             if (scene === 'Relax') {
 87 |               vm.devices = [
 88 |                 {name: 'AC', state: 'on', temp: {qty: 24, unit: '˚C', min: 18, max: 32}},
 89 |                 {name: 'TV', state: 'off', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},
 90 |                 {name: 'Hifi', state: 'on', vol: 14, icon: 'fas fa-music'},
 91 |                 {name: 'Ambient light', state: 'off', icon: 'far fa-lightbulb'}
 92 |               ]
 93 |             } else if (scene === 'Theatre') {
 94 |               vm.devices = [
 95 |                 {name: 'AC', state: 'on', temp: {qty: 18, unit: '˚C', min: 18, max: 32}},
 96 |                 {name: 'TV', state: 'on', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},
 97 |                 {name: 'Hifi', state: 'off', vol: 14, icon: 'fas fa-music'},
 98 |                 {name: 'Ambient light', state: 'off', icon: 'far fa-lightbulb'}
 99 |               ]
100 |             } else if (scene === 'Party') {
101 |               vm.devices = [
102 |                 {name: 'AC', state: 'on', temp: {qty: 20, unit: '˚C', min: 18, max: 32}},
103 |                 {name: 'TV', state: 'off', vol: 14, bright: 30, source: 'youtube', icon: 'fas fa-tv', view: 'tv'},
104 |                 {name: 'Hifi', state: 'on', vol: 14, icon: 'fas fa-music'},
105 |                 {name: 'Ambient light', state: 'on', icon: 'far fa-lightbulb'}
106 |               ]
107 |             }
108 |             vm.progress ++
109 |           } else {
110 |             vm.progress ++
111 |           }
112 |         }, 20)
113 |       } else {
114 |         this.msg = 'This scene is already activated'
115 |       }
116 |     }
117 |   },
118 |   created () {
119 |     this.showMe('Relax')
120 |   }
121 | }
122 | </script>
123 | 
124 | 


--------------------------------------------------------------------------------
/src/views/logs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view style="border-width: 6px"  label="Console">
 3 |     <ul>
 4 |       <li v-for="(log, index) in console" :key="index">
 5 |         {{log}}
 6 |       </li>
 7 |     </ul>
 8 |     <div slot="extension">
 9 |       <z-spot
10 |         v-show="console.length > 1"
11 |         button
12 |         :angle="45"
13 |         size="s"
14 |         :distance="120"
15 |         label="Reset"
16 |         @click.native="openDialog = true">
17 |           <i class="fas fa-trash"></i>
18 |       </z-spot>
19 |       <z-dialog v-if="openDialog" self-close v-on:done="openDialog = false">
20 |         Are your sure?
21 |         <div slot=extension>
22 |           <z-spot
23 |           class="success"
24 |           button
25 |           :angle="45"
26 |           size="s"
27 |           :distance="120"
28 |           @click.native="reset">
29 |             <i class="fas fa-check"></i>
30 |           </z-spot>
31 |           <z-spot
32 |           class="danger"
33 |           button
34 |           :angle="135"
35 |           size="s"
36 |           :distance="120"
37 |           @click.native="openDialog = false">
38 |             <i class="fas fa-times"></i>
39 |           </z-spot>
40 |         </div>
41 |       </z-dialog>
42 |     </div>
43 |   </z-view>
44 | </template>
45 | <script>
46 | export default {
47 |   data () {
48 |     return {
49 |       openDialog: false,
50 |       console: [
51 |         '12:30pm - Mary arrived home',
52 |         '12:34pm - Peter arrived home',
53 |         '1:30pm - Relax scene activated',
54 |         '1:50pm - Peter arrived home',
55 |         '4:00pm - Away scene activated',
56 |         '5:10pm - Movement detected',
57 |         '5:10pm - Video alert sent to Peter',
58 |         '6:00pm - At Home scene activated',
59 |         '6:01pm - Ambient lights turned on',
60 |         '6:01pm - Playing Mary music list',
61 |         '6:15pm - Problem with camera device',
62 |         '6:16pm - Camera is working after reset',
63 |         '6:45pm - Ambient lights turned off',
64 |         '7:01pm - Theatre turned on',
65 |         '8:00pm - Night scene activaded'
66 |       ]
67 |     }
68 |   },
69 |   methods: {
70 |     reset () {
71 |       this.console = ['No events available']
72 | 
73 |       this.openDialog = false
74 |     }
75 |   }
76 | }
77 | </script>
78 | <style>
79 | li {
80 |   line-height: 40px;
81 |   border-bottom: 1px solid white
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/views/rooms.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     Rooms
 4 |     <section slot="extension">
 5 |       <z-list
 6 |         :items="rooms"
 7 |         :per-page="3">
 8 |           <z-spot
 9 |             :distance="60"
10 |             slot-scope="props"
11 |             :index="props.index"
12 |             :to-view="props.name"
13 |             :label="props.name"
14 |             :image-path="props.image"
15 |             label-pos="bottom">
16 |             <z-spot slot="extension"
17 |               v-if="props.status"
18 |               style="background-color: red; border: none;"
19 |               :angle='-45'
20 |               size='xxs'>
21 |             </z-spot>
22 |           </z-spot>
23 |       </z-list>
24 |       <z-spot
25 |         button
26 |         :angle="45"
27 |         size="s"
28 |         :distance="120"
29 |         label="Add"
30 |         @click.native="openDialog = true">
31 |           <i class="fas fa-plus"></i>
32 |       </z-spot>
33 |       <z-dialog v-if="openDialog" self-close v-on:done="openDialog = false">
34 |         Add a new room?
35 |         <div slot=extension>
36 |           <z-spot
37 |           class="success"
38 |           button
39 |           :angle="45"
40 |           size="s"
41 |           :distance="120"
42 |           @click.native="openDialog = false">
43 |             <i class="fas fa-check"></i>
44 |           </z-spot>
45 |           <z-spot
46 |           class="danger"
47 |           button
48 |           :angle="135"
49 |           size="s"
50 |           :distance="120"
51 |           @click.native="openDialog = false">
52 |             <i class="fas fa-times"></i>
53 |           </z-spot>
54 |         </div>
55 |       </z-dialog>
56 |     </section>
57 | </z-view>
58 | </template>
59 | <script>
60 | export default {
61 |   data () {
62 |     return {
63 |       rooms: [
64 |         { name: 'Living', devices: 6, image: './living.jpg' },
65 |         { name: 'Bedroom', devices: 2, status: 'alert' },
66 |         { name: 'Kitchen', devices: 5 },
67 |         { name: 'Studio', devices: 1 },
68 |         { name: 'Bath', devices: 1 }
69 |       ],
70 |       openDialog: false
71 |     }
72 |   }
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/views/scenes.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view
 3 |   label="Scenes"
 4 |   slider
 5 |   :progress="progress"
 6 |   :style="styleActive">
 7 |   <h1>{{activeScene}}</h1>
 8 |   <div style="height: 60px;">
 9 |     {{msg}}
10 |   </div>
11 |   <div slot="extension">
12 |         <z-spot
13 |           v-for="(el, index) in elements"
14 |           button
15 |           size="s"
16 |           :distance="120"
17 |           :angle="325 + (90 / elements.length * index)"
18 |           :style="activeScene === el.scene ? styleActive : ''"
19 |           :key="index"
20 |           @click.native="showMe(el)">
21 |           <i class="fas" :class="el.icon"></i>
22 |         </z-spot>
23 |     </div>
24 |   </z-view>
25 | </template>
26 | <script>
27 | export default {
28 |   data () {
29 |     return {
30 |       activeScene: 'Night',
31 |       color: 'blue',
32 |       msg: '',
33 |       progress: 0,
34 |       elements: [
35 |         { scene: 'Day', color: 'orange', icon: 'fa-sun', msg: 'Cooling rooms, blinds opened, playing ambient music' },
36 |         { scene: 'Night', color: 'blue', icon: 'fa-moon', msg: 'Blinds closed, AC in silence mode, motion sensors active' },
37 |         { scene: 'Away', color: 'red', icon: 'fa-shield-alt', msg: 'Alarm armed, cameras activated, blinds closed' },
38 |         { scene: 'At home', color: 'green', icon: 'fa-home', msg: 'Lights in ambient mode, playing relax music, coffee is being prepared' }
39 |       ]
40 |     }
41 |   },
42 |   computed: {
43 |     styleActive () {
44 |       return {
45 |         borderWidth: '8px',
46 |         borderColor: this.color,
47 |         color: this.color
48 |       }
49 |     }
50 |   },
51 |   methods: {
52 |     showMe (el) {
53 |       if (this.activeScene !== el.scene) {
54 |         this.progress = 5
55 |         this.activeScene = el.scene
56 |         this.color = el.color
57 |         this.msg = 'Activating devices...'
58 |         var vm = this
59 |         var id = setInterval(function () {
60 |           if (vm.progress >= 100) {
61 |             clearInterval(id)
62 |             vm.progress = 0
63 |             vm.msg = el.msg
64 |           } else if (vm.progress === 40) {
65 |             vm.msg = 'Applying rules...'
66 |             vm.progress++
67 |           } else {
68 |             vm.progress++
69 |           }
70 |         }, 20)
71 |       } else {
72 |         this.msg = 'This scene is already activated'
73 |       }
74 |     }
75 |   }
76 | }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/src/views/search.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     <form action="search_submit" method="get" accept-charset="utf-8">
 4 |       <input type="text" name="devices">
 5 |     </form>
 6 |   <div slot="extension">
 7 |          <z-spot
 8 |           :angle="45"
 9 |           size="m"
10 |           :distance="120"
11 |           label="Search"
12 |           to-view="devices">
13 |           <i class="fa fas-search"></i>
14 |         </z-spot>
15 |     </div>
16 |   </z-view>
17 | </template>
18 | <script>
19 | export default {
20 |   data () {
21 |     return {
22 |       scene: 'Night scene'
23 |     }
24 |   },
25 |   mounted () {
26 |   }
27 | }
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/views/settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view label="Settings">
 3 |   {{ theme }}
 4 |     <div slot="extension">
 5 |         <z-spot
 6 |           v-for="(el, index) in elements"
 7 |           button
 8 |           size="xs"
 9 |           :distance="120"
10 |           :angle="el.angle"
11 |           :label="el.label"
12 |           :label-pos="el.labelPos"
13 |           :class="$zircle.getTheme() === 'theme-' + el.label ||
14 |           $zircle.getThemeMode() === 'mode-' + el.label ? 'accent' : ''"
15 |           :key="index"
16 |           @click.native="changeStyle(el)"
17 |           />
18 |     </div>
19 |   </z-view>
20 | </template>
21 | <script>
22 | export default {
23 |   data () {
24 |     return {
25 |       theme: 'Select your theme',
26 |       elements: [
27 |         { type: 'theme', angle: -50, label: 'blue', labelPos: 'right' },
28 |         { type: 'theme', angle: -30, label: 'black', labelPos: 'right' },
29 |         { type: 'theme', angle: -10, label: 'green', labelPos: 'right' },
30 |         { type: 'theme', angle: 10, label: 'red', labelPos: 'right' },
31 |         { type: 'theme', angle: 30, label: 'light-blue', labelPos: 'right' },
32 |         { type: 'theme', angle: 50, label: 'gray', labelPos: 'right' },
33 |         { type: 'mode', angle: 210, label: 'dark', labelPos: 'left' },
34 |         { type: 'mode', angle: 190, label: 'dark-filled', labelPos: 'left' },
35 |         { type: 'mode', angle: 170, label: 'light', labelPos: 'left' },
36 |         { type: 'mode', angle: 150, label: 'light-filled', labelPos: 'left' }
37 |       ]
38 |     }
39 |   },
40 |   methods: {
41 |     changeStyle (el) {
42 |       el.type === 'theme'
43 |         ? this.$zircle.config({ style: { theme: el.label } })
44 |         : this.$zircle.config({ style: { mode: el.label } })
45 |       var theme = this.$zircle.getTheme().split('theme-')[1]
46 |       var mode = this.$zircle.getThemeMode().split('mode-')[1]
47 |       this.theme = `The theme is ${theme} ${mode}`
48 |     }
49 |   }
50 | }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/src/views/status.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view label="Home status" style="background-color: black">
 3 |   <canvas slot="media" id="smoothie-chart" style="height:50%; width: inherit;"></canvas>
 4 |   <div slot="extension">
 5 |          <z-spot
 6 |           :angle="-45"
 7 |           size="m"
 8 |           :distance="120"
 9 |           label="Events"
10 |           to-view="logs">
11 |           15
12 |         </z-spot>
13 |     </div>
14 |   </z-view>
15 | </template>
16 | <script>
17 | import { TimeSeries, SmoothieChart } from 'smoothie'
18 | export default {
19 |   data () {
20 |     return {
21 |       scene: 'Night scene'
22 |     }
23 |   },
24 |   mounted () {
25 |     // Random data
26 |     var line1 = new TimeSeries()
27 |     // Add random data points at irregular intervals
28 |     var maxYValue = 10000
29 |     var addValueLoop = function () {
30 |       setTimeout(function () {
31 |         // Generate a random value, centered around zero, raised to the power of 5
32 |         // so that larger values occur less frequently
33 |         var value = Math.pow(Math.random() * 2 - 1, 5) * maxYValue
34 |         line1.append(new Date().getTime(), value)
35 |         addValueLoop()
36 |       }, Math.random() * 500)
37 |     }
38 |     addValueLoop()
39 |     var smoothie = new SmoothieChart({
40 |       grid: {
41 |         strokeStyle: 'transparent',
42 |         borderVisible: false
43 |       },
44 |       tooltip: true,
45 |       labels: { disabled: true }
46 |     })
47 |     smoothie.addTimeSeries(line1, {
48 |       strokeStyle: 'rgb(0, 255, 0)',
49 |       fillStyle: 'rgba(0, 255, 0, 0.4)',
50 |       lineWidth: 2
51 |     })
52 |     smoothie.streamTo(document.getElementById('smoothie-chart'), 100)
53 |   }
54 | }
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/views/tv.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <z-view>
 3 |     <iframe slot="media" width="100%" height="100%" src="https://www.youtube.com/embed/aJOTlE1K90k" frameborder="0" allowfullscreen></iframe>
 4 |      Channel 9
 5 | 
 6 |           <div slot="extension">
 7 |             <z-spot button
 8 |               :distance='130'
 9 |               :angle='-15'
10 |               size='s'>
11 |               +
12 |             </z-spot>
13 |             <z-spot button
14 |               :distance='130'
15 |               :angle='15'
16 |               size='s'>
17 |               -
18 |             </z-spot>
19 |             <z-spot button
20 |               class="success"
21 |               :distance='110'
22 |               :angle='-45'
23 |               size='s'>
24 |               <i class="fa fa-power-off"></i>
25 |             </z-spot>
26 |             <z-spot button
27 |               :distance='100'
28 |               :angle='135'
29 |               :progress="14"
30 |               size='s'
31 |               label="vol">
32 |             </z-spot>
33 |             <z-spot button
34 |               class="accent"
35 |               :distance='100'
36 |               :angle='45'
37 |               size='s'
38 |               label="ch.">
39 |             </z-spot>
40 |           </div>
41 | 
42 |   </z-view>
43 | </template>
44 | <script>
45 | /*eslint-disable*/
46 | export default {
47 |   data () {
48 |     return {
49 |       items: [
50 |         {name: 'tv', state: 'on', vol: 14, bright: 30, channel: '3'},
51 |         {name: 'lights', state: 'on', color: 'red'},
52 |         {name: 'lights', state: 'on', color: 'green'},
53 |         {name: 'lights', state: 'off', color: 'white'},
54 |         {name: 'Air', state: 'on', temp: 29},
55 |         {name: 'Camera', state: 'off'}
56 |       ]
57 |     }
58 |   },
59 |   computed: {
60 |     retrieveParams () {
61 |       if (this.$zircle.getParams() !== undefined) {
62 |         return this.$zircle.getParams().room
63 |       }
64 |     }
65 |   }
66 | }
67 | </script>
68 | 
69 | 


--------------------------------------------------------------------------------