Duet3D Logo

    Duet3D

    • Register
    • Login
    • Search
    • Categories
    • Tags
    • Documentation
    • Order

    [HELP] How to use DueUI without a Duet using chrome

    DueUI
    3
    73
    682
    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.
    • Dario02
      Dario02 last edited by Dario02

      Hi, I would like to create a good looking GUI. I don't own a duet for now so I have created a Apache webserver on localhost and then I tried to connect and it works. Then I tried this:
      Duet hostname or IP address: http://localhost/
      DueUI config file URL:
      D:\Apache24\htdocs\dueui_config_default_standalone.json

      But I don't see any UI showing up....

      gtj0 1 Reply Last reply Reply Quote 0
      • gtj0
        gtj0 @Dario02 last edited by

        @Dario02 I just realized that DueUI won't start at all if it can't find a Duet to connect to. Give me until tomorrow and I'll fix that so you can run it in test mode without a Duet. Sorry about that!

        Additional Info:

        The config file URL must also be via the webserver so something like http://localhost/dueui_config_default_standalone.json

        This is because browsers no longer allow applications to load files directly from the local filesystem.

        Your filesystem layout should look something like this...

        D:\Apache24\htdocs\
        | - css/
        | - fonts/
        | - js/
        | - dueui.html
        | - dueui_config_default_standalone.json
        

        Then to access DueUI, the URL would be http://localhost/dueui.html
        and the config URL would be http://localhost/dueui_config_default_standalone.json

        If you use the Chrome debugger <ctrl>-<shift>-i you'll get more information if something goes wrong.

        Dario02 1 Reply Last reply Reply Quote 0
        • Dario02
          Dario02 @gtj0 last edited by Dario02

          @gtj0 Oh here we go! Don't worry, happy to have helped you discover this ahah.

          gtj0 1 Reply Last reply Reply Quote 0
          • gtj0
            gtj0 @Dario02 last edited by

            @Dario02 I just pushed up a new release that has a "Test Mode" button under Settings. When it's turned on, you don't need a Duet to get the GUI to display.

            You may have to clear cookies/data for "localhost" to get the Settings page to show up again.

            Dario02 2 Replies Last reply Reply Quote 0
            • tech-raton
              tech-raton last edited by

              For testing purpose, what should be written in the url for a config file in my computer?

              I didn't have any apache server

              gtj0 1 Reply Last reply Reply Quote 0
              • Dario02
                Dario02 @gtj0 last edited by

                @gtj0 Ok I'll let you know soon

                1 Reply Last reply Reply Quote 0
                • Dario02
                  Dario02 @gtj0 last edited by Dario02

                  @gtj0 Could you make a tutorial to configure a server for test mode? I'm trying to get it done but I don't know the files I have to put in my localhost server document folder

                  gtj0 1 Reply Last reply Reply Quote 0
                  • Dario02
                    Dario02 last edited by Dario02

                    This post is deleted!
                    1 Reply Last reply Reply Quote 0
                    • gtj0
                      gtj0 @tech-raton last edited by

                      @tech-raton said in [HELP] How to use DueUI without a Duet using chrome:

                      For testing purpose, what should be written in the url for a config file in my computer?

                      I didn't have any apache server

                      Unfortunately, browsers no longer applications to access files on a local computer but there are extensions you can add to your browser that can turn it into a mini http server. The one I use most often when I need a quick web server is ...
                      https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?utm_source=chrome-app-launcher-info-dialog

                      That's for Chrome-based browsers only of course.

                      Here's a more generic way to set up a test server...
                      https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

                      1 Reply Last reply Reply Quote 0
                      • gtj0
                        gtj0 @Dario02 last edited by

                        @Dario02 said in [HELP] How to use DueUI without a Duet using chrome:

                        @gtj0 Could you make a tutorial to configure a server for test mode? I'm trying to get it done but I don't know the files I have to put in my localhost server document folder

                        That's a good idea. I'll add that to the wiki. For now see my reply above.

                        Dario02 1 Reply Last reply Reply Quote 1
                        • Dario02
                          Dario02 @gtj0 last edited by Dario02

                          @gtj0 4593149f-9f23-4e0e-a8be-6f1bc4fdd569-image.png

                          what now?
                          ctrl+shift+i:

                          dueui.html:1 Uncaught SyntaxError: Unexpected identifier
                          at DOMEval (dueui-vendor-bundle.js:124)
                          at Function.globalEval (dueui-vendor-bundle.js:358)
                          at text script (dueui-vendor-bundle.js:9877)
                          at ajaxConvert (dueui-vendor-bundle.js:9013)
                          at done (dueui-vendor-bundle.js:9483)
                          at XMLHttpRequest.<anonymous> (dueui-vendor-bundle.js:9785)

                          1 Reply Last reply Reply Quote 0
                          • Dario02
                            Dario02 last edited by Dario02

                            I don't know how but now it works xD.
                            I have activated all the buttons ahahha and it crashes. Then I started again the server and now it works, finally I can see the simulator 🙂

                            1 Reply Last reply Reply Quote 0
                            • Dario02
                              Dario02 last edited by

                              is there a way to set an image for a logo and icons to buttons?

                              gtj0 1 Reply Last reply Reply Quote 0
                              • gtj0
                                gtj0 @Dario02 last edited by

                                @Dario02 said in [HELP] How to use DueUI without a Duet using chrome:

                                is there a way to set an image for a logo and icons to buttons?

                                Sure!
                                You can place an image anywhere using the "image" widget.
                                You can also place arbitrary HTML anywhere with the "html" widget.

                                For buttons, you can add an icon from the set available from Google Material Icons using the "icon" attribute.

                                You can also place your own html in the "value" attribute like so:

                                {
                                	"id": "restart",
                                	"type": "button",
                                	"enabled": true,
                                	"style": {
                                		"width": "96px",
                                	},
                                	"classes": "btn btn-warning",
                                	"value": "Restart <img src='my_restart_icon.png'/>",
                                	"actions": {"type": "gcode", "gcode": "M999"}
                                }
                                
                                Dario02 1 Reply Last reply Reply Quote 1
                                • Dario02
                                  Dario02 @gtj0 last edited by Dario02

                                  @gtj0 what about custom icons? For example I made some images that I would like to use for buttons, any example? If you tell me that you will make a tutorial for everything on wiki I can wait that you finish

                                  gtj0 1 Reply Last reply Reply Quote 0
                                  • gtj0
                                    gtj0 @Dario02 last edited by

                                    @Dario02 said in [HELP] How to use DueUI without a Duet using chrome:

                                    @gtj0 what about custom icons? For example I made some images that I would like to use for buttons, any example? If you tell me that you will make a tutorial for everything on wiki I can wait that you finish

                                    Just put them in the same directory as the top level html file and you can use the button example above. "value": "<img src='/my_icon.png'/>"
                                    Now the button will display the icon instead of text.

                                    Dario02 2 Replies Last reply Reply Quote 0
                                    • Dario02
                                      Dario02 @gtj0 last edited by

                                      @gtj0 ok thank you, another question is how can I manage containers? For example to create a barmenu etc. I suggest you to write all this stuff in the wiki 😉

                                      1 Reply Last reply Reply Quote 0
                                      • Dario02
                                        Dario02 @gtj0 last edited by Dario02

                                        @gtj0 Just put them in the same directory as the top level html file and you can use the button example above. "value": "<img src='/my_icon.png'/>" doesn't work, maybe I didn't understand correctly, an example for '/my_icon.png' please

                                        1 Reply Last reply Reply Quote 0
                                        • Dario02
                                          Dario02 last edited by Dario02

                                          ok i had to resize the image... is there a way like on css to self crop the image specifying the size in pixel or in percentage?
                                          Another problem is that by setting an image as value this is not centered and remains some colored margin....

                                          gtj0 1 Reply Last reply Reply Quote 0
                                          • gtj0
                                            gtj0 @Dario02 last edited by

                                            @Dario02 You have complete control over the styling with the "style" attribute. Almost anything you can do in CSS you can do with "style". See the example in https://github.com/gtjoseph/DueUI/wiki/Element

                                            Dario02 1 Reply Last reply Reply Quote 0
                                            • Dario02
                                              Dario02 @gtj0 last edited by

                                              @gtj0 ok I'll check thank you, please could you check why If I put an image to a button the image is not centered and doesn't cover the whole button even if I resize it in photoshop?

                                              gtj0 1 Reply Last reply Reply Quote 0
                                              • gtj0
                                                gtj0 @Dario02 last edited by

                                                @Dario02 At the time the screen is painted, the browser might not know what the size of the image is.

                                                Let's say your image is 128x128 but you want it to display as 32x32 in a button that's 8 pixels bigger (40x40):

                                                {
                                                	"id": "my_button",
                                                	"type": "button",
                                                	// Set the size of the image
                                                	"value": "<img src='my_icon.png' width='32' height='32'/>",
                                                	// Set the size of the button
                                                	"style": {
                                                		"width": "40px",
                                                		"height": "40px",
                                                		"padding": "8px",
                                                	},
                                                },
                                                

                                                You'll have to play with the style (CSS) to get it to display the way you want.

                                                1 Reply Last reply Reply Quote 0
                                                • tech-raton
                                                  tech-raton last edited by

                                                  Thank you very much,

                                                  I'm on tracks.
                                                  I'm modifying your file.
                                                  I was looking for a way to modify the layout of dwc but your way is easier.
                                                  Thank you again.

                                                  1 Reply Last reply Reply Quote 0
                                                  • Dario02
                                                    Dario02 last edited by

                                                    @gtj0 how to fix this errore?
                                                    Could not retrieve config from http://192.168.1.118/rr_download?name=/sys/dueui_config.json

                                                    gtj0 1 Reply Last reply Reply Quote 0
                                                    • gtj0
                                                      gtj0 @Dario02 last edited by

                                                      @Dario02 said in [HELP] How to use DueUI without a Duet using chrome:

                                                      @gtj0 how to fix this errore?
                                                      Could not retrieve config from http://192.168.1.118/rr_download?name=/sys/dueui_config.json

                                                      Does the file actually exist in the /sys/ directory on the Duet?
                                                      If not, you need to either place the file there, or change the "DueUI config file URL" in Settings to point to the correct config file.

                                                      Dario02 1 Reply Last reply Reply Quote 0
                                                      • First post
                                                        Last post
                                                      Unless otherwise noted, all forum content is licensed under CC-BY-SA