With AutoTools Web Screen Variables you can easily send data from Tasker into your Web Screens! Here's how it works:
Define Variables In HTML
This is the format for Web Screen variables in HTML:
If you define the above variable, this will be what the configuration screen will look like in Tasker:Code (Text):<meta name="autotoolswebscreen" type="variablejs" id="taskerVariable" label="Tasker Variable" description="An example of a Tasker variable you want to pass over on to the web page. " defaultValue="Some value" />
As you can see a new field is automatically generated in the Screen Variable section at the bottom with the title Tasker Variable.
There's also a super handy way to turn Tasker inputs into lists of elements in the final page with this built-in function:
- It has to be a tag of the type meta
- name has to be autotoolswebscreen
- id is the unique ID for this variable. If it's a js variable, it'll be the name of the variable in the js code. If it's an HTML variable, it'll be the id of an element on the page.
- label is the title of the Tasker preference that will be shown when running this screen
- description is the description of the Tasker preference that will be shown when running this screen
- defaultValue is the default value in Tasker
Will fill in the element with the specified id on the HTML page with whatever text you pass to it from Tasker
Extra variable properties for HTML variables:
- attribute allows you to specify an attribute to set instead of setting the inner HTML of an element (for example, setting the href of an a element)
Let's look at an example:
STEP 1 - SHOW WEB SCREEN WITH VARIABLES
In a Task add a AutoTools Web Screen action and set the Source to the following URL:
Check that AutoTools automatically generated the Tasker Variable and Content input fields from the following <meta> tags present on the page:
Also check that the fields are already filled in with some default values.Code (Text):<meta name="autotoolswebscreen" type="variablejs" id="taskerVariable" label="Tasker Variable" description="An example of a Tasker variable you want to pass over on to the web page. Will be shown when the button is clicked." defaultValue="You clicked it!"/>
<meta name="autotoolswebscreen" type="variablehtml" id="content" label="Content" description="The HTML content you want to appear on the page when first loaded" defaultValue="Hello there. Click the button!<br/>"/>
If you now run the action you'll see a page with the text Hello there. Click the button! (which comes from the second Tasker input field with the id: content and label Content).
This input corresponds to an HTML element with the same id on the page:
When the action is ran, AutoTools will take the text you gave it and put it in the HTML element in the page.Code (Text):<div id="content"></div>
If you click the button you'll write whatever is in the other variable: taskerVariable
By using Web Screen Variables you make your web screens much easier to configure and much more powerful in the process!