HOW-TO:Estuary Modification - Revision history

Ronie: Ronie moved page Estuary Modification to HOW-TO:Estuary Modification without leaving a redirect

2021-01-12T22:46:31Z

Ronie moved page Estuary Modification to HOW-TO:Estuary Modification without leaving a redirect

← Older revision	Revision as of 22:46, 12 January 2021
(No difference)

Ronie at 22:44, 12 January 2021

2021-01-12T22:44:44Z

← Older revision		Revision as of 22:44, 12 January 2021
Line 293:		Line 293:
	* [[Skinning]]		* [[Skinning]]

			[[Category:How-to]]
	[[Category:Skin development]]		[[Category:Skin development]]

Ronie: /* Setting up a developer environment for skinning */

2020-07-13T02:43:07Z

Setting up a developer environment for skinning

← Older revision		Revision as of 02:43, 13 July 2020
Line 19:		Line 19:
	</keymap>		</keymap>

	~~[[File:Keymap_xml.jpg]]~~

	You will need to copy this keymap.xml file into the Kodi userdata folder. In our example, we are using windows so I have copied this file into the C:\Users\user\AppData\Roaming\Kodi\userdata\keymaps folder.		You will need to copy this keymap.xml file into the Kodi userdata folder. In our example, we are using windows so I have copied this file into the C:\Users\user\AppData\Roaming\Kodi\userdata\keymaps folder.

Ronie: /* Setting up a developer environment for skinning */

2020-07-13T02:42:47Z

Setting up a developer environment for skinning

← Older revision		Revision as of 02:42, 13 July 2020
Line 12:		Line 12:
	<global>		<global>
	<keyboard>		<keyboard>
	<F5>~~XBMC.~~ReloadSkin()</F5>		<F5>ReloadSkin()</F5>
	<F7>Notification(Testing 123,Hello world)</F7>		<F7>Notification(Testing 123,Hello world)</F7>
	<F8>Skin.ToggleDebug()</F8>		<F8>Skin.ToggleDebug()</F8>

Klojum: /* Testing your enviroment */

2019-12-14T05:44:21Z

Testing your enviroment

← Older revision		Revision as of 05:44, 14 December 2019
Line 31:		Line 31:
	The following keys will then activate the corresponding action:		The following keys will then activate the corresponding action:

	F5 - Reload skin (''used to see any changes instantly without restarting ~~XBMC~~'')		F5 - Reload skin (''used to see any changes instantly without restarting Kodi'')
	F7 - Activated the KaiDialogToast.xml (''used to display the notification dialog'')		F7 - Activated the KaiDialogToast.xml (''used to display the notification dialog'')
	F8 - Show/Hide the Debug Info (''used to display the currently active windows or dialogs'')		F8 - Show/Hide the Debug Info (''used to display the currently active windows or dialogs'')

Zag: Add New view Tutorial

2018-07-21T14:01:18Z

Add New view Tutorial

← Older revision		Revision as of 14:01, 21 July 2018
Line 214:		Line 214:

	That search brought me to a file called ''Custom_1109_TopBarOverlay.xml''. Just search for the xml control node that contains ''<label>$INFO[System.Time]</label>''. I disabled this and introduced a new control node back in the ''DialogueSeekBar.xml'' file that will show on the actual OSD popup in future. But again it can be moved or resized as required		That search brought me to a file called ''Custom_1109_TopBarOverlay.xml''. Just search for the xml control node that contains ''<label>$INFO[System.Time]</label>''. I disabled this and introduced a new control node back in the ''DialogueSeekBar.xml'' file that will show on the actual OSD popup in future. But again it can be moved or resized as required


			== Adding new views ==

			'''Create the new view include'''

			Lets start by copying an existing view, such as the music shift view. Copy the file 'View_500_Wall.xml' to a new file called 'View_503_WideWall.xml'. We are just choosing the next number along in the view list, you can check this by sorting all the XMLs by name and seeing the names of the views includes as seperate files.

			'''Include the view in the Nav pages'''

			We will need to set the Nav page to actually include the view now. In this example we are setting up a new WideWall view for music so we will need to look at the 'MyMusicNav.xml' file which is the master view for Music.

			[[File:Mymusicnav views.png]]

			As you can see, we have added in a new custom view number here of '503' which corresponds to the name of the include file we just created.

			We also need to include the actual include name in 'MyMusicNav.xml' like so:

			[[File:New view include.png]]

			Lastly we need to actually include the new XML file in our main 'includes.xml' file like so:

			[[File:Include wideWall.png]]

			'''Update the view numbers'''

			Because we have added a view, we now need to update all the references to the view number in the file. In this case we are changing '500' to '503'
			The easiest way to do this is a quick search and replace in the new 'View_503_WideWall.xml' file. So lets change all references of ID '500' to '503'

			'''Update the view label'''

			Lastly we need to update the label of the view so we can see it. Find line 20 in the new 'View_503_WideWall.xml' file and change the translation Label (yes the 31102number is confusing buts its a translation label which in English means "Wall").

			<viewtype label="31102">icon</viewtype>

			to

			<viewtype label="WideWall">icon</viewtype>


			Thats it! Congrats, you should now have a new view in Estuary for your WideWall. You can from here start changing where this view is used or parts of the actual view to you liking.

			In this example we have simply changed the Thumbnail to a Landscape graphic, a very simple change but with a nice dramatic effect. We also removed the label under the thumb to make it look streamlined.

			[[File:WideWall Example small.jpg]]

