forked from UnchartedBull/OctoDash
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: Glanceable UI theme + additional progress percentage. (Uncha…
…rtedBull#1151) * Updated Filament in Theme. Filament screen corrected with the following changes: * Filament bar background colour changed to match theme. * Filament table background gradient removed. * Filament bar width adjusted to match files section, this also lined up the scroll bar with its background. * Progress Percentage Added Addition of a second progress percentage which is attached to the progress bar div. CSS set to make this percentage hidden by default. This will allow the creation of themes where percentage is visible for both round and straight progress bars. * New Theme: "Glanceable" Theme creates a horizontal progress bar when printing that is more easily readable from across the room. This theme requires the additional div from the previous commit, but the instructions in the Readme.md include a workaround. * Cleaned up whitespace at EOL * remove third percentage div * Slightly move percentage in progress bar to left. Co-authored-by: UnchartedBull <[email protected]>
- Loading branch information
1 parent
6cf21e5
commit 8e70ffb
Showing
5 changed files
with
149 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: | ||
|
||
![Filament List](screenshots/screenshot_printing_straight.png) | ||
|
||
2. Printing with Circular Progressbar: | ||
|
||
![File List](screenshots/screenshot_printing_circle.png) | ||
|
||
## 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; | ||
}*/ | ||
``` | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}*/ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+250 KB
themes/theGarbz/Glanceable/screenshots/screenshot_printing_straight.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.