Articles

Build A Custom UI With Material Design AutoTools Web Screen

Material Design AutoTools Web Screen

There aren’t many complaints about Tasker, although creating a UI is one.  AutoTools Web Screens with Material Design Lite is the perfect solution to this.  If you want a custom UI with AutoApps integration and Material Design, continue reading to build your first Material Design AutoTools Web Screen.

 

AutoTools Web Screens

AutoTools Web Screens is an HTML web viewer along with injection capabilities, allowing users to create custom UIs.  Furthermore, it has Tasker integration.  Introducing it with an app launcher example, João showed just how simple it is.  The example was not only functional due to Tasker integration, but also very presentable with CSS styling.  For most, Tasker is the easy part, but what about creating a pretty UI?  Sure, there are plenty of other ways to get receive visual feedback, but sometimes projects require more.  Making good looking HTML requires some CSS knowledge and maybe JavaScript.  But what if you are like me and want a great looking Web Screen UI but do not know or have limited knowledge of CSS?  You may even want Material Design styles but do not know where to begin.  If this is you, I may have a simple solution.

Quick links:
Remote Reference
Local Reference
Web Screen Example
App Launcher Example
Website Search Demo
HTML Format Adder Helper Task

Material Design Lite

Material Design Lite (MDL) fills that void for people like me.  Made for websites, MDL is a lightweight tool that adds basic Material Design styles and components with primary and accent colors.  The best part is we can apply it to AutoTools Web Screens!  Let me show you how simple it is.

Setup Steps

AutoTools Web Screens has the ability to reference the necessary MDL files in two ways.  The first is a reference to remote files, which requires a web connection to access files on another device.  The second is a reference to local files, which are on your device.  I will show you how to do both below.  To start, download an HTML viewer to your device; I use anWriter Free.  Then download and unzip the base HTML file and also transfer it to you device.

Remote Reference

  1. Go to the getting started page, make sure the HOSTED tab is selected and copy the 3 lines of code below it.
  2. Paste that code into your HTML file between the “head” tags.
  3. Next, choose your theme colors from the customizer.
  4. Copy the link below it.
  5. Paste it in place of the second link file from steps 1&2.
  6. The finished code and example screen shots for the above steps are below.
<!doctype html>
<html>
  <head>
    <!-- Paste the MDL JS AND CSS FILES here -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-red.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body>
  <!-- Paste the MDL COMPONENTS here -->
  
  </body>
</html>

Local Reference

  1. Go to the getting started page, make sure the DOWNLOAD tab is selected and download the files via the button.
  2. Next transfer the zipped file onto your mobile device.
  3. Create a folder titled “MDL Files” and transfer above files into it.
  4. Unzip them into the “MDL Files” directory.
  5. Download the material icons zip file into your device.
  6. Unzip and place into the “MDL Files” directory but not into any subfolders.
  7. *If you change or move the directories of the files, all directory references have to be updated to reflect the change or portions will not function properly.
  8. Next, choose your theme colors from the customizer.
  9. Select the button in the middle of the wheel to download and transfer to your device into the same “MDL Files” directory.  Copying the file will overwrite the existing material.min.css file, which is what we want.
  10. The finished code and example screen shots for the above steps are below.
<!doctype html>
<html>
  <head>
    <!-- Paste the MDL JS AND CSS FILES here -->
    <base target="_top" href="////storage//emulated//0//MDL Files//">
    <link rel="stylesheet" href="material.min.css"/>
    <script src="material.min.js"></script>
    <link rel="stylesheet" href="material-icons.css">
    <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body>
  <!-- Paste the MDL COMPONENTS here -->
  
  </body>
</html>

Material Design AutoTools Web Screen Example




