Kodi Community Forum

Full Version: Estuary Tweaks and Homepage Redesign
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
A couple years ago i did a couple experiments with redesigning Kodi for a design class. The first was a material version of the skin, and some of that got incorporated into the current iteration of Estuary. The second I started was a refinement of the overall home screen experience. I didn't really think too much about it since then, but i stumbled on it, and i still think theres some good ideas in here.
Im not a dev, and have absolutely not talent for it, but if anyone wants to take any of these ideas for themselves, please feel free to reach out. 


watch gallery
awesome range , looks great. If you feel like posting the skin files, I for one would like to try it out.
(2019-07-25, 23:58)ontap Wrote: [ -> ]awesome range , looks great. If you feel like posting the skin files, I for one would like to try it out.

You've misunderstood, there are no skin files as it's purely a graphical mock up.
(2019-07-26, 10:21)jjd-uk Wrote: [ -> ]
(2019-07-25, 23:58)ontap Wrote: [ -> ]awesome range , looks great. If you feel like posting the skin files, I for one would like to try it out.

You've misunderstood, there are no skin files as it's purely a graphical mock up. 

that is not to say you can not do something like that with plugin.library.node.editor
<?xml version='1.0' encoding='UTF-8'?>
<node type="folder">
    <label>youtube</label>
    <path>plugin://plugin.video.youtube/</path>
    <icon>E:\kodi art\kodi icons\unnamed (1).jpg</icon>
</node>
I was thinking more in terms of the collapsable main menu when pressing rt onto widgets.
See Estuary Mod 2. It has collapsible sidebar etc. Very similar. 

https://forum.kodi.tv/showthread.php?tid=306757
(2019-07-27, 05:10)dgm1960 Wrote: [ -> ]See Estuary Mod 2. It has collapsible sidebar etc. Very similar. 

https://forum.kodi.tv/showthread.php?tid=306757

Oh this is really cool. Thanks
(2019-07-26, 18:15)ontap Wrote: [ -> ]I was thinking more in terms of the collapsable main menu when pressing rt onto widgets.

ImageImagecan be done with <visible>Control.HasFocus(9000)</visible>
(2019-09-19, 13:12)the_other_guy Wrote: [ -> ]
(2019-07-26, 18:15)ontap Wrote: [ -> ]I was thinking more in terms of the collapsable main menu when pressing rt onto widgets.
ImageImagecan be done with <visible>Control.HasFocus(9000)</visible>   

@the_other_guy   Been having a go at this but not sure exactly where to put that line of code, tried a few spots but when i press rt to widgets , the widgets disappear along with the main menu , obviously am pasting it in the wrong place ?
line 36  <control type="group" id="2000">
                <left>100</left>

menu

