Estuary - Kodi's new skin

Geeba · Post by **Geeba** » Wed Mar 09, 2016 12:03 pm

http://forum.kodi.tv/showthread.php?tid=262144

Looks good - I imagine a step to far for the humble xbox?

Post by **Dan Dar3** » Thu Mar 10, 2016 10:15 pm

Plus this post on their blog:
https://kodi.tv/a-brand-new-look-for-fu ... -versions/

Even if the whole thing will not be available as it is, still I can see parts that can be ported over I'm sure to create a subset skin for XBMC4Xbox as it happend with Confluence Lite, it just needs someone with some skinning experience to get interested in spending some time on it.

Post by **Dom DXecutioner** » Fri Mar 11, 2016 12:23 am

With the vast amount of changes to the skinning engine, i think it would be easier, not to mention faster, to build it from scratch.

byron · Post by **byron** » Sat Mar 12, 2016 8:38 am

Has anyone looked at the code? While not many have reported back on my Transparency! port, I feel it was accurate and succesful but that was from 2014 and Dom is right in that many changes in the skinning engine have been made upline since then. Having said that, I wouldn't mind stripping it down to what we can work with to see if it's something worth working on...but let's be clear here, are we saying that we want to make this our default skin if it can be done? Perhaps it's wothwhile, and perhaps it might also give us a chance to bump our skinning engine. Then again, maybe a pipe dream

NOTTHESAME · Post by **NOTTHESAME** » Mon Mar 14, 2016 7:45 am

hey guys, well ill give a try and a start I do have some time on my hands and also think I can do a few things to get this going if your interested, I think like to do this, but not when I run into a issue hahaha!!!

now I think posx and posy are top and left, from the last skin I was working on retouch which I did have trouble with and didn't finish and might do it this year, I did get stuck ill try a few things.

I got the textures uncompressed, I don't need emcompressed and also will need to do a few changes.

the part that's gonna be a pain in the neck is the top and left to width and height, the code also has a width and height now im not sure but I think this is posx and posy

anybody else with me if I get stuck, ill maybe need a hand, ill be back as soon as I get the basic stuff going like home page, and textures., I just only got the debug mode on the screen.

its a lot of work and is gonna take a while so im not sure what else but I did rename all the top and left to posx and posy but I think im missing the start up area, ill try tomorrow and see if I can get the home screen going. not textures are showing up nor text, my results are poor at the time.

ill give it another shoot after work

Post by **Dom DXecutioner** » Mon Mar 14, 2016 10:06 am

I believe BuZz made the top/left changes, so that should not a problem; even if not, that's the easy part.

Many XML files are no longer being used, and also the control id numbers in various Windows have changed; Though this should not be that hard to figure out.

The challenge will be the use of PARAMS in Includes, also the way the images are being used, and the dynamic content for containers, just to name a few...

All the same, good luck!

NOTTHESAME · Post by **NOTTHESAME** » Tue Mar 15, 2016 2:47 am

Thanks on the heads up on the left and top code, i can retry later.

I might of over did it, the main issue might be startup. Xml and yes i think also the incluedes will be the harder part, very difficult stuff, ill retry later tonight, thanks dom ill need it.

settings
screen shot testing

I got the main menu going ill upload a image later today i need to work on the includes

this is how it should look, it seems we are along way from getting done lol, I got weather with strange readings hehe

GoTeamScotch · Post by **GoTeamScotch** » Mon Apr 04, 2016 11:47 pm

As much as I love confluence, this skin looks pretty stellar. Good luck to you guys. Hopefully it's not an impossible undertaking converting it!

NOTTHESAME · Post by **NOTTHESAME** » Tue Apr 05, 2016 3:32 am

I been working likecrazy so I might start on this tonight or this week

byron · Post by **byron** » Tue Apr 05, 2016 4:48 am

I took a look at the $PARAM from the skin's includes.xml...dunno how to even begin to tackle it. It's like includes on crack

It would probably be easier to just write the cpp code for that then to side step with hackery or as Dom suggested write it up from scratch with a rough draft just by eyeballing it...LOTS of work either way.

NOTTHESAME · Post by **NOTTHESAME** » Tue Apr 05, 2016 6:37 am

I didnt understand this code, I tired to change it or work around im confused and yes its like its on crack, ithink working long nights ill need some coffee, if we do it from scratch I think its gonna be easier, but I wont be able to do this on my own, if someone can try, all the includesand stuff.

