MDM HTML5 Themes

Show your artwork
Forum rules
No support questions here please

First attempt at configuring 'Layout' vs 'Styling'

Postby philstix on Fri Jan 31, 2014 2:36 am

I've been thinking about Clem's wish for a way to separate MDM theme logic from artwork. It seems to me that requires removing all hard-coded references to any particular artwork from the html, the javascript and the css, otherwise everyone will have to dig into the code to change anything. That means the artwork has to be referenced in an external file somehow.

My first attempt may not be what Clem or anyone else wants, and I don't know enough about future standards to be confident it is a viable long-term solution, but it works on my machine at the moment, both in the mdm-theme-emulator and at boot-up.

The method I've come up with relies on using the XMLHttpRequest() function to read one or more conf files containing the relative paths to the desired artwork. I don't know if the use of XMLHttpRequest will be a problem for anyone - I don't have Apache or any web server set up on my system, just Mint 16 KDE and a few extra apps, and it seems to work without any problem.

So far, I've only used it to provide paths to background artwork and logos, but there's no reason why it couldn't be used for other information as well. I have created a 'conf' subdirectory to contain all the conf files. The file 'background.conf' contains a simple list of relative file paths to one or more background images, and similarly for the logo.conf containing a list of relative paths to one or more logo images.

It's easy enough to parse the file contents into an array of strings, check them for validity, and assign a background image and a logo image to the elements within the page.

It should also be fairly straighforward to use more complex parsing such as key:value pairs or even the sectional format used in a lot of .conf/.ini files.

The limitation in this method is that images have to conform to the dimensions required by the layout. It's not a problem for background images, but inline things like logos or other images need to be the correct size or they wouldn't work, either being scaled badly or breaking the layout.So the artist would have to be aware of the limitations for the images within a particular layout. This information could be included with the theme for anyone wanting to customise it.

Using this method, then, it seems to me there are two identifiers required to distinguish a particular theme: the layout/logic and the artwork. For example, I could have called the layout/logic of my first (and only) theme 'Randomiser' and the artwork could be 'Randomiser[KDE-FractalFlames]'. If the artwork was adapted to a different layout/logic, say 'Whatever' it could be named 'Whatever[KDE-FractalFlames]' or 'KDE-FractalFlames(Whatever)'. Or something like that.

Anyway, that's my two cents worth. I hope it helps, but at the least it might be a stepping stone to a better solution.

I've attached the JavaScript file if anyone wants to have a look at the script I've worked up so far. If anyone wants the whole theme to play around with let me know. I haven't uploaded it to any sites yet because I'm not sure it's going to work for everybody. I'm still looking for reassurance about the XMLHttpRequest function's reliability in this context.

Oh, and I've also used the 'module' namespacing pattern to try to avert any naming collisions, with the root namespace 'mdm_html_theme'.

And sorry about the 'Allman' coding style, but I find it much easier to read than KR - yes I know JavaScript is hard-coded for KR, but I don't have to like it, lol. (Stupid automatic semicolons... sheesh...)

Phil Wright
Attachments
randomised.js.zip
(8.23 KiB) Downloaded 52 times
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Linux Mint is funded by ads and donations.
 

Re: First attempt at configuring 'Layout' vs 'Styling'

Postby philstix on Sat Feb 01, 2014 5:20 pm

Ok, I've done a bit more reading and I've learned that the webkit library is the underlying engine used by mdm-display-manager for html themes.

Because webkit acts as a small web server, it provides the necessary support for the XMLHttpRequest function that I was concerned about. And as mdm-display-manager has libwebkit as a dependency, the presence of webkit can be assumed and the reliability of XMLHttpRequest for HTML themes will not be an issue.

This means that XMLHttpRequest can be relied upon to read files via relative paths, such as theme configuration information from .conf files.

So now I can start setting up my theme for customisation (skinnable themes, anyone?)

The remaining question is whether anyone else wants to do html theme customisation this way.
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Configurable theme available

Postby philstix on Tue Feb 04, 2014 7:00 pm

