(2013-12-04, 11:45)pecinko Wrote: [ -> ] (2013-11-27, 16:40)DBMandrake Wrote: [ -> ]I've just tested 1.2.5 and vertical alignment looks good now but I've still had to revert back to 1.0.9 because the Arial No Caps font is still a lot narrower than the Arial font used in 1.0.9. One of our XBMC systems is running on a 24" screen in a bedroom and the Arial font (as well as the default all caps font) is just too narrow to be comfortably read from a distance, while the 1.0.9 Arial font is easy to read at the same distance.
Here's an offer - you edit Arial no caps to your liking and I will include it in the skin.
Edit Font.xml from skin.amber/1080i - section <fontset id="Arial nocaps" unicode="true" idloc="31391"> ONLY
Put a keymap.xml file in ../userdata/ folder with the following content:
PHP Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<keymap>
<global>
<keyboard>
<f5>XBMC.ReloadSkin()</f5>
</keyboard>
</global>
</keymap>
and you will be able to refresh skin with F5 key so you can test your changes on-the-fly : Increase font size in Arial no caps section, save changes, hit F5 to see the change in the skin.
Hi Pecinko,
I've spent quite a bit of time over the last week tweaking the fonts for the Arial No Caps mode, I hope you like the results and will consider including them in the next release. I used the latest snapshot of Amber for Frodo from Github on the 21st of December as my base version to work from, so these files are relative to that version.
The fonts are quite a bit larger than the default font and easy to read at a distance but have been carefully tweaked to fit within the style and layout of the skin. While testing larger fonts I discovered a couple of problems with overlapping scroll areas for labels and scroll areas for labels that were too large for the image beneath them which required minor tweaks to Includes.xml and DialogSeekBar.xml, which I hope you will also consider including.
Specifically, the labels for the time and date field in the top right of the home screen and library stats field in the bottom right corner were both much longer than the displayed length of TimePanel.png, this can be seen below when using a deliberately oversized font:
(Note, the font size in my final version is not this large - I used oversized fonts to see and detect problems with label sizes)
I made changes to Includes.xml to lengthen the TimePanel image bar for bottom right and top right from 540 to 590 pixels (to match the rss bar which is 590 pixels) and at the same time reduced the scroll area width from 500 to 490 so that it correctly fits, and scrolls correctly if required. (The font is small enough that it shouldn't normally need to scroll but can if needed)
The other place I noticed a problem was the end time in the top left of the full screen video progress bar - the two label fields for end time and current time overlapped each other so with larger fonts the two labels overlapped - this problem was present with old versions of the theme like 1.0.9 as well.
I've tweaked the position and width of both labels slightly in DialogSeekBar.xml so that they do not overlap, yet are large enough for both the larger arial no caps font, but also display correctly on the default font. Here is how it now looks with the Arial No Caps font - even with AM/PM fields it comfortably fits:
With the default font there is no visible change from before as the font is much narrower anyway and fits easily within the label widths.
One minor problem that I could not solve is with my larger fonts the vertical alignment of the rss feed is not optimal - because its top aligned the font is slightly too low with the larger arial no caps fonts:
I tried to use an aligny tag so the font is vertically centred in the image regardless of size but this does not seem to work with an rss feed label - I'm only a complete beginner with xbmc skins so perhaps you know a way to fix it ? It's not a big deal if there isn't a way.
Below are the three xml files I edited:
https://dl.dropboxusercontent.com/u/7826...s/Font.xml
https://dl.dropboxusercontent.com/u/7826...eekBar.xml
https://dl.dropboxusercontent.com/u/7826...cludes.xml
Font.xml has only been edited in the arial no caps section. For clarity here are unified diffs of the changes I made to DialogSeekBar.xml and Includes.xml in case other changes have been made to those since Dec 21st:
Code:
--- DialogSeekBar.bak 2013-12-21 23:21:57.000000000 +0000
+++ DialogSeekBar.xml 2013-12-31 12:25:57.000000000 +0000
@@ -30,13 +30,13 @@
<control type="label" description="End Time">
<posx>30</posx>
<posy>5</posy>
- <width>330</width>
+ <width>300</width>
<height>30</height>
<align>left</align>
<aligny>center</aligny>
<font>Details</font>
<shadowcolor>Black</shadowcolor>
- <scroll>false</scroll>
+ <scroll>true</scroll>
<label>$INFO[Player.FinishTime][COLOR=Orange] • [/COLOR]$LOCALIZE[19127]</label>
</control>
<control type="group">
@@ -64,10 +64,10 @@
<visible>true</visible>
</control>
<control type="label" description="Progress time label">
- <posx>470</posx>
+ <posx>480</posx>
<posy>-5</posy>
<height>30</height>
- <width>180</width>
+ <width>140</width>
<align>right</align>
<label>$INFO[Player.Time]</label>
<font>Details</font>
@@ -142,4 +142,4 @@
</control>
</control>
</controls>
-</window>
\ No newline at end of file
+</window>
Code:
--- Includes.bak 2013-12-21 23:21:57.000000000 +0000
+++ Includes.xml 2013-12-30 15:40:51.000000000 +0000
@@ -145,9 +145,9 @@
<control type="image">
<visible>!Player.HasAudio + [Window.IsActive(home) | Window.IsActive(weather)]</visible>
<include>VisibleFadeEffect</include>
- <posx>540r</posx>
+ <posx>590r</posx>
<posy>0</posy>
- <width>540</width>
+ <width>590</width>
<height>90</height>
<texture border="100,0,0,0" flipy="true">common/TimePanel.png</texture>
</control>
@@ -195,9 +195,9 @@
</control>
</control>
<control type="label">
- <posx>30r</posx>
+ <posx>20r</posx>
<posy>0</posy>
- <width>500</width>
+ <width>490</width>
<height>35</height>
<align>right</align>
<font>Details</font>
@@ -1174,17 +1174,17 @@
<control type="group" description="Library stats">
<animation effect="slide" tween="cubic" easing="inout" start="0,0" end="0,120" time="240" condition="![[[Container(300).HasFocus(13) | Container(300).HasFocus(14)] + Library.HasContent(MusicVideos)] | Container(300).HasFocus(4) | Container(300).HasFocus(5) | [Container(300).HasFocus(6) + Library.HasContent(music)]]">Conditional</animation>
<control type="image">
- <posx>540r</posx>
+ <posx>590r</posx>
<posy>990</posy>
- <width>570</width>
+ <width>590</width>
<height>90</height>
<texture border="100,0,0,0">common/TimePanel.png</texture>
</control>
<control type="label">
- <posx>40r</posx>
+ <posx>20r</posx>
<posy>1033</posy>
<height>50</height>
- <width>500</width>
+ <width>490</width>
<font>ListDetails</font>
<align>right</align>
<label>$VAR[LibraryStats]</label>
I hope you like my suggested changes, its the first time I have delved into xbmc skins so it was a bit of a learning experience.
Edit: I noticed a slight mistake in Font.xml after posting - I have re-uploaded the correct version of Font.xml and edited the link in the post.