Ubuntu installer slideshow customization, with pictures!

I have escaped the perilous grasp of Perl, and I bring news:

If you make a localized Ubuntu ISO like the Italian CD, you can customize the installer slideshow, with translated screenshots and more!

How? Follow me!

First, you need to be running Ubuntu 12.10 with the latest version of the Ubuntu defaults builder — 0.35. I assume you already know about the defaults builder, since you are making a localized ISO. If you do not, start with this explanation about localized images. Don’t worry: the defaults builder is a great tool that makes this very easy!

The defaults builder template has been updated to include a “ubiquity-slideshow” folder. Let’s open a terminal and create a new defaults package to play around:

ubuntu-defaults-template ubuntuway-defaults

That will create a fresh defaults source package in a folder named “ubuntuway-defaults”. Open that, then open “ubiquity-slideshow”.

Of course, you can always add ubiquity-slideshow to an existing defaults package.

As you might have guessed, you get to customize the slides! Open “slides.”

Yay, an empty screen, glimmering with potential!

We put slides in this folder, in almost exactly the way they are organized with ubiquity-slideshow itself. Now would be a good time to install ubiquity-slideshow-ubuntu so you can use the base files as reference. Make sure you have at least version 61, because things have changed since Ubuntu 12.04.

With the defaults package, you get to extend /usr/share/ubiquity-slideshow/slides/l10n.

In the ubiquity-slideshow package, each folder contains slides for a particular locale. Note that each folders’ contents look a lot like /usr/share/ubiquity-slideshow/slides.

Back in our defaults package, let’s start by adding some locales. We are going to add translated text and screenshots for en@piglatin. To start, we create a new folder: “en@piglatin.”

On this topic, there should actually be a pig latin option in the locale chooser. It would be sooo cool.

The way this works is the slideshow will search the extra locale folder for a language and, if a particular file is available for that language, it will use it instead of the default. For example, we could replace welcome.jpg for the “it” locale, so when someone installs in Italian that picture will appear instead of the original welcome.jpg.

Let’s replace welcome.jpg for the en@piglatin locale! To replace a file, the easiest thing is to copy where it is in /usr/share/ubiquity-slideshow/slides. You can see there’s a screenshots folder there, with a bunch of screenshots. So, in our own “en@piglatin” folder, we’ll add a screenshots folder. Of course, what you would normally do is look at the original welcome.jpg and create something similar that works for your locale and your disk image, making sure to keep the same dimensions. I’m going to cheat a little.

Custom screenshots folder for en@piglatin, with a custom (colour-shifted) welcome.jpg

One problem with the slideshow is that the screenshots are always in English. Now, you can include translated screenshots. As with anything else here, these go on top of the other files. An Ubuntu install in your language will show the translated screenshots, while an install in English (or any other language) will show the original English screenshots. There isn’t an actual Pig Latin Ubuntu for some reason, so I will translate a screenshot into French for an example.

Some rules of thumb for taking screenshots, if you don’t want to (or it isn’t practical to) do the same thing as the original:

  • Do something practical, like search for a photo or read a web page: don’t open every menu in an application to demonstrate its features.
  • You probably don’t want to have all your own stuff there for the world to see, but if you have some time try to invent a person. It’s just a little more fun than showing a blank photo manager with “Guest” at the top right of the screen.
  • Use the defaults! Create a fresh user account and make sure you don’t touch the font size or the background picture.
  • Make it look good, and if following the above rules makes it bad then please disregard them :)

I went ahead and created a translated screenshot to replace usc.jpg. I took a screenshot of the entire screen, then I opened it in GIMP and scaled to 60% with interpolation set to “Sinc (Lanczos3)”. (You are welcome to choose whatever interpolation works well for the job at hand, of course). After scaling, I used the crop tool, setting a fixed size of 448×304 pixels and leaving a 10×10 border around the application’s main window. (Just line up the box from the crop tool with the top left of the window, then add “-10” to each of the Position number fields).

Cropping a screenshot of Ubuntu Software Centre in French. Yes, it’s also easy to subtract 10 in your head, but OMG cool GIMP feature!

