• Tags
  • Documentation
  • Order
  • Register
  • Login
Duet3D Logo Duet3D
  • Tags
  • Documentation
  • Order
  • Register
  • Login

DueUI: An Alternate Web Interface

Scheduled Pinned Locked Moved
DueUI
12
65
11.1k
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • undefined
    thwe
    last edited by thwe 27 Feb 2019, 18:59

    Below I want to show you what I have created in the last few days with the DueUI.

    DueUI is certainly not a replacement for DWC, but for me the ideal basis as a control panel directly on the printer.
    Small netbook (without touch) was ok so far, but the operation with mouse pad was not so comfortable. Also the picture quality was not so sharp.

    Desire was as much control panels by touch on little surfaceas as possible and not to lose the overview - so actually a contradiction.
    Since my 10 inch tablet only serves once a year as a navigation tool on the boat, it has now got a great job again πŸ‘

    Surely everyone has it's own idea of ​​what an ergonomic and clear surface is, but with the DueUI you can quite well realize your own taste.
    With a little bit of logical thinking, even a non-programmer like me can do something with it.

    Below are a few pictures of my current state in the Chrom-browser:

    Display in normal mode, axes homed, ATX ON
    0_1551293223865_Screenshot_2019-02-27-18-28-11.png

    ATX OFF
    0_1551293301469_Screenshot_2019-02-27-18-28-22.png

    And now in full-screen - and now the status indicator is visible
    0_1551293327236_Screenshot_2019-02-27-18-28-51.png

    After a reboot - axes not homed and ATX OFF
    0_1551293429821_Screenshot_2019-02-27-18-29-40.png

    Open selection menu
    0_1551293524436_Screenshot_2019-02-27-18-30-12.png

    The operation of the axes with the jogging as a cross is closer to reality, but so the place is much better exploited - we are all professionals and come so synonymous with itπŸ˜†

    If you are interested, I will gladly provide the configuration file, but without any guarantee and with the note that certain details are adapted to MY printer and probably only usable on a 10 inch tablet.

    Thomas

    undefined 1 Reply Last reply 27 Feb 2019, 21:34 Reply Quote 4
    • undefined
      gtj0 @thwe
      last edited by 27 Feb 2019, 21:23

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

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

      Hmmm. On my Duet, when I send M112, the Duet restarts by itself and is ready again in about 15 seconds. Try it with the DWC disconnected and see what happens on DueUI.

      Without a connect from DWC to the Duet every is OK.

      Other question:

      with

      "actions": [{"type": "gcode", "gcode": "M98 Px_macro_test01.g"}]
      

      i can call a file, but how can i call a macro from the macro-subfolder?

      ... for example "\macros\Tools\Tool bed messuring 5 points"

      When a macro is in a subdirectory, you have to use the full path...
      M98 P"/macros/Tools/Tool bed messuring 5 points.g"

      1 Reply Last reply Reply Quote 0
      • undefined
        gtj0 @thwe
        last edited by 27 Feb 2019, 21:34

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

        Below I want to show you what I have created in the last few days with the DueUI.

        DueUI is certainly not a replacement for DWC, but for me the ideal basis as a control panel directly on the printer.
        Small netbook (without touch) was ok so far, but the operation with mouse pad was not so comfortable. Also the picture quality was not so sharp.

        Desire was as much control panels by touch on little surfaceas as possible and not to lose the overview - so actually a contradiction.
        Since my 10 inch tablet only serves once a year as a navigation tool on the boat, it has now got a great job again πŸ‘

        Surely everyone has it's own idea of ​​what an ergonomic and clear surface is, but with the DueUI you can quite well realize your own taste.
        With a little bit of logical thinking, even a non-programmer like me can do something with it.

        <snip>

        The operation of the axes with the jogging as a cross is closer to reality, but so the place is much better exploited - we are all professionals and come so synonymous with itπŸ˜†

        If you are interested, I will gladly provide the configuration file, but without any guarantee and with the note that certain details are adapted to MY printer and probably only usable on a 10 inch tablet.

        That's fantastic! It's demonstrates perfectly the whole point of DueUI: Creating something that works for YOU. Thanks for sharing it!

        I was thinking of enabling the Wiki on GitHub where others could share their designs. Maybe this will be the first.

        1 Reply Last reply Reply Quote 0
        • undefined
          thwe
          last edited by 27 Feb 2019, 22:32

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

          I tried

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

          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

          Somehow, the 2 "quotes" must be passed in the Statement within the outer quotation marks

          Thomas

          undefined 1 Reply Last reply 27 Feb 2019, 23:15 Reply Quote 0
          • undefined
            thwe
            last edited by 27 Feb 2019, 22:34

            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

            Thomas

            undefined 1 Reply Last reply 27 Feb 2019, 23:29 Reply Quote 0
            • undefined
              gtj0 @thwe
              last edited by gtj0 27 Feb 2019, 23:15

              @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"}]

              undefined 1 Reply Last reply 28 Feb 2019, 13:50 Reply Quote 0
              • undefined
                gtj0 @thwe
                last edited by gtj0 27 Feb 2019, 23:29

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

                undefined 1 Reply Last reply 28 Feb 2019, 14:03 Reply Quote 0
                • undefined
                  thwe @gtj0
                  last edited by 28 Feb 2019, 13:50

                  @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πŸ‘

                  Thomas

                  1 Reply Last reply Reply Quote 0
                  • undefined
                    thwe @gtj0
                    last edited by 28 Feb 2019, 14:03

                    @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:
                    0_1551362555940_Screenshot_2019-02-28-14-51-41.png

                    I'm very satisfied πŸ˜€

                    Thomas

                    1 Reply Last reply Reply Quote 0
                    • undefined
                      pro3d
                      last edited by 28 Feb 2019, 17:35

                      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/

                      0_1551375313240_067 (2).jpg

                      Valkyrie DIY High Temp 3D Printer

                      R&D - Engineering Designer - Viking 3D Printers
                      https://vkingprinter.com/

                      undefined 2 Replies Last reply 28 Feb 2019, 20:35 Reply Quote 1
                      • undefined
                        thwe
                        last edited by thwe 28 Feb 2019, 19:04

                        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 πŸ€”

                        Thomas

                        undefined 1 Reply Last reply 28 Feb 2019, 20:50 Reply Quote 0
                        • undefined
                          gtj0 @pro3d
                          last edited by 28 Feb 2019, 20:35

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

                          1 Reply Last reply Reply Quote 0
                          • undefined
                            gtj0 @thwe
                            last edited by 28 Feb 2019, 20:50

                            @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 πŸ™‚

                            undefined 1 Reply Last reply 1 Mar 2019, 12:42 Reply Quote 0
                            • undefined
                              thwe @gtj0
                              last edited by 1 Mar 2019, 12:42

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

                              Thomas

                              undefined 1 Reply Last reply 1 Mar 2019, 17:00 Reply Quote 0
                              • undefined
                                gtj0 @thwe
                                last edited by 1 Mar 2019, 17:00

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

                                1 Reply Last reply Reply Quote 0
                                • undefined
                                  thwe
                                  last edited by thwe 3 Mar 2019, 09:52 3 Mar 2019, 09:50

                                  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!

                                  Thomas

                                  undefined undefined 2 Replies Last reply 3 Mar 2019, 20:34 Reply Quote 0
                                  • undefined
                                    gtj0 @thwe
                                    last edited by 3 Mar 2019, 20:34

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

                                    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

                                    1. 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!

                                    1 Reply Last reply Reply Quote 0
                                    • undefined
                                      gtj0 @pro3d
                                      last edited by 3 Mar 2019, 21:12

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

                                      1 Reply Last reply Reply Quote 0
                                      • undefined
                                        thwe @thwe
                                        last edited by 5 Mar 2019, 08:15

                                        @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 πŸ‘

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

                                        Works well πŸ‘

                                        1. even if standby <0 then show 0

                                        Works well πŸ‘

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

                                        Thomas

                                        1 Reply Last reply Reply Quote 0
                                        • undefined
                                          thwe
                                          last edited by 5 Mar 2019, 10:19

                                          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

                                          Thomas

                                          devleonundefined 1 Reply Last reply 5 Mar 2019, 11:19 Reply Quote 0
                                          27 out of 65
                                          • First post
                                            27/65
                                            Last post
                                          Unless otherwise noted, all forum content is licensed under CC-BY-SA