Skip to content

Commit

Permalink
Implement custom font for other devices - Issue #1
Browse files Browse the repository at this point in the history
For all devices (except the vivoactive_hr):

* use the same Teko ("TImeFont") font
* move the time labels a bit down, and a little more space between
  the hour and minute labels
- also move the date labels (where needed)

For the vivoactive_hr:

* create a smaller variant of the Teko ("TimeFont") font as the
  other version did not fit within the smaller width of the device
  screen
* move the "A" and "P/M" labels to below-right of the time labels -
  they did not fit on the right with the new font) and keep both
  the "A" and the "P/M" labels together on the same line
* move the date labels a bit further down, below the new position
  of the "A" and "P/M" labels
  • Loading branch information
alni committed Dec 17, 2017
1 parent f6c7ed5 commit e3f321c
Show file tree
Hide file tree
Showing 8 changed files with 116 additions and 37 deletions.
33 changes: 24 additions & 9 deletions resources-rectangle-205x148/layouts/layout.xml
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,36 @@

<!-- Middle Main Content -->
<!-- Large centered digital clock -->
<label id="TimeAmPmLabel" x="188" y="62" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="189" y="81" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeAmPmLabel" x="188" y="62" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeAmPmMLabel" x="189" y="81" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->
<label id="TimeAmPmLabel" x="190" y="66" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="191" y="85" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="26" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeHourLabel" x="95" y="26" text="12" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="109" y="26" text="50" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />

<label id="TimeMinuteLabel2" x="109" y="26" text="50" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_RED" />


<!-- Date section below clock -->
<label id="TimeHourLabel" x="96" y="50" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="108" y="50" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeLabel" x="center" y="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- <label id="TimeHourLabel" x="96" y="50" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeMinuteLabel" x="108" y="50" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->

<!-- <label id="Time2Label" x="center" y="50" text="00:08" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- Date section below clock -->
<!-- Current Week Day label (just Left of centered date label) -->
<label id="WeekDayLabel" x="85" y="120" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="WeekDayLabel" x="85" y="127" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<!-- Centered current date label (day of month) -->
<label id="DateLabel" x="center" y="117" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" />
<label id="DateLabel" x="center" y="124" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" />
<!-- Current month name label (just right of centered date label) -->
<label id="MonthLabel" x="120" y="120" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<label id="MonthLabel" x="120" y="127" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- <label id="WeekDayLabel" x="85" y="120" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- Centered current date label (day of month) -->
<!-- <label id="DateLabel" x="center" y="117" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" /> -->
<!-- Current month name label (just right of centered date label) -->
<!-- <label id="MonthLabel" x="120" y="120" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->
</layout>
15 changes: 11 additions & 4 deletions resources-round-218x218/layouts/layout.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,23 @@
<!-- Large centered digital clock -->
<label id="TimeAmPmLabel" x="194" y="85" text="p" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="195" y="108" text="m" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="center" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeHourLabel" x="102" y="center" text="12" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="115" y="center" text="50" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />

<!-- <label id="TimeLabel" x="center" y="center" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- <label id="TimeHourLabel" x="102" y="center" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeMinuteLabel" x="115" y="center" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->

<label id="TimeLabel" x="center" y="center" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<!-- Date section below clock -->
<label id="TimeHourLabel" x="102" y="center" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="115" y="center" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- <label id="Time2HourLabel" x="102" y="center" text="00" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_YELLOW" /> -->
<!-- <label id="Time2MinuteLabel" x="115" y="center" text="08" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_YELLOW" /> -->
<!-- <label id="Time2Label" x="center" y="center" text="00:08" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- Date section below clock -->
<!-- Current Week Day label (just Left of centered date label) -->
<label id="WeekDayLabel" x="90" y="150" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<!-- Centered current date label (day of month) -->
Expand Down
13 changes: 9 additions & 4 deletions resources-semiround-215x180/layouts/layout.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,20 @@
<!-- Large centered digital clock -->
<label id="TimeAmPmLabel" x="204" y="68" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="205" y="87" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="center" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="center" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeHourLabel" x="97" y="center" text="12" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="117" y="center" text="50" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />

<!-- Date section below clock -->
<label id="TimeHourLabel" x="97" y="center" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="117" y="center" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeLabel" x="center" y="center" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- <label id="TimeHourLabel" x="97" y="center" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeMinuteLabel" x="117" y="center" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->

<!-- <label id="Time2Label" x="center" y="center" text="00:08" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- Date section below clock -->
<!-- Current Week Day label (just Left of centered date label) -->
<label id="WeekDayLabel" x="90" y="133" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<!-- Centered current date label (day of month) -->
Expand Down
36 changes: 26 additions & 10 deletions resources-vivoactive/layouts/layout.xml
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,37 @@