I saved the picture as usc.jpg and added it to the screenshots folder, right beside welcome.jpg. You may add screenshots for as many languages as you want, as long as they fit on the CD, but please keep in mind there is a high maintenance cost.

Now we can try this thing! Open a terminal: we’re going to build a defaults package and see what happens.

cd ubuntuway-defaults
debuild

A package file should appear in the parent directory, called ubuntuway-defaults_0.1_all.deb. Just double click the file and choose Install. To see this in action, you also need to install ubiquity-slideshow-ubuntu and download the slideshow testing tool (Slideshow.py). Sorry, just a little more terminal stuff ahead.

Open a terminal pointed to wherever you downloaded Slideshow.py.

chmod +x Slideshow.py 
./Slideshow.py --path=/usr/share/ubiquity-slideshow --locale='en@piglatin'
Psychedelic!
Translated!

Now, about that text…

We’re going to add some information that we know will be useful for people who receive this disk image, and we will translate some stuff into Pig Latin as an example. The files we need to replace are called welcome.html and gethelp.html, and they’re html files, so if you know HTML it will be a piece of cake.

Again, the easiest thing is to find the files we need from the base ubiquity-slideshow and copy them. In this case, we’ll copy and paste the files and then edit them with our changes. But before you do that, remember that the slideshow is very likely to be available in your language. Before you copy slides from /usr/share/ubiquity-slideshow/slides, look for them under your locale at /usr/share/ubiquity-slideshow/slides/l10n.

With this example, there is (of course) no Pig Latin translation to base on, so we will just add some new stuff on top of the English slideshow. In theory, we could actually translate all the slides to Pig Latin here, but that would make a very poor example because it shouldn’t be necessary: the best practice for this part is to do translations in the ubiquity-slideshow project, and then just tweak those translations in the defaults package.

welcome.html and gethelp.html copied from the base locale at /usr/share/ubiquity-slideshow/slides

Open welcome.html in your favourite text editor, look for the content, and do what you want. Be careful, though: a syntax error can cause all sorts of problems.

Writing some helpful targeted content for gethelp.html

To see the changes we need to build the package again.

cd ubuntuway-defaults
debuild
sudo dpkg -i ../ubuntuway-defaults_0.1_all.deb
./Slideshow.py --path=/usr/share/ubiquity-slideshow --locale='en@piglatin'
The installer slideshow with our localized gethelp.html

Now that we have the defaults package figured out, we can go one step further: build a disk image!

mkdir image-builder-tmp
cd image-builder-tmp
ubuntu-defaults-image --package=../ubuntuway-defaults_0.1_all.deb

This will take a while. When it’s done, it will spit out a file called livecd.ubuntu.iso. Just load that in VirtualBox or something of the sort. When you install, it should look exactly like the preview. (Assuming you use a language that can be selected in Ubiquity, and that language has been selected).

I really upset the live CD trying to make the Pig Latin example show up, so that’s why there are no window titles, but it works, right?

That should get you started. I hope you like it! Go ahead and download the ubuntuway-defaults source package to explore, and please share how it goes.

Using ubiquity-slideshow for loco websites

David P let me know that some loco teams are interested in using Ubuntu’s installer slideshow on their websites. It could serve as a quick tour of Ubuntu in their language. Lots of people do lots of work to localise this stuff, so using that work in other places sounds fun. I would like to quickly show how to do that with the slideshow. Mostly this is using jQuery and the jQuery.Cycle plugin, so if you just want to make a cool presentation from scratch, that is the place to look.

So, let’s make this simple by using the released package that is shipped in Ubuntu. If you want to make changes or update the localization, let me know and I can write about that (though I hope the Readme in lp:ubiquity-slideshow-ubuntu does the trick).

You can install the installer slideshow for your version of Ubuntu. It is ubiquity-slideshow-ubuntu in the repositories. (Or -kubuntu if you are using Kubuntu, etc). The binary and source packages are also available at the usual place on Launchpad. The actual content we are interested in installs to /usr/share/ubiquity-slideshow. It is all regular HTML, so pretty easy to play with. First, copy the slides folder to somewhere in your home folder; we will work with that now.
Obligatory copyright notice: the slideshow is licensed Creative Commons Attribution-ShareAlike 3. A file with more details installs to /usr/share/doc/ubiquity-slideshow-ubuntu/copyright.

