{"id":197,"date":"2009-12-07T22:56:03","date_gmt":"2009-12-07T22:56:03","guid":{"rendered":"http:\/\/brej.org\/blog\/?p=197"},"modified":"2010-04-04T17:34:01","modified_gmt":"2010-04-04T17:34:01","slug":"plymouth-theming-guide-part-3","status":"publish","type":"post","link":"https:\/\/brej.org\/blog\/?p=197","title":{"rendered":"Plymouth theming guide (part 3)"},"content":{"rendered":"

Now the basics have been covered in part 2<\/a> of this guide, we can now tackle some more advanced tasks. This part is for beginners to intermediate. If you have never programmed, then this will be a rough introduction to the field and thus you may need to ask for help about some confusing aspects.<\/p>\n

Until now, all the examples have been simple assignments and there hasn’t been much “programming”. At the end of the last part, the background image needed to be scaled without distorting the aspect ratio. If the image is wider than the screen, then the image needs to be scaled up to the height of the screen and let the sides hang over the edges. If the image is taller than the screen, the image should be scaled to the screen width and allow the top and bottom to go beyond the edge of the screen.<\/p>\n

\"scale_ratio\"<\/a><\/p>\n

You can get the screen ratio using the Window.GetWidth and Window.GetHeight functions introduced in the previous part. The ratio is height to width. The greater the number, the taller the proportions.<\/p>\n

screen_ratio = Window.GetHeight() \/ Window.GetWidth();<\/pre>\n
GetWidth and GetHeight functions also work on images.<\/p>\n
flower_image_ratio = flower_image.GetHeight() \/ flower_image.GetWidth();<\/pre>\n
To create the scaled image, the scale factor needs to be determined. If the screen is tall, we make the scale factor such that the image will be the same hight as the screen, and allow it to dangle off the edges. For a wide screen, make the image match the width and allow the top and bottom to go beyond the edges. The scale factor can then be used to scale the image width and height.<\/p>\n
if<\/strong> (screen_ratio > flower_image_ratio)\r\n  {  # Screen ratio is taller than image ratio, we will match the screen height<\/span><\/span>\r\n     scale_factor =  Window.GetHeight() \/ flower_image.GetHeight();\r\n  }\r\nelse<\/strong>\r\n  {  # Screen ratio is wider than image ratio, we will match the screen width<\/span><\/span>\r\n     scale_factor =  Window.GetWidth() \/ flower_image.GetWidth();\r\n  }\r\nscaled_flower_image = flower_image.Scale(flower_image.GetWidth()  * scale_factor,\r\n                                         flower_image.GetHeight() * scale_factor);\r\nflower_sprite = Sprite(scaled_flower_image); # Create the a sprite using the scaled image<\/span><\/pre>\n
Now the image is scaled to the correct width and height, it needs to be placed in the centre of the screen.<\/p>\n
flower_sprite.SetX(Window.GetWidth()  \/ 2 - scaled_flower_image.GetWidth()  \/ 2); # Place in the centre <\/span>\r\nflower_sprite.SetY(Window.GetHeight() \/ 2 - scaled_flower_image.GetHeight() \/ 2);\r\nflower_sprite.SetZ(-10000); # Place right at the back<\/span><\/pre>\n
\"mytheme_placed\"<\/a><\/p>\n
If everything went right, your code should look like this:<\/p>\n
flower_image = Image(\"flower.png\");\r\n\r\nscreen_ratio = Window.GetHeight() \/ Window.GetWidth();\r\nflower_image_ratio = flower_image.GetHeight() \/ flower_image.GetWidth();\r\n\r\nif (screen_ratio > flower_image_ratio)\r\n  {  # Screen ratio is taller than image ratio, we will match the screen height<\/span>\r\n     scale_factor =  Window.GetHeight() \/ flower_image.GetHeight();\r\n  }\r\nelse\r\n  {  # Screen ratio is wider than image ratio, we will match the screen width<\/span>\r\n     scale_factor =  Window.GetWidth() \/ flower_image.GetWidth();\r\n  }\r\n\r\nscaled_flower_image = flower_image.Scale(flower_image.GetWidth()  * scale_factor,\r\n                                         flower_image.GetHeight() * scale_factor);\r\nflower_sprite = Sprite(scaled_flower_image); # Create the a sprite using the scaled image<\/span>\r\n\r\nflower_sprite.SetX(Window.GetWidth()  \/ 2 - scaled_flower_image.GetWidth () \/ 2); # Place in the centre<\/span>\r\nflower_sprite.SetY(Window.GetHeight() \/ 2 - scaled_flower_image.GetHeight() \/ 2);\r\nflower_sprite.SetZ(-10000); # Place right at the back<\/span><\/pre>\n
If you wish for your background to match the one in your desktop, copy it to the theme directory and edit the script to load the image of that filename. Only PNG files are allowed.<\/p>\n
\"mytheme_constantine\"<\/a><\/p>\n
Finally to install your theme into the ramdisk, so it is loaded when your computer starts, add –rebuild-initrd<\/em><\/strong> to the plymouth-set-default-theme command. Do be careful not to install a theme which deadlocks. Make sure you have a backup kernel or initrd image if all goes wrong<\/p>\n
plymouth-set-default-theme mytheme --rebuild-initrd<\/pre>\n
Animation<\/h1>\n
Start by making a new sprite with an image of a butterfly:<\/p>\n
butterfly_image = Image(\"butterfly0.png\");\r\nbutterfly_sprite = Sprite(butterfly_image);<\/pre>\n
\"animation_step1\"<\/a><\/p>\n
At the bottom of the block of code you are editing, there is a function named refresh_callback<\/strong><\/em>. This is called 50 times a second (unless the system is busy) just before refreshing the screen. Within the function, you can move the sprites around and these movements will be updated on the screen. Take a look at this example:<\/p>\n
progress = 0;\r\nfun refresh_callback ()\r\n\u00c2\u00a0 {\r\n\u00c2\u00a0\u00c2\u00a0\u00c2\u00a0 progress++;\r\n    butterfly_sprite.SetX(progress);\r\n\u00c2\u00a0 }<\/pre>\n
\"animation_step2\"<\/a><\/p>\n
At every refresh, the butterfly will be moved one pixel to the right. To make the butterfly flap it’s wings, several frames are needed. Instead just loading one image, this requires an array of images to be loaded. Replace the original two lines that loaded the butterfly image and created the sprite, with these:<\/p>\n
for (i = 0; i < 4; i++)\r\n  butterfly_images[i] = Image(\"butterfly\" + i + \".png\");\r\nbutterfly_sprite = Sprite();<\/pre>\n
You can append strings to numbers to create the four filenames. Secondly, if a sprite has not been attached to an image, it will simply be empty until one is set. Adding the following line into therefresh_callback function should rotate through the 4 butterfly frames. Because the progress is divided by 6 in order to slow the animation to one frame every 6 refreshes, we use a Math library function to round down a number to an integer.<\/p>\n
butterfly_sprite.SetImage(butterfly_images[Math.Int(progress \/ 6) % 4]);<\/pre>\n
\"animation_step3\"<\/a><\/p>\n
There are some other math functions available, sin and cos are often useful. Replace the SetX line with the following to make the butterfly go around in a circle around the centre of the screen.<\/p>\n
theta = progress \/ 100;\r\nbutterfly_sprite.SetX(Window.GetWidth() \/ 2 + Math.Sin(theta) * 200);\r\nbutterfly_sprite.SetY(Window.GetHeight() \/ 2 - Math.Cos(theta) * 200);<\/pre>\n
\"animation_step4\"<\/a><\/p>\n
Now the butterfly looks a little weird pointing the wrong way as it is going around in a circle. We need to rotate the butterfly image so it is flying forward. Add .Rotate(theta)<\/em><\/strong> to the image while setting it to the sprite. This creates a new image which is rotated by the angle theta.<\/p>\n
butterfly_sprite.SetImage(butterfly_images[Math.Int(progress \/ 5) % 4].Rotate(theta)<\/span>);<\/pre>\n
\"animation_step5\"<\/a><\/p>\n
If you have reached this point, you should now have all the knowledge you need to start creating your own themes. For a full list of available functions and script syntax take a look at the freedesktop plymouth script wiki<\/a>. Good luck, have fun and make some nice splash screens.<\/p>\n","protected":false},"excerpt":{"rendered":"
Now the basics have been covered in part 2 of this guide, we can now tackle some more advanced tasks. This part is for beginners to intermediate. If you have never programmed, then this will be a rough introduction to the field and thus you may need to ask for help about some confusing aspects. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,15,16],"tags":[],"_links":{"self":[{"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/197"}],"collection":[{"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=197"}],"version-history":[{"count":16,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/brej.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brej.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}