TIP Design your own Framebuffer Splash

Uit Gentoo Linux Wiki

[bewerken] Er is een begin gemaakt met het vertalen van dit artikel,maar is nog lang niet voltooid, help mee als je wilt, het wordt zeker op prijs gesteld

Zou er iemand kunnen kijken naar de "Sjabloon" mededelingen die er in de vertaalde teksten staan ? Ik kan er nog niet helemaal wijs uit worden hoe ik die goed krijg. Alvast bedankt, Priyantha Bleeker.

[bewerken] Introductie

Dit artikel gaat "niet" over het installeren van 'framebuffer splash', of over het configuren van u kernel voor de 'framebuffer splash', er zijn meerdere HOWTO fbsplash:documentation over deze materie, het is dus de bedoeling dat u het "emergence" thema geinstalleerd hebt en alles draait. Dit moet allemaal voordat u begint te proberen van het maken van een eigen thema. Ik ga er van uit dat u zover bent gekomen voordat u verder gaat met het ontwerpen van u eigen ontwerp.

Deze howto is vertaald, doordat ik zelf graag zelf mijn eigen thema wilde maken, en dat was mij gelukt aan de hand van de orginele Engelstalige howto. Op het internet zijn een hele hoop thema's te vinden, maar helaas zijn de meeste voor "bootsplash", terwijl dat alleen nog in oudere kernels zit.

[bewerken] Start met een spetter

Wanneer u, uw kernel & grub.conf werken met de 'splashutils' (bekijk the fbsplash howto), het is tijd om te beginnen met het maken van u eigen thema. Ik wilde een thema maken met de kernel versie en de specificaties van mijn systeem. deze plaatjes.

Probeer u eigen plaatjes op een hoge resolutie te maken, en zo min mogelijk verkleinen.

[bewerken] Maak alle veranderingen geleidelijk

Wanneer u veranderingen aan u .cfg bestanden maakt, maak dan alle veranderingen zo geleidelijk mogelijk, voeg telkens één component per keer toe, en kijk of het werkt. Als u begint vanaf het begin met een zeer groot .cfg bestand vol met 'eye-candy' en het dan niet werkt, hoe wilt u dat dan oplossen ?

[bewerken] Maak een thema map & artwork

Wanneer u begint met het ontwerpen van uw artwork, onthoud dat het ontwerp voor het 'verbose' scherm voornamelijk donker moet zijn, dit aangezien de kleur van de tekst op de console licht grijs is, en dat werkt fijn op een zwarte kleur, maar niet zo fijn met lichtere kleuren.

# mkdir -p /etc/splash/mytheme/images
# cp ~/*1024x768.jpg /etc/splash/mytheme/images
# ls /etc/splash/mytheme/images
silent-1024x768.jpg  verbose-1024x768.jpg

[bewerken] Maak een thema .cfg bestand

Alweer proberen we dit “zo simpel mogelijk” te houden, en al het moeilijke weg te laten. We hebben nog altijd het originele thema om op terug te vallen, maar maak u nu geen zorgen over half-transparanten vordering balken, we maken ze gewoon werkend. Bewerk /etc/splash/mytheme/1024x768.cfg

bgcolor=0

tx=25
ty=28
tw=979
th=728

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

Ik denk dat het bovenstaande zo simpel is als het maar kan, als u denkt dat er een aantal onderdelen in het bovenstaande staan die overbodig zijn, verwijder ze dan van deze pagina.

Wat het bovenstaande betekend is:

• Stel de achtergrond kleur op 0, dat betekend geen kleur, of zwart
• Stel de grootte voor de tekst frame in:
  • 25 punten vanaf de linker kant
  • 28 punten vanaf de bovenkant
  • 979 punten breed
  • 728 punten hoog
• Paden naar
  • verbose achtergrond plaatje
  • silent achtergrond plaatje

“PS:”U kunt meer opties vinden in /usr/share/doc/splashutils-*theme_format.gz – I raad u aan om dit bestand open te hebben als referentie.

[bewerken] Bewerk GRUB

Ik maak gebruik van een tamelijk ongewone RAID array, dus u root= gedeeltes zullen vrijwel zeker wat anders zijn – Misschien iets als root=/dev/hda3, Denk ik.

default 1
timeout 30
splashimage=(hd0,0)/grub/splash.xpm.gz

title=Gentoo-2.6.12-gentoo-r7 fbsplash
root (hd0,0)
kernel (hd0,0)/kernel-2.6.12-gentoo-r7 root=/dev/sda3 splash=silent,fadein,theme:priyantha quiet video=radeonfb:1024x768-32@75 CONSOLE=/dev/$
initrd=(hd0,0)/fbsplash-priyantha-1024x768

