{"id":42,"date":"2009-01-25T10:29:07","date_gmt":"2009-01-25T10:29:07","guid":{"rendered":"http:\/\/130.61.186.249\/index.php\/2009\/01\/25\/usplash-screen-for-ubuntu-with-animated-gif-2\/"},"modified":"2009-01-25T10:29:07","modified_gmt":"2009-01-25T10:29:07","slug":"usplash-screen-for-ubuntu-with-animated-gif-2","status":"publish","type":"post","link":"http:\/\/130.61.186.249\/index.php\/2009\/01\/25\/usplash-screen-for-ubuntu-with-animated-gif-2\/","title":{"rendered":"USplash screen for ubuntu with “animated gif”"},"content":{"rendered":"

Today I needed to change the boot screen of my ubuntu machine. It’s a computer (actually a mac mini) that I’m setting up to be used as a info screen in stores and on a 9m^2 led screen. We want the logo of the company to be the main focus when booting, so I set to create a theme for usplash in ubuntu, since I had already finished customizing rEfid.
\nI started reading this: https:\/\/help.ubuntu.com\/community\/USplashCustomizationHowto,<\/a> which helped me to understand the basics, and find the source code example.
\nThe fact that the boot theme is coded in C, and that the functions is called 25 times a second, gave me an idea: I wanted a mac\/flash like loader like the ones you see at http:\/\/ajaxload.info\/.<\/a> So I generated an animated gif from that page, with the colors that matched my theme.
\n\"\"<\/span>
\nNext I had to split the animated gif into a bunch of png images, and generate a palette for my main theme image, and then reuse the palette on all the image files.
\nSplitting the gif is easy with ImageMagick:<\/p>\n

convert loading.gif loading.png<\/pre>\n
\"\"<\/span>\"\"<\/span>\"\"<\/span>\"\"<\/span>
\nThis makes loading-0.png through loading-11.png. In Photoshop it was easy to make a predefined “Action” that adds the palette, saves the file, closes it, and does the same to all the other pictures. (Also easy in Gimp of course)
\nThis is important because we are restricted to use 1 palette, so all the images need to have the same one. A tip is to add all the objects you need into the background image, then convert the image to indexed(256color) and extract the palette. Now you remove the objects again, and use this palette for all the images.
\nNow, the only thing left was the code.
\nIn the Makefile, I added loading_0.png.c.o through loading_12.png.c.o, so that make generates object files for the images. Next I went into the theme source file, and added an “extern struct usplash_pixmap” definition for all the images I needed.
\nFirst I needed to define the images in the code, so I could use the linked objects:<\/p>\n
struct usplash_pixmap *pixmap_loader[12];\nextern struct usplash_pixmap pixmap_loader_bg;\nextern struct usplash_pixmap pixmap_loader_0;\nextern struct usplash_pixmap pixmap_loader_1;\nextern struct usplash_pixmap pixmap_loader_2;\nextern struct usplash_pixmap pixmap_loader_3;\nextern struct usplash_pixmap pixmap_loader_4;\nextern struct usplash_pixmap pixmap_loader_5;\nextern struct usplash_pixmap pixmap_loader_6;\nextern struct usplash_pixmap pixmap_loader_7;\nextern struct usplash_pixmap pixmap_loader_8;\nextern struct usplash_pixmap pixmap_loader_9;\nextern struct usplash_pixmap pixmap_loader_10;\nextern struct usplash_pixmap pixmap_loader_11;<\/pre>\n
And added this code to the init section, to be able to reach the loading image from an array:<\/p>\n
void t_init(struct usplash_theme *theme) {\n    int x, y;\n    usplash_getdimensions(&x, &y);\n    theme->progressbar_x = (x - theme->pixmap->width)\/2 + theme->progressbar_x;\n    theme->progressbar_y = (y - theme->pixmap->height)\/2 + theme->progressbar_y;\n    pixmap_loader[0] = &pixmap_loader_0;\n    pixmap_loader[1] = &pixmap_loader_1;\n    pixmap_loader[2] = &pixmap_loader_2;\n    pixmap_loader[3] = &pixmap_loader_3;\n    pixmap_loader[4] = &pixmap_loader_4;\n    pixmap_loader[5] = &pixmap_loader_5;\n    pixmap_loader[6] = &pixmap_loader_6;\n    pixmap_loader[7] = &pixmap_loader_7;\n    pixmap_loader[8] = &pixmap_loader_8;\n    pixmap_loader[9] = &pixmap_loader_9;\n    pixmap_loader[10] = &pixmap_loader_10;\n    pixmap_loader[11] = &pixmap_loader_11;\n}<\/pre>\n
I now replaced the example t_animate_step function with the following:<\/p>\n
void t_animate_step(struct usplash_theme* theme, int pulsating) {\n    static int pulsate_step = 0;\n    unsigned char step_num = 0;\n    unsigned int position_x = theme->progressbar_x + (pixmap_throbber_back.width - pixmap_loader_bg.width) \/ 2;\n    if (pulsating) {\n        pulsate_step ++;\n        step_num = (unsigned char)(pulsate_step\/2) % 12;\n        usplash_put(position_x, theme->progressbar_y, &pixmap_loader_bg);\n        usplash_put_part(position_x, theme->progressbar_y, 32, 32, pixmap_loader[step_num], 0, 0);\n    }\n}<\/pre>\n
Whats happening here is that when the “pulsating” flag is active, it increases the pulsate_step counter, and for each 2nd step\/frame, “step_num” increases, running from 0-11 and around again(using modulus). Then I draw first the background, and then the actual image.
\nI also had to add the following function t_draw_progressbar, so the “pulsating” loader, which is larger than the progressbar, doesn’t destroy the theme with remains of the “gif”.<\/p>\n
   unsigned int position_x = theme->progressbar_x + (pixmap_throbber_back.width - pixmap_loader_bg.width) \/ 2;\n   usplash_put(position_x, theme->progressbar_y, &pixmap_loader_bg);<\/pre>\n
Result:
\n\"\"
\n\"\"
\nFull source code with images and binary:
\ntrippelm-usplash.tar.gz<\/a>
\nTip:
\nTo add a usplash theme to your ubuntu, you could install the nifty startup configurator:<\/p>\n
apt-get install startupmanager<\/pre>\n
This will make it easy to add\/change the boot splash without using the console. Just add the .so file from your theme, and select it as the current boot splash.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I needed to change the boot screen of my ubuntu machine. It’s a computer (actually a mac mini) that I’m setting up to be used as a info screen in stores and on a 9m^2 led screen. We want the logo of the company to be the main focus when booting, so I set […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9,10,31,32],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-boot-loader","category-boot-splash","category-bootsplash","category-ubuntu","category-usplash"],"_links":{"self":[{"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":0,"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"wp:attachment":[{"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/130.61.186.249\/index.php\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}