ZooperLog | Category Archives: Android

How to set “call on click” using Automagic

Posted on May 25, 2013 by frenzy

Currently Zooper Widget does not allow you to set “call” actions because it has no “CALL” permission, a workaround suggested by Jeff (thanks!!) is to use Automagic as a workaround, this method might also work with Tasker.

In Automagic

Start a new flow
Edit the Trigger Type (initial box) and set it to Shortcut.
Name it whatever you want.
Tap Save to return to the flow’s overview.
Tap the trigger’s + symbol to add an Action
Tap New.
Tap Call Number.
Type the number, or press the “…” button to invoke your contacts app.
Click Save to return to the flow’s overview.
Make sure the flow is ON (slider at the top-right).
Give your new flow a name (from the device’s menu button).

In Zooper Widget

Add the element (rectangle, BMP, whatever) that you want to initiate the direct dial.
In its properties, click Module OnTap.
Swipe over to the Shortcut list (far right)
Tap AM Shortcut
Select your direct dial flow from the Shortcut Trigger drop down list.
Tap OK.
There’s a Shortcut Icon field on this screen, but you can’t select “none”. It doesn’t appear to override your Zooperwidget image, so ignore it.
On your element’s properties screen, the Module OnTap field will show “unknown”. It’s OK.
Test your widget.

How to show remaining time on any date and to any date

Posted on April 9, 2013 by frenzy

Starting from version 2.16 ZW supports two new fields in the date parsing, the “R” and the “T”, first one will allow to show “remaining” time since the date up to now, the second will show the total amount till now, both support “h” for hours, “m” for minutes and “d” for days. From version 2.22 its also possible to set a fixed date in the future or in the past using #Dyyyymmddhhmm….# and do the calculations for that.

For example if you take the next alarm date #SAD…# you can write #SADRd’days,’ Rh’h’ Rm’m'# to show “2 days, 2h 3m”. But what if i do not want to show the days but i still want to know if date will be past the 24 hours? Well, you can then use “T” which shows total amount, so #SADTh# will show you how many hours till next alarm even if there are more than 24, so if you have an alarm in 3 days it will show 72 hours, same for minutes. This feature applies to all date field, so the old “calendar remaining time” (#C0R…#) and “alarm time left” (#SAL…#) are now obsolete (but still working).

From 2.22 as said you can also use this on fixed dates, so, some examples:

Time to midnight: #D0000Rhh’h ‘Rmm’m'# will render “2h 03m” at 09.57pm
Time to new year #D01010000Rd’ days ‘Rhh’h ‘Rmm’m'# now renders “241 days 12h 07m”

Off course you can also use this in progress bars for example if you want to have, don’t know, a progress bar which shows how much time is left till your birthday or whatever.

Enjoy!

Zooper Progress Bars

Posted on April 4, 2013 by frenzy

Version 2.12 of Zooper Widget introduce the new and awesome progress bar module! As usual every aspect can be customized, bars can be curved, rotated, splitted into parts, colored with gradients or fade based on the value.

Current basic data templates include hours, minutes and temperature, more values and manual editing of fields will be added on next release.

Image shows the ProgressClock 2×2 template available inside the widget.
Happy editing!

ZW Drawing Modes!

Posted on February 9, 2013 by frenzy

