HOW-TO:Simplify the seekbar in Confluence: Difference between revisions
No edit summary |
mNo edit summary |
||
(8 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
This tutorial will show how to '''simplify the seekbar''', i.e. the GUI you get when pausing and seeking. This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/DialogSeekBar.xml DialogSeekBar.xml]. IMO you don't need all that info | {{mininav| [[Skinning]] | [[Confluence]] }} | ||
This tutorial will show how to '''simplify the seekbar''' (aka PAUSED dialog), i.e. the GUI you get when pausing and seeking. This is achieved by editing [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/DialogSeekBar.xml DialogSeekBar.xml]. IMO you don't need all that info, you can use the ''Info screen'' {{keypress|I}} or ''OSD'' {{keypress|M}} for that. Also, knowing how much time's passed or how many chapters there are left can spoil the experience, as you with that info maybe can guess how it'll end. | |||
<gallery widths=500px heights=90px> | <gallery widths=500px heights=90px> | ||
Line 6: | Line 8: | ||
File:Seekbarmodaligned.png|MOD - button and text aligned | File:Seekbarmodaligned.png|MOD - button and text aligned | ||
</gallery> | </gallery> | ||
==Remove the small rectangle and its contents== | ==Remove the small rectangle, the background and its contents== | ||
[[File:SeekmodmomentA.png]]<br/><br/> | [[File:SeekmodmomentA.png]]<br/><br/> | ||
Open the file ''DialogSeekBar.xml''. Find the following code and comment it out. | Open the file ''DialogSeekBar.xml''. Find the following code and comment it out. | ||
Line 127: | Line 129: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br /> | <br /> | ||
==Create a new smaller rectangle | ==Create a new smaller rectangle and background== | ||
[[File:SeekmodmomentD.png]]<br/><br/> | [[File:SeekmodmomentD.png]]<br/><br/> | ||
Find the following code: | Find the following code: | ||
Line 148: | Line 150: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br /> | <br /> | ||
==Move the | ==Move the button== | ||
Find the following code: | Find the following code: | ||
<syntaxhighlight lang="xml"> | <syntaxhighlight lang="xml"> | ||
Line 164: | Line 166: | ||
Change:<br /> | Change:<br /> | ||
'''<left>''260''</left>''' to '''<left>''231''</left>'''<br /> | '''<left>''260''</left>''' to '''<left>''231''</left>'''<br /> | ||
This will ''center'' the | This will ''center'' the button in the rectangle.<br/> | ||
[[File:SeekmodmomentE1.png]]<br/><br/> | [[File:SeekmodmomentE1.png]]<br/><br/> | ||
If you want the text "Playing/Paused/Seeking" ''aligned'' with the | If you want the text "Playing/Paused/Seeking Xs" ''aligned'' with the button, change:<br /> | ||
'''<left>''260''</left>''' to '''<left>''218''</left>'''<br/> | '''<left>''260''</left>''' to '''<left>''218''</left>'''<br/> | ||
[[File:SeekmodmomentE2.png]] | [[File:SeekmodmomentE2.png]] | ||
<br /> | <br /> | ||
<br /> | <br /> | ||
==Move "Playing/Paused/Seeking" into | |||
==Move "Playing/Paused/Seeking Xs" into the new rectangle== | |||
[[File:SeekmodmomentF.png]]<br/><br/> | [[File:SeekmodmomentF.png]]<br/><br/> | ||
Find the following code: | Find the following code: | ||
Line 191: | Line 194: | ||
'''<left>''20''</left>''' to '''<left>''230''</left>'''<br /> | '''<left>''20''</left>''' to '''<left>''230''</left>'''<br /> | ||
'''<top>''7''</top>''' to '''<top>''60''</top>''' | '''<top>''7''</top>''' to '''<top>''60''</top>''' | ||
[[Category:How-to]] | |||
[[Category:Skin_development]] |
Latest revision as of 21:29, 29 August 2020
Skinning | Confluence | HOW-TO:Simplify the seekbar in Confluence |
This tutorial will show how to simplify the seekbar (aka PAUSED dialog), i.e. the GUI you get when pausing and seeking. This is achieved by editing DialogSeekBar.xml. IMO you don't need all that info, you can use the Info screen I or OSD M for that. Also, knowing how much time's passed or how many chapters there are left can spoil the experience, as you with that info maybe can guess how it'll end.
Remove the small rectangle, the background and its contents
Open the file DialogSeekBar.xml. Find the following code and comment it out.
<control type="group"> <visible>player.chaptercount + Window.IsVisible(FullScreenVideo)</visible> <left>705r</left> <top>-6</top> <include>VisibleFadeEffect</include> <control type="image"> <left>0</left> <top>0</top> <width>150</width> <height>70</height> <colordiffuse>EEFFFFFF</colordiffuse> <texture border="12">OverlayDialogBackground.png</texture> </control> <control type="label" id="1"> <description>Chapter Pos No</description> <left>20</left> <top>10</top> <width>110</width> <height>20</height> <align>center</align> <aligny>center</aligny> <font>font12_title</font> <textcolor>blue</textcolor> <label>$LOCALIZE[21396]</label> <visible>player.chaptercount</visible> </control> <control type="label" id="1"> <description>Chapter Pos No</description> <left>20</left> <top>30</top> <width>110</width> <height>20</height> <align>center</align> <aligny>center</aligny> <font>font13_title</font> <textcolor>grey2</textcolor> <label>$INFO[player.chapter]$INFO[player.chaptercount, / ]</label> <visible>player.chaptercount</visible> </control> </control>
Remove the big rectangle and the background
Find the following code and comment it out.
<control type="image"> <left>0</left> <top>0</top> <width>370</width> <height>70</height> <colordiffuse>EEFFFFFF</colordiffuse> <texture border="12">OverlayDialogBackground.png</texture> </control>
Remove elapsed time, seek time, progressbar for the cache, progressbar and the seek slider
Find the following code and comment it out.
<control type="label"> <description>Elapsed Time Label</description> <left>20</left> <top>23</top> <width>240</width> <height>20</height> <font>font13_title</font> <textcolor>white</textcolor> <align>left</align> <aligny>center</aligny> <label>$INFO[Player.Time] - $INFO[Player.Duration]</label> <visible>!Player.Seeking</visible> </control> <control type="label"> <description>Seek Time Label</description> <left>20</left> <top>23</top> <width>240</width> <height>20</height> <font>font13_title</font> <textcolor>white</textcolor> <align>left</align> <aligny>center</aligny> <label>$INFO[Player.SeekTime] - $INFO[Player.Duration]</label> <visible>Player.Seeking</visible> </control> <control type="progress"> <description>ProgressbarCache</description> <left>20</left> <top>45</top> <width>240</width> <height>15</height> <info>Player.ProgressCache</info> <midtexture border="6,0,6,0">OSDProgressMidLight.png</midtexture> <visible>true</visible> </control> <control type="progress" id="23"> <description>Progressbar</description> <left>20</left> <top>45</top> <width>240</width> <height>15</height> <info>Player.Progress</info> <visible>true</visible> </control> <control type="slider" id="401"> <description>Seek Slider</description> <left>20</left> <top>42</top> <width>240</width> <height>12</height> <texturesliderbar>seekslider.png</texturesliderbar> <textureslidernib>osd_slider_nib.png</textureslidernib> <textureslidernibfocus>osd_slider_nib.png</textureslidernibfocus> <visible>Player.Seeking</visible> </control>
Create a new smaller rectangle and background
<control type="group"> <left>560r</left> <top>-6</top>
Paste the following code after it:
<control type="image"> <left>210</left> <top>0</top> <width>140</width> <height>95</height> <colordiffuse>EEFFFFFF</colordiffuse> <texture border="12">OverlayDialogBackground.png</texture> </control>
Move the button
Find the following code:
<left>260</left> <top>10</top> <control type="image"> <left>10</left> <top>0</top> <width>80</width> <height>50</height> <texture>OSDSeekFrame.png</texture> </control>
Change:
<left>260</left> to <left>231</left>
This will center the button in the rectangle.
If you want the text "Playing/Paused/Seeking Xs" aligned with the button, change:
<left>260</left> to <left>218</left>
Move "Playing/Paused/Seeking Xs" into the new rectangle
<control type="label"> <description>Seekbar Label</description> <left>20</left> <top>7</top> <width>240</width> <height>20</height> <align>left</align> <aligny>center</aligny> <font>font10_title</font> <textcolor>blue</textcolor> <label>$VAR[SeekLabel]</label> </control>
Change:
<left>20</left> to <left>230</left>
<top>7</top> to <top>60</top>