DueUI: An Alternate Web Interface

thwe

@gtj0 With alpha4 now it works with the "choose"

Next question: is also possible to change color code of the temperatures if IS > TARGET

I tried

"tolerances": [
  {"limit": -999, "style": {"background": "red"}},
  {"limit": -5, "style": {"background": "goldenrod"}},
  {"limit": -2, "style": {"background": "limegreen"}},					
  {"limit": 2, "style": {"background": "limegreen"}},
  {"limit": 5, "style": {"background": "goldenrod"}},
  {"limit": 999, "style": {"background": "red"}}
  ],

Unfortunately without success ...

gtj0

@thwe said in [Preview] DueUI: An Alternate Web Interface:

@gtj0 With alpha4 now it works with the "choose"

Next question: is also possible to change color code of the temperatures if IS > TARGET

I forget but I think you can just do

"tolerances": [
	{"limit": 0, "style": {"background": "limegreen"}},
	{"limit": 2, "style": {"background": "lightgreen"}},
	{"limit": 5, "style": {"background": "yellow"}},
	{"limit": 999, "style": {"background": "red"}}
]

I can double check later today.
You may want to use 0.5 as the first limit rather than 0 because the temps are decimal numbers.

You can also add the "tolerance_value" parameter for a bit more control...

"tolerance_value": "${(int)Math.floor(status.temps.current[1])}",
"tolerances": [
	{"limit": 0, "style": {"background": "limegreen"}},
	{"limit": 2, "style": {"background": "lightgreen"}},
	{"limit": 5, "style": {"background": "yellow"}},
	{"limit": 999, "style": {"background": "red"}}
]

This rounds the temperature down to the closest whole number, then convert it to an integer. That's a little more Javascript-y though.
It's on my list to document all the things you can do with "${}" in certain parameters.

BTW. Right now the limits are "either over or under by this amount". You can't specify negative numbers to have a different under vs over. I can add that capability if needed though.

thwe

Hi,

the background color of the current temp is

shown ok if current <active
shown not ok if current <active

(sorry, unfortunately I did not manage to show it correctly)

I have a few topics that you can implement, if you think it makes sense

make a littel space (3 to 5px) between the X / Y / Z labels at the id: "main_position"
show both numbers of the actual temperature for current and active always with 1 decimal place
even if standby <0 then show 0
show requested + top speed (or give me the right status response or show me a list of them)

Thank you for your previous work!

gtj0

@thwe said in [Preview] DueUI: An Alternate Web Interface:

Hi,

the background color of the current temp is

shown ok if current <active

shown not ok if current <active

(sorry, unfortunately I did not manage to show it correctly)

I'm not understanding the issue.

I have a few topics that you can implement, if you think it makes sense

make a littel space (3 to 5px) between the X / Y / Z labels at the id: "main_position"

Add "margin-top": "5px" to main_position, button_defaults, style like so:

