Question - Color Themes Mod (Concept, WIP)

[mgonzales71]

Marcel,

I was playing around with a concept:

option to use color themes (predefined and included with the skin)

I found this site - http://www.colourlovers.com/ has lots of great color pallets to choose from for just such a thing.

here is a modified skinsettings and a couple quick/rough color "themes" - not at all final quality - just made a few for testing.

https://dl.dropboxusercontent.com/u/2203431/titan%20color%20themes%20mod.zip

try out the code and let me know what u think...

basically just adds a setting that

enables the color themes selection in Appearance Settings or allows custom color selections via Skin Settings (as it exists now)

the thinking is to use the site I shared above to come up with some pleasing "themes" to include for use if the users don't want to bother fussing with custom options but instead just want to cycle through some nice ones you include with the skin.

Can't quite get it all to work correctly - the settings go back to "defaults" every time you re-enter skin settings - I thought I had the onload statements set up correctly to only go to defaults if nothing was set or it was set wrong.

couple pics

what am I doing wrong? - I am sure it's so obvious LOL

if you like the idea or any parts of it - feel free to fix/alter/trash any or all of it....

:-)

thanks sir!!

Mario

[mgonzales71]

Example

http://www.colourlovers.com/palette/110225/Vintage_Modern

[marcelveldt]

Hey Mario, I was think about this...What about "skin presets" ? So, we create some skin settings with colors, overlay, transparency etc. and let the user choose from a couple ?

[mgonzales71]

that sounds nice as well - I was actually playing around with learning about the colors selection in the appearance settings menu. and I almost had things working but got stuck on that one issue. you dont have to make this change to the skin - but if you liked the idea I am for it :-)

I like to play around to learn about skinning as you have seen from the past hehehe it gets to be addictive! :)

I like your idea too - so we can close this or leave it open for your new idea - either way.

I finally figured out my issue with the original problem - I needed to combine conditional statements together with a + to get the proper behaviour.

[marcelveldt]

I think the main goal should be to create something like the Aeon MXQ skin has. Just a bunch of different colours to choose from for (almost) every element in the skin.

Offcourse all these color/appearance settings hould have really good moderate defaults because I don't want to scare of the less experienced users. The defaults should be really great.

Besides that "master default" we can create some more default settings. Applying such a default would just set a whole bunch of those color/skin settings at once.

For example:

• Apply skin default appearance settings
• Apply Arctic appearance settings
• Apply dark appearance settings etc.

Pressing such a button will execute a whole bunch of "SetBool and Skin.SetString" commands...

Can you follow up ?

My main preference would be to re-skin the whole skin settings sections to a more user friendly approach like Aeon MXQ did with presenting the colors to click on (select from) etc.

For the presets you can create some screenshots as buttons to click on and so on...

[mgonzales71]

I've never used the MXQ fork of Aeon - Will have to check it out to see what you are talking about.

I know I have seem something akin to the "light" and "dark" themes in skins Nebula and Artic Zephyr.

For me the whole idea of even playing around with this as a mod for skin was the limited color choices or "palette" in the skin.

Your light / dark suggestion - that is a good idea for novice users as you said to get a quick and easy theme change for the "modern" branch of Titan - but does not address the limited color selection.

I don't know the real solution to that issue - maybe added a settings toggle under Advanced in Skin Settings to let users enable "Advanced Color Selection" - that would allow the user to enter a color in the ARGB hex notation? (ie FF002233) - too extreme? ;-)

[mgonzales71]

Oh - and as an FYI - Kodi / XBMC supports by name all the colors listed in section 4.3. "Extended color keywords" at the following link http://www.w3.org/TR/css3-color/#colorunits - I saw the xml file and that link it in the Kodi Git repo code - I don't have the link handy but I've tested various names and they work as expected.

At the very least maybe we could even just expand the current color choices in the skin a little bit by choosing some colors from that list since they are "built-in" supported colors via the app?

Check out the above link and section I referenced - it has sample color swatches so you can see what each of the colors look like.

Maybe a cool pop-up color selection dialog with just the colors in a (approximately 12x12 grid)?

something like this but each cell has a color from the list?

[mgonzales71]

found it - https://github.com/xbmc/xbmc/blob/master/system/colors.xml

[mgonzales71]

What do you think about something like this to select colors?

built this off searchdialog.xml

I kind of like it :)

[mgonzales71]

test dialog for HeaderTextColor with fully defined color list:

[marcelveldt]

Hey Mario,

sorry for commenting on this so late, I don't always get the email notifications from Github... This is exactly what I meant that should be done, it is great.

I'm not sure however if it's possible to show this dialog for all settings easily ? If not can create some python code for it so you just have to "feed" it the skin string that needs to be set and it will open the dialog...

