From b21193dc74f6cdd4a92c6be0595cc41dfe1a86e4 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sun, 27 Sep 2020 03:09:14 +0200 Subject: [PATCH] Added camera.ffmpeg plugin web panel --- .../css/dist/webpanel/plugins/camera.css | 2 +- .../webpanel/plugins/camera.android.ipcam | 2 +- .../css/source/webpanel/plugins/camera.ffmpeg | 1 + .../webpanel/plugins/camera.ir.mlx90640 | 2 +- .../css/source/webpanel/plugins/camera.pi | 2 +- .../source/webpanel/plugins/camera/index.scss | 116 ++++++++++++++++++ .../static/js/plugins/camera.ffmpeg/index.js | 15 +++ .../http/static/js/plugins/camera.pi/index.js | 4 - .../plugins/camera.ffmpeg/index.html | 6 + 9 files changed, 142 insertions(+), 8 deletions(-) create mode 120000 platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss create mode 100644 platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js create mode 100644 platypush/backend/http/templates/plugins/camera.ffmpeg/index.html diff --git a/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css b/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css index 5037c711..1b515f92 100644 --- a/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css +++ b/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css @@ -1 +1 @@ -.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{min-width:640px;min-height:480px;position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2} +.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}.camera .url{width:640px;display:flex;margin:1em}.camera .url .row{width:100%;display:flex;align-items:center}.camera .url .name{width:140px}.camera .url input{width:500px;font-weight:normal}.camera .params{margin-top:1em;padding:1em;width:640px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:1em}.camera .params label{font-weight:normal}.camera .params .head{display:flex;justify-content:center}.camera .params .head label{width:100%;display:flex;justify-content:right}.camera .params .head label .name{margin-right:1em}.camera .params .body{display:flex;flex-direction:column;margin:0 0 0 -1em}.camera .params .body .row{width:100%;display:flex;align-items:center;padding:.5em}.camera .params .body .row .name{width:30%}.camera .params .body .row input{width:70%}.camera .params .body .row:nth-child(even){background:#e4e4e4}.camera .params .body .row:hover{background:#def6ea} diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam b/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam index 74de6c32..5f839334 120000 --- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam @@ -1 +1 @@ -camera.cv \ No newline at end of file +camera \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg new file mode 120000 index 00000000..5f839334 --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg @@ -0,0 +1 @@ +camera \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640 b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640 index 74de6c32..5f839334 120000 --- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640 +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640 @@ -1 +1 @@ -camera.cv \ No newline at end of file +camera \ No newline at end of file diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi b/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi index 74de6c32..5f839334 120000 --- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi @@ -1 +1 @@ -camera.cv \ No newline at end of file +camera \ No newline at end of file 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 00000000..f8fc3bcc --- /dev/null +++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss @@ -0,0 +1,116 @@ +@import 'common/vars'; + +.camera { + min-height: 90%; + margin-top: 4%; + overflow: auto; + display: flex; + flex-direction: column; + align-items: center; + + .camera-container { + 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; + } + } + + .url { + width: 640px; + display: flex; + margin: 1em; + + .row { + width: 100%; + display: flex; + align-items: center; + } + + .name { + width: 140px; + } + + input { + width: 500px; + font-weight: normal; + } + } + + .params { + margin-top: 1em; + padding: 1em; + width: 640px; + display: flex; + flex-direction: column; + border: $default-border-3; + border-radius: 1em; + + label { + font-weight: normal; + } + + .head { + display: flex; + justify-content: center; + + label { + width: 100%; + display: flex; + justify-content: right; + + .name { + margin-right: 1em; + } + } + } + + .body { + display: flex; + flex-direction: column; + margin: 0 0 0 -1em; + + .row { + width: 100%; + display: flex; + align-items: center; + padding: 0.5em; + + .name { + width: 30%; + } + + input { + width: 70%; + } + + &:nth-child(even) { + background: $default-bg-6; + } + + &:hover { + background: $hover-bg; + } + } + } + } +} + diff --git a/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js b/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js new file mode 100644 index 00000000..5e8ee321 --- /dev/null +++ b/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js @@ -0,0 +1,15 @@ +Vue.component('camera-ffmpeg', { + template: '#tmpl-camera-ffmpeg', + mixins: [cameraMixin], + + methods: { + startStreaming: function() { + this._startStreaming('ffmpeg'); + }, + + capture: function() { + this._capture('ffmpeg'); + }, + }, +}); + diff --git a/platypush/backend/http/static/js/plugins/camera.pi/index.js b/platypush/backend/http/static/js/plugins/camera.pi/index.js index d7f4a9c0..7341c589 100644 --- a/platypush/backend/http/static/js/plugins/camera.pi/index.js +++ b/platypush/backend/http/static/js/plugins/camera.pi/index.js @@ -11,9 +11,5 @@ Vue.component('camera-pi', { this._capture('pi'); }, }, - - mounted: function() { - this.attrs.resolution = [640, 480]; - } }); diff --git a/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html b/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html new file mode 100644 index 00000000..bb22481c --- /dev/null +++ b/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html @@ -0,0 +1,6 @@ + + + +