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
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

TO MR. CLEM

I know this is offtopic but please we want a splash screen ith a matching grub background. Most people run Linux on dual-boot and they need this background trick:D I don't know if the one I made is any good but I think it gives an identity to Mint. Everything is excelent about Mint except the splash screen; It doesn't have any minty effect :D Cn you use that grub background and mintify it please? I introduced Mint to many schools and I heard many kids commenting on the splash! colours are very important even Microslop indblows has realized that :lol: :lol:

i'm learning how to code and i'll be helping soon :D
passerby

Re: MDM HTML5 Themes

Post by passerby »

Alright, first attempt at a theme: https://www.dropbox.com/s/99mexnrmoecqd ... 8%3A36.png
The background is indeed animated, but I wasn't going to make a gif :lol:

DL link: https://www.dropbox.com/s/bebnwneao3m0k ... ain.tar.gz
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Cool you might be interested in checking this one out, the canvas gave me an issue in the login screen (it works fine in the emulator but not in the login screen)
you might be able to use some of it in yours though. thematrix.js

Code: Select all

var ctx = canvas.getContext('2d');
var columns = [];
var chars = [];

canvas.height = window.screen.height;
canvas.width = window.screen.width;

ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);

for (i = 0; i < 256; columns[i] = 1, chars[i++] = '゠'); // aka 12448

ctx.shadowBlur = 2;

function step() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.shadowColor = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    columns.map(function (value, index) {
        // overwrites the previous light-green char with a green one
        ctx.fillStyle = ctx.shadowColor = '#000';
        ctx.fillRect(index * 10, value - 10, 10, 10);
        ctx.fillStyle = ctx.shadowColor = '#0F0';
        ctx.fillText(chars[index], index * 10, value - 10);

        columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10;
        chars[index] = String.fromCharCode(12448 + Math.random() * 96);

        ctx.fillStyle = ctx.shadowColor = '#AFA';
        ctx.fillText(chars[index], index * 10, value);
    });
}

//1000/33 = ~30 times a second
setInterval(step, 33);
the html file

Code: Select all

<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var ctx = canvas.getContext('2d');
var columns = [];
var chars = [];

canvas.height = window.screen.height;
canvas.width = window.screen.width;

ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);

for (i = 0; i < 256; columns[i] = 1, chars[i++] = '゠'); // aka 12448

ctx.shadowBlur = 2;

function step() {
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.shadowColor = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    columns.map(function (value, index) {
        // overwrites the previous light-green char with a green one
        ctx.fillStyle = ctx.shadowColor = '#000';
        ctx.fillRect(index * 10, value - 10, 10, 10);
        ctx.fillStyle = ctx.shadowColor = '#0F0';
        ctx.fillText(chars[index], index * 10, value - 10);

        columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10;
        chars[index] = String.fromCharCode(12448 + Math.random() * 96);

        ctx.fillStyle = ctx.shadowColor = '#AFA';
        ctx.fillText(chars[index], index * 10, value);
    });
}

//1000/33 = ~30 times a second
setInterval(step, 33);
}//]]>  

</script>
</head>

<canvas id="canvas"></canvas>

</body>
</html>
Also I don't know if the falling letters interfere with any boxes or inputs falling in front of the them, if so just place the DigiRain after the <body> instead to place it in the background, so far so good though :D
Sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

Ooh, nice. Looks good in a browser.
In the mdm theme emulator, however, it crawls to a halt. Even at 32 columns it's painfully slow.

I'll move the rain div out of the body if it helps; currently I have it sitting in the background through css (fixed position, negative z-index, inline-block display).
What was the issue you had on the login screen? I'd like to fix it, if I'm able.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Passerby I sent you a private message with my email, I like to keep it as private as possible so I pm it to you instead, I can send you the file I have so far, if I can get the matrix code to in the login screen I can finish it, it blocked out the login screen because of the canvas plus there should be a way to use your code instead with more columns and maybe add the light green to dark green effect with the random fonts as it scrolls, without using canvas at all, since it's canvas that messes things up, the font is a standard one if you at the code. I had to get in through startx after trying it live so I wouldn't attempt it live.
if you could code it to get that first color a light green and maybe add a shadow around the font not sure all of this can be done though, I got tired of fooling around with it and moved on until I or someone else could figure it out, I was going to add the batteries with lightning the nebacannezar (however its spelt) floating by and a peguin as nemo stopping bullets, but it's on hold for now.
I did see the canvas in css though and it seems to work better there :)
Sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

Not really what you were after, Brahim, but this is what I have right now: https://www.dropbox.com/s/f7rbfpki0tna0 ... enshot.png
DL link: https://www.dropbox.com/s/sdxtcap9hokbl4h/XMBC.tar.gz
I'll look at implementing the dropdowns and session name later as per your original design.

