Create Context Bubbles 2017-08-02

Learn how to make interactive bubbles appear for a limited time at special occasions

  1. joaomgcd
    Sometimes you want to be able to perform certain things quickly in some context.
    For example:
    • When you receive a 2-factor authentication notification you'd like to quickly paste the code on your PC
    • When arriving home you may want to turn on a light
    • When copying some special link you may want to handle it in a special way
    All of these actions make sense just after the situation arises, but make little sense some time later. For example, when receiving a 2 factor authentication code it makes sense to use it within the next 5 seconds or so.

    This is why I've created Context Bubbles. These are bubbles that popup just when you need them but go away after some time.

    Here's how it looks for the 2-factor authentication example:


    The bubbles show up when a notification with a certain pattern is received and go away either when clicked or after 5 seconds. If a bubble is clicked you can do whatever you want with it, in this case set the clipboard on your PC.
    You can find the 3 aforementioned examples pre-made for you in the attached Tasker project. They are disabled, so enable them if you need them.

    STEP 1 - IMPORT PROJECT AND INTERCEPT 2 FACTOR NOTIFICATIONS


    • Import the attached Tasker project xml file as shown in the video
    • Add a new profile with an AutoNotification Intercept condition
    • Set the apps you want to handle. In this case I'm selecting Join so I can easily test it, but you can select any apps you want
    • Set the Text Filter to \d{4,} and enable regex which means that it will intercept any notification whose text has 4 or more digits in a row
    • Accept and create a task for the profile


    STEP 2 - CREATE 2-FACTOR BUBBLES


    • Add a Perform Task action and set the Name to Show Context Bubbles
    • Set Parameter 1 to %antext###\d{4,}###5###white###red
    (i) These are several parameters separated by ###:
    (i) %antext
    is the text full text you want to parse;
    (i) \d{4,} is the regex that matches 4 or more digits in a row. Each result for these matches will create its own bubble;
    (i) 5 is the timeout for the bubbles (optional; default=10)
    (i) white is the text color (optional; default=white)
    (i) red is the text's background color (optional; default=black)
    (i) When calling the Show Context Bubbles task, it'll take the full text, parse it with the regex, and for each match create a bubble. If you click a bubble that value will be returned to the parent task. If you don't click a bubble, it'll return an empty value
    • Add a Join Send Push action, set the destination device and the Clipboard field to %code
    • Select the option to ONLY RUN THIS ACTION IF %code IS SET. This is very important because if you don't add this limitation it'll set your PC's clipboard to %code after the 5 second timeout


    STEP 3 - TEST 2-FACTOR AUTHENTICATION


    If you now receive a notification with codes you'll get one or more bubbles that you can click to set the PC's clipboard.
    Notice how in the example there were 2 potential codes in the text, so 2 bubbles were created.



    STEP 4 - OPEN REDDIT URLS IN FLOATING WINDOWS


    • Add a new profile with the Variable Set condition and set Variable to %CLIP
    • In the task add a Perform Task action and set the Name to Show Context Bubbles
    • Set Parameter 1 to %CLIP###http[^ ]+reddit[^ ]+
    /!\ The regex in the video is wrong, please use the one above
    (i) As before you're sending some parameters but as you can see you're only sending the content and the regex. You can omit the timeout, text color and background color parameters if you want
    (i) This will create bubbles every time your clipboard contains a link with the word "reddit" in it
    • Set Parameter 2 to http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Reddit-icon.png or whatever icon you want
    • Set Return Value Variable to %selectedurl
    • Add an AutoTools Web Screen action that only runs if %selectedurl is set
    • Set Display Mode to Overlay
    • Set Source to %selectedurl
    • Set Width and Height to 300 (or whatever size you need)
    • Set Gravity to Bottom Right
    • Enable dragging on the top left corner and closing on the top right corner
    • Enable the Handle All Links option
    • Back out of Tasker to save


    STEP 5 - TEST REDDIT LINKS


    If you now copy a reddit link to your clipboard a bubble will appear. If you click it, a floating window with the website will show up.
    If you don't click it the bubble will go away after the default 10 seconds.


    STEP 6 - TURN ON LIGHT WHEN ARRIVING HOME


    • Add a new profile with the Wifi Connected condition and set your home Wifi network's name
    • Add a Perform Task action and set the Name to Show Context Bubbles
    • Set Parameter 1 to Living Room###.+###60###white###orange
    (i) This will always create 1 bubble with the text Living Room, with a 60 second timeout, with white text and orange background.


    Now whenever you connect to your wifi network you'll get a bubble that turns on your light that goes away after 60 seconds! :cool:

Recent Reviews

  1. RiseUp
    RiseUp
    5/5,
    Version: 2017-08-02
    A very useful and incredible example of an AutoTools Web Screen!