Let op dat de manier van het maken van de splash thema, ik plaats altijd een initrd bestand als een apart bestand in boot. In plaats van het compileren in de kernel. Uiteraard kunnen we het ook in de kernel compileren als we klaar zijn met het testen. Maar op dit moment zou dat het werk alleen maar vertragen, we moeten namelijk een aantal keer opnieuw opstarten om alles zo te krijgen zoals we willen.

[bewerken] Of bewerk Lilo

Dit is een lilo.conf basis voorbeeld.

boot = /dev/hda2
install = /boot/boot-menu.b
prompt
timeout=50
delay = 50
default = "Windows"

other = /dev/hda1
	label = Windows
	table = /dev/hda

image = /boot/kernel-genkernel-x86-2.6.12-suspend2-r3
        root = /dev/hda9
        label = "test"
	append = "init=/linuxrc real_root=/dev/hda9 hdb=ide-cd splash=silent,fadein,theme:default quiet CONSOLE=/dev/tty1 video=ypan,mtrr,1024x768-32@60 resume2=swap:/dev/hda8 gentoo=nodevfs "

[bewerken] Installeer u thema in /boot & test

U zult de onderstaande commando's een aantal keren gebruiken tijdens het optimaliseren van het ontwerp van uw eigen layout.

# mount /boot ; splash_geninitramfs -v -g /boot/fbsplash-mytheme-1024x768 -r 1024x768 \
 mytheme && umount /boot
# reboot && exit

Wanneer u alleen u thema wilt testen, bewerk dan /etc/conf.d/splash en ga naar vc1 (ctrl+alt+f2) en ga wat spelen met de onderstaande commando's:

# allows to set different themes on different consoles
# format: "<console>:<theme> <console>:<theme> (...)"
SPLASH_TTY_MAP="1:mytheme"

# /etc/init.d/splash restart

# splash_util --vc=1 -m s -t mytheme -c setcfg
# splash_util --vc=1 -m s -t mytheme -c setpic
# splash_util --vc=1 -m s -t mytheme -c on
# splash_util --vc=1 -m s -p 45000 -t mytheme -c paint

[bewerken] Getting the verbose text right

Ok... so now we've rebooted we can see the picture both in silent & verbose mode.

It's worth mentioning at this point that Mike probably didn't need to do the green Matrixesque tinting in his image program - splashutils offers improvements over the old bootsplash and does transparency & stuff. I think they probably do alpha-blending, too, except I'm not quite sure what that is.

The first thing to do is get the text fitting into the appropriate area in verbose mode. We do this using the tx=, ty=, tw= & th= settings.

It's interesting to note that these are the only commands in the theme format that don't define the box in terms of the x & y co-ordinates of its top-left & bottom-right corners. The verbose text box is defined by the x & y of it's top-left corner and by its width and height.

You can look in /usr/share/doc/splashutils-*/theme_format.gz for more details but the important thing to remember is that if your screen is 1024 pixels wide and you want the verbose text to be 15 pixels in from the left, but 20 pixels in from the right then tx=15 and tw=... erm... 1024 - (15 + 20)... erm... tw=989.

The first time I tried this I just copied & pasted the figures from Mike's posting on the Gentoo forums, and the verbose screen didn't display. These were Mike's settings:

tx=162 
ty=110 
tw=955 
th=804

Now, I'm not sure if they worked for him, because the original image he sent me was 1280x1024, but these figures won't work on my 1024x768 screen - the sum of tx and tw are more than 1024, and the y & height are more than 768.
Troubleshooting: if your system boots to a login prompt but instead of your verbose screen being displayed you just get a black framebuffer with white writing, check & ensure your height, width and starting co-ordinates are sane relative to the screensize.

bgcolor=0

tx=162 
ty=110 
tw=700
th=548

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

Install the theme, reboot & test! I'd like to say that this looked alright to me, but I didn't like to examine Mike's artwork too closely. Suffice to say it boots & the text came up & stuff.

[bewerken] Displaying a silent message

When the system boots in silent mode, we'd like to display some text saying "Hit f2 to show a bunch of Linux stuff", just like all the other themes do.

The content of the text is defined in /etc/conf.d/splash, but the text size & colour is part of our theme. Let's edit our config:

bgcolor=0

tx=162
ty=110
tw=700
th=548

text_x=204 
text_y=544 
text_size=26 
text_color=0xffffff

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

The only change I've made here is the addition of the text_x=, text_y=, text_size= & text_colour= lines.

Respectively these mean:

• text_x - left-hand edge of text, distance from left of screen.
• text_y - top edge of text, distance from top of screen.
• text_size - height of text in pixels.
• text_color (sic) - colour of the silent text in hex format. 0xffffff means "white"

It's worth observing another unusual case in the layout config here - nowhere else in the theme is the 0x needed before the hex colour code. I believe the 0x is technical for "this is a hex number, not a decimal one", but the colour for the progressbar & other boxes that we'll paint don't need that.

Install the theme, reboot & test!

[bewerken] Understanding hexadecimal colour codes

If you've designed webpages then you may already be familiar with hex colour codes, but here's a quick recap, just in case - you're going to need these throughout your theme.

The principle is that 256³ colours is plenty enough colours to satisfy any interior-decorator, and that hex is a convenient way of describing values between 00 and 255 without wasting any bits. Consequently we define our colour as RRGGBB, where RR is a value of red between 00 and FF, blended with an amount of green between 00 and FF, and mixed with some blue, too.

Examples:

• Absolutes:
  • ffffff - white - all of all of the composite colours.
  • 000000 - black - a distinct lack of colour.
• Greyscales:
  • eeeeee - very light grey - nearly white, in fact.
  • ddddd - light grey
  • 999999 - 60% grey
  • 333333 - 20% grey - quite dark
  • 111111 - very dark - nearly black, in fact.
• Primaries
  • ff0000 - bright red.
  • 00ff00 - bright green.
  • 0000ff - bright bloo.
• Composites
  • ffff00 - bright yellow, a mix of red & green
  • ff00ff - bright violet - a mixture of red & blue.

If you want a bunch of useful colours, a Google for "hex colour codes" should bring up a big bunch of useful colour tables

[bewerken] Drawing a box

From /usr/share/doc/splashutils-0.9.1/theme_format.gz

bgcolor=0

tx=162
ty=110
tw=700
th=548

text_x=250
text_y=743
text_size=19
text_color=0xffffff

box silent noover      300 750 824 768 #000000

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

This box has the attributes:

• silent - displayed only when the splashscreen is in silent mode.
• noover - painted the first time the screen is shown and then never updated.
• Corners:
  • Top left:
    • 300 pixels from the left edge of the screen
    • 750 pixels from the top edge of the screen
  • Bottom right:
    • 824 x 768 - so the box covers approximately the middle third of the screen horizontally, but only the bottom few pixels.
• Black

If you've scaled the original artwork to 1024x768 and you're following along, then you'll see why I've drawn this box. Those that are paying attention will see that I've also moved the silent text correspondingly.

Note: this didn't seem to work properly when the text started inside the box, but does so perfectly when the text starts above the top of the box. I have no idea why this might be.

Don't forget to install the theme, reboot & test!

[bewerken] Defining the progressbar

I think the next thing we want to do is get the progressbar working, if nothing for no other reason than to cover that fat bird's hideous arse... erm... I mean to protect the young lady's modesty.

I'm pretty sure there's some requirement about having a baselayout that supports splashutils here - I believe the progressbar is incremented to represent how far the system has proceeded through the active /etc/init.d/ events. I seem to recall reading that splashutils provide an interface for animation events, and so init scripts must call this interface in order to show progress - I presume this is what /etc/conf.d/splash is using to write the text to the splashscreen, too. I'd imagine that all current baselayouts do this correctly, but I don't know for sure - I'm using baselayout-1.11.10.

The critical part of the theme format for the progress bar is where it says "inter - The box will be interpolated with the following one, based on the value of progress". I can't really give a helpful definition of interpolation other than "mixing stuff together" - the best thing to do is look at an example:

bgcolor=0

tx=162
ty=110
tw=700
th=548

text_x=250
text_y=743
text_size=19
text_color=0xffffff

box silent noover      300 750 824 768 #000000

box silent inter        300 350 300 418 #ff00ff
box silent              300 350 824 418 #ff00ff

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

What these three additional lines basically say is:

• only in silent mode
  • draw a box
    • only a single pixel wide - from (300,350) to (300,418).
    • interpolate it with the next box, based on progress.
    • make it a suitable colour.
  • draw another box
    • from (300,350) to (824,418).
    • make it the same colour.

So the first "box" is tiny - it's what's used to represent no progress at all, except that we never see the box that small, because it's not painted until the progress begins - I'd guess it's usually 5% or 10% wide when we first see it. The second box represents the completed progress - you'll see it full with when you run shutdown -hf now.

I reckon that, considering splashutils allows transparency, one could have a progress bar that gets darker during the progression. I haven't tried that, so implementation is left as an exercise for the reader.

Install the updated theme, reboot & test!

[bewerken] Drawing rectangles