Now, open the slides folder. This may look overwhelming at first, but we will fix that. There are a whole bunch of folders named like loc.zh_TW and each one contains a version of the slideshow’s text for a specific locale (where everything after loc. is the locale code). In addition, each slide in the slideshow is its own file like photos.html and the slideshow itself is glued together by index.html, which has a list of all the slides in order. The slideshow can be told to run with a specific locale, where it loads the slides from that locale’s folder instead of the usual place.

You probably only need one locale, so let’s just deal with that now: open the folder for your locale. (If you don’t know your locale code, this table might help). Now move the contents to the slides folder, replacing the existing English slides. Now delete all the locale folders. (It’s quick to do that in Nautilus: press ctrl+s, enter loc.* for the pattern and hit OK, then delete the selection as usual). We don’t need directory.js, either, so delete that.

Now let’s test this to make sure everything is working. If you try opening index.html in your web browser, it will open that but the slideshow won’t show up. This is because your browser is being sensible and it is blocking the Javascript I mentioned from loading anything on your hard drive. You have a few options instead. Upload the slideshow to a website, or run a local http server. Of course, Python makes this easy. Head to the slides folder in a terminal and runpython -m SimpleHTTPServer…now, if you go to http://localhost:8000 in your web browser, the slideshow should appear.

Okay, great! Now what?
Let’s fix this up to make it look good on your website. First, open index.html in a text editor.

Remove the line that loads directory.js, which looks like &ltscript type=”text/javascript” src=”directory.js”&gt&lt/script&gt. We deleted that file earlier because it just describes the directory structure so the script knows what locales are available. Since we removed all the other locales, it serves no purpose (and actually slows down page loading since the browser will always request that file).

If your locale is a right-to-left language, add class=”rtl” to the <body> tag. This turns on the right-to-left rules in general.css.

About halfway down, you will see a list of items like<div><a href="welcome.html"></a></div>You may have noticed that the first and last slide are pretty specific to actually installing Ubuntu, so they aren’t really suited for what we are doing here. If you want, just remove the first and last ones from the list and they won’t be shown. You can also re-order these or add new slides in a similar way. If you’re wondering, the Javascript at the top of the file loads each of those listed slides using XHR.

Of course, linking someone to index.html as we have it now is a little boring. I encourage you to copy and paste the #slideshow element and stick it in another web page. It could make a nice decoration. As long as your page loads the slideshow’s css stylesheet, jquery, jquery.cycle and slideshow.js as in the <head> section, it will work out fine. (Though you may need to make some slight changes to general.css so it doesn’t interfere with the rest of your page. The likely offenders are at the top and there is a rule at line 202, affecting all IMG tags, that you may want to remove).

I should point out that this is (and always will be) intended to be used in one place: while installing Ubuntu. So, its design could change drastically. I would love to keep this going, but it’s mostly a lucky coincidence that it fits in websites today.
(It would be neat to see a loco-web-resources project on Launchpad, but I don’t think I’m the guy to spearhead that)

I hope this was helpful. If you have any questions, feel free to leave a comment and I will try to answer.

Home from UDS-N

I’m back home from UDS-N in Orlando! It was an intense week; I don’t think an hour went by without something excellent happening. Of course, the most excellent thing for me was that Canonical sponsored me to attend. That was incredibly kind. To everyone who organized UDS, thank you for putting all of this together!
(And the Ubuntu notebooks are really nice, too)

The hotel seemed to be a place of extremes. It was very hot outside, so they turned the convention center into a freezer. That way we had a choice to freeze inside or melt outside. I chose the former, as it was more consistent with home. The beds were regularly MADE (in the most intense fashion I have yet witnessed) so that every night, when one finally succeeded in wedging between the sheets and the mattress, one felt truly accomplished. The hotel was massive but well organised, and the service was excellent. (Including the shuttles). A server remembered that I like tea (with milk in it) with breakfast, which is outstanding given the number of us there.

They even have a parrot!