Geeba · Post by **Geeba** » Tue Apr 05, 2016 9:22 am

Hats off to you guys... I wouldn't have a clue....

Rocky5 · Post by **Rocky5** » Tue Apr 05, 2016 11:48 am

Should be simple enough to batch replace the $Param[label], with their corresponding values.

Maybe these should be added to the skinning engine

if it's an easy addition, as there handy.

6 elements all with the same left position, we can use just 1 value to define that for them all, though we could just group stuff & do the same for positioning

but that won't work for everything.

byron · Post by **byron** » Wed Apr 06, 2016 4:17 am

I pretty much get how it works now

Code: Select all

 <param name="foo">

are basically the shells for all of the various items using the same shell (of which there are many different shells)

Code: Select all

<foo>$PARAM[foobar]</foo>

So basically we would be unstitching a nicely sewn together teddy bear to unleash the grizzly bear that is confined inside

Rocky5 wrote:Should be simple enough to batch replace the $Param[label], with their corresponding values.

I get what you're saying, but not quite that simple as far as I can tell. I did it - for example - with the videofiles submenu but there is more than just one ID or label to change because each </item> in each container has it's own label, it's own visibilty sometimes, and it's own function. What a pia...took me a solid hour to wrap my head around it, but it can certainly be done. Just not in "one fell swoop" fashion unless I'm missing something.

NOTTHESAME · Post by **NOTTHESAME** » Wed Apr 06, 2016 5:37 am

retouch had the same coding but now it has this param code and im not sure how to repleace or change this too.

byron · Post by **byron** » Wed Apr 06, 2016 7:04 am

I'll give an example (I think this is how it works)...from Includes_Home.xml (line 40 and this is your $PARAM template for all home submenus):

Code: Select all

<include name="SubMenu">
	<control type="group">
		<height>110</height>
		<visible>$PARAM[visible]</visible>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,0)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,1)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,2)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,3)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,4)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,5)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,6)">conditional</animation>
		<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container($PARAM[list_id]).NumItems,7)">conditional</animation>
		<control type="label">
			<left>235</left>
			<top>53</top>
			<width>700</width>
			<height>40</height>
			<label>$INFO[Container($PARAM[list_id]).Listitem.Label]</label>
			<shadowcolor>text_shadow</shadowcolor>
			<font>font20_title</font>
			<align>right</align>
			<animation effect="fade" time="200">VisibleChange</animation>
			<visible>Control.HasFocus($PARAM[list_id])</visible>
		</control>
		<control type="panel" id="$PARAM[list_id]">
			<orientation>horizontal</orientation>
			<onleft>9000</onleft>
			<left>935</left>
			<top>22</top>
			<height>110</height>
			<width>1355</width>
			<onup>20000</onup>
			<ondown>$PARAM[ondown_id]</ondown>
			<itemlayout width="110" height="120">
				<control type="image">
					<width>130</width>
					<height>110</height>
					<align>center</align>
					<aligny>center</aligny>
					<texture border="40">buttons/button-nofo.png</texture>
				</control>
				<control type="image">
					<left>45</left>
					<top>35</top>
					<width>40</width>
					<height>40</height>
					<align>center</align>
					<aligny>center</aligny>
					<texture>icons/submenu/$INFO[ListItem.Art(thumb)]</texture>
				</control>
			</itemlayout>
			<focusedlayout width="110" height="120">
				<control type="image">
					<width>130</width>
					<height>110</height>
					<align>center</align>
					<aligny>center</aligny>
					<texture border="40" colordiffuse="button_focus">buttons/button-theme-fo.png</texture>
				</control>
				<control type="image">
					<left>45</left>
					<top>35</top>
					<width>40</width>
					<height>40</height>
					<align>center</align>
					<aligny>center</aligny>
					<texture>icons/submenu/$INFO[ListItem.Art(thumb)]</texture>
				</control>
			</focusedlayout>
			<content>
				<item>
					<label>$PARAM[item1_label]</label>
					<thumb>$PARAM[item1_icon]</thumb>
					<onclick>$PARAM[item1_onclick]</onclick>
					<visible>$PARAM[item1_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item2_label]</label>
					<thumb>$PARAM[item2_icon]</thumb>
					<onclick>$PARAM[item2_onclick]</onclick>
					<visible>$PARAM[item2_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item3_label]</label>
					<thumb>$PARAM[item3_icon]</thumb>
					<onclick>$PARAM[item3_onclick]</onclick>
					<visible>$PARAM[item3_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item4_label]</label>
					<thumb>$PARAM[item4_icon]</thumb>
					<onclick>$PARAM[item4_onclick]</onclick>
					<visible>$PARAM[item4_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item5_label]</label>
					<thumb>$PARAM[item5_icon]</thumb>
					<onclick>$PARAM[item5_onclick]</onclick>
					<visible>$PARAM[item5_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item6_label]</label>
					<thumb>$PARAM[item6_icon]</thumb>
					<onclick>$PARAM[item6_onclick]</onclick>
					<visible>$PARAM[item6_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item7_label]</label>
					<thumb>$PARAM[item7_icon]</thumb>
					<onclick>$PARAM[item7_onclick]</onclick>
					<visible>$PARAM[item7_vis]</visible>
				</item>
				<item>
					<label>$PARAM[item8_label]</label>
					<thumb>$PARAM[item8_icon]</thumb>
					<onclick>$PARAM[item8_onclick]</onclick>
					<visible>$PARAM[item8_vis]</visible>
				</item>
			</content>
		</control>
	</control>
