Attempting to create a skin with huge fonts
#1
Hi,

I have set up a Raspberry Pi 3 with the 'official 7" touchscreen" and Kodi 18.4 Leia as the replacement for and old Terratec Noxon (version 1) device in our kitchen.

The device will typically show: radio station name, artist name, song title, album name, album art, clock...

As of now, everything's of course unreadable 'cos the text is way too small -- viewing distance is around 2-3m depending on where you're standing / seated.

I've created a copy of the Estouchy skin with all font sizes doubled.

But of course this results in lots of stuff being clipped and/or overlapping, see these screenshots.

Where are the sizes of the standard controls / widgets / headers / footers configured?

Can I actually do what I'm aiming at, or are those hardcoded in Kodi itself?

Note: I don't mind if I have to reduce the number of items / columns / rows in lists / item browsers to make the items larger to accommodate the large text.

Thanks a lot for your help.
Reply
#2
Thread moved to the Estouchy skin section.
|Banned add-ons (wiki)|Forum rules (wiki)|VPN policy (wiki)|First time user (wiki)|FAQs (wiki) Troubleshooting (wiki)|Add-ons (wiki)|Free content (wiki)|Debug Log (wiki)|

Kodi Blog Posts
Reply
#3
(2019-09-24, 09:45)sba923 Wrote: But of course this results in lots of stuff being clipped and/or overlapping, see these screenshots.
I cannot see the screenshots. You can also upload them to Imgur.com , or use the i-button in the forum editor menu above.
Reply
#4
(2019-09-24, 10:13)Klojum Wrote:
(2019-09-24, 09:45)sba923 Wrote: But of course this results in lots of stuff being clipped and/or overlapping, see these screenshots.
I cannot see the screenshots. You can also upload them to Imgur.com , or use the i-button in the forum editor menu above.  

How come you can't access a public OneDrive location? Well, never mind.

Here are the screenshots:

Image

Image

Image

Image

Please note that I intentionally hadn't made this an Estouchy-specific thread because Estouchy is just the skin I started from. If Kodi can do this but I have to start from another skin, or even from scratch (oh, no!), then fine by me!
Reply
#5
i have a mod for estuary title bar text
https://forum.kodi.tv/showthread.php?tid...pid2845431
Reply
#6
(2019-09-24, 15:13)the_other_guy Wrote: Soi have a mod for estuary title bar text
https://forum.kodi.tv/showthread.php?tid...pid2845431
sorry for being a skinning rookie, but I have no clue as to what part of Estouchy's Home.xml I would need to modify based on what you did to Estuary's Home.xml...

Can you please help me out with where to start?
Reply
#7
Unfortunately, when you want to display text in a larger point-size, you pretty much have to redo the entire layout of a window or dialog.  I don't know any shortcuts.  In many cases horizontal layout will scroll text that's too long for the available space, but that does nothing for the vertical layout issues that result.  Using a "textbox" control for labels can help in some instances but most text is not displayed using textbox.

I suggest installing addon skins that advertise providing a larger text font display size.

scott s.
.
maintainer of skin  Aeon MQ5 mods for post-Gotham Kodi releases:
Matrix see: Aeon MQ5 Mod Matrix release thread
Nexus see: Aeon MQ5 Mod Nexus release thread
Aeon MQ 5 skin and addon repo 11.1.0
Reply
#8
(2019-09-24, 18:01)scott967 Wrote: Unfortunately, when you want to display text in a larger point-size, you pretty much have to redo the entire layout of a window or dialog.  I don't know any shortcuts.  In many cases horizontal layout will scroll text that's too long for the available space, but that does nothing for the vertical layout issues that result.  Using a "textbox" control for labels can help in some instances but most text is not displayed using textbox.

I suggest installing addon skins that advertise providing a larger text font display size.

scott s.
.

Redoing the layout doesn't scare me... but I need to understand how that's done.

For instance, I don't see anything in the skin's XML that's related to the top-right-corner clock, or even to the "window header".

Can you give me some clues / pointers ?

The doc on the wiki seems a little hard to start with  Confused

But if that's what I have to use, so be it...
Reply
#9
but I need to understand how that's done. s is for skin.estuary
use notepad++ or one witl line number
Home.xml



add this
line 44 </animation>
xml:

<control type="group">
                <control type="image">
                <top>0</top>
                            <left>-130</left>
                            <width>110%</width>
                            <height>130</height>
                            <texture >colors/black.png</texture>
                            </control>
                            
                        <control type="label">
                            <top>0</top>
                            <left>440</left>
                            <width>75%</width>
                            <height>120</height>
                            <label>$VAR[PlaylistLabelVar]</label>
                            <shadowcolor>black</shadowcolor>
                            <font>font60</font>
                            
                        </control>
                        <control type="label">
                            <top>0</top>
                            <left>440</left>
                            <width>75%</width>
                            <height>120</height>
                            <label>$INFO[ListItem.Title]</label>
                            <font>font60</font>
                            </control>
                            <control type="group">
                        
                            <control type="textbox">
                        <top>0</top>
                        <left>55</left>
                                <width>50%</width>
                                <height>220</height>
                                <autoscroll time="3000" delay="7000" repeat="5000">!System.HasActiveModalDialog + Skin.HasSetting(AutoScroll)</autoscroll>
                        <label>$INFO[ListItem.AddonSummary]</label>
                        <shadowcolor>black</shadowcolor>
                            <font>font60</font>
                        </control>
                        </control>
                </control>


