From f12c6db34f045b97bd035fb13c7e55fc1850f38e Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Fri, 19 Jul 2019 15:20:48 +0200 Subject: [PATCH] Added camera web panel --- .../source/webpanel/plugins/camera/index.scss | 39 +++++++++++++ .../http/static/js/plugins/camera/index.js | 58 +++++++++++++++++++ platypush/backend/http/templates/nav.html | 1 + .../http/templates/plugins/camera/index.html | 23 ++++++++ 4 files changed, 121 insertions(+) create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss create mode 100644 platypush/backend/http/static/js/plugins/camera/index.js create mode 100644 platypush/backend/http/templates/plugins/camera/index.html diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss new file mode 100644 index 000000000..9b3693499 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss @@ -0,0 +1,39 @@ +@import 'common/vars'; + +.camera { + height: 90%; + margin-top: 7%; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + + .camera-container { + min-width: 640px; + min-height: 480px; + position: relative; + background: black; + margin-bottom: 1em; + + .frame, .no-frame { + position: absolute; + top: 0; + width: 100%; + height: 100%; + } + + .frame { + z-index: 1; + } + + .no-frame { + display: flex; + background: rgba(0, 0, 0, 0.1); + color: white; + align-items: center; + justify-content: center; + z-index: 2; + } + } +} + diff --git a/platypush/backend/http/static/js/plugins/camera/index.js b/platypush/backend/http/static/js/plugins/camera/index.js new file mode 100644 index 000000000..6ce0edce2 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/camera/index.js @@ -0,0 +1,58 @@ +Vue.component('camera', { + template: '#tmpl-camera', + props: ['config'], + + data: function() { + return { + bus: new Vue({}), + streaming: false, + capturing: false, + }; + }, + + computed: { + deviceId: function() { + return this.config.device_id || 0; + }, + }, + + methods: { + startStreaming: function() { + if (this.streaming) + return; + + this.streaming = true; + this.capturing = false; + this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/stream'); + }, + + stopStreaming: function() { + if (!this.streaming) + return; + + this.streaming = false; + this.capturing = false; + this.$refs.frame.removeAttribute('src'); + }, + + capture: function() { + if (this.capturing) + return; + + this.streaming = false; + this.capturing = true; + this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/frame'); + }, + + onFrameLoaded: function(event) { + if (this.capturing) { + this.capturing = false; + } + }, + }, + + mounted: function() { + this.$refs.frame.addEventListener('load', this.onFrameLoaded); + }, +}); + diff --git a/platypush/backend/http/templates/nav.html b/platypush/backend/http/templates/nav.html index 009d1de7f..950505205 100644 --- a/platypush/backend/http/templates/nav.html +++ b/platypush/backend/http/templates/nav.html @@ -1,5 +1,6 @@ {% with pluginIcons = { + 'camera': 'fas fa-camera', 'light.hue': 'fa fa-lightbulb', 'media.mplayer': 'fa fa-film', 'media.mpv': 'fa fa-film', diff --git a/platypush/backend/http/templates/plugins/camera/index.html b/platypush/backend/http/templates/plugins/camera/index.html new file mode 100644 index 000000000..18d23b73a --- /dev/null +++ b/platypush/backend/http/templates/plugins/camera/index.html @@ -0,0 +1,23 @@ + +