 All right, Tom Lekner, did you title your presentation just laid out? Yeah. Nothing else for us, huh? You know, last night I was thinking, I probably should have put more in the title than just the name, because it doesn't really mean anything to anyone. Well, it will. It will, after this talk, people in this room. So thank you very much everybody. Reach out to us if you need anything. Tom Lekner and laid out. Morning, thank you all for coming to the first talk of the day. If you end up falling asleep or something, opting for open sores, open snores, instead of open source, I won't be hurt. Anyway, so this talk is about laid out. It's a tool that I've made over the last 10 years or so to help me make my artwork in various ways. It's basically open source desktop publishing. I started it, or it's a little bit about me. I've done a lot of comics and all kinds of different artwork, photography, photo manipulation. These were all done in Gimp, by the way, these two things. Like this is a step up transformer, for instance. I started doing open source graphics work maybe 15 years ago, started using Gimp. I was on Windows at the time and I kept getting viruses. I heard these rumors that Linux was, you didn't have to worry about that. So I got a disk from the library and switched and never looked back. Open source graphics software always has little quirks. You kind of have to work around sometimes, like anything really. But it also allows you to adapt things, adapt to your particular circumstances. It helps if you know how to program, which I did, so it helps quite a lot. So this is a page from one of my comics. I used to make all of my comic books like little things like this, all homemade stuff. This, for instance, is made out of tabloid-sized paper which is cut twice and then folded down the middle. This one's perfect bound to, but it's still basically just photocopied chopping up and folding paper. And 10 years ago and to some extent today, there are not many options in open source stuff to keep track of those things. Here's me and my natural habitat with lots of weird books, trying to sell weird books. So I used to just take a sheet of paper then write down where pages are supposed to go and then you draw little thumbnails and rearrange little thumbnails and it takes forever to do that. So computers are supposed to be good at figuring out all the little tedious stuff. So I thought, okay, this can't be so hard. I shouldn't be wasting so much time doing this. So I started trying to figure out different ways to lay stuff out, use different little programs. A lot of designers, this is kind of the environment that it looks like. You don't really need that apple down there, but a lot of designers think that it's necessary, but don't really need it. See, so I'll first demonstrate kind of how I would make a book now. So with comics, I draw all my own texts. So text has never been a big priority for me, which is kind of a detriment to my software, I think. But for making comic books, it's not so bad because it's just a bunch of images. So the task at hand, you have a bunch of images and you wanna lay it out into a book with the minimum amount of effort. So to do that, I can edit the imposition. So right now, this is a letter-sized piece of paper and to make something like this, for instance, I wanna use a tabloid-sized piece of paper. So if I take tabloid-sized, and right now, this red line is where you cut things. You can change how many cuts you want, either horizontally or vertically. And the folds, you can have any number of folds. Just, let's see, for a booklet, it's pretty simple just to make one fold down the middle and then to define the folds, all you have to do is drag the paper across and the computer keeps track of all the folding and snacking everything. So right now, it's just one sheet of paper folded. Then you can define how many sheets go into that one fold. This doodad down here lets you define different signatures. If you have different-sized signatures, they're called, if you look at a hardbound book, it's basically, hardbound books are made by taking giant sheets of paper, printing stuff on it, then folding it, cutting it, trimming it. So you get these packets of stuff and it's just a big stack of packets all put up next to each other and then a binding. So each one of these things corresponds to one of those packets. So it's super easy just to add new ones or add inserts. It's very adaptable to different circumstances. The simplest one is just a booklet like this. Then another important thing for laying out stuff is putting margins so you can adjust margins just by dragging sliders around. I really hate little boxes off to the side because here you are working on something, you don't really want to have to go way over here to tinker with little numbers and stuff and then go way back and go back to what you're working on. It's better to try to concentrate everything you're doing all in where you're actually doing it. Then this green bar is for binding. So if you want to make vertically folding calendars, it's very easy to adjust or right to left books instead of the other way. So you left to right or right to left. So right now, so that's a booklet. It has margin areas and I think that's okay. So now you can view the pages now as sheets that you would send to the printer or as single pages or as how things are gonna look as you're flipping through it. So once you have your page layout set up, then all you need to do is import, like do a mass import of images, which often is pretty difficult to do in software. Like Scribes for instance, there's a plugin you can use but it's not terribly adaptable. When I first started laid out, I tried to use Scribes to do stuff but it would frequently crash and I could do Python plugins but it's like several steps removed from actually working on stuff. So that kind of helped me like pushed me into trying to make my own stuff. Scribes is much smoother now but it still has like lots of modal dialogues and I like that the handle approach. So when you're doing a mass import, there's various options for what to do with all these images as you're importing it. Like set the DPI have one per page or two per page or as many as will fit or all on one page. For comics, basically you're taking one image per page. So if I do that, if I scale up and scale down, no matter how big the image is, it'll scale it and fit it into that margin area that we just defined. So let's see if this works. So now on each page, there's one image per page. It's all relatively nicely set in the margins. And you can preview how the pages will look, the things that you take to the printer. So that's especially useful. If you wanna have all color on only one page, then you can just make sure before actually sending it off somewhere that it's what you actually want. And also working on books, there's other things like page markers. So if you're working on a page and there's some problem with it that you need to address later, then you can set up different markers and things. Then there's also, if I can remember, my shortcuts. The spread editor, what I used to do just drawing little thumbnails on paper, which took a lot of time. This is basically a direct simulation of that. So you can move things around. Swap pages back and forth. And when you're happy with the layout, then you can apply it. So it's very easy to do. What used to take me, a book like this, which is about 100 pages, this would probably take you a few days of cutting things out and stapling and pasting and whiteout, it just took forever. And now it would take a few minutes. So it's a huge time saver. So that was the first real use of laid out. Then once I got basically a working platform, I had this thing that's very easy. I intimately understood the entire code base, so it's sort of has become an experimental playground for various graphics tools. So let's see. So here's an example of the best interface in the world, just a blank piece of paper. There's infinite possibilities. You could do anything you want with it, crinkle it up if you hate it, paint it, rip it in shreds. You can do all kinds of stuff that you can't really do so easily with computers. There's different approaches to making tools. Like if you're an artist, you tend to throw stuff around and mix things up in inappropriate ways or difficult ways. If you're a programmer, you don't really care so much about the visual, or at least the stuff that you're dealing with all the time just kind of looks like this. So a lot of my tools try to take one or the other and simplify it or kind of bring them together in a way. So here's some various stuff that laid out can do. See, which I'll try to demonstrate. I forgot to install color fonts before I came here. So one thing laid out can do that. As far as I know, no other open source software can do automatically is layered color fonts. I'm still working on an open type version. Open type can have colored letters all in one font file, but these color fonts, each color is one layer of font, but you can edit it as text. And all along I've used other software like Inkscape and Scribes and Gimp and Krita and various things. One thing that talks to my programming background in Inkscape is the clone Tyler. It's kind of an obscure feature that lets you clone things in like SRS patterns, except it's extremely difficult to use. It's like you have to understand these little numbers and how they repeat patterns. So I worked on this interface. I have vague plans to make it somehow accessible in Inkscape. I'd like to have some plugin system across all software so that you can use different interfaces. If you find one interface that works really well, you should be able to use that interface in different software relatively easily. But that's not an easy problem. So this, for instance, is a tiling tool. So it's very easy to set up a cloning area and then repeat things. So this is just a wallpaper group, it's called, but there's all kinds of other ways to arrange things. So like repeating things up and down or flipping around. So it's a very visual way to adjust visual data without a lot of fuss with little numbers in obscure boxes. It's all real-time. And you can also export these patterns into Inkscape and then edit it there. It'll work with paths or images or anything else. It's trying to edit the path. I haven't worked on this tool in a little while, so I sometimes forget my own shortcuts for doing things. So now it's not in the tool yet. There. So this makes it really easy to set up patterns that are cloning in weird ways and then adjust the little handles to get shapes just the way it would. So another tool that I was working on to do various layout features is how to arrange things. A lot of times, you're limited to doing only aligning to bottoms or centers or middles. And it seems very restrictive to do that. A little odd. Why is that doing that? So I made this tool, which is an aligner, just a bunch of little visual things that you can drag around to align in all kinds of various ways. Like this pulls everything down to align just vertically from where they are originally or you can make them arrange all kind of back to back. You can also edit the path that they fall on. So now it'll just pull things right to where you kind of want to lay things out or you can adjust the layout or the orientation of images that you pull onto. You can also, there's also just different, the standard presets left, right, center, but you're not restricted just to left, right or center. You can do anything in between which is potentially adaptable to animation and stuff like that. You can't actually do full-fledged animation and layout, but it's like one of my lengthy to-do things, things that would be fun to do. As time goes on, more and more designers do web stuff that requires animation. So having tools that are able to do that, it just becomes more relevant as time goes on. Some other stuff. As I got more into programming, layout, I was spending more and more time programming and working out weird tools and less and less time actually making artwork. So I thought, okay, well, how can I fix this? A lot of my artwork is like a lot of cross-hatching which takes forever to actually do. So I thought, okay, what if I made a tool that lets me do some cross-hatching more quickly? So I spent a couple of years making this tool so that I could theoretically draw faster. Not sure it's really worked out quite that way, but it's been fun to work on this tool. So I will demonstrate that here. And it's mesh-based. So you set up regions where you have just masses of lines and you can stretch things around, make things bigger or softer. It's the brush resizing just with modifiers. Like you hold down shift and you can change how much it changes the stuff underneath it or you can do block out to remove areas. Oops, that's not the block out, that's the shift. Another pinch and pull, more noise. One problem with computers trying to do things to like speed up art production is that computers make things way too smooth. So it's important to have fake humanness added into it. And there's also a, this is a beer-in tool. Like if you were to do an actual engraving, there's a tool that looks kind of like that. There's a knob just connected to a rod of metal that's like really sharp and you dig into metal with it. So I've appropriated that imagery to set up ordinary lines. So again, using just simple visual doodads to control different aspects of things. And there's different kinds of base lines to another important aspect of crosshatching illustration is that you wanna be able to dash lines and you wanna be able to control that in various ways. So like for instance, if you get really thin you wanna dash it out. You might wanna randomize the length of the dashes or taper how thick the dashes are. If you're using an engraving machine, for instance, the machine can only go to a minimum width. So you might wanna set that minimum width to something or set the density of the gaps in your lines. And all of these settings can be shared with layered groups of lines as well. So like if you take one, so now those dash settings are shared between two different line groups. So theoretically, this should make me like make actual artwork faster, but it's so much fun to like figure out the problems of doing these things. So the balance kind of goes back and forth. Like sometimes I'll just make artwork and not program. And then two months later, I'll have forgotten all the programming that I did and I have to relearn it and then I'll kind of go back and then make more artwork instead of programming. It just kind of goes back and forth. That's good for in terms of documenting code, a lot of open source projects. The documentation in the source code is really terrible. So if you try to figure out how Inkscape works or GIMP, for instance, there's not a lot of documentation there. And every time I've dug in, I tend to run into a wall. Whereas with my stuff, there's copious documentation because since I abandoned it like for a few months at a time, if I don't document things for myself, I'll forget what I did a couple of months ago. So it's helpful to kind of be project-based like that. Kind of fluctuate between art and programming. Anyone else can issue? And even though I draw most of my own text for cartooning, people often ask for text tools. So I took a stab at making some minimal text tools. Like right now, the default text at the moment is like really small. So when you start typing stuff, it's really small. Normally if you wanna change the font size, you have to select that stuff and then go to a box somewhere else and then increase the font size there. Then here it's just mapped to a visual doodad. So you can, it's very easy to resize things. If you wanna move things around, there's just a handle right on the edge. If you wanna rotate things, you just grab a handle and rotate it. And there's also the question of left, right, center justification, which normally is again, left, right and center, which always seem very restrictive to me. So you can do just the left, right and center, but you can also just hold down the modifier and do a sort of thing in between, which again is very useful if you wanted to adapt it to animation. I cannot do flowed text boxes quite yet. I have plans for like Screbus type of flowed text boxes, but debugging those things is kind of a nightmare. Fonts are like so complicated. Libraries like HarfBuzz simplify a lot of things, but they end up still being, it's like a huge mass of work that you have to sort through in a lot of special cases. And it's, I wouldn't call that fun. It sort of is, because there's the visual elements to letters, but then it's very easy to get bogged down in font processing. One thing that is using letters in kind of unusual ways is text on paths. So this also has visual doodads just for changing the offset on a path. Sometimes it's kind of hard to figure out how to make things just like where you want on the path or offset from the path. And you can also use an envelope of the path for the size of text here. Pads in laid out are variable width, so you can change just on the fly path thicknesses. On home, at my computer at home, all the control handles and stuff stand out a lot more. I've noticed that on my laptop here it's harder to see the little marks, something to add to my to-do list to differentiate the control things a little better. By the way, these width handles, I have an exporter for paths that you can export to SVG using the Inkscape power stroke, which allows variable width paths. So it's basically equivalent. However, this in here in paths, you can change the angle along the stroke as well as the size. And one fresh tool I've been working on is a node-based interface. Speaking of animation, you can sort of get some animation just by tinkering around with nodes. Like Blender, for instance, has a pretty thorough node-based system. Or at least if you have extra add-ons like the animation nodes for Blender, you can do all kinds of weird stuff with it. Nodes are kind of an uneasy alliance between visual, like what artists expect to manipulate visually and what programmers want to manipulate. So I've been trying to think of, like, what are some new ways or slightly obscure ways, perhaps, to deal with big node systems? One big problem with node systems is that sometimes they end up being this huge, massive spaghetti. And if you leave it for a couple of weeks and then come back, or you do download something, you're trying to figure out what was going on, it's very difficult to decipher what was going on. So I've made some little interface tricks to follow lines to see where they go. So if lines get hidden, all you have to do is click on it and figure out where they go. And so I've also, for nodes, have been using Gaggle nodes based on libGaggle, which is kind of the back end for Gimp now. Internally, Gaggle is a non-destructive node-based editing, but it's all in C. You can do a lot with it, and it happens to be very easy to map to a user interface, kind of shockingly easy. It's like, most libraries do not allow you to use them, except with this tangled massive glue code, but it's remarkably easy to map things in with Gaggle. So for instance, this thing, just by tying one value to a file name and to some other math that controls a gradient, for instance, just by sliding one thing around, you can make things kind of pulse. And Gaggle nodes, if the image is really big, it takes a lot of time to run things. So there's an option to either auto-save as you change things. So like if this was checked and I changed that value, every single time it changed, this Gaggle save node would save something every single time to a disk. So it's not necessarily what you want, but once you have things set up, then you can do that. Now let's say I wanted to animate this pulse. Instead of just a value, you'd want a loop. So I can add a loop here if it comes up. So if I want this loop to start at zero and at, say, 360 in steps of 10, if I tie that to the file name and I tie that to this math stuff that's just basically is taking the value and making a sine wave out of it, so you have this gradient that's gonna pulse as the loop goes on and I need something to drive that loop. All right, so now I have a loop tied into that, so I can step through it one at a time. Then for some reason, once Gaggle nodes kind of behave peculiarly, I wouldn't say I fully understand everything that's going on. It's actually saving, but for some reason, once you put up something that it can actually save to, it no longer will show what it's saving. Not quite sure what's going on with that, but it is actually saving. So if it goes through all of these loops, now those things are all there. So that's how you can use a node tool with Gaggle nodes in my obscure laid out program to make animated gifs. And Gaggle has all kinds of weird nodes to play around with. There's hundreds of stuff that you can do with it. Yet one more tool that's, I haven't actually made actual artwork with, but it's fun to play around with these things. So Gaggle has gradients and Factol explorers and all kinds of compositors. Then also with this tool, nodes are really popular in graphics editing. Like there's Substance Painter and Houdini for proprietary stuff. There's Blender, the fairly new open source Game Engine Godot uses nodes. So my thinking is if I have a node system that might be easy to import and export these things to different systems. For instance, all these ones built out of Gaggle nodes, these can all be exported to Gaggle XML. So you could build something in here and then potentially use it in other places. And that also goes for SVG filters. So I guess the next talk is gonna be about SVG filters. So here I have an importer that will import SVG filters. Takes a while. This is from the Inkscape's gigantic filter file which defines all kinds of different filters you can use. Right now I just have an importer. I can't actually export yet. I was hoping to have that by today but didn't quite get there. So now it's fairly easy to just import an SVG filter. You can tinker around with nodes and at least in a week or so maybe export the filter again. And SVG filters are also fairly easy to map to Gaggle nodes for the most part. So potentially you could use laid out to translate between SVG filters and Gaggle nodes. So you could use something from SVG, use it in GIMP or take something from GIMP and use it in Inkscape or obscure weird stuff like laid out. And nodes are kind of a rabbit hole to go down because there's so many things you can do with them. But they end up being very useful in different circumstances. For my engraver tool, that was when I first started working on a node tool because the engraver tool has, when you layer stuff, you can trace images from it to control line thickness or colors or whatnot. But sometimes you wanna use the same trace object for different layers of these masses of lines. Like if you have crisscrossing lines, you wanna use the same trace image. But in this one block that I had set up for them, oops, I don't want shortcuts. So this kind of very dense block of stuff. It's possible to assign different tracing objects, but it's really cumbersome and it's kind of annoying. But with nodes, you're just taking visual blocks and like putting them together like LEGOs. It's much easier to configure things. So as time goes on, nodes will be more implemented or like more connected to stuff and laid out for object filters. The Inkscape SVG filters, for instance, only work on raster, but Inkscape also has path effects which operate on vectors. So different vector paths, you can run a path effect and then twist things around. But it would be nice to have both of those things unified into a single interface, which is what I'm trying to do, ultimately with nodes and objects here. Let's see. One other even more obscure tool that I was working on is a 3D unwrapper. One of my other hobbies is to do panoramic photography, which takes spherical photos all around an area. So for instance, you take some kind of spherical image and then it's fun to make little balls with that image projected onto it. I always like to use computers to do something that's hard to do in real life and then ultimately end up with a physical object, be it a book or it's like a ball, like there's a famous Escher print where he's holding a mirror ball and you can see him in it. So it's basically as if you're holding one of those things but using a spherical image to map to it. Thought I had this ready to go already. Live demonstration folks, it's the greatest. So this is a tool that lets you unwrap things. Why is it not letting me rotate? You can also use this tool to feed in weird layouts into laid out. Layed out does not let you, or it lets you do layout into book formats but you can also import just nets of things. So for instance, a cube can just unwrap like that. So you could export that layout to use in laid out to import images so that you could just print out a ball or whatnot. Load images can try for some weird reason. Okay, so now here's the image. Sometimes I'm kind of lazy with the programming so I haven't debugged the right on the edge of this in OpenGL displays. So now once you have an image, then you can map the texture and move it around, kind of squish things around so you can lay out images just how you want on shapes. And it doesn't have to be a cube too. It could be anything you can make in an OBJ format that you can import. And then the software will kind of squish things around. So that's actually most of what I wanted to demonstrate. These are some of the more developed uses for the engraver tool, for instance. So like tracing masses of lines, you can put in open simplex based noise fields so that it's not totally random. It's just like a field of squishiness. Or radial patterns that gets severe randomness to it. Or line profiles, so you just define a field of lines and then you can customize how the lines automatically get structured. And in the future, perhaps that'll be the layout for open source layout tools, but might be a while. And that's all I've got. I don't know if there's any questions or anything but I'm happy to answer. Yeah, I was just wondering how many of the tools that you were playing with are tied into the graphical interface and how many, like it looked like you were bouncing between different things. When I go and download laid out, how much of that can I actually play with right now? Well, if you manage to compile and install laid out, then everything is pretty much just visual tinkering. So it should everything be ready to go. How soon can a stupid person like me use it? It should be fairly straightforward. I mean, I've tried to make the compile process easy. So anytime you have to compile something, that's for some people that's by definition not easy. But once it's installed, it should just be fairly straightforward. I try to minimize the number of buttons you have to press to do things. So there's like one button to import images, one button to export stuff. You select a tool and the tool has different visual things that indicate where you actually are. And most things have mouseovers. So if there's like some weird visual doodad that you have no idea what to do with, if you just hover over something, it'll like change color or something and a little message will display down below saying what'll happen theoretically if you drag it around. So mainly it's just, it's set up so that you can just drag things around and play with it. That's my goal. Any other questions for Tom? How is the support for spanning images across pages? I know I can do that. I haven't tried to do that in a while. Can I remember how to do that? See, there's a, I have a paper interface. So if you wanna span something across multiple pages. So like here you can see this dotted line of a page. So that's one page. And then you can just paper things across however you like and export that as either to scribe as documents or to SVG or PDFs with varying degrees of success. SVG is the best one. Scremus is hit or miss, kinda. It's mostly pretty good. Then it'll divide everything up just on that paper layout. Manage the read and margin. All right, I use this, the paper tool like this. I made a t-shirt with a panoramic image projected onto it. So I used this to divide it up into iron on sheets. So one t-shirt, if anyone wants to know is like 20 different iron on sheets. So the shirt itself ends up being really stiff. So I wouldn't recommend that method of like t-shirt creation. Any other questions for Tom? What operating systems is it compatible with? Right now it's only in Linux. I have one dual booting system that has Windows 10 and with Windows 10 you can install like basically a full functioning Ubuntu system and it almost works there. For some reason it doesn't do double buffering. I haven't quite figured that out and it won't let me expand my Windows. It's another obscure bug I haven't quite figured out. So as long as you, if you don't mind Windows that are like one quarter of the screen, then it works just fine in Windows. It should work on Macs but I don't have a Mac to test it on running under X11. Any other questions? And where can we get it to go play with it? And where's the source? Laidout.org is the site and the source code is on GitHub. Are any other artists using this yet? I've known a few people who have used it to make little booklets and some people have some, even by my standards, pretty obscure requests to do strange layout things and sometimes I've been able to do it and sometimes not. One feature, for instance, is you have a sheet of paper and you wanna cut it up and make a book but when you divide it into signatures in my current editor, you can only fold entire sheets down into one thing but the person wanted to take a piece of paper and then have it so you end up printing 50 sheets of paper and then cut it down the middle and then take one stack and then put it physically on top of the other stack. That's something I absolutely want to do. It seems like a very natural thing to wanna do especially for really indie comics and booklets and things but my current interface does not allow it doing that. One of the many things on my to-do list. Any other? I'm definitely open to it. If someone wants to help me do that, that would be great but I love working on the interface and working out little interface quirks but the nuts and bolts of packaging or porting to Windows, for instance, those are not all that exciting to me. Like in terms of getting users, it's important but so I'm definitely open to it in that way but actually sitting down and doing it. I was kinda curious, how does that Node editor that you were using different from the IBM tool Node-RED? I'm not familiar with Node-RED. I'm not really sure. So I know there's all kinds of different node-based systems and some are like very full-featured, flow-based programming environments. Like this currently, even though there's a node that's called a thread, it's not a true thread in terms of processing. I might have actual threads at some point but like some node systems, each node has inputs and outputs and before a node processes, you might wait until the inputs are ready, for instance. So there's not that level of control in these things. Right now, as soon as something changes, it propagates to the next node up that something needs to be changed. And you wrote this program in C? I'm C++. Any other questions? I have two questions. First, trim marks. I didn't see them on there when you did the layout for the pages. Do you add trim marks to it for the coming? Yes. So these, the red is cut marks so you can put these in and then drag them how you want. But those marks will actually show up for the printer on the printer spreads. What's that? The printer spreads, for the printer to see, those marks will actually be there for them to see to trim and fold. I haven't used those in a while. There is some functions in here where you can do little registration marks or like a collar bar. But the last time I tried to use that was a few months ago and for some reason, part of it was like not rendering properly. So theoretically it's possible but it might need some debugging. Okay, and then does the program understand bleed where the photo goes off the edge? Well, you can just drag things so that things just go off the edge. So in that sense it does. At some point, the bleed is more a function of like rendering and what your physical paper is. So this lets you define the physical paper and where the area you ultimately want is. So in that sense it cares about bleeding. Well, I understand, but it's like when you print a cover of a book, you want it to have an eighth of an inch bleed all the way around, but you want the marks to be inside the eighth of an inch so it gets cut through. That be doable? Yes, so like here you have gaps. So when you're editing in the page edit view, see, so that's papers. So if you put in objects and they don't automatically fall on an actual page, then they'll fall on the paper. So those objects will fit in the paper. I don't think I have it, so it automatically puts like cut lines that you can see. I know that's on my to-do list, but I never got around to implementing it, oops, unless it crashes like that. All right, thank you. Any other questions for Tom? Oh, we have one. Yeah, for that example with the spiral, was that the tiling tool? And I just wanted to clarify that. Yes, that was the clone tiler. Any others? Okay, thank you very much, Tom.