Mark’s big announcement about Unity Desktop was a catalyst for some really action packed discussions. There is a lot of change going on this cycle, but it feels attainable. I think everyone has done a great job positioning the new goodies in the platform so they can suddenly jump to life in one coordinated, shiny burst of energy next year.I think this year is the “OMG we can make videos!” year for Ubuntu. The first thing that happened in the introduction at 9AM on Monday was an amazing, well produced video about Ubuntu. With colours. And moving things. And sound. And there were no full-screen videos of the desktop where the viewer is expected to care about some tiny movement over a sixteenth of the screen. Oh, and the computer talked to the projector. That was pretty cool to see. More, please!

I went in doubtful about Unity on the desktop. To be honest, I hadn’t explored it much beyond a brief surface scan and a bit of groaning about the less-than-stellar state it shipped in with Maverick with regards to stability. Some sessions — Mark’s impromptu Unity Q&A, Neil’s presentation of the Unity Places API — and the very tangible interest in accessibility quickly changed my tune. Unity’s design is glorious. There is a ton of energy, and I think it’s going to amaze people with 11.04. I learned it is mostly written with Vala, too, which makes me as a potential contributor very happy.

It also helps that the Places API session began with Neil showing off libdee. Though it may have been a bad idea to have that at the start; I was already distracted, excitedly installing the thing and playing with it on my own machine because it is that amazing. It abstracts a bunch of DBus stuff so you can have a number of individual programs that share data between each other, where dee connects those programs for you. So, a bunch of DeePeers share a DeeSharedModel object and new DeePeers can pop in and manipulate that same object at the same time. (Technically, each has its own copy and no one peer is depended on by all the others). Pretty darn cool.
Places is even more amazing. Really. It is going to do great things.

Had a very productive session about Harvest where we talked about the new stuff all hosted at harvest.ubuntu.com, discussing what people need and want for it to serve them well. Being a simpleton, all I want is a new logo, and then I can make the header look pretty ;)
I volunteered to work on RSS feeds, a “link to these results” button and a few odd bug fixes.

I received lots of kind words about my GSoC project over the week. I was frequently surprised to get them and reacted with a terrifying amount of modesty, so if I forgot at the moment I will say it now: thanks for all the kind words. And thank you for letting me mess with Harvest, Daniel H and James W!

Speaking of thanks, somebody very kindly organised for a bunch of people to go to the Disneyworld Epcot park. I went on Wednesday with fearless leader Jussi, Rodrigo, Harald and Rohan and, yes, we met Mickey and Pluto.

This photo is by Jussi. Unfortunately, the group photo with Mickey is probably trapped forever on Disney’s website. We figured out the photopass service exists to make money only when it was too late.

All these Kubuntu people are obviously in the midst of a subversive plot to convert everyone, by the way. At this point I feel a nearly overwhelming urge to use Kubuntu, or at least to make stuff with Qt (and I have been thoroughly trained to always pronounce it “Cute”). The only thing holding me back is its default wallpaper. (Thanks, Rohan). The multiple lightning talks about QML were spectacular, too. It’s a declarative language for creating beautiful user interfaces with Qt. Wondrous animated magic in a few lines of very simple, friendly looking code. (And QtCreator is involved, too. Eeee!)Tragically, I haven’t figured out who organised this and paid for the tickets. So, thank you, mysterious benefactor! It was really nice to do, I wouldn’t have figured it all out normally and I would have regretted if I hadn’t. That really was a wonderful way to spend Wednesday night.

I’d better look productive again. Talked to a lot of people about the installer slideshow in Ubuntu, Kubuntu, etc. I didn’t get everyone, but we’re poised to get out of the way with this cycle and land things at sensible times. I’m hoping to freeze strings before the Documentation String Freeze and leave a lot of room for translations to come in and be tested naturally. If all goes well, nobody will need to think about it from here on out. (Unless you happen to be responsible for one of those slideshows or are interested in contributing to a highly visible part of Ubuntu’s first run experience. In that case, please do think about it and contact me!)

I was at the session about the Free Culture Showcase. Ivanka has a really cool vision for how this should be in the future and I’m looking forward to where it goes. One thing we all agree on is it needs more videos. Videos like the photos; as diverse, fun and attractive as the people who use and make Ubuntu :)

If you're wondering what happened to all the things with lights in them at the closing party…