*I haven't tested this theme live yet. I'll do so this evening.
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

passerby wrote:Not really what you were after, Brahim, but this is what I have right now: https://www.dropbox.com/s/f7rbfpki0tna0 ... enshot.png
DL link: https://www.dropbox.com/s/sdxtcap9hokbl4h/XMBC.tar.gz
I'll look at implementing the dropdowns and session name later as per your original design.

*I haven't tested this theme live yet. I'll do so this evening.
Wow it looks better than i thought :shock: :shock: But don't forget to remove that philips brand name on the screen frame :lol: Great job bro thanks :D
gfritz

Re: MDM HTML5 Themes

Post by gfritz »

Is there some list of problems that MDM has with canvas? My syslog (with mdm debugging turned on) shows that the matrix rain theme is loaded just fine, but nothing happens. Is canvas just a no go here?
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

gfritz wrote:Is there some list of problems that MDM has with canvas? My syslog (with mdm debugging turned on) shows that the matrix rain theme is loaded just fine, but nothing happens. Is canvas just a no go here?

Some canvas works fine other don't for some reason, although the mdm allows html5 there are some issues with canvas that doesn't work like a normal browser does, I haven't narrowed it down myself yet in what works and what doesn't but the only thing I can say is test the crap out of it if your making a mdm theme with canvas and make sure you know how to get into your system using startx to change the theme if it locks up on you because of testing canvas live, also some thing work in the emulator and the same things will not work live as well. Other things work in the main edition which does not work in the lmde version, mainly because webgl version from what I take it but mostly the 3d stuff.
Hope it helps you a bit although doesn't give you a diffident answer.
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Alrighty the following have been updated to use with MDM 1.3.2 or Linux Mint 16

BlackNBlue, Blimp City (steampunk blimp city), CurcuitBoard, Galaxy, MetalMint, SpaceRace.
The others that use side by side icons still need some work to figure out and recode to use multi cells in one row instead of one cell in many rows but they will still work as is for now.
you can get the above updated one at my deviantart gallery as usual: http://samriggs.deviantart.com/gallery/

Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

Howdy doddy all
I finally finished the Dark Nebula mdm theme.
Those other themes I updated I have to go through again and make sure all the file permissions are correct, I found that some weren't, it happened when I saved my hard drive to an external and then reinstalled, it magically changed the permissions on me :evil:
So I'll go through them all and double check and then re-upload them again at the deviantart site.
I apologize to anyone that tried it and "huston we got an error" happened.
I just took it they worked as they did in the emulator, my bad.
Anyhow this one was tested and rearranged about 5 times live so I know it works on mine and is Linux Mint 16 ready with the new code added to it.
Here is a screenshot of the Dark Nebula
darkNebulaShotsmall.jpg
This one is for my system so I didn't make it for the masses but I am sure some will want, if not it's there for anyone who does want to take it for a spin.
It has a couple of rotating planets (that rotate behind the light and shadow of the planet) and an asteroid belt, I was going to add some battlestar galitic ships that animated (had them all done and put in and working, and some twinkling stars but with the asteroid belt and all that together it crawled to a very slow pace and became too jittery, so I stuck with the asteroid belt and rotating planets only so it would run smooter, plus it had to much going on, way to busy for my liking, oh ya I added a slideshow of how linux is used in space or by NASA you can take this out or change it to whatever your heart desires, add some images if you want to make your own also (have to change the array a bit but it should be easy to pull off), I just wanted the info.
It's in the html file and highlighted where to take it out or add/change it to your own stuff.
Ya can snag it har: http://samriggs.deviantart.com/art/DarkNebula-410794752
Again I am sorry about the other ones, I get to going through all those soon and re-upload them again.
Sam
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

alrighty I updated the other themes and changed the file permissions, they should work now :)
Sorry about that, but the following are good to go for linux mint 16
BlackNBlue, Blimp City (steampunk blimp city), CurcuitBoard, Galaxy, MetalMint, SpaceRace.
they can be gotten at: http://samriggs.deviantart.com/gallery/
sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

I've been playing with the HTML5 canvas today. Started by porting the matrix theme over.
Works nicely in a browser, but if I run at a decent speed in the mdm theme emulator (mdm 1.2.5) it starts to lag.
Anyone else have a similar experience with the canvas element in the theme emulator? (or with mdm itself)
I'll test with the latest version of mdm when I get home this evening. Hopefully canvas performance has improved since 1.2.5.

Edit: I'm not sure if it's because I'm on a slightly more powerful computer (doubt it, considering the difference), but canvas performance in 1.3.1-6 is significantly better than 1.2.5 was.
Still not comparable to a web browser, but a massive improvement nonetheless.
Last edited by passerby on Wed Nov 06, 2013 4:17 am, edited 2 times in total.
anandrkris

Re: MDM HTML5 Themes

Post by anandrkris »