Now that the references are in place, it is time to have fun!  Below is an example of an MDL header, text field, and button.  Copy the code below and paste between the body tags.  Then save it.

  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout–no-drawer-button">
      <header class="mdl-layout__header">
          <div class="mdl-layout__header-row">
              <!-- Title -->
              <span class="mdl-layout-title">MDL AutoTools Web Screen</span>
          </div>
      </header>
      <main class="mdl-layout__content">
          <div class="page-content">
              <!-- Your content goes here -->
              <div class="mdl-grid">
                  <div class="mdl-cell mdl-cell--12-col">
                      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                          <input class="mdl-textfield__input" type="text" id="text">
                          <label class="mdl-textfield__label">Text...</label>
                      </div>
                  </div>
                  <div class="mdl-cell mdl-cell--12-col">
                      <!-- Accent-colored raised button with ripple -->
                      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="button">Press For AutoApps Command!</button>
                  </div>
              </div>
          </div>
      </main>
  </div>
  <script type="text/javascript">
document.getElementById("button").onclick=()=>{window.location.href="autotoolscommand://toast=:=" + document.getElementById("text").value};
  </script>

To demonstrate the new AutoTools Web Screen Tasker functionality, we will have to create a profile with an AutoApps context.  Set the command filter to “toast=:=” and make sure regex is checked.  Now add a flash action to display “%aacomm”.  Exit and save it.  Finally, create a new Task with an AutoTools Web Screen action.  Use the newly created HTML file as the source and run the Task.  When in the Web Screen, type into the text field and press the button.  Boom!  You should see a flash across the screen with the text that was typed into the text field.  See my example video for how it looks!

Material Design AutoTools Web Screen App Launcher Example



Below is my App Launcher example code and video just to give an idea of what else can be created. Here is the Project XML (zipped).  Make sure you have first followed the steps above.  Enjoy!

  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
          <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title" id="title">WebScreen App Launcher</span>
          </div>
      </header>
    	  <div class="mdl-layout__drawer">
              <span class="mdl-layout-title">Filter Apps By:</span>
              <nav class="mdl-navigation">
                  <a class="mdl-navigation__link" href="autotoolscommand://autotools_web_screen_app_launcher=:=ALL">ALL</a>
                  <a class="mdl-navigation__link" href="autotoolscommand://autotools_web_screen_app_launcher=:=A-J">A-J</a>
                  <a class="mdl-navigation__link" href="autotoolscommand://autotools_web_screen_app_launcher=:=K-T">K-T</a>
       	          <a class="mdl-navigation__link" href="autotoolscommand://autotools_web_screen_app_launcher=:=U-Z">U-Z</a>
              </nav>
    	  </div>
 	  <main class="mdl-layout__content">
    	      <div class="page-content">
    	      <!-- Your content goes here -->
    	          <!-- list-->
    		  <ul class="mdl-list" id="list">
    		      <li class="mdl-list__item">
   	    	          <span class="mdl-list__item-primary-content">
    			  <i class="material-icons mdl-list__item-icon">person</i>
   	    		  Bryan Cranston
    			  </span>
   	    	      </li>
   	 	  </ul>
    	      </div>
    	  </main>
  </div>

Material Design AutoTools Web Screen: Website Search Demo




Below is a Website Search Demo using AutoTools Web Screens, AutoNotification, and AutoWeb to get specific post Titles and URLs on the fly from this website. A notification tile tap brings up a dialog to input a search query. Once I select ok, it searches my website and populates the web screen with cards and buttons. Depending on the button, either the title, url, or both get copied to my clipboard in order for me to paste anywhere I like.

Material Design AutoTools Web Screen: HTML Format Adder Helper Task

Looking up and then adding basic HTML tags for text is always a tedious process.  What if you could create a Tasker Task to help you out with such tediousness?  With that said, I created the HTML Format Adder Helper Task to lessen the time of adding this basic HTML for text.  Such text is perfect for AutoNotification notifications, AutoTools Toasts, Tasker Action Labels, and a few of Nick Mowen’s Tasker Plugins.  I used this page as a guide to determine the “basic” HTML formatting used in my video demo below.


  • Follow steps within “Local Reference” to download the files and establish the folder structure but use this HTML file instead.  Note, the HTML file already uses the local references
  • Download, unzip, and import the Project XML (zipped)
  • *The following steps require AutoShare Beta*:
  • Open AutoShare, select “Manage Text Processors”
  • Create a new text processor by clicking the “+” icon
  • Name it “HTML Format Adder”, give it an icon
  • Select “Yes” when asked if you want to Modify Text
  • Give it a timeout of 60
  • Long press it to bring up a menu to select “Process HTML” and select “No”
  • Test it out and enjoy!

