Ideas about a new web interface

First of all... Happy new year everyone!

As promised I've started working on a completely new web interface for the Duet electronics and so far I've got a basic (responsive) skeleton working. The reasons I decided to develop a new web interface are making it compatible to mobile devices (tablets and even smartphones), getting it working with dynamic numbers of heads and extruder drives, maintaining proper HTML5/CSS3 standards and adding a bunch of new features.

If you're interested what my current design looks like, just go ahead and grab a copy here: [github.com] (click on "Download ZIP")
Please note: This version isn't really functional yet, it just gives you an idea of what my concept looks like. Do not attempt to install it on your Ormerod yet - it won't work!

Anyway, before I go on designing things, I'd like to hear what you guys have been missing in the old web interface and what you'd like to have implemented in the future. I have little interest to redesign everything once I've released it, so at this stage I'd like to hear what you think about it. One of the great features I'm planning is support for a filament counters (see "Spools" in the menu), so one can define their spools including total length and extrusion multiplier. Then the web interface can warn you if you're about to run out of filament before you start a real print - I think this will be quite handy for those printing a lot of different materials/spools!

Well, the following points are already on my TODO list, but I need to touch the firmware first before I get most of these working:

Quote

- Finally implement (optional) password protection
- User macros / custom commands
- Better print estimation
- Beep / Message support

If you have any other good ideas about the actual page content, please don't hesitate to share them here. Feedback is appreciated!

Edited 1 time(s). Last edit at 01/05/2015 12:56PM by zombiepantslol.

Hi zombiepantslol,
I'm really looking forward to seeing how your web interface takes shape and perhaps helping with the testing.

I am planning to add a small camera so that I can see the action at the hot end and it would be great if a window could open to show the live feed..
I haven't worked out exactly how to do this yet but I hope to start experimenting soon.

Current Web Interface
Everything on the Top half of the page I use except for the XYZ head position information, I just can't see a need for this, but perhaps others do use the info.

Current Print Status tab is useful but only one filament estimate would be good, perhaps the one based on Filament usage.

On the Control page, again I use everything but would love to be able to define some of the quick Commands myself, e.g. have a different centre of bed co-ordinates

Gcode's page, very useful but I only use setbed setman and tempWebPrint buttons

Settings page all used but would like the Config.g file to be displayed fully and not just half of it.

Would it be possible to add a proper reset button, so that the printer is returned to the switched on state.
I have had occasion to carry out multiple setbed procedures whilst adjusting and setting the bed height. The previouse settings do not appear to be cleared each time even though I have "M561 ; clear bed height transform" at the start of the setbed.g file. I have been turning the power off and on before each setbed run.

Paul

---

appjaws - Core XYUV Duet Ethernet Duex5
firmware 3.1.1 Web Interface 3.1.1
Ormerod 1-converted to laser engraver, Duet wifi
OpenSCAD version 2020.07
slic3r-1.3.0, Simplify3D 4.1.2, Cura-4.4.1

Hi zpl, regarding macros I have plans for this as part of my touch screen controller, using files on the SD card. I outlined those plans in the thread about that control panel. I was going to make the same mechanism work in the web interface, but it looks like you may get there first. Please can we discuss this by email.

Some of the space saving mechanisms that I use on the control panel may also be useful in a web interface for smaller screens. For example, the matrix for doing X, Y and Z moves takes up too much space. Instead, when the field displaying the current X coordinate is touched, I pop up a bar containing buttons for moving it by various amounts. Similarly for Y and Z.

Regarding the display of XYZ position, I find the display of Z position very useful at times.

Edited 2 time(s). Last edit at 01/05/2015 03:54PM by dc42.

---

Large delta printer [miscsolutions.wordpress.com], E3D tool changer, Robotdigg SCARA printer, Crane Quad and Ormerod

Disclosure: I design Duet electronics and work on RepRapFirmware, [duet3d.com].

Thanks for your feedback so far!

Quote
appjaws1
Everything on the Top half of the page I use except for the XYZ head position information, I just can't see a need for this, but perhaps others do use the info.

I agree with dc42 about the live coordinates, it's always good to see them. I don't think they're critical on small devices though, which is why the new web inteface allows both the heater temperatures and the status panels to be collapsed on smaller devices. If you download my new web interface and resize the window, you can see what I mean.

Quote
appjaws1
Current Print Status tab is useful but only one filament estimate would be good, perhaps the one based on Filament usage.

