Because there are so many questions from people who become interested in modifying the Watch Styler clocks, I decided to write some kind of tutorial which might help to understand the theme.json script.
I hope this satisfies your hunger for knowledge.
Remarks and additions are welcome.
I'll be glad to add new knowledge to this humble explanation.
If anyone of the native english speaking people likes to rewrite (parts of) my foreigner english... Please do not doubt!
I'll be glad to correct any grammatical or whatever english error.
BE AWARE!!
This tutorial was written for Watch Styler and Galaxy Gear with Android (Gear 1 if you like).
Watch Styler on Tizen is limited in its functionality.
There is a difference in line-out of digital items and analog hands can only be centered.
LATEST ADDITIONS AND CORRECTIONS:
Febr. 24, 2014
- Corrected color calculation
- Additional info about language selection
* Extra Info, Tips and Tricks in the second post of this thread.
Prior knowledge:
For the locations and dimensions, Watch Styler devides the screen into a matrix of 10x10 cells.
Each cell measures 29x29 pixels and the entire matrix is surrounded by a border of 15 pixels on top, bottom, left and right.
This is not realy a border because virtualy the matrix goes on outside the edges of the screen.
I call it border because in the visible area the outer cells only shows 15 of 29 pixels.
Cell position -1,-1 = Pixel position -14,-14
Cell position 0,0 = Pixel position 15,15
Cell position 1,1 = Pixel position 44,44 (15 + 29)
Cell position 2,2 = Pixel position 73,73 (15 + 29 + 29)
|
Cell position 9,9 = Pixel position 276,276 (15 + 9 x 29)
Cell position 10,10 = Pixel position 305,305 (15 + 10 x 29)
14 pixels of the cells in row/column 10 are outside the visible area, just like 14 pixels of the cells in row/column -1.
Schematic representation of the top-left related coordinates
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
(Click picture to enlarge)
This coordinate system is used for most items.
Only a few image-items are positioned according to a center oriented matrix where coordinate 0,0 equals coordinate 5,5 in the top-left oriented system.
Schematic representation of the center related coordinates
(Click picture to enlarge)
A theme consists of two groups of items: clockImages and clockTexts.
Each item consists of one or more parts.
GRAPHIC ITEMS
clockImages is where the graphic items of a theme are defined.
These image-items can be BG_ITEM, FRAME_ITEM, HANDS_ITEM, BATTERY_ITEM and BLUETOOTH_ITEM.
Each ITEM is a layer that can contain one or more PARTs.
Besides the image-parts, an image-item has a few parameters to define its properties.
Every image-item starts with the parameters clockItem and clockImagePartTypes to initialize the item before it comes to clockImageParts.
clockImageParts is used in each image-item to define the PARTs that show the images.
BG_ITEM is the background image for the theme.
It is projected behind all other items.
It contains BG_PART, which defines the image that must be loaded from the theme's images folder.
FRAME_ITEM contains the dail for the theme.
It is projected over BG_ITEM and under HANDS_ITEM
It contains FRAME_PART, which defines the image that must be loaded.
FRAME_PART can be omitted when BG_PART contains an image of the dial, or when no dial is needed.
HANDS_ITEM contains the hands for hours, minutes and seconds of an analog clock.
It is projected over all other items.
It contains HOUR_PART, MIN_PART and SEC_PART which define the images that must be loaded.
BATTERY_ITEM contains six images to indicate different levels of battery charge.
It is projected over FRAME_ITEM and under HANDS_ITEM.
It contains BATTERY0_PART, BATTERY1_PART, BATTERY2_PART, BATTERY3_PART, BATTERY4_PART and BATTERY5_PART which define the images that must be loaded.
BATTERY0_PART level: 0- 19%
BATTERY1_PART level: 20- 39%
BATTERY2_PART level: 40- 59%
BATTERY3_PART level: 60- 79%
BATTERY4_PART level: 80- 99%
BATTERY5_PART level: 100%
BLUETOOTH_ITEM contains two images to indicate the bluetooth connection status.
It is projected over FRAME_ITEM and under HANDS_ITEM.
It contains BLUETOOTH_CONNECT_PART and BLUETOOTH_DISCONNECT_PART which define the images that must be loaded.
When all image-parts are defined, there are some image-item parameters left.
The parameters to define an image ITEM are:
Code:
"alpha": 0...100 Transparancy percentage of the ITEM. 0 = No transparancy, 100 = Invisible
"color": -16777215...0 Value = -16777216 + (Red * 65536) + (Green * 256) + Blue. Red/Green/Blue = 0...255
"layerH":1...16 Height of the ITEM in cells. (*)
"layerW":1...16 Width of the ITEM in cells. (*)
"layerX":-16...16 Horizontal position of the ITEM in cells. (*)
"layerY":-16...16 Vertical position of the ITEM in cells. (*)
"themeTitle":"Title" Internal titel for the theme
"dataSampleNum":? Function unknown
"baseTheme":? Function unknown
(*) More values are accepted, but pointless
layerX and layerY define the position of an image-ITEM. layerH and layerW define the size of an image-ITEM.
BATTERY_ITEM and BLUETOOTH_ITEM are placed with their top-left corner related to cell position 0,0
When color for an image-item is set to pure white (-1), the images will be show in their original colors.
Other colors will mix with the image colors.
When you create black and white or greyscale images, the color setting can be used to define the color for dial and hands.
Schematic representation where (blue area) BATTERY_ITEM or BLUETOOTH_ITEM use parameters;
"alpha":0,"color":5160703,"layerH":4,"layerW":5,"layerX":2,"layerY":1
(Click picture to enlarge)
BG_ITEM, FRAME_ITEM and HANDS_ITEM however, are the only items that are positioned with their center related to cell position 5,5 (screen/matrix center)
Negative values can be used to move a center-related ITEM to the left or top of the screen.
Schematic representation where (blue area) BG_ITEM, FRAME_ITEM or HANDS_ITEM use parameters;
"alpha":20,"color":5160703,"layerH":4,"layerW":5,"layerX":2,"layerY":1
(Click picture to enlarge)
Notice the different location with the same x,y parameters.
An image PART is defined with the parameters:
Code:
"clockImagePartType": "IMAGE_PART" IMAGE_PART.png is loading for the part.
"h":1...16 Height of the part in cells
"w":1...16 Width of the part in cells
"x":-16...16 Horizontal cell position of the part in relation to ITEM-layerX
"y":-16...16 Vertical cell position of the part in relation to ITEM-layerY
** Remark **
Although all the image PARTs have parameters w h x and y, they do not seem to affect the PART's size or position.
TEXT ITEMS
clockTexts is where alpha-numeric items for the theme are defined.
These text-items can be DIGITAL_ITEM, DATE_ITEM or WORLD_CLOCK_ITEM.
Each ITEM is a layer that can contain one or more PARTs.
Besides the text-parts, an text-item has a few parameters that define the item-properties.
Each text-item can contain one or more text-parts and is projected over BG_ITEM and under HANDS_ITEM.
DIGITAL_ITEM is assigned to display the local time.
DATE_ITEM is assigned to display the local date.
WORLD_TIME_ITEM is assigned to display any time zone.
Every text-item starts with the parameter;
"bgName":"<picture file>".
This can be used to define a background image for the text-item.
The <picture file> should be stored in the theme/texts folder.
image.png and image.gif tested positive, but other extensions may work too.
Animated GIF was tested but only a static first frame was shown.
** Remark **
When a background image is used for the text-item, only the last PART in that item will be displayed!
Then there's a parameter that's fully functional for WORLD_CLOCK_ITEM only.
"timeZoneId":"Area/City" is used to define the time zone that should be used.
The local time zone will be used when "Area/City" = "".
For DIGITAL_ITEM and DATE_ITEM it will affect CITY_PART only.
For WORLD_CLOCK_ITEM it will affect time and date PARTs too.
A full list of compatible time zone values can be found at:
https://support.sumologic.com/entries/23097313-JSON-timeZone-Values-and-Associated-GMT-Offsets
Next text-item parameter is "clockItem":"<Item name>" to initialize the text-item.
Then comes "clockTextParts", which contains the actual text-parts for the item.
It can contain:
Code:
YEAR_PART assigned to display the year.
MONTH_PART assigned to display the month.
DAY_PART assigned to display the day.
HOUR_PART assigned to display the hours.
MIN_PART assigned to display the minutes.
SEC_PART assigned to display the seconds.
AMPM_PRAT assigned to display the halfday (AM/PM).
CITY_PART assigned to display a city name.
AMPM_PRAT seems to be an error (compared to AMPM_PART), but this is how it's used in the clock scripts.
All these assignments seem to be obvious, but each part can be used to display much more.
Each text PART is defined with these parameters;
Code:
"clockTextPartType":"<part type>" Initializing PART
"textAlign":"<position>" Horizontal text alignment in relation to the part area.
"textVerticalAlign":"<position>" Vertical text alignment in relation to the part area.
"textFormat":"<string>" <string> contains a number of letters to define display information.
"maxWidth":0...320
"fontSize":1 and up defines the size of the text.
"h":1...16 Height of the part in cells
"w":1...16 Width of the part in cells
"x":-16...16 Horizontal cell position of the part in relation to ITEM-layerX
"y":-16...16 Vertical cell position of the part in relation to ITEM-layerY
textAlign defines the horizontal position of a text in te area that is defined by h and w.
"textAlign":"LEFT" Places the text against the left edge of the area
"textAlign":"RIGHT" Places the text against the right edge of the area
"textAlign":"CENTER" Places the text centered in the area
textVerticalAlign defines the vertical position of a text in te area that is defined by h and w.
"textVerticalAlign":"TOP" Places the text against the top edge of the area.
"textVerticalAlign":"BOTTOM" Places the text against the bottom edge of the area.
"textVerticalAlign":"CENTER" Places the text centered in the area
"textFormat":"<string>"
<string> represents one or more letters to define the information to be displayed.
Code:
H or h: Hours in 24-hour and 12-hour mode. HH or hh will add a leading zero when the number of hours is below 10.
m: Minutes. mm will add a leading zero when the number of minutes is below 10.
s: Seconds. ss will add a leading zero when the number of seconds is below 10.
y: Year. yy will show two numbers.
yyyy will show four numbers.
M: Month. MM will add a leading zero when the month is below 10.
MMM will show the abreviated name.
MMMM will show the full name.
d: Date. dd will add a leading zero when the date is below 10.
Example: "textFormat":"dd-MM-yyyy hh:mm.ss"
This will show December 8, 2013, 12 hour 07 minutes and 18 seconds AM like; 08-12-2013 12:07.18
Example: "textFormat":"dd-MMM-yyyy HH:mm.ss"
This will show December 8, 2013, 12 hour 07 minutes and 18 seconds AM like; 08-DEC-2013 00:07.18
A full list of letters that are used to define the text-display can be found at Additional Information.
textFormat works a little different for CITY_PART. When set to textformat:"" it will show the city that matches the item's timeZoneId.
When not set to "" it will show the text as it is, without decoding letters to time/date info.
"maxWidth" Truncates text after the specified number of pixels. Only CITY_PART seems to be affected by this parameter.
"fontSize" is used to define the size of the text.
"h" and "w" are used to define the size for a text-part.
"x" and "y" are used to define the location for a text-part in relation to the text-item location.
** Remark **
The absolute position for a text-PART = (ITEM-layerX + PART-x, ITEM-layerY + PART-y)
When all text-parts are defined, there are some text-item parameters left.
The parameters that define an text ITEM are:
Code:
"fontName":"<font.ttf>" The file font.ttf must be stored in the theme/texts/fonts folder
"localeLanguage":"<lang>" Language code.
"layerH":1...16 Height of the ITEM in cells. (*)
"layerW":1...16 Width of the ITEM in cells. (*)
"layerX":-16...16 Horizontal position of the ITEM in cells. (*)
"layerY":-16...16 Vertical position of the ITEM in cells. (*)
"textAlpha":0...100 Transparancy percentage of the ITEM. 0 = No transparancy, 100 = Invisible
"textColor":0 Value = (Red * 65536) + (Green * 256) + Blue. Red/Green/Blue = 0...255
"bold":false/true Normal font = false. Bold font = true.
"themeTitle":"Title" Internal titel for the theme
"dataSampleNum":number Function unknown
"baseTheme":false/true Function unknown
(*) More values are accepted, but pointless.
localLanguage is used to select a language for the written month and day display.
Default for Watch Styler themes is "en", which represents English.
For German it's "de", for Dutch "nl", for Italian "it".
Not specifying a language, like in "localeLanguage":"", will automaticly select the Gear/Phone language
It seems like the language codes follow the ISO 639-1 standard.
More about this standard (and more language codes!): http://en.wikipedia.org/wiki/ISO_639-1
A full ISO 639-1 language code list: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Please note that a lot but not all fonts are compatible with special characters (like é, ö, ã etc.) used in some languages.
Schematic representation of a (blue) text-item and (orange) text-parts using parameters;
PART 1:
"textVerticalAlign":"CENTER","textFormat":"HH:mm","textAlign":"LEFT","maxWidth":0,"h":2,"fontSize":40,"w":4,"x":1,"y":0
PART 2:
"textVerticalAlign":"TOP","textFormat":"dd MMM","textAlign":"RIGHT","maxWidth":0,"h":2,"fontSize":30,"w":4,"x":1,"y":3
PART 3:
"textVerticalAlign":"BOTTOM","textFormat":"yyyy","textAlign":"CENTER","maxWidth":0,"h":2,"fontSize":35,"w":4,"x":1,"y":6
FINAL ITEM PROPERTIES:
"fontName":"coving_regular.ttf","localeLanguage":"en","layerW":6,"layerX":2,"layerY":1,"layerH":8,"textAlpha":0,"textColor":0,"bold":false,"themeTitle":"test","dataSampleNum":3,"baseTheme":false
(Click picture to enlarge)
Finally, at the end the script is closed with some general theme parameters;
"themeType":ANALOG or DIGITAL Sets the clock type.
"themeTitle":"Title" Internal titel for the theme
"dataSampleNum":number Function unknown
"baseTheme":false/true Function unknown
"themeType" can be either ANALOG or DIGITAL, which determines the structure that can be used.
ANALOG offers an analog clock with hands and one digital item that can be used for any type of local date or time info.
DIGITAL offers three digital items. Two can be used for any type of local date or time info, one can be used for world wide date or time info.
BASIC THEME STRUCTURE:
themeType ANALOG:
Code:
clockImages{
{Background Item
{Background Part}
}
{Dial Item (called FRAME_ITEM)
{Dial Part}
}
{Hands Item
{Hour Part}
{Minute Part}
{Seconds Part}
}
{Battery Indicator Item
{Battery Part 0}
{Battery Part 1}
{Battery Part 2}
{Battery Part 3}
{Battery Part 4}
{Battery Part 5}
}
{Bluetooth Item
{Connected Part}
{Disconnected Part}
}
}
clockTexts{
{Date Item
{Year part}
{Month part}
{Day part}
{Hours part}
{Minutes part}
{Seconds part}
{AMPM part}
}
}
themeType DIGITAL:
Code:
clockImages{
{Background Item
{Background Part}
}
{Battery Indicator Item
{Battery Part 0}
{Battery Part 1}
{Battery Part 2}
{Battery Part 3}
{Battery Part 4}
{Battery Part 5}
}
{Bluetooth Item
{Connected Part}
{Disconnected Part}
}
}
clockTexts{
{Digital Item
{Year part}
{Month part}
{Day part}
{Hours part}
{Minutes part}
{Seconds part}
{AMPM part}
{City part}
}
{Date Item
{Year part}
{Month part}
{Day part}
{Hours part}
{Minutes part}
{Seconds part}
{AMPM part}
{City part}
}
{World Clock Item
{Year part}
{Month part}
{Day part}
{Hours part}
{Minutes part}
{Seconds part}
{AMPM part}
{City part}
}
}
ADDITIONAL INFORMATION.
Time and Date format strings:
Applies to: "textFormat":"<string>"
Items: DIGITAL_ITEM, DATE_ITEM and WORLD_CLOCK_ITEM
Parts: HOUR_PART, MIN_PART, SEC_PART, YEAR_PART, MONTH_PART, DAY_PART, AMPM_PRAT
A / a:
Halfday (AM or PM)
B / b: Not used
C: Not used
c, cc or ccc:
Day of the week, written. Abbreviated.
cccc:
Day of the week, written. Full.
D, DD or DDD:
Day number in a year. 1 to 366. DD adds a leading 0 to day numbers below 10. DDD adds leading 0's to day numbers below 10 and below 100.
d or dd:
Date. dd adds a leading 0 for dates below 10.
E, EE or EEE:
Day of the week, written. Abbreviated.
EEEE:
Day of the week, written. Full.
e: Not used
F: ? (30-12-2013: 5)
f: Not used
G: Era (Output = AD)
g: Not used
H:
Hours. 0...23. HH adds a leading 0 for hours below 10.
h:
Hours. 1...12. hh adds a leading 0 for hours below 10.
I / i: Not used
J / j: Not used
K: Hours: 0...11. KK adds a leading 0 for hours below 10.
k: Hours: 1...24. kk adds a leading 0 for hours below 10.
L: Month (?)
l: Not used
M:
Month in numbers. MM adds a leading 0 for months below 10.
MMM:
Month written. Abbreviated.
MMMM:
Month written. Full.
m:
Minutes. mm adds a leading 0 for minutes below 10.
N / n: Not used
O / o: Not used
P / p: Not used
Q / q: Not used
R / r: Not used
S:
milliseconds
s:
Seconds. ss adds a leading 0 for seconds below 10.
T / t: Not used
U / u: Not used
V / v: Not used
W: (upper case)
Week in a month, 1...5, sunday-saturday (?)
w: (lower case)
Week in a year. 1...53
Note that the week number is calculated with first week of the year which is 1.
The first week of the year is the first week which contains a Thursday.
Thus, the first week of the year 1994 is not the week containing the 1st of January but rather the week 03/01-09/01/1994.
Year 2004 is an example of a year that has 53 ISO8601 weeks since it contains both the week containing 1st of January and the week containing 31st of December.
X / x: Not used
Y: Not used
y or yyyy:
Year. 4 numbers.
yy:
Year. Last 2 numbers
Z:
Time zone offset
z:
Time zone written. Abbreviated.
zzzz:
Time zone written. Full.
'Text':
Text
Info, Tips and Tricks
Donations
You like to donate?
I have no problem to pay my rent or to get something decent to eat every day.
Homeless people in your town will be happy to collect my donations.
If your town is lucky and noone is homeless, please donate at the nearest animal shelter.
Watch Styler themes location at your phone
Code:
Phone\Android\data\com.omnitel.appcessory.gear.watchstyler.manager\theme
Theme folder contents
File: PRV_IMG.png
File: theme.json
Folder: images. Contains one or more PNG image files
Folder: texts. Sometimes contains one or more images. Often contains fonts folder (which may be empty).
Make theme.json easier to read
Very often you may start by editing a theme that was saved by Watch Styler editor.
First thing you will see when you open theme.json, is one big text-block without any spaces or line-breaks.
What I always do first is replacing all "{" by "Enter { Enter", and replacing all "}" by "Enter } Enter".
Example in windows Notepad:
Type Enter { Enter and copy the three lines. Remove the lines you just typed and copied!
Set your cursor at the beginning of the script and press Ctrl-F (Find), type { Enter Esc Ctrl-V
You now replaced the first "{" by "Enter { Enter".
Now press F3 (Find next) and Ctrl-V until you reach the end of the script.
Do the same with }
When you've done this, you will be able to identify various script items and parts with their parameters much easier.
To make it even more clear, you can add leading tabs in front of every line to identify each item/part much easier.
Whenever a line starts with {, add one Tab more in front of the next lines.
When a line starts with }, reduce the number of Tabs leading that line and the next lines with one.
Adding spaces, Tabs or Line-breaks to a script, has no affect on the functionality as long as it is not in the middle of a word..
Here's an example:
Follow the steps above and go from something like this:
Code:
{"clockImages":{"FRAME_ITEM":{"clockItem":"FRAME_ITEM","clockImagePartTypes":["FRAME_PART"],"clockImageParts":{"FRAME_PART":{"clockImagePartType":"FRAME_PART","h":0,"w":0,"x":0,"y":0}},"alpha":0,"color":-16735512,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":0,"baseTheme":false},"HANDS_ITEM":{"clockItem":"HANDS_ITEM","clockImagePartTypes":["HOUR_PART","MIN_PART","SEC_PART"],"clockImageParts":{"SEC_PART":{"clockImagePartType":"SEC_PART","h":0,"w":0,"x":0,"y":0},"MIN_PART":{"clockImagePartType":"MIN_PART","h":0,"w":0,"x":0,"y":0},"HOUR_PART":{"clockImagePartType":"HOUR_PART","h":0,"w":0,"x":0,"y":0}},"alpha":50,"color":-1,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":0,"baseTheme":false},"BG_ITEM":{"clockItem":"BG_ITEM","clockImagePartTypes":["BG_PART"],"clockImageParts":{"BG_PART":{"clockImagePartType":"BG_PART","h":0,"w":0,"x":0,"y":0}},"alpha":0,"color":0,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":-1,"baseTheme":false}},"clockTexts":{},"themeType":"ANALOG","themeTitle":"MessToOrder","dataSampleNum":-1,"baseTheme":false}
to something like this:
Code:
{
"clockImages":
{
"FRAME_ITEM":
{
"clockItem":"FRAME_ITEM","clockImagePartTypes":["FRAME_PART"],"clockImageParts":
{
"FRAME_PART":
{
"clockImagePartType":"FRAME_PART","h":0,"w":0,"x":0,"y":0
}
}
,"alpha":0,"color":-16735512,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":0,"baseTheme":false
}
,"HANDS_ITEM":
{
"clockItem":"HANDS_ITEM","clockImagePartTypes":["HOUR_PART","MIN_PART","SEC_PART"],"clockImageParts":
{
"SEC_PART":
{
"clockImagePartType":"SEC_PART","h":0,"w":0,"x":0,"y":0
}
,"MIN_PART":
{
"clockImagePartType":"MIN_PART","h":0,"w":0,"x":0,"y":0
}
,"HOUR_PART":
{
"clockImagePartType":"HOUR_PART","h":0,"w":0,"x":0,"y":0
}
}
,"alpha":50,"color":-1,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":0,"baseTheme":false
}
,"BG_ITEM":
{
"clockItem":"BG_ITEM","clockImagePartTypes":["BG_PART"],"clockImageParts":
{
"BG_PART":
{
"clockImagePartType":"BG_PART","h":0,"w":0,"x":0,"y":0
}
}
,"alpha":0,"color":0,"layerH":10,"layerW":10,"layerX":0,"layerY":0,"themeTitle":"MessToOrder","dataSampleNum":-1,"baseTheme":false
}
}
,"clockTexts":
{
}
,"themeType":"ANALOG","themeTitle":"MessToOrder","dataSampleNum":-1,"baseTheme":false
}
Watch Styler editor compatibilaty
After changing the theme.json file, There is a very big chance that the theme will not be compatible with Watch Styler editor anymore .
It doesn't harm to open the theme in the editor for testing. Just don't save the theme when it looks bad in the editor.
Some reasons why a theme gets incompatible with the editor:
- You applied a new font that is not available to Watch Styler editor.
- You used time/date formatting that's unknown to the editor.
- You used non-standard Item-Part structures.
Being not compatible to the editor doesn't mean the theme is wrong.
It's just not editable in a user-friendly way anymore. Only by direct script editing.
To upload a modified theme to your Gear, you'll still use the Watch Styler clock preset in Gear Manager.
- Gear Manager / Clocks / Gear wheel behind Watch Styler preset / Select modified theme
Reserved 2
Reserved 3
Wow big tutorial thanks man for taking your time on this!! Hoping to see more custom watches!
Sent from my SM-N900T using Tapatalk
Thanks for all the info... really appreciate it....
Sent from my SM-N9005 using xda app-developers app
Sweet! So excited to study this.
Sent from my SPH-L900 using XDA Premium 4 mobile app
Great tutorial !
One thing about the date format. Watch Styler on the phone don't support the EEE format.
So don't load the theme in it or it will "correct" the date. Just push it via the Watch Styler GM clock manager.
Sent from my TouchPad using xda app-developers app
Awesome, couldn't of got a better teacher myself.
Thanks
Sent from my SM-N9005 using xda app-developers app
WOW.
Are you for real??
That is just amazing.
You're showing what kind of nice person you are.
Now it's just one important thing for us to do.
Read try, fail, read, try, fail,,, ,first after trying a lot, then we can ask for help if we get stuck.
Sent from my SM-N9005 using xda app-developers app
BruceFeuillette said:
Great tutorial !
One thing about the date format. Watch Styler on the phone don't support the EEE format.
So don't load the theme in it or it will "correct" the date. Just push it via the Watch Styler GM clock manager.
Sent from my TouchPad using xda app-developers app
Click to expand...
Click to collapse
There are more things that are not compatible with Watch Styler editor.
So, I started adding some info in the second post in this thread.
You Inspired Me
Because of your extensively written and detailed tutorial you've inspired me to give designing a theme a try. Thank you very much for sharing your knowledge.
I don't know if you're taking questions after devoting all the time to create this manual but...
If you have an image of an analog clock with no white date box is it possible to insert the white date box and date at the 3 o'clock position through the theme.jeson alone or do you have to photoshop the white box on to the image then just add the day text through theme.jeson?
Which position is 3 o'clock right edge using your grid system? (I'm sorry but the grid picture isn't clear enough to read the digits)
Basically I created a rolex submariner from a picture posted early in the show thread then tried to move the date box and date text to 3 o'clock. Styler created the theme for me. Now I just want to edit it so white box and date text move down to 3 o'clock position.
If I can figure out what I'm doing I would add the MMM to the left of the date at 3 o'clock if I can figure out what I'm doing.
Beamed from my Galaxy Note 3
recDNA said:
If you have an image of an analog clock with no white date box is it possible to insert the white date box and date at the 3 o'clock position through the theme.jeson alone or do you have to photoshop the white box on to the image then just add the day text through theme.jeson?
Click to expand...
Click to collapse
At the TEXT ITEMS part you can read about the bgName parameter of a text-item. When you create a clock with the date box in Watch Styler, it's done this way.
I prefer to photoshop the datebox into the background or dial, but then you'll have to know exactly where the date is displayed in the final theme.
Which position is 3 o'clock right edge using your grid system? (I'm sorry but the grid picture isn't clear enough to read the digits)
Click to expand...
Click to collapse
So you didn't click the pictures? That helps in decoding the positions
You'll notice that a 3 o'çlock date box would be at x=8 or 9. You'll want to center the date verticaly on the center line at y=5.,
So I would use y position 4 and a part h of 2, with textVerticalAlign=CENTER.
Basically I created a rolex submariner from a picture posted early in the show thread then tried to move the date box and date text to 3 o'clock. Styler created the theme for me. Now I just want to edit it so white box and date text move down to 3 o'clock position.
Click to expand...
Click to collapse
Well.. you might try first if you can align the date text exactly on the date box position by playing with the textAlign (left, right, center) parameter on various x positions and maybe with various w (part width) values
If that doesn't work good enough, you'll have to edit the picture and move the date box a little to the left or right.
Patosbuddy said:
Read try, fail, read, try, fail,,, ,first after trying a lot, then we can ask for help if we get stuck.
Click to expand...
Click to collapse
Looks like the way I started two months ago... except that I had nothing to read and could only try fail try fail try yahooo!... and noone I could ask for help when I got stuck. :crying:
So... just imagine what kind of themes you will come up with in a few weeks... or maybe even days !!
OpenMind_NL said:
At the TEXT ITEMS part you can read about the bgName parameter of a text-item. When you create a clock with the date box in Watch Styler, it's done this way.
I prefer to photoshop the datebox into the background or dial, but then you'll have to know exactly where the date is displayed in the final theme.
So you didn't click the pictures? That helps in decoding the positions
You'll notice that a 3 o'çlock date box would be at x=8 or 9. You'll want to center the date verticaly on the center line at y=5.,
So I would use y position 4 and a part h of 2, with textVerticalAlign=CENTER.
Well.. you might try first if you can align the date text exactly on the date box position by playing with the textAlign (left, right, center) parameter on various x positions and maybe with various w (part width) values
If that doesn't work good enough, you'll have to edit the picture and move the date box a little to the left or right.
Click to expand...
Click to collapse
Thanks. I had no problem getting the text to move but no matter what I tried the white box wouldn't move.
Beamed from my Galaxy Note 3
I am shocked that this thread is not stickied yet!
Amazing! Nice work!
well well well ! Perfect !!
THX OpenMind_NL
:good:
Excellent write up, I recommend using indent tags.
It will allow you to section off different paragraphs and make your writing easier to read.
Example here
Related
Kustom Live Wallpaper (KLWP) is the most powerful HD Wallpaper creator ever! KWGT is Widget creator counterpart. Use their awesome WYSIWYG (What You See Is What You Get) editor to create you own design and display any data you need, at once, and with wonderful animations too (KLWP only)! If you need more info or have questions please use these thread:
KLWP: http://forum.xda-developers.com/android/apps-games/app-kustom-live-wallpaper-t2916666
KWGT: http://forum.xda-developers.com/android/apps-games/app-kwgt-kustom-widget-maker-android-4-4-t3225173
Please use this thread to share Kustom Komponents WIPs, Kustom Komponent Screens or links to free Kustom Komponents (komp.zip files)
Komponents are basically presets inside a preset or reusable items, so a way in Kustom to create your own redistributable object. So, for example, let's say you want to create a clock but hide the complexity to the user and enable him to just set the color and the font in use, well, Komponents will do exactly that!
Material Clock Komponent sample: https://www.youtube.com/watch?v=RbvJwPQeTNc
Signal Bar Komponent tutorial: http://kustom.uservoice.com/knowledgebase/articles/434600
Quick reference, how to create a komponent
Open a preset, press "+" on top right to add a new module
Select Komponent -> New Skin
Create your Komponent possibly using "globals" (for globals check http://kustom.uservoice.com/knowledgebase/articles/426738-how-to-use-globals)
Export the Komponent pressing the "export" icon on top bar
Go in your SD card under "Kustom/Komponents"
Share the file "komp.zip" as it is
How to use a Komponent
Copy the "komp.zip" file as it is in the SD card under "Kustom/Komponents"
Open a preset, press "+" on top right to add a new module
Select Komponent -> SD Card and browse for the desired Komponent
Weather Komponents
Since weather komponents are quite a common need i have attached an example one to start with so you can create a new one very very quickly. There are 2 ways to do that:
From PC:
Open the attached komp.zip file
Replace all the images in the "Bitmaps" folders keeping the same names
Save the Zip
Done!! If you want also to change title / author either edit the "preset.json" file in the zip or import export as instructions below
From the device:
Add the Komponent from your SD card
Go inside the Komponent and Inside the "Bitmap Group" with the Advanced Editor
Pick a new image for every state listed (so enter the image, press "pick image" and choose the corresponding image)
Export with your details / name / description
Done!
Welcome everyone! Show us what you've made!
Baseline Komponent for the creation of Weather Iconsets
This komponent should be available to all of you in the next update, but if you want it now have at it in the link below.
So this is a fairly straight forward iconset using the well know Climacons glyph set.
There are several reasons I built and released this as an unlocked, free, Komponent.
1st. You can use this as a base to create your own LOCKED/Paid Komponent APKs. You still have to do a bit of work, but all of the code base is already in place for making the right icon show.
2nd. The globals here give you some ideas on what you should be including with your iconset Komponents. Just having a font is OK, but having other stuff like background shapes is better.
3. This is FAR easier to handle in terms of creating weather layouts. You no longer need to go into the code and change wi(icon) to wf(icon, #) for every single icon you have in your forecast list.
Simply add the Komponent, and choose from the DAY dropdown list which you want, Current or Forecast#, the code takes care of the rest.
List of Globals
*Day* (list) - Choose current or forecast day number
*Iconset* (font) Change the icons the Komponent uses easily
*Icon* (color) - Changes the color of the weather icon
*IconSize* (number) Change the size of the weather icon relative to BG
*Outline* (toggle) Change icon to an outline
*Stroke* (number) Change the width of the outline.
*BGStyle* (list) Change background shape (off, square, Circle, Exagon)
*BG* (color) Change the color of the backgroud shape
*Corners* (number) adjust the corner roundness on the BG shape.
Please remember that if you change the font used, you do HAVE TO go into the "Weather Icon" text layer and change the formula to reflect with characters your icons are assigned to.
Saved for a How-To on editing the code for your own font.
Coming soon.
ritalin said:
This komponent should be available to all of you in the next update, but if you want it now have at it in the link below.
Please remember that if you change the font used, you do HAVE TO go into the "Weather Icon" text layer and change the formula to reflect with characters your icons are assigned to.
Click to expand...
Click to collapse
Very basic question I know, but how do I install this? I can't find which folder to place it in...
StrangerWeather said:
Very basic question I know, but how do I install this? I can't find which folder to place it in...
Click to expand...
Click to collapse
Please check post on top, just copy it in the SD card under "Kustom/komponents" (the directory should already be there), then you can add it in the editor as you add a shape or text, just select Komponent -> SD card and browse for this. Since that Komponent is unlocked you will start in simple mode (you will see the tunable options only) but if you want to edit the komponent you can just "unlock" it and see the internals.
frankmonza said:
Please check post on top, just copy it in the SD card under "Kustom/komponents" (the directory should already be there), then you can add it in the editor as you add a shape or text, just select Komponent -> SD card and browse for this. Since that Komponent is unlocked you will start in simple mode (you will see the tunable options only) but if you want to edit the komponent you can just "unlock" it and see the internals.
Click to expand...
Click to collapse
Thanks but precisely the problem is that I don't see a folder called Komponents. I have bitmaps, wallpapers and fonts. That's it.☺
Edit: OK, never mind, I just created it...
StrangerWeather said:
Thanks but precisely the problem is that I don't see a folder called Komponents. I have bitmaps, wallpapers and fonts. That's it.☺
Click to expand...
Click to collapse
Ooops! The "komponents" folder is not created automatically. I have fixed this on next version, you will have to create it manually this time or just try adding a komponent, select SD card, it will show an empty list but create the folder. Thanks for reporting!!
Changing weather images
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Download Komponent: https://www.dropbox.com/s/g45gl7ac9aex82y/weather_images.komp.zip?dl=0
Haven't been on Xda as much lately but glad you started this Frank!
Thx!
New Premium Weather Komponent
Soft Elements
https://play.google.com/store/apps/details?id=org.qlagdesigns.softelements
This is the first of many weather iconset komponents, I will be releasing.
This Komponent takes the "Kitchen Sink" approach to its design. Thats to say that there are a large number of GLOBALS, to allow you to take my icon design and make it your own. All in all there are 30 globals for customization. Allowing you to change everything from the size of the icon, its color, its design, to the shape, color and other special characteristics of background shapes.
*LIST OF GLOBALS:*
Code:
[B]*ICON GLOBALS*[/B]
1. Day
2. Icon Color
3. Icon Rendering Mode
4. Icon Size
5. Outline (Fill, Outline, Combined
6. Stroke Width
7. Stoke Color
8. Stroke Rendering Mode
[B]*BACKGROUND SHAPE GLOBALS*[/B]
1. Shape Style (NONE, Square, Circle, Exagon)
2. Corner rounding
3. Background Color
4. Background Gradient Type
5. Gradient color
6. Gradient Width
7. Gradient Offset
8. Gradient Center X
9. Gradient Center Y
10. Shadow On/Off
11. Shadow Blur
12. Shadow Direction
13. Shadow Distance
14. Shadow Color
[B]*BACKGROUND SHAPE BORDER GLOBALS*[/B]
1. Border On/Off
2. Stroke Width
3. Stroke Color
4. Stroke Gradient Type
5. Stroke Gradient Color
6. Stroke Gradient Width
7. Stroke Gradient Offset
8. Stroke Gradient Center X
9. Stroke Gradient Center Y
Media App Iconset.
*Media Icon Komponent is live in the playstore*
https://play.google.com/store/apps/details?id=org.qlagdesigns.mediaapps
*Since Im offering this up for free, do me a favor and rate the app.*
This Komponent allows you to display an icon of the currently selected Music source.
There are a total of 40 different media apps that are supported by this iconset.
Additionally there are two other icons to handle apps that do not have their own icon.
1- A generic media icon, that appears only when none of the package name checks in the string are true.
2- A special icon that only displays if Media Utilities renders a null output for current package name. This icon is useful to relay the fact that a source needs to be choose.
This Komponent is UNLOCKED you can do with it as you like, so long as your follow two conditions.
1. You may NOT repackage this as your own Komponent and attempt to sell it.
2. If you use this in your own project and decide to sell said project, please provide attribution.
*IMPORTANT INFO*
This Komponents code uses Media Utilities to provide the package name of the current app in use. When Kustom builds this feature directly into the app, I will update this Komponent to reflect the new variables.
The Playstore version of Media Utilities is no longer being updated and does not seem to function with this Komponent. You need the latest build meant for KitKat, v153. You will need to side load this apk. The files can be found on the Media Utilities Beta Community page. https://plus.google.com/communities/103994832080931061321
KSymbolSet for Kustom
This is a Set of Symbols and Signals as Komponents made for the app 'Kustom Live Wallpaper'.
The Sets starts with 4 Symbols/Signals and will be continously extended.
Alarm/Battery/Cell-Wifi Signals/MusicStatus
Possible Settings:
WMAlarmSymbol:
MainClr: Color for the Symbol when Alarm is active
OffColor: Color for the Symbol when Alarm is off.
WMCellSignal:
MainClr: Color for the Symbol
OffColor: Color for the Symbol when Mobile Network is off.
WMWifiSignal:
MainClr: Color for the Symbol
OffColor: Color for the Symbol when Wifi is off.
WMBatterySymbol:
MainClr: Color of Symbol
WarnClr: Color of Symbol when WarnPerc reached
FullClr: Color of Symbol when FullPerc reached
FlashClr:Color of the Flash when charging
WarnPerc: Percentage when you will be warned.
FullPerc: Percentage when Battery is full
FullType: Type of Sysmbol ON Filled Symbol, OFF stroked Symbol.
WMMusicStatus
playclr: Color for PlayButton
pauseclr: Color for pauseButton
You need Media-Utilities:
Ultra configurable National Geographic picture of the day Komponent by Carla Jacobs.
How to use?
Copy the Komponent in the sdcard under "kustom/komponents" (folder should be already there) or import it from the app (pressing "+" to add a Komponent and then the "+" on bottom left and click "import" to select it from your phone memory)
Create a preset or start from a builtin one
Press "+" on top right to add a new item
Select the Komponent
Configure parameters as you like, scale, reposition and so on. Loading the images might take some time (so save it and go to your home to see it in action)
@frankmonza question. Why can't I export the bitmap weather Komponents? Scalable works fine.
rkucheran said:
@frankmonza question. Why can't I export the bitmap weather Komponents? Scalable works fine.
Click to expand...
Click to collapse
You should be able to export both, what's not working?
frankmonza said:
You should be able to export both, what's not working?
Click to expand...
Click to collapse
The images show "not set" after export.
rkucheran said:
The images show "not set" after export.
Click to expand...
Click to collapse
Please contact me via hangout on G+ or send me an email, shouldn't happen
frankmonza said:
Please contact me via hangout on G+ or send me an email, shouldn't happen
Click to expand...
Click to collapse
Cleared cache and data and fresh install. So far seems to be OK. Thanks for your reply.
Edit - Spoke too soon. Not working again.
Hi Frank! First I want to thank you for this masterpiece, one of the best apps I've used on android. I just have one question. Is changing weather icons available only in paid version?
Sent from my Nexus 4 using XDA Free mobile app
This is the first of a set of basic animation tutorials for KLWP. If you do not know what KLWP is main thread is available here.
Final result (full video tutorial at the end, final result KLWP file attached)
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Step 1: create the FAB button that will trigger the animation
Start from an empty preset
Create a global that will be used to trigger the animations (Globals -> Add -> Type Switch), this global will be used to control animations around
Add the Image for the FAB, change its name to better see it in the list
Load an Image that you like, here i am using a generic "plus" button
Set single Touch action to "Global Switch" and pick the global we just defined ("FAB"), so when touching this image that global will be toggled on/off
Go to animations and add a new one, select "ReachOn -> Global Switch" so it will be triggered by the global switch, set speed to 5 to make it faster (5 is 50ms), set type to Rotate and amount to "63" so it will not rotate completely and stop a bit earlier looking like an "X" instead of a "+" (you can test the animation pressing the "play" button on top)
To make it a bit fancier add another animation triggered by the same global, set speed to 5 as above and select "Color Filter Out", this will desaturate the image on click, making it black and white when opened
Your button is done! Save, go back to screen and see it in action. Cool eh?
Step 2: create app button
Add another Image object, change its name to "Facebook" or whatever you want
Add a Switch animation of type Scroll so the Image will move when switch triggers, set speed at 5 as above, and play with "speed" and the "play" button on top right until you reach the desired result, set also the "angle" param if you want to change scroll direction and mode to "overshoot" if you want to bounce when opening
Add another Switch animation of type "Fade In" so the item will fade in when switch changes (and while fades), the item will disappear because its initial state will be invisible, if you click the play button you will see it become visible
Go back to the root and check with the global switch (changing it) if the animation is ok, if its ok change the position of the Facebook button and place it on top of the list so it will go below the FAB (so it will look like it appears from the back)
Done! Save and test it on screen
Step 3: create additional buttons
Copy the facebook button using copy / paste
Change the name and the image (in this case we use Youtube)
Go to animations and change the scroll "speed" parameter to make it go farther, test it with play (you will just see an empty red rect because the item is transparent but it will be enough to tune speed
Save, done!
Video
https://www.youtube.com/watch?v=-UA1kIZcCp4
Nice job Frank. As always.
Sent from my OnePlus One using Tapatalk Pro
Awesome thanks Frank!
Great lil tutorial...thumbs up!
Sent from my LG-D850 using XDA Premium HD app
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
mimidudu said:
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
Click to expand...
Click to collapse
Like changing wallpaper when swiping or something different?
frankmonza said:
Like changing wallpaper when swiping or something different?
Click to expand...
Click to collapse
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Sample Menu:
Files Home Weather - white letters
Screen 1: Home data
Screen 2: Weather data
Screen 3: Calendar events
When the corresponding screen is showed in menu the word corresponding is yellow, the other two whites.
Thanks in advance for your help.
mimidudu said:
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Click to expand...
Click to collapse
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
I will try.
Thanks.
Can you fix the YouTube link?
AndreAkaNick said:
Can you fix the YouTube link?
Click to expand...
Click to collapse
Fixed sorry
how add touch actions??
frankmonza said:
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
Click to expand...
Click to collapse
This could be a separate tutorial in itself. :good:
Bump.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Introduction
Materialize Theme is a theme for AROMA Installer. Inspired by sir Daniiiik49's Material theme and based on the MIUI 4 ICS theme. It applies the Material Design concept to give you a whole new look n' feel It also includes the most common Material Design Icons for you to just choose whichever icon you prefer to use.
NOTE: Currently supports small screen devices, cause Buttons, Icons and other parts of the theme appears small on a larger screen device (see the screenshots below). Sorry for inconvenience.
Screenshots
Device with 320x480 resolution:
Device with 1080x1920 resolution:
Changelog
Materialize 01.05.2017
Set Roboto Light font as the default theme font
Removed Device Pixelate size selection
Removed Font size selection
Minor changes
Materialize 12.12.2016
Added 2 theme colors; Indigo and Blue Grey
Added 70 Material Design Icons
Updated Buttons. Will now raise only on press
Updated Dialog window. Fixed Titlebar text color
Updated Window transition. A bit slower transition
Set default Device Pixelate size to HDPI
Set Poiret One font as the default theme font
Materialize 12.10.2016
Applies Polymer's Paper Shadow
Updated Progress bar
Updated Dialog window
Updated Selection controls
Materialize Lite
Initial release
Customization
I've now moved and updated the source files to a new repository. Here if you want to customize your own theme, click the button below for some basic useful info you may want to know first
Colors
All colors I've used here are from the Color Style guideline. Just choose your primary (500) theme color and you're good to go. The rest of the colors are defaults from the MIUI 4 ICS theme and were already set in the source files, so no need to worry bout it.
First thing is replacing some values of the theme's properties. Open up the file theme.prop, replace the HEX color code values of the following theme properties listed below with your preferred color.
Code:
[FONT="Courier New"]color.selectbg = #RRGGBB
color.selectbg_g = #RRGGBB
color.titlebg = #RRGGBB
color.titlebg_g = #RRGGBB
color.dlgtitlebg = #RRGGBB
color.dlgtitlebg_g = #RRGGBB
color.scrollbar = #RRGGBB
color.progressglow = #RRGGBB[/FONT]
Brief description about the properties; color.selectbg and color.selectbg_g for item selection (e.g Selecting an item in selectbox), color.titlebg and color.titlebg_g for the Titlebar text color, color.dlgtitlebg and color.dlgtitlebg_g for the Dialog's Titlebar text color, color.scrollbar is basically for the Scrollbar, and color.progressglow for the animating gradient color of Progress bar.
Background, Navbar, Dialog & Titlebar
The colors used in Background, Navbar and Dialog can also be found in the Color Style guideline under Themes. Background color is Grey 50 (#FAFAFA), the color of the Navbar is actually the App bar color which is Grey 100 (#F5F5F5), Dialog background color is White (#FFFFFF). And the color for Titlebar, as well as for Dialog's Titlebar will be the primary theme color.
Select Image
The Select image can be seen in the item selection (e.g When pressing an item in menubox). There isn't much use of this one so I just make it totally transparent.
Progress Bar
The Progress bar has two segment, one is the empty Progress bar and the other one is the fill Progress bar. Color used for the empty Progress bar is Grey 300 (#E0E0E0) and for the fill Progress bar is the theme's primary color. Additionally, to change the animating gradient color, just replace the value of the property color.progressglow in the theme.prop file.
Buttons
Here I've implemented the Raised Button which at first is just a classic button, then will raise once it's pressed. The following order of theme properties below will show this implementation.
Code:
[FONT="Courier New"]img.button = button.9
img.button.focus = button_primary.9
img.button.push = button_primary_raised.9[/FONT]
Brief description about the properties; img.button is the classic or let's say the default button, img.button.focus is basically the focused button (not elevated/no drop shadow), and img.button.push is the pressed button (elevated/drop shadow on).
The color used for the default button is Grey 300 (#E0E0E0) and for the primary button is the theme's primary color.
Toggles
There are four states for the Checkbox and Radio button; OFF, ON, FOCUSED, and PRESSED states. Obviously, The OFF state is the unselected one, and of course, the ON state is the selected one. FOCUSED state is only applied to the unselected item where it's simply indicates that the item is just focused but not selected. PRESSED state is where the ripple-like effect is shown which indicates that the item is pressed, either it is selected or unselected.
The following order of theme properties below will show this implementation:
Code:
[FONT="Courier New"]# CHECKBOX
img.checkbox = checkbox
img.checkbox.focus = checkbox_focused
img.checkbox.push = checkbox_focused_ripple
img.checkbox.on = checkbox_on
img.checkbox.on.focus = checkbox_on
img.checkbox.on.push = checkbox_on_ripple
# RADIO BUTTON
img.radio = radio
img.radio.focus = radio_focused
img.radio.push = radio_focused_ripple
img.radio.on = radio_on
img.radio.on.focus = radio_on
img.radio.on.push = radio_on_ripple[/FONT]
Brief description about the properties; img.radio and img.checkbox for the unselected item, img.radio.focus and img.checkbox.focus for the focused unselected item, img.radio.push and img.checkbox.push for the pressed unselected item, img.radio.on and img.checkbox.on for the selected item, img.radio.on.focus and img.checkbox.on.focus for the focused selected item (here, FOCUSED state is not applied to selected item), img.radio.on.push and img.checkbox.on.push for the pressed selected item.
See the Selection Controls guideline for the color style.
NOTICE: Some of the image has a .9 at the end of their names (as seen in the file theme.prop). This is important so don't change it, unless you know what's its purpose.
Other References
The drop shadows I used here is the Polymer Paper Shadow. See this blog for details on how to apply these values in Photoshop.
Credits
Sir @Daniiiik49 for giving me permission to use his theme's resource.
Big THANKS to @Mitsos Vorris for providing screenshots and for those countless test :laugh:
Just a simple Thanks if you liked my work. It will be very much appreciated
Can you post some screenshots?
Mitsos Vorris said:
Can you post some screenshots?
Click to expand...
Click to collapse
I can't right now, I don't have a PC but after the update I'll post it all. Sorry for inconvenience.
Theme updated
Final update.
Turkish Language
Texts are translated for Turkish.
Language File Only
EypCnn said:
Texts are translated for Turkish.
Language File Only
Click to expand...
Click to collapse
Thanks for contribution
AROMA-CONFIG Update
Added Font size selection for small, medium and large screen size
Re-added Device Pixelate size selection but with additional 2 options
great job
great job
Screenshots added.
Minor changes.
Thank you!
Thanks for the work :good:
Hello guys,
This is a thorough tutorial (with images) on how to make an SVG graphic for use in android themes
SVGs are vector graphics which do not get pixelated upon enlargement and retain their originality and they are a little faster to draw than PNGs
Click to expand...
Click to collapse
Tools Used:
Adobe Illustrator (any version but CS5+ would be great)
Notepad++ (or any other text editor would do)
Online PX to DPI checker (important)
Expertise:
Only some knowledge of Illustrator required to build an SVG out of it
Of course we can always make our own graphics if we know illustrator enough but for the sake of this tutorial, I will not go into that part instead I will use just a normal image from internet since this is not a graphic design tutorial but how to make an svg and format it properly to use in android
STEP 1 - PREPARE FOR INTIALS
First we need to know which graphic are we going to make since we will need its dimensions.
Here I will make a wifi icon which is displayed in dropdown panel, in other words, Quick Settings Panel.
This icon is present in systemUI folder with different modes named as
ic_qs_wifi_0,
ic_qs_wifi_1,
ic_qs_wifi_2,
ic_qs_wifi_3
ic_qs_wifi_4
So in total, we will have 5 icons of Wifi. Since all these icons are same except the bars opacity to detemine strength of signal, we will make only one SVG of it and manipulate its opacity in others to make different modes.
Now, I have this PNG in dimensions of 168x168px in folder drawable-xhdpi and I need to know its DPI for correct display in phone. Here DPI checker becomes handy.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Our illustrator canvas is going to be 84px X 84px.
STEP 2 - VECTORIZE THE IMAGE
Open Illustrator, File > New and use the following settings and click OK
Now we need an image, as I said that I will just use a random image from google, so this is what I have selected, you can also use this one for practicing purpose. (HINT: I usually use keywords like "wifi icon png" in google and select an image which is at least 250x250px in dimension and there are no mixed colors or gradients)
When we have this image saved in my PC, we will just drag it open in illustrator over the same file we just started
Now its time to Image Trace this PNG to get it in vector shape.
This tool is present in WINDOW > IMAGE TRACE in illustrator. Click it to get the dialog if you dont have it already there.
Select the Image, In the Image Trace Dialog, click on "Black and White" Icon to trace it in B&W tones.
You will get something like this
The image has taken the form of vector but isn't editable yet, so we will need to Expand it to get the separate layers. The tool is in OBJECTS > EXPAND
Just press OK in the Expand Dialog
Now we have the separate vector layers for everything in that image, it is grouped in one and usually becomes annoying if you want to select only one layer in that group, it will instead select the whole group so we will just un-group it to root level (this is usually un-group two times). The tool is in OBJECTS > UNGROUP. or else the shortcut is CTRL+SHIFT+G (press two times)
After ungroup, we will have all the layers separated and we will remove the layers we dont need, that is all the white we have there.
First click outside image anywhere to deselect everything and then click on white to select it and press DEL on your keyboard.
We are now left with only black stripes which are our wifi lines. There are 4, one circle and 3 curves.
Sicne we need them all seperate to set the opacity later, so we will not merge these together. (I will come to this part later)
Now select all these 4 layers and scale them down to fit in the white canvas we created with File > New
Now I want my wifi icon to have a circle behind it as well, so we will head to make a circle.
Press L to select Eclipse Tool and draw a circle in the center of the image.
Make sure this new created circle layer lies below all other layers
HINT: You can zoom in the canvas to see better for working. a 500% zoom is good here.
Now I will have to make a Compound Path of this circle to correctly generate its code usable on android.
Select the Circle by clicking on it and then Right Click on your Mouse and select "Make Compound Path"
If you have more than 1 layer, its always a good idea to color them with different colors to later identify their code upon export. because we are gonna need it.
Color All other stripes separately as well. You can color them anything you want because they wont effect our SVG.
We now have a vector of wifi with a circle we are going to use in SVG. head to next step
STEP 3- PREPARE THE SVG
Assuming that until here, we have everything under control, Just head to "File > Save As", and in the save dialog, select SVG, and click on Save once. (Only Once)
Make sure you have the same settings in the next dialod and press button SVG CODE.. to open the code in browser.
In the browser, you will see some nasty code that may seem to you a Ferengi Alliance Code of Business Conduct but dont worry, we dont need to understand a single bit in it but copy only chunks of this code to Notepad++ or the text editor you are using.
I have highlighted those chunks which we need to copy one by one in the same order from top down as they are,
-- BUT FIRST--
Lets build the svg file base structure to copy the chunks to, and we also need some introduction to the code in it.
In notepad++, make a new file and paste the code below in it
Code:
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="84.0dip" android:width="84.0dip" android:viewportWidth="84.0" android:viewportHeight="84.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
</vector>
In the above code,
we are defining a vector with attributes of height and width of canvas and actual image in it. i-e 84..0dip as we concluded from px to dpi converter.
Next is the Path. We have 5 chunks of Path tag since we had originally 5 layers made in Illustrator.
Each Path tag has its attributes which will tell android how to render this svg.
android:fillColor will be the color of the shape
android:alpha will be transparency of the shape. 1.0 being opaque and 0.0 being completely transparent.
androidathData will be actual data of the shape layer (here in attributed to as PATH) which we created
Please note that these attributes are case sensitive. so if you write pathdata instead of pathData, it will not work.
Now Back to the browser where we have our code. Please see the picture below
In the above picture, I have highlighted the chunks of code we need to copy and paste between pathData attributes.
Do them in order as blue to first and pink to last.
The first highlight is the data of circle
Second is data of Wifi small circle
similarly other 3 path datas are data of 3 curves we had in wifi
After you are finished, your code should look something like this
Note that your path data and number will look completely different than mine because there are too many factors involved, i-e placement of your shapes, size of shapes and shapes themselves etc etc
I have put alpha of first pathData to 1.0 because this is the circle and I want it opaque.
Next I have put alphas of all else to 0.3 because first image is going to be drawn in android when there are no wifi signals or wifi is not connected, so 30% opacity to wifi curves.
Save this image as ic_qs_wifi_0.png
Now look into the picture below
In this, I have put alpha of second path to 1.0. This is when you will be getting only one bar of wifi so one bar will turn white and rest will stay semitransparent.
Save now as ic_qs_wifi_1.png
Similarly keep adding 1.0 alpha to android:alpha and save respectively as ic_qs_wifi_2.pngic_qs_wifi_3pngic_qs_wifi_4png
Put them in your theme folder in com.android.systemui/res/drawable folder (I guess you know this part if you are a themer)
Your image will be drawn in android as
Please feel free to ask me anything about it and I will be more than happy to guide you guys.
Please do not forget to quote me when you ask something as this way I will get notifications on mobile to reply to you quicker.
Thanks.
New NST Weather Widget is done! https://forum.xda-developers.com/nook-touch/themes-apps/app-nst-weather-widget-t3946270
Updated to v1.1
--fixed issue that often caused app crash if initial contact with OWM was unsuccessful
--added sunrise/sunset update for condition icon
--added "current value" display in Settings for Lat., Long. and API
--some cosmetic changes to forecast panel
Everybody talks about the weather...
I miss WeatherAce, but when WeatherUnderground deep-sixed their free API service, there was nothing left in the app that worked. I made a few half-hearted attempts at updating the APIs for some of the other services included in the app but it became clear that my approach was too simple-minded and I gave up.
NSTWeather is my "learning app" for figuring out how to deal with xml weather data. It's a simple weather display and forecast app just for the NST (and sort of the NSTG...read on). Because Tasker (which I used to make this app) cannot create widgets, I started looking for some screen real estate that would (almost) always be visible. There is a small "blank" section of the status bar to the right of the soft Menu button. On the NST, this area is large enough for a temperature (no F or C) and a small condition icon. On the rare occasion that sync arrows appear, they overlap the condition icon. Alas, if you have an NSTG, the Glowlight indicator overlaps the condition icon when WiFi is on and, I suppose, sync arrows displayed with the WiFi on might overlap the temperature. So this might not be the best thing for NSTG users.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
"What about apps that run full-screen?", you ask. I have only one or two, including the stock reader. I have made the weather information the same color as the reading page background. That's one reason the icons look a little rough. Only 2 colors. If you have other full-screen apps and the weather display is annoying you, it can be toggled by a long press once the app is activated.
This app is not quite experimental, but it is not a destination for me. This is a way for me to work out various issues leading up to an eventual Widget.
With that out of the way...
What it does
This app uses your latitude, longitude and free OpenWeatherMap API to fetch a 3-hr, 5-day forecast for your locale. The app makes up to two attempts to contact the OWM servers each morning, at 4:30 am. The xml file from OWM is then processed to extract sunrise/sunset times, and temperatures and precipitation amounts for each 3-hr period over the 5-day forecast. All this data is massaged to get the time zone corrected, adjust the day/night condition icons for sunrise/sunset (OWM has them wrong...) and convert the precipitation into the units you desire. There is lots of other information in the xml file, but I decided to keep this "simple" (it is anything but) and just go for this essential information.
At each 3-hr interval, starting at 2:00 am, the temperature/condition display is updated from the forecast data. In addition, a tap on the temperature display will open a panel with the forecast for all 5 days, at 3-hr intervals (see screenshot below).
If the app fails to contact OWM (their servers are sulking or you have arrived in a hotel the previous evening and your NST can't make a WiFi connection...), it will re-sort the panel data to keep the day display correct and continue to display whatever information it has in the last forecast received until it runs out of data. I don't know what happens then! Of course, one could hope that in the course of 5 days it will eventually reach OWM.
What it doesn't do
The app--as configured--does not display "tiny" amounts of precipitation. I have it set to indicate "trace" (tr.) when the value falls below a tenth of whatever unit is selected. Also, I make no distinction among the types of precipitation other than by the condition icon.
Unfortunately, in the old version of Tasker that runs on the NST there is no way to directly address the changes at sunrise or sunset since they are variable, and variable time contexts were added only to later versions of Tasker. In the current version of NSTWeather I have added a routine for updating the condition icon within 15 minutes of sunrise or sunset, always on the early side rather than later. I based my range of potential times on Anchorage and Oslo. If you live at even more extreme northerly or correspondingly southerly latitudes, this will not work for you all the time. Also, since the weather data is updated at 4:30 am, I did not include the entire potential sunrise range (as early as 3 am), but rather settled for 4:45 am as my starting value. Hopefully you are asleep at that point...
Requirements
1. This is a Tasker-generated app. If you already have one of my other Tasker-generated apps or have previously installed GApps, you don't need the two Google maps library files included in the zip and can delete them. If you do need them, copy the two files into the locations shown below:
/system/etc/permissions/com.google.android.maps.xml
/system/framework/com.google.android.maps.jar
Set permissions for both files to rw-r--r-- and reboot. Without these files resident, the app will not install.
2. Copy the folder "NSTWeather" and its contents from the zip below to the root of your sdcard. This contains all the condition icons and is where the weather.xml file from OWM will be stored.
3. Go to https://openweathermap.org/ and find the current weather for your locale. When this is displayed you will also see the "geocoordinates" (i.e., the latitude and longitude). Copy these two values.
4. Go to https://openweathermap.org/api and sign up for a free API (right there in the opening paragraph, click on the words "sign up"). You will eventually receive an email with the API.
Installation and Use
Install the app from the zip below either by side-loading or ADB. The only user interface of the app is a Settings page. Open NST Weather and enter your latitude and longitude, as well as your API. Be especially careful with the API and make sure to include any negative signs with the geocoordinates.
Next, make your selection of the units you want displayed. Finally, to make the app fully functional you need to check both of the boxes in the lower section (you can disable the app temporarily by unchecking these). When you've made all the selections, tap on the bottom box to start a manual data retrieval. The Settings page will close and you should see WiFi come on for a bit. It will then turn off. If a successful connection was made with OWM and if you entered your information correctly, you will eventually see a weather display in the status bar. How long will it take? About 3 minutes. There's an awful lot of stuff to be done. That's one reason for having the data update done at 4:30 am when you are hopefully snoozing.
If nothing seems to happen and you see WiFi come back on again in 15 minutes, then it failed to contact OWM the first time and is trying again. If the second time fails, you will get a notification telling you that download failed, assuming there is nothing wrong with the values you entered. Go back to the Settings page and carefully check your API. That's where the most likely error will occur. Of course you should check your geocoordinates, too, just to be sure.
If you have made a successful connection with OWM before and one day there is a notification saying download failed, you can just ignore it and hope for better luck the next day unless you absolutely must have an updated forecast. In that case, you can use the manual retrieval option. There is no need to re-enter the latitude, longitude and API each time you open the Settings page once they have been entered correctly. They are stored in the /data/data/app folder for the app. Also, if you decide to change the locale, you only need to enter the new latitude and longitude, not the API.
The 5-day forecast panel is updated daily even if a download fails (data is just shifted to the left and the names of the days are changed). You access the panel by tapping on the temperature display.
If you want to hide the weather display, a long press on the temperature will make it invisible, but the area on the status bar adjacent to the soft Menu button remains active. Another long press will re-display the weather information.
Widgets?
As I said early on, Tasker cannot make widgets on its own, although it can share data with some other apps which can. Of these, only one will still work on the NST/G: Minimalistic Text. The current version of NSTWeather shares the current temperature value display with Minimalistic Text as a "Locale" variable called CURRTEMP. If you have a working install of Minimalistic Text and some familiarity with the app, you can play with this just to get a feel for the possibilities (that's what I'm doing!). To do so, create a widget (1x1 or perhaps 2x1), and select "Custom" for the format/layout. Get rid of all the stuff that is there by default and tap on the "Misc" tab. One of the options there is "Locale". If you drag that up to the working area you can enter the name of the variable CURRTEMP. If you want to add a degree symbol and F or C, or perhaps your location, you can use the "Static Text" option. I've done this and it works wonderfully well, updating right along with the normal status bar temperature display of NSTWeather. There's still a tremendous amount of work to be done to get to the actual Widget with the condition icons, etc., but it's a start