Page 1 of 1

How to create a bootsplash with changing backgroud colours

PostPosted: Mon Dec 02, 2013 7:22 pm
by Gilgamesh777
I want to create a new bootsplash screen for Ultimate Edition that has 2 logos (a text saying "Ultimate Edition" + " Loading..." / "Shutting down") changing background colours during boot (like on Windows 8) and only one colour at shutdown. I have made a copy for testing here that loads windows 8 PNGs ( http://kde-look.org/content/show.php?content=162167) but the colours seem to load too fast. Can make plymouth load many colours without using background PNGs?


1- At startup loads the following colours ( or even more colours if possible):

Image

Image


Image


2- At shutdown it loads only one background colour as follows:


Image

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Mon Dec 02, 2013 7:39 pm
by Gilgamesh777
Someone on Ubuntu forum gave me this http://www.freedesktop.org/wiki/Software/Plymouth/Scripts/ But I don't know how to create a plymouth script at all :(

Image :lol: :lol: :lol:

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Tue Dec 03, 2013 11:10 am
by Gilgamesh777
Please do help :( :( :( :vil2_torero :th_DANCE_417

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Mon Dec 09, 2013 7:41 pm
by Gilgamesh777
help :vil2_jumelles

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Wed Jan 15, 2014 8:03 pm
by Gilgamesh777
Can I use something like this with plymouth:
Code: Select all
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #autocolor{
       width: 5em;
       height: 2em;
       padding: 0.75em 0.5em 0;
       text-align: center;
       border: 1px solid black;
       margin: 3em auto 0;
       font: bold 90% sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="autocolor">
    Wow!
    </div>
    <script type="text/javascript">
    (function(){
       var hexacode = ['#ffff00', '#ff0000', '#00ff00', '#0000ff', '#ffffff'],
       el = document.getElementById('autocolor').style,
       counter = -1,
       hexalen = hexacode.length;
       function auto(){
          el.backgroundColor = hexacode[counter = ++counter % hexalen];
       }
       setInterval(auto, 20);
    })();
    </script>
    </body>
    </html>


or maybe this:

Code: Select all
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #autocolor{
       width: 1000px;
       height: 700px;
       padding: 0.75em 0.5em 0;
       text-align: center;
       border: 1px solid black;
       margin: 3em auto 0;
       font: bold 90% sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="autocolor">
    Wow!
    </div>
    <script type="text/javascript">
    (function(){
       var hexacode = [

    '#ff0000',
    '#ff0400',
    '#ff0800',
    '#ff0d00',
    '#ff1100',
    '#ff1500',
    '#ff1900',
    '#ff1e00',
    '#ff2200',
    '#ff2600',
    '#ff2a00',
    '#ff2f00',
    '#ff3300',
    '#ff3700',
    '#ff3c00',
    '#ff4000',
    '#ff4400',
    '#ff4800',
    '#ff4d00',
    '#ff5100',
    '#ff5500',
    '#ff5900',
    '#ff5e00',
    '#ff6200',
    '#ff6600',
    '#ff6a00',
    '#ff6e00',
    '#ff7300',
    '#ff7700',
    '#ff7b00',
    '#ff7f00',
    '#ff8400',
    '#ff8800',
    '#ff8c00',
    '#ff9100',
    '#ff9500',
    '#ff9900',
    '#ff9d00',
    '#ffa200',
    '#ffa600',
    '#ffaa00',
    '#ffae00',
    '#ffb300',
    '#ffb700',
    '#ffbb00',
    '#ffbf00',
    '#ffc300',
    '#ffc800',
    '#ffcc00',
    '#ffd000',
    '#ffd400',
    '#ffd900',
    '#ffdd00',
    '#ffe100',
    '#ffe500',
    '#ffea00',
    '#ffee00',
    '#fff200',
    '#fff700',
    '#fffb00',
    '#ffff00',
    '#fbff00',
    '#f6ff00',
    '#f2ff00',
    '#eeff00',
    '#eaff00',
    '#e5ff00',
    '#e1ff00',
    '#ddff00',
    '#d9ff00',
    '#d5ff00',
    '#d0ff00',
    '#ccff00',
    '#c8ff00',
    '#c4ff00',
    '#bfff00',
    '#bbff00',
    '#b7ff00',
    '#b3ff00',
    '#aeff00',
    '#aaff00',
    '#a6ff00',
    '#a1ff00',
    '#9dff00',
    '#99ff00',
    '#95ff00',
    '#90ff00',
    '#8cff00',
    '#88ff00',
    '#84ff00',
    '#80ff00',
    '#7bff00',
    '#77ff00',
    '#73ff00',
    '#6fff00',
    '#6aff00',
    '#66ff00',
    '#62ff00',
    '#5eff00',
    '#59ff00',
    '#55ff00',
    '#51ff00',
    '#4cff00',
    '#48ff00',
    '#44ff00',
    '#40ff00',
    '#3bff00',
    '#37ff00',
    '#33ff00',
    '#2fff00',
    '#2aff00',
    '#26ff00',
    '#22ff00',
    '#1eff00',
    '#1aff00',
    '#15ff00',
    '#11ff00',
    '#0dff00',
    '#09ff00',
    '#04ff00',
    '#00ff00',
    '#00ff04',
    '#00ff08',
    '#00ff0d',
    '#00ff11',
    '#00ff15',
    '#00ff1a',
    '#00ff1e',
    '#00ff22',
    '#00ff26',
    '#00ff2b',
    '#00ff2f',
    '#00ff33',
    '#00ff37',
    '#00ff3c',
    '#00ff40',
    '#00ff44',
    '#00ff48',
    '#00ff4c',
    '#00ff51',
    '#00ff55',
    '#00ff59',
    '#00ff5d',
    '#00ff62',
    '#00ff66',
    '#00ff6a',
    '#00ff6e',
    '#00ff73',
    '#00ff77',
    '#00ff7b',
    '#00ff80',
    '#00ff84',
    '#00ff88',
    '#00ff8c',
    '#00ff91',
    '#00ff95',
    '#00ff99',
    '#00ff9d',
    '#00ffa1',
    '#00ffa6',
    '#00ffaa',
    '#00ffae',
    '#00ffb2',
    '#00ffb7',
    '#00ffbb',
    '#00ffbf',
    '#00ffc3',
    '#00ffc8',
    '#00ffcc',
    '#00ffd0',
    '#00ffd5',
    '#00ffd9',
    '#00ffdd',
    '#00ffe1',
    '#00ffe6',
    '#00ffea',
    '#00ffee',
    '#00fff2',
    '#00fff7',
    '#00fffb',
    '#00ffff',
    '#00fbff',
    '#00f7ff',
    '#00f2ff',
    '#00eeff',
    '#00eaff',
    '#00e6ff',
    '#00e1ff',
    '#00ddff',
    '#00d9ff',
    '#00d5ff',
    '#00d0ff',
    '#00ccff',
    '#00c8ff',
    '#00c3ff',
    '#00bfff',
    '#00bbff',
    '#00b7ff',
    '#00b2ff',
    '#00aeff',
    '#00aaff',
    '#00a6ff',
    '#00a1ff',
    '#009dff',
    '#0099ff',
    '#0095ff',
    '#0091ff',
    '#008cff',
    '#0088ff',
    '#0084ff',
    '#0080ff',
    '#007bff',
    '#0077ff',
    '#0073ff',
    '#006eff',
    '#006aff',
    '#0066ff',
    '#0062ff',
    '#005dff',
    '#0059ff',
    '#0055ff',
    '#0051ff',
    '#004cff',
    '#0048ff',
    '#0044ff',
    '#0040ff',
    '#003cff',
    '#0037ff',
    '#0033ff',
    '#002fff',
    '#002bff',
    '#0026ff',
    '#0022ff',
    '#001eff',
    '#001aff',
    '#0015ff',
    '#0011ff',
    '#000dff',
    '#0008ff',
    '#0004ff',
    '#0000ff',
    '#0400ff',
    '#0900ff',
    '#0d00ff',
    '#1100ff',
    '#1500ff',
    '#1900ff',
    '#1e00ff',
    '#2200ff',
    '#2600ff',
    '#2a00ff',
    '#2f00ff',
    '#3300ff',
    '#3700ff',
    '#3c00ff',
    '#4000ff',
    '#4400ff',
    '#4800ff',
    '#4d00ff',
    '#5100ff',
    '#5500ff',
    '#5900ff',
    '#5e00ff',
    '#6200ff',
    '#6600ff',
    '#6a00ff',
    '#6e00ff',
    '#7300ff',
    '#7700ff',
    '#7b00ff',
    '#7f00ff',
    '#8400ff',
    '#8800ff',
    '#8c00ff',
    '#9100ff',
    '#9500ff',
    '#9900ff',
    '#9d00ff',
    '#a200ff',
    '#a600ff',
    '#aa00ff',
    '#ae00ff',
    '#b300ff',
    '#b700ff',
    '#bb00ff',
    '#bf00ff',
    '#c300ff',
    '#c800ff',
    '#cc00ff',
    '#d000ff',
    '#d400ff',
    '#d900ff',
    '#dd00ff',
    '#e100ff',
    '#e500ff',
    '#ea00ff',
    '#ee00ff',
    '#f200ff',
    '#f700ff',
    '#fb00ff',
    '#ff00ff',
    '#ff00fb',
    '#ff00f7',
    '#ff00f2',
    '#ff00ee',
    '#ff00ea',
    '#ff00e5',
    '#ff00e1',
    '#ff00dd',
    '#ff00d9',
    '#ff00d4',
    '#ff00d0',
    '#ff00cc',
    '#ff00c8',
    '#ff00c3',
    '#ff00bf',
    '#ff00bb',
    '#ff00b7',
    '#ff00b3',
    '#ff00ae',
    '#ff00aa',
    '#ff00a6',
    '#ff00a1',
    '#ff009d',
    '#ff0099',
    '#ff0095',
    '#ff0091',
    '#ff008c',
    '#ff0088',
    '#ff0084',
    '#ff007f',
    '#ff007b',
    '#ff0077',
    '#ff0073',
    '#ff006e',
    '#ff006a',
    '#ff0066',
    '#ff0062',
    '#ff005e',
    '#ff0059',
    '#ff0055',
    '#ff0051',
    '#ff004d',
    '#ff0048',
    '#ff0044',
    '#ff0040',
    '#ff003c',
    '#ff0037',
    '#ff0033',
    '#ff002f',
    '#ff002a',
    '#ff0026',
    '#ff0022',
    '#ff001e',
    '#ff0019',
    '#ff0015',
    '#ff0011',
    '#ff000d',
    '#ff0008',
    '#ff0004'
    ],
       el = document.getElementById('autocolor').style,
       counter = -1,
       hexalen = hexacode.length;
       function auto(){
          el.backgroundColor = hexacode[counter = ++counter % hexalen];
       }
       setInterval(auto, 20);
    })();
    </script>
    </body>
    </html>

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Fri Jan 31, 2014 12:16 pm
by Gilgamesh777
Ok guys here we go :D :D :D

I asked a friend of mine on gnome.org to create us plymouth theme that features a color-cycled background ala Windows 8 installer, and the result is a shockingly beautiful theme. Get the theme here and see for yourself http://gnome-look.org/content/show.php?content=163189


Image
Image
Image

Re: How to create a bootsplash with changing backgroud colou

PostPosted: Fri Jan 31, 2014 12:17 pm
by Gilgamesh777
Ok guys here we go :D :D :D

I asked a friend of mine on gnome.org to create us plymouth theme that features a color-cycled background ala Windows 8 installer, and the result is a shockingly beautiful theme. Get the theme here and see for yourself http://gnome-look.org/content/show.php?content=163189


Image
Image
Image


I'm working on a version for ultimate edition :D :D