DueUI: An Alternate Web Interface

[thwe]

Another Question:

Is it possible to show the value of the slider?

In my pictures you can see that I have inserted 3x? as a placeholder

[gtj0]

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

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

I tried

"actions": [{"type": "gcode", "gcode": "P"/macros/Tools/Only_a_test.g""}]

You can either escape the double quotes with backslashes:
"actions": [{"type": "gcode", "gcode": "P\"/macros/Tools/Only_a_test.g\""}]
or in javascript, single and double quotes do the same thing:
"actions": [{"type": "gcode", "gcode": "P'/macros/Tools/Only_a_test.g'"}]
or:
"actions": [{"type": "gcode", "gcode": 'P"/macros/Tools/Only_a_test.g"'}]
or if your macro path doesn't have spaces, you can leave the inner quotes off:
"actions": [{"type": "gcode", "gcode": "P/macros/Tools/Only_a_test.g"}]

BUT see below.

but this would not work (Syntax error of CSS) because of the double quotes

… this

"actions": [{"type": "gcode", "gcode": "P/macros/Tools/Only_a_test.g"}]

is for the CSS correctly, but the Duet can not interpret that because:
--> Error: Bad command: P/macros/Tools/Only_a_test.g

That's because your real issue is that you forgot the M98 GCode command at the beginning.

"actions": [{"type": "gcode", "gcode": "M98 P/macros/Tools/Only_a_test.g"}]

[gtj0]

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

Another Question:

Is it possible to show the value of the slider?

In my pictures you can see that I have inserted 3x? as a placeholder

The best way to do that right now is to have those "???" placeholders be buttons and track the state of the fanPercent values in the status message just as the slider does.

"read_only: true,
"status_level": 1,
"value": "${status.params.fanPercent[0]}",

Change "0" to correspond to each slider's value.

In the next release, I'll add the capability to have labels also track status variables.

[thwe]

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

That's because your real issue is that you forgot the M98 GCode command at the beginning.

There are many problems with programming, the biggest ALWAYS sits in front of the screen

Now it works

[thwe]

@gtj0

First i tried it with "label" ... without success

code adapted:

{
  "id": "fan_0_label2",
  "type": "button",
  "enabled": true,
  "read_only": true,
  "status_level": 1,
  "value": "${status.params.fanPercent[0]}%",
  "style": {"width": "9ch","height": "30px", "font-size": "10px", "text-align": "center"},             
  "initial_value": "---%",
  "position": {"my": "left top", "at": "right+3 top+1", "of": "#fan_0"}
},

and this is the result:

I'm very satisfied

[pro3d]

I appreciate this project as I use a tablet for controlling the printer with DWC. DWC in a browser is very touch sensitive and I tend to activate stuff I dont mean to and often accidentally refreshes the browser by dragging witch creates a lot of irritation for me. This is a android tablet with chrome browser

Is this UI more user friendly in the touch department?

Is it possible to make an application for mobile devices that is not just a browser based solution? I was very happy with the printoid app when using octoprint. It was an awesome controller with a tablet

https://printoid.net/

[thwe]

Update made on alpha3 and also tested and implemented the new ATX button ... really nice option

Unfortunately, I do not understand the other possibilities or how exactly the syntax must be.
I wanted different actions in a widget and a pop-up dialog with selection and subsequent execution of the selected selection.

So the "choose" variant of my test without success:

/* START of TEST choose-button */
				{
					"id": "xtestx",
					"type": "button",
					"enabled": true,
					"position": {"my": "left top", "at": "right+5% top", "of": "#elapsed"}, 
					"style": {"width": "30%", "height": "2.5em"},
					"status_level": 1,
					"state_field": 1,
					"state_styles": [
						{"background": "red", "content": "A-A-A-A"},
						{"background": "green", "content": "B-B-B-B"}
					],
					"value": "TEST",
					"actions_type": "choose",
					"actions": [
						{"type": "gcode", "gcode": "G4 P100"},
						{"type": "gcode", "gcode": "G4 P100"}
					]
				},
/* END of TEST choose-button */

Please can you give me a little support

[gtj0]

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

I appreciate this project as I use a tablet for controlling the printer with DWC. DWC in a browser is very touch sensitive and I tend to activate stuff I dont mean to and often accidentally refreshes the browser by dragging witch creates a lot of irritation for me. This is a android tablet with chrome browser

Is this UI more user friendly in the touch department?

DueUI can be customized right down to the button sizes so if you have large fingers like me, you can make the controls a bit bigger and increase the spacing between them.

Is it possible to make an application for mobile devices that is not just a browser based solution? I was very happy with the printoid app when using octoprint. It was an awesome controller with a tablet

Hmmm. It may be possible, at least for Android. I haven't done any Android app development in a few years but it was fairly easy to take a web app and wrap it in a Webview component so it looked like a native app. This might also solve a nagging issue with having to keep making the browser full-screen to see all the content. Let me think about it. For the Apple platforms, well, sorry but I have no experience there nor can I realistically get any.

[gtj0]

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

Please can you give me a little support

Your syntax is correct. I tested this I swear but I must have broken it afterwards. I'll fix it tonight. And I'll re-test it

[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

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

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

3. even if standby <0 then show 0

4. 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

1. 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"},

2. 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)}",

3. 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

4. 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:

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

Works well

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

Works well

3. even if standby <0 then show 0

Works well

4. 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.