 This is our first session of the Creative Freedom Summit and Mo and I are the hosts for today. So we'll be coming on at the beginning and the end of each session to do a little introduction, moderate questions, chat with the speakers. And today our first speaker is Maureen Duffy. Maureen is the Fedora design team lead and has been contributing to Fedora for almost 20 years. So she is the expert in Fedora design and I'm excited for you to show off one of the latest pieces of, well, latest things we've discovered in Inkscape to make our jobs a little bit easier. So take it away, Mo, and I will keep my eye on the chat for questions and any other commentary and feedback. There we go. All right, cool. So I'm here to talk to you today about automation in Inkscape using a tool called Next Generator. It's an extension for Inkscape written by Maureen Hockman, who is in the Inkscape community, and it basically lets you automate graphics production, all those sort of tedious, very similar, but with different texts or with different data points, graphics that you might need to make. So why? Like, why do you need this tool? For conference branding, such as for this very own conference, we've made different slides and graphics for each talk with talk name and the speaker name and the name of the conference. There's also name cards, name tags for events, even like room signage at a conference, product labels, if you have different products, but the label design is the same. You just need to switch out the name of the product or something like that. There's also awards and certificates where you're personalizing something or even like personalized greeting cards. If you do a lot of, say, YouTubing or peer tubing and you need cover graphics for your videos, this is a great tool for that to keep them consistent and you can just change the title of the video and swap in graphics. And then for social media campaigns, if you have a series of, say, I don't know, posts you're doing online and you don't want them all to have the same look and feel with slightly different graphics and text in them, you can use this as well. So how do you do it? There's four main components that you need to be thinking about when you automate graphics in Inkscape using Next Generator. And of course, the first component is Next Generator. It is an extension for Inkscape and the URL is here. And don't worry about like copying anything down because I will share. We have a GitLab repo that has all of the files you need for this and it has instructions on how to install Next Generator. So I'm not going to like burn time showing you how to install it. It's not difficult to install. The second bit is that you need a spreadsheet. And the spreadsheet, you basically export it as a CSV formatted file. That is where you have all of the items that you want to change in each graphic. So each graphic that this automation tool produces has its own row in the spreadsheet. So we'll go over that. And then the last bit on this slide, we have one more bit to cover. The last bit on this slide is a JSON snippet. And the snippet is needed if you're going to change colors or graphics that are in the file. And we will be doing that. So you'll see how that works. It's a little tricky to get the formatting right on it, but it's well worth the effort. Okay, so the final thing that you need to make use of this tool is an SVG template. Now you can make it yourself from scratch. You can start with the one I have in the Git repo as sort of a beginning start and modify it or whatever you'd like. But this is sort of the one that we'll be using today in this demo. And then this is how you can get the files from GitLab. I made it kind of simple. It's just bit.ly slash inkscape dash automation, all the files that you need are here. So there you go. So let's do it. Okay, so we're going to start in inkscape. And I'm going to talk to you a little bit about how this template file is set up. We have every item in the file that has the percent symbols on either side and a capital var underscore is going to be a variable that gets replaced. And the way that the extension finds the text to insert into that area is based on the column names in the spreadsheet. So you can see here, the very first column name I have here is conference name. All together I capitalize the first letter of each word. And then if you compare that to this variable, you'll see after the underscore, it's conference name, the exact same. So when I hit this and go to generate the files, it'll fill in, it'll give me one, two, three, four output files. For the first one, it'll replace this percent sign bar conference name with best con. It'll replace for the second one, Fedora Nass, the third one, bamboo fest, and the last one, awesome con. Now you can make as many variables as you want. The main thing to think about is to make sure that when you put it somewhere in inkscape and you can do it anywhere, that you have the percent capital var underscore, then have the name of the variable exactly the same as it is in the spreadsheet column name. And then follow it with the percentage sign and it should just work. The other thing to think about here that we're doing is we have a track system. And we have a track name here. And then we have a little highlight color here. I made it obnoxious red so it was very easy to find in the spreadsheet. It should be like, oh, actually it's not in the spreadsheet. Sorry, but it's just a very bright red. So you would know that that's something that probably should be changed. And this bright red, you can look at the color here. Oh, wrong tab. Okay. It is ff 0000. So remember that. So now when we go to the JSON file, so this is how you change colors and graphics in the JSON file. When you look for the ff 0000, you'll see that's obnoxious red. And so that one we've labeled in the JSON file accent color. So basically when you're changing, you're changing any colors in the file. You're not using the spreadsheet or you're not using the inkscape file to set what the variable name is. You're using this JSON. And there's like a few gotchas with the JSON that I'll kind of go through. But it kind of works the same. But here you're saying background color one, for example. So I have this gradient here. You can do gradients with this. It's fine. This one is f1a2daf. So it starts there. And then when it goes out, it goes to the darker blue, which is like 294. So you can see here color one is f1a, and then color two is 294. So we're not changing the colors with the JSON. We're telling inkscape what colors in the template will change and giving them variable names. Because then if we open up the spreadsheet here, you'll see we have background color one, background color two, accent color. And you can see how we have different values for them here. So what it's saying is, okay, inkscape, wherever you see the color f1a2da, I want you to replace it with whatever color is in this column. And it's the same with the accent color. Now, the photos work similarly. So here I have this picture, and it's just of a cute panda. It's a Fedora character. Let me see if I can do object properties. No. This is imported into this file as, oh here, photo.png. So in the same way that you're telling inkscape, okay, wherever you see obnoxious red, replace it with this color. And I'm naming it accent color. With any kind of graphics you have in the file, you give it the file name, and you basically say wherever you see this file name, I'm calling it this variable name, replace it with this one that's further down in the column. So for here we have photo. We have, these are the different files that we have. And then when you're opening up the JSON, you see photo.png is set to be named photo. So you see, again, you have the match between the column name and then the variable name in the JSON. So I'm going to go ahead and run this so you can see what happens. And then I'll kind of go over some of the gotchas. Now, one of the things that I have set up here just to keep everything simple is I don't have any file paths in the names of the photo file names. I just have them in the same photo as the template. And there's a couple of reasons for this. The first one is that I just didn't want to make this unnecessarily complicated. You know, some people have windows, some people have OS 10, some people have Linux and the file paths are going to look different on each OS. So let's just drop that complication. But the other thing is that if you keep the photos in the same directory as the template, you could just zip up the whole directory and just save that. So if you ever wanted to come back, say it's a conference presentation kit, you want to come back and use the same graphics but just edit the year name. You can do that and it makes it more portable so you don't have to worry about the file path. So that's why it's set up that way. And I just want to show you I have this output folder here and it's empty so you know that I'm not cheating here. Okay, I'm going to keep this open and pinned just so you can see what's going on. So now my final step here is I'm going to go into extensions, export next generator. Now I've already kind of prefilled this out, but here you can see this is that CSV file that's in the labor office that I was going through before. So you just, you can use the browse dialogue here, you could copy paste the path, whatever. And then this is that JSON that we kind of put together here with all the color name, the color values in the template, aligning them to a variable name and then aligning the file name of the image with a variable name. And then there's a few options here. You can output them as SVG, which I recommend in case you have to make a last minute manual change. I'm going to output them as PNG. And then you can change the DPI. And then finally it asks you which, which variable would you like to use for the file name for each one. So I'm using talk name since these are conference talks, and you just write it out the same way you would write it in the template. So you have the percent sign capital var underscore variable name and then the percent sign. And then it asks you which folder to save it. And you can see I said save it an example output. So here we go. All right, this is the funnest part of the talk. So I'm going to hit apply. And here they come. And you can see that the file names are based on the talk names. And you can see all the colors of the different talks are different. And these are all the values that are set in this spreadsheet right here. So that's where it understands what to fill in here. And it is actually pretty fast. Like we've used this to generate a couple hundred files and it doesn't take that long actually. But this is how that works. And just a few gotchas that I wanted to go over and then I can kind of open up the questions. And I am accelerating this talk because of the technical issues. I apologize for those. So a few things you might want to think about when you're doing this. The first thing is that when you put color values both in the JSON and in the spreadsheet, you want to make sure that you don't use the hash mark at the front. It just doesn't work. You just drop the hash mark. The other thing to think about, especially if you're using inkscape to develop this is that inkscape likes to have an additional digit at the end of the color hex value. And it's like an alpha channel. You don't need that. If you put it in, it won't work. So just if you're copy pasting color values from inkscape, just make sure you remove the last two letters from the end. Another thing, another set of things to think about here is when you come up with your formatting here, what I like to do, you can see here is I actually use the text tool in inkscape and drag out a text window. And I don't know how clear this is going to show on the stream. But you can see here, I'm just dragging out sort of a frame for the text to go in. So that's in case you have like a really long talk name or say the presenter has a long name. You want to define the area that the text can go in so it doesn't run off the side of the image or blow out the bottom. And through running this with a bunch of data, it seems to respect the boundaries of the text box that you set. So that's something to think about. And of course, all of the general design principles, you would think about designing a graphic layout that has a lot of text that can change in length. It's just thinking about, you know, did I put enough space between the talk name and the presenter? Or, you know, could there be two presenters, maybe have an optional block that gets filled in? So those are just all things you want to think about. I already mentioned the file name and the paths for graphic images. So that's something to think about too. It's just, if you keep the images in the same directory as the template, it makes your life so much easier. I guess one other thing I might show here is this is actually, you can use the same variable name multiple times. So this little effect, it's like a little drop shadow I did here. It's just the same variable in two different objects on Inkscape, and it fills them both in fine. So if you wanted to repeat a variable in multiple spaces or places on the screen, you could do that in this. So that's about it actually. Hopefully I'm good on time. Does anybody have questions? Let me go into the chat and see. Hey Mo, there's some questions and I can feed them to you so it makes it a bit easier on you. There is somebody in the etherpad answering them, but I think it'll be useful to, you know, answer them live on the video. So when that video gets replayed, all these kinds of extra questions are in there. So the first one is you used a spreadsheet as input for the automation. Is it possible to use different formats? YAML, CSV, someone mentions that this is a CSV, but are there other formats you can use like YAML? No, the extension does just take CSV. Of course, there's nothing to stop you from taking a YAML file and converting it to CSV, but it really depends on the structure or how much of a pain that's going to be. And I kind of wonder what is the context of the question? Like, does somebody have YAML files for something that they'd like to feed into this? That could be an interesting thing to look at. Okay. Let's see if we get a follow up there. But in the meantime, can you trigger the export from the command line? That's a good question. I am not sure. I would say we could look at... Oh, one thing actually that I forgot to note is when you go into the tool inside Inkscape, Next Generator, it has a really, really helpful help documentation screen. It's very handy. It does not mention command line usage, however. But yeah, that's something I can research and follow up. Cool. Someone in the etherpad says yes. So whoever wrote that in the etherpad, if you found on that, that would be awesome. The next question is, you show it generated a PNG, but does it also produce SVGs for every combination of inputs? Yes, it does. Let's do it right now real quick. So it has this dropdown. The supported formats are PNG, PDF, SVG, PS, and EPS. Now, when you do SVG, like, and commonly if you work with SVGs in Inkscape a lot, you know, there's the Inkscape SVG and plain SVG. And I think it's SVG compressed. I think it's just doing an Inkscape SVG, but here. So I'll pin this up again. Now, the reason, I'll tell you the reason that I didn't do the generation with SVG, and I'll explain it because I don't want anybody to panic if they try this. You can see how the PNG preview here in Nautilus looks a little bit better than the SVG one. That is because I might be not 100% correct on all the technical details here, but the renderer that Nautilus uses to generate SVG thumbnails is LibR SVG, and I believe Inkscape uses a different SVG generation library. So it's just going to look different. Like in this one, the fonts aren't rendering properly. But if you open this up in Inkscape, it will look just fine. So don't panic if the thumbnails for your SVGs look weird. See, it looks just fine. So. Cool. So a follow up on that first question was someone says that they were thinking the text might be large and that they prefer to type that out and store it in a text editor versus, you know, a spreadsheet format. Oh, you don't have to open in a spreadsheet. You could just open this in your favorite text editor here. Where is this popping under? Oh, here it is. Yeah, yeah. And I believe I read on the read me for the extension that you can add additional spacing and stuff to this file and it will still work. So, but yeah, you could just edit this in a text editor. And you can see each row, each, like the column names are at the top row and then each row is a different slide that's getting generated. Yeah. So that's a nice spreadsheet. I just find it more convenient. Cool. Okay. So we have one more question here. Okay. Will it always export the full page or can you configure it just export pieces of the page? Would you be consistently exporting the same piece or would you be exporting different pieces for different ones? They didn't. I don't know if I could specify that, but I guess if you could mention which would happen in each case or what's the capability as far as that goes. Yeah. I've only ever used it just with the Inkscape document, just the Inkscape page. I've never tried to change it. I mean, that is absolutely something you could do and just maybe not with this tool. The reason that I bring this up is before this tool existed and made my life so much easier, I had a series of Python scripts that I used that would go through the DOM of the SVG document to export certain things, you know, things for like, you know, if you have a sheet of icons in one file and you need to slice them out to separate ones or if you needed to make modifications to a text in a file. Like we used to have countdown banners in Fedora, like counting down the days to Fedora. So I had a Python script for that that would switch the text in that thing. That being said, it runs a lot slower than this because it's navigating the DOM. I used some Python library to do it. And Inkscape has a command line Python interface that you can use in doing this. So, I mean, that is certainly something you it is possible with Inkscape, like you could make objects on the canvas that are the different areas you want to export. And if you go into the handy dandy object properties dialogue, that's how you're accessing them. So you're accessing them through the ID. So you could say like, this is export area one and reference that in your script. It's just, it's a lot of work. And if you prefer not scripting and you like GUIs like Next Generator, then, you know, that's that's like the trade off there. Cool. We have one more question here. First, the thanks for joining their world with yours. Generally, they're using a template for creating presentation cards. So can this be used to just change the job type title company logo and company name? Absolutely. Yeah, it's it the next generator tool will do all of that quite easily. Like you see here in the example, we're changing the conference name, the talk name, the person's name, and then the picture that goes with them too. So that is all stuff for that scenario that could be done as well. Awesome. All right. Well, that is it for the questions. Thank you, Mo, for that great talk. I'm going to have to try this myself. I haven't yet, even though I've organized many conferences, I've always gotten support, but it seems like a pretty straightforward process. Thank you.