samriggs wrote:alrighty I updated the other themes and changed the file permissions, they should work now :)
Sorry about that, but the following are good to go for linux mint 16
BlackNBlue, Blimp City (steampunk blimp city), CurcuitBoard, Galaxy, MetalMint, SpaceRace.
they can be gotten at: http://samriggs.deviantart.com/gallery/
sam
Sam - Is there an updated .deb package available? Not sure, whether there was a PPA but remember installing all themes via a deb package. Thanks.
samriggs

Re: MDM HTML5 Themes

Post by samriggs »

anandrkris wrote: Sam - Is there an updated .deb package available? Not sure, whether there was a PPA but remember installing all themes via a deb package. Thanks.
No not yet, The deb is the old files, someone else made that deb for me, so I'll have to get a hold of him again to see if he wants to update it.
That's only good for those who want all the themes I made in one package, the problem with that is every time I update I'll have to get a hold of him again to update the deb file, unless I learn how to make one myself then just email it to him so he can update all the sites he added it to which I might do, I'm sure it's not too hard to make a deb.
Also other distros (like ubuntu and arch or whoever else) use them also and change the linux mint logo to there distro logo instead so a deb file would be useless for them, but when and if I can find some time here, I'll dig into making another updated deb file.

@passerby
The canvas issue has always been there since day one, it is getting better but doesn't compare to the emulator or especially the browser and if you do it wrong it won't work at all, but will still work in the emulator and browser, it is still limited for canvas which is why I try to avoid it as much as possible, also with canvas you might get the issue with scrollbars popping up as well which I solved by making the canvas size a lot bigger then the screen size instead of matching the screen size
something like

Code: Select all

<div class="box1"><canvas id="canvas" width="1920" height="1080"></canvas>
//add you js links or code
</div>
putting it into a css element seemed to work better for some reason and didn't take over the whole screen on me. Also this way I could place it just above the background and not have it interfere with the rest of the screen which it did if I didn't add canvas inside the element.
and adding

Code: Select all

 <style>
           #canvas {
           background-color: transparent;
           }
in the head or where ever you want then call it from the head.
there are other methods to get rid of scrollbars but this was a quick fix for me.
Just be prepared to use startx if you test live with canvas, in case it wonks out on you like it did me a few times and go through startx and change the theme so you can get back in again. with the new mdm though I think if it wonks out on you it just puts it to the default one by the looks of it.
Hopefully canvas will get better as times goes by, I got a few ideas I might try with it, but until then I might hold off and make sure what I do make works on all computers and runs as smooth as possible.
even with css animations, your limited as well, the more you add the jittery and slower things moves as well live but in the browser it flies.
Hope it answers or helps somewhat.
Sam
passerby

Re: MDM HTML5 Themes

Post by passerby »

Thanks Sam, good to know it's not just me :lol:
I haven't had any problems with scrollbars. I've been keeping it simple, and making sure to use overflow:hidden.
I'll keep playing with the canvas though, for amusement if nothing else.
cef1000

Re: MDM HTML5 Themes - Mint 15/KDE

Post by cef1000 »

Mint 15 is awsome and these html5 greaters are as weleason ll.

I love the Steam Punk ones a lot. Sam your stuff is amazing.

I got all of them working except for some reason "Steam Punk Future City" doesn't have the the "vehicles" moving across the scene.

The gears turn and the spot lights move; but, no ice cream truck, blimps, or pizza wagon...

was so looking forward to a pizza delivery ;-) lol

Looks awsome anyway, but, reminds me of the Science Channel show they had on a while back: "Life After Humans" :D

Ive sat and stared at it for 20 mins and nada... :lol:

Tried in the emulater as well, same thing......

Regardless, thanks to all for the awsome distro and hard work...

cef1000
samriggs

Re: MDM HTML5 Themes - Mint 15/KDE

Post by samriggs »

cef1000 wrote:Mint 15 is awsome and these html5 greaters are as weleason ll.

I love the Steam Punk ones a lot. Sam your stuff is amazing.

I got all of them working except for some reason "Steam Punk Future City" doesn't have the the "vehicles" moving across the scene.

The gears turn and the spot lights move; but, no ice cream truck, blimps, or pizza wagon...

was so looking forward to a pizza delivery ;-) lol

Looks awsome anyway, but, reminds me of the Science Channel show they had on a while back: "Life After Humans" :D

Ive sat and stared at it for 20 mins and nada... :lol:

Tried in the emulater as well, same thing......

Regardless, thanks to all for the awsome distro and hard work...

