Skip to content

Commit

Permalink
Merge pull request #6 from nokemono42/web-ui-update
Browse files Browse the repository at this point in the history
Web UI update
  • Loading branch information
joeycortez42 authored Aug 28, 2017
2 parents e3715e1 + 201f3ab commit 6ba8b50
Show file tree
Hide file tree
Showing 8 changed files with 617 additions and 242 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

icons.pcvd
47 changes: 33 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,57 @@

## Overview

Upgrade the Malyan 200 or the Monoprice Select Mini's Web UI and enable faster Wi-Fi file transfers. Built using Bootstrap so the UI is mobile-friendly and tablet-friendly.
Upgrade the Malyan 200 or the Monoprice Select Mini's (V1) Web UI and enable faster Wi-Fi file uploads.

While you want to update the UI of the printer, you don't want the web server on the controller working too hard. This upgrade is designed to minimize the amount of data the web server has to serve. You browser will be doing move of the heavy lifting.
Built using Bootstrap so the UI is mobile-friendly and tablet-friendly.

While you may want to update the UI of the printer, you don't want the web server on the controller working too hard. This upgrade is designed to minimize the amount of data the web server has to serve. You browser will be doing most of the heavy lifting.

![Image of the WebUI](https://raw.githubusercontent.com/nokemono42/MP-Select-Mini-Web/web-ui-update/screenshot.png)

## Getting Started

1. Download and unzip `MP-Select-Mini-Web` from GitHub.
2. Point a web browser window to your printer's IP address. `http://IPAddressHere`
3. Now browse to the upgrade page. `http://IPAddressHere/up`
4. On the upgrade page, there are three options. We are only concerned with the last one, "Upload web." DO NOT CLICK THIS YET.
5. On the same line as "Upload web" click "Choose file" and select the "webui.html" file from the folder you unzipped earlier.
6. NOW you can click "Upload web."
6. If things worked, the response will display one word only. If you see "OK" you are good to go!
4. Click the third "Choose file" and select the "webui.html" file from the folder you unzipped earlier.
5. Click "Upload web."
6. If you see "OK" you are good to go!
7. It's recommended you power cycle your printer at this point.
8. Once your printer is back online, browse to `http://IPAddressHere`. You should now have the upgraded web UI with full manual control.
8. Once your printer is back online, browse to `http://IPAddressHere`. You should now have the upgraded Web UI with full manual control.

## Enable Faster Wifi File Transfers
## Enable Faster Wi-Fi File Uploads

The final step is to speed up your Wi-Fi uploading by pasting, `M563 S6 ;` in the "send gCode to printer" box and hitting send. You will need to send that gcode after every power cycle, though.
By default the upgraded Web UI will send `M563 S6` on each refresh to ensure faster Wi-Fi file uploads is enabled.

## Troubleshooting

Did something break? Here's how you can undo the Web UI upgrade.

1. Turn off the printer. Wait about 10 seconds, and then turn it back on.
3. Once it's on go DIRECTLY to `http://IPAddressHere/up`.
4. Just click the "Upload web" button without choosing a file and it will restore the factory web UI.
1. Turn off the printer. Wait about 10 seconds and then turn it back on.
3. Once it's on, go DIRECTLY to `http://IPAddressHere/up`.
4. Just click the "Upload web" button without choosing a file and this will restore the factory web UI.

## Credits

Joey Cortez

Jason Jones (Original Code)

Matthew Upp (Middle Man / Beta Tester)
Matthew Upp (Middle Man)

Mario Anthony Galliano (Facebook Group posting with upgrade/downgrade instructions.)

## Upcoming Improvements

Mario Anthony Galliano (Facebook posting with upgrade/downgrade instructions.)
* Test on MPSM V2
* Show time lasped / time remaining
* Show filename that is printing
* Change multiplier
* Rename cache.gc file with M566 after upload
* Print done / presentation button. (Gantry away put all the way forward.)
* Query SD card for list of files
* Delete file from SD card
* Print file from SD card
* Rename file from SD card
* Refresh SD card
Binary file modified screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 156 additions & 0 deletions source/webui.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
/*
Name: MP Select Mini Web CSS
URL: https://github.com/nokemono42/MP-Select-Mini-Web
*/

html { font-size: 16px; }

body {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
color: #646C7F;
}

h3,
h4 {
color: #0272b6;
font-weight: 300;
}

h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}

h4 { margin-top: 0; }

.btn { letter-spacing: 0.025rem; }
.btn-default { color: #646C7F; }

.btn-disable {
pointer-events: none;
opacity: 0.4;
}

footer {
padding-top: 15px;
padding-bottom: 10px;
font-size: 0.875rem;
text-align: right;
}

@media screen and (max-width : 767px) {
footer.navbar-fixed-bottom {
position: relative;
text-align: center;
}
}

.progress { height: 25px; }
.progress .progress-bar { padding-top: 3px; }

.webcam { margin-bottom: 20px; }
.webcam img {
width: auto;
height: 255px;
}

.print-actions button {
margin-bottom: 20px;
width: 100%;
}

.dropzone {
min-height: 201px;
padding: 10px;
margin-bottom: 20px;
background-color: #fff;
border: 2px dashed #0272b6;
border-radius: 5px;
color: #00619a;
}

.dropzone .dz-message {
top: 50%;
left: 0;
position: absolute;
width: 100%;
margin: 0;
font-weight: 500;
font-size: 1.25rem;
text-align: center;
}

.dropzone .dz-preview {
width: 100%;
margin: 0;
}

.dropzone .dz-preview .dz-image { display: none; }

.dropzone .dz-preview .dz-details {
top: 50%;
color: inherit;
font-size: 0.875rem;
}

.dropzone .dz-preview .dz-progress {
left: 0;
width: 100%;
margin-left: 0;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark { top: 40%; }

.dropzone .dz-preview .dz-success-mark svg g path { fill: #2C9040; }
.dropzone .dz-preview .dz-error-mark svg g { fill: #FF2F3C; }

.movement .row { margin-bottom: 14px; }
.movement .row.rate { margin-bottom: 20px; }
.movement .direction .text-center { line-height: 2rem; }

.rate .center-block { width: 196px; }

#console {
min-height: 201px;
max-height: 201px;
overflow: scroll;
padding: 0 8px;
font-family: monospace, monospace;
font-size: 0.875rem;
}

#console p { margin: 0 0 4px; }

#console .comment { color: #2C9040; }

#gCodeInput { margin-bottom: 20px; }

.temperature h3 {
margin-top: 41px;
margin-bottom: 40px;
}

.temperature .target {
width: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}

.slider {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

.slider.slider-vertical { height: 141px; }

#fanspeed .slider-selection { background: #0272b6; }

#sete,
#setp { cursor: pointer; }
Loading

0 comments on commit 6ba8b50

Please sign in to comment.