Changing / improving OSMC skin

@spl147 Rest assured we always ship the latest stable version of Kodi.

is there a place to request skin enhancements?

can you make the plot clickable so it pops up bigger so it’s easier to read?

Under which window?
On the OSMC skin you can press the i button for more details.

Some photos might help

Cheers

osmc skin, movie info screen

this is a different skin but this is what i mean:

Thoughts @chillbo?

Sam

Have thought about this approach, a few skins are using. But it wouldn’t really fit to how plot texts are shown all over the skin. Some of them cannot be made clickable at all, so not sure it would be a good idea to change the behaviour of one of the texts.

But you could check out the skin settings of our skin and change the plot font size under advanced. That way any issues regarding visibility should be solvable. The text will scroll and should give you the ability to read the whole plot text.

Re media flags… We’re following a minimalistic approach for our skin which also means: no image based media flags, but text. Most of the flags visible in your screenshot are shown by our skin in text as well in the bottom left corner. :+1:t2: See here for more information: The OSMC Skin

making the text clickable for certian views only would be a good approach.

if you don’t want to incorperate in the production skin. could you show me where to change it on my end?

also reguarding media flags, i understand the minimalistic approach, again could you show me where to change it on my end to include more info?

so i copied the osmc.skin from /usr/share/kodi/addons to /home/osmc/.kodi/addons/skin.osmc-mod

changed owner and group to osmc

made a few changes to the skin

edited the addon.xml

rebooted, but it does not show up in the list of skins to choose from

Did you change the skin ID in the XML and enable the add-on?

You have to create a zip file with the folder skin.osmc-mod inside and install it via the addon browser. Just copying it to the user addons folder won’t do the trick.

The info dialog we’re talking about here is to be found in the DialogVideoInfo.xml file.

The media flags are managed via includes and variables. The include you’ll be looking for is to be found in the Includes.xml files from line 702-821 and the variables used in that include are located in the Variables.xml file - just search for the variable name you’re looking for in that file.

If you come up with something nice, do let me know. :slightly_smiling_face: I’m always open to improving things.

enabling it did the trick! thank you

i am very good at tweaking somthing existing, but have no idea how to add new features, editing a single xml file i can do, but there are so many involved, i am unsure as to how.

to pull the code from the other skin and add it to this one…is way over my head!

is this close for the clickable plot?

			<!-- Plot -->
				<control type="button" id="138">
					<width>754</width>
				    <height>418</height>
					<textoffsetx>40</textoffsetx>
					<textoffsety>20</textoffsety>
					<aligny>bottom</aligny>
					<label></label>
					<onclick condition="!String.IsEmpty(ListItem.Plot)">SetProperty(TextViewer_Header,$LOCALIZE[207],home)</onclick>
					<onclick condition="!String.IsEmpty(ListItem.Plot)">SetProperty(TextViewer_Text,$ESCINFO[ListItem.Plot],home)</onclick>
					<onclick condition="!String.IsEmpty(ListItem.Plot)">ActivateWindow(1102)</onclick>
					<onup>50</onup>
					<onleft>4000</onleft>
					<onright>4000</onright>
					<ondown>5000</ondown>
					<texturenofocus border="21">dialogs/dialogbackground.png</texturenofocus>
					<visible>Integer.IsGreater(Container(4000).NumItems,0)</visible>
				</control>
				<control type="image">
					<left>735</left>
					<width>512</width>
					<height>418</height>
					<aligny>bottom</aligny>
					<texture border="21">dialogs/dialogbackground.png</texture>
					<visible>Integer.IsGreater(Container(4000).NumItems,0)</visible>
				</control>
				<control type="group">
					<top>370</top>
					<width>1170</width>
					<height>210</height>
					<control type="textbox">
						<align>left</align>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>[LIGHT]$VAR[Plot][/LIGHT]</label>
						<autoscroll delay="10000" time="2000" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,S light)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font30</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>[LIGHT]$VAR[Plot][/LIGHT]</label>
						<autoscroll delay="10000" time="1900" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,M light)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font33</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>[LIGHT]$VAR[Plot][/LIGHT]</label>
						<autoscroll delay="10000" time="1800" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,L light)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font36</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>[LIGHT]$VAR[Plot][/LIGHT]</label>
						<autoscroll delay="10000" time="1700" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,XL light)</visible>
					</control>
					
					<control type="textbox">
						<align>left</align>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>$VAR[Plot]</label>
						<autoscroll delay="10000" time="2000" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,S)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font30</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>$VAR[Plot]</label>
						<autoscroll delay="10000" time="1900" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,M)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font33</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>$VAR[Plot]</label>
						<autoscroll delay="10000" time="1800" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,L)</visible>
					</control>
					<control type="textbox">
						<align>left</align>
						<font>Font36</font>
						<textcolor>$VAR[TextColor2]</textcolor>
						<label>$VAR[Plot]</label>
						<autoscroll delay="10000" time="1700" repeat="12000">True</autoscroll>
						<visible>Skin.String(PlotFont,XL)</visible>
					</control>
				</control>
			</control>

i added the ability to show Duration as Hrs and Mins.

		<!-- Audio/Video Duration -->
	<variable name="Duration">
		<value condition="Container.Content(songs)">$INFO[ListItem.Duration,, ]</value>
		<!--Duration in Mins.-->
		<!--value>$INFO[ListItem.Duration(mins),, $LOCALIZE[12391]]</value-->
		<!--Duration in Hrs.Mins..-->
		<value>$INFO[ListItem.Duration(h)]h $INFO[ListItem.Duration(m)]m</value>
	</variable>

i am making progress with the skin:

i have alot of questions though, i would love to collaborate with you @Chillbo

Very interesting :+1:t2: We’re discussing this in the team as well. The plot texts, their readability and the scrolling have been an issue for a long time, but no solution has yet been perfect.

If there’s something presentable, I’ll post it here. I’m also looking at your ideas :slightly_smiling_face:

i would just remove the scrolling all together, and make it clickable, very easy to read!!

i have a ton on questions for you, LOL

That would be a good idea, if… And the if is the issue. Text box controls can’t be abbreviated with “…” which would make clear that there’s more text which is currently hidden. You can only disable scrolling and the text might end in the middle of a sentence without any indicator that there’s more.
So, scrolling makes sense, but it’s not ideal either as you can’t force scrolling text boxes to reset to the beginning when closing a dialog or window. Sometimes you open a dialog or window and the text is already scrolling. Therefore, you have to wait for it to have scrolled to the end before being able to read the beginning of the text.

As you can see: both approaches are not perfect.

i was not aware they can not be abbreviated, can you have scrolling be activated only when the box is hilighted, focused upon i guess is the term?

reading a plot and seeing it ends abruptly is kinda self explanatory.

is there a way to auto focus on it if it requires to be expanded to read more?

Exactly that is not possible. Don’t ask me why. There’ve been discussions about this on the Kodi forum, but this functionality has never found its way into the skinning engine.

Yes, it is. But at the same time it doesn’t really look good. As basically all text in the skin scrolls (aka does something and isn’t simply cut off) as soon as it’s longer than the control’s dimensions.

The problem is that there’s no way of letting other skin elements “know” that there’s more text in a text box than currently visible.

Text boxes are a bit of a pain.