"Glan" - new 1080 clean skin; about 70% complete. Help/advice...

[KrisW]

Hi,

A while back (as in "a couple of years ago"!), I started to made a skin for my Vu+Duo that was:

- legible from 4 metres distance on a 40" display
- had a modern design
- wasn't cluttered.

It's called "Glan"* and it looks like this:

TV, now+next:
61196

EPG:
61197

Channel listing:
61199

Settings menu screen:
61198


preview.png:
61200

I used the existing "Halo" as a basis, but really only so that I could figure out what went where on each page. My design is very different: I pretty much started from scratch with it.

Anyway here's the sources:
https://github.com/KristianWalsh/openvix-skin-glan1080

I've no idea how these are officially packaged, but copying the folder 'Glan' from that into your /usr/share/enigma2 directory will make it appear in the list.

Artwork sources (icons, etc) were produced in Affinity Designer. I'll add those documents to the repo too once I've found the latest one (:rolleyes:)

I've done most of the everyday pages:
- now/next
- channel-lists
- fullscreen (pip and no pip) and infobar EPG
- (nearly all) settings menus
- alerts/warnings
- movie browser
- movie playback/ tv trick-play

However, the lesser-used screens (software update and scan particularly) are still either the Halo skin, or the standard VIX ui.

If anyone wants to use this, knock yourself out. If you want to fill in the blanks, even better.

Comments are welcome. (Yeah, I just spotted that button on the EPG page, but other comments too... ;) )


(* it's the Irish word for "clean". Rhymes with "gone")

[simonc]

I really like this. It shows promise of being graphically consistent and hits the spot for legibility. It also doesn't bog you down with techie info. I don't like loads of 720/1080/mpeg/divx/what-ever icons :)

The most polished screen IMO is the Grid EPG with PIG enabled. Other favourite bits that could be used as templates elsewhere are the title bar used by Main Menu and Recordings.

A few things I'd tweak:

Grid EPG with no PIG

Less or no transparency
Keep the button bar in the same place as the PIG version and...
make the title and description extend the full width - I get a few truncated titles, e.g. Dames of Classic Drama at the What? Where are the classic dames today? I can't tell :D


Single EPG - not such a fan of this one, the list seems a bit shoehorned in to allow TV to show in the gap

Try it with the grid EPG type layout. List, button bar, description/PIG, although this may leave loads of blank space. Tricky.


Recordings - another one that's a bit squashed to get the side by side layout - would the full width layout work here?
Timers and Auto Timers - go full screen

Same header and footer template as Recordings
whiter text for unselected items


Timer Edit and Auto Timer Edit

go more full screen
whiter text - the contrast is a bit low


Setup screens

I'd be tempted to add another row or two to make the gap at the bottom the same as the gap at the top to the titlebar, unless that



Not looked at the source yet, but I'm also wondering if this could be made to be easily themable in different colours?

[KrisW]

Thanks for the feedback!

Grid EPG (no pig): good feedback. Thanks. Will make it like the PIG version, but without the picture.

SingleEPG: That's not mine; it's a direct lift from the donor skin. I haven't got around to doing this one. (Mainly because I use a multi-function remote, and the colour buttons aren't on hard keys on it, so I rarely use it -- I actually had to look up the instructions to figure out how to get it on screen!).