I've developed a theme to test the configuration possibilities using the XMLHttpRequest method, and it seems to be working ok.

It still requires users to edit the conf files, but it means that people can add new backgrounds and logos, and change the CSS colours of most of the elements in the theme - background colours, borders, text colours, etc. - without hacking the source code.

If you want to check it out it's on DeviantART and KDE-Look. It's based on my RandomFlames theme, so by default it looks the same. It's called EgConf (ie. configuration example).

I've also included a JSDoc reference detailing all of the JavaScript functionality if anyone wants to check it out.

http://philleft.deviantart.com/art/EgConf-431854330
http://kde-look.org/content/show.php?content=163297
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Configurable theme update

Postby philstix on Thu Feb 13, 2014 4:46 am

Working from the premise that if something is worth doing, it's worth overdoing, I have updated the configurable MDM HTML theme 'EgConf'.

The latest version allows the clock display to be configured via a format string in 'clock.conf'.

The clock display has been internationalised and it will now automatically show the date and time in the currently selected language. The theme includes the Unicode font 'FreeSans' which contains glyphs for most languages - including Chinese, Arabic, etc.

Both of these clock changes are due to the inclusion of the Moment.js JavaScript library and it's associated translations for a large number of languages.

I have also added a basic customisable help dialog accessible via a 'Help' button or the F1 key. It displays a series of images as configured in the 'help.conf' file.

Details of how to configure these options, as well as the previously mentioned background images, logos and css colours, are in the readme file, the .conf files themselves as well as .info files in the /conf subdirectory.

This version also makes more extensive use of inline SVG images, and fixes a few small imperfections I found after I uploaded the last version.

There are some style changes. and the OS description text has been embedded in a circular SVG path that orbits the logo, automatically adjusting it's font size according to the length of the text it has to fit into the circular path. Oh, and there's a new SVG logo too, in addition to the 3D logo. At the moment one is randomly selected, but it's a simple matter to comment one out in the .conf file, or even add your own and use that instead. The size restriction on logo images has been removed.

As before, there is a JSDoc reference for anyone wanting to use this as a foundation for creating their own themes.

The themes are available for download from http://philleft.deviantart.com/art/EgConf-431854330 and http://kde-look.org/content/show.php/EgConf?content=163297.
Attachments
screen-shot.jpg
The login display
screen-shot2.jpg
The language selection dialog
screenshot3.jpg
The new help dialog
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

More screenshots for EgConf

Postby philstix on Thu Feb 13, 2014 4:24 pm

Just another couple of screenshots showing how the clock display immediately switches to the newly selected language.
Attachments
mdm-screenshot-10.jpg
Chinese
mdm-screenshot-11.jpg
French
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Re: MDM HTML5 Themes

Postby hb1547 on Wed Feb 19, 2014 2:03 am

clem wrote:Hi everyone,

The next MDM will bring user pre-selection. In other words, the last user who was logged in, will be automatically selected by MDM and the user will only have to input his password.

When MDM selects the user, it will tell your theme by calling the following new function:

mdm_set_current_user(username)

You need to add that function to your HTML theme and basically highlight the selected user.

The link below shows how this was done in the Cloud theme:

https://github.com/linuxmint/mint-mdm-t ... 4048fdfd7b

As you can see, in mdm_add_user(), for each user, I put the username in the row object (in row.username). At the bottom I use mousetrap to call my own select_user_at_index() (to browse through the table of users), and in mdm_add_user() I also make it so clicking on a user calls alert('USER###'+username); ... wherever you call alert('USER', username) that will tell MDM who the user you want to select is, and MDM will come back to you by calling mdm_set_current_user(username)... so you only need to worry about highlighting the user graphically in mdm_set_current_user().

One last detail, mdm_prompt is called when the user presses escape or the login screen is reset. In there, I reset my selected_row to -1... so next time I press up or down, it doesn't start from where I previously was.

Support for this is in MDM 1.3.2 available in git. Let me know if you need debs for it.



This addition looks like it broke my themes, and I've been working for a while now on fixing them.