So, what I'm thinking off is both this (a nice selector with many, many colors to choose from) to set each individual item yourself AND some nice "presets" to choose from..

This will be a great feature!

[mgonzales71]

i was thinking of asking if you could maybe add this to the helper script like a function: passing to the helper something like: XBMC.RunScript(script.titanskin.helpers,CHOOSECOLOR) or XBMC.RunScript(script.titanskin.helpers,CHOOSEBUTTONFOCUSCOLOR)?

and also

XBMC.RunScript(script.titanskin.helpers,SETLIGHTTHEME) / XBMC.RunScript(script.titanskin.helpers,SETDARKTHEME) ?

that would save on needing a bunch of files like this http://pastebin.com/ZCm1L03u

oh and had this mod to includes.xml

<include name="ExtraSmallColorKey">
    <align>center</align>
    <font>Reg28</font>
    <textoffsetx>0</textoffsetx>
    <texturefocus border="20">key-fo.png</texturefocus>
    <texturenofocus border="20">key-nf.png</texturenofocus>
    <textcolor>darkgrey</textcolor>
    <focusedcolor>eewhite</focusedcolor>
    <selectedcolor>eewhite</selectedcolor>
    <width>90</width>
    <height>90</height>
</include>  

[marcelveldt]

I am going to rework the entire skin appearance settings like you suggested. Will build a custom color picker in the image script to set any of the skinsettings with a chosen color from the dialog.

I think it's nice to get a whole bunch of colors in that dialog so that it would set everyone's need.

When that's finished I'll create some possibility to save and set presets for the skin. Fo example we can create a "artctic preset" which will make the skin feel like the popular artctic skin just by setting the correct appearance settings in titan skin.

Will keep you posted as soon as I have the first work done on this.

[mgonzales71]

yea - I really like the idea of that too!

maybe make the keys a little smaller yet and make the "keyboard" wider with colors taken from the built-in Kodi defined colors (http://www.w3.org/TR/css3-color/#colorunits) and the ability to load/save defined sets is an excelent solution to themes indeed!

I've not really seen this in any other skins - so this will be very nice indeed,

closest is arctic: zephyr that recently has added selection for color but only focus color:

even you even wanted to go so bold as to allow the ability to enter colors as ARGB hex code (advanced button?) or load user defined xml file "sets" with custom ARGB entries?

can a skin read/write data from/to say.. \userdata\addon_data\skin.helix\ ? or could just use the helper script's addon_data folder if not. just seems like using guisettings could get messy maybe?

I am excited by this new feature indeed!! :) hehe

[marcelveldt]

Hi Mario, good news!

I've made the first progress with the Color picker. If you check out the latest git version of both the skin and the helper script you can have a play with it...

All colors that can be chosen from are in the "colors.xml" file in the helper script's resources directory. I Just copied over a file I found on the web so that file needs reviewing to add all sorts of colors to it.

The first appearance settings are adjusted to use the colorpicker, take a look how easy it is :-)

[mgonzales71]

ooooh i just saw this - going to grab it now :)

[mgonzales71]

Amazing work Marcel! :)

couple of thoughts...

I haven't had a chance to test it out on a touch/mouse device yet - so may need to verify all is good there.

also - what about low power systems? maybe a simple color picker for those if needed?

I will jump back into testing and comment more later - first impression.. very cool!!

[mgonzales71]

some more thoughts:

convert all the ARGB hex to lowercase (ie ff112233 except the ones you want at the top of the list) and then sort the colors in the color picker by ARGB alphabetically - it will make the color pallet more "uniform" for the color selection - try it and you will see what I mean.

In skin settings (this may be not needed if you add the ability to load and save color themes - but a "reset all colors to defaults" would be nice if that feature is not added - if it is a "defaults" theme will solve this)

I love the expanded skin color selection options too!

[mgonzales71]

oh i like that you have the color names - so if you do sort the list as I suggested - still leave the names.

I guess you could have a side slider option tab with sort by name or ARGB if you are torn on which to go with,

[marcelveldt]

Mario,

The colorthemes/presets are the next step, first I'd like to get this colorpicker thing ready. Already pushed it to the skin beta to let some users test/comment it.

I just checked in a change on Github that will sort the list on argb value, please try if it is what you mean.

[mgonzales71]

can you sort by ARGB like you did but in the list be able to type like - B-L-A and jump to the name "Black" like it did when you sorted by the color's name before the sort change?

[marcelveldt]

I'm afraid that won't be possible.. the list is sorted on ARGB or the name... The only thing I can think of is to add a toggle to switch between them.

[mgonzales71]

hmm - well a toggle is better then nothing - plus both sorting methods are helpful anyway

[mgonzales71]

hey - I noticed every time the color picker comes up now, it starts on the same color (not the color currently set) - before it would remember (I think).

