How To Use the Card List Web Screen 2017-06-23

Learn how use the card list web screen to create a YouTube search screen

  1. joaomgcd
    In this tutorial we're going to create an AutoTools Web Screen that uses the Card List preset to show interactive YouTube search results. This is a list of material design cards that can show whatever info you want.

    This is how it'll look like in the end:


    As you can see you get a list of clickable results.
    • If you click on the result the video will open locally.
    • If you click on the buttons, the video will open on that specific device

    STEP 1 - QUERY YOUTUBE


    • Create a Tasker task called YouTube Search
    • Set the %separator variable to ###
    (i) Since YouTube video titles and descriptions can have commas in them, which is the default separator in the Card List screen, the listing would break if we didn't use a special separator. By using ### as a separator (or any characters that you think won't appear in the video titles or descriptions) you assure that the listing is correct
    • Set the %query variable to AutoVoice (or anything you want to search for on YouTube)
    • Add an AutoWeb Web Service action
    • Set the API to YouTube and the Action to Search
    • Set the Query field to %query
    • In the Fields to Get option select the following outputs: Description, Title and Video Id
    • Set the Join Output Arrays field to the %separator variable. This way each item in the output will already come separated with the ### separator
    • Go back to the Task


    STEP 2 - CREATE VIDEO THUMBNAIL URLS


    (i) On YouTube you can get a widescreen video thumbnail by using the following URL:
    http://img.youtube.com/vi/VIDEO_ID/mqdefault.jpg
    where VIDEO_ID is the video ID for a certain video. We'll create all the thumbnail URLs for our videos by using the Merge feature in the AutoTools Arrays action

    • Add an AutoTools Arrays action
    • Set the Input->Input Arrays field to %videoid
    • Under Merging enable Merge Arrays
    • Set the Merge Format to http://img.youtube.com/vi/{0}/mqdefault.jpg (where {0} is the placeholder for each item in the input, which in this case is the video id for each video)
    • Set the Join Merged Arrays option to %separator so that the output also is created as merged with the ### separator
    • Set the Merged Array Name to images


    STEP 3 - CREATE VIDEO URLS


    (i) On YouTube you can get a video URL by using the following URL:
    https://www.youtube.com/watch?v=VIDEO_ID
    where VIDEO_ID is the video ID for a certain video. As above, we'll create a video URL for each video using the Merge feature in the AutoTools Arrays action


    STEP 4 - CREATE CARD LIST SCREEN


    (i) This will make clicking the button send the openurl=:=https://www.youtube.com/results?search_query=%query AutoApps command which we will later map to opening urls. This particular URL will open the search results in the YouTube app on your phone.
    • Set the Card Titles to %title
    • Set the Card Subtext Left to %description
    • Set the Card Commands to %videourls and the Command Prefix to openurl
    (i) This will make clicking on each card send the command openurl=:=VIDEO_URL because the Command Prefix will be prefixed to every card command.
    • Set the Card Images to %images
    • Go back and test the Task.
    You'll see that it's all messed up :) This is because we used the ### separator to list the videos but didn't use it in the card list to read the video list, so the cards are separated by commas instead, which is the default.
    • Go back to the AutoTools Web Screen action and set the separator to %separator
    • Test the task again and results should appear correctly!


    STEP 5 - ADD BUTTONS TO OPEN ON REMOTE DEVICES


    • Edit the screen and set the Card Buttons field to Phone###Chrome or whatever the labels for the commands that you want to have are.
    (i) Notice how I separated the names with the ### separator because that's what's set as the separator for the Card List. I couldn't set it as Phone%separatorChrome because then Tasker wouldn't be able to tell that we were trying to use the %separator variable, and not a non-existing variable called %separatorChrome
    • Set the Button Commands field to Nexus 5###Chrome Grande
    (i) These have to match the names of your devices in Join. These are what actually is sent with the AutoApps commands. The Card Buttons field is just used for the button labels.

    Now run the task again. Notice what the AutoApps commands look like when you click on the card (just openurl=:=VIDEO_URL) and when you click on a button (openurl=:=VIDEO_URL=:=DEVICE_NAME). We'll use these commands to open the videos either locally or remotely.


    STEP 6 - CREATE PROFILE TO OPEN URLS LOCALLY AND REMOTELY


    • Create a new profile in Tasker with the AutoApps Command event condition
    • Set the command filter to openurl=:=
    • Set the variable names to url,device
    (i) This means that when a command with the format openurl=:=VIDEO_URL is sent, the %url variable will be set with the video url and the %device variable will not be set, because there's only one set of =:= in the command. If a command with the format openurl=:=VIDEO_URL=:=DEVICE_NAME is set, both variables will be set, because there are 2 sets of =:= in the command
    • In the task add a Flash action with the text Opening %url on %device


    STEP 7 - OPEN URL LOCALLY OR ON REMOTE DEVICE


    • Add an If-Else-End If block where the condition is that %url isn't set
    • In the If part add a Browse URL action with the %url variable
    • In the Else part add a Join Send Push action with the Device Name (under Advanced) set to %device and the URL field set to %url
    (i) This will make sure that a video is open locally when the %device variable is not set and will send a push with Join when the variable IS set
    • Exit Tasker to save your new stuff


    STEP 8 - TEST


    Now when you run the task, it'll show you a screen where if you click on a card it'll open the video locally and if you click a button it'll open the video remotely :cool:



    Now it's up to you to call the task from wherever you like, like for example an AutoVoice command or from a result of an AutoTools Input Dialog.:p