Recordings: The full-width version felt tiring to read, so I went to columns. I might be able to do something with the widths of each list, but I think the base software is very hard to theme for this list (i.e., it's very hard to set widths of columns).

Timers / Auto timers: again, these aren't mine - what you see is directly from the donor file I used ("Halo"), but with my typeface change. As a result, it's a bit of a hot mess right now, and does need a fix-up. I would probably favour a side-by-side layout again, as for the recordings page, but I'm not sure - again, every one of these list-boxes seems to have its own behaviour; until I try to fix the layout I won't know what's possible.

Setup: yes, one more row could be added easily enough. Good idea.

Theming
I did have colour theming in mind when I did this, and colours in the XML are all referenced by name in any part of the UI I've touched, so yes, that orange can be changed very quickly by text substitution. There are a couple of shades, but it's easy to do via a little bit of code. There are a few images with colour in them, but that orange is the only colour used in them, so it would be easy to programmatically re-colour these. I didn't really want to delve into making a code plugin (I can write the code to do the recolouring no problem, but I don't know the "right" way to interface with the underlying system), but it would be reasonably easy to re-generate the bitmap graphics in any colour because of how they were drawn (as these are all PNG8s, it's only the palette that needs to be modified)

[simonc]

Recordings: ...the base software is very hard to theme for this list (i.e., it's very hard to set widths of columns)...

I'm sure we can do something about that :) There's a few things about skinning that aren't great (apart from there being waaay too many screens). You often see instructions with skins along the lines of
set your item count to 8, your font adjustment to -3, turn on this extra column view, disable that option, do something else very tedious and also tedious to undo...

I've had in mind for a while (I think may have been IanSav or markus that suggested it) to allow skins to tell OpenVix their preferred value for all these settings. If the user hasn't set their own overrides.

I should also resurrect my non-reboot skin switcher. It's not end user suitable, but it's fine for skin devs. Perhaps hidden behind a "here be dragons" option it might be OK to be in the main image.

[KrisW]

If you have ways to make the list theming better, I'm happy to help. I'm probably able to call myself an expert in C++ at this stage, and I've a few years of Python too, although I try to avoid it. I considered going at the code to fix my issues, but a quick look showed there was a lot of "history" in it, and didn't have the time to do the necessary digging to find where to start without breaking things elsewhere.

Definitely the skins should offer their preferred settings, but managing the changeover from skin to skin would be interesting. Perhaps if the font size settings would follow a skin, so that changing from Skin A to Skin B, changing something, and then changing back to Skin A again would leave you back where you started, rather than "Skin A plus the change made while using Skin B"

tbh, If I had a command-line tool that just reloaded the current skin files that would make life really easy. If it could do that, and then redraw the currently-shown screen, that would be like being in heaven. Right now, I make my edits, rsync the files over to the set-top-box, then quit-and-restart the enigma2 binary, which takes about a minute to come back up, and then if it's a deep menu, I've got to pick through again.

[birdman]

Perhaps if the font size settings would follow a skinOr allow relative font sizing, as CSS does. So that you could make all text larger (smaller) just by changing the size of a the base font.

[abu baniaz]

Can I suggest that the .png files be placed in the common/regular folders instead of the many folders you have?

Any objections to placing the folder here a snot many people are confident in downloading from GitHub?

[KrisW]

Or allow relative font sizing, as CSS does. So that you could make all text larger (smaller) just by changing the size of a the base font.
Yes, I think a global text-zoom setting is better than allowing every UI screen to change its setting. Do users really want that level of control? I don't think so (And the ones who do, could still get it by editing the XML file ;) )


Can I suggest that the .png files be placed in the common/regular folders instead of the many folders you have?
No problem. I followed the layout of the Halo1080 theme, and tried to put some order on it myself. Is there a "preferred file layout" somewhere?


Any objections to placing the folder here a snot many people are confident in downloading from GitHub?
No objection at all - it's a public repository. But, as it's a work in progress, someone will have to update the copy here from what's on Github when it's updated there.

[simonc]

It's not a preferred layout as far as I can tell, but I do find it extremely helpful when the xml is split into functional area files, e.g. epg.xml, infobar.xml, movie.xml. So much easier to find the screen you need to tweak. The Slyk skins are arranged this way.

I've resurrected my non reboot skin reloader, which allows you to assign the Reload Skin action to a remote button
https://github.com/OpenViX/enigma2/pull/614

I've also got a non rebooting skin selector, which needs to be hidden behind a config item before general release
https://github.com/SimonCapewell/enigma2/commit/4c936b638b7921d1f20642e87be81c9b38cdd09c

Neither of these are especially stable, you may get a crash every 10 to 20 refreshes

[abu baniaz]

I was referring to the .png files only. Makes it fewer lines in configure.ac and makefiles when eventually added to recipes for building. It is not a big deal.

Having the separate/smaller xml files does make it easier. They are all in one place in your repo.:thumbsup:

[Huevos]

Skin looks good, but you have created a huge amount of work for yourself by not templating properly. e.g. not using an automatic button bar. The button positions are different in every screen and have very little room for extended text. In the grid EPG the buttons are squeezed up to the right hand side and the red text overlaps the green button... and the button panels that you do have are not automatic and need selecting in each screen based on the code in the .py files.

[KrisW]

I've just pushed some chages based on your feedback (thanks again!)
- moved some images to ./common: more will follow.
- non-PIG EPG now darker, buttons in same place as PIG EPG
- recordings list slightly wider (FYI there seems to be a bug in MovieList.py, at line 475 in my local copy - "iconSize" and "space" are double-counted when deciding how wide the movie title text-label should be. This causes recording titles to be truncated, even if there's enough space for them)


And I've styled a few more screens:
- ChoiceBar (plugins; blue-button)
- AudioSelection
- TimerEditList, TimerEntry
- EPGSelection

EPGSelection is really more of a placeholder, and like the QuickEPG is designed for four items in the list. It would be really good if the skin could specify this, because the default (18?) is not very friendly.

Also, QuickEPG and EPGSelection do not honour the font-size specified in the skin XML.



Skin looks good, but you have created a huge amount of work for yourself by not templating properly.
I know there's repetition in there; that's how the file I started with was laid out. I didn't, and still don't, know what screens are actually needed, and whice are cruft. The images also need a good clean out.


e.g. not using an automatic button bar.
By "automatic button bar", do you mean that there's some way of having these buttons lay themselves out nicely, or are you just referring to hiding the ones that have no function?


the red text overlaps the green button...
Yes, I mentioned that error, in passing, in my original post. It was an incorrect position in the XML, now fixed. I'm trying to strike a balance between leaving enough text for verbose labels, and not having the buttons appear visually adrift from each other.


and the button panels that you do have are not automatic and need selecting in each screen based on the code in the .py files.
If there's a better way to do this, can you point me at a guide, or at least to a skin file that does things the "right" way?

(In the meantime, I'll take a look at Sylk)

[simonc]

I think the button template would be something like this https://github.com/OpenViX/skins/blob/master/src/skins/1080/Magic-FHD/Templates.xml#L39L80

I think Halo predates this technique and hasn't been modified to use it.

[Huevos]

Yes, Magic FHD is fully automatic but uses coloured texts rather than button images (similar to confluence).

Button bar doesn't just have colour buttons but also MENU, HELP, TEXT, INFO. https://github.com/OpenViX/skins/blob/master/src/skins/1080/Simple_Ten_Eighty/skin_templates.xml#L197-L219

Simple1080 and skin_default also have complete button bars. https://github.com/OpenViX/skins/blob/master/src/skins/1080/Simple_Ten_Eighty/skin_templates.xml#L197-L219

Other skins have similar, to varying degrees, but not complete.

With templating the idea is you create one screen with title bar, pig, button bar, etc that will be used by all other screens. e.g. in skin_default the infobars are the only screens that don't use the common template. And even those screens share common templates for picons, icons, etc.

Anyway don't worry, you haven't done anything wrong, it is just that using common templates saves a huge amount of work in the long run and helps to give uniformity across all screens.