So am I understanding this right?
- When a user is selected (in whatever way), the theme should call alert('USER###' + username).
- Then, MDM will call mdm_set_current_user(username), and in that function I should do any display calls that need to happen.
If so, is this how it's currently handled in mdm-theme-emulator? Some testing makes it look like that's not the case.

The main problem I'm having is troubleshooting a broken theme that works fine in mdm-theme-emulator, but when loading as an actual login screen, I simply get "An error occurred loading the theme ____" (or something to that effect).

I'm not sure where to begin troubleshooting. I enabled logging, but haven't found anything that at all looks indicative of the problem. What should I be looking for? Also, when MDM fails to load a theme, how can I properly log in and have an X interface without manually editing /etc/mdm/mdm.conf and rebooting?

Obviously not just asking Clem, I'll be grateful to whoever can help me out with any of these parts.
hb1547
Level 1
Level 1
 
Posts: 20
Joined: Sat Aug 18, 2012 4:03 pm

Re: MDM HTML5 Themes

Postby anandrkris on Wed Feb 19, 2014 2:46 am

For logging in when MDM theme fails, try this
http://blog.linuxmint.com/?p=2524#comment-103465
As a workaround you can log in via the console (ctrl+alt+f1), “sudo killall mdm” and “startx”. Then launch mdmsetup or “Login Window” from the menu to select a theme. I’ll update ubuntu-system-adjustments to make the transition smoother for other users.
Cheers,
If there is a drive, there will be a path
User avatar
anandrkris
Level 5
Level 5
 
Posts: 861
Joined: Fri Nov 16, 2012 1:13 am
Location: Chennai

Re: MDM HTML5 Themes

Postby philstix on Wed Feb 19, 2014 4:58 am

@hb1547

It looks to me like the JavaScript function 'mdm_set_current_user(username)' used in the Clouds theme is broken.

Code: Select all
 function mdm_set_current_user(username)   {
         var table = document.getElementById("users");
         var rowCount = table.rows.length;         
         for (var i = 0, row; row = table.rows[i]; i++) {
             if (row.username == username) {
               row.setAttribute('class', "selected-user");
               selected_row = i;
            }
            else {
               row.setAttribute('class', "normal-user");
            }
         }         
      }


The variable 'rowCount' is initialised but never used.
The 'for' loop uses 'row = table.rows[i]' as the comparison condition; presumably it was supposed to be 'i < rowCount'.

To get this to work you'll have to write your own version of 'mdm_set_current_user'.

In terms of debugging, one of the things I did was to temporarily add an absolutely positioned 'textarea' element in the page and sent debug messages to that - that way I could see the messages immediately while the login theme was running.

I use JQuery for mine, and I've got my functions inside a namespace module, but this is what I use:
Code: Select all
    function set_current_user(username) {
        var table = $('#users');
        if (table.length) {
            $('#users tr').each(function() {
                if ($(this).get(0).username == username) {
                    $(this).addClass('selected-user');
                }
                else {
                    $(this).removeClass('selected-user');
                }
            });
            table.get(0).username = username;
        }
    }


P.S. Thanks for raising this issue - it motivated me to finally look at the 'Cloud' theme code I was still using in my theme, and which I knew wasn't working properly in setting the current user display. Now I've thrown that code above into it, it works perfectly :D
Last edited by philstix on Wed Feb 19, 2014 6:08 pm, edited 1 time in total.
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Another EgConf customisable theme update

Postby philstix on Wed Feb 19, 2014 8:36 am

I've updated my customisable theme EgConf again.

This update adds the ability to configure the location of some of the theme's elements, and to resize the logo, all from .conf files.

Change log:
    Added layout configuration options to allow custom positioning of theme elements and resizing of logo
    Added a custom error handler for XMLHttpRequest
    Cleaned up asynchronous function calls and added error handling functions where appropriate
    Implemented constant properties
    Fixed the broken 'set_current_user' function inherited from the 'Clouds' theme
Attachments
screenshot_800x600-fs8.png
A screenshot showing theme elements repositioned and the logo resized
life.height < E
User avatar
philstix
Level 1
Level 1
 
