HOW-TO:Simplify the seekbar in Confluence: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(22 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 when e.g. pausing, I 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.
{{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>
File:Seekbarorg.png|Original seekbar
File:Seekbarorg.png|Original seekbar
File:Simplifiedseekbar.png|MOD
File:Seekbarmodcentered.png|MOD - button centered
File:Simplifiedseekbar2.png|MOD
File:Seekbarmodaligned.png|MOD - button and text aligned
</gallery>
</gallery>
 
==Remove the small rectangle, the background and its contents==
Open the file ''DialogSeekBar.xml''
[[File:SeekmodmomentA.png]]<br/><br/>
 
Open the file ''DialogSeekBar.xml''. Find the following code and comment it out.  
A. Find this code and comment it out. This will remove "chapter", the numbers and its border.
<syntaxhighlight lang="xml"><control type="group">
<syntaxhighlight lang="xml"><control type="group">
<visible>player.chaptercount + Window.IsVisible(FullScreenVideo)</visible>
<visible>player.chaptercount + Window.IsVisible(FullScreenVideo)</visible>
Line 52: Line 53:
</syntaxhighlight>
</syntaxhighlight>
<br />
<br />
B. Find this code and comment it out. This will remove the border around the seekbar and the time.
==Remove the big rectangle and the background==
[[File:SeekmodmomentB.png]]<br/><br/>
Find the following code and comment it out.
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<control type="image">
<control type="image">
Line 64: Line 67:
</syntaxhighlight>
</syntaxhighlight>
<br />
<br />
C. Find this code and comment it out. This will remove elapsed time, seek time, progressbar for the cache, progressbar and seek slider.
==Remove elapsed time, seek time, progressbar for the cache, progressbar and the seek slider==
[[File:SeekmodmomentC.png]]<br/><br/>
Find the following code and comment it out.
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<control type="label">
<control type="label">
Line 124: Line 129:
</syntaxhighlight>
</syntaxhighlight>
<br />
<br />
D. Find the following code:
==Create a new smaller rectangle and background==
[[File:SeekmodmomentD.png]]<br/><br/>
Find the following code:
<syntaxhighlight lang="xml">
<control type="group">
    <left>560r</left>
    <top>-6</top>
</syntaxhighlight>
 
Paste the following code after it:
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>
<br />
==Move the button==
Find the following code:
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>
 
Change:<br />
'''<left>''260''</left>''' to '''<left>''231''</left>'''<br />
This will ''center'' the button in the rectangle.<br/>
[[File:SeekmodmomentE1.png]]<br/><br/>
If you want the text "Playing/Paused/Seeking Xs" ''aligned'' with the button, change:<br />
'''<left>''260''</left>''' to '''<left>''218''</left>'''<br/>
[[File:SeekmodmomentE2.png]]
<br />
<br />
 
==Move "Playing/Paused/Seeking Xs" into the new rectangle==
[[File:SeekmodmomentF.png]]<br/><br/>
Find the following code:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<control type="label">
<control type="label">
<description>Seekbar Label</description>
    <description>Seekbar Label</description>
<left>20</left>
    <left>20</left>
<top>7</top>
    <top>7</top>
<width>240</width>
    <width>240</width>
<height>20</height>
    <height>20</height>
<align>left</align>
    <align>left</align>
<aligny>center</aligny>
    <aligny>center</aligny>
<font>font10_title</font>
    <font>font10_title</font>
<textcolor>blue</textcolor>
    <textcolor>blue</textcolor>
<label>$VAR[SeekLabel]</label>
    <label>$VAR[SeekLabel]</label>
</control>
</control>
</syntaxhighlight>
</syntaxhighlight>
Change:<br />
Change:<br />
'''<left>''20''</left>''' to '''<left>''280''</left>'''<br />
'''<left>''20''</left>''' to '''<left>''230''</left>'''<br />
'''<top>''7''</top>''' to '''<top>''60''</top>'''<br />
'''<top>''7''</top>''' to '''<top>''60''</top>'''
This will move "Paused, Playing, Seeking X" below the play/pause button.
 
 
[[Category:How-to]]
[[Category:Skin_development]]

Latest revision as of 21:29, 29 August 2020

Home icon grey.png   ▶ 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

SeekmodmomentA.png

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

SeekmodmomentB.png

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

SeekmodmomentC.png

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

SeekmodmomentD.png

Find the following code:

<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.
SeekmodmomentE1.png

If you want the text "Playing/Paused/Seeking Xs" aligned with the button, change:
<left>260</left> to <left>218</left>
SeekmodmomentE2.png

Move "Playing/Paused/Seeking Xs" into the new rectangle

SeekmodmomentF.png

Find the following code:

<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>