This is it guys, over the last few weeks we have built a custom control panel widget using Zooper Widget and Tasker, today we add the final touch and learn about Zooper Widget Advanced parameters.
The final touch to our control panel is to manipulate an image in Zooper Widget so that it only appears when you have headphones plugged into your device. This task requires the Tasker code with ZW Variables created last week, head back there to check it all out, if needed, before you continue here today. Head back to our de facto ultimate Zooper Widget design guide for a reminder on how to input an image into your Zooper Widget design. Once you have an image in place, to be used as our ‘headphones in’ icon, you are ready to proceed.
If you had followed along the instructions from the last two weeks, this is going to be fairly simple. Just make sure you have a Bitmap image setup in your Zooper Widget that will act as your notification icon.
Head into the Layout section of your Zooper Widget and tap in to edit your Bitmap image element.
Select Advanced Parameters at the very bottom.
We have options once again, you may use the dropdown selections to build your advanced parameters, or simply type them out. Also, we must choose the best method to hide our Bitmap image element. We could change the X and/or Y Offset values to move the Bitmap way off the screen or we could change the opacity (alpha) value to make it completely transparent. My personal preference is to change the scaling percentage (size) of the Bitmap element to 0, this way I know where it is and it is practically impossible to hit should I decide to give it its own Tap action.
Please note that the folks behind Zooper Widget recommend changing the X or Y Offsets, as moving the element takes less processing time than re-drawing it, as needs to happen when the transparency or size changes.For our application of indicating headphone status, I can accept the fraction of a second delay, if you find the delay unreasonable, try changing the X Offset to 10,000 to make the image ‘disappear.’
My Advanced Parameters string looks like this: $#TZHEADPHONESTATE#=Headphones in?[s]70[/s]:[s]0[/s]$
Let us break that down: The opening and closing “$” indicate that this is what we call an ‘IF’ statement. So, IF the value of our ZW Variable in Tasker, which I called “ZHEADPHONESTATE,” equals the text “Headphones in” ? Then assign our Bitmap to scale 70 : else, assign the bitmap to scale 0. (You will have to play with the scale size for your own design to make the icon fit your control panel.)
Tap OK in the top right of the screen to save changes.
Tap the system back button to return to the Homescreen.
You’ve done it. Like I said, with the previous work in place, Advanced Parameters are pretty easy to implement. Don’t get me wrong, they can be extremely complicated in terms of what you make them do, but the procedure is pretty simple.
Did you get how the Advanced Parameters worked? As another example, skipping the Tasker integration, you could try having the icon pop up when the battery level goes below 20%. The Advanced Parameters string would look like: $#BLEV#<20?[s]100[/s]:[s]0[/s]$
Note that you can use most typical mathematical operators, such as < > = >= or <=. Also, use != for ‘not equal’.
Always keep in mind the format of the IF statement and you’ll never go wrong. In plain english, “IF comparison is true, do this, else do that.” In pseudo code – $Comparison?Do this if True:do that if False$ So, if #BLEV# (battery level) is less than 20, change Bitmap to full size, [s]100[/s], but if battery level is not less than 20, change the Bitmap to size 0, [s]0[/s], since we want the image to only show up when the battery is low.
I urge you to go ahead and try out the Advanced Parameters for a bunch of other stuff. Try popping up a notification icon when there is an Alarm set, your battery is overheating, your internal storage is getting low, your WiFi speed is unreasonably slow, you have a calendar event within the next hour, a SMS or email has arrived, you missed a call, it’s your mother’s birthday and many, many more.
Taking it to the next level, you would use the Advanced Parameters to rotate a Rect element in order to simulate the hands of an analogue clock. You could even lump a bunch together to change the main image in a widget based on the weather, time of day and your Lat and Long. The sky is the limit, I do hope that you enjoy designing your own widgets.
It took a few weeks, but we have finally worked our way through what was little more than an introduction to Zooper Widget. We’d be happy to see your efforts, hear your outcome stories and more, go ahead and share in the comments below. With the tools in these tutorials, you’ll be able to push forward to build any design with Zooper Widget, and load it with function by linking it to Tasker. If you have any specific request, submit those too, we can hopefully run a tutorial for it one day as well.
We briefly stepped into the world of Tasker during the process of building this custom control panel widget, I encourage you to join me next week when we will be going a little deeper into Tasker. As mentioned, we have already covered some of the basics, so we’ll work from there and get right into building our own tools. Buckle in, Zooper Widget is great for design, but Tasker rocks system functionality like no other.