MDM HTML5 Themes

Submit your artwork to make Linux Mint look better
Forum rules
Topics in this forum are automatically closed 6 months after creation.
Locked
cef1000

Re: MDM HTML5 Themes - Mint 15/KDE

Post by cef1000 »

Solved:

Ok so after repeatedly trying everything else and seeing as how these 2 themes would work both in the home directory and in the /usr/share/mdm/html-themes directory using a browser and the emulator..... I took the unpacked zip in the home/user/Downloads directory and used dolphin to make a tar.gz file; then opened the MDM Login Manager and "added" it using the manager and BLAMMO ! both work great !!!!! :?

Moral of the story: Bigger Bader Hammer or When all else fails punt.... :lol:

Go Figure; not sure what the difference is between this and copying the folder to the proper directory, but... It Works..

Maybe will help someone else struggling with it.

BTW, this is not a production box for me so I'm happy to attempt breaking or fixing anything else you might need help testing... 8)

Thanks Sam for all the wonderful Themes..

cef1000
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Brahim wrote: here is a guy named Ionel Ghidarcea who already made an animated wallpaper wioth this one you can find it at [url]http://www.youtube.com/watch?v=7Go8kX3VMdA[/url]
Looks like it's already done, not a big fan of taking someone else's idea and just adding stuff to it, I usually like to try and make it from scratch, I avoid copyright issues that way, but this one is already made as a live wallpaper for kde by the looks of it, That's the system he;s using, if you got kde just hunt it down and install it.
I still am limited in my time and have around 10 projects on the go, If I find time though I have one similar in mind that I want to try some experimenting on, not the same but along the same concept, just different things in it, but hey you can do it, it's all simple css animations by the looks of things and should not be hard to do, there enough themes out there that you should be able to piece it together , the blurs getting brighter and dimmer can be done in my sprite sheet code, move them around in css by percentage or left to right and top and bottom.
anything not moving, you can use opacity and percentage to get that effect (like the water)
the draginfly is a sprite sheet (same sprite code) just change the size I added a tutorial and the code for this under the snippet thread, the movement again in css using left right top and bottom that way it'll move up and down and sideways, if you want it to pivot and spin and stuff try using rotation with degrees as well toss it all into the mix :lol:
until you get the desired effect.
Hope it helps you out, the one I'm making won't be out for awhile, I got two games to get out as soon as possible, one has about a months worth of artwork in it so I'll be a bit :D

cef1000
:lol: your having quite the time there, ya devintart doesn't allow me to upload tars at all, I even tried hiding it in a zip and nope it refused it, so ya just re-compress it and drag it into the login manager html section and it will install no problems, forgot to mention that sorry about that, I just took it folks knew about that but not all do so my apologizes.
Ran in emulator and they also worked, but, got this message in the terminal window: ** Message: console message: file:///home/cfriedman/Downloads/MDM%20HTML5%20Themes/SteampunkFutureCity/js/bootstrap.min.js @6: TypeError: 'undefined' is not a function (evaluating '$')
Ignore it, it don;t do nothing it's one line in that file usually something like

