Ceci est une ancienne révision du document !
Interactive Mockup is the only remaining new extension that arrived with version 1.0 for me to discuss in this series. But what I initially thought was going to be a simple topic to cover has thrown up a few questions and issues which will stretch this topic out to more than one article. To start with, though, let’s take a look at this extension, what it does, and how to use it.
Web > Interactive Mockup
This extension is intended to let you use Inkscape to create user interface mock-ups with some limited interactivity. It could also be used to create a simple slideshow, a basic adventure game, or more. It does this by injecting some simple JavaScript into your document, so the final file has to be loaded into a web browser in order to produce the interactivity suggested by its name.
But let’s start with a quick definition: the “interactive” mock-ups I’m referring to here are little more than a series of static images containing clickable regions that let you navigate between them. If you were mocking up a series of dialog boxes to form a “wizard” type of interface, you could use this extension to detect a click on the “forward” and “back” buttons in your images. Each click would switch to another image in the sequence, allowing you to demonstrate how your potential user interface might work before you actually start to code it.
Another example is when mocking up a website. Perhaps you’ve got a series of images, one for each page in the final site, created using a design tool or from a scanned sketch, but not yet turned into actual HTML code. Using this extension, you could combine those images into a working demonstration of how the page might operate, complete with clickable menus and links for moving between the different pages.
I’m going to use this latter example to show you how this extension operates, by mocking-up a very simple 3-page website. Just make sure you understand that this approach could be used to let you link any series of images together, and isn’t restricted to websites. The reason it’s found in the Extensions ‣ Web submenu is solely because the final result is a file that has to be opened in a web browser in order to work.
Let’s start with the main home page for my website. This will be the starting content when the document is loaded into a browser, and will define the physical size for the whole presentation. In this case, I’m going to demo the site using an HD monitor, with the browser set to fullscreen mode (by pressing F11), meaning I’ll have every one of those 1920×1080 pixels to play with. To begin with, therefore, I’ll open the Document Properties and set my document up as follows: Display units: px Page Size: Video HD 1080p (1920 × 1080px) Scale x: 1.0 Viewbox x, y, width, height: 0, 0, 1920, 1080 (these should be set automatically)
The last two items aren’t so important, but ensuring we have a scale value of 1.0 means that we can use specific pixel dimensions in our page design, since there’s a 1:1 mapping between each pixel in our drawing, and the corresponding pixel on-screen once the page is rendered by the browser.
Now to add some content to the page, starting with a home page. It won’t win any design awards, but it will do the job for demonstrating this extension (above).
The key part of the design is the section at the top right. That’s where I want to have links to navigate between pages. Those are the elements that will become clickable in order to move from page to page in my mock-up. Of course, in order to be able to do this, we actually need some pages to move to! Time to create the second entry in my mock-up: the “About” page.
This is where things start to get a little tricky. We need our new page to have the same dimensions as the first one. If we were creating these as completely separate files, that would be simple enough - just create a new document with the same properties as the first. In practice, I’d probably just use File > Save As… on the first document, then edit the content to suit, but either approach would create multiple files, each with the same basic page properties. But this extension doesn’t link between separate documents, so that approach is no good.
Another sensible method would be to create each image on a separate layer. That way all the images share the same document properties, by definition. But this extension doesn’t work with layers, either.
What it actually does is inject some JavaScript that will change the viewBox attribute on the <svg> element. This is an approach that has been discussed in this column in the past, with respect to “SVG sprites” (part 79, in FCM #139). More specifically, the extension actually only changes the first two numbers in the viewBox – the ones that define the top-left corner of the view. The other two numbers – those that define the width and height - remain fixed, so it’s pretty much essential that all our mock-up pages are the same size.
I find that the easiest way to do this is to enable the snap-to-page option and then draw a rectangle from the top-left corner of the page to the bottom-right. Alternatively, you could simply draw a rectangle anywhere and then set its width and height to the correct dimensions via the tool control bar. In either case, you want to end up with a rectangle that is the same size as your main document page, but you should then drag it outside of the page boundary. Repeat this for each frame you will require in your mock-up, so that the new ‘pages’ are distributed around the real Inkscape page, and don’t overlap. It doesn’t matter if they’re arranged in a row, column, grid, or randomly placed, so don’t get unnecessarily caught up in the positioning of each page.
Now you can draw the content of each image within the confines of its rectangle. As you are likely to need some sort of background color in your mock-up (even if that color is only white), I suggest giving each rectangle a solid fill and then locking it, or the layer it lives on, to avoid it being accidentally moved when drawing on top of it.
Following this approach, the selection of pages in my mock-up website ends up looking like the image on the previous page, bottom right.
Now that we have some pages in place, we can start adding a little interactivity using the extension. The first thing I’m going to do is to ensure that the “About” link on the Home page connects to the About page. The extension requires you to have two elements selected: in this case I’ll select the “About” text element on my Home page, then hold Shift as I click on the background rectangle that encloses the About page. With those two items selected, I can click on Extensions > Web > Interactive Mockup, to be presented with this rather underwhelming dialog. As you can see, there’s nothing but a Help tab and an “Action” pop-up. The latter offers various ways in which interacting with the first element in your selection will switch the viewBox to point to the second element in your selection. Most of the time you will probably want to leave this set as “click”. In almost all cases, therefore, there’s nothing for you to do here but to click on the “Apply” button and close the dialog.
Nothing will have changed visibly in your page, but the extension has added some JavaScript to the first element in your selection. Open the Object > Object Properties dialog and expand the “Interactivity” section; you’ll notice a small piece of JavaScript has been added to one of the fields (you may also notice that the list of fields available in this dialog maps suspiciously closely to the options in the pop-up within the extension dialog).
I’ll look at the JavaScript itself in future, but for now it’s sufficient to know that this is what is ultimately responsible for changing the viewBox when the first selected element is interacted with (i.e. clicked on, in this case). At this point you can save the file as a normal Inkscape SVG document and load it directly into a web browser. Browsers don’t actually make this capability terribly obvious these days, but you can either drag the file directly into the browser window, or hit Ctrl-O to bring up an Open File dialog, just as you might in any other program.
When the page loads in the browser you’ll probably notice that some of it is cut-off.
This might seem a little strange, given that we’re working with a scalable image, but it boils down to the fact that we set a specific width and height for the file, in pixels, in the Document Properties dialog. You may recall that the intention was for it to fit the dimensions of an HD screen when the browser is switched to fullscreen mode. Press F11, therefore, and our mock web page fits perfectly!
Now we can test the interactivity. Click on the “About” link and, as expected, the view switches to the relevant mock page in our document. At this point, however, no other links have been set up, so we can’t click the “Home” button to return to the previous view. Neither can you use the Back button (or keyboard shortcut) within the browser, since the URL hasn’t actually changed – the JavaScript has just dynamically updated the content of our page in order to set the new viewBox.
Let’s return to Inkscape and fix some of these issues by adding more links. First we need to add a connection going from the “About” link on the Contacts page to the rectangle of the About page itself, in just the same way that we did with the previous link from the Home page. With that in place it’s now possible to jump to the About page from either of the others. As this shows, it’s okay for the same element to be the target of several different links.
We also want both the Home and About pages to link to the Contacts page. We could connect each link item individually, as we’ve been doing so far, but the extension offers a small shortcut that can help us. If you call the extension with more than two objects selected, the last one is used as the target, and all the others are linked to it. This means that we just have to select the first “Contact” element (on the Home page), then hold Shift while we click on the second one (on the About page), and continue to hold it while we click on the target background rectangle for the Contacts page.
With all three items selected we’ll now use another little shortcut, offered by Inkscape itself. We know we don’t have to change the single parameter within the extension dialog, so we can just use Extensions > Previous Extension to run the extension directly, without having to interact with the dialog. The JavaScript is added to both our menu links as one step. This approach makes it quick and easy to finish all the remaining links between our three pages.
With that done, all that remains is to save the file, reload it in the browser, switch to full-screen (F11) if needed, and click the fake links to switch between all three pages of our mocked-up website. Pretty cool stuff, right?
Of course this is all well and good if you’ve created your mock-ups within Inkscape. You can easily select the individual objects that are to act as triggers. But what if your “page” is actually a bitmap image, exported from a paint program or scanned from a sketch on a napkin? Or it might be a more complex Inkscape image, with your objects nested deeply inside a range of groups, making it tricky to select both the trigger and the target element at the same time. In those cases, there’s a simple little trick that can help you out: just draw fresh elements over the top of your page which will act as your triggers and/or destinations.
Start with a simple shape with a colored fill that covers your trigger item completely. It doesn’t even need to be a rectangle, if your design calls for something more complex. Give it a little opacity so you can see what you’re doing as you start to add more of them to cater for every possible link in your mock-up. Use the extension to add the interactivity then, just before saving, set the opacity way down on these new shapes. You can set it to zero to ensure they’re not visible on the page at all, but that does make it trickier to re-select them for editing later. A useful trick is to set their opacity to 1: this is usually so transparent that there’s no hint of them on the final page, but they’re much easier to select in Inkscape itself if they need to be modified in future.
With this approach, it’s fairly trivial to turn even a series of pencil sketches into something that’s interactive enough to work as a proof-of-concept demo. Want to improve the UI of your favourite Open Source application? Before wading in with a code editor, you could take some screenshots, edit them in The GIMP, and use this extension to test out your ideas on other users first.
I’m sure you can see how this simple extension makes it very quick and easy to create interactive mock-ups. For a lot of situations, this may be all that you need, but next time I’ll take a look at some of the problems presented by such a simple system, and how they can be addressed with just a little extra effort.