Added a fullbrowser button

j7126 · Oct 13, 2019 · e2b5a44 · e2b5a44
1 parent d8eee2c
commit e2b5a44
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 20 deletions.
diff --git a/octoprint_dashboard/static/css/dashboard.css b/octoprint_dashboard/static/css/dashboard.css
@@ -6,7 +6,7 @@
 
 .dashboardGridItem>* {
   border: 0px solid rgba(0, 0, 0, 0.8);
-  padding: 10px;
+  padding: 5px;
   font-size: 20px;
   text-align: left;
   vertical-align: middle;
@@ -33,6 +33,13 @@
   -webkit-user-drag: none;
 }
 
+#fullWindowIcon {
+  width: auto;
+  height: 15px;
+  float: right;
+  -webkit-user-drag: none;
+}
+
 .dashboardButton {
   width: 95%;
 }
@@ -213,7 +220,7 @@ svg text {
 
 .dasboardContainer:-moz-full-screen .dashboardGridItem {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding-bottom: 0px;
 }
 
@@ -275,7 +282,7 @@ svg text {
 
 .dasboardContainer:-ms-fullscreen .dashboardGridItem {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding-bottom: 0px;
 }
 
@@ -337,7 +344,7 @@ svg text {
 
 .dasboardContainer:-webkit-full-screen .dashboardGridItem {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding-bottom: 0px;
 }
 
@@ -399,7 +406,7 @@ svg text {
 
 .dasboardContainer:fullscreen .dashboardGridItem {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding-bottom: 0px;
 }
 
@@ -466,7 +473,7 @@ svg text {
 
 .dasboardContainer.dashboard-full .dashboardGridItem {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding-bottom: 0px;
 }
 

diff --git a/octoprint_dashboard/static/img/fullscreen-icon.png b/octoprint_dashboard/static/img/fullscreen-icon.png
diff --git a/octoprint_dashboard/static/img/fullwindow-icon.png b/octoprint_dashboard/static/img/fullwindow-icon.png
diff --git a/octoprint_dashboard/static/js/dashboard.js b/octoprint_dashboard/static/js/dashboard.js
@@ -51,22 +51,29 @@ $(function () {
         self.urlParams = new URLSearchParams(window.location.search);
         var dashboardIsFull = self.urlParams.has('dashboard') && (self.urlParams.get('dashboard') == 'full');
 
-
         //Notify user if displaylayerprogress plugin is not installed
         self.DisplayLayerProgressAvailable = function () {
             if (self.settingsViewModel.settings.plugins.DisplayLayerProgress)
-                return;
+                return true;
             else {
                 printerDisplay = new PNotify({
                     title: 'Dashboard',
                     type: 'warning',
-                    text: 'Can\'t get stats from <a href="https://plugins.octoprint.org/plugins/DisplayLayerProgress/"" target="_blank">DisplayLayerProgress</a>. This plugin is required and provides GCode parsing for Fan Speed, Layer/Height info and Average layer time. Is it installed, enabled and on the latest version?',
+                    text: 'Can\'t get stats from <a href="https://plugins.octoprint.org/plugins/DisplayLayerProgress/"" target="_blank">DisplayLayerProgress</a>. This plugin is required and provides GCode parsing for Fan Speed, Layer/Height info, Layer Durations and Average layer time. Is it installed, enabled and on the latest version?',
                     hide: false
                 });
-                return "Warning: Can't get stats from <a href='https://plugins.octoprint.org/plugins/DisplayLayerProgress/' target='_blank'>DisplayLayerProgress</a>. Is it installed, enabled and on the latest version?";
+                return false; 
             }
         };
 
+        self.toggleFullBrowserWindow = function () {
+            if (!dashboardIsFull)
+                location.href="/?dashboard=full";
+            else
+                window.history.back();
+        }
+
+
         // Toggle fullscreen
         self.fullScreen = function () {
             var elem = document.body;

diff --git a/octoprint_dashboard/templates/dashboard_settings.jinja2 b/octoprint_dashboard/templates/dashboard_settings.jinja2
@@ -54,7 +54,7 @@
     <legend>{{ _('Widget Visibility') }}</legend>
     <div class="control-group">
         <div >
-            <label class="checkbox">{{ _('Show Fullscreen Mode Button') }}
+            <label class="checkbox">{{ _('Show FullScreen & FullBrowser Mode Buttons') }}
                 <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showFullscreen">
             </label>
         </div>

diff --git a/octoprint_dashboard/templates/dashboard_tab.jinja2 b/octoprint_dashboard/templates/dashboard_tab.jinja2
@@ -1,7 +1,10 @@
 <div id="dasboardContainer" class="dasboardContainer">
   <div class="dasboardFsContainer" data-bind="attr: {id: 'dasboardFsContainer_webcam_' + settingsViewModel.settings.plugins.dashboard.showWebCam()}">
+
+    <input class="dashboardIcon" id="fullWindowIcon" title="Full Browser Window" type="image" src="plugin/dashboard/static/img/fullwindow-icon.png" data-bind="click: toggleFullBrowserWindow,  visible: settingsViewModel.settings.plugins.dashboard.showFullscreen()" />
     <input class="dashboardIcon" id="fullScreenIcon" title="Fullscreen (Esc to cancel)" type="image" src="plugin/dashboard/static/img/fullscreen-icon.png" data-bind="click: fullScreen, visible: settingsViewModel.settings.plugins.dashboard.showFullscreen()" />
 
+
     <!-- HTML grid-based layout. Set to 3 columns wide in css -->
     <div class="dasboardGridContainer">
 
@@ -126,11 +129,12 @@
     </div>
 
     <!-- Printer Message-->
-    <br/>
     <div class="dashboardGridItem" data-bind="visible: printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showPrinterMessage()">
+      <br/>
        <span id="printerMessage" data-bind="attr: { title: 'M117 Printer message' }, html: 'Msg: ' + printerMessage()"></span>
+      <br/>
     </div>
-    <br/>
+
 
 
     <!-- Progress Circle-->
@@ -160,21 +164,21 @@
 
 
 
-    <!-- SVG Progress Bar-->
+    <!-- SVG Job Progress Bar-->
     <div class="dashboardGridItem" style="text-align:center;" data-bind="visible: settingsViewModel.settings.plugins.dashboard.gaugetype() == 'bar' && printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showProgress()">
-      <h5 style="display: inline;">Job: </h5>
+      <span title="Job Progress">Job</span>
       <span data-bind="attr: { title: 'Printer status' }, html: printerStateModel.progressBarString()"></span>
-      <svg preserveAspectRatio="none" width="100%" height="20px" viewBox="0 0 339.292 20">
+      <svg preserveAspectRatio="none" width="100%" height="15px" viewBox="0 0 339.292 20">
         <path class="bg" stroke="#ccc" d="M0 10, 339.292 10"></path>
         <path class="dashboardGauge" stroke="#09c" d="M0 10, 339.292 10" stroke-dasharray="339.292" data-bind="attr: { 'stroke-dashoffset': formatProgressOffset(printerStateModel.progressString()) }"></path>
       </svg>
     </div>
 
     <!-- SVG Layer Progress Bar-->
     <div class="dashboardGridItem" style="text-align:center;" data-bind="visible: settingsViewModel.settings.plugins.dashboard.gaugetype() == 'bar' && printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showLayerProgress()">
-      <h5 style="display: inline;">Layer: </h5>
+      <span title="Layer Progress">Layer</span>
       <span data-bind="attr: { title: 'Printer status' }, html: layerProgressBarString()"></span>
-      <svg preserveAspectRatio="none" width="100%" height="20px" viewBox="0 0 339.292 20">
+      <svg preserveAspectRatio="none" width="100%" height="15px" viewBox="0 0 339.292 20">
         <path class="bg" stroke="#ccc" d="M0 10, 339.292 10"></path>
         <path class="dashboardGauge" stroke="#09c" d="M0 10, 339.292 10" stroke-dasharray="339.292" data-bind="attr: { 'stroke-dashoffset': formatProgressOffset(layerProgressString()) }"></path>
       </svg>
@@ -240,8 +244,11 @@
     </div>
 
     <!-- Warning if DisplayLayerProgress is not installed -->
-    <span id="warn" data-bind="attr: { title: 'Warn' }, html: DisplayLayerProgressAvailable()"></span>
-    <br />
+    <div class="dashboardGridItem" data-bind="visible: !DisplayLayerProgressAvailable()">
+      <span class="dashboardSmall" id="warn" style="color: red;">Warning! Can't get stats from <a href='https://plugins.octoprint.org/plugins/DisplayLayerProgress/' target='_blank'>DisplayLayerProgress</a>. Is it installed?</span>
+      <br/>
+    </div>
+
   </div>
 
   <!-- Webcam -->