Yes, the filament-based estimation will be the default one on the Print Status tab. I won't drop the layer-based and filed-based estimations though, but I indend to rewrite them. I wonder whether it made sense to move parts of these estimation algorithms into the firmware, because then both the LCD and the web interface could benefit from them (the latter one especially during reconnects).

Quote
appjaws1
On the Control page, again I use everything but would love to be able to define some of the quick Commands myself, e.g. have a different centre of bed co-ordinates

Quote
dc42
regarding macros I have plans for this as part of my touch screen controller, using files on the SD card. I outlined those plans in the thread about that control panel. I was going to make the same mechanism work in the web interface, but it looks like you may get there first.

Sounds good, that way I can put user-defined macros on the Control page and yet allow users to define custom G-codes for the text input dropdowns.

Quote
appjaws1
Gcode's page, very useful but I only use setbed setman and tempWebPrint buttons

Hmm, I barely use upload & print TBH. For that reason I want to improve the G-code files list quite a bit, primarily to display all the files and directories in a table and to show file information dynamically where possible.

Quote
appjaws1
Settings page all used but would like the Config.g file to be displayed fully and not just half of it.

Good point. I think it might make sense to add a way to download the config file directly from the firmware instead of passing it through the G-code response buffer.

Quote
dc42
Some of the space saving mechanisms that I use on the control panel may also be useful in a web interface for smaller screens. For example, the matrix for doing X, Y and Z moves takes up too much space. Instead, when the field displaying the current X coordinate is touched, I pop up a bar containing buttons for moving it by various amounts. Similarly for Y and Z.

Yes indeed, I actually like the way you implemented inputs on your LCD controller. I figure similar modal inputs would look nice on mobile devices, too, but before I implement these I want everything else to work. Actually I don't find the head and status tables disturbing on my web interface, because they can be collapsed anyway.

Here is an outline of the way I intend to implement the macro facility:

* Define a new SD card directory /macros
* The name of a file in that directory would be the text to appear on the menu, e.g. "Run bed compensation" or "Prime head 1". Possibly with a .g extension.
* The file would be a standard gcode file.

So the control panel or web interface needs to list the contents of /macros, which can already be done using my firmware fork by using M20 with the optional P parameter to specify the directory. It then populates a menu with those filenames, removing the.g extension if we decide to have one. When a menu entry is selected, it commands the firmware to execute the corresponding file.

---

Large delta printer [miscsolutions.wordpress.com], E3D tool changer, Robotdigg SCARA printer, Crane Quad and Ormerod

Disclosure: I design Duet electronics and work on RepRapFirmware, [duet3d.com].

Quote
zombiepantslol
I agree with dc42 about the live coordinates, it's always good to see them. I don't think they're critical on small devices though, which is why the new web inteface allows both the heater temperatures and the status panels to be collapsed on smaller devices. If you download my new web interface and resize the window, you can see what I mean.

very impressive but what if I want to see the heater temperatures all the time? Can the user select what units will be displayed? Or perhaps select from a menu.

Quote
zombiepantslol
Yes, the filament-based estimation will be the default one on the Print Status tab. I won't drop the layer-based and filed-based estimations though, but I indend to rewrite them. I wonder whether it made sense to move parts of these estimation algorithms into the firmware, because then both the LCD and the web interface could benefit from them (the latter one especially during reconnects).

That suggestion sounds as if it is the right way to go, I would think that the more every type of display can use the same information and access the same calculations, the more chance that future developments will benefit all users and be implemented across all display types.

Quote
zombiepantslol
Hmm, I barely use upload & print TBH. For that reason I want to improve the G-code files list quite a bit, primarily to display all the files and directories in a table and to show file information dynamically where possible.

Perhaps I work differently to others but I keep all of my files on my main computer, where they get backed up, and use Upload and Print to actually print the item. If I need to print another copy I use the saved tempWebPrint g-code file. It is very rare that I actually store g files on the sd card. I suppose the facility to rename the tempWebPrint file might be useful -- can you do that now?

Quote
zombiepantslol
Good point. I think it might make sense to add a way to download the config file directly from the firmware instead of passing it through the G-code response buffer.

Could other sys file and some g files like setbed.g be inspected this way?

Quote
dc42
Some of the space saving mechanisms that I use on the control panel may also be useful in a web interface for smaller screens. For example, the matrix for doing X, Y and Z moves takes up too much space. Instead, when the field displaying the current X coordinate is touched, I pop up a bar containing buttons for moving it by various amounts. Similarly for Y and Z.

