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

Electron #24

Merged
merged 19 commits into from
Jul 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

# compiled output
/dist
/package
/tmp
/out-tsc
# Only exists if Bazel was run
Expand Down
103 changes: 87 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,106 @@
# OctoprintDash
# OctoDash

OctoprintDash is a small, but beautiful monitoring UI for Octoprint. It doesn't support touchscreen input (yet).
OctoDash is a simple, but beautiful dashboard for Octoprint.

## Screenshots
## Installation

![job_running](https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/job.png)
Job Running
You need to install the DisplayLayerProgress Plugin by OllisGit to enable the full functionality of OctoDash. The API is currently not in the final plugin, so please install the plugin with the following link: https://github.com/UnchartedBull/OctoPrint-DisplayLayerProgress/archive/master.zip.

![no_job_running](https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/no_job.png)
No Job Running
### Electron (recommended)

## Installation
- Download the latest release for your architecture (for Raspberry Pi use armv7l)
`insert download command here`
- Install the app
`sudo dpkg -i name`
- If you get an error while installing install all missing dependencies and reinstall OctoDash.
`sudo apt install -f && sudo dpkg -i name`

#### Start on boot
This is a superminimal install to just display OctoDash on Raspbian LITE. Good thing is, that it keeps the load and the Pi quite low and improves start-up time. If you use another window manager adjust your files according to the Documentation.

- Enable pi Console Autologin via
`sudo raspi-config`
- Install xorg + ratpoison
`sudo apt install xserver-xorg --no-install-recommends ratpoison x11-xserver-utils xinit`
- Create the .xinitrc file
`nano ~/.xinitrc`
- Add the following contents:
```
#!/bin/sh

xset s off
xset s noblank
xset -dpms

ratpoison&
octodash
```
- make the file executable
`sudo chmod +x .xinitrc`
- make xinit autostart on boot `nano ~/.bashrc`
- add the following at the very bottom:
```
if [ -z "$SSH_CLIENT" ] || [ -z "$SSH_TTY" ]; then
xinit -- -nocursor
fi
```
- reboot

### Building the App

If you get the `Cannot open virtual console 2 (Permission denied)` error run `sudo chmod ug+s /usr/lib/xorg/Xorg` and reboot.

#### Creating config manually
If you don't want to use the Config Wizard you can also create the config manually. Just copy `sample.config.json` and adjust it according to your setup. Copy the file to `~/.config/octodash/config.json` (for Raspbian). For other OS please refer to the [Electron Docs](https://electronjs.org/docs/api/app#appgetpathname).


### Website

This option does not allow you to change your config via the UI and the styling may be a little off for you, due to your browser engine. It may improve performance slightly if you use a very lightweight browser.

- Clone the repository - `git clone https://github.com/TimonGaebelein/OctoprintDash && cd OctoprintDash`
- Install all the dependencies - `npm install`
- Adjust `src/assets/config.json` accordingly to your installation
- Build the app - `ng build --prod`
- The final website is located at `/dist`, which can be served by any web server and viewed by any web browser, that does support angular. A chromium-based web browser is recommended

## Supported Devices

### Using the App
It is recommended to use a 5" or 7" display with a resolution of 800x480 px. You shouldn't choose a screen smaller than 3.5" and with a lower resolution than 480x320 px.

After the step before, you will have a simple http website located at `dist`. You can serve the website via any webserver, or, if you don't have a server installed, use the supplied node server, located at `server`. If you'd like to use the node server the steps are the following.
The prebuilt electron app supports Raspberry Pi 2 and higher. The Raspberry Pi 1 is not supported and never will be supported. If you use a Pi 1 please use the Website Version or build the app yourself.

- Move the website - `mv dist/OctoprintDash/* server/web/`
- Copy the server folder over to the raspberry
- Install npm dependencies for server on the raspberry - `cd server && npm install`
- Open chromium in kiosk mode - `chromium-browser --kiosk --app=http://localhost:8080`
All other SoCs that are using an armv7, or arm64 compatible, processer are supported as well.

## Screenshots
<p float="left">
<img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/job.png" width="49.5%" alt- text="Job Running"/>
<img src="https://raw.githubusercontent.com/TimonGaebelein/OctoprintDash/master/screenshots/no_job.png" width="49.5%" alt-text="No Job Running">
</p>

## Troubleshooting

If you encounter an issue, while using OctoDash please have a look at the wiki Troubleshooting Guide first (not done yet)! If your issue is not covered please open an issue!

## Bugs and more

If you find a bug, please open an issue, so I can have a look at it. Please also add the steps to reproduce and the .gcode file. Thank you!

One more thing: If you're Octoprint is running on a Raspberry Pi 1 you may want to opt out of this, because it just does not have enough power.
One more thing: If you're Octoprint is running on a Raspberry Pi 1 you may want to opt out of this because it just does not have enough power.

## Contributing

If you can think of something nice to add or want to change some of the messy code feel free to create a Pull Request. I'll have a look at it and will merge it into master if everything checks out!
Any help is greatly appreciated!

If you can think of a great feature, but don't feel yet ready to code something open an issue. I'll have a look at it and maybe implement it if I have the time. It is preferred if you directly create a Pull Request for your new feature. If you need some help, I can point you in the correct direction.

## License

The project is licensed under the Apache 2.0 License.

The Credits for the icons can be (temporarily) found at icons.txt. They'll get moved into the product soon.


## Special Thanks

Special Thanks to [/u/Slateclean](https://www.reddit.com/user/Slateclean) for supplying me with touchscreens so I can further develop the project. Without you, this wouldn't be happening!
233 changes: 115 additions & 118 deletions angular.json
Original file line number Diff line number Diff line change
@@ -1,123 +1,120 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"OctoPrintDash": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/OctoPrintDash",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"OctoPrintDash": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "OctoPrintDash:build"
},
"configurations": {
"production": {
"browserTarget": "OctoPrintDash:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "OctoPrintDash:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "OctoPrintDash:serve"
},
"configurations": {
"production": {
"devServerTarget": "OctoPrintDash:serve:production"
}
}
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "OctoPrintDash:build"
},
"configurations": {
"production": {
"browserTarget": "OctoPrintDash:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "OctoPrintDash:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "OctoPrintDash:serve"
},
"configurations": {
"production": {
"devServerTarget": "OctoPrintDash:serve:production"
}
}
}
}
}},
"defaultProject": "OctoPrintDash"
}
},
"defaultProject": "OctoPrintDash"
}
Loading