Upcoming (2.00) release of Zooper Widget will add “draw modes” into all the modules (except the bitmap ones) to allow even more customization! On top of the default mode (Normal) you will find Clear and XOR, what do they do? Clear will erase every object found in the layer before itself (so keep in mind the order!), XOR instead will invert transparent and colored data as you can see on the screenshot (and in the “PopDate” template included in last version.

As usual please remember that overlapping works correctly only and only if the modules are on the same horizontal anchor (so all left, all center or all right), stacking is not guaranteed on different anchors. Thanks to Oliver for the feature suggestion

Weather Iconset Example

Posted on January 5, 2013 by frenzy

This is a more advanced tutorial after the Battery Example however, if you do not want to understand how iconsets works, but, at the same time, you want to create your own Weather Icons, well, in that case, just download the template at the end of this page, uncompress it, change the images with your own, edit the title/description in the XML file, zip it again, save it in your SD card under “iconsets” and you are done

So, this set has also been copied from source code, what it does is:

Provide weather conditions bitmaps
Use different icons for day and night
Support also 2 days weather as ZW does

How to support 2 days weather?

To support the forecast we used “modes” as for the battery but not in a static way, so our mode configuration is this:

  <!-- We provide current and 2 days weather -->
  <mode value="#WCCODE#">Current Weather</mode>
  <mode value="#W0CODE#">Today's Weather</mode>
  <mode value="#W1CODE#">Tomorrow's Weather</mode>

<mode value="#WCCODE#">Current Weather</mode>

<mode value="#W0CODE#">Today's Weather</mode>

<mode value="#W1CODE#">Tomorrow's Weather</mode>

This means that the value of “#MODE#” in the widget will reflect the choice the user did, so it will be the code for current codition if mode is set to #WCCODE# or, for example, tomorrow weather if mode is #W1CODE#.

How does the code work?

Zooper Widget might support in the future multiple weather providers however we do not want everyone to rewrite their sets every time the provider changes so we choosed a fixed set of codes that will be always there no matter which service is used to get weather data. Current conditions are:

<!-- 
Weather conditions:
 0 = UNKOWN
 1 = STORM
 2 = THUNDERSTORM
 3 = DRIZZLE
 4 = RAIN
 5 = SHOWERS 
 6 = FLURRIES
 7 = RAINANDSNOW
 8 = SNOW
 9 = HAIL
10 = FOG 
11 = HAZE 
12 = WIND
13 = PARTLY_CLOUDY
14 = MOSTLY_CLOUDY
15 = CLEAR 
16 = FAIR
-->

<!--

Weather conditions:

0 = UNKOWN

1 = STORM

2 = THUNDERSTORM

3 = DRIZZLE

4 = RAIN

5 = SHOWERS

6 = FLURRIES

7 = RAINANDSNOW

8 = SNOW

9 = HAIL

10 = FOG

11 = HAZE

12 = WIND

13 = PARTLY_CLOUDY

14 = MOSTLY_CLOUDY

15 = CLEAR

16 = FAIR

-->

If you think something is missing just let me know!

How to distinguish between day and night?

So how can i show day icons during the day and different on the night? Well, we just use sunrise and sunset hours, so it will be always correct! To make things more simple we just use the hours, so for example:

 <!-- Nightly icons block will be skipped entirely if his conditions do not match -->
  <condition>
    <!-- We just check if sunrise hour is greater than current -->
    <test>#ARHH#&gt;#DHH#</test>
    <!-- Or if sunset if minor than current -->
    <test>#ASHH#&lt;#DHH#</test>
    <!-- Storm -->
    <condition>
      <test>#MODE#=1</test>
      <image>weather-storm-night.png</image>
    </condition>
    <!-- More night conditions will be here--->
  </condition>
  <!-- Daily conditions (parser will arrive here if it did not catch anything in night block) -->
  <condition>
    <!-- Storm -->
    <test>#MODE#=1</test>
    <image>weather-storm-day.png</image>
  </condition>
  <!-- more daily conditions will be here .... -->

<image>weather-storm-night.png</image>

</condition>

</condition>

<image>weather-storm-day.png</image>

</condition>

That’s all, everything else should be quite simple.

To download the full working sample please click HERE

Simple ZW Battery Iconset example

Posted on January 5, 2013 by frenzy

This is the most basic example for a PNG based Icon Set representing current battery state. For more info on the Icon Sets please see the Icon Set Page. This example comes out directly from the source code, what we wanted to achieve is:

Provide battery images for both charging and discharging states
Provide a static image representing an alarm

If you want to skip the tutorial and directly download the example file and edit it yourself please scroll to the bottom of this page for the link.

Create the structure

In order to create the iconset we start with an empty folder called “myiconset”, in this folder we create an empty “config.xml” file and another folder called “icons” were we store all the PNG images we are going to use. The images should all have the same size otherwise there will be weird results on screen. You should also avoid using images that are too big.

Create a basic config

Then we start editing the configuration, so we start creating a minimal configuration just with the mandatory fields:

<?xml version="1.0" encoding="utf-8"?>
<!-- 
This is a PNG based iconset showing battery discharging/charging images plus or
a static alarm icon useful to show next alarm.
-->
<config>
  <!-- Title as displayed to the user -->
  <title>ZW Battery Icons</title>
  <!-- Description displayed to the user -->
  <description>Oxygen based battery Iconset with Alarm static Icon mode</description>
  <!-- The demo Icon is mandatory and must exist -->
  <demo>battery_charging_060.png</demo>
  <!--
  This is the path inside the iconset where icons are found, usually "icons"
  is fine, this is a static value and will not be parsed by the text parser and
  it's mandatory
  -->
  <icons>icons</icons>
  <!-- 
  Default icon is mandatory, will be used when parser doesn't know what to 
  render so it will fall back to this image. 
  -->
  <default>battery_discharging_000.png</default>
  <!-- 
  We provide battery level mode or static alarm icon, for the battery level we 
  assign mode to #BLEVN# because in this way the parser with convert #BLEVN# only 
  once before checking the conditions 
  -->
  <mode value="#BLEVN#">Battery Icons</mode>
  <mode value="ALARM">Static Alarm icon</mode>
</config>

<?xml version="1.0" encoding="utf-8"?>

<!--

This is a PNG based iconset showing battery discharging/charging images plus or

a static alarm icon useful to show next alarm.

-->

<title>ZW Battery Icons</title>

<description>Oxygen based battery Iconset with Alarm static Icon mode</description>

<demo>battery_charging_060.png</demo>

<!--

This is the path inside the iconset where icons are found, usually "icons"

is fine, this is a static value and will not be parsed by the text parser and

it's mandatory

-->

<icons>icons</icons>

<!--

Default icon is mandatory, will be used when parser doesn't know what to

render so it will fall back to this image.

-->

<default>battery_discharging_000.png</default>

<!--

We provide battery level mode or static alarm icon, for the battery level we

assign mode to #BLEVN# because in this way the parser with convert #BLEVN# only

once before checking the conditions

-->

<mode value="#BLEVN#">Battery Icons</mode>

<mode value="ALARM">Static Alarm icon</mode>

</config>

The configuration above is already a valid Icon Set however it has no “conditions” so it will always end up displaying the default image (battery_discharging_000.png in this specific case). In order to make it “dynamic” we need to add some more logic to it so we need to create some condition. A condition is the “core” of the sets, it basically represents a test to perform, the test, if true, will return the image to display.

Add conditions

So, let’s add the the end of the file (and before the </config>) the following conditions:

  <!-- First we check for static icons -->
  <condition>
    <!-- Alarm Icon -->
    <test>#MODE#=ALARM</test>
    <image>alarmclock.png</image>
  </condition>
  <!-- Status Unknown, we display fully dischargen battery -->
  <condition>
    <test>#BSTATN#=1</test>
    <image>battery_discharging_000.png</image>
  </condition>
  <!-- Battery Full -->
  <condition>
    <test>#BSTATN#=5</test>
    <image>battery_discharging_100.png</image>
  </condition>

<test>#MODE#=ALARM</test>

<image>alarmclock.png</image>

</condition>

<test>#BSTATN#=1</test>

<image>battery_discharging_000.png</image>

</condition>

<test>#BSTATN#=5</test>

<image>battery_discharging_100.png</image>

</condition>

What we did? We added 3 conditions, the first one will just check the value of #MODE# and see if it equals to “ALARM”, #MODE# is always expanded with the value specified on the “<mode>” configuration we did in the first phase, in this case is a simple string we use to undertsand that we want just to return a static icon, so we add as “<image>” the “alarmclock.png”.

Second and third conditions are a little bit more complex, if #MODE# is not set to “ALARM” it will be set to “#BLEVN#” which will be translated to a number representing the battery level, but battery is not just a “level” is also a “state” that can be, charging, discharging, unknwn or full (please check the Android dev page here for further info on the codes). So first we add 2 conditions for the “unknown” and “full” states returning an image with an empty battery if unknown (we could also return a question mark or something like that) and a full battery if its full.

Cool eh? What if the battery is charging or discharging? Well, for that we need to add some more stuff:

  <!-- Battery Charging? Lets use charging icons -->
  <condition>
    <test>#BSTATN#=2</test>
    <!-- Level > 90% -->
    <condition>
      <test>#MODE#&gt;80</test>
      <image>battery_charging_100.png</image>
    </condition>
    <!-- Level > 80% -->
    <condition>
      <test>#MODE#&gt;60</test>
      <image>battery_charging_080.png</image>
    </condition>
    <!-- Level > 60% -->
    <condition>
      <test>#MODE#&gt;40</test>
      <image>battery_charging_060.png</image>
    </condition>
    <!-- Level > 40% -->
    <condition>
      <test>#MODE#&gt;20</test>
      <image>battery_charging_040.png</image>
    </condition>
    <!-- Level > 20% -->
    <condition>
      <test>#MODE#&gt;10</test>
      <image>battery_charging_020.png</image>
    </condition>
    <!-- Level < 20% -->
    <condition>
      <test>#MODE#&lt;10</test>
      <image>battery_charging_000.png</image>
    </condition>
  </condition>
  <!-- From now on battery must be discharging -->
  <!-- Level > 90% -->
  <condition>
    <test>#MODE#&gt;80</test>
    <image>battery_discharging_100.png</image>
  </condition>
  <!-- Level > 80% -->
  <condition>
    <test>#MODE#&gt;60</test>
    <image>battery_discharging_080.png</image>
  </condition>
  <!-- Level > 60% -->
  <condition>
    <test>#MODE#&gt;40</test>
    <image>battery_discharging_060.png</image>
  </condition>
  <!-- Level > 40% -->
  <condition>
    <test>#MODE#&gt;20</test>
    <image>battery_discharging_040.png</image>
  </condition>
  <!-- Level > 20% -->
  <condition>
    <test>#MODE#&gt;10</test>
    <image>battery_discharging_020.png</image>
  </condition>
  <!-- Level < 20% -->
  <condition>
    <test>#MODE#&lt;10</test>
    <image>battery_discharging_000.png</image>
  </condition>

<test>#BSTATN#=2</test>

<image>battery_charging_100.png</image>

</condition>

<image>battery_charging_080.png</image>

</condition>

<image>battery_charging_060.png</image>

</condition>

<image>battery_charging_040.png</image>

</condition>

<image>battery_charging_020.png</image>

</condition>

<image>battery_charging_000.png</image>

</condition>

<image>battery_discharging_100.png</image>

</condition>

<image>battery_discharging_080.png</image>

</condition>

<image>battery_discharging_060.png</image>

</condition>

<image>battery_discharging_040.png</image>

</condition>

<image>battery_discharging_020.png</image>

</condition>

<image>battery_discharging_000.png</image>

</condition>

Code above first checks “state” again, if its “charging” than we add “nested conditions”, it means that we will add some more “ifs” before returning an image. But what means “#MODE#>80″ ??? That means “#MODE#>80″ in XML terms, this will be translated to “#BLEVN#>80″ and finally to “#90>80#” if battery level is 90. You might be asking, why not using #BLEVN# instead of mode? Well, you could do that, but using #MODE# is more efficient. If you use #MODE# the text parser will check the battery level just once when “#MODE#” is parsed, otherwise it will be called every time a test is evaluated.

So, if you can, always bind #MODE# to a value you will need to parse a lot to avoid the parser being called too many times.

Create the final Icon Set

Now that you created the icon set is time to test it on the device! Let’s zip the contents of the file into a zip and copy it in your phone under the “iconsets” folder. If everything has been done correctly it will show up in the iconsets list.

Download the full example HERE

How to easily migrate templates from Zooper Widget Free to PRO

Posted on December 22, 2012 by frenzy

I get many requests asking how to import widgets created with Free into the PRO version so i will explain a little better how it works and, yes, i am working on a better solution in the meanwhile.

So, the free version stores a template called “FreeAutoSave” every time you exit the configuration, you cannot see it in Free because that version is not able to load templates from SD but once you move to the PRO you will find it, so, if you are upgrading and you have only one widget on screen then you are done.

What if you have more? Then you need to follow this procedure:

Click on the Free widget you want to import, enter config and exit
Add a widget same size with pro, load the “FreeAutoSave” template
Remove the Free widget you have just imported on screen
Optionally, just to be sure, save current template using PRO
Apply same procedure for all Free widgets on screen

Once this process is over you can safely uninstall the Free version. Future versions will have a better approach, when it will be out i will update this article.

Stay tuned!!!

How to display Galaxy SIII SD card info on ZW

Posted on December 13, 2012 by frenzy

Starting from ICS Android phones are not required to have a real SD card anymore, this is why the Nexus “/sdcard” is just emulated and points to the “/data” partition where all your apps resides. The Galaxy SIII instead has a real SD however Samsung decided to use a third (non standard) mountpoint for it keeping a virtual “/sdcard” as the Nexus phones.

So how to monitor the SD card on SIII if ZW will not distinguish between internal and external storage? Well, just manually put the path in the system info pattern this way:

#SF/mnt/extSdCard/# -> Will show sdcard free space

#ST/mnt/extSdCard/# -> Will show sdcard total space

#SF/mnt/extSdCard/M# -> Will show sdcard free space in megabytes

#ST/mnt/extSdCard/M# -> Will show sdcard total space in megabytes

This trick off-course does not work just with the SIII SD card you can use it with any path, so you can also monitor your /cache or /system filesystems if you want to!

Enjoy!

ZW examples, November rain

Posted on November 24, 2012 by frenzy

So here comes the rainy season, at least for me, so I’m posting a modified template of the great “Dave Clock” sent me some time ago by one very creative user (and available on the base templates of the widget). Basically i have removed the vertical Rect module and added AM/PM time and battery status with two more boxes. The clock text is aligned “right” so it will always and at the some point looking more nice, the battery instead is aligned “left”, same applies to the day and month name Series. Launcher is Apex with margins set to “zero” in order to avoid borders, however if you have borders just remove the backgrounds Rects, it will look fine anyway

This is a 4×4 widget so basically its kind of useless, i know, but it might be a nice starting point for tablet users.

Wallpaper: http://wallbase.cc/wallpaper/2428411

Template: http://zooper.org/android/zw/extratemplates/HugeDaveDate.zw (upload it on sdcard under “ZooperWidget” folder, pro only)

Zooper Widget Margins

Posted on November 1, 2012 by frenzy

Sadly Google decided that, starting from API 14, widgets must have margins, so, if you create an app targeting Ice Cream Sandwitch or later the widget will have some margin no matter what you try to do. Problem is that a lot of people likes to have the widget “edge to edge” and this is absolutely not possible on API 14. To fix this i backported ZW to API 13 and released it to the market again, this new version has no margin just because it must be compatible with Honeycomb as well.

This will screw up some layout, i know, and i apologize for this, but this was requested by too many people and i had to do it.