Also another thing I noticed. if you hold down (shift) and type b-l-a-c-k real quick it will jump to black.

same for other letters (shift) g-r will jump to (gr)een or variants of.

maybe there should be at the top of the list a grouping (using capital letters in ARGB for sorting or by code) of "a basic color list" roy-g-biv (red-orange-yellow-green-blue-indigo-violet), black, white, grey, etc (the colors you would for instance see in a basic "paint" program)

could display just these basic colors on "low powered" systems if for instance the Pi is having problems with this feature - I don't have access to one to try it out - do you?

that's all for now on thoughts for this feature - love what you have done so far!!!!!

thanks again sir!

[marcelveldt]

Hi Mario, will look at your issues/suggestions later. As for the performance: It should work well on low poewred devices too altough I didn''t test it yet.

I've done the first work today on another very cool feature.. The skin themes support. Please check out the latest git version and give it a try. Cool is that you can save your settings in the skin to a preset. The preset is saved to a file so users will be able to setup the skin to their liking and share the preset with the reset of the world. Please feel free to make some presets and send them to me.

I will let you know how to include extra "skin defined presets" into the skin later

[mgonzales71]

ok - let me go sync up git and install and test for you.

off topic - I noticed a real quick "check mark - box" thing earlier and i thought I was seeing things - found you had added that to dialogselect - i didn't know you could do that hehe

that could be useful for touch screen folks who have like a slower tablet to know that input was received and they just need to be patient.

[marcelveldt]

yeah, the default was a radiobutton in there which I didn't really like so I added a checkbox to both the dialogselect and the filemanager.

[mgonzales71]

was it included for the reason I speculated?

haven't fired up the skin update just yet - so i could answer this myself by doing so but... how far do themes go?

are for example - backgrounds, custom overlays, etc saved?

let me just go and test this - all excited to see

brb :smile:

[marcelveldt]

all appearance settings should be covered, so all color settings.

No custom backgrounds or overlays because that will mean I have to copy the file sover or something..

[mgonzales71]

here is a theme for you to test - https://onedrive.live.com/redir.aspx?cid=599da6bd82779e65&resid=599DA6BD82779E65!4606&parId=599DA6BD82779E65!4605&authkey=!AJihvTYvK-n_Yws&ithint=file%2czip

when I created a theme - after saving it my color settings changed to I am guessing "default" but I was able to select what I just saved and restore them.

[marcelveldt]

yeah, there are a few bugs in there which I need to fix.. I will give your theme a go

[mgonzales71]

since you offer a screenshot with the theme - maybe you want to zip them together? don't know if that is available across platforms or not - so could be problematic - if they can share a ,theme file I am guessing they can handle a jpeg too hehe

[mgonzales71]

i noticed you save titanskin.* and titanskin.helix.* - may want to check what skin is in use and exclude other settings - could end up with a theme changing settings in wrong skin

[mgonzales71]

be aware of that in case you don't want settings changed in the other skin if you load theme I sent

[mgonzales71]

if you get odd settings like -["bool", "TITANSKIN.EnableSkinColorTheme", "false"], ["bool", "TITANSKIN.EnableSkinColorExpertMode", "false"], ["bool", "TITANSKIN.ExpertColorMode", "false"] it was from me testing theme and colors like this at early stages on my own :smirk:

[marcelveldt]

1) yeah, I can zip it too but I need fast access to the files for the listings so decided to leave the two files apart... It's working btw: just installed your green theme :-)

2) Please pull latest changes from the zkin and test, fixed a few things.

3) Look in the skin "extras" subfolder. I've added your Envy theme there too. So in that folder we can provide themes to include with the skin. Open the theme file in notepad++ and notice the first settings: you can type an alternate listing name in there and a discription. The other stuff should be left alone.

4) Yeah you're right about skin.titan and skin.titan.helix but nothing that can be done about it because of the way that stuff is stored. skin.titan.helix and skin.titan both contain the phrase skin.titan...

[marcelveldt]

5) Please test if all settings are indeed stored in the theme. I store every skin setting that contains "Color" or "Opacity", I might want to add some more if I know which.

Please test and let me know if anything should be added to make it a valid feature.

Also, if you like, add some themes to the skin folder in a PR.

[marcelveldt]

6) Oh and don't know if you noticed but I have also enabled a contextmenu for the theme entries, to delete your custom themes etc.

[mgonzales71]

re: "4) Yeah you're right about skin.titan and skin.titan.helix but nothing that can be done about it because of the way that stuff is stored. skin.titan.helix and skin.titan both contain the phrase skin.titan..."

if running helix - grab only titanskin.helix.* (grep "titanskin.helix." > .theme)

if running isengard - grab only titanskin.isengard.* (grep blah blah... hehe)

