Hack: create a standalone desktop application out of the web UI.



  • If you are running the Web UI on a Mac, PC, or Windows here is a cool trick to create a native application for controlling the Duet WiFi. The advantage is that your control interface doesn't get lost in a sea of browser tabs, and you can keep it in your dock for easy access. I little techie experience is useful but not too difficult.

    I installed this for my Ender 3. If you have multiple printers, create an app for each!

    Note: These instructions are for macOS. Yours may be slightly different on other platforms.

    More info: https://github.com/jiahaog/nativefier
    You'll need node.js and npm installed on your machine. Then, it is easy:

    From the terminal app:

    # Install nativefier
    $ sudo npm install nativefier -g
    
    # Lots of options for the application frame, like sizing, fullscreen, single-instance, etc.
    $ nativefier --help         
    
    # Create the application frame. (substitute your IP address)
    $ nativefier -f -n "Duet Ender 3" --single-instance http://192.168.0.34/
    
    # "Duet Ender 3.app" created. Move to where you want it and run.
    

    0_1554153030285_Screenshot 2019-03-28 18.36.16.png



  • That's great. I'll have to try that out.



  • It's a handy little app. If you use Chrome, you can also do this directly in Chrome under "More Tools", "Create Shortcut" or by starting chrome with google-chrome --app=http://<address>



  • @svenyonson I just make my printer address my home page so whenever I open a web browser, there I am.. 🙂
    This does make me want to program an application in c#. Could add a few more things so it would be like dwc supports more.



  • @kungpaoshizi I suppose - but then you'd get a 404 every time you use a browser and your printer is turned off - which in my case is 99% of the time. And what if you have more than one printer? (everyone should have at least 2 :).



  • Secondary tabs 😛



  • @gtj0 said in Hack: create a standalone desktop application out of the web UI.:

    you can also do this directly in Chrome under "More Tools", "Create Shortcut"

    Worked for me. Thanks for posting.



  • @zapta Yes that works - I was running an older version of chrome which didn't have the Create Shortcut feature. Even easier than using nativefier. That said, there may be more possibilities, such as tab support, window size, full screen mode with the nativefier method. Probably not needed for Duet Wifi control though.



  • @zapta Also, for some applications where you want to download to a specific location on your file system, since nativefier uses a privileged webview, you can make it open a File Save As dialog instead of just downloading to your downloads directory (--file-download-options). Anyway, for some applications it might make a difference. FYI here are the available options when creating the application frame.

    Options:
      -V, --version                         
      -n, --name <value>                    
      -p, --platform <value>                
      -a, --arch <value>                    
      --app-version <value>                 
      --build-version <value>               
      --app-copyright <value>               
      --win32metadata <json-string>         
      -e, --electron-version <value>        
      --no-overwrite                        
      -c, --conceal                         
      --counter                             
      --bounce                              
      -i, --icon <value>                    
      --width <value>                       
      --height <value>                      
      --min-width <value>                   
      --min-height <value>                  
      --max-width <value>                   
      --max-height <value>                  
      --x <value>                           
      --y <value>                           
      -m, --show-menu-bar                   
      -f, --fast-quit                       
      -u, --user-agent <value>              
      --honest                              
      --ignore-certificate                  
      --disable-gpu                         
      --ignore-gpu-blacklist                
      --enable-es3-apis                     
      --insecure                            
      --flash                               
      --flash-path <value>                  
      --disk-cache-size <value>             
      --inject <value>                      
      --full-screen                         
      --maximize                            
      --hide-window-frame                   
      --verbose                             
      --disable-context-menu                
      --disable-dev-tools                   
      --zoom <value>                        
      --internal-urls <value>               
      --crash-reporter <value>              
      --single-instance                     
      --processEnvs <json-string>           
      --file-download-options <json-string> 
      --tray                                
      --basic-auth-username <value>         
      --basic-auth-password <value>         
      --always-on-top                       
      -h, --help
    


  • @svenyonson, yes, that approach has more option but it requires downloading third party executable that I try to avoid on my go-to computer.

    I also saw this approach that doesn't require third party binaries https://developer.chrome.com/apps/app_codelab_basics

    Anyway, thanks for sharing the app idea with us.



  • @zapta Thanks for the link - always looking for new ways to do things. As far as the third party executable, it's open source and what you are actually running is javascript so you can see the source if you want to.



  • @svenyonson said in Hack: create a standalone desktop application out of the web UI.:

    it's open source and what you are actually running is javascript so you can see the source if you want to

    I was referring to the tools, npm and nativefier, I don't have them installed on my machine.

    Your idea of a duet app is very good. I just need to figure out how to achieve it within the security constraints of my machine of choice.



  • @zapta I always err on the side of caution so I do appreciate your security concerns. However, both npm and nativefier are interpreted javascript applications and you could explore the code if you so wished - not even minified or obfuscated so you can actually read it. While nativefier is not a mainstream tool, npm is a pretty universal package manager, like apt for linux. Both npm and nativefier do require node.js to be installed, as it is the javascript interpreter for non-browser applications.

    npm -> ../lib/node_modules/npm/bin/npm-cli.js
    

    and

    nativefier -> ../lib/node_modules/nativefier/lib/cli.js
    

    Not that you'd want to spend an evening looking at the code, but it's not opaque like a binary.



  • @svenyonson Thank you for sharing ... it's great and practical!


Log in to reply