Code: Select all

 $(function () {}
the function doesn't have a name so it's undefined.
It still works, just looking for a definition when there is none, no biggy.
BTW, this is not a production box for me so I'm happy to attempt breaking or fixing anything else you might need help testing... 8)
I'll probably take you up on that since your using kde by the sounds of it (your using dolphin) so it would be good be to have it tested on a different system, thanks :D
I'll let you know when I get to the testing phase of this experiment I want to do, plus I have two other ones I want to try.
One will allow users to have a slideshow where they can add the photos themselves (not sure yet how that's going to play out I got to do some experiments with it) so you can have a slideshow of family and friends or whatever, I want to check into resizing images etc so they fit, the next step is can I read a file on the home directory from the login screen? things that make you go hmmm, that way I can add a slideshow add photo link or whatever or they will have to do it manually and put a copy into the theme folder, another is to allow users to change the settings on the theme from the theme itself, via a setting buttons, so colors, images animations etc can all be changed, sort of a multi theme in one, mix and match to make your own from what's available, so it could turn out to be something like 50 various ways you could configure it, the next one will be my experiment with drag and drop with bounce etc so you can move things around and they bounce back with other animations, and lastly one I thought of last night, mazes, make a random maze generator so you can do a little maze before going in if you want to fool around a bit, you won't need to complete it before entering, just a little fun that's all, and maybe a full blown ww2 shoot down the airplanes game, defend your turf against nasty bombing ww2 planes :lol:
Ya that one will be on a back burner for awhile.
But yup as mine get more complicated I will need a tester.
I'll tell all testers how to use startx and change the themes through the root directory just in case anything goes wrong, but it looks like that is fixed now and it reverts back to the default one so you don't have to use startx anymore :D
Sam
anandrkris

Re: MDM HTML5 Themes

Post by anandrkris »

All,

Just want to know if old themes are comaptible with latest MDM version in mInt 16? I happened to copy all the previous MDM themes (/usr/share/mdm/html-themes/) i had downloaded earlier in Mint 13 (laptop) to my new Mint Box 2 that runs Mint 16 Cinnamon. (yes, leave no opportunity for bragging :-D). Unfortunately, they're not working. Is there any small amendments to theme I can do to make them work?

I particularly like elegant Synergy and geeky Matrix theme. :) Any plans / new versions available? I just wish that MDM themes get hosted soon on spices site. I think Clem has plans for it - Spices to have more than cinnamon specific utilities (applets, desklets,etc).

@samriggs - I guess most of your themes are udpated as well. Currently running Galaxy - is there a way I can make astronaut appear faster (have to wait a while, i have set auto login at 30 seconds)and also make the movement lttle random / [url=http://en.wikipedia.org/wiki/Brownian_motion]Brownian motion[/url]?
It so reminds me of Gravity movie. :-)
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

anandrkris wrote:All,
@samriggs - I guess most of your themes are udpated as well. Currently running Galaxy - is there a way I can make astronaut appear faster (have to wait a while, i have set auto login at 30 seconds)and also make the movement lttle random / [url=http://en.wikipedia.org/wiki/Brownian_motion]Brownian motion[/url]?
It so reminds me of Gravity movie. :-)
The animation for the spaceman is strickly css, very basic, if you want random movement you would have to do that through javascript instead.
I'm solydk now instead so I don't use the mdm through mint right now, I had to switch so I could use my tablet as cinnamon no longer supports the wacom drivers for now, they might add it in mint 17 but for cinnamon 2 in normal mint and lmde cinnamon 2 is it no longer supported for now.
But if you look in the galaxy.css file you'll see the code for the spaceman it is this part

Code: Select all

.spaceman{
     width:266px;
     height:300px;
     background-image:url('img/artwork/spacesuit.png');
     position:fixed;
     top:25%;
     animation:spaceman 80s infinite;
     animation-timing-function:linear;
     animation-direction: alternate;
    -webkit-animation:spaceman 80s infinite;
    -webkit-animation-timing-function:linear; 
    -webkit-animation-direction: alternate;
}
@keyframes spaceman
{
from { left: -50%;}
 to {left:  150%;}
}

@-webkit-keyframes spaceman
{
  from { left: -50%;}
 to {left:  150%;}
}
If you want to change things around the measurment goes from left to right (you have to change it in both)
if you want it to show sooner instead of -50 make it less, if you want it to appear quicker after it went pass the right side make it less then 150% but not less then 100 + spaceman size.
top:25%; means how far down it appears from the top
80s infinite; is the speed it moves
animation-direction: alternate; means it goes back and forth
Hope it helps you out
Sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

anandrkris wrote:I particularly like elegant Synergy and geeky Matrix theme. :) Any plans / new versions available?
Which/whose Matrix theme? I've counted a few going through this thread.
anandrkris wrote:I just wish that MDM themes get hosted soon on spices site. I think Clem has plans for it - Spices to have more than cinnamon specific utilities (applets, desklets,etc).
I hope so. It'd be nice to have a central place for MDM themes. (not gnome-look or deviantart)
anandrkris

Re: MDM HTML5 Themes

Post by anandrkris »

@samriggs - Thanks a bunch for the details. :D i will check it out.

@passerby - Themes by hb1547. I suppose both Synergy / Matrix were shared here earlier by this artist.
Perhaps we can see it in Mint 17. :)
philstix

New MDM HTML5 Theme

Post by philstix »

I'm not sure if this is the right place to post this, or if this thread is still alive.

I've just created an MDM login theme for Mint KDE, and I wanted to put it out there in case anyone wanted to use it.