and add as new skin variants are released

if running just titanskin do something like grep -v "titanskin.helix." | grep -v "titanskin.isengard." > .theme?

i saw the context menu - may want to add "change thumbnail" to the list

let me go grab an update and do more testing :)

[marcelveldt]

The official version of the skin is always named skin.titan... so for Gotham, Helix and Isengard it's always just skin.titan.

Only the beta has been prefixed with .helix back then...

I get every setting in Kodi that begins with the skinname. When you have both the beta installed and the stable iut will grab skin.titan.helix too if you do this from the stable version. If you run from the beta there's no issue.

[mgonzales71]

ah ok - when i better go clean up the .theme you checked in because I saw it has some settings I had used for personal testing - oops :) hehe

after I installed the latest from Git the color theme panel was blank - I did a reload skin and re-installed the helper and it shows now - dont know which of those two fixed it what was going on

I didn't see any errors in the log file...

I guess if it doesn't happen again it can be ignored - just was weird

I will play around more today and get some theme's together and let you know if I have any suggestions.

\ one thought I just had is - maybe create a window/dialog that can be loaded for screenshots (custom_colortheme-preview.xml?) that shows off the various colors all on one screen -- could add it under the context menu as "preview" - that way all the screenshots would look similar and also allow folks to "preview" a theme in a standard way as well.

this would pair nicely with a context menu option to "add / change thumbnail" **

[marcelveldt]

OK, please test and report any issues or requests you may find.

As for the preview.. Isn't that where the thumb is for ? I can add in a preview which will show the screenshot fullscreen ?

[mgonzales71]

no preview would load a custom_ .xml file

if would be a test page that shows the various color theme settings on one windows/dialog/screen.

could show a fake header, fake footer, a panel with opacity, the overlay with opacity, focused button, unfocused button, list, media list, sample home tile image, etc all on one test page.

that would also let folks use that to grab a screenshot that was common/same that showed all color settings at once - letting them share the image online but also save as a thumbnail

that added benefit of a preview feature that would load that page with the settings of the theme to let users preview in skin and then go back to the settings they had before after viewing it (onload to save current to temp fie, onunload to restore?)

so you would need to I guess save settings in a temp file, load the settings from the theme, display the preview page, then re-load the saved settings from the temp file to go back to what was set.

I know i am doing a bad job of explaining this - sorry.

don't worry - let me focus on testing and making some theme to share and I will let you know if I find any issues / more suggestions.

[marcelveldt]

well, that would be a whole different story and a lot of work. Don't even know if it's possible. Let's first work with this and the screenshots and maybe add extend with that feature later on.

I was just thinking... would it be a good addition to let the user choose from some overlay images ? That way you can choose a overlay image/texture, choose the color for the overlay and you can even choose a custom overlay.

[mgonzales71]

I think so - the overlays I created had a diffused texture component in addition to the color component. so you could want one or the other or both. so - allow color overlay choices (with none as an option) and also maybe restore the orig overlays and the ability to have none or a custom one.

what I was talking about above was something like this:

http://pastebin.com/Jt4wEBV8

copy that to a file named "Custom_ColorThemePreview.xml" in your 1080i folder, reload the skin and then create a shortcut or keybinding to do this command: ActivateWindow(1122)

this is what I quickly threw together to show you sort of what I meant...

it still doesn't show and example of the media text colors but you get the direction I was going... you could load a theme temporarily - display this window and then onunload restore the settings to what they were before previewing.

(updated pastebin link and screenshot)

[mgonzales71]

Latest:

http://pastebin.com/WfsBKgyd

I need to work on some color themes now so I will stop playing around with this preview page if you want to expand on it, use it, etc you are welcome to, to-do: OSD panel opacity, media details panel opacity, general panel color and opacity - was going to make 3 equal sized panels on the right as examples and maybe text label in the panel with it's %'s - think that is all that needs to be shown in a preview unless I forgot something.

[mgonzales71]

here is what modern default preview looks like:

[mgonzales71]

I think you should allow the user to set colors and opacity for:

footer panel media details panel osd panel other / general panels (create) . here is the latest work done on preview dialog/window...

moved it to the resources folder of the helper script.

[marcelveldt]

OK, I will add the extra options in. So for the panels we will have:

• footer panel color and opacity
• general panels color and opacity
• media details panels color and opacity

right ?

I will also change the overlay section a bit so the user can change the overlay texture from the bgoverlays folder

Please pull latest version as I changed a lot of all the textures in the skin. mostly to get a consquent experience across the skin and minimize differences between classic and normal theme

[mgonzales71]

dont forget OSD panel color and opacity too.

[marcelveldt]

OK, I'm currently adding the overlay texture selection dialog.. Will checkin in in a few minutes. Will add the extra panel color settings after that.