cef1000
Thanks glad you like them, some are live wallpapers I ported over, like the steampunk future city one weird it don't have the vehicles movles though, it uses simple css animations and works live, the emulator and in browsers for me, maybe try the one off of deviant art and let me know if it works from that one.
Here's the link: http://samriggs.deviantart.com/art/SteampunkFutureCity-MDM-Animated-theme-370683693
If not I'll try it again to upload it because if blimp city works this should work also, it uses the same animation code in css for both, just a simple javascript sprite sheet with animation movement through css, pretty simple stuff that should work no matter what, you got me curious now over this one because I try to make all mine to work no matter what on anything.
Let me know please, one way or another we'll get that ice cream truck and pizza truck moving for you :lol:
I added those as a joke when I first did, reminded me of my childhood.

@passerby
no problem, overflow:hidden works also there's also another javascript code that works, just can't remember it off the top of my head right now, canvas is cool you just have to be careful how you code for the live version, I got circuit board working no problems but it took a few different ways of experimenting with canvas to get it working live for me, onload can mes things up at times I noticed I avoid that one, but I find putting the canvas into a css element (example: box) seems to work better for some reason, it keeps it inclosed so it doesn't jump in front of other things and gets in the way of mouse clicks by shoving the box element behind everything but the background, plus it keeps it contained easier.
Have fun fooling around with it and if you find some hidden secrets feel free to share them in the snippet thread I started: http://forums.linuxmint.com/viewtopic.php?f=25&t=128396
Take care
Sam
Brahim Salem

Re: MDM HTML5 Themes

Post by Brahim Salem »

What about the Mint pool and the dragonflies samriggs

[url=http://postimg.org/image/lo6xfkuvv/][img]http://s9.postimg.org/lo6xfkuvv/green_nature_leaves_plants_1600x1200_wallpaper_W.jpg[/img][/url]

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

my concept MDM:

[url=http://postimg.org/image/x253653o5/][img]http://s18.postimg.org/x253653o5/green_nature_leaves_plants_1600x1200_wallpaper_W.jpg[/img][/url]


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]
Last edited by Brahim Salem on Tue Jan 28, 2014 1:24 pm, edited 5 times in total.
cef1000

Re: MDM HTML5 Themes - Mint 15/KDE

Post by cef1000 »

samriggs wrote:
cef1000 wrote:Mint 15 is awsome and these html5 greaters are as weleason ll.

I love the Steam Punk ones a lot. Sam your stuff is amazing.

I got all of them working except for some reason "Steam Punk Future City" doesn't have the the "vehicles" moving across the scene.

The gears turn and the spot lights move; but, no ice cream truck, blimps, or pizza wagon...

was so looking forward to a pizza delivery ;-) lol

Looks awsome anyway, but, reminds me of the Science Channel show they had on a while back: "Life After Humans" :D

Ive sat and stared at it for 20 mins and nada... :lol:

Tried in the emulater as well, same thing......

Regardless, thanks to all for the awsome distro and hard work...

cef1000
Thanks glad you like them, some are live wallpapers I ported over, like the steampunk future city one weird it don't have the vehicles movles though, it uses simple css animations and works live, the emulator and in browsers for me, maybe try the one off of deviant art and let me know if it works from that one.
Here's the link: http://samriggs.deviantart.com/art/SteampunkFutureCity-MDM-Animated-theme-370683693
If not I'll try it again to upload it because if blimp city works this should work also, it uses the same animation code in css for both, just a simple javascript sprite sheet with animation movement through css, pretty simple stuff that should work no matter what, you got me curious now over this one because I try to make all mine to work no matter what on anything.
Let me know please, one way or another we'll get that ice cream truck and pizza truck moving for you :lol:
I added those as a joke when I first did, reminded me of my childhood.

Sam
Unpacked it in my user/Downloads Folder and ran in a browser - vehicle animations where there and worked as expected

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 '$')

Not sure if it's relevant. About to move the theme to the /usr/share/mdm/html-theme folder and check it live..

Also tried using MDM Login Manager to "install" the theme, but, that fails. Maybe because it's not a tar.gz? (really new at this stuff so not sure how some of this is supposed to work :wink: )

This is all using the existing file I had gotten from DeviantArt before starting this post....

What ownership and permisisons do the Theme Folder(s) in usr/share/mdm/html-theme and everything below it need to be set to?

I'll move this from my Downloads folder to where it belongs and let you know what happens when live using the file(s) I already have.

At least we know no one hijacked the pizza and ice cream truck out of the files.. :mrgreen:

Update: copied in place using dolphin as root and no vehicles when the theme is live ?!?! :shock: :cry: :roll:

Operator head space error :!: :?: :idea:

Blimp City and all the others work fine.. idk,,,

Actually I lied SkyMountain behaving same way. I can run in firefox both in my home directory and now in usr/share/mdm/html-themes now that I recopied them using MC and they work; go live and nope... DarkNebula; BlimpCity, etc, work.

If nothing else guess I could fire up the browser and watch on desktop 4.... :lol:

Awsome work Sam..

cef1000
Locked

Return to “Your Artwork”