I like this arrangement

Thank you zpl and dc42 for your hard work

---

appjaws - Core XYUV Duet Ethernet Duex5
firmware 3.1.1 Web Interface 3.1.1
Ormerod 1-converted to laser engraver, Duet wifi
OpenSCAD version 2020.07
slic3r-1.3.0, Simplify3D 4.1.2, Cura-4.4.1

My 2p worth:

1) XYZ display - I have never needed to use the X or Y readout. I do however use the Z readout very frequently. Some prints need intervention at specific layer heights - maybe standing by to push down possible curlups on bridges or overhang, or to know when the print will pause so I can insert an embedded nut or change filament colour, or how many layers are left before the print completes.

2) Macros: As food for thought, instead of putting these on a lot of extra buttons, how about having a separate "macro files" page that is laid out similar to the "files" page except that it displays, uploads, prints and deletes files in the new "macros" library, and also does not automatically change to the "print" page after clicking on a file to print. Allow macro files to be executed in between the pause and resume of a normal print file.

3) Pause/resume: Automatically invoke a "Pause.g" and a "Resume.g" macro if they exist. Implement commands to selectively push and pop X, Y, Z and E positions (useful to have in pause/resume macros).

4) Change the live filament readout to display remaining filament needed rather than filament used. I can estimate the length of filament remaining on a reel that is nearing the end, but to know whether there is enough left to complete the print I must presently do a subtraction sum. Not a big deal, but ISTM that a count-down rather than a count-up would make things easier in general. As a minor refinement, do not change the filament used/remaining variable after a retraction (negative E move), but obviously keep track so the variable doesn't change until the retraction has been negated by the same magnitude positive E move. This will make the live readout more sensible and is also slightly better for computing the estimated print time remaining (leaving zero time and filament left to use at the end of a print rather than the final retraction length & time as a permanent leftover).

5) Print information: In the information of the G code file (or elsewhere), display the weight of filament needed as well as the length (this will need a method of selecting the material or density of course). I sometimes weigh a partially used reel of filament and subtract the weight of an empty reel in order to determine whether enough remains to complete a print or batch of prints, and presently do the arithmetic to convert weight to length. (As info, 1.75mm PLA weighs about 3 g/m and ABS about 2.5 g/m A 1Kg spool of 1.75mm PLA thus contains about 330m and ABS about 400m).

Afterthought:
Having a function to automatically invoke the pause function & macro when particular user-set Z height or list of heights are reached would obviate the need to manually edit a g-code print file to insert pauses at the layer/s required.

Dave

Edited 1 time(s). Last edit at 01/06/2015 08:48AM by dmould.

I would like to be able to download .g files (as well as upload them) - sometimes nice to look at the comments slic3r puts in to see what the settings were (perhaps these could be extracted and put in the info popup)

Thanks for your feedback so far!

Quote
dmould
1) XYZ display - I have never needed to use the X or Y readout. I do however use the Z readout very frequently. Some prints need intervention at specific layer heights - maybe standing by to push down possible curlups on bridges or overhang, or to know when the print will pause so I can insert an embedded nut or change filament colour, or how many layers are left before the print completes.

Okay, I'll add a box to the configuration where users may specify which status fields they want to see and which not.

Quote
dmould
2) Macros: As food for thought, instead of putting these on a lot of extra buttons, how about having a separate "macro files" page that is laid out similar to the "files" page except that it displays, uploads, prints and deletes files in the new "macros" library, and also does not automatically change to the "print" page after clicking on a file to print. Allow macro files to be executed in between the pause and resume of a normal print file.

Actually I plan to do both. But indeed, this made me think: I believe it would be a good idea to manage macro files on a separate page and to bookmarks the ones you want to see on the control page.

Quote
dmould
3) Pause/resume: Automatically invoke a "Pause.g" and a "Resume.g" macro if they exist. Implement commands to selectively push and pop X, Y, Z and E positions (useful to have in pause/resume macros).

These macros are automatically invoked when using either my or dc42's firmware fork, you just need to put them in the /sys directory. I don't see a good reason to add the current XYZ coordinates to the stack, because I've already implemented "G1 R1" to go back to the position a print was paused at. This way you can create a proper resume macro.