It was a very exciting, energising week. Thanks, everyone, for a fantastic UDS. The Natty Narwhal is going to be great.

The new installer slideshow for Ubuntu Maverick

Just thought I should clear up what’s going on with Ubuntu’s installer slideshow for Maverick, since I’ve been getting lots of bug reports about it.

Today’s beta still has the old Lucid slideshow (with one little change so it isn’t blatantly outdated), but we are working on a new one. It’s all from a smart new design mocked up by Michael Forrest. We’re changing things by adding big screenshots and reusing copy from the Ubuntu tour on the web.

I know, that content is from the Lucid tour, and I'm still running Lucid, but it's shiny and new at the same time!

Of course, using content from the website does change the underlying tone a little; it is consistent describing what you’re getting rather than (with frequent exceptions) how you start using it. But what’s life without change? What I love about the tour is it’s really simple and well written and it makes some extra effort to show what you can get. I think this is perfect to go with the new Software Centre, which is going to make those options much more relevant to everyday users. So, no more duplicate effort writing introduction text we already have on ubuntu.com. That approach is going to help keep things simple, which is something the project needs (because it is simple and it should convey that simplicity at all levels of its existence… as opposed to my colossal sentences, apparently)!

I guess I also like it because I’m doing less work. Just need to make a nice intro and outro slide, grumble about stuff and tinker with Javascript ;)

Finally, I can’t claim image compression has changed in the last two years to allow this. Andrew, you were right: images are great!

If you have any questions, concerns or ideas about this, please leave a note in the comments and be excellent to each other.

New stuff for ubiquity-slideshow!

Remember that slideshow when you did a fresh install of Ubuntu Karmic?

For Lucid, ubiquity-slideshow is rocking, if I may say so myself :)

First of all, a quick refresher: this is a really simple project with the goal of providing an introductory slideshow that runs when people install Ubuntu. The ubiquity-slideshow packages are all content packages, then Ubiquity displays that content at the right time.

The slideshow is implemented with Webkit, since all the cool people use Webkit. (It also renders things nicely, it’s flexible, quick, we can quickly throw it on the web, people can make content really easily, and Javascript allows us a good split between interactive goodies and actual functionality like installing the operating system).

As far as content is concerned, I try to keep this different from other introductory slideshows in the content that I maintain. It doesn’t try to sell the product as people install it, instead providing some exciting points of action for getting started. Not as vague as you get in Windows’ slideshows, but not an in-depth how-to either.
The idea is really summed up in the first slide: Through this I want to encourage new users to explore Ubuntu and really discover how awesome it is (instead of what buttons to press).

(I admit it: I am obsessed with whitespace)

So: Lucid… Lots of new stuff here.

First of all, the project is now providing separate slideshows for Xubuntu, Kubuntu and Ubuntu installations. It’s also really easy to add more, so anyone who wants in on neat slideshowy action can!
I’m hoping to get an Ubuntu Netbook Edition slideshow in there, too. It isn’t perfect at the moment, so if you have any suggestions for what needs to be done or said, please let me know or write to the ubiquity-slideshow mailing list on Launchpad!

Translations aren’t horrific to work with any more. It’s still possible that strings may change before documentation freeze, but the gist of it is we just have one translation template that has all the text for each slideshow. You can go through the list on a rainy afternoon and have your favourite distro’s installer slideshow completely translated for your locale.

Speaking of strings being changeable, if you see any errors, things that sound strange, things that are useless, things we need or things that you could say better, please file a bug or let me know. I keep a recent copy of things at http://people.ubuntu.com/~dylanmccall/ubiquity-slideshow-ubuntu

Michael Forrest and Otto Greenslade, from the design team, sent me a mockup and some graphics to fit with the exciting new Ubuntu branding. I worked them into the CSS and played with the text a little. Thus, behold, the proposed new look for the Ubuntu slideshow!

The whole thing can be seen on the web. It is a little bit larger than the one in Karmic.
Imagine it in Ubiquity, without a border, inside the awesome new Ambience theme, gracefully connecting to the title bar. Mmm…

Keep in mind this is still a proposal, just fully implemented (granted a few clunky bits).
Any constructive feedbacks or cries of “stop, you maniac!” are certainly not in vain :)

Thanks for listening!