<!-- Middle Main Content -->
<!-- Large centered digital clock -->
<label id="TimeAmPmLabel" x="178" y="56" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="179" y="77" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeAmPmLabel" x="178" y="56" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeAmPmMLabel" x="179" y="77" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<label id="TimeLabel" x="center" y="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeLabel" x="center" y="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- Date section below clock -->
<label id="TimeHourLabel" x="96" y="50" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="107" y="50" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- <label id="TimeHourLabel" x="96" y="50" text="12" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- <label id="TimeMinuteLabel" x="107" y="50" text="50" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->

<label id="TimeAmPmLabel" x="190" y="56" text="p" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
<label id="TimeAmPmMLabel" x="191" y="77" text="m" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeLabel" x="center" y="26" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />

<label id="TimeHourLabel" x="95" y="26" text="12" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<label id="TimeMinuteLabel" x="109" y="26" text="50" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />

<!-- <label id="TimeMinuteLabel2" x="109" y="26" text="34" font="Rez.Fonts.TimeFont" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_RED" /> -->

<!-- <label id="Time2Label" x="center" y="50" text="00:08" font="Gfx.FONT_NUMBER_THAI_HOT" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" /> -->

<!-- Current Week Day label (just Left of centered date label) -->
<label id="WeekDayLabel" x="85" y="115" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<!-- Date section below clock -->
<!-- Current Week Day label (just Left of centered date label) -->
<label id="WeekDayLabel" x="85" y="122" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" />
<!-- Centered current date label (day of month) -->
<label id="DateLabel" x="center" y="117" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" />
<label id="DateLabel" x="center" y="124" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" />
<!-- Current month name label (just right of centered date label) -->
<label id="MonthLabel" x="120" y="115" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<label id="MonthLabel" x="120" y="122" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" />
<!-- Current Week Day label (just Left of centered date label) -->
<!-- <label id="WeekDayLabel" x="85" y="115" text="Tor" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_RIGHT" color="Gfx.COLOR_BLUE" /> -->
<!-- Centered current date label (day of month) -->
<!-- <label id="DateLabel" x="center" y="117" text="29" font="Gfx.FONT_NUMBER_MILD" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_RED" /> -->
<!-- Current month name label (just right of centered date label) -->
<!-- <label id="MonthLabel" x="120" y="115" text="Des" font="Gfx.FONT_MEDIUM" justification="Gfx.TEXT_JUSTIFY_LEFT" color="Gfx.COLOR_BLUE" /> -->
</layout>
15 changes: 15 additions & 0 deletions resources-vivoactive_hr/fonts/Teko.fnt
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
info face="Teko Light" size=-96 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0
common lineHeight=138 base=92 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
page id=0 file="Teko_0.png"
chars count=11
char id=48 x=33 y=0 width=27 height=60 xoffset=4 yoffset=32 xadvance=35 page=0 chnl=15
char id=49 x=0 y=61 width=15 height=60 xoffset=1 yoffset=32 xadvance=20 page=0 chnl=15
char id=50 x=221 y=0 width=24 height=60 xoffset=2 yoffset=32 xadvance=28 page=0 chnl=15
char id=51 x=143 y=0 width=25 height=60 xoffset=2 yoffset=32 xadvance=31 page=0 chnl=15
char id=52 x=0 y=0 width=32 height=60 xoffset=0 yoffset=32 xadvance=31 page=0 chnl=15
char id=53 x=169 y=0 width=25 height=60 xoffset=3 yoffset=32 xadvance=31 page=0 chnl=15
char id=54 x=89 y=0 width=26 height=60 xoffset=4 yoffset=32 xadvance=34 page=0 chnl=15
char id=55 x=195 y=0 width=25 height=60 xoffset=0 yoffset=32 xadvance=25 page=0 chnl=15
char id=56 x=61 y=0 width=27 height=60 xoffset=4 yoffset=32 xadvance=35 page=0 chnl=15
char id=57 x=116 y=0 width=26 height=60 xoffset=3 yoffset=32 xadvance=33 page=0 chnl=15
char id=58 x=16 y=61 width=10 height=47 xoffset=2 yoffset=45 xadvance=14 page=0 chnl=15
Binary file added resources-vivoactive_hr/fonts/Teko_0.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions resources-vivoactive_hr/fonts/fonts.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<font id="TimeFont" filename="Teko.fnt" filter="0123456789:"/>
</resources>
Loading

0 comments on commit e3f321c

Please sign in to comment.