Zag: instructions for changing the main menu

2018-03-20T20:01:34Z

instructions for changing the main menu

← Older revision		Revision as of 20:01, 20 March 2018
Line 145:		Line 145:

	Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.		Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.


			== Renaming and Reordering Main Menu Items ==

			It is possible to do a few modifications on the main menu if you don't mind editing the Skin files.

			The file you need to look at is ''\XML\home.xml'' around where the <control type="fixedlist" id="9000"> starts. If we scan down about to around line 879 you can see the start of the menu items. Estuary starts with movies but as you can see there are different controls for different menu items. The movies control has a label of <label>$LOCALIZE[342]</label> which means that it is translated from somewhere else. If you just wanted to rename movies to something like "My Movies" you could replace that line with <label>My Movies</label>. Of course if you do this, you are going to loose any other translations but you should get the idea.

			It is also possible to re-order some menu items. In my case I want Live TV to show at the top as I use it most. All we need to do is move the entire <item></item> node up before the movie <item></item> node.

			[[File:Re-order_and_move_Estuary.jpg‎]]

			[[File:Re-order_and_move_Estuary_code.jpg‎]]

Zag: Update for editing the OSD in Estuary

2018-01-02T14:41:24Z

Update for editing the OSD in Estuary

← Older revision		Revision as of 14:41, 2 January 2018
Line 146:		Line 146:
	Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.		Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.



			== Editing the Video OSD ==

			One thing you might want to look at is modifying the Video OSD.

			This requires looking at a number of files including:


			'''OSD Background'''

			The OSD background is pretty easy to change. You can find the image in the ''\media\dialogs'' folder of your skin. If you want to create a new one, I would advise making it the width of a 1080p display with some kind of transparency. Make sure you save it as a PNG to preserve the transparency and a dark colour so it can justify against the video background.

			The actual XML file to edit here (and for most OSD changes) is the ''DialogueSeekBar.xml'' file. Jump to this control node to find the OSD background search for ''dialog-bg.png'' as below:

			<texture>dialogs/dialog-bg.png</texture>

			You can change the width here to something like 90% so that the OSD does not take up the whole screen or resposition it with the ''top'' XML tag.


			'''Video and Audio Icons'''

			We can continue to edit the ''DialogueSeekBar.xml'' file to find the audio and video flag icons. You may wish to reposition these or even create a new control node for them individually as currently they are all grouped together.

			<param name="texture" value="$INFO[VideoPlayer.AudioChannels,flags/audiochannel/,.png]" />

			You can again change the position of the icons or the size inside the control node.



			'''Progress Bar'''

			The progress bar is a little tricky as Estuary has a number of places where it can show, but we can start to edit it in the ''DialogueSeekBar.xml'' file again. Just do a search for:

			<info>PVR.EpgEventProgress</info>

			Changing the width and height is probably what you want but we can change the color or even the thickness too.



			'''Top screen left'''

			Finding out where the top bar strings are located was a lot more tricky but hopefully this article will save others the time in finding it.

			The top left hand TV channel and program name are found in the ''variables.xml'' and search for the ''NowPlayingBreadcrumbsVar'' control node.

			You can either comment this out or change it from here.



			'''Top screen OSD right'''

			The time and video duration is also quite difficult to find. The way I found it in the end (and this trick may help you for other searches) was to use notepad++ search by directory feature to look for the localisation string ''31080'' which is the english string ''Ends at'' which shows up in this location.

			That search brought me to a file called ''Custom_1109_TopBarOverlay.xml''. Just search for the xml control node that contains ''<label>$INFO[System.Time]</label>''. I disabled this and introduced a new control node back in the ''DialogueSeekBar.xml'' file that will show on the actual OSD popup in future. But again it can be moved or resized as required

Zag: /* More advanced edits */

2017-11-08T22:27:47Z

More advanced edits

← Older revision		Revision as of 22:27, 8 November 2017
Line 157:		Line 157:
	[[File:Estuary_rating_image_control.jpg]]		[[File:Estuary_rating_image_control.jpg]]


			Notice we are now adding an image control, with a texture that is calling a specific filename. In this case it is a star rating of 1-10 with half stars to make it shorter.

	And we end up with something like this!		And we end up with something like this!
Line 173:		Line 175:

	All done!		All done!


	== See also ==		== See also ==

Zag at 22:26, 8 November 2017

2017-11-08T22:26:24Z

← Older revision		Revision as of 22:26, 8 November 2017
Line 145:		Line 145:

	Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.		Editing skins is easy, logical and quick once you get used to it. Good luck and let us know how you get on.



			== More advanced edits ==

			Just to complete this guide, lets try and add some graphical stars to the widelist view, while also adding the focused stars.

			Lets change the code we added earlier to an image control


			[[File:Estuary_rating_image_control.jpg]]


			And we end up with something like this!


			[[File:Estuary_rating_mod4.jpg]]


			Last but not least, we need to add a new control for when the song is in focus by the user. This will ensure that the stars do not disappear when the user moves over each song with the selection bar.


			[[File:Estuary_rating_image_control.jpg]]


			So all we have done is copy the same code again and put it this time in the control, that is visible when "HasFocus" is selected.

			All done!


	== See also ==		== See also ==