</include>

Now from Home.xml line 482 (videofiles...plug these values in to their appropriate place in the template above):

Code: Select all

<include content="SubMenu">
	<param name="list_id" value="11900"/>
	<param name="ondown_id" value="11100"/>
	<param name="item1_onclick" value="ActivateWindow(Videos,Files,return)" />
	<param name="item1_icon" value="files.png" />
	<param name="item1_label" value="$LOCALIZE[744]" />
	<param name="item2_onclick" value="ActivateWindow(Videos,special://videoplaylists/,return)" />
	<param name="item2_icon" value="playlists.png" />
	<param name="item2_label" value="$LOCALIZE[136]" />
	<param name="item3_onclick" value="PlayDVD" />
	<param name="item3_icon" value="dvd.png" />
	<param name="item3_label" value="$LOCALIZE[31076]" />
	<param name="item3_vis" value="System.HasMediadvd" />
	<param name="item4_onclick" value="ActivateWindow(videos,root,return)" />
	<param name="item4_icon" value="videos.png" />
	<param name="item4_label" value="$LOCALIZE[31074]" />
	<param name="item5_vis" value="False" />
	<param name="item6_vis" value="False" />
	<param name="item7_vis" value="False" />
	<param name="item8_vis" value="False" />
</include>

And you get the entire exploded view of the VideoFiles submenu (this is a rough draft and I haven't really checked it over very carefully but you should be able to get the idea from it):

Code: Select all

<control type="group">
	<height>110</height>
	<visible>true</visible>
	<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container(11900).NumItems,0)">conditional</animation>
	<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container(11900).NumItems,1)">conditional</animation>
	<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container(11900).NumItems,2)">conditional</animation>
	<animation effect="slide" end="110,0" time="0" condition="!Integer.IsGreater(Container(11900).NumItems,3)">conditional</animation>
	<control type="label">
		<left>235</left>
		<top>53</top>
		<width>700</width>
		<height>40</height>
		<label>$INFO[Container(11900).Listitem.Label]</label>
		<shadowcolor>text_shadow</shadowcolor>
		<font>font20_title</font>
		<align>right</align>
		<animation effect="fade" time="200">VisibleChange</animation>
		<visible>Control.HasFocus(11900)</visible>
	</control>
