Tak po čase jsme se opět vrátil k opakovaně upravované stránce zobrazení kanálů. Hlavně proto, že zobrazení v rozměru plochy 2560x1440 nabízí přeci jen větší možnosti, takže se mi zobrazení kanálů ve viewtype Banner nakonec na stránku podařilo "nacpat" v etřech sloupcích. To "nacpat" je na místě, protože výhám, jestli takové zobrazení mů vůbec smysl.
Pro textovou část používám vlastní font:
Definice je v MyPVRChannels.xml, ve formě panelu s id=54:
pro úpravu side panelu je ale třeba také sáhnout do Includes_MediaMenu.xml a v definici include PVRSideBar nahradit radiobutton s id=6060 button (pokud už ale používáte zobrazení Zeď, tak to už dělat nemusíte):
no a poslední úprava s etýká Variables.xml, kde byste měli doplnit definici proměnné MyPVRChannelsViewVar (opět, pokud již používáte zeď, takbyste tam tu proměnnou mít měli):
No a vypadá to pak nějak takto:
Berte na vědomí, že je to první pokus, který jsme slepil dnes ráno při snídani. Momentálně předělávám celou koncepci Easy úprav a tak jsem se k tomu dostal při přesouvání upraveného kódu víceméně náhodou. Výsledek také není bůhví jaký, čitelnost focused položky je mizerná, budu se nad tím ještě muset zamyslet. Ona snaha, nacpat do malého porstoru co nejvíce informací také nemusí být úplně tou správnou cestou...
Doporučení skinnerům (1)...
Mé úpravy skinů jsou spíše náhodné než koncepční a nemám ambice mít vlastní skin. Jde mi spíše o drobné úpravy a vylepšení, případně doplnění zajímavých "must to have" funkcí. Jedinou z výjimek z tohto pravidla bylo vytvoření "velké modifikace" Estuary Stream Cinema, které ale poměrně brzy (a po různých peripetiích) vzalo za své. Nyní se k tomu nenapádně vracím. Je to jednak v souvislosti s tím, že si chci ve vlastní modifikaci (které říkám Easy) při přechodu na Nexus udělat pořádek, a pak také to, že jsem se nakonec nechal přemluvit a připravuji velmi jednoduchý skin pro Stream Cinema Cinema. Pokud se mi to podaří, uložím ho do zdejšího repozitáře a budu se ho snažit udržovat...
Snad mi to vydrží...
Práce tedy jak na kostele a abych si ji ulehčil a do budocna údržbu skinu co nejvíce zjednodušil, rozhodl jsme se, že do toho hrábnu pořádně. Dospěl jsme tak nakonec k filosofii řešení takové jednoduché modifikace, u které předpokládám delší dobu trvání, která je myslím pro amatérské skinnery, ke kterým se řadím i já, podle mne zajímavá. Dá se shrnout do několika jednoduchých zásad:
Je toho ještě více, o čem by se mělo psát, ale na to si asi každý skinner postupně přijde sám. No a pokud ne, budu tu čas ood času na takové zásady a doporučení upozorňovat...
Pro textovou část používám vlastní font:
Kód:
<font> <!-- EASY+ -->
<name>font_flagL</name>
<filename>NotoSans-Regular.ttf</filename>
<size>16</size>
<style>lighten</style>
</font>Definice je v MyPVRChannels.xml, ve formě panelu s id=54:
Kód:
<control type="panel" id="54"> <!-- EASY+ -->
<left>-40</left>
<top>110</top>
<right>0</right>
<bottom>0</bottom>
<onleft>9000</onleft>
<onright>74</onright>
<onup>52</onup>
<ondown>52</ondown>
<pagecontrol>74</pagecontrol>
<itemlayout width="835" height="256">
<control type="group">
<left>70</left>
<control type="image">
<width>830</width>
<height>255</height>
<texture>dialogs/dialog-bg-nobo.png</texture>
<bordertexture border="21">overlays/shadow.png</bordertexture>
<bordersize>20</bordersize>
</control>
<control type="image">
<top>32</top>
<left>18</left>
<width>184</width>
<height>150</height>
<texture fallback="icons/sidemenu/radio.png">$INFO[ListItem.Icon]</texture>
<aspectratio>keep</aspectratio>
</control>
<control type="label">
<left>32</left>
<top>178</top>
<width>164</width>
<height>52</height>
<wrapmultiline>true</wrapmultiline>
<label>$INFO[ListItem.ChannelNumberLabel,[B],[/B]]$INFO[ListItem.Label, [B],[/B]]</label>
<font>font10</font>
<shadowcolor>text_shadow</shadowcolor>
<align>left</align>
<aligny>top</aligny>
</control>
<control type="label">
<left>32</left>
<top>202</top>
<width>760</width>
<height>49</height>
<!-- <label>$INFO[ListItem.Title]</label> -->
<label>$INFO[ListItem.Title] [I][COLOR grey]$VAR[SeasonEpisodeLabel][/COLOR]$INFO[ListItem.EpisodeName,[COLOR white],[/COLOR]][/I]</label>
<font>font10</font>
<shadowcolor>text_shadow</shadowcolor>
<align>left</align>
<aligny>top</aligny>
</control>
<control type="textbox">
<left>200</left>
<top>28</top>
<width>600</width>
<height>180</height>
<align>justify</align>
<label>$INFO[ListItem.Date,[COLOR grey]$LOCALIZE[552]:[/COLOR] , ]$INFO[ListItem.EndTime,- , ]$INFO[ListItem.Duration,[COLOR grey]$LOCALIZE[180]:[/COLOR] , ][CR]$VAR[RecordingSizeLabel]$VAR[PremieredLabel]$INFO[ListItem.Rating,[COLOR grey]$LOCALIZE[563]:[/COLOR] ]$VAR[ExpirationDateTimeLabel]$INFO[ListItem.Genre,[COLOR grey]$LOCALIZE[515]:[/COLOR] ,[CR]]$INFO[ListItem.Writer,[COLOR grey]$LOCALIZE[20417]:[/COLOR] ,[CR]]$INFO[ListItem.Director,[COLOR grey]$LOCALIZE[20339]:[/COLOR] ,[CR]]$INFO[ListItem.Cast,[COLOR grey]$LOCALIZE[206]:[/COLOR] ,[CR]]$INFO[ListItem.Plot]</label>
<font>font_flagL</font>
<autoscroll time="3000" delay="4000" repeat="5000">Skin.HasSetting(AutoScroll)</autoscroll>
</control>
<control type="image">
<!-- <left>195</left> -->
<right>-40</right>
<top>23</top>
<width>24</width>
<height>24</height>
<texture>$VAR[WallWatchedIconVar]</texture>
</control>
<control type="progress">
<left>20</left>
<top>215</top>
<width>800</width>
<height>1</height>
<texturebg></texturebg>
<midtexture colordiffuse="button_focus" border="3">progress/texturebg_alt_white.png</midtexture>
<info>ListItem.Progress</info>
<visible>ListItem.HasEpg</visible>
</control>
</control>
</itemlayout>
<focusedlayout width="835" height="256">
<control type="group">
<depth>DepthContentPopout</depth>
<left>70</left>
<animation type="Focus">
<effect type="zoom" start="100" end="105" time="200" tween="sine" easing="inout" center="415,100" />
</animation>
<animation type="Unfocus">
<effect type="zoom" start="105" end="100" time="200" tween="sine" easing="inout" center="415,100" />
</animation>
<control type="image">
<width>830</width>
<height>255</height>
<texture>dialogs/dialog-bg-nobo.png</texture>
<bordertexture border="21">overlays/shadow.png</bordertexture>
<bordersize>20</bordersize>
</control>
<control type="image">
<width>830</width>
<height>255</height>
<texture colordiffuse="button_focus">colors/grey.png</texture>
<bordersize>20</bordersize>
<include>Animation_FocusTextureFade</include>
</control>
<control type="image">
<top>32</top>
<left>18</left>
<width>184</width>
<height>150</height>
<texture fallback="icons/sidemenu/radio.png">$INFO[ListItem.Icon]</texture>
<aspectratio>keep</aspectratio>
</control>
<control type="label">
<left>32</left>
<top>178</top>
<width>164</width>
<height>52</height>
<wrapmultiline>true</wrapmultiline>
<label>$INFO[ListItem.ChannelNumberLabel,[B],[/B]]$INFO[ListItem.Label, [B],[/B]]</label>
<font>font10</font>
<shadowcolor>text_shadow</shadowcolor>
<align>left</align>
<aligny>top</aligny>
</control>
<control type="label">
<left>32</left>
<top>202</top>
<width>760</width>
<height>49</height>
<!-- <label>$INFO[ListItem.Title]</label> -->
<label>$INFO[ListItem.Title] [I][COLOR grey]$VAR[SeasonEpisodeLabel][/COLOR]$INFO[ListItem.EpisodeName,[COLOR white],[/COLOR]][/I]</label>
<font>font10</font>
<shadowcolor>text_shadow</shadowcolor>
<align>left</align>
<aligny>top</aligny>
</control>
<control type="textbox">
<left>200</left>
<top>28</top>
<width>600</width>
<height>180</height>
<align>justify</align>
<label>$INFO[ListItem.Date,[COLOR grey]$LOCALIZE[552]:[/COLOR] , ]$INFO[ListItem.EndTime,- , ]$INFO[ListItem.Duration,[COLOR grey]$LOCALIZE[180]:[/COLOR] , ][CR]$VAR[RecordingSizeLabel]$VAR[PremieredLabel]$INFO[ListItem.Rating,[COLOR grey]$LOCALIZE[563]:[/COLOR] ]$VAR[ExpirationDateTimeLabel]$INFO[ListItem.Genre,[COLOR grey]$LOCALIZE[515]:[/COLOR] ,[CR]]$INFO[ListItem.Writer,[COLOR grey]$LOCALIZE[20417]:[/COLOR] ,[CR]]$INFO[ListItem.Director,[COLOR grey]$LOCALIZE[20339]:[/COLOR] ,[CR]]$INFO[ListItem.Cast,[COLOR grey]$LOCALIZE[206]:[/COLOR] ,[CR]]$INFO[ListItem.Plot]</label>
<font>font_flagL</font>
<autoscroll time="3000" delay="4000" repeat="5000">Skin.HasSetting(AutoScroll)</autoscroll>
</control>
<control type="image">
<right>-10</right>
<top>23</top>
<width>24</width>
<height>24</height>
<texture>$VAR[WallWatchedIconVar]</texture>
</control>
<control type="progress">
<left>20</left>
<top>215</top>
<width>800</width>
<height>1</height>
<texturebg></texturebg>
<midtexture colordiffuse="button_focus" border="3">progress/texturebg_alt_white.png</midtexture>
<info>ListItem.Progress</info>
<visible>ListItem.HasEpg</visible>
</control>
</control>
</focusedlayout>
</control>
</control>pro úpravu side panelu je ale třeba také sáhnout do Includes_MediaMenu.xml a v definici include PVRSideBar nahradit radiobutton s id=6060 button (pokud už ale používáte zobrazení Zeď, tak to už dělat nemusíte):
Kód:
<!-- <control type="radiobutton" id="6060"> -->
<!-- <include>MediaMenuItemsCommon</include> -->
<!-- <label>$LOCALIZE[31127]</label> -->
<!-- <selected>Control.IsVisible(50)</selected> -->
<!-- <onclick>Container.NextViewMode</onclick> -->
<!-- <visible>Window.IsActive(MyPVRChannels.xml)</visible> -->
<!-- </control> -->
<control type="button" id="6060"> <!-- EASY + -->
<include>MediaMenuItemsCommon</include>
<label>$LOCALIZE[24140]</label>
<label2>[B]$VAR[MyPVRChannelsViewVar][/B]</label2>
<onclick>Container.NextViewMode</onclick>
<visible>Window.IsActive(MyPVRChannels.xml)</visible>
</control>no a poslední úprava s etýká Variables.xml, kde byste měli doplnit definici proměnné MyPVRChannelsViewVar (opět, pokud již používáte zeď, takbyste tam tu proměnnou mít měli):
Kód:
<variable name="MyPVRChannelsViewVar"> <!-- SideBar PVRChannel for advanced type of view selection (added wall type) -->
<value condition="Control.IsVisible(50)">$LOCALIZE[536]</value>
<value condition="Control.IsVisible(51)">$LOCALIZE[535]</value>
<value condition="Control.IsVisible(52)">$LOCALIZE[31102]</value>
<value condition="Control.IsVisible(53)">$LOCALIZE[31102]</value>
<value condition="Control.IsVisible(54)">$LOCALIZE[20020]</value>
</variable>No a vypadá to pak nějak takto:
Berte na vědomí, že je to první pokus, který jsme slepil dnes ráno při snídani. Momentálně předělávám celou koncepci Easy úprav a tak jsem se k tomu dostal při přesouvání upraveného kódu víceméně náhodou. Výsledek také není bůhví jaký, čitelnost focused položky je mizerná, budu se nad tím ještě muset zamyslet. Ona snaha, nacpat do malého porstoru co nejvíce informací také nemusí být úplně tou správnou cestou...
Doporučení skinnerům (1)...
Mé úpravy skinů jsou spíše náhodné než koncepční a nemám ambice mít vlastní skin. Jde mi spíše o drobné úpravy a vylepšení, případně doplnění zajímavých "must to have" funkcí. Jedinou z výjimek z tohto pravidla bylo vytvoření "velké modifikace" Estuary Stream Cinema, které ale poměrně brzy (a po různých peripetiích) vzalo za své. Nyní se k tomu nenapádně vracím. Je to jednak v souvislosti s tím, že si chci ve vlastní modifikaci (které říkám Easy) při přechodu na Nexus udělat pořádek, a pak také to, že jsem se nakonec nechal přemluvit a připravuji velmi jednoduchý skin pro Stream Cinema Cinema. Pokud se mi to podaří, uložím ho do zdejšího repozitáře a budu se ho snažit udržovat...
Snad mi to vydrží...Práce tedy jak na kostele a abych si ji ulehčil a do budocna údržbu skinu co nejvíce zjednodušil, rozhodl jsme se, že do toho hrábnu pořádně. Dospěl jsme tak nakonec k filosofii řešení takové jednoduché modifikace, u které předpokládám delší dobu trvání, která je myslím pro amatérské skinnery, ke kterým se řadím i já, podle mne zajímavá. Dá se shrnout do několika jednoduchých zásad:
- Minimalizovat rozsah kódu, který vkládám/měním v originálních souborech skinu, ze kterého modifikace vychází. Samozřejmě kromě výjimek, u kterých to z logiky věci a toho, jak jsou změny provázané v původním kódu. Jinak řečeno, pokud chci něco do kódu doplnit a pokud to jenom trochu jde a má t v dané funkci logiku, vytvořím definici include v nějakém vhodně pojmenovaném souboru, např. Easy_*.xml a z originálního souboru to include "zavolám".
- Vytvořit si jednoduchý systém identifikace nově vytvořených definičních souborů - já jsem si všechny takové soubory opatřil prefixem Easy_. Jsou v adresáři pěkně pohormadě, mají označení, které je jednozančně přiřazuje k funkcím, které se v nich řeší. A při přechodu na novou major verzi je pak velmi jendoduché a rychlé nový skin modifikovat.
- Definiční soubory orientovat "objektově" (to je samozřejmě eufemismus), lepší by bylo označit to "funkčně". Mám tím namysli, aby všechno to, co se týká dané úpravy v dané funkci bylo v jednom souboru, včetně všech includes, definic animations, constant, expression, variables. Tedy ne tak, jak je to například v originální Estuary, kde je např. jeden obří soubor Variables.xml a tak je vše...
- Všechny úpravy v originálních souborech komentovat. Já používám komentáře označující změnu v kódu <!-- EASY* --> nebo novou část kódu <!-- EASY+ -->.
- Vlastní obrazové soubory, které by se potenciálně mohly stát součástí Textures.xbt, ukládat strukturovaně a právě podle zásad, které v Textures používá originální skin. Umožní to, pokud se pro to rozhodnete, po čase ty nové soubory do textues jendoduše vložit a centrálně pak (ve všech xml souborech) provést změnu v adresaci těchto souborů. Já to např. dělám tak, že takové soubory ukládám do adresáře ve skinu a v definičních souborech je adresuji jako special://skin/extras/textures/... No a pokud se jednou za čas rozhodnu o vložení těchto souborů do Textures.xbt, tak v Notepad++ projedu všechny xml a text special://skin/extras/textures/ prostě vyhodím.
- Po zkušenostech z úprav skinu pro použití v jiném, než nativním rozměru FHD doporučuji na klíčových místech maximalizovat použití rozměrů a pozic relativně (v % nebo kombnací <left> a <right> místo <left> a <width>) a tam, kde to nejde, použít pro definici absolutní pozice definici constant. Estuary je sice flexibilní skin, takže já už ho na obrazovkách, které to umožní, zobrazuji ve 2560x1440, ale přeci jen je v jeho definicích několik děr, které je třeba explicitně ošetřit. Tak proč si do budoucna při vlastních úpravách nekomplikovat situaci ještě více, než je třeba...
Je toho ještě více, o čem by se mělo psát, ale na to si asi každý skinner postupně přijde sám. No a pokud ne, budu tu čas ood času na takové zásady a doporučení upozorňovat...