Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Glanceable UI theme + additional progress percentage. #1151

Merged
merged 11 commits into from
Nov 6, 2020
10 changes: 5 additions & 5 deletions src/app/job-status/job-status.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,13 @@
<div class="job-info__progress-percentage">{{ job.progress }}<span style="font-size: 40%">%</span></div>
</div>
<div class="job-info__progress" *ngIf="showPreview() && job.thumbnail">
<div class="job-info__progress-percentage" [hidden]="true">
{{ job.progress }}<span style="font-size: 40%">%</span>
</div>
<div *ngIf="!useCircularProgressBar()" style="height: 22vw; padding-top: -1.5vw">
<div *ngIf="!useCircularProgressBar()" style="height: 22vw; padding-top: -1.5vw" id="progress-preview-bar">
<img class="job-info__progress-preview" [src]="job.thumbnail" />
<div class="job-info__progress-bar__wrapper">
<div class="job-info__progress-bar" [style.width]="job.progress + '%'"></div>
</div>
</div>
<div *ngIf="useCircularProgressBar()" style="height: 23.5vw">
<div *ngIf="useCircularProgressBar()" style="height: 23.5vw" id="progress-preview-circle">
<round-progress
[current]="job.progress"
[max]="100"
Expand All @@ -33,6 +30,9 @@
<img class="job-info__progress-preview-image" [src]="job.thumbnail" />
</div>
</div>
<div class="job-info__progress-percentage" [hidden]="true">
{{ job.progress }}<span style="font-size: 40%">%</span>
</div>
</div>
<span class="job-info__filename">{{ job.filename }}</span>
<br />
Expand Down
44 changes: 44 additions & 0 deletions themes/theGarbz/Glanceable/README.md
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;
}*/
```

100 changes: 100 additions & 0 deletions themes/theGarbz/Glanceable/custom-styles.css
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.