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

    DWC 2.0.0-RC3 - a few changes I have made

    Scheduled Pinned Locked Moved
    Duet Web Control
    2
    4
    903
    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.
    • Jacotheronundefined
      Jacotheron
      last edited by

      Ok, so basically, anyone that tried to add the DWC 2.0.0-rc versions to their smartphone home screens, would have noticed that it would basically only be a shortcut to the browser, and loads it in the browser interface - I did not like it; also there is no home screen icon.

      To solve this, I did the following:

      1. Extracted the index.html.gz (using 7-Zip, but any similar zip tool should be able to extract its contents).
      2. Using the Real Favicon Generator (https://realfavicongenerator.net/), I generated a package of favicons using an image I created for it (I only added the tags for iOS, since that is what I have, but you can add the other tags that are generated for your device; adding the others should not slow it down too much, but it is extra bytes needed during the initial download so I left them).
      3. Using a text editor, edit the index.html file that came out of it, then added the following html tags right before the header closing tag </head>:
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
      <meta name="apple-mobile-web-app-title" content="Duet Web Control">
      <meta name="application-name" content="Duet Web Control">
      <meta name="apple-mobile-web-app-status-bar-style" content="default">
      <meta name="apple-mobile-web-app-capable" content="yes">
      

      Found some of the tags at https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8

      Obviously, you can change the content attributes to what is applicable to your machine (machine name, and whether the status bar should be black on white - that is the default).

      1. Next I gzipped all of the files. While uncompressed files work, the gzipped versions (.gz) will load quicker (less bytes to transfer, and decompressing in the browser is so quick, one would not notice it at all).
      2. Finally I upload the files to the www folder on the card, replacing the original (to be safe, be ready to revert the changes, should you experience undesired effects). You can, if you can correctly prepare a DWC zip file, use the system uploader, otherwise if you have FTP access, upload it there.
      3. If all changes applied correctly, adding it to your home screen should use the details we provide, and it should open as an app, and not in the browser UI.
      Danalundefined 1 Reply Last reply Reply Quote 0
      • Danalundefined
        Danal @Jacotheron
        last edited by

        @jacotheron said in DWC 2.0.0-RC3 - a few changes I have made:

        it should open as an app, and not in the browser UI.

        What does that mean? It is still Safari under the covers, yes? What does an end-user see or experience differently?

        I will be the first to say that I may just be uninformed about an iOS difference, a "saved home screen icon" that links to a web site, vs. what you are doing. Maybe I'll learn something really cool!

        Delta / Kossel printer fanatic

        1 Reply Last reply Reply Quote 1
        • Jacotheronundefined
          Jacotheron
          last edited by

          When you regularly visit DWC in Safari, you will get the browser user interface: the address bar at the top; the next and previous buttons along with the export bookmark and tabs buttons along the bottom.

          The <meta name="apple-mobile-web-app-capable" content="yes"> part tells Safari that this web page can be used as standalone interface. When you add it to your home screen, and open it from your home screen, it will appear as a standalone app (completely separate from Safari, in your view of all open apps, it is separate). In this mode, it does not show the address bar or the other browser interface components at all. This basically makes it render in full screen (using all available screen real-estate).

          For comparison I made 2 screenshots:
          Image 1: Standard render inside of Safari
          0_1546872940604_Image-1.jpg

          Image 2: Progressive Web App (PWA) render (still by Safari)
          0_1546873010743_Image-2.jpg

          While the extra vertical space is not really needed for me, I like that it is not just another tab/window inside of Safari (while I like to keep tabs neatly organized and close them regularly, keeping DWC outside of Safari means I don't have to search for it).

          In the 2nd screenshot, the "apple-mobile-web-app-status-bar-style" meta had a content of "translucent-black" in stead of "default" - that is why I scrolled a little bit, to show the top status bar (as it currently renders white background, the white letters are not visible). The images was not edited in any way (taken within 2 minutes of each other).

          1 Reply Last reply Reply Quote 0
          • Danalundefined
            Danal
            last edited by

            Thank you for the thorough explanation, and I did learn something cool!.

            The tab thing makes sense.

            The overlays/controls? They go away when I scroll... still, having them gone semi-permanently is quite nice.

            Nifty!

            Delta / Kossel printer fanatic

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