It's available on DeviantART at http://philleft.deviantart.com/art/Rand ... -430083230 and at KDE-Look at http://kde-look.org/content/show.php/Ra ... ent=163145

It contains over a dozen fractal flame images, one of which is randomly selected and displayed at each login. I created the images with JWildfire.

I used customised JQuery UI for dialogs in place of BootBox/Bootstrap.

It also contains an animated 3d KDE-Mint logo displayed in a canvas element. The 3d logo animation was created with Art Of Illusion and Wings3D. There is also an animated keyboard-focus indication via CSS3 keyframe animations, as well as CSS3 transformations, shadows and transparency.

I tried to make it fully keyboard navigable, and I think I succeeded, although there are some anomalies, such as not being able to capture the 'Escape' keydown event - I couldn't detect it at all in the JQuery event handler.

The custom dialogs for language and session selection display the currently selected option with a checkmark icon, although the limitations of mdm prevented me from indicating the default session until the user selects it. (It would be good if mdm could be modified to provide more info to the theme in that regard - current language is notified via an mdm_ function but the default session and default user are not.)

It also uses customised svg icons for the dialog buttons.

Please take a look and let me know if you can suggest any improvements.

Phil Wright
User avatar
clem
Level 12
Level 12
Posts: 4303
Joined: Wed Nov 15, 2006 8:34 am
Contact:

Re: MDM HTML5 Themes

Post by clem »

oh wow!! :)

OK, first, yes, this thread is the right place for this and things are pretty much still alive.

In Mint 15 I included a lot of themes. In Mint 16 I didn't but the reason was technical, MDM had changed a lot and themes needed to be tested/adapted and we ran out of time.

Going forward, I'd like it to be trivial for Mint users to browse, choose and install MDM themes, maybe with in a way similar to what we have for Cinnamon spices (applets, desklets, extensions).

When it comes to making MDM themes, something we haven't done is distinguishing between artwork and structure. In the GDM era, most of the structure was done by GDM itself and artists only had to worry about layout and artwork. With this new HTML5 engine in MDM, things are different and artists need to worry about everything... keyboard navigation, user selection, menus, artwork, etc...

The thing is... it's easy for people to take an existing theme and to customize its artwork. But it's very hard for most of them to actually code the Javascript layers, the navigation, the dynamism etc...

Here for instance, Philstix isn't just introducing new artwork on top of JS recipes we already had, he's introducing a brand new theme, which, if customized by others, will eventually represent a brand new family of themes.

Samriggs produced many themes, but only a few structures. What if these structures could evolve indepently? What if themes could use or easily copy new versions of these structures and evolve with them?

I'm not sure what the best way to do this is. Is it to create "master themes" and let others just customize them? Is it to create resources/engines which themes can point to? I don't know. And maybe the answer depends on the themes.

What I think though, is that we, as theme makers, should have the distinction between derivated theme and master theme in mind, and we should make it clear whether something is providing new artwork, or also new JS recipes.

With that in mind, I'd like to suggest artists use short generic names for their themes, made of a single word for master themes, and taking the master theme name as prefix for derivated themes.

That would give us something like that:

- Dia
- Dia Mint KDE
- Dia Gothic
- Sam
- Sam Industrial
- Sam Dark Nebula

And in the examples above, Dia and Sam, as engines, or master themes... as basically things which deal with JS logic... would need to evolve to newer versions of MDM and would enable artists who don't know about MDM/JS to easily customize the artwork and create new derivated themes within the same family.

Within this forum, we could also create an entire section dedicated to MDM themes and give each engine/master theme a thread, where devs can discuss compatibility and JS, and artists can post derivatived themes.

@philstix: I'm traveling at the moment and could only test it in the emulator, so a few things didn't work for me but I'm sure it's because of my environment. The fractals look really good and I'm intrigued by the user list and the skewed/rotated input field. It looks like you ventured into interesting territories here, I can't wait to look into the code :)
Image
anandrkris

Re: MDM HTML5 Themes

Post by anandrkris »

@philstix - Working fine for me. Awesome, thanks for your efforts! :D Would love to see a Cinnamon version. :-) Am sure there is demand for it. :wink:
On the logo, I would have preferred to see the gear spin the in one direction. Felt back and forth movement was bit of a distraction, but thats me! Am not blessed with artistic eyes. :oops:
Not sure of you have seen the splash screen, I somehow like the animated logo in this. Just remembered since am talking about logo.

