- {{ job.progress }}%
-
-
+
![]()
-
{{ job.filename }}
+
+
+ {{ job.progress }}%
+
diff --git a/themes/theGarbz/Glanceable/README.md b/themes/theGarbz/Glanceable/README.md new file mode 100644 index 000000000..caba293fd --- /dev/null +++ b/themes/theGarbz/Glanceable/README.md @@ -0,0 +1,44 @@ +# Glanceable theme v0.1 + +This variation on the standard theme includes a nearly full width horizontal progress bar during printing. This makes it far easier to see the progress of a print when glancing at the screen from a distance, hence the name "Glanceable theme". + +To install copy the custom-styles.css file into the octodash config folder: +``` +~/.config/octodash/custom-styles.css +``` +Users of Octodash 2.1.1 read the important note below. + +###### Theme by theGarbz. + +## Screenshots: + +1. Printing with the Horizontal Progressbar: + +  + +2. Printing with Circular Progressbar: + +  + +## Important Note for Octodash 2.1.1 users + +This theme relies on an additional progress percentage element which is not available in Octodash 2.1.1. Using this theme on Octodash 2.1.1 without modification (read on) will result in no progress percentage visible when the horizontal progressbar is displayed. + +It is possible to move the progress percentage from the circular progressbar to the horizontal progressbar by __uncommenting the following lines__ in this custom-styles.css: + +``` +/*.job-info__progress-percentage { + margin-top: -0.3vh!important; + margin-left: 0vw!important; + font-size: 6.7vh!important; + font-weight: 500!important; + display:block!important; + position:fixed!important; + left: 43.4vw!important; + top: 77vh!important; + z-index:1!important; + color:white!important; + text-shadow: 1px 1px 4px black; +}*/ +``` + diff --git a/themes/theGarbz/Glanceable/custom-styles.css b/themes/theGarbz/Glanceable/custom-styles.css new file mode 100644 index 000000000..3ab23a0d7 --- /dev/null +++ b/themes/theGarbz/Glanceable/custom-styles.css @@ -0,0 +1,100 @@ + +/**** Job-Info Resizes ****/ + +app-job-status ~ app-printer-status .printer-status{ + position:absolute!important; + top: 43vh!important; + left: 0vw!important; +} + +/**** Job-Info Layer Progress ****/ + +.layer-indication{ + position:absolute!important; + top: 65vh!important; + left: 0vw!important; + font-size: 3vw!important; +} + +.layer-indication__current-layer{ + font-size: 6vh!important; +} + +.layer-indication__total-layers{ + font-size: 5vh!important; +} + +/**** Job-Info Progress ****/ + +.job-info__progress-bar { + height: 8vh!important; + border-radius: 1.7vw!important; +} + +.job-info__progress-bar__wrapper { + position:fixed!important; + top: 77vh!important; + left: 3vw!important; + width: 92vw!important; + height: 8vh!important; + border-radius: 2vw!important; + background-color: rgba(38, 44, 53, 1); + border-style: solid!important; + border-color: rgb(121, 121, 121); + border-width: 2px!important; +} + +#progress-preview-bar + .job-info__progress-percentage { + margin-top: -0.3vh!important; + margin-left: 0vw!important; + font-size: 6.7vh!important; + font-weight: 500!important; + display:block!important; + position:fixed!important; + left: 43.4vw!important; + top: 77vh!important; + z-index:1!important; + color:white!important; + text-shadow: 1px 1px 4px black; + visibility: visible!important; +} + +/**** by-line ****/ + +.settings-container { + height: 86vh!important; + top: 8vh!important; +} + +.settings__made::after { + content: "Glanceable theme v0.1 by theGarbz"; + width: auto!important; + font-size: 73%; + display: inline-block; +} + +/* + * Version 2.1.1 and previous of Octodash are missing + * the progress-bar-percentage element. As such the + * bar renders without showing the percentage complete. + * to relocate the percentage complete from the + * circular progress bar to the horizontal progress bar + * uncomment the following lines. + * + * Note: Doing so will remove the percentage number + * from the circular progress bar. (See Readme.md) + */ + +/*.job-info__progress-percentage { + margin-top: -0.3vh!important; + margin-left: 0vw!important; + font-size: 6.7vh!important; + font-weight: 500!important; + display:block!important; + position:fixed!important; + left: 43.4vw!important; + top: 77vh!important; + z-index:1!important; + color:white!important; + text-shadow: 1px 1px 4px black; +}*/ diff --git a/themes/theGarbz/Glanceable/screenshots/screenshot_printing_circle.png b/themes/theGarbz/Glanceable/screenshots/screenshot_printing_circle.png new file mode 100755 index 000000000..dafd9f55d Binary files /dev/null and b/themes/theGarbz/Glanceable/screenshots/screenshot_printing_circle.png differ diff --git a/themes/theGarbz/Glanceable/screenshots/screenshot_printing_straight.png b/themes/theGarbz/Glanceable/screenshots/screenshot_printing_straight.png new file mode 100755 index 000000000..63d55a164 Binary files /dev/null and b/themes/theGarbz/Glanceable/screenshots/screenshot_printing_straight.png differ