Quote
dmould
4) Change the live filament readout to display remaining filament needed rather than filament used. I can estimate the length of filament remaining on a reel that is nearing the end, but to know whether there is enough left to complete the print I must presently do a subtraction sum. Not a big deal, but ISTM that a count-down rather than a count-up would make things easier in general. As a minor refinement, do not change the filament used/remaining variable after a retraction (negative E move), but obviously keep track so the variable doesn't change until the retraction has been negated by the same magnitude positive E move. This will make the live readout more sensible and is also slightly better for computing the estimated print time remaining (leaving zero time and filament left to use at the end of a print rather than the final retraction length & time as a permanent leftover).

Why not display both? There is plenty of space on the new web interface, so I think both values can be displayed without trouble. Your second suggestion makes sense, but I probably won't implement this until I have everything else working. Then I can still add a new setting to define the retraction length at the end of a print. My old web interface fork won't decrease the displayed filament amount if it is less than the previous value and I think I'll just keep that behaviour.

Quote
dmould
5) Print information: In the information of the G code file (or elsewhere), display the weight of filament needed as well as the length (this will need a method of selecting the material or density of course). I sometimes weigh a partially used reel of filament and subtract the weight of an empty reel in order to determine whether enough remains to complete a print or batch of prints, and presently do the arithmetic to convert weight to length. (As info, 1.75mm PLA weighs about 3 g/m and ABS about 2.5 g/m A 1Kg spool of 1.75mm PLA thus contains about 330m and ABS about 400m).

Yes that makes sense, especially because I want to implement spool management anyway. And thanks for posting those weights per m, I'll add those as default values.

Quote
dmould
Afterthought:
Having a function to automatically invoke the pause function & macro when particular user-set Z height or list of heights are reached would obviate the need to manually edit a g-code print file to insert pauses at the layer/s required.

Yes I can implement that, but I usually tend to add M226 (pause from G-code) to my G-code file where infill is printed before the desired Z height is reached. That way I can prevent blobs on perimeters. Btw, Simplify3D is great for that, have a look at the status bar when you preview a specific region, it will display the line number of the last move there.

Quote
rkc
I would like to be able to download .g files (as well as upload them) - sometimes nice to look at the comments slic3r puts in to see what the settings were (perhaps these could be extracted and put in the info popup)

Hrm sorry, but I don't like this idea. Of course I'll implement an upload function, but downloading a file is quite pointless IMHO. Plus if you use either my or dc42's firmware fork, you can already use FTP to download any file from the SD card.