<control type="group">
                <depth>DepthContentPanel</depth>
                <include>OpenClose_Left</include>
                <include content="ContentPanel">
                    <param name="width" value="0" condition="Control.HasFocus(9000)"/>
                    <visible>Control.HasFocus(9000)</visible>
                </include>
                <control type="fixedlist" id="9000">
                
                    <left>0</left>
                    <top>240</top>
                    <width>462</width>
                    <bottom>-10</bottom>
                    <movement>7</movement>
                    <focusposition>0</focusposition>
                    <onfocus>ClearProperty(listposition,home)</onfocus>
                    <onright>SetFocus($INFO[Container(9000).ListItem.Property(menu_id)])</onright>
                    <onup>700</onup>
                    <ondown>700</ondown>
                    <scrolltime tween="cubic" easing="out">500</scrolltime>
                    <focusedlayout height="95">
                        <control type="group">
                            <animation effect="fade" start="100" end="0" time="0">UnFocus</animation>
                            <control type="image">
                                <left>0</left>
                                <top>0</top>
                                <width>462</width>
                                <height>95</height>
                                <texture colordiffuse="button_focus">lists/focus.png</texture>
                                <animation effect="fade" start="100" end="0" time="0" condition="[!Control.HasFocus(9000) + !ControlGroup(700).HasFocus] | System.HasActiveModalDialog">Conditional</animation>
                            </control>
                            <control type="image">
                                <left>-3</left>
                                <top>1</top>
                                <width>95</width>
                                <height>95</height>
                                <texture colordiffuse="button_focus">$INFO[ListItem.Art(thumb)]</texture>
                                <animation effect="fade" start="0" end="100" time="300" reversible="false">Focus</animation>
                                <visible>Control.HasFocus(9000)</visible>
                            </control>
                            <control type="image">
                                <left>0</left>
                                <top>0</top>
                                <width>95</width>
                                <height>95</height>
                                <texture colordiffuse="51FFFFFF">colors/black.png</texture>
                                <animation effect="fade" start="100" end="0" time="0" condition="[!Control.HasFocus(9000) + !ControlGroup(700).HasFocus] | System.HasActiveModalDialog">Conditional</animation>
                            <visible>Control.HasFocus(9000)</visible></control>
                        </control>
                        <control type="image">
                            <left>-3</left>
                            <top>1</top>
                            <width>95</width>
                            <height>95</height>
                            <visible>Control.HasFocus(9000)</visible><texture>$INFO[ListItem.Art(thumb)]</texture>
                        </control>
                        <control type="label">
                            <left>104</left>
                            <top>0</top>
                            <height>95</height>
                            <width>560</width>
                            <aligny>center</aligny>
                            <font>font37</font>
                            <label>$INFO[ListItem.Label]</label>
                            <shadowcolor>text_shadow</shadowcolor>
                        <visible>Control.HasFocus(9000)</visible></control>
                    </focusedlayout>
                    <itemlayout height="95">
                        <control type="image">
                            <left>-3</left>
                            <top>1</top>
                            <width>95</width>
                            <height>95</height>
                            <visible>Control.HasFocus(9000)</visible><texture colordiffuse="44FFFFFF">$INFO[ListItem.Art(thumb)]</texture>
                        </control>
                        <control type="label">
                            <left>104</left>
                            <top>0</top>
                            <height>95</height>
                            <width>560</width>
                            <aligny>center</aligny>
                            <font>font37</font>
                            <label>$INFO[ListItem.Label]</label>
                            <shadowcolor>text_shadow</shadowcolor>
                        <visible>Control.HasFocus(9000)</visible></control>
                    </itemlayout>
                    <content>
                        <item>
                            <label>$LOCALIZE[342]</label>
                            <onclick condition="Library.HasContent(movies) + Skin.HasSetting(home_no_categories_widget)">ActivateWindow(Videos,videodb://movies/,return)</onclick>
                            <onclick condition="Library.HasContent(movies) + !Skin.HasSetting(home_no_categories_widget)">ActivateWindow(Videos,videodb://movies/titles/,return)</onclick>
                            <onclick condition="!Library.HasContent(movies)">ActivateWindow(Videos,sources://video/,return)</onclick>
                            <property name="menu_id">$NUMBER[5000]</property>
                            <thumb>icons/sidemenu/movies.png</thumb>
                            <property name="id">movies</property>
                            <visible>!Skin.HasSetting(HomeMenuNoMovieButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[20343]</label>
                            <onclick condition="Library.HasContent(tvshows) + Skin.HasSetting(home_no_categories_widget)">ActivateWindow(Videos,videodb://tvshows/,return)</onclick>
                            <onclick condition="Library.HasContent(tvshows) + !Skin.HasSetting(home_no_categories_widget)">ActivateWindow(Videos,videodb://tvshows/titles/,return)</onclick>
                            <onclick condition="!Library.HasContent(tvshows)">ActivateWindow(Videos,sources://video/,return)</onclick>
                            <property name="menu_id">$NUMBER[6000]</property>
                            <thumb>icons/sidemenu/tv.png</thumb>
                            <property name="id">tvshows</property>
                            <visible>!Skin.HasSetting(HomeMenuNoTVShowButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[2]</label>
                            <onclick>ActivateWindow(Music,root,return)</onclick>
                            <property name="menu_id">$NUMBER[7000]</property>
                            <thumb>icons/sidemenu/music.png</thumb>
                            <property name="id">music</property>
                            <visible>!Skin.HasSetting(HomeMenuNoMusicButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[427]</label>
                            <onclick>PlayDisc</onclick>
                            <property name="menu_id">$NUMBER[21000]</property>
                            <thumb>icons/sidemenu/disc.png</thumb>
                            <property name="id">disc</property>
                            <visible>System.HasMediaDVD</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[20389]</label>
                            <property name="menu_id">$NUMBER[16000]</property>
                            <onclick>ActivateWindow(Videos,musicvideos,return)</onclick>
                            <thumb>icons/sidemenu/musicvideos.png</thumb>
                            <property name="id">musicvideos</property>
                            <visible>!Skin.HasSetting(HomeMenuNoMusicVideoButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[19020]</label>
                            <property name="menu_id">$NUMBER[12000]</property>
                            <onclick>ActivateWindow(TVChannels)</onclick>
                            <thumb>icons/sidemenu/livetv.png</thumb>
                            <property name="id">livetv</property>
                            <visible>!Skin.HasSetting(HomeMenuNoTVButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[19021]</label>
                            <property name="menu_id">$NUMBER[13000]</property>
                            <onclick>ActivateWindow(RadioChannels)</onclick>
                            <thumb>icons/sidemenu/radio.png</thumb>
                            <property name="id">radio</property>
                            <visible>!Skin.HasSetting(HomeMenuNoRadioButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[15016]</label>
                            <property name="menu_id">$NUMBER[17000]</property>
                            <onclick>ActivateWindow(Games)</onclick>
                            <thumb>icons/sidemenu/games.png</thumb>
                            <property name="id">games</property>
                            <visible>System.GetBool(gamesgeneral.enable) + !Skin.HasSetting(HomeMenuNoGamesButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[24001]</label>
                            <property name="menu_id">$NUMBER[8000]</property>
                            <onclick>ActivateWindow(1100)</onclick>
                            <thumb>icons/sidemenu/addons.png</thumb>
                            <property name="id">addons</property>
                            <visible>!Skin.HasSetting(HomeMenuNoProgramsButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[1]</label>
                            <onclick>ActivateWindow(Pictures)</onclick>
                            <property name="menu_id">$NUMBER[4000]</property>
                            <thumb>icons/sidemenu/pictures.png</thumb>
                            <property name="id">pictures</property>
                            <visible>!Skin.HasSetting(HomeMenuNoPicturesButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[3]</label>
                            <onclick>ActivateWindow(Videos,root)</onclick>
                            <property name="menu_id">$NUMBER[11000]</property>
                            <thumb>icons/sidemenu/videos.png</thumb>
                            <property name="id">video</property>
                            <visible>!Skin.HasSetting(HomeMenuNoVideosButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[10134]</label>
                            <onclick>ActivateWindow(favourites)</onclick>
                            <property name="menu_id">$NUMBER[14000]</property>
                            <thumb>icons/sidemenu/favourites.png</thumb>
                            <property name="id">favorites</property>
                            <visible>!Skin.HasSetting(HomeMenuNoFavButton)</visible>
                        </item>
                        <item>
                            <label>$LOCALIZE[8]</label>
                            <onclick condition="!String.IsEmpty(Weather.Plugin)">ActivateWindow(Weather)</onclick>
                            <onclick condition="String.IsEmpty(Weather.Plugin)">ReplaceWindow(servicesettings,weather)</onclick>
                            <property name="menu_id">$NUMBER[15000]</property>
                            <thumb>icons/sidemenu/weather.png</thumb>
                            <property name="id">weather</property>
                            <visible>!Skin.HasSetting(HomeMenuNoWeatherButton)</visible>
                        </item>
                    </content>
                </control>
                <control type="grouplist" id="700">
                <visible>Control.HasFocus(9000)</visible>
                    <orientation>horizontal</orientation>
                    <itemgap>0</itemgap>
                    <left>-8</left>
                    <width>480</width>
                    <height>110</height>
                    <top>100</top>
                    <onup>SetFocus(9000,99,absolute)</onup>
                    <ondown>SetFocus(9000,0,absolute)</ondown>
                    <onright>2000</onright>
                    <align>justify</align>
                    <include content="IconButton">
                        <param name="control_id" value="804" />
                        <param name="onclick" value="ActivateWindow(shutdownmenu)" />
                        <param name="icon" value="icons/power.png" />
                        <param name="label" value="$LOCALIZE[33060]" />
                        <visible>Control.HasFocus(9000)</visible>
                    </include>
                    <include content="IconButton">
                        <param name="control_id" value="802" />
                        <param name="onclick" value="ActivateWindow(settings)" />
                        <param name="icon" value="icons/settings.png" />
                        <param name="label" value="$LOCALIZE[21417]" />
                        <visible>Control.HasFocus(9000)</visible>
                    </include>
                    <include content="IconButton">
                        <param name="control_id" value="801" />
                        <param name="onclick" value="ActivateWindow(1107)" />
                        <param name="icon" value="icons/search.png" />
                        <param name="label" value="$LOCALIZE[137]" />
                        <visible>Control.HasFocus(9000)</visible>
                    </include>
                    <include content="IconButton">
                        <param name="control_id" value="803" />
                        <param name="onclick" value="Fullscreen" />
                        <param name="icon" value="icons/now-playing/fullscreen.png" />
                        <param name="label" value="$LOCALIZE[31000]" />
                        <param name="visible" value="Player.HasMedia" />
                        <visible>Control.HasFocus(9000)</visible>
                    </include>
                </control>
            </control>




you may need to add image for menu

ImageImage
thankyou,
spoke too soon , "line 36" ? where?
That list you posted starts at line  800 in home.xml file in default estuary.
EDIT - ok line 36 in home.xml. changed the figure to 100, it moves the widgets across to impinge on the menu panel but doesn't hide menu panel ?
<control type="group" id="2000">
                <left>462</left>
                <animation type="Conditional" condition="Control.IsVisible(20000)" reversible="false">
                    <effect type="slide" end="0,20" time="60" tween="sine" />
                    <effect type="slide" end="0,-20" time="180" tween="sine" delay="80" />
                </animation>\

moves widgets over to left to reduce gap when menu hidden

the rest is replace menu line 800
(2019-09-23, 04:24)the_other_guy Wrote: [ -> ]<control type="group" id="2000">
                <left>462</left>
                <animation type="Conditional" condition="Control.IsVisible(20000)" reversible="false">
                    <effect type="slide" end="0,20" time="60" tween="sine" />
                    <effect type="slide" end="0,-20" time="180" tween="sine" delay="80" />
                </animation>\

moves widgets over to left to reduce gap when menu hidden

the rest is replace menu line 800
Yep tx , that does indeed hide/move menu bar when highlighting widgets, however when pressing up from top item on menu bar ( in my case movies) to get to exit settings and search icons, the whole menu bar disappears , so am not able to access those 3 icons ?
I suppose I could remove the "700" group and those icons and add exit and settings as menu items as a fix ?
WHAT I DID WAS FIRST IN MENU
<item>
                        <label>$LOCALIZE[31000]</label>
                        <property name="menu_id">$LOCALIZE[31000]</property>
                        <onclick>Fullscreen</onclick>
                        <thumb>icons/now-playing/fullscreen.png</thumb>
                        <property name="id">myhome</property>
                        <visible>Player.HasMedia</visible>
                        </item>

THEN AT END OF MENU 
<item>
                        <label>$LOCALIZE[21417]</label>
                        <property name="menu_id">$LOCALIZE[21417]</property>
                        <onclick>ActivateWindow(settings)</onclick>
                        <thumb>icons/settings.png</thumb>
                        
                        
                        </item>
                        <item>
                        <label>$LOCALIZE[33060]</label>
                        <property name="menu_id">$LOCALIZE[33060]</property>
                        <onclick>ActivateWindow(shutdownmenu)</onclick>
                        <thumb>icons/power.png</thumb>
                        
                        
                        </item>
Cheers , yep spot on. Just got to tweak the icon size a tad.