Posts: 10
Joined: Tue Jan 28, 2014 5:14 am
Location: Brisbane, Australia

Re: MDM HTML5 Themes

Postby hb1547 on Wed Feb 19, 2014 9:25 pm

philstix wrote:To get this to work you'll have to write your own version of 'mdm_set_current_user'.

In terms of debugging, one of the things I did was to temporarily add an absolutely positioned 'textarea' element in the page and sent debug messages to that - that way I could see the messages immediately while the login theme was running.


Thanks for the input!

I'm actually not using any code from the Clouds theme, I've been writing my own from scratch, using Clouds as a reference to guess how mdm_set_current_user() is meant to function.

I've also been sending text messages to the theme's HTML for debugging. This works well, except for the problem I'm having: the theme never loads, all that I see is that there was an error loading the theme.
hb1547
Level 1
Level 1
 
Posts: 20
Joined: Sat Aug 18, 2012 4:03 pm

Re: MDM HTML5 Themes

Postby hb1547 on Wed Feb 19, 2014 9:50 pm

hb1547 wrote:
philstix wrote:To get this to work you'll have to write your own version of 'mdm_set_current_user'.

In terms of debugging, one of the things I did was to temporarily add an absolutely positioned 'textarea' element in the page and sent debug messages to that - that way I could see the messages immediately while the login theme was running.


Thanks for the input!

I'm actually not using any code from the Clouds theme, I've been writing my own from scratch, using Clouds as a reference to guess how mdm_set_current_user() is meant to function.

I've also been sending text messages to the theme's HTML for debugging. This works well, except for the problem I'm having: the theme never loads, all that I see is that there was an error loading the theme.


Good news -- I've figured out the error loading the theme: it was a permissions error, probably from when I transferred the theme between computers. A simple chmod fixed that.

Now to fix my js, but that's at least within my realm :)
hb1547
Level 1
Level 1
 
Posts: 20
Joined: Sat Aug 18, 2012 4:03 pm

Re: MDM HTML5 Themes

Postby genogebot on Wed Feb 19, 2014 10:19 pm

Glad to hear you got it sorted... and I know what it's like. I've been caught out by permissions lots of times while using Linux, often resulting in baffling errors that I usually worked out only after I'd tried everything else :lol: .
genogebot
Level 1
Level 1
 
Posts: 26
Joined: Sat Jul 03, 2010 1:09 am

Re: MDM HTML5 Themes

Postby hb1547 on Thu Feb 20, 2014 1:23 am

It's one of the most fundamental things, yet somehow it's the last thing I check.



Anyway, I think I fixed my Synergy theme now. If you anyone wants a fixed version, you can get it at http://xatal.com/synergy.tar.gz. I'll try to fix my other two soon.
hb1547
Level 1
Level 1
 
Posts: 20
Joined: Sat Aug 18, 2012 4:03 pm

Re: MDM HTML5 Themes

Postby Zorba on Sun Feb 23, 2014 8:33 pm

Taking into consideration MDM and Mint screensaver styles, I have created a heavily polished bootsplash that cycles many colors at startup and only one color at shutdown and I want to create an MDM theme that matches it? i.e. an MDM with a color-cycled background but I don't know where to start. Can anyone do this theme for us please :D

bootsplash download link: http://kde-look.org/content/show.php/fashion%3A+Linux+Mint+plymouth+theme?content=163633

Image
Image
Image
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2274
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: MDM HTML5 Themes

Postby cdustybk on Thu Apr 24, 2014 11:37 am

Zorba wrote:Taking into consideration MDM and Mint screensaver styles, I have created a heavily polished bootsplash...


That looks great! I've been looking for something like this for years. What font is that?

...and I want to create an MDM theme that matches it? i.e. an MDM with a color-cycled background but I don't know where to start. Can anyone do this theme for us please :D

Do you mean a theme that basically shows these screens as backgrounds and changes between them every so many seconds? I wouldn't mind trying this out.


