Full Overview On Creating an AutoTools Web Screen

Learn about all aspects of creating a new Web Screen in a step-by-step tutorial

  1. joaomgcd
    Let's create a new Web Screen from scratch and see how AutoTools can help you do it!

    Important Note:

    It's highly recommended that you test Web Screens you create on a PC. It makes the process a whole lot easier. It's not mandatory though, you can always test it on a real device, but for easy debugging and getting started you should do it on a PC

    Creating The Page

    A Web Screen is nothing more than a regular web page with little "sprinkles" added to it. Check the Github for these where you can get a bunch of additional information on how to create these.
    So let's start by creating a regular web page:
    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <script src="autotoolsfunctions.js"></script>
        <link rel="stylesheet" type="text/css" href="autotoolsstyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    </head>
        <body>

        </body>
        <script type="text/javascript">
     
        </script>
    </html>
     
    A few things to note:
    • To test on a PC you should use the AutoTools JavaScript and CSS files available here and here. Save them to your PC in the same folder as the page and include them in the page as shown above
    • Any JavaScript you may want to use for the Web Screen you should do it after the <body> tag as shown above. This allows AutoTools functions to work after the body and its contents has been created
    • The <meta> tag there is used so that the screen looks good on a mobile device
    • To easily test on an Android device you can use a Dropbox link for the file. Create a share link for it on Dropbox and directly use that link in the Source field in the AutoTools Web Screen action in Tasker. It'll be a bit slow to load the screen each time you run it but it's the easiest way to quickly test changes.

    Adding a Simple Web Screen Variable

    Web Screen variables will be available as inputs in Tasker. You can read more about them here
    We're going to start by setting the page's title with a variable.
    Add this to the <head> section of the web page:
    HTML:
    <meta name="autotoolswebscreen" type="variablejs" id="pageTitle" label="Page Title" description="Title to display on the page"  />
       
    This will create an input in Tasker as shown here at the bottom:
    screenshot_2017_07_26_11_36_55.png

    Now we need a page element to put the title in. Add this to the body of your page:

    HTML:
    <h2>Placeholder Title</h2>
    Now we need to assign the value from Tasker to the on-screen element.
    Add this to the script section of the page:
    Code (Javascript):
       
           var titleElement = document.querySelector("h2");
            if(AutoTools.isSet("pageTitle")){
                titleElement.innerText = pageTitle;
            }else{
                AutoTools.hide(titleElement);
            }
    • Start by getting the title element in the page (h2)
    • Check if the value is set from Tasker with the AutoTools.isSet function
    • If it's set assign its value to the innerText of the title element
    • It it's not set hide the element with the AutoTools.hide function
    If you now test this on your PC you'll see that the title disappears. This happens because you didn't set the "pageTitle" variable's value.
    To test how the page looks like with the title add this just before the above script:
    Code (Javascript):
    var pageTitle = "Super Title!";
    If you now reload the page the title should show up.
    Remember to remove this line (or comment it) if you want to use it in Tasker, or else the title will always be set to "Super Title!".

    This is what your page should look like now:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <script src="autotoolsfunctions.js"></script>
        <link rel="stylesheet" type="text/css" href="autotoolsstyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="autotoolswebscreen" type="variablejs" id="pageTitle" label="Page Title" description="Title to display on the page" defaultValue="Super Title!" />
    </head>
        <body>
            <h2>Placeholder Title</h2>
        </body>
        <script type="text/javascript">
            var pageTitle = "Super Title!";
             var titleElement = document.querySelector("h2");
            if(AutoTools.isSet("pageTitle")){
                titleElement.innerText = pageTitle;
            }else{
                AutoTools.hide(titleElement);
            }
        </script>
    </html>

    Adding Web Screen Variables That Represent Lists

    Let's add 3 more Web Screen variables:
    HTML:


        <meta name="autotoolswebscreen" type="variablejs" id="title" label="Titles" description="A list of comma seperated titles" defaultValue="Title 1,Title 2,Title 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="text" label="Texts" description="A list of comma seperated texts" defaultValue="text 1,text 2,text 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="checked" label="Checked" description="A list of comma seperated true or false values" defaultValue="true,false,true"/>
     
    These will be used to create a list in the web screen.
    They're the same as before with the difference that you tell the user to use comma separated lists of values.
    We want to create a list of items that contain titles, texts and checkboxes.
    This is how it'll look like in Tasker:
    screenshot_2017_07_26_12_26_34.png
    Now we want to make sure that these lists always have values, even if the user doesn't set them from Tasker.
    Add this to your script:
    Code (Javascript):
            AutoTools.setDefaultValues({
                "title":"Title 1,Title 2,Title 3",
                "text":"text 1,text 2,text 3",
                "checked":"true,false,true",
            });
    This simply sets the values if they are not set from Tasker.

    Now we need an element on the page where the list will be created. Add this to the body of your page:
    HTML:
        <div id="items"></div>
    Notice that this element has the ID items
    We also need items to create. For this we will create a template for an item which AutoTools will then replicate once for each item on the list. Add this to the body of your page:
    HTML:
            <div class="item">
                <h3 class="title">Sample Title</h3>
                <input type="checkbox" class="checked"></input>
                <div class="text">Sample Text</div>
            </div>
    • Notice how the root element has the class item (not ID)
    • Notice how there are child elements that have classes with the same names as the Web Screen Variables created above. AutoTools will use these class names to map the Web Screen variables to on-screen elements
    Finally we need to tell AutoTools to actually map the Web Screen Variables to on-screen elements. Add this to your script on the page:

    Code (Javascript):
    AutoTools.variablesToElements(["title", "text", "checked"], "items","item");
    • As the first parameter we set all the Web Screen variables we want to use in the list.
    • The second parameter is the ID of the on-screen element that will contain all the items on the list
    • The third parameter is the class of the on-screen element that serves as a template for all the items on the list (AutoTools will automatically hide the original item and just keep the items it creates on the list)
    If you now refresh the page it should show a title and a list of items!
    Your page's html should now look like this:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <script src="autotoolsfunctions.js"></script>
        <link rel="stylesheet" type="text/css" href="autotoolsstyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="autotoolswebscreen" type="variablejs" id="pageTitle" label="Page Title" description="Title to display on the page" defaultValue="Super Title!" />
        <meta name="autotoolswebscreen" type="variablejs" id="title" label="Titles" description="A list of comma seperated titles" defaultValue="Title 1,Title 2,Title 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="text" label="Texts" description="A list of comma seperated texts" defaultValue="text 1,text 2,text 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="checked" label="Checked" description="A list of comma seperated true or false values" defaultValue="true,false,true"/>
    </head>
        <body>
            <h2>Placeholder Title</h2>
            <div id="items"></div>
            <div class="item">
                <h3 class="title">Sample Title</h3>
                <input type="checkbox" class="checked"></input>
                <div class="text">Sample Text</div>
            </div>
        </body>
        <script type="text/javascript">
            var pageTitle = "Super Title!";
             var titleElement = document.querySelector("h2");
            if(AutoTools.isSet("pageTitle")){
                titleElement.innerText = pageTitle;
            }else{
                AutoTools.hide(titleElement);
            }
            AutoTools.setDefaultValues({
                "title":"Title 1,Title 2,Title 3",
                "text":"text 1,text 2,text 3",
                "checked":"true,false,true",
            });
            AutoTools.variablesToElements(["title", "text", "checked"], "items","item");
        </script>
    </html>
    Handling List Items (clicks, events and other)
    You can optionally set another parameter in the AutoTools.variablesToElements function, which is an itemTransformer.
    This allows you to interact with each of the list items in various ways, like handling when the user clicks on it.
    Add this as the last parameter in the AutoTools.variablesToElements function:
    Code (Javascript):
    {
                "onclick":item=>{
                    if(!item){
                        return;
                    }
                    console.log(item);
                    AutoTools.sendCommand(item.text);
                    AutoTools.say(item.text);
                    AutoTools.hapticFeedback();
                }
            }
    This creates a function that will be executed when each item is clicked. In this case we're sending an AutoApps command with the item's text. This text is the name of one of the Web Screen Variables created above. You could also use title or checked here since those were also used to create the list.
    If you now refresh the page on your PC -> right-click -> Inspect and bring up the console you'll see the script being called whenever you click one of the items.
    /!\ You'll also get a Uncaught ReferenceError: AutoToolsAndroid is not defined for each click. This is normal because AutoToolsAndroid will only exist when running the screen on an actual Android device. You can still see that the script is working.
    You may notice that the checkbox is not working. That's by design! If you want to interact with it you'll need to handle an event it generates. Set this to the to last parameter in the AutoTools.variablesToElements function (replacing the one you set before):
    Code (Javascript):
    {
                "onclick":item=>{
                    if(!item){
                        return;
                    }
                    console.log(item);
                    AutoTools.sendCommand(item.text);
                    AutoTools.say(item.text);
                    AutoTools.hapticFeedback();
                },
                "events":[{
                    "name":"change",
                    "query":".checked",
                    "handler":element=>console.log(element.checked)
                }]
            }
    The events field is an array of event handlers:
    • name is the name of the event you want to handle
    • query is optional and allows you to handle events for child elements of the the main list item. In this case we want the element with the checked class (hence the query is .checked)
    • handler is the function that will be executed when the event triggers on the element. In this case it simply logs the checkbox state to the console
    Finally we can make changes to the items as they are added to the list.
    Let's change the title if it contains the number "1" in it. Set this is as the parameter:
    Code (Javascript):
    {
                "onclick":item=>{
                    if(!item){
                        return;
                    }
                    console.log(item);
                    AutoTools.sendCommand(item.text);
                    AutoTools.say(item.text);
                    AutoTools.hapticFeedback();
                },
                "events":[{
                    "name":"change",
                    "query":".checked",
                    "handler":element=>console.log(element.checked)
                }],
                "item": item => {
                    if(item.title.value.indexOf("1")>=0){
                        item.title.element.innerText+=" This is the first!!";
                    }
                }
            }
    Notice that last function we added. It checks if the item's title has the text "1" in it and adds the text " This is the first!!" to it's element innerText if it does.
    This is what the page's html should be now:
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <script src="autotoolsfunctions.js"></script>
        <link rel="stylesheet" type="text/css" href="autotoolsstyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="autotoolswebscreen" type="variablejs" id="pageTitle" label="Page Title" description="Title to display on the page" defaultValue="Super Title!" />
        <meta name="autotoolswebscreen" type="variablejs" id="title" label="Titles" description="A list of comma seperated titles" defaultValue="Title 1,Title 2,Title 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="text" label="Texts" description="A list of comma seperated texts" defaultValue="text 1,text 2,text 3"/>
        <meta name="autotoolswebscreen" type="variablejs" id="checked" label="Checked" description="A list of comma seperated true or false values" defaultValue="true,false,true"/>
    </head>
        <body>
            <h2>Placeholder Title</h2>
            <div id="items"></div>
            <div class="item">
                <h3 class="title">Sample Title</h3>
                <input type="checkbox" class="checked"></input>
                <div class="text">Sample Text</div>
            </div>
        </body>
        <script type="text/javascript">
            var pageTitle = "Super Title!";
             var titleElement = document.querySelector("h2");
            if(AutoTools.isSet("pageTitle")){
                titleElement.innerText = pageTitle;
            }else{
                AutoTools.hide(titleElement);
            }
            AutoTools.setDefaultValues({
                "title":"Title 1,Title 2,Title 3",
                "text":"text 1,text 2,text 3",
                "checked":"true,false,true",
            });
            AutoTools.variablesToElements(["title", "text", "checked"], "items","item",{
                "onclick":item=>{
                    if(!item){
                        return;
                    }
                    console.log(item);
                    AutoTools.sendCommand(item.text);
                    AutoTools.say(item.text);
                    AutoTools.hapticFeedback();
                },
                "events":[{
                    "name":"change",
                    "query":".checked",
                    "handler":element=>console.log(element.checked)
                }],
                "item": item => {
                    if(item.title.value.indexOf("1")>=0){
                        item.title.element.innerText+=" This is the first!!";
                    }
                }
            });
        </script>
    </html>
    Creating a Web Screen Preset On Your Android Device
    When you're satisfied with what you created you can create a Web Screen preset on your device so you can easily re-use the screen or even to share it with other AutoTools users!
    Saving a Web Screen Preset will save the html page to your device so that the loading is much faster. In the AutoTools Web Screen action in Tasker
    • Set the Source to the dropbox share link for your file
    screenshot_2017_07_26_12_33_48.png
    • Make sure all settings are set to what you want the defaults to be. For example, if you want to display this screen as a dialog most of the times, set the Display Mode field to Dialog.
    • Under Screen Preset Actions click Save Screen Preset. You'll be able to set some of the Web Screen Preset's properties. screenshot_2017_07_26_12_36_37.png
    • Since this screen doesn't use any additional files you don't need to set a list of files. Otherwise you'd need to add them here.
    • Don't share on the server yet. First make sure that your screen is working correctly.
    • Go back to the main screen and under Screen Preset select the preset you just created. AutoTools will now download the page onto your device and you'll be able to run the screen locally!
    • If you want to share the screen with the world you can save it again and then share to server!
    /!\ Since a Web Screen Preset stores the files on your device, if you make changes to your Dropbox file you need to select Screen Preset Actions -> Refresh Source to update the local file.

    Conclusion
    AutoTools gives you the power to create just about any type of screen.
    Let me know if you need any more info in this tutorial and I'll do my best to add it!

Recent Reviews

  1. Vince C
    Vince C
    5/5,
    Very helpful. Thanks Joao!
  2. DarkDarwin
    DarkDarwin
    5/5,
    I feel like some sort of Web Screen Creating God now!! Thanks so much!
  3. jorgepr13
    jorgepr13
    5/5,
    Great tutorial.
    Maybe one area not well covered was reacting to clicks (how to select a perform a task from the web view). But overall, great tutorial.
  4. KaszasM
    KaszasM
    5/5,
    Thanks Joao