@ Clem - Can we have a "Test Theme" that simply invokes 'mdm-theme-emulator'? (IIRC, KDE has the feature for splash screen). If theme does not work, user ends up not being able to login to the system. This could be avoided a bit by exposing theme emulator to all. To me it looks, trivial to implement but I am not a programmer. :)
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

How can I install this on Linux Mint 16 Cinnamon guys? Wow I love this theme :shock: :shock: :shock:
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Ok Guys can anyone make this MDM theme for me :(


Image
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Brahim wrote:Ok Guys can anyone make this MDM theme for me :(


Image
here are the link to the wallpaper https://www.google.com/search?q=spring+ ... 4#imgdii=_


here is a link to some beautiful dragonflies https://www.google.com/search?q=hd+wall ... g&tbm=isch
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Ok Guys can anyone make this MDM theme for me :(


Image[/quote]

here are the link to the wallpaper https://www.google.com/search?q=spring+ ... 4#imgdii=_


here is a link to some beautiful dragonflies https://www.google.com/search?q=hd+wall ... g&tbm=isch[/quote]


I want to make the water ripple like here http://www.youtube.com/watch?v=7Go8kX3VMdA

make these dragonflies hover around guys :lol: :lol:
philstix

Re: MDM HTML5 Themes

Post by philstix »

Thanks for taking a look at the theme. Originally I just wanted to add an animated logo to the Clouds theme, but one thing led to another... :lol:

Of course, after uploading the theme, I discovered a couple of minor bugs - the worst of which was I completely overlooked adding 'space/enter' keyboard functionality to the login ok button. I've now updated the theme to version 2014.01.29.01 and uploaded it to the sites mentioned above. If you don't need the keyboard functionality there's no need to update your version.

@Clem: Your idea for the use of themes as masters seems to lend itself to object oriented programming, ie. creating a theme as a class/object, and then anyone wanting to modify it can just create a subclass and change the methods and properties they want to customise.

@anandrkris: Yes I can see the logo could be irritating. When I was creating it I just wanted to show off the 3d effect, and I like the metallic sheen that moves across the gear as it rotates back and forth. The simple solution is to make lots of different logos, and then people can use the one they want :D The logo you referred to shouldn't be difficult to do. It's a simple flat image, and it could probably be animated with CSS3 keyframe animations - no need for any fancy animation rendering software.

@Brahim: You mean something like this? http://code.almeros.com/code-examples/w ... ct-canvas/ Interactive water ripples using HTML5 canvas elements. You could do that yourself with a text editor.
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

@philstix Sorry but i don't know how to code at all :D :D
User avatar
clem
Level 12
Level 12
Posts: 4303
Joined: Wed Nov 15, 2006 8:34 am
Contact:

Re: MDM HTML5 Themes

Post by clem »

Yes, it's not necessarily down to the concept of class/instance, or the template pattern. We could also use linking (i.e. importing js files). I didn't really think about the implementation but I can clearly see a need to distinguish between artwork and logic.
Image
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

Hello guys I have made my first MDM them :D I took Clem's theme and edited it :D . Check this out and tell me what you think of my Matrix theme: http://kde-look.org/content/show.php?content=163151

Image $


Image Image Image Image
passerby

Re: MDM HTML5 Themes

Post by passerby »

Brahim wrote:Hello guys I have made my first MDM them :D I took Clem's theme and edited it :D . Check this out and tell me what you think of my Matrix theme: http://kde-look.org/content/show.php?content=163151

Image $
Trying it out in mdm-theme-emulator, bootstrap threw an error when it went looking for jquery.
This was solved by swapping lines 26 and 27 of index.html around, so that the jquery call is before bootstrap.
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

passerby wrote:
Brahim wrote:Hello guys I have made my first MDM them :D I took Clem's theme and edited it :D . Check this out and tell me what you think of my Matrix theme: http://kde-look.org/content/show.php?content=163151

Image $
Trying it out in mdm-theme-emulator, bootstrap threw an error when it went looking for jquery.
This was solved by swapping lines 26 and 27 of index.html around, so that the jquery call is before bootstrap.

That's the default Min-X theme. I have edited only the bj.jpg file :roll: :roll:
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

How can I make these waterrfalls look alive :D :D :D

Image

Image
Locked

Return to “Your Artwork”