Ok, so we've got the progressbar working, but it looks kinda lame... something's missing. How does the viewer know where 100% is? Let's draw a rectangle around the progressbar to show how full it is. There are two ways of doing this.

[bewerken] Solid filled

bgcolor=0

tx=162
ty=110
tw=700
th=548

text_x=250
text_y=743
text_size=19
text_color=0xffffff

box silent noover      300 750 824 768 #000000

box silent noover       297 347 827 421 #dcdcdc
box silent inter        300 350 300 418 #ff00ff
box silent              300 350 824 418 #ff00ff

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

It only takes a single additional line to do this - you can see how it's 3 pixels wider on each side than the progressbar and it's a contrasting colour. The noover option seems a bit of a misnomer to me - it doesn't prevent the box from being overwritten, but rather prevents it from overwriting other graphical items - such as the progressbar on the following two lines. Check it out!

[bewerken] Transparent

Well, that's all well & good, but some folks will want to see what's underneath the progressbar, at least while it's progressing.

Creating a transparent box doesn't work:

box silent noover       297 347 827 421 #dcdcdc
box silent noover       300 350 300 418 #000000ff
box silent inter        300 350 300 418 #ff00ff
box silent              300 350 824 418 #ff00ff

Because the box just shows what's underneath it - the plain rectangle we want as our progressbar border.

In fact, spock shows us the way around this in his Emergence theme - take a look at /etc/splash/emergence/1024x768.cfg. In that he draws a 1-pixel wide "hollow rectangle" - it's not a single transparent rectangle, but rather 4 independent 1-pixel wide retangles forming a border.

bgcolor=0

tx=162
ty=110
tw=700
th=548

text_x=250
text_y=743
text_size=19
text_color=0xffffff

box silent noover      300 750 824 768 #000000

box silent        297 347 827 350 #dcdcdc
box silent        297 347 300 421 #dcdcdc
box silent        297 418 827 421 #dcdcdc
box silent        824 347 827 421 #dcdcdc

box silent inter        300 350 300 418 #ff00ff
box silent              300 350 824 418 #ff00ff

pic=/etc/splash/mytheme/images/verbose-1024x768.jpg
silentpic=/etc/splash/mytheme/images/silent-1024x768.jpg

The above theme gives the progressbar a 3-pixel border by the use of 4 rectangles:

• top edge:
  • progressbar(x₀) - 3, progressbar(y₀) - 3
    • to progressbar(x₁) + 3, progressbar(y₀)
• left edge:
  • progressbar(x₀) - 3, progressbar(y₀) - 3
    • to progressbar(x₀), progressbar(y₁) + 3
• bottom edge:
  • progressbar(x₀) - 3, progressbar(y₁)
    • to progressbar(x₁) + 3, progressbar(y₁) + 3
• right edge:
  • progressbar(x₁), progressbar(y₀) - 3
    • to progressbar(x₁) + 3, progressbar(y₁) + 3

Where:

• progressbar(x₀), progressbar(y₀) is the upper left corner of the progressbar.
• progressbar(x₁), progressbar(y₁) is the lower right corner of the progressbar.

If working this out melts your brain as badly as it does mine, then I suggest you get a pen & a sheet of paper. I'm sure there are a few Gentoo geeks out there who can do this maths in their heads, but the rest of us'll have to plan it all out a few times on A4 & expect to make a few corrections in red ink. A good way to debug would be to comment out one line at a time & see which edge is affected.

[bewerken] Conclusion

I hope you find this article useful and that it encourages you to design you own themes. Please update the wiki if you find errors or discover a new way to do cool stuff with gensplash - I notice I haven't covered colour gradients at all. They are supported, so please feel free to experiment with them.

I haven't posted to the wiki the original artwork I used for this theme, because I'm not clear on the ownership of all its components - you can probably get a copy of it somewhere.

What would be really nice is a piece of Free artwork to go with this article - if you have one for which you own the copyright, please feel free to make it available & edit the article to accommodate it, but I'd be grateful if you'd be prepared to take on the full article & make the layout of the .cfg file fully-compatible with your artwork.

[bewerken] Contributors

• Spock for writing Gensplash! Thanks!
• Andreoni.com, original artists of the Lamborghini & its logo on the pictures, Tux the penguin & the Gentoo G.
• _mikec_ - from postings on the Gentoo Forums which inspired this HOWTO and for his work on the "GentooHorns" collage.
• Joe Stroller - original article, written in a single 8-hour session. I spent the last 3 days building a splashscreen and wishing there was a HOWTO on it. When I saw postings on the Gentoo Forums with problems I had to address them. I don't anticipate maintaining or updating this article, so please volunteer!