"button_defaults": {
    "style": {"height": "2.5em", "margin-top": "5px"},

show both numbers of the actual temperature for current and active always with 1 decimal place

I'll make that the default but you can set this in your config file by adding .toFixed(1) to the current_temp_field entries for your heaters. Example for the bed:
Before:
"current_temp_field": "${status.temps.bed.current}",
After:
"current_temp_field": "${status.temps.bed.current.toFixed(1)}",

even if standby <0 then show 0

Unfortunately, "0" does not turn the heater off. Only "-273" does that.
You can follow the conversation I'm having with @dc42 on this subject
in this thread: https://forum.duet3d.com/topic/8387/fine-grained-heater-control/17

show requested + top speed (or give me the right status response or show me a list of them)

status.speeds.top and status.speeds.requested

Thank you for your previous work!

gtj0

@pro3d Android app now available for testing
https://forum.duet3d.com/topic/9257/dueui-1-0-0-beta1-is-available-for-testing/11

thwe

@thwe said in [Preview] DueUI: An Alternate Web Interface:

make a littel space (3 to 5px) between the X / Y / Z labels at the id: "main_position"

Works well

show both numbers of the actual temperature for current and active always with 1 decimal place

Works well

even if standby <0 then show 0

Works well

show requested + top speed (or give me the right status response or show me a list of them)

Works well

The first points regarding color change at the temperatures was a typo - sorry:

Correctly

the background color of the current temp is

shown ok if current < active

shown not ok if current > active

This means that the color is displayed correctly depending on the temperature as long as the setpoint temperature is greater than the actual temperature.
If the actual temperature is reduced after reaching the setpoint temperature, the color should jump to red (or what was defined) - but it does not work for me.

thwe

In the following movie I would show you a littel bit a status of my work.

At the moment I'm still in the phase of the invention - I do not know myself what I like the most - but the possibilities are enormous

DueUI - example

Attention: in the film, the colors are not displayed correctly - the blue buttons are red in reality

devleon

@thwe I really like they layout you have made and would be highly interested in it.
Would you be willing to share it with me? Maybe put it on github if you are familiar with it?
Thanks!

Also thanks a lot @gtj0 for putting the work into this. I was actually thinking of doing something very similar. The idea to let the user customize is genius!

thwe

@devleon but of course!

Please, urgent attention:

I have adapted it to my samsung tablet with 10 inches in landscape format
some of the stored gcode is only functional for my printer
some tabs show the same info, but in another view (taste)
some things are currently still doubly and not completely -> it is urgently still necessary to make their own adjustments
no guarantee!

have fun:
0_1551786964733_dueui_config.gcode

!Rename the file to: "dueui_config.json"!

devleon

@thwe Thanks, i'll give it a try later.

@gtj0 Do you think you could add support for some more flat themes?
I'd like to have something dark and flat, but all the dark themes have weird round buttons and gradients... Maybe something like this or this?

Or maybe, and I know this will require quite some effort and probably a rewrite, use bootstrap instead of jQuery UI? It would make layouting more consistent between themes and probably easier. There's also tons of free themes for bootstrap, and the ones here are quite nice imho. Just a suggestion of course

gtj0

Adding themes to the current jQuery-UI implementation is a little difficult. I did look at bootstrap but it seemed more complicated than jQuery. I'll look again though.

nilrog

This is awesome...and has a lot of potential

My printer isn't 100% ready yet but I downloaded this and tried playing around with it. But DueUI only works if you have your printer on a network with internet access, or where the printer is allowed to access internet, since all the third-party javascripts and css is loaded from public cdn's.

I tried building my own version of DueUI with local resources...but there are at least some issues with the theme afaik, since the Duet3D decides itself where it wants to place different filetypes. All I ended up with was a start page where I was supposed to fill in the connection details for the printer...hitting save and reload did nothing...and the js-console did not show any errors.

@gtj0 said in [Preview] DueUI: An Alternate Web Interface:

I did look at bootstrap but it seemed more complicated than jQuery. I'll look again though.

That would be awesome...and another benefit would be that you could leverage the bootstrap that is already part of the Duet3D so you would not even need to bundle it...unless for the case when you want to run DueUI on another computer and not the printer itself.

gtj0

I'm still looking at bootstrap but just to be clear, the printer does NOT need internet access. Only the browser you run DueUI on needs it.

nilrog

@gtj0 Yes,that is what I meant...perhaps I should have made my case clearer...
But on the other hand, if you have the printer on a closed network, it would be rare if you would access DueUI from a browser that has internet access. I can understand why it is implemented this way, at least in this initial state, but removing that limitation in the future would be nice. Especially since Duet3D itself doesn't have this limitation.

gtj0

@nilrog said in [Preview] DueUI: An Alternate Web Interface:

@gtj0 Yes,that is what I meant...perhaps I should have made my case clearer...
But on the other hand, if you have the printer on a closed network, it would be rare if you would access DueUI from a browser that has internet access. I can understand why it is implemented this way, at least in this initial state, but removing that limitation in the future would be nice. Especially since Duet3D itself doesn't have this limitation.

I can fix that but I wanted to make sure it was actually an issue before I did as it does require some work and coordination with the DWC.

nilrog

@gtj0 said in [Preview] DueUI: An Alternate Web Interface:

I can fix that but I wanted to make sure it was actually an issue before I did as it does require some work and coordination with the DWC.

There is no rush, at least from my side, it will be some time before I can start playing with DueUI for real. But i'm looking forward to being able to customize the UI once I have the Duet3d and all the rest fully working.

appjaws

downloaded the file to my kindle fire and installed it but when I click on the app icon I get the start page to input the printers address, then press go and all I get is a blank screen.
Any thoughts?

gtj0

@appjaws said in [Preview] DueUI: An Alternate Web Interface:

downloaded the file to my kindle fire and installed it but when I click on the app icon I get the start page to input the printers address, then press go and all I get is a blank screen.
Any thoughts?

Did you install DueUI on the printer?
Did you specify the full URL? http://<your_printer>/dueui.html
The next release won't require you to do this.

If you unchecked the "Show this screen at startup" button, you'll have to uninstall and re-install to get back to the welcome screen, or go to Settings, Applications, select the app and clear it's data. The next release will have a way to do that from the DueUI settings and will also have better feedback of what went wrong.

boldnuts

Try to install your app on my Asus tablet, getting a parsing error?

gtj0

@boldnuts said in [Preview] DueUI: An Alternate Web Interface:

Try to install your app on my Asus tablet, getting a parsing error?

More detail?
Screenshot?
When does the issue happen?
Can you run the web version OK?