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:
A few things to note: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>
- 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:
This will create an input in Tasker as shown here at the bottom:HTML:<meta name="autotoolswebscreen" type="variablejs" id="pageTitle" label="Page Title" description="Title to display on the page" />
Now we need a page element to put the title in. Add this to the body of your page:
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);
}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.
- 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
To test how the page looks like with the title add this just before the above script:
If you now reload the page the title should show up.Code (Javascript):var pageTitle = "Super Title!";
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:
These will be used to create a list in the web screen.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"/>
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:
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:
This simply sets the values if they are not set from Tasker.Code (Javascript):AutoTools.setDefaultValues({
"title":"Title 1,Title 2,Title 3",
"text":"text 1,text 2,text 3",
"checked":"true,false,true",
});
Now we need an element on the page where the list will be created. Add this to the body of your page:
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: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:
- 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
Code (Javascript):AutoTools.variablesToElements(["title", "text", "checked"], "items","item");If you now refresh the page it should show a title and a list of items!
- 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)
Your page's html should now look like this:
Handling List Items (clicks, events and other)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>
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:
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.Code (Javascript):{
"onclick":item=>{
if(!item){
return;
}
console.log(item);
AutoTools.sendCommand(item.text);
AutoTools.say(item.text);
AutoTools.hapticFeedback();
}
}
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):
The events field is an array of event handlers: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)
}]
}
Finally we can make changes to the items as they are added to the list.
- 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
Let's change the title if it contains the number "1" in it. Set this is as the parameter:
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.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!!";
}
}
}
This is what the page's html should be now:
Creating a Web Screen Preset On Your Android DeviceHTML:<!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>
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
- 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.
- 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!
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!
Full Overview On Creating an AutoTools Web Screen
Learn about all aspects of creating a new Web Screen in a step-by-step tutorial