Also, I'll be honest and say I haven't read all the posts since last time I logged in. Has any progress been made toward separating the background logic from the rest of the theme? I'd be up for helping on e.g. a pyGTK frontend for the logic...
cdustybk
Level 1
Level 1
 
Posts: 13
Joined: Thu May 23, 2013 1:57 pm

Re: MDM HTML5 Themes

Postby Zorba on Thu May 08, 2014 12:30 pm

I have updated that theme and my friend Thee Mahn, Ultimate Edition OS founder, has repostormed it and create the file deb for me. Find the new version here http://gnome-look.org/content/show.php/aurora-borealis%3A+Linux+Mint+bootsplash?content=163634 :D
Image
User avatar
Zorba
Level 8
Level 8
 
Posts: 2274
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

Re: MDM HTML5 Themes

Postby jijames on Thu May 15, 2014 12:36 am

Hey everyone,
I've seen a few 'Matrix-style' themes. I wanted practice so I made one that uses canvas, and is based off of Mint-X theme. Could be improved a lot, but it is a working example.
https://github.com/hvva/mintLoginThemes
Attachments
screenshot.jpg
MDM theme matrix test
Joshua James | جوشوا جيمس | 제임스 조슈아 | ジョシュア ジェイムス
Cybercrime Technologies | http://Cybercrimetech.com
Digital Forensic Investigation Research Laboratory (DigitalFIRE) http://digitalfire.ucd.ie
PGP: 0x9D635AE7606B15C4
User avatar
jijames
Level 1
Level 1
 
Posts: 5
Joined: Sun Jan 05, 2014 11:30 pm

Re: MDM HTML5 Themes

Postby xsog on Tue May 20, 2014 5:31 am

samriggs wrote:Alrighty I got the first one done.
I did try some extreme insane animation with particles and strings etc but it threw the whole thing off including all the top measurements, so I'll fool around with that one later one and recode some other parts to stop that from happening.
I opted for some simple css animations which makes things run a lot smoother and quicker, I took the idea of the animiation from a android nexus old wallpaper it's really simple but looks ok.
For a first one it's simple but quick, I kept a lot of the layout that previous there and didn't change much, just some colours and added some more stuff to it instead.
I want to do a full blown steampunk one with blimps and old planes flying (animated in a sprite sheet) etc etc, similar to my live wallpaper I did for android but this might better suited for a screen saver as it might slow down the login page which is what I am trying to avoid (I hate waiting for a login page to load).
So here it is for anyone that wants to take it for test run and please let me know if you find any bugs, I only tested it on my laptop so only one screen resoltion plus the emulator.
Here is a screenshot from the emulator

metalmint.png


I added a link to the file (it was to big to put here and on linux mints art site so I had to choose a zip compression for deviantart instead of tar.gz (just unpack it and recompress it as a tar.gz if you want the ease of installing it.
You can get it http://samriggs.deviantart.com/art/Meta ... 1362540172
Enjoy
Sam

cool and you send us a link for it. :D
User avatar
xsog
Level 2
Level 2
 
Posts: 63
Joined: Wed May 07, 2014 8:38 am

Re: MDM HTML5 Themes

Postby xsog on Tue May 20, 2014 5:43 am

never mind i see the link now! :D :D
User avatar
xsog
Level 2
Level 2
 
Posts: 63
Joined: Wed May 07, 2014 8:38 am

Re: MDM HTML5 Themes

Postby philer on Fri Aug 08, 2014 4:19 am

I've just posted a new theme in another thread and I noticed that I'm using some of the same ideas philstix
has been talking about. I also used requests to load config files, although I'm relying on jQuery to do so.
If you care to take a look at the project you'll find an easy to use config loading module as well as a
wrapper for MDM's API. That should make it easier for people familiar with JavaScript development to
create their own themes.

Presentation thread | github
screenshot.jpg
“Stand back, I'm gonna do science!”
User avatar
philer
Level 1
Level 1
 
Posts: 6
Joined: Wed Aug 06, 2014 9:10 pm

Linux Mint is funded by ads and donations.
 
Previous

Return to Other artwork

Who is online

Users browsing this forum: No registered users and 2 guests