Conclusion

Because of MDL, a Material Design AutoTools Web Screen is perfect for creating custom UIs for your Tasker projects.  It is important to realize that this combination is almost a full fledged Android App, WOW!  Furthermore, the combo is far better than Tasker’s Native Scene feature, in my opinion.  That may or may not change with the soon approaching Tasker update.  In closing, let your imagination run wild and you will be able to build a beautiful custom UI!  Now add a navigation menu, a few sliders, some icons, a card, and/or toggles; the options are limitless! Then combine it with other AutoApps and Tasker plugins via the command system to create your perfect project!  For more information and to expand your imagination, visit the MDL website, and W3Schools for HTML references and general help. Good Luck and have fun!

24 thoughts on “Build A Custom UI With Material Design AutoTools Web Screen

  1. Hi! Just quick question. I am new with Tasker and just wonder If I create and distribute stand alone app using Tasker, AutoInput, AutoTools WebScreen, should end users install all those apps as well for my app work properly?

  2. They should install any plugins that you have used within your Project. If they do not, I believe Tasker will prompt them to download said plugins.

  3. Quick Question. Do you know why i don’t have an AutoTools Web Screen action in my list of options? I just looked at a video from joaoapps and it should be under the Wallpapers/Muzei option, but i don’t have it, do you have any idea why that is?

  4. I know it’s too much to ask but it would be so cool if you could make some detailed explanation for beginners like me of what you did in your Project XML like 6. AutoLaunch Query, 8. Autotools Arrays and basically everything… )

  5. Hi again Zheka. Is there any specific action you are having trouble with? Don’t be afraid to play around with the actions to see what happens. That way, you’ll get a better understanding of how it works!

  6. Yes you right. That’s actually what I do – trying to play with it. But still not everything is clear. Like the task “Autotools Web Screen App Launcher” works without any profiles so what is the sense of those two profiles you have? The Task works without Actions 3 through 8. What are their purposes?
    Thanks!

  7. Zheka, sorry for late response. Yes the task will run on it’s own as I demonstrated in the video example (sorry for the low volume). The first profile titled “AutoTools Web Screen App Launcher” is needed to help filter apps from any selection made within the Web Screen using an AutoLaunch Query. The second profile titled applauncher=:= will open any app once selecting it from the list.

    The reason for actions 3-8 like you asked from above are to help filter which apps to show in the Web Screen. When you first open the Web Screen, like from the homescreen shortcut in the video, Action 4 will execute within the IF statement. This is because the variable “%aacomm” isn’t initially set, providing an array of all installed apps on your device. Now once inside the Web Screen, any selection made from the navigation menu will trigger the first profile again, this time populating the “%aacomm” variable (with the selection). When selecting any of the options other than the “ALL”, the IF statement executes Action 5 this time and filters your device’s apps according to the nav menu selection. When selecting “ALL” the same profile triggers, this time populating the variable “%aacomm” with “ALL”. This executes Action 3 from the If statement, similarly to when initially opening the Web Screen. This will give you back all the device’s apps in the list. Then Action 8 configures the filtered/unfiltered app list into the HTML syntax to be injected into the Web Screen.

    I hope this helps!

  8. The link under HTML Format Adder Helper Task to download project XML is not working.

  9. Rory, in your first AutoTools Web Screen Tasker functionality demonstration is there anyway to use window.close or window.”BackButtonPressed” as a trigger for the toast instead of press button? I tried window.close, onunload, unload, onbeforeunload but nothing work. May be I just use wrong syntax..

  10. Thank you, Rory. I asked there but it did not help. Anyway I found even better solution than I thought.

  11. Sure! Actually, I needed to create autotools webscreen html page as a control panel with check boxes for my tasker task. Using localstorage I save checkboxes state and I use “$myVar.on(“change”… ” as a trigger to send autotoolscommand on the time any checkbox state is changed. Thus I do not need such triggers as close page, back button and so on. Let me know if you need code I can share it with you.

What did you think???