2015-08-22, 20:01
Video OSD Logo and Full Art
Information
This Mod is a fairly simple Mod, but gives you some really nice features sprucing up the Video On screen display and On screen full info, The Final Result is a little more colourful art and opening up door for more and more modifications, I hope to help those learning to get the extra skills you need to at least modify what is here for your own purposes.
Having a logo in place of the title give the player a more colorful look. It gives you a more identifiable feel allowing you to know your watching. Then on top of that, having a changeable graphic give you the chance to showcase what ever kind of art you prefer
Please let it be known that Angelinas is the true brains behind this endeavour and I am using his code (with slight modifications) to make this and he is ultimately the author and in my opinion has all the rights to these mods.
Final Product
Features
--Replaces Title in the Video OSD with clearlogo
--Replaces the video info logo with fullart
--Adds button selector for art in global top menu (or any top menu
--Adds variable for Value_Full_Art to switch between Disk Art, Banner, Clearart, and Clearlogo and Characterart for tvshows
--Retains default behavior as fallback
Installation
There are 2 ways to install this mod at this time, Download files and replace stock or the manual installation wich will be explained below
Easy Install
This install method is for users who do not want to muck about with config files and just wants the mods, BEWARE if any other mods have been used they may be removed or broken by this install method PLEASE BACKUP
1)Download files, and Unzip.
2)Copy all files into your addons/skin.aeonmq6/
3)Replace all
4)Start Kodi
Video OSD V1.1
Alternate version available below
Includes 2 sets of the following files, one stock original and one modded, use the modded
All features should be working!!
Manual Install
This installation method will teach you some easy basics how to edit the skin files, you can combine many mods and after some time create your own. This install method allows you to add to the files rather then simply replace them, as well as shows you where each of the elements is so you can edit them as you see fit.
First step: Backup
Navigate in your file browser to your kodi addon folder(which is beside userdata) and then to Aeon MQ 6 folder, then the main configuration XML are in 720p
Locate and backup the following files (just copy them to desktop append .backup to the end of each filename)
Each of these files is going to be edited and it is good to have a copy of them in case things go wrong or you don't like the results.
Each file has a distinct purpose.
DialogFullScreenInfo.xml This file controls the widgets of the OSD, it comes up when you select to view full screen info on the OSD.
DialogSeekBar.xml This file controls the widgets on the pause menu, The pause menu replicates the full screen info screen and comes up after being paused for a few seconds
VideoOSD.xml This is file that actually controls the OSD when the controls are on screen, this section only has the logo, not the other art
IncludesVariables.xml This file holds all the variables for the skin, it allows new variables to be used and makes skinning very versitile
IncudesTopMenu.xml This file configures all of the different parts of the top menu
Step Two: Title to Logo
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml
First edit is to change the title into a logo. The title sits above the tagline and is a part of all three sections of the on screen display. All three sections need to be edited to replace the title with a logo at the top. You can turn this on and off with the button on the top menu of any view called "Logo as Title (on Top if available)"
Find thi section: (about 20 lines down, except VideoOSD.xml where its about 64 lines down)
Replace that section with the following:
Once this Edit is complete you will have a logo in place of the title when ever you have the logos available and if not it falls back to a title.
Step Three: Set up the code the FullscreenIcon
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml
This section we change the fullscreenIcon to be a changable with art options for this section is Diskart, Banner, Clearart, Logo and Characterart.Section 4 will add variables and a button to manipulate the variable, this section sets the Fullscreen info to use the variables below so any type of art can be displayed
Find this section below in both files:
and Replace it with this:
For a perfect look, when editing DialogFullScreenInfo.xml add 35 to the <top> Value (makeing it <top>108</top>), for some reason it is different in each, but its not very visible)
(P.S.You can make thing bigger and smaller the <width> and <height> lines and position with <left>(the pixels from left) and <top>(pixels from top) lines but if you edit this it changes for all types of art in that place and if you go to large the diskart or fanart can go over other thing pretty quick, these values are about as big as you can go without overlapping somewhere)
Step Four: Add the Variables
Files to be edited: IncludesVariables
The FullscreenIcon is usuallly a logo but we are going to make it changeable. To be able to do this we need to have a variable that references all the forms of art and and allows them to be changed, there is also a veriable that we are going to set for the upcoming button.
If you search and find this following section in "IncludesVariables.xml" you can add in the new variable sections directly after this:
The first variable is:
The button variable below makes the above much more useful because it gives each of the different values of the above variable a name, it can be added directly after the last one.
After these variables have been added you can save and move on
Step Five: Add the Button
Files to be edited: IncludesTopMenu.xml
This is the final step and it adds a button to make the type of art selectable from the top menu screen in any view or globally.
The config file for the whole top menu in every view section of kodi is IncludesTopMenu.xml In this section we are going to add a button to control which type of art that will be used as the FullscreenIcon. We can be add it anywhere throughout the top menu. You can add it to any of the four main sections, ahve it appear only in certain views or different sections but I beleive the best section is Gobally for all video sections. If you would like to put it under the global section you can add the following code anywhere under the video then global section. This section starts at line 1111 and you can choose where you want it in that list. I advise to put it below "Logo as Title (on Top if available)" as a safe place
This is the final step
<blockquote class="imgur-embed-pub" lang="en" data-id="a/B5TGo"><a href="//imgur.com/a/B5TGo">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
YOU NOW HAVE A FULLY WORKING FANCY OSD
Release Notes
Alternative
Version 1.1
Video OSD V1.1
Alternative Release
Video OSD Alternative
version 1.0.0
DOWNLOAD HERE
Contributors
Angelinas
Marcos the master of code for all code in Aeon MQ6
Thanks to anyone who helped get this running again, so much help from everywhere. Also a big thanks to the Trakt team, as the new API is a blaze and responsible for most of the speed increases.
Information
This Mod is a fairly simple Mod, but gives you some really nice features sprucing up the Video On screen display and On screen full info, The Final Result is a little more colourful art and opening up door for more and more modifications, I hope to help those learning to get the extra skills you need to at least modify what is here for your own purposes.
Having a logo in place of the title give the player a more colorful look. It gives you a more identifiable feel allowing you to know your watching. Then on top of that, having a changeable graphic give you the chance to showcase what ever kind of art you prefer
Please let it be known that Angelinas is the true brains behind this endeavour and I am using his code (with slight modifications) to make this and he is ultimately the author and in my opinion has all the rights to these mods.
Final Product
Features
--Replaces Title in the Video OSD with clearlogo
--Replaces the video info logo with fullart
--Adds button selector for art in global top menu (or any top menu
--Adds variable for Value_Full_Art to switch between Disk Art, Banner, Clearart, and Clearlogo and Characterart for tvshows
--Retains default behavior as fallback
Installation
There are 2 ways to install this mod at this time, Download files and replace stock or the manual installation wich will be explained below
Easy Install
This install method is for users who do not want to muck about with config files and just wants the mods, BEWARE if any other mods have been used they may be removed or broken by this install method PLEASE BACKUP
1)Download files, and Unzip.
2)Copy all files into your addons/skin.aeonmq6/
3)Replace all
4)Start Kodi
Video OSD V1.1
Alternate version available below
Includes 2 sets of the following files, one stock original and one modded, use the modded
Code:
DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml IncludesTopMenu.xml IncludesVariables.xmlAll features should be working!!
Manual Install
This installation method will teach you some easy basics how to edit the skin files, you can combine many mods and after some time create your own. This install method allows you to add to the files rather then simply replace them, as well as shows you where each of the elements is so you can edit them as you see fit.
First step: Backup
Navigate in your file browser to your kodi addon folder(which is beside userdata) and then to Aeon MQ 6 folder, then the main configuration XML are in 720p
Code:
addons/skin.aeonmq6/720p/
***Different OS's, store this info in different places,
Operative system File path
Android Android/data/org.xbmc.kodi/files/.kodi/addons/skin.aeonmq6/ (see note)
iOS /private/var/mobile/Library/Preferences/Kodi/addons/skin.aeonmq6/
Linux ~/.kodi/addons/skin.aeonmq6/
Mac /Users/<your_user_name>/Library/Application Support/Kodi/addons/skin.aeonmq6/
OpenELEC /storage/.kodi/addons/skin.aeonmq6/
Windows Start - type "%APPDATA%\kodi\addons\skin.aeonmq6\" - press <Enter>Locate and backup the following files (just copy them to desktop append .backup to the end of each filename)
Code:
DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml IncludesTopMenu.xml IncludesVariables.xmlEach of these files is going to be edited and it is good to have a copy of them in case things go wrong or you don't like the results.
Each file has a distinct purpose.
DialogFullScreenInfo.xml This file controls the widgets of the OSD, it comes up when you select to view full screen info on the OSD.
DialogSeekBar.xml This file controls the widgets on the pause menu, The pause menu replicates the full screen info screen and comes up after being paused for a few seconds
VideoOSD.xml This is file that actually controls the OSD when the controls are on screen, this section only has the logo, not the other art
IncludesVariables.xml This file holds all the variables for the skin, it allows new variables to be used and makes skinning very versitile
IncudesTopMenu.xml This file configures all of the different parts of the top menu
Step Two: Title to Logo
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml VideoOSD.xml
First edit is to change the title into a logo. The title sits above the tagline and is a part of all three sections of the on screen display. All three sections need to be edited to replace the title with a logo at the top. You can turn this on and off with the button on the top menu of any view called "Logo as Title (on Top if available)"
Find thi section: (about 20 lines down, except VideoOSD.xml where its about 64 lines down)
Code:
<control type="label"><!-- Title -->
<left>30</left>
<top>8</top>
<width>1070</width>
<height>40</height>
<font>Font_40</font>
<label>$VAR[value_videoosdtitle]</label>
<textcolor>FFFFFAF0</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
</control>
<control type="label">
<left>30</left>
<top>55</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
</control>Replace that section with the following:
Code:
<control type="image"><!-- TopLogo e Clearart -->
<left>30</left>
<top>8</top>
<width>140</width>
<height>55</height>
<aspectratio aligny="top">keep</aspectratio>
<texture background="true">$VAR[value_art]</texture>
<visible>Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))</visible>
</control>
<control type="label"><!-- Tagline -->
<left>30</left>
<top>55</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))</visible>
</control>
<control type="label"><!-- Title If No logo -->
<left>30</left>
<top>8</top>
<width>1070</width>
<height>40</height>
<font>Font_40</font>
<label>$VAR[value_videoosdtitle]</label>
<textcolor>FFFFFAF0</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>![Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))]</visible>
</control>
<control type="label"> <!-- tagline no Logo -->
<left>30</left>
<top>55</top>
<width>1050</width>
<height>25</height>
<font>Font_18A</font>
<label>$VAR[value_videoosdtag]</label>
<textcolor>90FFFFFF</textcolor>
<scroll>true</scroll>
<scrollout>false</scrollout>
<visible>![Skin.HasSetting(clearlogotitle) + !IsEmpty(Player.Art(clearlogo))]</visible>
</control>Step Three: Set up the code the FullscreenIcon
Files to be edited: DialogFullScreenInfo.xml DialogSeekBar.xml
This section we change the fullscreenIcon to be a changable with art options for this section is Diskart, Banner, Clearart, Logo and Characterart.Section 4 will add variables and a button to manipulate the variable, this section sets the Fullscreen info to use the variables below so any type of art can be displayed
Find this section below in both files:
Code:
<control type="image"><!-- Logo e Clearart -->
<left>1080</left>
<top>73</top>
<width>180</width>
<height>340</height>
<aspectratio aligny="bottom">keep</aspectratio>
<texture background="true">$VAR[value_art]</texture>
</control>and Replace it with this:
Code:
<control type="image"><!-- Logo e Clearart -->
<left>865</left>
<top>73</top>
<width>350</width>
<height>340</height>
<aspectratio aligny="bottom">keep</aspectratio>
<texture background="true">$VAR[value_art_full]</texture>
</control>(P.S.You can make thing bigger and smaller the <width> and <height> lines and position with <left>(the pixels from left) and <top>(pixels from top) lines but if you edit this it changes for all types of art in that place and if you go to large the diskart or fanart can go over other thing pretty quick, these values are about as big as you can go without overlapping somewhere)
Step Four: Add the Variables
Files to be edited: IncludesVariables
The FullscreenIcon is usuallly a logo but we are going to make it changeable. To be able to do this we need to have a variable that references all the forms of art and and allows them to be changed, there is also a veriable that we are going to set for the upcoming button.
If you search and find this following section in "IncludesVariables.xml" you can add in the new variable sections directly after this:
Code:
<variable name="value_art">
<value condition="!VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearlogo)]</value>
<value condition="!VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearart)]</value>
<value condition="VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearart)]</value>
</variable>The first variable is:
Code:
<variable name="value_art_full">
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearlogo))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),logo) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearlogo))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + !VideoPlayer.Content(episodes) + IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(clearart))">$INFO[Player.Art(clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearlogo)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.clearart))">$INFO[Player.Art(tvshow.clearart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart) + !VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(discart))">$INFO[Player.Art(discart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.discart))">$INFO[Player.Art(tvshow.discart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner) + !VideoPlayer.Content(banner) + !IsEmpty(Player.Art(banner))">$INFO[Player.Art(banner)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner) + VideoPlayer.Content(banner) + !IsEmpty(Player.Art(tvshow.banner))">$INFO[Player.Art(tvshow.banner)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart) + !VideoPlayer.Content(fanart) + !IsEmpty(Player.Art(fanart))">$INFO[Player.Art(fanart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart) + VideoPlayer.Content(fanart) + !IsEmpty(Player.Art(tvshow.fanart))">$INFO[Player.Art(tvshow.fanart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart) + VideoPlayer.Content(episodes) + !IsEmpty(Player.Art(tvshow.characterart))">$INFO[Player.Art(tvshow.characterart)]</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart) + VideoPlayer.Content(episodes) + IsEmpty(Player.Art(tvshow.characterart))">$INFO[Player.Art(tvshow.clearlogo)]</value>
</variable>Code:
<variable name="PLPlusIconLabelFullVar">
<value condition="StringCompare(skin.string(fullscreen_icon),logo)">Logo</value>
<value condition="StringCompare(skin.string(fullscreen_icon),clearart)">Clearart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),fanart)">Extrathumbs</value>
<value condition="StringCompare(skin.string(fullscreen_icon),banner)">Banner</value>
<value condition="StringCompare(skin.string(fullscreen_icon),discart)">Discart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),characterart)">Characterart</value>
<value condition="StringCompare(skin.string(fullscreen_icon),noicon)">NoIcon</value>
</variable>Step Five: Add the Button
Files to be edited: IncludesTopMenu.xml
This is the final step and it adds a button to make the type of art selectable from the top menu screen in any view or globally.
The config file for the whole top menu in every view section of kodi is IncludesTopMenu.xml In this section we are going to add a button to control which type of art that will be used as the FullscreenIcon. We can be add it anywhere throughout the top menu. You can add it to any of the four main sections, ahve it appear only in certain views or different sections but I beleive the best section is Gobally for all video sections. If you would like to put it under the global section you can add the following code anywhere under the video then global section. This section starts at line 1111 and you can choose where you want it in that list. I advise to put it below "Logo as Title (on Top if available)" as a safe place
Code:
<control type="button" id="92149">
<include>TopMenuButton</include>
<label>FullScreen Icon</label>
<label2>$VAR[PLPlusIconLabelFullVar]</label2>
<onclick condition="StringCompare(skin.string(fullscreen_icon),noicon) | IsEmpty(skin.string(fullscreen_icon))">Skin.SetString(fullscreen_icon,logo)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),logo)">Skin.SetString(fullscreen_icon,discart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),discart)">Skin.SetString(fullscreen_icon,banner)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),banner)">Skin.SetString(fullscreen_icon,fanart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),fanart)">Skin.SetString(fullscreen_icon,clearart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),clearart)">Skin.SetString(fullscreen_icon,characterart)</onclick>
<onclick condition="StringCompare(skin.string(fullscreen_icon),characterart)">Skin.SetString(fullscreen_icon,noicon)</onclick>
</control><blockquote class="imgur-embed-pub" lang="en" data-id="a/B5TGo"><a href="//imgur.com/a/B5TGo">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
YOU NOW HAVE A FULLY WORKING FANCY OSD
Release Notes
Alternative
Code:
Version 1.1
Refined the placement and size of graphics
added a readme.txt to help install
Built from MQ 6 3.2.0
Alternative Release
Both Graphics change, - doesn't allow TV episode, or any tagline and ratings to show
Built on 3.2.0
version 1.0.0
Initial ReleaseVideo OSD V1.1
Alternative Release
Video OSD Alternative
version 1.0.0
DOWNLOAD HERE
Contributors
Angelinas
Marcos the master of code for all code in Aeon MQ6
Thanks to anyone who helped get this running again, so much help from everywhere. Also a big thanks to the Trakt team, as the new API is a blaze and responsible for most of the speed increases.