<!--video files-->
	<control type="panel" id="11900">
		<orientation>horizontal</orientation>
		<onleft>9000</onleft>
		<left>935</left>
		<top>22</top>
		<height>110</height>
		<width>1355</width>
		<onup>20000</onup>
		<ondown>11100</ondown>
		<itemlayout width="110" height="120">
			<control type="image">
				<width>130</width>
				<height>110</height>
				<align>center</align>
				<aligny>center</aligny>
				<texture border="40">buttons/button-nofo.png</texture>
			</control>
			<control type="image">
				<left>45</left>
				<top>35</top>
				<width>40</width>
				<height>40</height>
				<align>center</align>
				<aligny>center</aligny>
				<texture>icons/submenu/$INFO[ListItem.Art(thumb)]</texture>
			</control>
		</itemlayout>
		<focusedlayout width="110" height="120">
			<control type="image">
				<width>130</width>
				<height>110</height>
				<align>center</align>
				<aligny>center</aligny>
				<texture border="40" colordiffuse="button_focus">buttons/button-theme-fo.png</texture>
			</control>
			<control type="image">
				<left>45</left>
				<top>35</top>
				<width>40</width>
				<height>40</height>
				<align>center</align>
				<aligny>center</aligny>
				<texture>icons/submenu/$INFO[ListItem.Art(thumb)]</texture>
			</control>
		</focusedlayout>
		<content>
			<item>
				<label>$LOCALIZE[744]</label>
				<thumb>files.png</thumb>
				<onclick>ActivateWindow(VideoFiles,return)</onclick>
				<visible></visible>
			</item>
			<item>
				<label>$LOCALIZE[136]</label>
				<thumb>playlists.png</thumb>
				<onclick>ActivateWindow(VideoLibrary,Playlists,Return)</onclick>
				<visible></visible>
			</item>
			<item>
				<label>$LOCALIZE[31076]</label>
				<thumb>dvd.png</thumb>
				<onclick>PlayDVD</onclick>
				<visible>System.HasMediadvd</visible>
			</item>
			<item>
				<label>$LOCALIZE[31074]</label>
				<thumb>videos.png</thumb>
				<onclick>ActivateWindow(videolibrary,root,return)</onclick>
				<visible></visible>
			</item>
		</content>
	</control>
</control>

Something like that anyway, and it seems that there are 8 items in the template for the submenus that require all 8 and the extra items that aren't needed are set to false as visible in the actual parameters from Home.xml in the second block of code above etc...then on to the widgets, and then you have 1 submenu item done and then there are 8 more

Rocky5 · Post by **Rocky5** » Wed Apr 06, 2016 8:50 am

Each include can have its own Param values, like above.

So for each include you would need to replace the $Param[label] label with the corresponding value.

Basically what I would do is cut the include, paste it in a new file & batch replace the values. Then cut & paste it back into the correct file.
(Not to be confused with the includes.xml)

Only Param that needs more than a copy paste are the texture ones.

We can get the similar affect, well for the X & Y positions by setting the items X & Y positions to 0 & using groups to position them.
(So one value moves all items)

byron · Post by **byron** » Wed Apr 06, 2016 5:53 pm

Rocky5 wrote:Basically what I would do is cut the include, paste it in a new file & batch replace the values. Then cut & paste it back into the correct file.
(Not to be confused with the includes.xml)

+1 That is exactly what I did.

byron · Post by **byron** » Tue Apr 12, 2016 4:49 pm

So I'm trying to get Home.xml together as a starting point and then on to other windows for a less buggy framework. At that point I'll push to git so anybody that wants to can help. In the meantime I've kind of hit a wall due to a texture attribute we don't have, it's stretched throughout the skin, and without it I honestly don't think it can be ported in a respectable manner. It seems like an easy fix, so to any of you out there that have some cpp skills I've made a feature request:

http://redmine.exotica.org.uk/issues/357

There are ways to get the normal textures working with <colordiffuse/> but for the many controls with more than one texture (eg radio button control) it simply doesn't work like that. The <colordiffuse/> makes all textures in a multi texture control that way while the attribute allows each image a control like that produces to be independantly changed. Hope that makes sense

Anyway, without that attribute...I think moving forward with this is going to be really hard.

NOTTHESAME · Post by **NOTTHESAME** » Wed Apr 13, 2016 1:45 am

byron wrote:
screenshot002.jpg
So I'm trying to get Home.xml together as a starting point and then on to other windows for a less buggy framework. At that point I'll push to git so anybody that wants to can help. In the meantime I've kind of hit a wall due to a texture attribute we don't have, it's stretched throughout the skin, and without it I honestly don't think it can be ported in a respectable manner. It seems like an easy fix, so to any of you out there that have some cpp skills I've made a feature request:

http://redmine.exotica.org.uk/issues/357

There are ways to get the normal textures working with <colordiffuse/> but for the many controls with more than one texture (eg radio button control) it simply doesn't work like that. The <colordiffuse/> makes all textures in a multi texture control that way while the attribute allows each image a control like that produces to be independantly changed. Hope that makes sense Anyway, without that attribute...I think moving forward with this is going to be really hard.

About the colordiffuse i thought i was doing something wrong , so i gave a blue color to see and 60ffffff but still gave me a issue, super awesome job byro , i been trying to get catagory settings to run but just havent gotten around to it, but this will be a touch one i know little of theses new codes, like byron said your more then welcome to help us with cpp coding, thanks and again glad we got a few windows going byron