I know tthat this is not part of the web interface but full support for KISSlicer would be nice on your and/or dc42s` web interfce

John

Quote
zombiepantslol
Hrm sorry, but I don't like this idea. Of course I'll implement an upload function, but downloading a file is quite pointless IMHO. Plus if you use either my or dc42's firmware fork, you can already use FTP to download any file from the SD card.

Well, if the ftp function was documented (and worked), that would be sufficient. I wasn't aware that it existed, and can't get it to give any response other than 500 Unknown command when I connect to it. (using dc42's 0.78za firmware)

I would find it useful it for the reasons explained - to look at a gcode file that has misbehaved to work out why. I may not still have the original I uploaded, or it may be on a different machine, or I may want to check I haven't modified it since, or corrupted it in upload.

Of course, I can pull the sd card out and read it (except I don't have an SD reader on the computer that is near my printer...)

Richard

I just re-tested the FTP support (actually in 0.80d-delta-dc42, but the code is the same as in 0.78za), and it worked. I used Filezilla as FTP client, and the password as set in the M551 command in config.g.

---

Large delta printer [miscsolutions.wordpress.com], E3D tool changer, Robotdigg SCARA printer, Crane Quad and Ormerod

Disclosure: I design Duet electronics and work on RepRapFirmware, [duet3d.com].

Quote
rkc
I wasn't aware that it existed, and can't get it to give any response other than 500 Unknown command when I connect to it. (using dc42's 0.78za firmware)

I would find it useful it for the reasons explained - to look at a gcode file that has misbehaved to work out why. I may not still have the original I uploaded, or it may be on a different machine, or I may want to check I haven't modified it since, or corrupted it in upload.

Please note that my FTP implementation doesn't support active FTP mode, you can only use it in passive mode. FileZilla and most other FTP programs deal with this automatically, but e.g. the Linux ftp utility does not. When you set up a connection profile, you can specify any user name you like, only the password must match the one from your config file. I also suggest limiting the number of concurrent connections to 1, because the firmware can't deal with more. Btw, you can use telnet as well to control your machine if you want to.

There is still a minor bug in my firmware release where some uploads occasionally won't start because of an error message, but I've fixed this on GitHub. I'll release a new firmware version as soon as I have more of my new web interface working.

Edited 1 time(s). Last edit at 01/08/2015 01:12PM by zombiepantslol.

I'll try in passive mode (I was using the linux ftp utility)

ftp -p seems to work better - thanks! That's useful to know. And telnet might come in handy too!

Dont know if this exists already but it would be nice to have a check box with M0 or M1 that would be run after the print is done.

Say that I start a print and plan to do another one right after. But in the middle of the first print I have to go do something else and don't know how long it will take. I will probably not have time to run the second print the same day. I tick the "run M1 when print done" check box and when I come back the printer is cool and could be shut down and print removed. Though if I have time for the second print when I come back I just untick the check box. When print is finished I can switch glass run the next print.

Yes I can add that feature, shouldn't be a problem.

Just a quick status update: I've got the navigation bar, info panels and the first four menu entries working. Here two screenshots showing what my web interface currently looks like:

Machine Control:



Files (with support for directories):



I think I'll start working on the new print estimations next and then on the Print Status page. Actually it can't take too long before I release a first version.

Looking good!

One more suggestion. When I want to extrude or retract, I find it awkward setting the extruder speed, then forward/back, then selecting the amount. How about a single bar for extruder forward and back by different amounts, like the bars for X Y and Z movement? The extruder speed selection would be retained, or changed to a drop down menu. I think this would also work well on the LCD control panel.

---

Large delta printer [miscsolutions.wordpress.com], E3D tool changer, Robotdigg SCARA printer, Crane Quad and Ormerod

Disclosure: I design Duet electronics and work on RepRapFirmware, [duet3d.com].

Quote
dc42
Looking good!

One more suggestion. When I want to extrude or retract, I find it awkward setting the extruder speed, then forward/back, then selecting the amount. How about a single bar for extruder forward and back by different amounts, like the bars for X Y and Z movement? The extruder speed selection would be retained, or changed to a drop down menu. I think this would also work well on the LCD control panel.

Thanks! Yes, I see why you're asking. The lower button groups are actually radio inputs on my web interface, so in fact you need to click on either "Retract" or "Extrude" to perform an extruder move. But your idea sounds great for smaller devices, I guess this could save some space on mobile devices. Oh, and I've already changed the order of these input radios, it really makes more sense to specify the amount first and then the feedrate, just as you'd write "G1 E250 F4500":



Edited 1 time(s). Last edit at 01/12/2015 04:46PM by zombiepantslol.

Looking really good.

On the control page, do you still have your "Enforce Fan Value " tick box? I find this very useful

Would it be possible to include "Modified Date' for files in the file page?

When I am checking or setting up the bed level, which I seem to have to do almost daily, I use the Z Head position to indicate the height when the Z probe triggers. So after the first run through I would make adjustments where necessary, issue M561 to clear bed height transform and then repeat the G32. This introduces errors because I believe that the M561 does not clear all of the 5 point compensation detail.
The only way around this is for me to switch the ormerod off and on.

Can the readings that G32 records be displayed on screen as an aid to setting the bed level and be cleared if G32 is issued again.

Can't wait to try this new interface.

---

appjaws - Core XYUV Duet Ethernet Duex5
firmware 3.1.1 Web Interface 3.1.1
Ormerod 1-converted to laser engraver, Duet wifi
OpenSCAD version 2020.07
slic3r-1.3.0, Simplify3D 4.1.2, Cura-4.4.1

Quote
appjaws1
Would it be possible to include "Modified Date' for files in the file page?
Can the readings that G32 records be displayed on screen as an aid to setting the bed level and be cleared if G32 is issued again.

I would also like to have the date visible or even the possibility to sort by date. Almost every print I make is on the newest file, either a new file or updated and re-uploaded.

I would also like to see the result of the G32, may cut down to just the actual calibration value, maybe preceded by a number to which bed corner it represents

The print speed and extruder control are very useful calibrating a filament. That got me thinking that the current actual print speed would be useful to know, especially when modded by a percentage. I guess it would change rather often but that should not bee a problem.

/Tomas

Edited 1 time(s). Last edit at 01/14/2015 10:03AM by fotomas.