I just published version 1.1 of my “Color Styler app for Zooper Widgets” tool used for styling my “Elegance”…
Posted by: pierrot | on February 17, 2014
Thanks a million to Taavo Allik for pointing me to the scaling issues and excessive testing the APK on his device (I don’t own a FullHD device — yet).
Originally shared by Lutz Linke
Getting-Started-Guide for my “Color Styler for Zooper Widgets” app
This guide should help you getting started with the Color Styler app.
Color Styler is an application created with Tasker (scenes and tasks) and exported as APK for distribution. It can be used without Tasker, no need to install it.
Download Color Styler from Google Play Store:
https://play.google.com/store/apps/details?id=de.echtzeitig.zwcolorstyler
What Color Styler basically does is publishing color settings as Tasker variables (list below) that can be used within Zooper Widget items to apply color styles without the need to modify the widgets.
To get you started, I recommend you download my “Elegance” template and examine i.e. the “Clock” or “Dock” widget (which are quite simple ones).
Or just create a new empty Zooper widget and do the following:
1) change background to #00000000 (fully transparent)
2) add a rectangle and scale it to full widget size as background
– set the rectangle to whatever color you wish as default
– scroll down to “Advanced Parameters”
– enter “$#TCP_USESTYLE#=1?[c]#TCP_BGCOL#[/c]$”
– this means: if the style is enabled, use the published background color; otherwise the default color is used
3) add a text item, choose Text Content >> Time >> 24h clock
– set font, size and position
– scroll down to “Advanced Parameters”
– enter “$#TCP_USESTYLE#=1?[c]#TCP_ACCCOL#[/c]$”
– this means: if the style is enabled, use the published accent color; otherwise the default color is used
– note: if “use accent” is not check in Color Styler, the ACCCOL-variable contains the same color as FGCOL
4) add another text item, choose Text Content >> Date >> Full Date
– set font, size and position
– scroll down to “Advanced Parameters”
– enter “$#TCP_USESTYLE#=1?[c]#TCP_FGCOL#[/c]$”
– this means: if the style is enabled, use the published text color; otherwise the default color is used
Congratulations, you just created your first Zooper Widgets stylable with Color Styler!
Now launch Color Styler and play around with it. Change colors, choose presets etc. Don’t forget to enable the style (it’s not enabled by default) and hit the “apply” button to apply the style without leaving the Color Styler.
Here’s now a list of variables published by Color Styler:
– TCP_USESTYLE : 0=no styling, 1=styling enabled
– TCP_BGCOL : background color hex value
– TCP_FGCOL : foreground color hex value
– TCP_USEACCENT : 0=don’t use accent color, 1=use accent color
– TCP_ACCCOL : accent color hex value (only if TCP_USEACCENT=1, else same as TCP_FGCOL)
– TCP_ICONCOL : background color hex value
– TCP_SHOWICON : 0=do not show icon, 1=show icon
– TCP_BORDER1COL: border 1 color hex value
– TCP_BORDER1MARGIN: margin to use for border 1
– TCP_BORDER1SIZE: with to use for border 1
– TCP_BORDER2COL: border 2 color hex value
– TCP_BORDER2MARGIN: margin to use for border 2
– TCP_BORDER2SIZE: with to use for border 2
Those were created for my “Elegance” template / widgets, but can be used in your own creations how ever you like.
Remark: if you wonder how I styled the icons in my widgets in the background, they are Text items which use the Android Developer Icons font by SpiderFly:
http://www.spiderflyapps.com/downloads/android-developer-icons-the-font/
Feel free to comment or directly contact me by mail or HandOut if you need help. I will try to answer as fast as possible.
Here are some more resource links:
Watch the demonstration video at YouTube:
I recommend you download my “Elegance” template for Lightning Launcher and Zooper widgets from Google Play Store. You do not need to use Lightning Launcher, the widgets can basically be used with any launcher.
https://play.google.com/store/apps/details?id=de.echtzeitig.lltemplate.elegance
]]>Posted in | 7 Comments »
Tags: Lutz Linke
< ![CDATA[
+1 for the editable saved styles. But thats an engineer-to-engineer remark.
I think it is a non-techy app. So you might consider making the presets-screen the first screen.
]]>
< ![CDATA[
Jappie Toutenhoofd What do you mean? Exported styles are text files, thus editable. Or do you think opening them in a text editor. Android has no such thing as Notepad.exe 😉 But might think of copy/paste from/to clipboard…
]]>
< ![CDATA[
But first I have to fulfill a request to shrink the Styler for 540×960. Just as I pleased the FullHD-ers… Tasker does not scale for different devices as it seems.
]]>
< ![CDATA[
‘EStrongs open as text’ does the job 😉
]]>
< ![CDATA[
Jappie Toutenhoofd I think I’d better go with clipboard. This also would allow some kind of “sharing” with others.
I’m thinking of a small dialog that has a text input field which shows the current settings (same string as would be stored to style-file).
You could:
(a) edit without external editor
(b) copy to clipboard (maybe with button to easier do so)
(b) paste from clipboard (maybe with button to easier do so)
Sounds okay?
]]>
< ![CDATA[
Lutz Linke Quick question: I’m looking through this (because its brilliant) and using it with the Executive Template you created. What is the reasoning for duplicate texts and icons in all the Zooper widgets? Every widget I’ve looked at in the Template has a transparent duplicate for all icons and texts.
]]>
< ![CDATA[
Brian King This is taken over from “Elegance”.
In that set I wanted to have black widgets with bold texts through which the (live) wallpaper shines through. But I wanted not just “cut out”, I wanted to use semitransparent text color.
So first later cuts out (CLEAR) the texts in background, second overlays the gaps with the real semitransparent text.
Current ZW beta added drawing mode SRC which replaces method, reducing the amount of layers necessary. But it’s still beta.
]]>