From e24725c3172d542ec9a4b65215cddd1dab9c54bb Mon Sep 17 00:00:00 2001 From: j7126 Date: Sat, 10 Oct 2020 11:56:34 +1000 Subject: [PATCH 01/21] added default webcam option --- octoprint_dashboard/__init__.py | 4 +-- .../static/img/webcam-icon-no-background.png | Bin 0 -> 1871 bytes octoprint_dashboard/static/js/dashboard.js | 31 +++++++++++------- .../templates/dashboard_settings.jinja2 | 12 ++++++- .../templates/dashboard_tab.jinja2 | 4 +-- 5 files changed, 35 insertions(+), 16 deletions(-) create mode 100644 octoprint_dashboard/static/img/webcam-icon-no-background.png diff --git a/octoprint_dashboard/__init__.py b/octoprint_dashboard/__init__.py index 95574cc..5ccaede 100644 --- a/octoprint_dashboard/__init__.py +++ b/octoprint_dashboard/__init__.py @@ -190,8 +190,8 @@ def get_settings_defaults(self): rotate=octoprint.settings.settings().get(["webcam","rotate90"]), disableNonce=False, streamRatio=octoprint.settings.settings().get(["webcam","streamRatio"]), - )] - + )], + defaultWebcam=0 ) def on_settings_save(self, data): diff --git a/octoprint_dashboard/static/img/webcam-icon-no-background.png b/octoprint_dashboard/static/img/webcam-icon-no-background.png new file mode 100644 index 0000000000000000000000000000000000000000..93e06d783e8ad12e3e4bb22223f46bd929575c71 GIT binary patch literal 1871 zcmeHH`#aMM93Hb_Hj^ zh=XFvC6~jhxu&_~GL9s-$mQryIKP~q&ig#?`~LF2zkEK=^Cr+~WCUyn3?qG0|1-sP~vLfy~M&p3&+ooHZmb~Q5@7U>c$4YfvhL&4D>Zk)4mRBhG)Pmw?>s8f5CC8eH4!V3zAV_ygwh~G`?QeV}qzkD(` zDduDisrQ>X*qhg<+p~e*O9`Y$bV&u*gE9BjE3UzlKN8@BvSb>$4iP=>12t^h;zb`$ zVC&a&se#qzbeC4MQ3Ime>zxJnC+W6gc)|7@zuQh}&?DhY=X#E@BLy+NL{8I9 zm@3ETO89TKATzm{Zw%E_wL^AQ7$Jp@H@Q7=JjEk84Sd%j)?EJIe()xJtVs4i_QVVK zc-^5{G$4(K!s;IeX-21F^!x|y{nCtE%P|*QI!E_$Kj!vdLi>Em`xq<-NtOnp;@IOs zZ|xWX>w6P>OJnmUHBXlk8^Ws&5eZ_mM0c}66tDFcmwfCWBbbZ}Sd}5c;hYH#r0Kg+ zE!fG+_ft8-*%;n2OeG~<4%T&|4~I6#uD~E`K?y?95tUxdxB7Tw546RbF%N;5%p1d- zV1O7S*$+G!+P^6EQse9b7+h8oj~tLO@7b+0qYO|n5;>q^sFKX;PU$8wlv>P5jNRyw z`TI7X0QLj=D+aq%Xym}sZBBGT0?SZr6|@QcQZGflKmZ+`$`hz@#^=r0HTp1PXv=2Z z5Un;JtR3o#`3{GuvPpxLj;!hCsRAYhmIQ{KsTYx0h~{uRp@|@bER@IF`h+cmnsgwF zf{Yx2496mjqSIl|2vFP;hOI)7<*jgglMhk2bEMIVIO)S9OrM6RMV*pnWC4IM7v-Hg>G$U z;2Z+`3*neGV4(&vf6x8V2Pc1yiuqt6C|)6n7A=scKIOG7hT@aF*!&#-41?!*r&=5J z@G2NY7dbjicTMB9Zs82{4cC^G58EeGMYvTIKQThx`f6K2s9z+1TT`D2(#zv(o^QOt zB5`%AZ?*O8b^qYiET6%`EcofHx@-x?NQp66K3*Q=o_1%d zE{+8ty>rr>G%GX%%noAjy>XM~yKMC?NOPh*x<@;rm&>5m+^Xh2;G}PllTBR7q%#@T zYB1cSw{0}Ab`1uQ7#@_4*qYpFKP;){^Lf}Gi0 OXb=UU*_GNdWBviYFWKb) literal 0 HcmV?d00001 diff --git a/octoprint_dashboard/static/js/dashboard.js b/octoprint_dashboard/static/js/dashboard.js index f970cee..e127a70 100644 --- a/octoprint_dashboard/static/js/dashboard.js +++ b/octoprint_dashboard/static/js/dashboard.js @@ -64,6 +64,8 @@ $(function () { self.urlParams = new URLSearchParams(window.location.search); var dashboardIsFull = self.urlParams.has('dashboard') && (self.urlParams.get('dashboard') == 'full'); + self.bindingDone = false; + //Themeify coloring var style = $(''); $('html > head').append(style); @@ -539,6 +541,11 @@ $(function () { self.commandWidgetArray(self.settingsViewModel.settings.plugins.dashboard.commandWidgetArray()); }; + self.onAfterBinding = function () { + self.bindingDone = true; + self.switchWebcam(self.settingsViewModel.settings.plugins.dashboard.defaultWebcam() + 1); + }; + self.toggleWebcam = function () { if (self.webcamState() == 0) { @@ -551,19 +558,21 @@ $(function () { const webcamLoadingIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' width='128px' height='128px' viewBox='-256 -256 640 640' xml:space='preserve'%3E%3Cg%3E%3Ccircle cx='16' cy='64' r='16' fill='%23000000' fill-opacity='1'/%3E%3Ccircle cx='16' cy='64' r='14.344' fill='%23000000' fill-opacity='1' transform='rotate(45 64 64)'/%3E%3Ccircle cx='16' cy='64' r='12.531' fill='%23000000' fill-opacity='1' transform='rotate(90 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.75' fill='%23000000' fill-opacity='1' transform='rotate(135 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.063' fill='%23000000' fill-opacity='1' transform='rotate(180 64 64)'/%3E%3Ccircle cx='16' cy='64' r='8.063' fill='%23000000' fill-opacity='1' transform='rotate(225 64 64)'/%3E%3Ccircle cx='16' cy='64' r='6.438' fill='%23000000' fill-opacity='1' transform='rotate(270 64 64)'/%3E%3Ccircle cx='16' cy='64' r='5.375' fill='%23000000' fill-opacity='1' transform='rotate(315 64 64)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64' calcMode='discrete' dur='720ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"; const webcamLoadingIconLight = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' width='128px' height='128px' viewBox='-256 -256 640 640' xml:space='preserve'%3E%3Cg%3E%3Ccircle cx='16' cy='64' r='16' fill='%23ffffff' fill-opacity='1'/%3E%3Ccircle cx='16' cy='64' r='14.344' fill='%23ffffff' fill-opacity='1' transform='rotate(45 64 64)'/%3E%3Ccircle cx='16' cy='64' r='12.531' fill='%23ffffff' fill-opacity='1' transform='rotate(90 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.75' fill='%23ffffff' fill-opacity='1' transform='rotate(135 64 64)'/%3E%3Ccircle cx='16' cy='64' r='10.063' fill='%23ffffff' fill-opacity='1' transform='rotate(180 64 64)'/%3E%3Ccircle cx='16' cy='64' r='8.063' fill='%23ffffff' fill-opacity='1' transform='rotate(225 64 64)'/%3E%3Ccircle cx='16' cy='64' r='6.438' fill='%23ffffff' fill-opacity='1' transform='rotate(270 64 64)'/%3E%3Ccircle cx='16' cy='64' r='5.375' fill='%23ffffff' fill-opacity='1' transform='rotate(315 64 64)'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64' calcMode='discrete' dur='720ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"; self.switchWebcam = function (cameraNum) { - if (cameraNum != self.webcamState()) { - document.getElementById('dashboard_webcam_image').setAttribute('src', document.fullscreenElement && !self.settingsViewModel.settings.plugins.dashboard.fullscreenUseThemeColors() ? webcamLoadingIconLight : webcamLoadingIcon); - } - setTimeout(() => { - var webcamIndex = cameraNum - 1; - var webcam = self.settingsViewModel.settings.plugins.dashboard._webcamArray()[webcamIndex]; + if (self.bindingDone) { + if (cameraNum != self.webcamState()) { + document.getElementById('dashboard_webcam_image').setAttribute('src', document.fullscreenElement && !self.settingsViewModel.settings.plugins.dashboard.fullscreenUseThemeColors() ? webcamLoadingIconLight : webcamLoadingIcon); + } + setTimeout(() => { + var webcamIndex = cameraNum - 1; + var webcam = self.settingsViewModel.settings.plugins.dashboard._webcamArray()[webcamIndex]; - self.rotate(webcam.rotate()); - self.flipH(webcam.flipH()); - self.flipV(webcam.flipV()); + self.rotate(webcam.rotate()); + self.flipH(webcam.flipH()); + self.flipV(webcam.flipV()); - self.webcamState(cameraNum); - }, 100); + self.webcamState(cameraNum); + }, 100); + } } self.webcamRatioClass = function () { diff --git a/octoprint_dashboard/templates/dashboard_settings.jinja2 b/octoprint_dashboard/templates/dashboard_settings.jinja2 index 4627245..148ef4c 100644 --- a/octoprint_dashboard/templates/dashboard_settings.jinja2 +++ b/octoprint_dashboard/templates/dashboard_settings.jinja2 @@ -297,6 +297,16 @@ data-bind="checked: settingsViewModel.settings.plugins.dashboard.enableDashMultiCam"> +
+
+ +
+ +
+
{{ _('Name') }}
@@ -358,7 +368,7 @@
-