line 45 <include>OpenClose_Right</include>

now look for all
<control type="group" id="">
                <visible>String.IsEqual(Container(9000).ListItem.Property(id)
add <top>260</top>

<control type="group" id="5000">
                <top>260</top>
                    <visible>String.IsEqual(Container(9000).ListItem.Property(id),movies)</visible>
Reply
#10
(2019-09-25, 03:28)the_other_guy Wrote: but I need to understand how that's done. s is for skin.estuary
use notepad++ or one witl line number
Home.xml



add this
line 44 </animation>
xml:

<control type="group">
                <control type="image">
                <top>0</top>
                            <left>-130</left>
                            <width>110%</width>
                            <height>130</height>
                            <texture >colors/black.png</texture>
                            </control>
                            
                        <control type="label">
                            <top>0</top>
                            <left>440</left>
                            <width>75%</width>
                            <height>120</height>
                            <label>$VAR[PlaylistLabelVar]</label>
                            <shadowcolor>black</shadowcolor>
                            <font>font60</font>
                            
                        </control>
                        <control type="label">
                            <top>0</top>
                            <left>440</left>
                            <width>75%</width>
                            <height>120</height>
                            <label>$INFO[ListItem.Title]</label>
                            <font>font60</font>
                            </control>
                            <control type="group">
                        
                            <control type="textbox">
                        <top>0</top>
                        <left>55</left>
                                <width>50%</width>
                                <height>220</height>
                                <autoscroll time="3000" delay="7000" repeat="5000">!System.HasActiveModalDialog + Skin.HasSetting(AutoScroll)</autoscroll>
                        <label>$INFO[ListItem.AddonSummary]</label>
                        <shadowcolor>black</shadowcolor>
                            <font>font60</font>
                        </control>
                        </control>
                </control>


line 45 <include>OpenClose_Right</include>

now look for all
<control type="group" id="">
                <visible>String.IsEqual(Container(9000).ListItem.Property(id)
add <top>260</top>

<control type="group" id="5000">
                <top>260</top>
                    <visible>String.IsEqual(Container(9000).ListItem.Property(id),movies)</visible>

I understand this summary of your mod to Estuary, but I'm not sure how to translate that into a similar change to Estouchy.

I would expect that Home.xml contains something that described the "top banner" that contains the clock, so that I would change its height, but I can't find it.

I am looking at the wrong place?
Reply
#11
https://github.com/xbmc/xbmc/blob/4e8f96...e.xml#L208

https://github.com/xbmc/xbmc/blob/4e8f96...#L195-L246
Do not PM or e-mail Team-Kodi members directly asking for support.
Always read the Forum rules, Kodi online-manual, FAQ, Help and Search the forum before posting.
Reply
#12
(2019-09-25, 19:01)ronie Wrote: https://github.com/xbmc/xbmc/blob/4e8f96...e.xml#L208

https://github.com/xbmc/xbmc/blob/4e8f96...#L195-L246

Terrific, thanks a zillion. That is a starting point!

I was looking for "clock", not for "system time"  Confused

Now my next steps are:

- reduce the size of the "main canvas" (whatever the name is) so that it doesn't overlap the header
- change the "tiles" (specifically: the text box therein) in the item browsers so that the text is not truncated -- probably requires changing the # of columns and rows, unless that's calculated dynamically based on the size of the "tiles"; what is the [control] type for those "tiles"?

Image
Reply
#13
it's a panel control
https://kodi.wiki/view/Skinning_Manual#Panel_Container
Do not PM or e-mail Team-Kodi members directly asking for support.
Always read the Forum rules, Kodi online-manual, FAQ, Help and Search the forum before posting.
Reply
#14
(2019-09-25, 21:17)ronie Wrote: it's a panel control
https://kodi.wiki/view/Skinning_Manual#Panel_Container

Thanks again!

In the meantime I've managed to come much closer...

Some glitches left w.r.t. selected / unselected items and the size of the panel:

Image
Reply
#15
It would be nice if someone built a WYSIWYG for skin layout that provided ability to place controls with resize handles so you could move and resize controls within a 1920x1080 or whatever canvas.  As it is there's lots of trial and error, and includes add to the complexity of doing a mod.  Also grouping controls that create a hierarchy and inherited position references.

Also a tip that I use is that setting aligny to center for text is helpful when you have fontsets of different sizes for a skin.  Then you can make a control big enough for your largest fontset and still look half-way decent for a smaller fontset.  You need to be careful of the ascenders and descenders in your font ttf because providing space for them can be an issue in your layout.  If you only are interested in Latin1 maybe not much of a concern.  But if you do need more complex characters generate some test data with a wide range of characters to see how they look in your layout.

scott s.
.
maintainer of skin  Aeon MQ5 mods for post-Gotham Kodi releases:
Matrix see: Aeon MQ5 Mod Matrix release thread
Nexus see: Aeon MQ5 Mod Nexus release thread
Aeon MQ 5 skin and addon repo 11.1.0
Reply

Logout Mark Read Team Forum Stats Members Help
Attempting to create a skin with huge fonts0