 Let's go live. Let's try that. All right. Welcome to the Creative Freedom Summit. Is the live working in elements? I see it on the door. You too. I did too. Okay, cool. Are folks seeing the live in element right now? Just checking to make sure you can see. I can see it in element now. I have my muted so I don't know if it's working or people are hearing it. I see some people typing. I think noise is definitely coming out. I had to click return my volume down on my other hand. Got it. All right, we're live. Wow, we're so excited for this event. We've been preparing since October, well, really before then. But myself, Madeline and Emma have been working hard with Nikita to bring the Creative Freedom Summit to our community again this year. We're so happy you could be joining us. First, we're going to just do a quick introduction. Then we'll throw up a couple slides. Just go over those real quick. Then we'll jump into the first session starting in about 10 minutes. Hi, I am Maureen Norton. I've been involved in the Fedora project for over 10 years now, starting on Fedora badges, working on many different teams in the Fedora community. I was a Fedora F cake for some time. Then most recently, I actually moved to the Python Software Foundation as their community communications manager, and I've been there since October. So I'm also an artist, a designer, and I love cats. And I mean, who couldn't love cats? I will introduce myself also as a cat lover. But I have been at Fedora and Red Hat for over two years now. I started off as just an artist who didn't know much about open source, but now I'm here. And I'm so excited to help spread this information here at the summit. I'm so excited for so many of the talks. And yeah, I can't wait to see what knowledge everyone has to share. Yeah, my name is Emma Kidney. And I'm also in Fedora, a bit over two years, I'd say coming up three years now. And I'm also in Red Hat. I work alongside Madeleine and Marie. So I guess my official title now is UX designer. I did start in Red Hat as an engineer, but slowly changed my role. So brought me back to my roots as an artist and designer. And yeah, so I'm very excited also to have shared the knowledge of free open source software. So I'll bring it back to Marie then. And do you want me to start sharing a slide there? Yes, please. Okay, I hope this works. Yeah. All right. So I wonder if it's going to like pin the slides and show our videos. That's doing that. Great. Okay. So welcome. We introduce ourselves. We can go to the next slide. Same. Thanks for being here. We're really excited to see so many familiar and new people. Yep, you can go to the next one. Okay, so we want to mention right off the bat, the space on element follows the Fedora project code of conduct. Fedora has donated like a channel to us to run the summit. And part of that is following their code of conduct. So here's a QR code. There's a link. You can also just Google Fedora project code of conduct and find this link. If you see anything at any time that doesn't seem like it's following the code of conduct, you can message me through element. And my screen name on there is recap nor. You'll see me in the chat all day. So I have to do is like click on me and say send direct message. We're going to keep our eye on the chat. We have moderator status. So we know we can delete messages if anything comes up. So please make sure to contact us if you see anything that needs attention. Right, so here we have the schedule for the summit. So if you are on the Creative Freedom Summit website, the schedule is right there. But here's the link to the schedule. We have three days of content. Most of the sessions are half an hour or an hour long. And we've put in half an hour breaks throughout the schedule so that people can go get coffee and food and especially as hosts have like a minute to walk away for a second. So definitely check out the schedule and, you know, plan out which talks you want to attend. For all of our fedorans here, there is a fedora badge for you to earn for attending today. So make sure you claim that. It's also in one of the widgets, the link. It's in the HackMD widget. So it's kind of hidden a little bit down there. So get a scroll down to find it. But definitely want you to earn your badge for attending today if you are a fedora community member. We have set up a participant survey. Last year we did this a little late and we didn't get a ton of feedback. So we're looking forward to more feedback this year about how we can improve the event, how your experience was, you know, anything else you want to share with us. We also accept compliments. So feel free to take this. Here's the QR code. We'll be sharing it closer to the end of the day. Later on in the event, you know, probably want to attend the event a little bit before you take the survey. But we hope that you do share with us your experience. We want to give a huge humongous thank you to our speakers. This event wouldn't be what it is without folks who are willing to share their knowledge and love for free software. So thank you so very much for the time, the effort, the energy that you have put into creating content for this event. We really appreciate you. Okay, so last year we were able to put all the speakers on and see everybody's name. This year we have too many speakers to be able to actually see everybody's name. So this is exciting because last year we invited speakers. It was the first time this event was happening. And this year we had a CFP. So wow, this is awesome. We have so much great content coming for you. Yes. Thanks also to our sponsors and media partners. I'm going to run through real quick here because I see we're running a little bit short on time. But obviously, thanks to Red Hat for, oh, I was just going to say thanks to Red Hat for helping host the element and the CFP and so many other places. And obviously, they're a big supporter of Fedora. So we can go to the next one. Fedora is letting us use their elements. We have access to like, sketch through them and access to the YouTube through them. So thanks to Fedora. Free Hive. Free Hive is a creative agency and that Ryan Gorely is a founder of and he's helped us with our website. And he's really just on the spot helping us out all the time. So thank you, Ryan. And Free Hive. OpenSUSA was here to help us with a jitzy server situation, which didn't quite work out, but they've helped us with media and promoting the event. So big thank you to OpenSUSA as well. And then last but not least, OpenFest. This is an event that is doing a media partnership with us. So thank you for helping us to promote the event. A big shout out to our platforms. Unfortunately, we didn't get PeerTube working this time, but we still want to shout them out for being a great platform. Obviously, jitzy and element which you are in right now. All right. So really quick, we are always going to welcome newcomers to join Fedora and the Fedora design team. We're always looking for new folks to come into our community, learn, grow, connect with other people, make friends. So if, you know, anything at the event gets really excited or you're just interested in contributing to open source, you are always welcome to join Fedora. I think on the next slide, yeah, there's three steps. Make a Fedora account, spend some time learning about Fedora, and then hang out with us. We'll share some of the other element channels that you could join later on, but there's, you know, everything from design and marketing to podcasts to DNI to there's all kinds of stuff you can get involved in that are outside of coding and programming and packaging, which we also would welcome. So yeah, thank you so much for being here. We hope you enjoy the Creative Freedoms Summit. We definitely want to get your feedback as the event goes. As you have questions, there's an hack, actually an etherpad that we invite you to, you know, add your questions to, and those we'll get to the speakers. So Emma and Madeline, did I miss anything? Don't think so. Thank you. Got it all. No. We got it all. Okay. I think we stopped sharing the screen. Cool. It looks like our first speaker is about to join in here just on time. So I will hang around. And so Emma, Madeline, if you want to drop, you're welcome to, but also you could say if you want. I'll probably be in the element chat watching along. But yeah. See you later today. Yeah. All right. Emma, are you ready? I think so. Hi. Are you with us, Arathi? They might be like waiting till the exact time. Let's see. I think you just hit it. Are you with us, Arathi? Are you having some technical difficulties or is there anything we can help out with? Oh, copy technical issues. I'm sure they will rejoin. There we go. Hi, Arathi. Are you there? Hi. You might be on mute still. Mary, good to see you here. Thank you for your command, everything. Of course. Welcome. So glad to have you here. I'm really excited for this talk. Yeah, you and me. Awesome. Well, since we have a tight schedule, we're going to let you get started. But really quick, I wanted to ask, would you prefer that we hold questions till the end? Or would you like to have us like interrupt with questions as they come in? I think we can have the questions at the end, so that the whole thing will be covered properly. Sounds good. Okay. So, near the end, one of us will jump back on and help moderate those questions for you, so you don't need to look at the chat or anything else. We'll just come on and chat with you. All right. Okay, great. Awesome. So, can I start? Yep, go ahead. Yeah, thank you. I'll share my screen. Yeah, hope you all can see my screen. Yep, we can see it. Okay. So, let's start. Hey, everyone. Good morning. Good evening. And thank you for joining. I'm Arsik Kumar and I'm a senior software engineer at Red Hat. So, today's topic is about accessibility, web accessibility to be more clear. So, let's begin. As developers, we have the power to create digital experiences that are inclusive to all users. So, in this presentation, we'll dive into the world of web accessibility and explore what it means to create and design, develop website and application that are accessible to everyone. The session is going to be really, really simple. So, let's learn together how can we make the Internet a more inclusive place for all users. So, let's start. Before moving on to web accessibility, let's understand what is accessibility. Accessibility refers to creating products that are usable by FG1. Now, web accessibility. Web accessibility is an inclusive practice of ensuring that there are no barriers that prevent interaction with or access to the contents on the worldwide web by people who are physically differently able, situationally differently able, and people who are socioeconomically restricted on speed and bandwidth, network and bandwidth. So, physically differently able. So, this includes people who have visual impairment, hearing impairment, cognitive impairment and so on. Situationally differently able, these are temporary issues that prevent the users from accessing an application or a website. For example, a fractured arm, a covered eye, and so on. So, socioeconomically restricted on speed and bandwidth. So, if the user is having a low network or low speed network, might not be able to use the application if our application is having a lot of image with huge sizes. So, the content might not load and the user will not be able to use the application. So, these are the accessibility issues that normally users face. Now, why should we create accessible application? So, obviously, creating accessible application involves more time, effort and resources. So, according to World Health Organization, WHO, around 1.3 billion people are differently able. That means 1 in 6 of us. So, 1 in 6 of us can be differently able. But how is it important for us or how that is affecting us? So, for a website or an application or any product, so, consider the website and which has around 6 million users or 6 million visitors a year in that, there is a really high chance that 1 million of these users can be differently able. So, if our application is not accessible, then these 1 million users won't be able to access the content, which is really unfair to them. Now, how to create accessible application? So, now we know why, what is the relevance of creating accessible application? Now, we can understand how to create accessible application. In this module, we will have a look into the guidelines or rules that we should follow while creating accessible application, different methods to enhance the accessibility of an application and the easiest way to create an accessible application from scratch. So, first we will have a look into the guidelines or principles that we should follow while creating an application. So, the first one is, yeah, that is WCAG, WCAG refers to web content accessibility guidelines. So, in order to create a website in a methodical way, a set of guidelines and practices are created by the accessibility expert of World Wide Web Consortium. So, in that there are 13 principles, I mean, 13 guidelines and these 13 guidelines are organized under four principles. And these four principles are, you know, known by the acronym for P O U R, where P is for Perceivable, O for Operable, U for Understandable and R for Robust. For each guideline, there are testable success criteria like the success criteria are at tree level, level A, level AA and level AAA. So, we can have a look at the success criteria later and let's understand the principle and the guidelines of WCAG first. So, the first principle of WCAG is the principle of perceivability. Yeah, the principle of perceivability means that the web content should be presented in a way that it can be perceived by all users. For example, if the user is visually impaired, he or she should be able to perceive the application using pre-board and screen readers. So, however, the user wants the content to be perceived in that, that should be possible. The content should be, you know, the user should be able to perceive the content in the way they want. So, that is the principle of perceivability. Now, we can have a look at few guidelines under the principle of perceivability. So, the first one is text alternative. So, in website, we add videos, images, audio and everything. So, when we add image, video or sound on a website, some people might not be able to see or hear them. To help those people, we need to add words or text that describe what is in the picture, video or sound. So, this text or the supporting text which we add to the video, or image is called the alternative text. For example, while adding this image in the website, so that we should add an alternative text saying a red apple sitting on a wooden table. So, when we add this alternative text, so the user who are using the screen reader will be able to understand the content of the image even though they cannot see it. So, that is the importance of the alternative text. Now, the second one is audio description. So, audio description should be given for all the pre-recorded content. So, any audio we add in the website or an application. So, there should be a description should be added so that the user can understand what is the content of the audio. Now, the third one is color contrast ratio. So, there should be a sufficient color contrast ratio between the text and the background color. So, the foreground and the background color ratio should be at least 4.5 is to 1. So, in the first example, the text color is black and the background color is white. So, the text is clearly readable and the contrast ratio is 21.001 which is sufficient. So, in the second example, the text color is light blue and the background color is white. The text is not clearly visible and the contrast ratio is 1.86 is to 1 which is not sufficient. So, why this contrast ratio is relevant is because the people who have low vision or the people who might having color blindness issues might not be able to read the content if the color contrast is not sufficient. So, that is why we should always make sure the contrast should be at least 4.5 is to 1. Now, the third one, I mean the fourth one, audio tactile and visual notification. So, the user should be when the user is performing an action or performing like filling a form, submitting a form, etc. The user should be made aware about the action by prompting, alerting, etc. This prompting or alerting can be done in different ways by blinking, displaying visual dialogues or by sound, by vibration, etc. The content is like the user should be made aware what the action is performed and if it is performed or not, like if it is success then there should be an alert. So, if it is failure then the user should be informed properly. So, that is the audio tactile and visual notification then the sign language. So, sign language is something which is the highest level of accessibility that can be added for the website that demands to be the highest, highly accessible one. So, sign language can be added for presentation so that the user, the user who cannot hear the content can grasp it through sign language. So, the thing is it is not about the video but there can be presentation of slides and all these kind of things. So, when a person is talking, additional sign languages can be added so that the user who cannot hear it can understand the content. So, that is the principle of perceivability. Now, let's take the second one, the principle or the operable principle. So, O is for operable. The operable principle means that the user can navigate and interact with the web content using a variety of input devices. So, just keyboard, screen reader, voice recognition, etc. Now, let's understand the guidelines and the operables. So, the first one is keyboard compatibility. Keyboard compatibility means that the whole application should be navigable using the keyboard and always make sure that there are no keyboard tracks that prevent the user from navigating to the next focus point. So, that is keyboard compatibility and the next one is input mechanism. So, the user should be able to choose their input device. For example, the user who are having motor difficulties or cognitive difficulty might use a phone or a tablet to navigate through the application. So, the application should be compatible with touch screens and it should support almost all resolutions so that the user can use it in the device which they prefer. So, that is input mechanism and then there is another input mechanism which is O is a recognition feature. So, O is a recognition support should be provided so that the user who cannot type, who are unable to type and also the user who cannot type in the preferred language in the application can use it properly. So, O is a recognition will be a good addition to an accessible website. Now, the third one is skip link. For any website which is accessible, you should add a skip link so that the person who are using screen reader or person who are navigating through keyboard can directly come to the focus point. So, skip link is like when there is like a, for example in Chrome, google.com, the main focus point of that page is that search input. So, there can be a skip link added so that the user can ignore all other languages or Gmail, all these links above and directly come to the search input. So, which will save and support the user who are having motor difficulties or who are using screen readers and all. So, these are the skip link detail and then the next one is access keys. So, when we create an HTML element or when we create, when we want an HTML element to be focused on clicking on a particular button, we can use this key. So, in HTML, the access key can be used or defined by using the access key attribute and this attribute allows you to define in a keyboard shortcut for an element in your page. So, here in the button, access key is given as yes. So, when the user clicks like alt plus yes or control plus yes, the focus will come to this particular button which will be really beneficial for users who have motor difficulty or they users who want to perform a particular task rather than navigating through the whole website. So, that is access key and now we'll move on to the principle understandable. So, the understandable principle means that the web content should be presented and organized in a clear and consistent way so that the user can understand its purpose and functionality. So, the data should not be presented or added in a way such that it confuse the user. So, the user should be the highest priority and the focus. So, the data should be presented in a clear and simple way that the user can understand it very easily. Now, let's move on to the first one, the first guideline which is input assistance. So, user should be able help to avoid mistakes. For example, when the user is filling a form, clear guidelines and error messages should be shown in order to prevent the user from submitting a form with mistakes or errors. So, proper detailing and everything should be added so that the user get the complete idea of what they are doing. So, that is input assistance and the second one is focus. So, when we focus to a button or an input box through a keyboard, proper and clear and distinguishable visual indication should be added so that the user can understand where they are at the moment. So, this can be a border color, a background color, etc. But it should be evident and it should work properly even in gray scale. For example, if you add a gray border or a light color border, it might not be properly visible in gray scale. So, always make sure that the border or the whatever the indication is, it should be clear and perfect in all the modes. Now, we'll move on to the next one that is the final principle of WCAG which is a robust. Robust means that the website should be built using technologies that are widely supported and can be interpreted accurately using assistive technologies. Now, let's have a look at the one and only guideline under Robust that is compatibility. Compatibility means that the content should be compatible with the current and future tools. For example, when we create an application, it should support few versions or in a few previous version of the browser, current version of the browser and future version of the browser. So, it should be responsive and support different resolution. So, the whatever we are making should be compatible with most of the devices and resolution so that the user can use it in the way they want. And these are the four principles of WCAG which is Perceivable, Operable, Understandable and Robust. Now, let's understand the conformance levels of WCAG. So, WCAG guidelines are categorized into three levels of cut performance in order to meet the needs of different groups and different situations. For example, every website will not be or not expected to be used by everyone. So, some will have a specific set of users that it might not be accessible because they know who are the users. So, likewise, depending on the users, these conformance level can be identified and we can make the page how accessible it needs to be. So, WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations. First one is Level A. Level A is the lowest and it is the most basic and fundamental accessibility requirement and is considered the minimum level of accessibility for a website. So, the second one is Level A which is a mid-range. It includes more advanced accessibility features such as providing alternative text for images and ensuring color contrast between foreground and background element and so on. The third one is Level AAA which is the highest. It includes highest level of accessibility features such as providing sign language interpretation for videos and users navigate to websites using only a keyboard and so on. So, it is always really great to have the highest level of conformance but it should be at least in the mid-level so that all the users can use the application. So, we should target to be Level AAA but we should be at least Level AA to be on the safe side or on the proper side. So, that is regarding the conformance level. Now, let's move on to assistive technologies. So, assistive technology refers to devices or software equipment that is used to help people who are differently able to perform that. So, the people who are differently able, they choose the assistive technology of their comfort to navigate to the application or to use the application. There are different assistive technologies include screen readers, voice recognition, word prediction, screen magnifiers, bookmark and history and so on. So, I can show you how a screen reader read a website at the end of the end of the session and now we can look at the method by which we can enhance the accessibility. Now, we have till now we have a look, we had a look at the guidelines or principle we should follow while creating an external website. Now, we can look at the method to enhance the accessibility of an application. So, area. Area refers to accessibility rich internet application. So, this area are a set of attribute which are used to enhance the accessibility of an application. There are three type of attribute under area which is role, states and properties. So, the first attribute is role. So, area role are used to describe the purpose and meaning of elements that do not natively exist in HTML or they exist but are not fully supported by the browser. For example, take the case of a tabless. Tabless is not a native HTML element but still we use it or we need to use it. So, a tabless tabless is normally created using buttons or links. So, here we are using buttons but how can the assistive technology or a screen reader understand that this is not a regular button and it is a tabless. So, in order to give the assistive technology or in order to send a message to assistive technology that this is a tabless we use role. So, here in example, we can see that the for the parents we have given the role as tabless and for the button the role as tab. So, when the screen reader encounters this particular element it will read it as a tab and tabless so that the user can understand it properly. So, that is roles. Now, we will move to state. So, state, area states are attributes that describe the current state of an element. So, here in the example we have added area selected is equal to true which is a which is a state and area selected is equal to false for the form of first one it is true. So, when the screen reader interacts with the tab one it will understand the currently selected tab this tab one and it will say it loud so that the user can understand which is the current tab and where they are. So, that is the purpose of state and there are multiple other state attribute like area hidden, area disabled, area expanded and so on. Now, the properties. Area properties are a set of attribute that can be used to enhance the accessibility of an application. For example, area label, area described by and so on. For example, in the code there is an icon button. So, there is no text inside it but for the people who can see can understand by the you know by the icon that this is a search button but for the people who cannot see the icon won't be able to recognize what button it is. In this case we can use area label and here area label is given a search. So, when the screen reader read it it will read it as search button so that the user will be able to understand. So, using these role state and properties we can enhance the accessibility of an existing application. Now, let's understand the easiest way to create accessible applications from scratch. So, for this we can use design system. Okay, so a design system is a collection of reusable components, guidelines and standards. A well-developed design system with accessible components can be used to create accessible applications. So, when we use these accessible components and to create an application the application as a whole will become accessible because we are using accessible components but make sure that we are not making this component inaccessible by over engineering. Some of them are available like different design systems available like IBM Design Language, Google Material and so on. In Red Hat we use the pattern fly design system. Okay, the pattern fly is an open source design system which is managed by Red Hat and now let's have a small demo of the pattern fly design system. Actually, my video is not loading. Can you hear me? Yes, sorry I can hear you. Oh no, do you have a link to us? Okay, I think that is a technical issue in playing the video here. Let me try it. Okay, I can yeah, we have time so I can I let me try to show the video in another tab. Okay, hope you can see my screen. Yeah, I can see it. Okay, so this is a video about the pattern fly design system. So this is just to give you an intro about how a design system is and what all will be available and everything. So in the pattern fly design system, yeah, we have the first of all it is an open source design system. So the best thing is like we can contribute to this one and if we are finding any errors we can raise the ticket or create an issue in GitHub and we can get it resolved. So this is the best thing about pattern fly. The second thing is in the components, in the components we have almost all the components we require to create an application like application language, badge, banner, button, breadcrumbs and so on. So all these components are accessible and it can be used to create accessible applications. Now let's have a look to a component in detail. So let's take a code in. So in the in each component there are different version like there's react version as well as HTML version. And the react version can be used in the react application and HTML can be used anywhere we require. And for each component there's proper design guidelines added. So the use of this is that we can understand like in under which situation this component need to be used or is it the right component to be used in our system or in our requirements and the usage and the detailed description of variants and everything will be described and also the accessibility requirement. How can we make it, you know, how can we test the accessibility of this particular component and everything is added in the document and there's a detailed document for everything that it is very easy to use. Now let's move on to the other parts of the design system. We have factors, extension and we have charts as well. So almost all types of charts are available. Area chart, bar chart and all and the let's take a look at the donor chart. So you can see the variants available like the type available how many variants are there and everything. Now we'll move into the layout. So in order to arrange the content of that we need the layout. So we have a mini layout like gallery, grade, levels, split, stack, which can be used to create the layout of the application. And then we have the utility classes. These are the things which we can be, which can be reused throughout the application rather than writing custom class for everything. So in this we have a book shadow, a flex float, sizing, spacing, text, everything. So all this can be used. So when we use all this the design will be in a standard way rather than writing custom classes for everything. Now next we'll go to the another section, which is the accessibility one. Yeah, again, there's another one more section where there's developer resources, which can be used by developer to understand about how the component is working, how can the design be changed and everything. And then there's the accessibility details added there where it is properly described, why to add it, how to add it, and everything. So this is about the pattern fly design system and creating using the components which we are creating the website, the website as a whole will be accessible. So that's about the pattern fly design system. Okay, now let me share again. Sorry, my screen is stuck. Please give me a few minutes. No problem. Now we actually see your video, I think. Yeah, I think it's loading now. There was some glitch in the beginning. Okay, let me try again. Okay, so without wasting time, let it load properly, but we can continue. So this is how our design system is and this design system can be used to create websites which are accessible. So when we use the components and the layout and everything in the design system, which is properly built and which is accessible, the website we build will be accessible as a whole. And now we know like how to, you know, what are the guidelines that we should follow while creating accessible application and then how to enhance the accessibility of an application and also the easiest way to create an accessible application from scratch. So the next point is a what section is to understand what should an accessible application offer. So I actually had the video of how it should respond, but I don't know why it's stuck now. Yeah, so I'll tell you. So first of all, an accessible application which we built, it should be compatible properly, keyboard compatible, it should be compatible with the keyboard and the user should be able to navigate throughout the application using the keyboard. So there should not be any, you know, any keyboard trap or anything which prevent the user from navigating. And the second thing is we should check the actual dashboard. So in Chrome DevTool, we have the lighthouse. So there we can check the accessibility of a score of an application. It should be at least 90% so that we can say the application is accessible. And the third one is application should behave, you know, perfectly in the gray scale. So gray scale is like, now we have different colors in the website. And when it is gray scale, it will be like kind of black and white. So the thing is the user who are having color blindness issues, they will see the, you know, website in that way or even the people who have low vision might be seeing the application in that way. So we should make sure that even in the gray scale, the application is perfect. And if everything is readable include the focus indication. And the fourth one is that the, you know, the page should be the screen reader should be able to read the page properly. Actually, I have videos of all this and I can show when, you know, when the Chrome issue is a Chrome issue resolved or I can join again. But I think in the meantime, maybe we can take the Q and A so that, you know, we can save time. Yeah, of course. Let me just see there. And so the first question there is how easily do people with disabilities come by a free and open source screen reader? Can you come again and drop me to just repeat the question? Yeah. Yes. So how easily do people with disabilities come by a free and open source screen reader? Okay. So I am not very sure about the open source screen reader to be, you know, to be frank. But if we are using a Mac, you know, Mac, MacBook or whatever, so we have the, we'll be having the inbuilt screen reader, which can be used to navigate to the website. Actually, I have the video and let me try to rejoin again in a few minutes. And I can show you that. So in that it is available and there are other, you know, free screen readers available. So that is like, that is actually software, which we can download and use it. And the people who are actually differently able, they will have the idea of which all are available and how can, how we can use it. Yeah, that's about the screen readers. Yeah, perfect. And then we've another one, just about the area in the types. So these area things are just things for screen readers and similar accessibility tools. Yes. Area is mostly for the accessibility, I mean, is for the screen readers to make the content read properly. So, you know, if you are confused, like, why do we need to use it and everything? So what I would suggest is like, just try to close your, you know, close your eyes and navigate through the website. Then initially, you won't be able to navigate through the website without seeing anything. But when we use a screen reader in Chile, we'll get an idea how they are grasping it, how they are perceiving it. So this area, you know, adding area label properly will help them a lot, you know, to get the proper picture of the website. Yeah, that's about the area label, I mean, area attribute. Yeah. And then we have another one. What percentage of web pages are using these standards currently? So it, I would say that every page is using this and there are like, most of the pages are not using it correctly, even, you know, but most of the pages are now transforming to, you know, create accessible websites. For example, in the, in our Red Hat, so the customer portal, the accessibility is I think 96, which is really good. And we are focusing on, you know, creating and it is accessible. We are making it to be, you know, really highly accessible and we are transforming all the web pages to match the accessibility criteria. Yeah, that is a process, which is, I don't think like we are, you know, we were discussing about this like a five years ago, and we were, you know, very lean about this and everything. So now the transformation is going on, like we are more inclusive and, you know, we want everyone to use them. Yeah, so the transformation is now going on. And then what do you envision for the future of web accessibility? So the future of accessibility, now we are taking care of the, you know, mostly about this screen readers only. So we need to have more support to other technology like eyeball tracking, voice recognition and all. So in a website, you know, integrating these things are an extra effort. So the developers will know this. So going forward, I think our websites will become more accessible, like we can use it in different, different ways. And the best part about accessibility is like when we create a website accessible, it is the user experience of the website increase a lot and it can be used. It's very easy to be used by everyone, not just the people who are differently able. So I'll give you an example. So the in Google search, okay, so Google search when we type one or two or three letters, the rest of the content comes, right, we need not type everything. So from what I read or understood, so this is something which is being introduced to, you know, help people who have cognitive difficulties, so they need not enter the whole thing. But it is used by everyone. So there are many things like that which is used by everyone which was introduced as an accessibility support. Yeah, that's it. Yeah, thanks. And then one last one there. Is there somewhere you can support or sorry, is there somewhere you can submit your website to have it automatically assessed for accessibility standards? Okay, so I am not sure whether there is a platform where we can submit our website or, you know, I understood like, you know, sending a link and checking whether it is accessible or not. I'm not sure about that. It might be there, but I'm sorry, I don't know about that. But yeah, for any website, we can use the Lighthouse tool to understand, you know, get the accessibility score of that website. And there are other accessibility tools like acts and all which can be added as Google Chrome extensions, which can, you know, find the accessibility of that website. Probably. Thank you. That's all the questions we have at the minute, it seems like. Okay, so can you join again and try to show the videos, because we have time, right? Yeah, yeah, you do. Yeah. Yeah, okay, so I'll try to join again. It looks like Arathi is still here. I should say it's just frozen, maybe. I'm wondering if I should boot the screen share. Oh yeah, maybe. That might be a good idea. Let me try it. Oh, there it is. I didn't even have to do anything. Yeah, now, can you hear me? Yeah, we can. Yeah, so let me try to share it again. Okay, can you see my screen? Yeah, I can anyway. Okay, so now we have to see like what the accessibility, you know, what the accessible application offered to the user. Yeah, luckily it's loading. The first one is the keyboard accessibility. So the thing is, yeah, the first one is a keyboard accessibility. Here, we can see that the, I'm not using a mouse pointer here, the whole accessible, the whole page is navigable using the keyboard. Before that, so this is a customer portal of Red Hat and with this using, you know, through this one, the most of the customers interact to Red Hat. So let me show you the video. So here I am using the tab key to navigate through the application. You can see how the focus is going through each of the buttons or each of the links and traversing throughout the application. So if we are creating an accessible application, it should be compatible with keyboard, you know, the user should be able to navigate throughout the application using the keyboard. So this is a keyboard compatibility of an application. So we can go from top to bottom and from bottom to top using keyboard. So this is keyboard compatibility. And an extra application should be compatible using keyboard. And the next one, yeah, so this is about keyboard compatibility and next one is the lighthouse report. Sorry. Yeah, so yeah, next one is a lighthouse report. So using Chrome Dev to light us, we can calculate, you know, we can find the accessibility score of an application. So here I am doing the audit. Yeah. So the accessibility for this particular website is 96, which is really good. And there can be some minor issues, which, you know, we'll be fixing in future. But currently it is 96 and it is really good. So this is the lighthouse score. And this is how we can check the accessibility score of an application. Now we'll move on to next is the one next one, which is a grayscale view. So every application should be visible properly in the grayscale also. Okay, so this is a grayscale view. Here I am using a Google Chrome extension grayscale, the web, which will, you know, turn this page to grayscale. See, you can see like, it is transferred to kind of a black and white color. And the whole content is properly visible. So this is the, you know, requirement for the grayscale view of the application. So all the content is visible and the user can understand the content of this website properly. Yeah, so this is the grayscale view. And now last, we'll have a look at the screen reader reading the page, how the screen reader is reading the page. So here I am using MacOSover, which is actually in built-in Chrome. So let me know if you can hear the audio or not. Are you able to hear the audio? I heard something and then it might have come off again. Oh, it's kind of coming in and out. Okay, yeah. It might be through Jitsi. It's most likely because we're trying to put it through Jitsi. So I can hear like little bits and pieces. Okay, so I hope you'll be able to hear it properly. Let me try to reduce the playback quality. So you'll be able to hear the audio properly. So here the audio is important. Okay, so this is how a screen reader reads the application, like the button, the link, the tab, everything. Currently on the link, to click this link, press control, option, space. Link, skip to main content. You are linked subscriptions, list utilities for items, visited link downloads. You have visited link containers. You are currently on a link to click this link, press control, option, space link support cases. You are currently on a link to click this link, press control, option, space, visited link image, Red Hat Customer Portal, main navigation. You are currently products and services, collapsed button, list four items. You are currently on a button, tools, collapsed button. You are currently on a button, security, collapsed button. You are currently on a button, community, collapsed button. You are currently on a button, search, collapsed button, main, navigation English, collapsed button all red hat collapsed button link log in search the customer portal menu pop out combo box main you are currently on a combo box type text or to display a list of choices press control option space link log in visited link register link register now documentation button use documentation tab panel you are link red hat interpreters linux nine list eight items link red hat interpreters linux eight you are link red hat boss interpreters application platform link red hat ansible automation platform link red hat open shift container platform link red hat open shift service on oz link red hat open shift streams for Apache Kafka you are currently on a link link all product documentation link open a support case main visited link download software visited link access security resources link view the training catalog link now available red hat open shift service link red hat link we will link view all announcements link is there a link how to switch between the wheel and and x11 graphics back link why do virtual machines link visit the community main link check it out link get more info you are visited link back to talk you are currently on a link in okay so this video it won't be really fast like this but i you know navigate really fast to make the video short so that i can accommodate the time so in mac if we are using a command function and fi then the o is already start automatically and you can navigate through the website like this and also in windows there is a screen reader named nvda i think which is it is free which can be used to navigate so the application so if you have any doubt you can try that and then these are the you know this is how an accessible application or a website should be you know should be to the user this is the expected user experience of an acceptable application now let's move on to the next one so the q&a so is there any other questions and let me just check and no not the moment okay so then if you have any questions you can reach out to me and also these are the few you know so the images used in the app in the presentation is from free pick so it's a free you know library of images which you can post and then these are the references which i refer to create the document i mean in the presentation and yeah thank you it was really great that was amazing arathi do you think you could share that list of links so we could put them in the chat sure if you want to drop them here in the jitzy chat i can get them over there unless yeah i'll i'll share it okay cool yeah so these are the references so exhibit is like a very you know vast you know content over the internet so it'll be really little too much for the beginners but it's really good to learn and know all this hi hey thank you so much for that presentation there was a lively conversation going on in the chat people sharing different tools and methods that they use so i just wanted to share that with you to let you know that it was very engaging for everybody and thanks again for being here today thank you so much for you know having me yeah thank you of course of course all right well i guess that's wrapping up for today or for this session and we'll have the next session starting in a couple minutes all right see you in a few thank you bye thank you bye so i hear the fedora accounts is down yeah i saw that great timing perfect timing so for those of you who want to claim here fedora badge you might have to wait uh until fedora accounts is back up i tested the link earlier so i have the badge ready maybe we're just driving so much traffic there but i will say for people who are grabbing the fedora badge if you get an error that usually means that it's working grab your badge um actually fedora badges is in the process of getting a revamp and since we have six minutes right now or so i figure i might as well plug that like we need people to join in and help us um move to a new system so if you're interested in working on fedora badges or a badge system or website design or graphic design graphic illustration um communications like there's all kinds of stuff to do with fedora badges right now um i think i mentioned at the beginning but that's how i got started in fedora is working on badges in 2013 so i've been doing this for over 10 years with badges so we need more people if that's an indication all right uh emma do you want to take a quick break and then we'll come back um once the next speaker is ready yeah that sounds good all right i'm just gonna mute and turn my camera off but i'll leave the stream going okay i'll do the same hi hi there how's it going today bruno i'm fine thanks yes i think i'm ready um cool uh by the way i just gotta say i love your background okay thanks this is the co-working space for our work yeah it's pretty uh funky um so one quick question for you before you jump into it would you like us to hold the questions for the end or do you want us to you know jump in as they they come yeah i think jumping in should be fine yeah i mean i'm i'm just i'm just gonna demo a series of things so yeah i can i can stop and and take questions um so do you want me to be watching the matrix feed or or you're gonna you're gonna jump in nope no you do that we'll jump in great cool okay whenever you're ready we are live sorry um i miss that are we live we are okay right hi there i'm um bruno postal i'm a free software developer i'm also a um recovering architect um and i'll work on a tool called um if i can share my screen if i can figure out how to do that share my screen is that screen sharing working not yet you might have to retry it there we go entire screen share okay that seems to be working um so um i'll start with the slides um this is going to be a demonstration rather than a slideshow but i've got three slides here um so um i'd say my name's bruno postal i'm going to be showing you get for designers and architecture engineering construction so um that's the name of the talk um and i'm going to be using the blender bim add-on so blender bim add-on is um created by dion mold and it's um dion will be demonstrating it later today so i really don't want to go into too many details about how to exactly how it works um i'll show you some um you'll be seeing lots of demonstrations in a bit so i need to get show you some acronyms first so aec is um architecture engineering and construction that's the sector that we're all working in so that includes structural engineers quantities fares includes um people working for building companies or all sorts of um related things sometimes it's aec o i i don't know what the o stands for um bim is building information modeling that's now bim is a basically a way of designing buildings um so we design buildings in 3d um using um and and it's not it's not really a mesh based modeling your your model walls and your model doors and your model all the all the elements that make up a building those um um and and what we do is we layer them we connect them all together we we give them relationships so we say them that this this part um is made out of this material it needs to be installed before this other part and and what happens then it's software can allow us to do um create drawings from that 3d model or we can do pricing or we can do scheduling um now the way we the now there's one software standard for bim which is called ifc now ifc is a it's an open standard it's a text-based standard we um and that that supports everything that you might want to do with bim in in the aec industry um now the the great thing about blender bim blender bim is a native ifc editor so all the other tools that use ifc and and it's basically all the tools in the industry um they either um import and convert um an ifc model into their own proprietary format and then they export back to ifc and what happens there is you get an enormous amount of data loss um now blender bim is the first of a new kind of tool a new class of tool um which is a native ifc editor so blender bim will open an ifc file and display it um if we make any changes then those changes only those changes are written back to the original file the rest of the file is is identical and a line by line basis um what that means is that um is that we can um is that because it's a line based format um it's it's actually quite suitable for version control systems like it um so here's this is um this is blender so normal stock blender but it's got the blender bim add on added and which um which um puts puts whole new um new bits of user interface here what i'm going to do is i'm going to show you the the basic functionality which is to um uh clone a git repository repository so put in the url um create a local folder um put it in here oops not in videos put it in put it in buildings create a folder um create a freedom just spell that right um accept that and now clone the repository so what what this is doing is it's it's um downloading the um git repository and then it's opening um opening the first ifc file that defines in the repository so this is a this is a test project that um created some well this was actually a real building project but it's no longer a real building project so i'm using it as a demonstration um if i refresh the git list well what you see here is a nice there's a um there's a git changelog um you can see there's been a whole series of things happened here um if i click this button here it can tell you what elements of change between the current um the latest view which is the head here and any any older versions um so you can see all these doors and lots of furniture changed here if i click this button here or switch to the earlier revision um and then and then you can view changes between there and any other later revision so you can see that these red items were deleted um the blue items modified um and well usually you'll only see green items if um if you're looking back in time a green item is a new item so here's switching back to the um to the latest model here um so what i'm going to do is just just to show you how it how blend of in works just quickly so if i um so i can move a window and regenerate the wall i have to have the wall tool enabled regenerate the wall and it recreates the the opening and the wall for the new window position um save that um the git interface now certain though can see that something's been saved to this where it hasn't been committed to the repository so if i am so i can commit that i can say moved moved wall um i don't want to create a branch i'm just going to commit that as a change and you can see now that this is um um been added to the revision list um if i look at the previous revision and look at changes you can see that um that this wall and the the adjacent two walls and the window have all changed uh refresh that here um now i can alternatively i can go back in time here and i can um if i pick this wall um i can uh add uh add a yeah sorry i had a window here so i put a window in this bathroom um i can save that now notice i've saved this on the on an earlier revision so if i need to commit this um i have to create a branch like currently so now i've created a conflict here on on um in the in the main branch of this model i've moved a window and on this um window branch um i've um added a window so if i so switch back to the main you'll see that this window will vanish and the other window that's moved is there but what i can do now is um we have i am because i've seen is is this great line based file format i can do a full three-way merge so the three-way merge looks at um it goes back to the forking point and it looks what has to see what has what has um been modified deleted or um new in both branches and it will it will merge them together so anything that's new in both branches will both be added anything that's been modified in either branch will be modified in the result and anything that's been deleted from either branch will be in the result so if i click on this button here which is an experimental icon but but it's been there for a year now so so there you go i've merged um so this this wall here has previously had one window and then another branch has two windows and in the first branch the windows moved but we can actually merge that together um without any kind of conflict um so let's go quickly on so if i look at the um for go back to um so this github page where this where i got these files you can see that there are some pull requests so um so let's have a look so here we go somebody's added a window so max has added a window um yeah now um i can't do the merge and github i have to do it within blender bin so if i take the um if i take his git URL just check that that was what i did yes i can scroll down here and i can create a um add a new remote max add a remote and then if i affect from that remote and then so i'm still looking at the main branch here but you can see that there's um max's branches are now imported as remote branches in my repository and you can see that max has um has added a window he's also modified that wall so um so let's have a look let's see what he's done so let's try merging max's branch so he's also added a window so we've got um so i've modified this wall in various branches max has modified the wall in other branch we can merge all three branches together um let's see what else we've got some more fun so if i now um so if i now set my um set my remote to origin and push it and let's look at github um i was reloading that page um so you can see that i have um so i have merged it so um github is is um has basically closed the pull request because um because i've merged it and there's now only five pull requests um so let's have a look here so here's another one from dirk um so i put out a call a couple of days ago for some for some various people to use blender bim to create some pull requests for me based on this model so um i don't want to resolve conflicts i just want to um there we go let's copy his good URL um let's go back to blender bim um and that's dirk um so it's add a remote okay didn't like that didn't like a HTTPS let's have a look um i'm quite sure what's going on there there's a um a git config file um what's going to do this without any kind of um of um command line usage come from there for some reason there's a git config lock file there i don't know why so um so let's add that remote um it's dirk let's fetch dirk's um remote um i'm still on the main branch of the head if i look i can see that dirk's remote is there um what he's changed if i look at the he's changed this kitchen table here in fact if i it'd be easier if i go back to um back to where he's fought from so if i go back in time to the the branching point um and then look at hello so refresh switch back there yeah for some reason i've lost that branch um so it always goes wrong when you um when you're trying to demo live this is the fun part yeah this is the fun part yeah um so let's fetch that again so there we go here's dirk's branch let's just merge dirk's branch now um what he's done is he's modified if um if i look from that like what's changed he's modified this table and what what he's done because bim is this um this jump it's not just geometry but it's also data so if we if we look here he's changed this um he's changed his table and he's added a um he's added what's called a p-set so he's so previously i just modeled it it was modeled as a dumb table that was just it was basically geometry but he's had this p-set that says he's got four chairs and that's very useful when you're when you're later on you're building schedules of the building and you want to know how many chairs and how many people can be occupied in the building let's um so let's see let's grab some more um um poor requests here i'm not running out of time so um so yeah so this is by molt so molt is the main developer of blender bim um so he's um so let's let's grab some of that code um there's the link there i'm still in the main branch that's fine um i want to paste a url here um molt it's added a remote um let's go to molt's branch and fetch it um now if i can look look here there's molt's branch um i might as well i'll just merge it so let's see um so um the blender bim um um blender bim logo is basically a rabbit so molt's added some rabbits or dn rather has added some rabbits so um so here we go so a bit um these aren't these aren't real rabbits they're furniture rabbits so no rabbits were harmed um um let's have a look let's see if we've got any more um poor requests here i'll try and do all of them oh no that's molt's version but uh so here's an extension um this is by um cohen um so as you can see from he actually uploaded a screenshot which is very nice of um of what the changes that he's made um so if i now go back to here um i have another remote here so select cohen fetch all his changes which is quite quick as you can see um now but i think his extension's out there so if i um so if i go to um oh there's two there's two branches there let's see what happens we'll pick one of them there you go he's had an extension um so at this point i could um if i um if i go back to my so i am the working branches main so push that back um i don't know what's going on there oh i want to push push to origin okay so there's obviously a um so now if i go back here there should now be just a couple poorer requests left so here we go so here's one try and do all of them before we run out of time um so um so here's go this is not a not is that not on that day it's an Italian name um so grab this um get repository um i had another remote there and then if i go back to here fetch it and so i'm still in the main branch here so let's see so so as far as i can tell he's added a monkey so i'm done aware but we'll find out um let's merge it there you go so it's uh he's added a blender monkey um as a an icy alarm so this is a security alarm which is quite nice um so we've got one more poor request here so um so this is by um this is by Ryan Schultz um so Ryan's quite interesting Ryan has a um an architect firm in Wisconsin where i'm called opening design which you can look up and pretty much nearly all of his work is is shared online on a get repositories basically working in in an open way pretty much the way we do free software so if i um if i pull in his code here um his url um go back to blender bim here add yet another remote so now i've got um i've got half dozen remotes here um if i pick um Ryan there um fetch Ryan's um repository which is very quick um i'm still in the main branch here um i can pick Ryan's branch um i mean let's look at what he's done so i think see Ryan started off with the original building so there's no no monkeys no no rabbits no anything like that um and he's added some landscape and some external features which is quite it's quite nice he's an architect after all um so if i switch back to my main branch i can see i can merge that um so i'm i'm running out of poor requests here so um so if anyone's got any questions lined up that'd be good yeah again well we're waiting for that to merge which won't take too long i don't think um yes so usto one asked um what are some real life examples of how this process comes in handy for you um so um i'm as i said i'm recovering architects i'm not a practicing architect i have worked as an architect in the past um the the practical examples are that um that quite often multiple people and and multiple um people in different companies are working on the same building um the way it works in the industry is that one person creates um creates a model that for their particular skills so the architect creates the model and then they um and then if other people are using different software to them so the structural engineer or so or the services engineer using different software then the architect will export a view of their model probably as i see and then the other the other people working on the project will then load that as a reference overlay sort of like a like a background layer and then they'll try and do their stuff on top um but there's there's no um and they'll create their own information and they'll similarly they'll export this overlay that the other people in the project will be able to look at but they won't be able to modify um so with with working like this we can work just like how we how we work with um free software is that that we can say here's the model um and if somebody sees something that's wrong they can they can they can change it they can send in a pull request and say the architect who created the model might go yeah actually that door really does need to move and they can just accept it and this this is the way of working that is really not traditional in the building industry um but being somebody who's who's been in this free software world for many years and the and the building industry it's something it's about time that these working practices actually happened in the building industry um so that that's a little um yeah a little rant from me but there you go any other questions yeah um there's just another one there does it account for floor and height differences um yes so um so the IFC's got a very elaborate um system of locations so you can geo reference everything um you can model multiple floor buildings um there's um uh and when you generate drawings it will generate um you know drawings per floor it'll identify the the the number the number of stories is already in the file so so when when you generate drawings of each floor the then the software already knows where the floors are um any other I I mean I while I'm talking if there's any other questions I can I mean I've created a there's another um repository here with a couple of other things I might as well merge them while we're talking um so in git lab so so I've done everything here on github um but actually because this is git and it's distributed I can um I can I can have remotes from multiple services so if I um so I go to git lab and I fetch from remote um and if you look in here there's um some framing so um so that I created this when I thought that wasn't going to get any pull requests um so here's a here's a bit of a roof for this building so god that's sorry any more questions I kind of um kind of went off on one there no you're okay um we don't have any more questions at the minute spot if if anyone feels free to drop them in the the ether pad yeah um so I this this is something that this this kind of merging um because we're you know we're a full three-way merging it's something we can do with these IFC files and it's partly because of the the file format kind of kind of lets us do it I mean it was never designed as it was never intentionally designed into the file format I mean IFC's 30 year old um standard um so uh this is kind of unexpected that we're able to do this but it works very well and it's very reliable apart from obviously it didn't work here entirely perfectly but um but the actual merging is very good um so if anyone wants to talk to me about how they might implement this in other software then they're they're welcome to try um ask me uh just um I'm easy to find but in our postal um another question just came in there for you yeah um are there any common mistakes or errors you see use in this process um it's uh yeah so if if um if uh if if an object's been deleted in both branches and you know and I merged then then that's fine it'll be deleted in the result um if an object's been modified in in both branches then quite often we can merge it even though it's on the same line of text um because because IFC's so structured um there there's a that's like an IFC wall always has the same number of elements um sorry same number of attributes so if if if the name for example has been changed in one branch and the description has been changed in another branch or or the representation which is the geometric shape has been changed in another branch then we can always merge that even though it's um the IFC wall is actually just one line in the in the text file um um but if if you if you're both if you're both trying to change the name of of an object then then that will fail the merge will fail and um and the way to resolve that is to give both objects the same name or to delete both objects before merging yeah and we just have another one there how popular is this process in the architecture engineering construction industry currently it's not popular at all at the at the moment um everybody works in silos nobody shares their data there are no there's very little of this kind of working practice apart from people like Ryan who I mentioned earlier who's who's doing this in his own practice so Ryan works with other architects in in in America and in Europe and in Brazil I believe um all working on the same projects um so so I think it's it's it's a good way of working in there and there'll be more of it in the future here's another merge so this isn't this is my last poor request oops there we go so um it's a bit of um it's a bit of a um we call this kind of architecture ransom low architecture it's a it's a definite style okay um if we don't have any more questions so I'd just like to say that um Deon Molt who's developer of um Blenderben he's going to do another presentation later today so if you want to see more of the actual features other than this git process um then Deon's Deon will show you this afternoon in a few hours time and so the last question there is what do you envision for this way of working for the affirmators or aforementioned industries what's the vision um the vision is that um that having worked in the building industry for many many years and and in parallel working in free software the building industry practices are just terrible um the people people send files an email the file is called final version final version v2 final version v3 it's it's a complete disaster um we need to change the industry and make it and and take advantage of all these tools that we've developed in free software yeah definitely I can I can relate to the the naming of the the files final version one final version two yes okay um I'll stop screen sharing yeah that was very interesting Bruno thank you very much for doing a talk on that yeah thanks for letting me um up here thank you yeah thank you for having us we we saw a lot of comments in the in the channel like people are glad to see this and that open source is going to change the world for the better so I hope that your vision comes to life yes for me too I hope that it does all right thanks so much for being here and uh all the effort you put into this this demo here we appreciate it okay thank you yeah bye bye bye all right Emma it looks like we finished our first set of sessions we're on to a short break um the next talk is a pre-recorded session so the stream will end or well the stream will pause for about an hour well we have a break and play that pre-recorded session for the folks joining in elements if you're watching this stream on youtube you can go to the description and join in element through a link there element is a chat application that uses matrix and that is where the most ideal participant attendee experience is happening with a live chat and Q&A with the speakers that's where we're grabbing our questions from and a great place to connect with other attendees at the events of course you're free to keep streaming but we want to welcome you over um on that platform if you'd like to join us so for those of us in element I'm going to get that next um session all set up to go and uh we'll see you back in about a half an hour okay bye all right let's make sure this is working um on the fedora youtube should be so let's make sure see yep it is looks like it's live all right I think we are set to go so thank you Dennis for joining us today and pre-recording your talk I'll let you do a quick intro and then we'll ask you a couple questions from the chat I'm Dennis Payne I'm a programmer I do maintain some packages for fedora and develop open source video games and I also play around with legos we're getting a little feedback that the audio is noisier uh causing some feedback I'm going to check mine just lower that hopefully that helps if it was mine it just lowered probably mine the by uh fan runs constantly as soon as I'm doing video that's why I pre-recorded the session got it okay that makes sense all right let's see here um what kind of questions do we had so you were answering some in the chat which is awesome but I'm going to just uh give them to you here so we can get that on video too so have you ever tried to 3d print legos the digital designer program is giving that vibe but I guess lego shapes might be proprietary yeah the the problem I have with 3d printers is everything that I've heard of people who have them they have to fiddle with them so they'll go over and print something and they'll find there's a problem and they'll tweak the the 3d printer so it prints correctly and so I just don't have the patience for that yet I'm waiting for it to just be a I buy the box it just works I don't have to touch it I'm not much of a hardware guy I think the feedback are the sound issue might be coming from me Emma do you want to take over yeah sure and so he read out the first one oh yeah so someone said also curious about the proprietary status of lego brick shapes it seems that the 3d parties manufacture lego compatible bricks so it's a time is it just the name that is copyrighted sorry I read that a bit weird so uh the lego bricks were patented at one point and so you couldn't create anything that had the tubes in them that allowed the lego bricks to hold together pretty very well that's expired for a long time so anyone can go over and create an equivalent lego brick the thing is is that lego's building their machines to produce the bricks are very precise and so their clutch power their ability to hold is really good most of the other third party they go with a cheaper process that doesn't hold as well there are some good third party bricks but a lot of the community involved in building with lego's they require you to build with lego's not with the other bricks there's a big convention in uh florida and in virginia for brick fair every year to uh where the community gets together and shows off their builds and everything that's pretty awesome this question isn't in the chat but is that the lego creator sort of community that you're mentioning it's the afol community the adult fans of lego um so they they go over and build you know all sorts of mocks my own creation and so there's a there's actually a couple big conventions for brick fair but the biggest one is in virginia and people from all over the place show off their builds that's pretty awesome i have some lego builds back here i put them in the chat but i'm into lego's so are a lot of my friends but we're not into the point that we go to conferences but like i want to see the impressive stuff that people are building i bet that it's pretty great unfortunately the place that i had that had a lot of my pictures that site shut down so i haven't uploaded them again so i have like a uh a millennium falcon combined with the melano from guardians of the galaxy and so i have star lord as han solo and uh uh groot as uh chubaca that's pretty awesome all right well it looks like we're getting to the end of the time here thanks again for being a part of the summit so happy to have you here um and i'm sure all of our lego nerds are going to love this session so thanks again thanks all right i'm ready to admit andy into the chat hi hi hi hi andy how you doing today very well thank you can you hear me okay just find the sound okay nice to meet you both nice to meet you as well thanks uh for having for being here today um we're live streaming right now so uh just one question before we before you kick off your session which is would you like us to hold questions for the end or kind of jump in as you're going uh that's a nice question um yeah i think it's going to be better in the end okay i'm going to leave the questions for the end okay sounds good we're going to get off camera now and let you take over okay and yep i will need to share my screen okay so this is it right haha yeah just in yeah i'm looking at the chat okay so i'm going to share my screen right and i'm going to maximize so hi hi to all uh thank you very much to everyone for being here um especially thank you very much to the organization for uh accepting my talk and for yeah for being so helpful in in in the whole process and of the of the of the conference it's been very easy uh so far so okay so today um i'm going to talk about tempo 2.0 and i'm going to do a handsome demo so it's going to be some sort of a very practical session right um about myself uh my name is Andres but everyone calls me calls me Andy so if you want to call me Andy uh that's totally fine i'm consider myself uh user experience or slash product slash interaction designer sometimes i guess that uh uh we should use the the term software designers which is like more descriptive of what we do but in in any case um i've been designing products for like 20 years already and now i also have the the role of pro toner at pen pot which means that i'm responsible to prioritize things mainly to prioritize which hypothesis we do we want to validate also to discover them uh to prioritize problems to solve and to to think on what are the best solutions that we should build or to facilitate the thinking because the the this thing is a things part in in my opinion as at least um so about the session about the session i will be introducing pen pot i'm going to be very brief i'm i'm aware that a lot of people that it's uh uh into the uh yeah and in the audience uh might already know pen pot so i hope not to borrow you with that and i will spend a lot of time um working you through uh pen pot two point no features so like i said this is going to be a very practical session and in the way i will try to talk a bit about the recent behinds and how we involve community members and and potential users and actual users in the development and the design of whatever i'm going to show you now okay so let me drink a little bit so what is pen pot this is an screenshot of the current version of pen pot pen pot is an open source design platform for design and code collaboration okay um there are other platforms that are other design tools that do things similar to pen pot but pen pot is unique in in some things it's unique in yeah in first yeah uh in the beginning is extremely unique because it's open source there is no other tool like this one which is open source which means that you are gonna be remain in total control of your tool you are going to have total privacy if you want it if you can download it sell hosted uh you can tweak it you can uh modify it you can customize it you you have total privacy uh total control of your tool and of your data something that you cannot say of of our main competitors also pen pot is built over open standards the the base format for our files is basically sbg and also css you will see some examples of how this get implemented it is and it has an effect in how designers use the platform and developers and talking about designers and developers the third thing is that this tool is built under the strong belief that product development and product design is a theme sport and that the tools have to be up to the task so this is a design tool not only for designers but for product teams so this tool tries to welcome not only the designers again the designers are obviously in the center because the design is the main action the the the main use case in the platform but tries to welcome also developers and other kind of stakeholders like managers users clients whatever you can imagine content writers we always forget about content people and yeah I want to name earlier okay this is our pen pot so what is pamper 2.0 because I'm here to talk about pamper 2.0 uh pamper 2.0 it's uh pampered it's just pampered okay um but it's pampered in a whole new state of maturity um the fact is that really soon we will publish a massive release uh yeah uh how soon you know we're really you asking you you can ask that later and I'm gonna answer with maybe a basis or something but um yeah we hope to release really soon um a massive update that will include um extremely important features and also a lot of changes in terms of uh performance stability and this kind of thing but today I'm going to talk about the main features that compose this pamper 2.0 version that we I'm talking about so the first one the first thing that I'm going to that I'm gonna want I'm going to talk about is gonna be the redesign because we made a complete overhaul of the pamper interface next we will I will talk about our new component system and later about our extremely unique feature uh called grid layout and in the way we will talk about some some more things okay I hope this sounds fine okay so let's continue about the redesign okay that we start with well it's not exactly a quote it's uh uh is the definition of a law congress law I I guess most of you already know about this law are already familiar with but I'd like to read it anyway so the thing that the congress law what it says is like any organization that designs a system a system in a probably uh definition will produce a design who's a structure it's a copy of the organization's communication structure um I have my doubts about if this is true or not I like to believe that it is I think it's a cool concept and I think it is it is a cool concept that in the end it tries to say that every product is a reflection of the people that is behind of the organization that is behind this this product and this gives me uh to the idea that the current pamper interface doesn't reflect the current status of our product and of our organization when we created pamper when we released our first version of pamper uh it was in 2021 if I don't remember wrong and at this point we were still thinking about things we were still figuring out uh what should be our um our product focus what should be our product direction um we were also to try to figure out what product variations should we take we were also doing a lot of experiments and we were releasing really fast features um leaving leaving aside some things that we also consider important but we didn't consider essential at this time um so yeah this interface allows us to to to grow fast to test our hypothesis to launch a product that that was in contact with the final users really soon we learned a lot about our users about the community members etc but at this point in 2024 I believe that we are in a whole different moment a whole different stage of the product um now for for yeah for the start I could say that we have a bigger team not much bigger because we don't like to grow uh yeah we are not that kind of company that feels that the goals will be growing because yeah because reasons um but we are kind of a slightly bigger company and we also have more designers uh yeah uh have different needs um we also have uh some sort of yeah very clear product direction uh in comparison with what with our previous ideas uh it's kind of a crystal clear product direction and we also have a much more demanding challenge right now I could say that in this moment uh PEMPOT it's been considered an alternative to some of the most uh value of them most dominant products in the world which is uh uh not not not a small thing okay so to say so in this at this point we decided that we wanted to change completely the interface okay hope the reasons are clear so what we decided to do with this new interface what we intended to do was first to reduce the cognitive load and we do this with uh two things first having uh much more consistency the current PEMPOT version has grown you know unevenly in different parts of the platform but now we are going to ensure consistency across the whole platform and also showing things at the right time now you are going to be able to customize a bit more your interface also we put a lot of effort in improving the accessibility and we are applying best practices in terms of color contracts um keyboard navigation uh proper tagging and and and yeah and more things and also also we knew we felt that we could do something much more beautiful much more beautiful beautiful that what we have right now uh and this could seem I don't know kind of naive this idea but for us it's important because we truly believe that open source software shouldn't be ugly we truly believe in beauty and also uh from my perspective of just as user experience designer I I also understand that usability is not only about the speed or how fast do you complete your tasks but also about how do you perceive it what is your perception of the interface of the whole experience and the interface place and a strong part in in this okay so okay more this is not exactly the email right now but I'm going to show you this new interface okay this is PEMPOT 2.0 this is the interface if you are already familiarized with PEMPOT the first thing that you are going to notice is that this dashboard is not light like we have it but it's dark um it might seem like a yeah a very simple change but it's an indicator of something bigger which is that we added color themes if I go well not here yeah Andy you know that better if I go to my account and I go to settings I have this UI theme option and if I change it and I update my settings okay now I have light theme I can go back to my dashboard and I see that everything has changes okay this is yeah it's it you see that this is working right I forgot to do a disclaimer I'm using right now a preproduction environment okay this is a high lens stable preproduction environment so this demo it's like a a risk a very risky sport okay for you to know so there is a high probability that at some point we are going to see a very beautiful screen saying internal server error once we that this happens we will celebrate it okay this part of the game sorry to interrupt Andy but I'm not sure we're seeing what we're supposed to be seeing maybe we are but people are mentioning in the chat that they're seeing this slide I'm sorry yeah I yeah I see I see maybe I didn't share with a height share let me check share options I have to share mine in the screen okay yeah thank you thank you for yeah thank you for telling me this so I'm gonna make this quick okay so yeah this is the new version of pampot as you see already see the the the live theme okay and in in your account settings you are going to be able to change it to dark theme okay so now with pampot 2.0 we're gonna have different themes which is something very important in terms of accessibility because right now in the current production version we have some sort of mixed interface we have live theme for the dashboard and dark theme for the place where you design which we thought that it was a good idea at the moment but it wasn't because it affects how people work in different lighting conditions so now providing these two options we hope that people are gonna yeah have an option to to to use the pampot that better suits their lighting conditions okay so you saw that I use of this this this option at the settings but I also have a shortcut which is control as q okay so we can easily change the color theme nice right okay and let's go to the design area okay like you see here I can also be able to change between color themes easily okay I'm pressing the shortcut I'm gonna leave the white one for instance and if you are familiar with pampot you will see that we changed things from places we we tried to give more more space for the content so now the toolbar it's floating we have some panels floating too and and these panels can be some sort of hidden too so you can do things like that I'm gonna hide the rulers and you can customize your interface to your need this is what I was talking about when I talked about so the right things at the right moment like the list of the users for instance I'm gonna do a little bit of zoom like you see okay pampot are you are you drunk nope this is me a lot of times because I open these the stuff in in in different in the different windows I open it many times just to show this okay so so you see that the interface I don't know if you like it I think it's much more beautiful not the current one I don't I don't know if you can compare because maybe you don't know pampot but I hope how do you like it anytime and you will find like a lot of a lot of small details like small animations like I don't know I like for instance this way to map the prototype options things like that you will find tons of them I and I hope you enjoy them and to build this we are building at the same time because as you might imagine we are designing pampot with pampot we are using pampot to design pampot which is kind of have you seen inception the movie well some sort of the same effect we are also creating new design system this is a copy because I don't want to break anything in the demo but this is a copy of one of the files of the new pampots design system that is going to be pretty well organized set this is the the file for yeah for for the elements that you are going to be able to to use in the interface and once is in a proper state we will share this design system so other people can benefit from it tweak it to their own needs take it as a reference whatever our current design system needs widely used already we know that for the fact because we have some data that confirm it so we hope this design system will be useful for people for people too okay let me check check my notes yeah I think that was it so remember the devil is in the details okay let's go back to the demo new component system so you might know this guy is Plato back in his day he was like an independent consultant for governments um this guy has this idea about the world of the ideas he believed that there was like a true reality the worth of the reason right the worth of the ideas that was separate from the sensible reality the physical the sensible sensible word which was a world like kind of uh non-perfect right we uh if cool as six and a perfect idea of what is a cat okay what is the the the perfect canonical cat and that in the sensible reality you have many cats many cats with different forms different shapes different behaviors yeah you know that uh when I am I talking about that uh I'm talking about this because this was the the base metaphor behind our current component system okay we have an an assets panel in which you can take a look at the main component but the main component has no representation in the in the interface okay so in the not in the interface in the in the design space okay in the design canvas so you don't have a main component that you can touch okay you can update it from here which in our opinion was a yeah great idea we are so smart we talk about play-toe you know okay in the end this didn't work out well um or uh at least as as well as we expected and as we wanted okay we we gathered some feedback we got some we we we had some evidences there weren't some problems so we decided to do our homework and we we put in in place some typical research practices we did the proper research with that we spent quality time doing this and we were gathering user feedback we have like a a lot of sources for user feedback we did user interviews some of them in context to people that were managing the design systems and design assets at the scale and in in teams with complex workflows and and complex challenges and we also did the typical benchmarking or competitive analysis okay so to to to compare what we were doing with uh what we what we with the best practices practices that we found so after this homework after these research practices uh we the fact we we we get to the to the conclusion that we needed to make a massive change to our component system and and this is what i'm going to show you right now the the idea the the benefits behind these massive change which is going to seem like a small but in the but i can tell that it's massive because it's it's touching the foundations of how pamphlet manage uh assets that can be reused um the benefits of these change are going to be or we expect because we we we will need to evaluate it once once we launch it uh will be better control of any instances inheritance and overrides um we improved the the updating workflow and you're going to see examples of how the synchronization can can happen instantly and we also have some capabilities like swapping and annotation okay so let's dive in okay yeah i see you are seeing the proper file okay so let's play a bit with components i'm gonna uh change a bit uh interface with what i need this little guy this dancer okay i'm gonna want to to have more of them and to to have them dancing in synchronizing well wait well don't do not spend an actual dance okay i'm gonna change the simple properties so to create a component i just have to do that i have the shortcut to control k okay right click menu and create component so i have this answer i see that is a main component because there's an icon here and there's this indication here okay if i duplicate it i have a copy which is a stilo component but it's not like main component okay it's a copy of a component i want more of this okay i want more of this yeah never have it not okay so right now in production if you have components in Pempot and you want to apply a change to the main that is inherited by the rest of the components you will have to change the property here and then push the change through command here and then you will see how it affects to the rest of the copies but right now if you are in the same file because if the components are in different files things that you can do with same components it's like a different workflow with more securities but in this case that we have the main component in the same file as their copies if i change for instance the color you will see that instantly it's applied to their copies this happens with any other properties like for instance slice okay i can change sizes like that okay thinner okay i'm gonna go back to their previous state nice right things that we improved to are the the overrides on the copies if i decide that this copy needs to have a different color for instance blue right and now i keep changing the color for the main component and okay it's here sorry okay the color is gonna be changed only in the copies that don't have this property overriding okay and this happened in different properties for instance if i change this copy intention sizing and i change the the size for for the main dancer the main component okay sorry i have a problem right now with the selection demo effect yeah come with me okay i'm gonna change the size you see this change of size is only applied to the components that don't have this property overriding okay we're gonna see another new cool thing i'm gonna delete all those guys because i don't need them and yeah i don't need them and now i'm gonna create uh i'm gonna change the color okay nice i'm gonna create two components this is gonna be looking to the other side okay control k main component control k main component this is gonna be uh looking at the left and this is oops looking at the right okay if i take these two guys okay and i go to assets i see that those have been added okay in my library uh those two guys look like a group right i'm gonna group them okay uh dancers create i have them group the here dancers you see i have my group of components that are related in some way i'm gonna take a copy i'm gonna take a copy imagine that you have copies of this component around there and i know that this is related to a different type of dancer so but now i want the dancer to look at the other side now i have this swapping feature that allows me to swap between different copies of components okay see easy right nice this is gonna be useful to yeah to manage especially uh components stage for instance different versions of the same component without needing to do a lot of manual work you have these two options here because those are grouped but you have access to the rest of the ocean that could change it by any other component okay nice i hope you're having fun right i don't know if this is good or not that i have to be entertaining you at least okay more um the same thing that we do that we uh we don't use to design uh dancers right we spend more time with applications and websites so i'm gonna show you an example of that so for instance if i have this component which is you set in different contexts um i can change the color for instance and you see that i can immediately see how these effects are the different uh at the different contexts how the same component uh um how the the same change in the same component uh it's uh uh yeah has a specific effect in different contexts okay and remember that uh these are pretty simple components but you can make the component about almost anything so you can make changes of things a bit more complex like this for instance i'm gonna change this model uh what do we have here for instance okay i could change this model for a gallery okay i'm gonna i didn't want to rotate it or i could change it for fabs this is nice this is interesting okay precart no i don't like that so i'm gonna leave it with fuzz and uh google also uh yeah and i'm gonna show you another new feature that we're gonna release okay if i go to oops to if i go to this component i can go to the main component of this fast um i can add notations okay i could create notation something like don't use this in uh the up screen okay for instance this is a way that we are trying to improve the communication between designers developers and whoever who is using these components because sometimes we don't have the proper specifications about how to use them where to use them etc and with this feature we hope to yeah to improve this communication if we go back to the screen where we were using this okay we will see that the comment is right here okay nice okay a bit more work so let's continue okay i'm gonna maximize this is nice okay in terms of components because i know that you're gonna ask uh this is like a base work that is gonna be useful for more things like uh variant or component states that we're already working on or design tokens that we will implement and we will release hopefully in the middle of the year well i'm not gonna tell the dates okay but during this year also we have in mind to add version in two components and two design systems but we haven't started yet with that but this is so you know about our plans in terms of capabilities for design systems okay next and last but not least the match awaited grid layout feature okay so before talking about grid layout i need to talk about flex layout which is a feature that we released last year i think in the beginning of last year which was a feature that allowed you to create designs with the same technology that css used to create flex layouts okay we are using directly css in our design so the the designs that you are creating have the same constraints and the same code base as the as the as the implementation okay we are also using the same literacy in the design interface as in the as in the code base so this means that while you are creating these flexible layouts you are learning css okay and you are learning the language of how these designs are going to be implemented which we believe that improves the communication between designers and developers so what is grid layout grid layout is like the next step in this same direction okay the difference is is that here with flex layout we were using flexbox behind which is a css module but with grid layout we are using css griff which is a fairly new css module it's from 2019 i think and it allows yeah different superpowers main differences uh with flex layout would you work with only one direction left uh yeah from from left to right or from top to bottom or or vice versa but with grid layout you can create layouts in two dimensions you can handle two dimensions okay which allows you to do more complex compositions so for flex layout flex layout is extremely powerful still and in fact the combination between both uh uh it's uh it's amazing in terms of building layouts but it's much better for small components for instance but with griff you can compose extremely complex uh layouts not so complex but adaptable to two different sizes okay flexible okay let's show the demo um no i'm sorry yeah so we are going to change sorry the basics okay we're going to try to build something like this but for a sketch okay not tricks here so i'm gonna create n square and this is also new too i'm gonna hide the components now we can add colors from the color palette okay but we can also add images now we can treat the images as as image backgrounds okay which is kind of new at pampoth we will have more ways to to to apply these images for the backgrounds but as as you can see this allows you to create images that maintain their aspect ratio okay nice so i'm gonna quickly create a flex grid layout okay grid layout here i'm sorry i should have created the grid layout first okay i'm gonna add the property grid layout here i have flex layout too as you see uh i already have a layout with rows and columns but for that i'm gonna add more rows and more columns okay as you can see i can add the image to the in fact uh yeah i created a board with this image but i don't want the board okay i want only the image right i'm gonna delete the board i can put this image in the different cells of this layout okay it's kind of it's kind of fishy um and if i press uh control d i can duplicate it and it's gonna be filling the the the gaps as you can see i'm gonna do i'm gonna make this adaptable to to the to the size of the layout and i'm gonna touch a little some properties here okay so i'm gonna add for this layout uh some paddings some and some gaps so it's gonna be it's gonna look better okay and yeah this is looking fine as you can see we have like an strange measure here okay which is fraction okay after is about fraction and this is about how yeah this is what makes the the grid layout uh the cells to be to be adaptable to the global size so one fraction means that if if we have three three columns one fraction is going to take one third okay so i'm gonna fill oops uh no i'm gonna duplicate this element okay but i also i'm going to create different areas to solve this layout okay i'm gonna i'm sorry okay okay i'm gonna delete those two different images yeah this is uh okay sometimes it messes the grid addition which is about uh spaces with with the elements okay so now i'm in grid addition and as you can see i can do things like this okay how cool is that right and if if if you are no skillet like is my case uh sometimes you want uh to use the submenus like this and this way you can build yeah some complex interfaces right okay i'm gonna keep uh merging this okay nice right so we got to the to the conclusion that we had at the beginning okay i'm running out of time so i could be doing the demo for a long time but i'm gonna just jump uh one of the samples and i'm going to go to the last one which is the dashboard okay i've already created creative in um in a layout here with some sort of composition the areas can be named which is pretty cool too i can take i can yeah select this area and i'm gonna uh name it as list for instance and as you see i have a fairly complex components here and i'm gonna easily fill uh this layout with my components you see how easy it's uh to start working with this okay it's not looking bad um but it could look better and i'm going to add a field here i don't like the white and this is looking better like it's okay okay i want this to uh fill this this width okay so i'm going to use this fit the width you see how easy is to make this flexible also as you see if i enter grid layout mode you see that i have pixels for everything but i want this uh middle container to be flexible so i'm going to use one fraction and you see that it's gonna take all the content that that you can get i have um i have fixed pixels for for the sidebars and a flexible container for for the middle and i'm going to make this component to fill the container to okay this itself too okay this is looking nice i'm gonna keep playing i'm gonna keep playing okay not bad and this could look better if it takes the whole height okay not bad right so nice thing here it's uh okay yeah and then switch it off it's backing that this is flexible you already have a very complex flexible design and not only that but you can see it's code okay and this is fairly this is a standard code this is a standard code this is code that you can use for your websites okay um if you take a look at this css you will find the uh grid layout properties easily okay and to show that this code works i'm gonna copy it this is for instance for for example i'm not not for example i have to mention it this is new too we are showing the html of the designs until now we we definitely show svg this is new too so you will have it in the new pamphlet version i'm going to copy the html i'm going to paste it in this uh cold pen i'm going to copy this css okay well this is not looking bad right okay we already have the markup i'm going to copy the css i'm going to paste it we're gonna wait we're gonna wait to for the magic to happen and the bath okay this is a standard code uh working on the website on on the web made with our design tool okay i'm gonna inspect the code and you will see that this is also i'm gonna take the the main the main container okay okay okay you see that i'm not very skilled okay yeah uh we have the output container uh place prop okay i think this is one yeah uh no we're going to take uh why don't i find this you've been practicing andy you've been practicing and i cannot find it okay uh i'm sorry for that and it's taking too long to find something here okay here yeah there's a some some width hi and you can see that this is flexible okay and this adapt to the width of the container in the website okay and this is it about tempo 2.0 uh we have a session and thursday talking about how the community was involved in the creation of this grid layout we have this initiative from the canonical team that made the complete analysis of the grid layout and we also did a beta testing with like 90 people that participated that helped us to build the best possible feature they they had a dire impact in our product so just thank you from here and and in this session on thursday here in the creative freedom summit we will talk a bit more about that so that was it uh tempo 2.0 new redesign new component 6.10 grid layout and more things like image fails html and a lot of improvements in terms of performance and stability uh i hope you enjoyed i love to know what you think about this thank you very much thank you andy that was very interesting as someone who uses pen pot every day throughout their work um very excited for those changes you are yeah we just we have a few questions here um regards to your talk so the first one is are there any courses for pen pot that you would recommend any courses for pen pot that i recommend okay i know that there are some courses on on the on the work i don't i don't have like a main course for reference but here you have a youtube channel in which you will find a lot of tutorials and we inside the pen pot team we are creating more tutorials specific tutorials for mainly for the most complex features we are creating tutorials for managing components and also for uh for these grid and flex layouts and also if you uh if you sign up in pen pot you are going to find resources to to to learn about how to use pen pot and to learn about how pen pot it yeah uh how to find things in pen pot how pen pot is a composite so so yeah i don't have like a main one but you have a lot of resources lending resources out there yeah that's great um another one then um when will pen pot 2.0 be released we love view dates right don't we uh yeah soon i just can say soon um it's a matter of uh weeks maybe uh we still as as you saw it's uh yeah it's working it's mainly working uh what what you saw it's an uh production environment in which we are still trying things and we have uh some scripts validation scripts and launch errors so uh you're not going to find that in production it's a it's a better stage of that so as you saw it's it's almost done it's almost done we still have to fix some details and very very soon you will have your new pen pot available but i don't have dates i don't like dates and i don't work with dates i'm sorry yeah that's perfect um um and do you have any thoughts or reflections about the fig mat slash adobe failed acquisition oh my a lot uh we should uh we saw open like different sessions just for that but the thing is that uh yeah i don't know i don't know what to say because i'm being recorded right now that's okay we can move on if you'd like yeah we we can talk about it later but we i have opinions i have strong opinions since a lot of time ago yeah yeah and another one then do you use any other open source applications in this process and how well do they work together only yeah we use like a lot of open source applications we try to use as many open source applications as we can for instance we use matermost for internal communication um we use uh inkscape for managing sbg assets some people believe that pamphlet is competing with inkscape uh that's not true we use pamphlet and we use inkscape both served through different use cases and we love inkscape uh from here i have to say and and in general we try to use as many open source software as we can we also use tyga for product management tyga is another tool that is being built by calados which is the company behind pamphlet okay so i work a bit at tyga too we all we all live at some point so yeah i couldn't like many more but we try to use as many open source software as we can great um and will the new teams respect the systems light and dark modes i'm sorry could you repeat the question um will the new teams respect um the systems light and dark modes so i guess if you have like light and dark mode turned on on your on your computer like will pamphlet happen oh yeah uh if if i understand the question is if it will detect automatically if it needs to not yet but if you want this to happen i encourage you to go to the community at pamphlet or at github and create a post at the community talking about it if you want an open conversation of or if you have a specific request you could go to github and creative and yeah and we will see from there because uh we are implementing a lot of things that have been proposed by community members and this could be like a pretty nice idea to implement so i encourage you to to yeah to tell us to tell us and we will see cool um are there any plans to reach out to creators slash designers back of health demo and promote pamphlet for real world projects potentially getting feedback from them as well yeah we have a community team which is working hard with things like that and we are yeah we are trying to look for people that could do some advocacy and we have planned uh some initiatives like uh contests uh or or ways to promote people to create and share um files that could be helpful for other community members and things like that so yeah stay tuned because uh you're going to see a lot of initiatives regarding these things and came into existence when they were big and well established non-free players in the market how did they decide to enter this challenge and manage the financial issues of developing such a software and that under a copy left license okay yeah uh yeah we have a very yeah really specific story about this in calados which is the company behind them both like I say and we are pretty committed to open source software and this is that in the beginning calados have only uh developers and then they we the designers started to join the company and we saw that the developers have all the tools all the toys that they needed that were open source to do their job but we the designers were playing like in yeah we were second yeah second class citizens in the world of the open source and we felt that we were forced to use proprietary tools so in one of our innovation weeks because we do two of these each year two innovation weeks per year um yeah and a small group decided to build a prototype of a design tool that were open source that work with open standards and that work in collaborative way in a browser okay that's like a lot so it started like an experiment and it continued as a pet project of a few people for years it was like yeah something like under the hood but at some point we realized that we had an opportunity here there because there were a rising thriving community of open source designers that were willing to to collaborate to participate to to be part of a community with that so in at some moment we decided that we had to play hard with that and now the company is almost fully dedicated to to Pembo so very happy with that and just one last question then um any plans regarding plugins yeah yeah we are already working on them and my opinion it's already late for me plugins are like a a major opportunity of the of having a major involvement of the community helping extending Pembo capabilities beyond the things that we can imagine inside the team and yeah right now we have a small team doing already some experiments about how plugins could work in Pembo so I hope we will see uh we could release something yeah um eventually this year yeah very good thank you so much Andy for your talk it was very interesting and there was a lot of them interested in the chat you're doing your demo as well so greatly appreciate it I'm gonna read it right now let's see um yeah so thank you very much thank you very much thank you for having me here bye bye bye no just me and you Marie you can't hear me oh I can hear you on me I was like yeah this I basically was saying that I don't know if they've presented that uh content before but I felt like I was getting like a sneak peek which was fun yeah um also the fedora design team uses pen pot for all of our websites right for building them yeah me too yeah okay you know more about this than me I felt like I was meeting a celebrity I think it's talking about that's fun yeah we also quite a few people live streaming during that session as well so that's very cool we are about to go into a little break here um so some of us can grab coffee or snacks or whatever I'm gonna go make myself a sandwich really quick and come back but Emma I think you are logging off for hosting duty today um um if I remember that correctly and Madeline will be joining us a little bit later on but um we'll see you again tomorrow morning yeah I'll still be active in the chat and still still I'll still be watching so I think I'll be around all right everyone yep we'll see you soon folks is maybe checking over here no it might not be oh okay it is up and working um it should also be working in the element chat let's just check over there it is I just saw I'm muted it quickly okay awesome okay cool so we're up and running again for the second half of day two or day one day one my brain is already fried part two of day one that's what I meant I've been up for a long time um and now we have Madeline joining back in as host and we're starting off with a session from Leander so I will admit them here into the meeting hi Leander can you hear us might take a second having some jitzy problems I'm trying to bring Sienna on for everyone to say hi but she's like now she's like I'm not gonna perform today I think it's more like hey can you take me outside uh hey hi Leander we could see you now can you hear and see us you show us muted in the jitzy channel so or jitzy room not yet oh I think there's a lot of things at play I can definitely hear yeah I think I can hear you now you show us muted in the jitzy channel so or jitzy room can you hear us Leander not yet oh hello hello can you hear us we're getting a bit of a loop okay I can't I cannot hear you except through YouTube here it's still sitting it's still sitting for me at the asking the join meeting spinner yep maybe refresh hello everybody yeah can you hear us yep all right yay I feel like when people like wait in the lobby for jitzy jitzy's like and we will put a curse upon you just because you have to wait and it's like thank you Ed yeah I was I could see you through YouTube and I was in trying to answer in the matrix room but it uh yeah I was just sitting here on the spinning uh in purgatory in a conference purgatory so don't worry about it like you would think at this point we would have video conferencing figured out but no that's still still in the works um welcome we're so glad to have you here thank you for thank you for having me of course I think we should just jump right into it but we have one question before you get started which is would you like us to hold the questions for you until the end or would you prefer us to jump in as they come up um I would let's go ahead just hold them for the to the end um because I may this is a complicated program so I may answer it on the way out so all right if that's okay that's okay with everybody in the in the peanut gallery I've got my laptop on so yeah that'll be fine all right take it away all right let me share start changing screen sharing window um let's see here let me try this I've got a few slides to start with um just kind of because I'm not it's not going to work I don't have to do it the kind of more primitive way here um bam all right so I'm going to start with a few slides here just because I don't know what everyone's comfort level is uh what everyone's knowledge level is is a wide variety of people um from different backgrounds and some of you might think hey I've got a pretty nice camera I've got an iphone 15 or a google pixel and don't know what our off file is or a lot of the stuff I'm going to be talking about so I've got you know maybe 10 minutes worth of of the library office and press here trying not to say powerpoint um don't want to give Microsoft the Kleenex uh treatment and um just to kind of go over some background information and then we'll get into like um kind of a one or two photo editing uh demonstration of what uh dark table can do and and what I accomplished it who am I um you know I mean I have to put this slide in here I'm giving a talk at a conference what's probably means I have some degree of narcissism so of course I'm going to talk about myself a little bit um I started photography in the early to mid 2000s uh my first digital camera was a Nikon D70 or digital SLR you know I had cheap digit cams before that um I've shot film film uh both medium format 35 millimeter I'm a long time Linux user I started using Linux at about the same uh first time my first distribution in high school is um in the late 90s was Mandrake which back then it was basically red hat with KDE um um a compulsive camera collector um that's getting to become a problem um you know my my uh my fear is that if I pass away my my wife will sell all of my stuff for what I told her I paid for it anyway um it's like a gearhead joke there um so I'm a compulsive you know I have have a bunch of old cameras and stuff like that um my photo and video work is uh mostly was run on adobe and apple until about 2013 um if anybody was around back then um we uh that's when adobe really kicked kicked everyone in the butt with creative cloud and started charging subscriptions so I started looking more seriously at alternatives um I moved to a linux desktop more or less full time around that time maybe about a year later um until very recently I picked up a macbook um to help out with testing some dark table stuff on the uh mac side because they're kind of short on mac devs um so I'm I'm not a developer I don't want to take any credit for any of that stuff um I just I kind of build a package test it out report bugs kind of kind of help out with that give talks on how to use it uh so but if no one's there with some uh technical mac knowledge or somebody is there with more technical mac knowledge it kind of helps out it does work fantastically on the new m-series mac so if you are using one of those uh it works great about dark table uh the project started in about 2009 um we're currently at version four six there are two releases every year um one in the summer and one around christmas time um so you know four eight will come out and like june ish and then um we'll probably hit 5.0 uh this december uh it's got digital asset management so you've got a light table um module which allows you to collect tag export your photos things of that nature um raw development which is really the like thick meaty part of the program um and then you've got in that you've got probably the most unique thing I think about it um if you're coming from adobe is extensive masking support um if you guys are back and uh sorry that's not so much that um extensive masking support so you can literally mask any module in a number of different ways either drawn like you would in photoshop or there's this crazy thing called a parametric mask where you can mask based on pixel values um which is really neat um for hardware support you know most people think oh it's linux it can you know I can get this old laptop from 10 years ago put it on there and it'll run just fine uh you know dark table is still doing heavy duty math on you know lots of pixels uh you know your average digital camera these days is somewhere in the neighborhood of 24 50 megapixels so I would recommend a bare minimum as a fourth gen i5 that's probably getting a bit dated I would probably look more closer to an eighth gen now in a four gigabyte gpu dark table does support open c open cl so you have a kuda uh nvidia kuda gpu you can make use of that amd support is kind of there I'm running a um rx 6900 in my desktop here um but it's a bit more buggy uh if you want the smoother experience as I hate to say it you need to get a g4 quadro um but I you know I would say that um put your money into the cpu more uh again this is doing complex math on a lot of pixels so you know we get we get a lot of uh we get a lot of uh you know you see a lot in the support for it there's like uh I've got this old del attitude um and it's not running too well well you know it's a core to do with four gigs of ram what do you want anyway so here comes the background um what is a raw file so if you ever use a digital camera a high-end digital camera um or phones these days you notice it's got a setting for a raw and um maybe you don't know what that means or you think it's a type of picture format it's technically not a photo but it's a more like a data container it takes the unmanipulated excuse me let me get a quick crank here it takes the unmanipulated data from the sensor and stores it to the sd card or to the hard drive if you're tethered or something like that it's more analogous to the negative in the analog world um this is because a jpeg is only eight bits deep most of your raw is nowadays are 12 14 bits um I think some really high-end cameras have 16 bits deep and if you're any good at math um no feel bad if you're not you're realizing that's a lot more data there to work with in terms of color and brightness uh levels so if you're shooting jpeg you're really kind of um you're really kind of uh limiting your access to that um and these are two sensor patterns here um traditional bear pattern the foodie film x sensor x trans pattern uh these are just the basically so all all sensors are monochrome there's a filter array over top of them to create the color images that we see and there's different d mosaic and processes that go on involved in that um there's kind of some background information there now you have me talk about brightness and you're probably thinking what's that and that's something called dynamic range and that is I like to refer to that is like the third dimension of a sensor if you are thinking of a camera sensor and you buy something that's um 12 megapixels this is pretty common size for a phone nowadays right um probably even higher uh you know you're probably looking at uh 4000 by 3000 pixels height you know it's a rectangle so you know length or height by width uh third dimension uh the third dimension of the sensor is dynamic range is how sensitive and how many steps the sensor has before it overexposes or blows out um so that's why I say it's a third dimension because it's really about almost how deep your pixel but if you visualize your sensor turning on the side and you kind of uh thought about it in terms of a spatial dimension your dynamic range would be how deep that pixel is how much water you could put you know if you had a bucket how much water you could put in it before that bucket overflowed um more contemporary cameras have a better dynamic range they can um handle more uh a broader range of EV before overflowing and losing data um and that's illustrated here in this graph that I stole from dxomark um anyway uh shamelessly um you look at a nikon d850 here which is actually a five-year-old camera now I should probably update this with like the z9 or something and you can see that it's got max is out at just about 15 stops of range where if you look at something from a dynamic range whereas I mean 15 EVs sorry whereas you look at something the nikon d700 the kind of every man's every woman's camera from 2008 um it was 12 EVs so you get quite a bit more access to a bit more dynamic range a bit more data here in the d850 um dynamic range is also a function of iso so if you go up in iso increase your sensitivity your dynamic range will fall off right so you know but even at the worst the d850 is still way better than the old nikon so um that brings us to kind of how raw development work raw processors do math on raw files uh so this is something that's uh kind of comes up in the dark table support world or new users a little bit um they come in expecting a most of them come in expecting like lightroom but I don't have to pay for it um it fills the same niche but it does not work in the same way and you know they'll put their picture into the dark table and they'll be like why does this look different from lightroom um and that's because uh you're doing you're taking a raw file which is raw data and you're running some math on it algorithm you know algorithm we like to use as a fancy word for doing math right and so you put the take the raw data you add the you do the math on it and you shoot out a result and that's represented here by we've got this um stock photo of binary on a computer screen and you pass it through dark table raw therapy or lightroom and you are very likely to get different results because these all have different algorithms for color correcting display transform maybe demo zaking they have different approaches and so you kind of have to have some leeway with how you're what you're getting out on the other end um you know they're all three valid representations of your photograph uh they're just they just go about getting there differently um we see it a lot where people come in and go oh well I can't duplicate lightrooms output and so it must be worse and I'm like no it's uh it's uh it's uh it's kind of a it's a it's a different uh it's just a different interpretation it's like different translations if you speak another language and you translate stuff you can know that different translations from different translators have way different I can have way different meanings if you're going into another language right so that's that's why I say um it fills the same niche niche but it doesn't necessarily do exactly the same thing they're all kind of valid interpretations of your data uh dark table actually does something called a display referred workflow these days which is a little bit different than how lightroom does it um the thing about lightroom is its closed source nobody but adobe's engineers know what's going on inside this thing and that the rate that they're using um generative AI and things I don't think they probably do any more either so uh you know we don't know what they're doing but it looks to be what's called a scene referred workflow and I'll go into what that means in a little bit I think raw therapy is still kind of display or a scene referred uh but this is a scene referred workflow excuse me lightroom is a is a display referred workflow and dark table is a scene referred workflow I misspoke there and what does that mean so you've got your source raw here which is just a file on the disk nothing special about it and if you go to the scene referred path um you're going to be doing your grading and corrections and transform from the camera to display color space at the last step whereas your display referred you're going to do your transform upfront why does that matter why why do we care what step this comes in well because it has impacts um down the line cameras lenses raw files all work in a linear space you know it's all linear algebra that's that's how it works the math behind it displays your computer displays and this is kind of a leftover from the crt days anybody old enough to remember those you know those big hot boxes that shot radiation at a phosphor and made a picture on the screen well those didn't work in a in a linear space they worked in a on a on an exponential curve right and um lcds despite being natively linear uh go and when they do their transform they mimic what a crt does um so you've got to take your linear data from your linear raw file and convert it into a non-linear space mathematically to display it well when you're doing that you are losing or you could potentially lose information end up with negative values where there's not supposed to be so if you do this transform early in the process it can lead to more artifacts and your grading and corrections before you get to displayed image or if you do most of your math here in the native kind of space that the camera and the physics work in you get less artifacts and a better result in your displayed image um this is kind of an illustration of that and then i'll quit talking about our point got two or three more slides here and we'll do some image editing um so what's one example of a problem with this well it's called a huge shift or a twist so let's say um you have a blue right look at this gradient here you have a blue and then you lighten the exposure on that blue all the way till it is white right this is this the strip here it's kind of what's supposed to happen this is reality but if you do a old school display transform it actually you'll notice and i'll show this in the next slide that you get this sometimes you get a huge twist who's ever taken a picture of a sky or a sunset with their digital camera on their phone and maybe the sunset was yellow and the sky was kind of like a cyan well this is what's going on your phone is doing an s rgb transfer and it is doing it is setting to display as the maximum value and it's just omitting all of this blue data here which if you know anything about color and you know i'm i'm kind of an idiot i'm kind of learning as i go but um if you change the amount of blue light represented in a photo relative but you keep the ratios of the red and the green the same that's how these things work you've got an r or g and a b um this is going to be a different color than this was and your hue is going to shift or twist twist comes from the color wheel which you know you've got zero to 360 degrees and if you twist a hue that's because you're twisting that wheel whereas what's called a filmic transfer which is something we use in dark table and something that we use in um in this uh scene referred workflow you keep the ratios the same so that the hue does not twist um an example of that from my own work this is a screenshot of a sunset it's kind of a zoomed in picture of a sunset through um through some grass and i have the filmic module cut off here so this is doing a um displayed a display referred transform and you can see you know the sun is largely red you know going back to this if you take red and you brighten it it's the same thing it should just go red lighter red lighter red lighter red white but here it's shifting in the yellow that's incorrect that's a huge twist from the incorrect transform or if you cut on the filmic rgb module and this is a bit dated now we've got a couple of different modules for doing this transform um you get this kind of red salmon color which first glance you're probably like that doesn't look right and you know if you're used to digital imaging from the last 40 years you're you know you've just used to seeing this hue shift everywhere um it's even baked into some video games and and digital media because that's just what people are expecting hearing but it's fundamentally incorrect to reality um so you get this you get this more correct representation now you can and modern versions of dark table um go in and decide how much of this hue twist you want to dial in but you're not forced into the kind of yellow um yellowish sunsets and cyan skies right so i hope that illustration helps a little bit all right so i'm going to go ahead and switch my screen here get a little drink of water am i doing on time oh okay i've got plenty of time all right everybody can see that yes okay so here i have just selected a few images to kind of do like a quick edit on um i just picked a few from my library so we have to sit there and scroll through the whole thing um i'm mostly a portrait shooter these days um i did it professionally for years people are interesting and more importantly uh people write checks for photos mountains tend not to do that just just a hint out there for any aspiring pros um anyway so uh we'll start with this uh this is an easier one to do so this is a uh sunset from uh nearby to my house and i mean sunrise excuse me and you'll see you've got a few things here in the history stack when you first i just double clicked it and you first open it um we've got the original it says they're all black and white point and these modules here that have this kind of circle by them there it's not an on and off indicator you can't cut those off because those are needed they're fundamentally needed to take that bucket of bits that is the raw file right and display it on your screen so you need you need all of those um we do a white balance a color calibration um exposure uh orientation to make sure that it's situated correctly and the filmic rgb which is the scene referred default there's another module called sigmoid which is a little bit more user friendly and i'll kind of show the comparison there um a little bit more uh entry from entry guy entry entry guy or gal friendly whereas these uh filmics got a lot of buttons and knobs and sliders and is sometimes a bit intimidating all right so this is a uh photo rights book it's a bit underexposed in fact we have under an overexposure indicators here if you click on this thing it's like a square with uh with a line drawn in the middle uh the blue indicates underexposure and if we were to overexpose it in fact i can kind of make that happen here by dragging the exposure up you get the red that is the overexposure so we'll revert that and you can revert to any point in the history stack just by clicking on the module here right so this is actually a good photo um for this process because we have not clipped the highlights so uh you can check for raw clipping by just a little checkerboard pattern here in the bottom right corner you click that and if you were to overexpose this you would see this checkerboard pattern uh where where it is where it where that is happening the uh so additional wisdom and photography has been exposed to the right right so you want to get as close to that right edge of the histogram as you can with the midpoint with the uh midpoint of your exposure that's really not the logic here with uh with dark table especially with modern cameras being so good at noise and stuff like that i would say that you're better off just i was not just me i'm not the authority on this i think that um it's it's a um it's a better option to just make sure you don't overexpose because it is infinitely harder to try to reconstruct clipped highlights because there's nothing there you know you look at it and it's it's like uh trying to interpolate uh data from nothing so if you clip that you know that's bad and you're going to spend a lot of time and post trying to fix it i don't have anything egregiously clipped today it's like consider that more of an advanced thing um but i just wanted to kind of get that out there so um but there's not a lot going on in this scene this is kind of dark down here in the hills um there's not a lot in the sky but we can start by fixing that by adjusting the exposure it automatically kind of adjusts if you are old school thinking this picture is a little old but if your old school thinking is still using the exposure compensation dial on your camera to try to get that center over towards the right it'll automatically adjust for that but you can cut it off if you like so we're going to bring that middle middle value and watch that histogram kind of up up here and then we can duck in the filmic rgb and uh this is version seven which is i think the latest um and we can set the black and the white relative exposure so this is essentially your black point so if you adjust this eye you can see the shadows getting lighter and or darker if you take this eyedropper tool here and you select it it'll kind of automatically try to figure out where that should be in the same with the white relative exposure i find it to be a little bit aggressive with that uh with the white so i tend to manually tweak it otherwise you notice this is starting to go kind of white kind of overexposed there in the sun so we'll kind of or it's really a reflection in the cloud but we'll kind of bring it there and you can autotune levels so you can kind of get some some basic settings there but this is essentially setting your white and your black point nice thing about this is that since this module happens at the end of your pipeline you make all of your color adjustments and the physical order in what you're doing time wise doesn't matter you could do filmic first and then do like color balance rgb to adjust saturation and all that um in your workflow but the program actually sticks them in the right order when it's doing the math so uh but the nice thing about having this transform happening at the end is uh well hdr displays are coming right someday um we'll have support for that right i know red hat's working on that but um we will uh if you want to make it look like it will uh display correctly on an hdr display you can just come into this one module readjust this black and white um this black and white point what's up and re-export it for that um so we're just going to kind of dial it in where we don't have any clipping um next i usually pop into the look tab um because there's this constant balance between dynamic range and contrast the more dynamic range the less contrast you have so you kind of have to kind of go back and forth and dial this in um latitude increases the width here of your um of the middle of the curve so it kind of it gives you more more of this linear space in the middle um that's more of an even exposure and you can adjust towards uh highlights or shadows to leave more room there so this is a very shadowy kind of image i'm going to put more into the uh shadows um and highlight saturation mix basically the thing on this is to the right gives you more colorful highlights you can see the saturation here is increasing increasing versus if you go towards the left the uh it kind of goes more white uh so i'm going to kind of go there so we get a little bit less of that salmony area um all right and so now we've got something to start with and my next step usually in this is to go into something called the tone equalizer um the original way that those module opens is in this simple setting which i don't find that simple i much prefer this which is like a graphic equalizer on a piece of audio gear or um you know piece of software or something like that and so you've got shadows on this side highlights on this side and in the middle so uh and then you know mid tones in the middle obviously so i'm going to go here and mask this a little bit uh kind of drag that mask in the middle and i want to bring those shadows up so i'm just going to push that up and if you're not sure which tone matches what you can actually take and mouse over your uh your area here and you see you get this little crosshair and it's actually showing you where that is so um on the uh on the image and you can if you have a jog wheel on your mouse or a scroll function on your trackpad you can just use that to uh take that up a little bit to get a little bit more in this area and then we want to bring this down a little so we're kind of mouse in there and we bring that down to bring those highlights down all right so we're not blowing those out right good so um just coming from here from filmic to there we've now got this we've now got much more detail in the foreground here it's still a little bit pale looking to me so i'm going to go into here and the color balance rgb cut that on and this is where you can do some um kind of uh basically there are some presets here that you can use for like adding some colorfulness that may be a little much so i'm going to take that down a notch really if you're not comfortable with this so like chroma is your distance from gray saturation is a combination of chroma and the amount of light on a subject so you know you could stick with that if you want um but we'll kind of come in here and adjust that out maybe give it a little bit more vibrance there um and your color calibration is where you can do your um this is kind of dark tables version of white balance so the white balance module is set to d6500 you could come in here and do a sample of the image and it will do um it does it's got um i don't understand all the math behind it but there is some uh i think there's been some training done to the way that this works and it and it actually will uh like whereas white balance will just make your whites white and your gray is neutral this kind of takes into the to account more of the whole gamut and so we kind of bring that down you can fine tune it here maybe get that red out a little bit and we'll kind of bounce back to there and actually desaturate those highlights a little more right okay so uh we've kind of got some more color again we've just come in here from uh this to this and a few steps now i may go back here into filmic and add some more contrast just because i like contrast and again this is all sort of to your taste bring that back in um and you can also search for modules so i don't remember where all these things are so i'm going to go here and do lens correction put that on and it's actually got the lens fun database so it'll go out and say oh we found that you use this lens and this whatever uh camera and it'll automatically import the uh the lens correction for it so it'll take care of the distortion in the vignetting um and then we'll kind of come in here and we'll do a crop on this because there's a lot of sky in that it's got a it's like a big old forehead of sky there um i'm going to crop it in a little bit and then i usually come in here and use the the diffusion the fusion sharp or sharpen this is actually a power for module i could probably do a whole a whole hour long talk on just because it could do a lot um it's basically a time-based uh it's it exists in kind of the time domain where you can either add a diffusion or remove a diffusion but it's got these really handy presets and this is a d 800 so it had an a filter someone do sharpen d d mosaic sharpening a filter and this is kind of the bit of a final of the final um edit you've got here now i've been talking about it as i've been doing it and and adjusting things so it took me a little bit longer but i'm going to bring that out a little bit then it would have but not a terribly long thing to go from here or we can do a snapshot and then when i go down to there and then we will hit from that to that you can kind of get a comparison here from the imported uh to what we've got so we're getting way more details into the uh in the um in the foreground we've corrected the color we've got kind of uh we've got kind of a nice salmon kind of sunrise here and like i said if you wanted to uh keep that yellow look i'm going to get rid of this so drag that off there is a new module uh that does the same sort of in the same sort of place as filming in the pipeline but it's much different so this is sigmoid um which was added i think in four two and you can kind of come in here and it's basically got a contrast slider but you can come in here in the per channel and you can add or remove twist so as i take this preserve hue down you'll notice that this is starting to go into yellow so if i'm going i'm going i'm going and you see how that's turning yellow so if you like that kind of yellow look you can bring it back um the skew and this just you know points goes either towards uh shadows or highlights so if you drag the skew down here you're going to get more contrast in your shadows if you drag the skew up here you're going to get more contrast in your highlights uh we'll just leave it kind of there um you can also come in here and um continue out some of the red so bring out some bring some of the red down so this green pops more in here but again that's an even easier module to use and it takes the same place in the pipeline it's still seen referred so it still preserves the linear linearness of the data and it's a bit less technical um let me check my time here oh yeah i'm still good so that's a basic kind of landscapey edit um i guess next we'll kind of go into a portrait edit here so i'm let's see which one uh i guess we'll go here this has got a gray background so it'll be easier so again you'll probably notice that dart table imports a very flat looking raw file if you're used to lightroom or capture one or one of those other products it probably you're probably not used to it coming in flat like this that's because it's uh it's not using that little built-in preview jpeg that that those programs use is just showing you the raw data so we're going to start here as i always do uh adjusting the exposure i'm going to cut on my over and under warnings and you can do here you can see we didn't overexpose we did a good job i also like to cut on the um the color evaluation space where it puts this white border here to help you make good color decisions um it's actually a color perception is a weird it's half going on in here and it's half reality so your brains even all kinds of wacky stuff we're talking to your eyes are feeding that data it's automatically um correcting for color cast that's why when you go from an incandescent light outdoors things aren't like blue and all that stuff um so you know if you're doing really serious color grading i would suggest you know using this this mode here because that gives you that white break and kind of so it doesn't mess with your brain as much it's messing with your head man so we've got that in there we're going to bring up the midpoint here and they notice that the highlights aren't really clipping and we'll go into filmic here and we'll bring up the shadows a little bit to to get some more dense dense uh get more contrast more density in the um in the blacks as you can see here particularly on the glasses um they're getting kind of more more pronounced as you more more solid looking i guess in these rims um and then we'll bring the relative white down to make sure we aren't clipping and we'll bring it back up and again you can just click the eyedropper to kind of get a base of where you're going um next you know add some contrast and some latitude and this is uh definitely more of a highlighty image you know her shirt is white um her skin is is is kind of got a lot of hot light on it too so we want to have more space up in that upper part and i probably want to add more color so just to the highlights so i'm going to bring the highlight saturation mix over to the right so that we don't bleach the highlights otherwise you know um you know we don't want her to look sickly we want her to look like she's vibrant got some color um just because there's that hot light on there the light skin tone it that really the that's that can that can really wash out um next thing i like to do is come into here and we'll just do a kind of a correction on this and whoop i'm going to remove that snapshot there we go all right and so i'm just going to grab you can come in here with your selection box and kind of grab a neutral gray area i like you know you want to grab something that's not directly in the light but kind of sort of ideally you want to use a gray card but i am going with the unideal situation here because if you're like me you forgot your gray card you've left it at home or it's in another bag or otherwise part's unknown so i'm just going to grab that and then tweak it up a little bit so it's not so not so cold looking and more correct um let's see you can also if you get way off in the woods you can hit this button here as reset parameters and it'll put the module back to where you had it um so i this is a flash so we'll just go with daylight and we'll try to hit like uh 5600 kelvin or get closer to that here we go all right so we've got our white balance dialed in a little bit better and i'm going to just use the preset here that is the natural skin on this so that kind of makes the colors pop out a little bit and not not make not make the skin look so like you know off if you oversaturate particularly skin tones um the whole gamut of skin tones they can start to look uh you know overly yellowed or you know kind of like what i do on camera here i don't know what's going on with my lights anyway uh but you can make you look make someone look just awful and jaundiced so we don't want that um so we've got that there and we're going to do our old friend lens corrections like that again it found all of that and the fuser sharpen and gives us a little bit of a uh no AA filter on that one i think that was a fuji anyway or uh that was actually nikon no that's a fuji okay so no AA filter and you can see that's a pretty sharp image from that now you've got what i would call a serviceable portrait out of a few clicks in here um again we can kind of take a snapshot i'll cut off filmic and then we will bring in sigmoid and it's kind of more colorful by default so i'm going to bring that down and we'll bring that in this is just a comparison here to show you that you can get very similar results just out of different workflows we're gonna do natural skin here again and bring that in with sigmoid you really don't want to go too much skew on portraits because they it it um it can really make things look weird when you push it too far um bring in some more con some more of that into the highlights and bring in some bring in some of that out of the shadows and i might adjust this a little bit more here we go so you can kind of see that there are two approaches here um with what module you want to use um the thing about dark table is that whereas other things like lightroom and stuff are kind of like handholdy and sort of there's one path towards the correct way dark table is more of like here is a toolbox dumps it on your desk and you can figure out your way as to where you as to how you want to do it um so we've got a serviceable portrait here um we'll do one more and then i need to break for questions i guess um i've got yeah yeah i've got a few minutes so again another studio portrait um this time on our red background so the first thing we do is we want to get that exposure up to where we get that histogram more spread out and i'm watching this histogram here and so uh so we can get more of the data kind of in the middle part of the histogram and then hit filmic kind of take some auto levels there um bring in the contrast and latitude um make a make a decision i think i'm going to leave more space towards the highlights on this one and kind of go this way and natural skin on color on color balance rgb and maybe tweak that in a little bit bring in a little bit more vibrance um come back here and bring in even a little bit more contrast and we can even hit tone equalizer and and we can do like bring the shadows down and give it a lot a lot of strong contrast there right all right and again lens corrections um i won't get into it here but you can actually make like a preset um like a style a dark table style is they call it that automatically when you import your photos applies denoising and lens corrections and stuff if you want to do that um i usually don't apply lens corrections automatically because sometimes i like the vignetting and we'll crop that um but you can set it to do that um that's more of a maybe i should make a youtube video about that um we're going to crop that in and here we go we've got another pretty easily uh pretty good edit and a few clicks um with this software we can kind of bring that in sorry it looks like a target ad with the red background but it's what i add um there any any any walmart fans i apologize um kmart kmart's not around anymore so here we go kind of tweak that out so we've gone from that out of the box to that in two or three minutes not so bad um one new thing i really like in four six i'll just hit this right fast is this um rgb primaries module which kind of lets you uh really fine tune um you can attenuate your different hues and stuff like that and this is where the parametric masking comes in i like so we can come in here and i'll just do a quickie here but you can this will show your mask and then you can um just i'm doing this based on brightness so if we really just want this to apply to our brightest pixels we can do that and you can see how it's just where the light striking striking her directly there um we can cut that mask off and say we want to make that like a little warmer where the light striking her we can tent it a little bit and bring that up and if you want you can kind of cut it on and off and see how it's changing maybe a little bit more trying to exaggerate it a little bit because i don't know how it's coming through you know this is getting like on my monitor it looks like something but you know it's getting compressed and pushed through jitsi and out the youtube so i have no idea what you guys are seeing probably needs more jpeg right so um we'll kind of adjust that into the warm a little bit and you can make a duplicate make a new instances module and that's the thing you can have as many instances as instances of each module as you want almost um and we're going to bring this down to where it's only impacting the darker pixels kind of the shadowy ones so you can see that yellow is your mask maybe you're gonna a little more bring it down and we can make this look like kind of a vintagey kind of like film kind of a you know filmish kind of mismatched color balance thing um bring that blue up bring that bring that tint up and you can see here that it may not be super obvious because this has got a red backdrop but you can see there's like a blue tint in her dress and stuff um keep bringing that up and might actually want to bring them that up a little bit so it affects a little bit more of the image here we go yeah maybe not so strong now kind of cut it on and off and you can see it in there so there you go you've kind of created a color grade kind of like a diy instagram filter so um well we're at about 20 after and so i guess i need to leave some time for some questions let me take a look here um yeah that was that was a beautiful talk well thank you really really impressed i think everyone in the comments was talking about how quick you are while talking and talking about you know i mean that's i've been using this a while yeah and so we have we have three questions i think that have come in so far um anyone watching is feel feel free to put them in but so the first one is how well does dark table support storing manipulating photos on that are located on cloud storage like cloud storage next cloud at home is it a terrible idea okay idea or you know overly cautious answer is appreciated asks this person so dark table is pretty straightforward on its file handling it doesn't have like a plug-in for that per se as long as you can mount it or like i think like i have next cloud and it stinks as long as it shows up on your computer as like a folder or a file system dark table can work with it just fine my photos are actually stored over the network on a nas and um there's actually a great feature and i didn't get into it i have a video of it on youtube maybe i should paste the link but where you can um do what's called local you could make a local copy of the file and so you point dark table in its light light table um i'm sitting here making hand gestures let me start the screen sharing here um so you can point light light in the light table module you can point it at a folder like i have a folder here and if this folder is located on a remote storage like say you've got next cloud or google drive but you know you're not always going to have access to that you can actually write you can actually click on the photo and then over here on this panel um you can say uh where did it go great copy locally right there and what it will do is it'll take the file and put it in your home directory and you can edit on the go and then when you come back you say resync local copy where you've got your network connectivity or your access to your remote storage and it'll sync it back up um up to wherever that is again as long as you can mount the drive i mean you've got like a usb drive at home one of these like two you know two drive things and you plug it in to your laptop that's kind of this can handle that very well too um so yeah i hope that answers some questions so yeah yes my my answer to that is yes it works fine so it works fine i should probably i could get this is such a deep program it's like uh yes this is like um uh somebody asking you how do you know how do you linux well that's a deep topic um so yeah there's a lot to this program i tried to i tried to hit the high points no you did great um the next question is do you think learning darkroom would be harder if you're a complete beginner or switching from a different photo editing software huh that is a good question i think to some degree it's probably you know it's like it's easier to quit uh habit if you never learned it in the first place anybody who's i recently had gave up caffeine so um i'm kind of in that boat but you know if you've ever had to give up something you know how strong habits can be so i would think my guess is if you are a complete noob that um learning darktable from scratch is probably easier than if you've got baked in habits from white room or capture one um that's just a guess on my part though uh your mileage may vary true um no i totally feel that it's like a 2d artist going from someone who used to be on adobe like photoshop and then doing it in like open source critter like it's like not always transferable and repaid but okay our last question in oh no another one came in that's cool sure go ahead our filmic rgb and sigmoid modules workflow alternatives to each other so that you either use one or the other when processing an image but never both is that that is correct that that is correct they feel the same just like you wouldn't use two demosaic algorithms you don't want to use to display transform algorithms they fill the same spot in the pipeline in fact go back to my screen sharing here you go maybe i shouldn't cut it off yet um if you go under your preferences which is this little gear dude ad up here and you go under processing um it'll say auto apply workflow defaults and you can select whether you want to have it apply sigmoid filmic or the old school display referred um legacy workflow i would not bother with display referred at this point a couple of years ago scene referred was still being fleshed out it didn't have quite all of the lumps worked out of it yet um so i think there was probably an argument to pick one but i would just you know either filmic or sigmoid as a default and then you can switch between them as you see fit cool that answers the question i hope i think so all right and then it looks like how does dark table deal with icc color profiles does it not matter because of the workflow or can you make a profile for your camera and make things easier i actually just did a video on this on youtube this is almost turning into a plug um so um but the color calibration module you can actually use a color checker here i've got one of these um x-right color checker device it's like a little book it's somewhere again i've constantly lose the thing and forget to use it but it's that little book that you fold out basically and it's got the color swatches on it well you can use one of those to create a profile essentially for your camera in that situation and apply that color calibration preset to a bunch of images and like i said i've just made a youtube video about that like two weeks ago so um but yeah you can do that cool um and then i think this is the last question um do you follow roughly the same workflow and processing steps once you're this comfortable with dark table or does it rather on a per image basis uh so dark table is a very active project the good side of that is there's lots of people looking at it and there's lots of new things and improvements coming the bad news is every release i feel like i've got to reevaluate my workflow because they've added some new this rgb primaries modules made me go wow that's really good way to color grade so i've gone back and re-edited a bunch of images so i would say i have a basic workflow when i'm like say turning over work for a job or something like that that i follow to get a consistent output but i'm also always experimenting i usually track the about halfway through a release cycle i'll start tracking the master dev main branch whatever they call it and um start building that to check out the new features and and whatnot so it's a little bit of both um that's kind of the flip the bad side of a active project is that you're constantly having to kind of reevaluate your workflow probably wow um i think that's all of them um Marie just dropped a link to the video that you that you talked about in the element chat um yeah i see thank you that was such a great talk and perfectly within the time so um hopefully hopefully everyone here was satisfied today i mean i know i was it was so so interesting seeing the flow oh thank you i'm hopefully i represented the program well and um like i said answered some questions i thank you guys for having me um i really appreciate everyone in chat hello i'm waving at my laptop like you can see me but just pretend you can't hate me so um like i said you can check me on that youtube uh i'll drop a link to my website um i'm not that active on social media just because um well i've got enough brain damage already um so i don't it's that kind of try to don't i'm not terribly active on there but i do answer emails if anyone has any question they can visit my website and send me an email and i'll do my best to answer it in the semi-timing fashion so we can't hear there we go you're you're muted okay how about now there you go yeah um when you first started this i was brought back to like materials and processes from photo school not gonna say what year because but uh took me right back to photo school and i was like feeling those vibes so i just felt like commenting that but thanks so much for participating and um putting all this effort in we really appreciate it well thank you guys and i look forward to seeing the rest of the uh presentations in the next few days so thank you guys have a good good afternoon you too you too all right we have another couple minutes before the next session let's see what's next scene is believing yeah we're gonna saw our communication gaps with diagramming and trust me i uh i don't make nearly enough clear diagrams so i've been uh recently learning more about google sheets um and oh yeah no i think i all the things that i've learned about google sheets have been from you maria i actually feel like i've made some even fancier ones um turns out they're like a project manager's best friend but everyone uses something different um i think i'm just gonna wait a sec until uh tade joins us oh they're there hi tade hi tade hello how you doing today good how's everybody been on this beautiful day good i'm in tuesday full of new information being streamed into my head it's a lot yeah it's actually snowing here uh so beautiful but not in like a a sun shining way um we'll let you just jump right into it do you want us to hold questions or jump in as you're going along um hold questions at the end uh i'll try to make it to the give a few minutes to the end and if you see me rushing through some slides that's why but i'll be right back yeah there's a half an hour break after your session so if it goes over by a minute or two it's okay very good i didn't pay attention to that so i'm glad you told me so awesome no worries take it away we'll just be going right now are we starting right now i'm gonna go okay and am i sharing my screen yes you should have access to sharing your screen so perfect so and you can yeah i think it should full screen perfect all right looking forward to this okay thanks everyone for starting the session today this is seeing is believing solve communication gaps with the lost art of diagrams for the creative freedom summit i am your speaker tate hecopian and we'll hold questions to the end but uh we'll have plenty of time to have those questions so let's get started if you guys are really enthusiastic about this talk and you want to see everything right now that is the qr code please grab it i'll give you a few seconds don't worry i'll share it again at the end it's the entire presentation deck because sharing is caring okay so let's get started a little bit by myself i am tate hecopian program manager maker of many power points and diagrams and diagramming has been part of my career as a program manager as a technical person because you always have to communicate what you're doing with a wide range of people in different ways in different formats so here's some examples of what i've done here's a Gantt chart explaining some operation we're going to do over the course of multiple stages going left to right and then the priority is going top down you can see it's meant to be kind of a matrix diagram but easy to follow easy to understand is the goal here with uh monochrome colors the other one here is a single axis flow chart going from conceptual content at the beginning which is a little more abstract to a lot more platform driven approach to the technology so that go from abstract to concrete to outcomes at the end there again make it pretty clear to follow a little more straightforward and then here's something that was more of a conceptual diagram called a rose petal venn diagram it is meant to show all the interlocking connections between different teams and like marketing and design technology and product support into just one idea of in the middle there of building information modeling which is what i specialize in so the point is that these diagrams are all having a purpose of clearly and quickly sharing ideas and communication so let's talk a little bit about how we diagram how do we come with diagrams and i want to start with going to the past this is an example of an ionian order of a greek temple architecture from about 2500 years ago and all you need to know in order to build any ionian temple of any kind size whatever it was this is it going to know was the order at the top there how looked the proportion of the column to the rest of the order and then the portion of the building to the column and effectively this simple you can hand off these instructions to any master builder any craftsman and they could figure it out that's a diagram they could work with you literally just draw these out in the sand maybe on paper and away you go well you go forward fast forward today and our diagrammatic methods for drawings a little more complex floor plans elevations dimensions built into a less intuitive more detail oriented and this example i'm showing right now you might have seen it before this might seem familiar with a big circle what could it be well if you guess the apple campus in cupratino you're correct it is a gigantic circle with a garden in the middle and while it is complicated it has room for thousands of people to work in many different capacities it's not meant to be overly hard to understand it's meant to have a unified idea of a concept behind it because just like the greek temple in a section view we can see what it's trying to accomplish in the side here as a profile showing you the office spaces and tables the louvers the glass the inner working to say okay just take this and spin it 360 and that's the result you get on the right so complex but not complicated to understand and it works in many different ways this is a way they've shown the built space in white and the green space in in the green color to get a sense of how much space the building is actually taking up so it doesn't become this overwhelming presence but at the same time communicates the idea of what they're trying to achieve in general terms on left a little more tree terms in the middle and then you know landscaping turns the right that way it's an easy concept to follow but when we talk about diagrams for system architecture stepping away from building architecture um in the past and this is the ancient past is a 1980s uh state diagram uh done on legal paths with pen you know they did the best to explain a concept with technology they had the time it was hard to get a concept across but they did a pretty good job given the circumstances so we would expect a quantum leap and how we do this right well not really here's how we do diagrams now they're very complex convoluted kind of a garish color scheme hard to understand if you just want to understand what somebody's trying to communicate to you once the last time you felt really good about looking at a diagram for technology products and projects i'm guessing not as often as you would hope i'm here to say we can do better than this that is because diagrams matter for a lot of reasons they matter for communication clarity technical identity of a document and documentation itself and good documentation shows respect to the project to the team and to the user who might need to use it in the future for their own purposes so we can't be complacent on documentation after all everybody makes it back in developers dev ops developers and architects the architect has the money because he spends the most project money and we have lots of diagram problems to sort through they're flat repetitive confusing and they're one off you know we don't really repeat a systematic diagram we talk a lot about you know reusing code and modularizing code but we really don't talk about the you know doing the same thing with our documentation assets but we have great great examples this is just a simple get cheat sheet by user zach russon and yon kruger and i find it very elegant there's not a lot of complexity to it but there's a lot of information and it's easy to understand what you're looking for in this structure so it doesn't overwhelm the user simple color scheme simple layout useful as a cheat sheet and here's an example of deployment pipeline where it's all monochrome so that all you're looking at are the white spaces for the information that way you're not spending too much time trying to understand what's what it's all just one big system again easy to follow that's because beautiful is better than ugly throughout this talk i will use the pep 20 of python if you guys are fans of python they have a whole pep called the zen of python that has been really useful for me in any kind of endeavor i've been working on over the years so beautiful is better than ugly is kind of like the cornerstone of how python is meant to be used and we'll talk about the good the bad and ugly about diagramming so we at least we have a foundation on how it works so we'll talk with what is ux first all it is is the process of designing developing and creating products that's all ux is for positive ux user experiences and the core fundamentals there are is oops sorry be clear be concise and be useful that's it if you could just say be clear be concise be useful the diagramming will always be way ahead so before we show you an example of creating a diagram for scratch we'll talk about some principles because explicit is better than implicit so i want to give you explicit examples before we dive into a project so graphic fundamentals will go through really quick there's hierarchy structure contrast color space variety so these six hierarchy hierarchy is pretty simple just stacking things and i've seen it done this way when somebody's trying to example give an example of something that's first second third only fine but i would say you know express the hierarchy consider using something that really reinforced the concept of first second third if you're trying to build it up or have a hierarchy of who starts first or inverse it if you feel like the first has to be feeding the second feeding the third and say at the first is really important whatever the hierarchy is use your graphic fundamentals like a triangle to express it then we talk about structure and structure is important because it helps us understand how something is organized and this example here all the contents kind of in different places hard to follow it takes a minute to comprehend it so all I did is tidied it up into a nice structure so a little bit of cleaning time goes a long way in making something useful and easy to read next contrast and what contrast can do which just helps us guide our eyes into what is you know stands out here's an example of value contrast using Kodak for films it's a very old principle it's kind of easy to follow that you know lighter colors recede darker colors are at the forefront and it's as simple as line weights if you ever feel kind of stressed out line weights that's all contrast is for most people when it comes to the real work so you know big bold lines help you make a point and I'll show you example right now with this document format here we just have a document with string and date and authors and all that pretty straightforward you've probably seen something of this but what if I punch it up and I get this I use the contrast of the dark stroke on the outside to help kind of solidify the box is the distinct box documented top there as the main topic is in bold as well the rest of the text is as same as before but else use gray to reduce the eye strain a little bit make it easy to read all those uh thin lines all we did there so contrast is actually easy to do it most software lets you edit it so don't let it be put to the wayside but in the world of color there's a lot of other things we can do to give a little punch to our work and colors are really fun and easy to use if you just have a couple of examples to work with in this case here's some primary color schemes primary color schemes you think lego or crayola nothing wrong with them very useful to create different varieties of content using colors to help separate things people are very color sensitive but you can also use monochrome these are all just tints and tones of one color these are great for colorblind people or when you really don't know which color to pick but you want to make a some color color scheme monochrome to really help because then it takes away of the decision making if you're in a hurry but you can also use pastel if you want color if i want to tone it down so it's not overwhelming and easy to follow now this might seem like a whole thing but it's actually pretty straightforward because there's lots of color pickers online that i can pick spring pastels this is based on wp tables visualization for spring pastels and it gives you all the hex colors right there at the bottom there tells you exactly what the color is to tag into any color format whether it's a web document into an editing software like photoshop this will work anywhere so all you have to do is pick something you like online and it'll give you the code next talk about space the last frontier and when it comes to space it's all about relationships in this example we're doing what we did before we up to now we have a space arrangement i should say structure arrangement a color scheme you know good stuff but it's a bit tight don't you think what if i were to push it out a little bit and make it more room okay we still have that nice structure there's still a relationship here but i'm using space to my advantage because it gives you a little more breathing room using more room to maneuver and add context like arrows leading arrows or notes don't feel that you have to compress everything that could be very stressful and kind of gives a layer of sameness to everything space amount give me yourself some work to uh room to work in and finally variety and all it is is just using different types of charts there's linear charts circular charts and divergent charts we'll go through a quick example of all these linear starting then steps in between snakes and ladders you name it part easy that's a linear chart radio can be done in a couple ways this is just a venn diagram everybody likes venn diagrams an easy diagram to make you can show relationships in circular diagrams because they're going to overlap that's something that's hard to do with say linear so this is great for like an example i showed you earlier the venn diagram i did with the rose petal easy to build a lot of relationships easy to show to a wide variety of people without them doing too much work you try to reduce the thinking load and divergent is like linear but it just splits off we've all seen it with good branches and get flows but he can use this to tell a story that's the beautiful part of this if you're trying to say this is the main master and you want to add a feature one and two how that work and you can explain your process and thinking this way that way they understand how the work you're trying to do relates to the main and what that can be beneficial for and don't forget simple is better than complex always try to go for simple you might feel like you have to really flesh it out but you want to hear people give you that feedback but hey i would like you to flesh it out in more detail before we proceed that's how you know you need to expand on it so keep it simple now let's put everything we did to a test and show you a real software application that can be useful tools to make a diagram so let's apply our knowledge where do we start we all i mean now i know all the principles of diagramming and how to do it but where should we begin if we're not really crafty well that's where mermaid js here to save the day it's a free open source application that lets you make diagrams and what's beautiful about it it's all logic flow you take markdown like language like what you see on left and it will generate a diagram for you isn't that nice so uh there's websites you just look on mermaid js or anything like that you can go to a website and you can start looking at the examples just like this one to get the diagram result it's very fast quick easy to edit and follow so you don't have to be a graphic maker a graphic expert you don't have to feel like you have to drop everything you're doing and learn how to use photoshop or anything like that it's very straightforward you can just type things out so what's great about mermaid is it doesn't just give you one type of chart it gives you all the sorts like we described we have the divergent get flow we have a pie chart we have state charts and we have multiple charts pointing to each other right so isn't that great that we can use mermaid use its markdown system and generate all the sorts of charts that would be useful in a documentation format i think it's great and what's even greater than that is that you can integrate that same mermaid into other applications like jurrall i o it's a free open source software that you can load in the browser and many other applications have a draw i o extension to create documentation so you can actually plug your mermaid into dry i o and edit it further and here's just an example of dry i o interface i would love to go into the whole presentation on this but i'll just show you the essentials where you could take anything you put into dry i o like this example and on the right here the formatting will let you change the colors and the strokes and rearrange elements graphically and change the contrast and change text it'll let you do anything very quick and convenient again you can do this in your browser for free without any kind of requirement necessary it's very easy lightweight and convenient so we're going to use dry i o with mermaid mermaid can only take the diagram so far it can only give you kind of these lavender default color schemes are just fine so we can bring in a dry i o and edit it further so let's go with that so logic flow diagram i'm going to show you how we're going to do an update process of update content refresh as part one the to see the deploy and then sees will diverge the different cities dallas city loving those are the servers so you'll see in the middle what this looks like but the key thing here is that says at the top there flow chart and everything below is indented flow chart lr for luck right so we're going to start with this markdown again this is all from examples of mermaid jas and we're going to take that example i just showed you go into dry i o insert it and plant the mermaid into the dry i o layout system if you need more information about this again i'll show the slides at the end or you can look this up yourself but it's pretty straightforward a lot of other software works like this so we're going to take the markdown put it to the extension and that's a result we got two things out of this in the dry i o it's we got the linear format automatically with that flow chart and we got a variety we have a chart that has a little more descriptive quality to it with this a little more geometry in different stages than if we just use you know boxes so that's great but i want to change it i look i saw just now i'm like i'm not happy with this it's it's kind of hard to follow i think the hierarchy is not there so i'm going to change flow chart left right that we see here to a different method i'm going to use flow chart top down td otherwise leave everything else the same so i generate another mermaid plop them to draw i o now we have a nice hierarchy it's clear that i'm updating the content the reflection deploy into one two three okay i got my diagram but it doesn't have the easy to read the qualities that i want about it so we're going to take it one more step further i want contrast so i edited in dry o in the styles palette i changed the contrast so it's all black and white to get started i made sure the boxes are darker than the rest of the lines so it's easier to follow in the process but i also want to space it out a little bit and give a little more structure so i curved the arrows off to the sides here a little nicer oops sorry about that and made sure everything was lined up the bottom there so again very easy i literally just moved things and i changed the arrow design and then i wanted to add some color so it pops a little bit it's easy to separate the stages so i just screwed around tried a different color scheme i found a line with the hexadecimals you see on the left here good low to florescent low to intense so i'm going to go down with pastel with another set of hexadecimals on the left i just input input into the dry o style settings so now i feel pretty good i got color and structure and space and hierarchy and everything and i didn't have to make this really myself i edited it but i didn't have to make them scratch that was mermaid and dry o doing most of the heavy looking there so from there you can see the comparison between the beginning and end and i think you know my opinion the one on the right there is a little easier to follow than the one on the left that would be automatically generated so within a minute or two of work i made a new diagram example well i should say a new color scheme and everything in one or two minutes because it was all presets or settings that i didn't have to do too much thinking and then we take that and we push it to uh github we could just take the image export from dry o put into our github folder for documents and push it online before you know it within minutes between the time you make that markdown diagram to the time you're pushing online five ten minutes maybe tops and you have your documentation pretty nice huh but we can take it one step further you could do everything i just showed you in this process on in vs code itself free software from microsoft and in vs code you can load the draw i o extension just like i showed you online everything it actually exists in draw i o and vs code as its own little extension tab and everything i was talking about can be done here exact same diagram i made in vs code with exact same diagram settings and styles and everything we can edit so that you can do every all your work in one place and what's great about that is the tooling the tooling is in one place so if you have a lot of work to do and you're just trying to get the code done or just make diagrams or anything like that and push it online it's one place you can deploy it to github and i believe github itself now has markdown support for mermaid js so that's another step in there if you want to continue editing it in github so you're making a lot of this stuff work with an ecosystem very quickly i think a lot of other id supports being similar but i'm familiar with the vs code so i'm showing it here as an example you can only work down to one application all free and you might be questioning this is great but what about other open source there's other options i'm glad you asked it's true there's other tooling environments and i'll show you some from python php in python there's something called pdoc 3 it can use it with the diagrams module to make your own diagrams that look like this this is using pdoc 3 and the diagrams module to uh generate code on left and this is python format so you have to know a little bit of python it's on markdown but it's not hard to follow either you can use the module and its tools to then create graphics on the right here so just same concept as the mermaid markdown to graphics just you know using a different tool set to get the example on the right so it's a little more uh complete when it comes to graphics but you can also edit these and there's this cool tool out there called pyflow also free online that you can use to make uh kind of these uh low code looking examples using um modules and strings really great if you're trying to make a code example but you're also trying to like explain your logic a little more uh easy to follow way i've used these before when it came to like workflows i'm trying to explain so this is also pretty good you can change colors and everything here with php they have their own tool called php flow chart it's on github php flow chart just like that and you can make these kind of similar flow charts in php with their own tooling and just like the example we showed prior previously it's not hard to create this it's all generated in php code instead of say python code markdown same thing with php and here's another example this time it's php sanki diagram this is by dash four builder.net sanki diagrams you can see what php plays php syntax to create a quick sanki diagram if that's something you want to make for a project so these are just examples of ways you can use code to generate graphics and from there based on the principles we talked about earlier make your own diagrams all free and remember complex is better than complicated simple is barely complex but complex is barely complicated so if you do have to make more complex edits beyond just a couple diagrams this is the next level which is the c4 model by simon brown he creates an entire tool set to how you can take this a little further and all it is is using his own philosophy going from software to container component to code to create a framework to how you can make any diagram so you don't have to come up with this yourself this is great for architecting idea coming up ideas and again everything you see here that i'm showing you is from simon brown c4 model so look it up if you're curious about it he has an entire website for it and he shows you examples of how it works from the architecture down to the code that way you have a sense of how it can be used in projects and he follows all his own examples of you know this is a monochrome color scale uh has contrast things receive things project a lot of good examples you talked about he already has been doing it for years and if you want to take it a little further he has a tool called structure riser you can do it yourself and create these diagrams kind of like we're doing with markdown and mermaid jazz but just a little different format here i think he supports different languages and different outcomes so check it out another tool to use for you if you want to take it one step further to more elaborate charts it gets pretty intense with what he can do and here's just another example that going with a php just to see that you can actually go pretty far with the different plugins and you can go even crazier and use the ice panel tool with c4 model to make even more elaborate diagrams to get edit so it is a rabbit hole i would love to spend a session on everything i just talked about but be aware there's a lot of free tools to help you be the best diagram maker without making it your primary job so let's review some dos and dos do make graphic choices relevant to your project it doesn't all need to be the same choice every single time use some variety use common formats we talked about by charts van diagrams linear charts they are a great place to start from they solve 90 of your communication problems with diagrams so that's going to help you in just getting started and making diagrams are helpful to you and do use editing tools like we described here remages and dry oh that can help you get the job done faster if all you want to do is just show it don't feel like you have to drop everything and become a graphic designer don't be excessive don't put too much content in one diagram make multiple diagrams and just show it as a slideshow separate them because it's really hard to see through too much content don't be tangential and come up with unusual abstract diagrams that might look cool but are really not intuitive I would say that can be fun but try to avoid that because you want people the average person who may not be understanding anything you're doing the project understand what you're doing the diagram that's your goal so don't go tangential for that purpose and don't use visio friends don't let friends use visio I just showed you many examples of how to get out of this you shouldn't be touching that anymore closing thoughts let's go over some fundamentals be clear be concise be useful for ux design can't go wrong just remember those three points graphic fundamentals hierarchy structure contrast color space variety use them all at once use them as much as you need just be mindful that just these fundamentals get a lot of the problems out of your way and reduce your stress on if it's looking good or not and here's a call to action to all of you get examples you like that you've seen online I always try to collect examples that I find are good and try to follow through whether it's a good color scheme or layout or whatever I find it fascinating so get examples you like reinvent your process I showed you a bunch of tools and methods you could use I've used that to revamp my process so figure out what can be done to reinvent your process and make or remake some diagrams it's always easier to start from scratch but if you have something you've been you know itching to change this is a perfect opportunity because again it's a very simple process once you get started because you know it's there's not a whole lot to it when you think about the process I made to make the left to right diagram this is probably a lot of other diagrams out there just a flow chart with some hierarchy simple fun easy and you can do it all in one software package that the s code here's some tools to get started mermaid dry old templates py flow py doc it'll all be in the qr code at the end so don't worry but there's a lot out there so don't don't think you're alone or you have to pay a lot of money and references zenith python all those pep talks I was giving you it's been based on zen he is docs is a good one by moshik color schemes for data and the c4 model by sign of round are all good references to use it's always good to read about those because if you're curious about more there's actually a lot of good content about how to use color and documentation to your advantage and structuring your documentation it's just not something we get like exposed to too much in the tactical world realm but it's extremely useful once you get to know it and don't forget beautiful is better than ugly we're all here to create beautiful things for the world and make the world a little better place so don't sit on your own innate artistic abilities it's actually very easy to do so I encourage you all to contribute a little bit of beauty to the world yourselves you can contact me search engine optimized taute cacopian can't miss me and like I promised here's a qr code to the entire slide deck if you guys need to catch up on this off channel off video it's all there for you free to use whenever you like don't worry about it thank you so much everybody at the boss event and we'll take some questions we have a little bit of time otherwise you're free feel free to leave I'm not holding you to anything that was such a wonderful talk taught it um I remember being in middle school and learning like you know maybe don't use lime green on a magenta background like maybe have high contrast and I'm like wow this is blowing my mind awesome but so we have two questions for you um and the first one is what challenges issues or bugs have you faced using mermaid and draw.io for that's a good one because every thing I've used I know I use like adobe like illustrator and stuff that actually change the size of arrows everything has like problems with a mermaid sometimes it's hard to do a more complex diagram it's easy to screw up your editing in the text so if you have a good text editor that can help you structure that indented text use that to your advantage because it's really frustrated to keep indenting them yourselves keeping track of where's a to b to c because that relationship matters in mermaid so if you feel like you have to do anything more than what I showed you which is like three or four steps use a text editor to help you out and use mermaids built in examples they have the website and documentation shows you how you can do more elaborate ones if you just follow their examples but do use a good text editor to help you control the indents otherwise it gets kind of hairy with draw.io I think it matters on the platform user for I typically use in chrome you can use it in just about any browser but depending on the platform it might or it might not be easy to change the location of the save files so that's actually important because if you actually try to save this stuff very quickly I don't think it has any storage for you you have to find a place to save it so it's vscode and you want to save it in your folders in the vscode if it's from maybe use google drive if you have that that's what I use and on just a keystroke thing when it comes to draw.io you have to get comfortable with the layout system it scales the layout infinitely if you keep pop the pace of things which is nice but you might get hairy you might have like a ton of stuff on there so be careful how much you scale out layout because it'll just create the biggest page you've ever seen it might be a liability later when you try to print it out into like a png or jpeg format later because it's like what do you want me to print it's like you know 10 feet long that kind of thing so be mindful of that yeah I don't need like a map like wallpaper size um okay cool but that's perfect makes sense um and then our second question is out of all the different methods slash processes for diagram creation you've shown which one do you prefer or use the most they're all pretty cool an example I gave was a little structured example but I tend when I have no idea what I'm doing like I'm just like spinning balling it I tend to draw it on paper first if you can believe that because then it kind of opens everything I like pen and paper it can also be like you know tablet and visual pen so I start with that whenever I'm like I have no idea what I'm doing but if it's a lot more structured approach and I'm like okay it's a flow chart I tend to draw it real quick in like the first editing software have like a dry out I just have that open and that way I can get it in a nice format but it for me is a little more like open-ended before I approach the markdown that's markdown is when I got a lot of things to do I know it's structured it's a little more like an established mentality at that point where we have a lot more resources to use to and planning to actually apply to a bunch of diagrams so when I need to be efficient that's where I do the markdown and when I'm trying to just come up with ideas and work it out paper or just a generic draw I have a session I'm literally just you know throwing things down on circles and connecting circles and boxes and just think of work to help me think through my process makes sense wow that is perfect then and we're just over but that is perfect because now it's break time and so thank you so much for your wonderful talk today I hope that you get to tune into an interesting talk but we thank you so much for coming and sharing your knowledge and we will see the rest of you that are watching the stream back in 30 minutes is that right Marie I think you're muted I think you're having the training yeah thanks Tadeh by the way it was great um yeah we're gonna take a 30 minute break and then come back for the last two sessions of the day reminder to leave us feedback in the ether pad at the bottom about your experience the event and we'll be sharing the survey at the end of the day so we're gonna take a quick break thanks all bye let's see here it's maybe working can you tell if it's working on your side I think it's working um because I just went on to the youtube so it's up there I'm just waiting for the element to catch up okay yeah I see it there okay let me put this honestly it does not like sharing this um this image I think because that's what crashed chrome for me the last time I tried but let's try it again hey what up all right Madeline you ready here we go I'm not muted this time hey Seth they might not know that we admitted to the lobby from the lobby that's true hi Seth also I checked um during the break and it's snowing here too oh like really big fat flakes so it's a wonder list same it's kind of gotten a little bit calmer here now which is nice no snow no shoveling in my future near future hey Seth can you hear us I'm guessing no yeah I'm here here we can hear you nice like yeah we can't see you yet or I can't yes you can hear them can you hear both my voice in the music yeah uh no I don't hear music yet that's not good especially when ones talk is a little music related yeah I do have a work around it was working on another jitzy instance so I'm not sure why it's not working here let me do this here we go I think maybe no unless it's very quiet no it's quite loud I mean I can hear that but I don't know if that's your work around I can barely hear you what were you hearing like were you did it sound like you were just hearing it from my headphones quite possibly it was like a rhythmic sound but pretty quiet okay yeah is there something I could do in the settings to yeah I don't know it was very much working on my test jitzy instance so I'm not sure why I have everything set to let me try one more thing hold on I'm gonna no I can't do that you could turn it off and on again always a good choice yeah it's not working though I have the thought of like restarting the jitzy room to see if that would clear it up could try that let me we can hear that yeah oh you can can you hear my voice yep okay great you might have to turn the music down just a little bit yeah a little bit okay yeah I have it really low but I'll trust you how is that better that's perfect yeah okay yeah yep and the chat the chat agrees oh okay all right so we'll let you jump into it do you want us to hold questions to the end um how would the questions come across through audio or through uh text through audio like uh Madeline's going to moderate them for you so we can either wait till the end or we could jump in I'm fine with being asked on the spot yeah oh wait wait I need to share my screen too but yeah we okay start okay cool take it away so cool uh let's see let me just share my screen there we go okay hey everybody uh I'm Seth Kinlan or Clatu online and I'm gonna talk about LMMS which I forget what that stands for it used to stand for Linux Multimedia Studio I think they might have changed it to something a little bit more generic now but it's a music making software uh and there's a couple of different ways to make music on open source there's a lot of great ways one way is LMMS that's probably geared more towards people who are um used to inputs that are digital like if you grew up with or if you cut your musical chops with uh drum machines and sequencers then LMMS is going to appeal to you or samplers whereas if you're classically trained and you're trying to do musical scores you're probably gonna want to look at like muse score or something like that if you want to kind of combine the two or get sort of that digital audio workstation experience like you would with uh pro tools or logic or something like that then you might want to look at our door ar do you are this talk is about LMMS so that's that's what we're doing uh the LMMS application I'll just get a actually I won't get a new everything's working now so I'll just stay where I am the LMMS application is a single window and within that window there's a bunch of little windows and that can be a little bit disorienting sometimes because you feel like you maybe are running out of um screen space or something like that but but it's you've got plenty of room you can move windows around and just scroll down so you've got is just pretend like it's a desktop inside of your desktop and that's that's just the sort of the interface that they've gone with um so I'll give a quick overview of the workspace here and then we'll just talk we'll just get right into it so over here on the left you've got tabs containing all of the different assets the media assets that LMMS ships with and that's one of the big advantages with LMMS if you've ever had if you've ever tried to make music uh on any system then you know that half the battle is just assembling all of the stuff that you need like soft synths and um uh samples and uh sound files and loops that was the word I was looking for uh LMMS has a bunch of that stuff already included so if you want something to make noise with then you you can just get LMMS and it'll come with a bunch of things built in now you can if you're if you're a fan of just jumping in and fiddling around with synths you can use the instrument plug-ins on the left and find a bunch of different synthesizer soft synths uh included that you can start messing around with if you're kind of new to this whole thing you might instead want to look at I think it's called my presets over here on the left my presets and that comes with a bunch of presets that someone has already figured out for you so um that's handy there's also general uh yeah samples and this is kind of nice as well so there's uh just single single sounds that you can then trigger in for instance sort of a drum machine interface so I sometimes find it's easiest to start with something rhythmic because uh that's a really simple kind of like almost a fire and forget sort of interface you can just kind of mess around and come up with something kind of cool so that's where this window and this is your main sort of your main work window didn't need to open that uh this is your main work window the song editor so as I said this is um sorry this is uh this is a window inside of a window that's on your desktop so this is this is a window within an lmms and you can see that there's some familiar buttons here up the in the top left there's a play and a stop and then there's a bunch of other buttons that we'll get into in a minute and then down here along the along the left uh is sort of a track listing so in this case uh you've got you've got sort of a what they call the beaten baseline editor and that's what you were hearing uh at the beginning of the of the of the talk I think is just some sounds that I entered in so I'm going to remove these things or actually I can just deactivate I can deactivate them with these little little lights on the side I can just mute them so now if essentially I've got an empty got an empty project so to start out I would suggest adding a beat and baseline and that's this button here third from the left add beat baseline and that's going to add a selection here on the left here we go so now I've got a new beat baseline number two you could name it something better uh or you can leave it uh as is I meant to rename it guess you can't rename the beat and baseline if you click on it though you you see that it's opening the beat and baseline editor then all you have to do is find a sound that you want in your sequence so you can kind of audition sounds just by clicking on them they'll play lots of different sounds I'm going to go with something percussive that's percussive so you can just click and drag an instrument into your baseline now you've got this dong o2 file and if you click there and start playing you get sound you can add more sounds to it kind of see how that changes the the rhythm grab another one and add that into here look around over here in the in the left there's lots of different things to play around with so you've got lots of different drum synths let's take a classic tv 303 add a kick drum why not grab a snare add that into there and you've got a little baseline and a beat that's so cool um we got our first question okay which is does lms support plugins from other sources such as vst lv2 clap etc it does support lv2 and ladspa i've never looked into vst to be honest i i i never amassed a collection of vst so i've i've really never gone down that path um i i believe that there's an lv2 vst plugin like a host i could be making that up so i don't know i'm not sure if there's direct vst support that's a great question super obvious that i probably should have looked up before we're just stealing the information you already have from your brain more than enough yeah cool um okay so the bassin the beat and baseline exists we've got a little little song here um but it doesn't sort of exist in our song yet uh so the song needs to be sequenced the same way that the beat and the baseline is sequenced so in other words for my song to contain what we just heard i have to just left click in my little timeline here there on the first on the first bar of my song and now i should be able to press play we'll hear that exactly one time well if i turn off loop we'll hear it exactly one time but i could then because now that that sequence is programmed into this beat and baseline so i can fill in a bunch of more iterations of that if i want to and then we've got a pretty repetitious little baseline there but that's a start right so next let's assume that we are getting a little bit more adventurous and we decide that we want to take a makes make some some sort of musical sounds of some sort and that again you can use the plugins from from over here on the left from the sense and just kind of explore the sense which um which is fine and now i'm looking really quick just just see if there's like a plugin here for vst host i don't i don't think there is no okay that doesn't mean that doesn't support it it's just not it's not here um so yeah so you could do that or um what i would suggest if again if you're kind of new to all this and you don't know where to start with a synth uh just go to my presets over here on the left and here are a bunch of different presets for the plugins that you see in the instrument plugins so these presets are based around what's available in the in the uh plugin list uh and so my favorite is in add sub effects it's an amazing synthesizer i'm going to go down to the mysterious banks and again you can i think you can yeah you can audition the sounds just by kind of clicking and holding on them i mean there's a lot as you can see so i'll grab that one that sounds kind of nice ethereal ethereal uh dump that over into my my track so this is my song my my song editor here it's different from your beat and bass editor but similar in concept so you can just drag and drop things right into the left uh column and if i am lucky no okay so there's a couple of different ways to uh enter music into lmms this this whole concept is based kind of around the same basic idea as what we just did with the beat the beat and bass line so if i click on the icon uh the uh synth icon next to the name of the track i'll get a little interface for this synth so this is the synthesizer and there's a bunch of knobs and dials that you can twiddle and fiddle with lots of different options here and it can be frankly a little bit overwhelming but um it's also really cool uh so there's a little virtual keyboard here that you can just kind of play around on to audition more notes um but if you have like a i don't know what's on screen so i'll just if you have like a a keyboard interface usb interface you should be able to marry that up to lmms pretty easily we'll see if it works uh right now so over here in the in the plugin there's the uh midi settings little keyboard icon click on that you have to enable midi input and then click on the keyboard to select which midi input you want to use for this plugin uh there's always going to be a couple of um sort of dummy ones there's a system timer that keeps keeps all the midi stuff uh on the same in the same timing there's a system announce which i assume announces a new midi device and there's a through port which we don't need for this uh so this i happen to know is this device so i'll select that and then ideally oh it worked um so you can manually play stuff into lmms of course it's not recording that you're just you're just playing it so i'll move that over there to actually sequence sounds to make to make this do something i mean you can just you can play and then you can just play along with with the the beat that you created but probably you want to sequence this you don't want everything to be a live performance so to do that it's the same kind of concept as adding a bass and a beat a beat in a bass line except you're you're adding essentially an empty an empty sequence so i clicked on it you can probably see that it's gray rather than bright blue that's because it's empty so now if i click on that again if i double click on it uh i get this and if you've ever if you've ever made music on a computer back in the 90s especially then you would know uh you know this this is the piano roll editor here's the keyboard over on the side i i can hear i can hear that but it's very soft i don't know if you guys can hear it probably not um but that's that's the uh keyboard and as long as you're in the pencil editing mode the draw mode you can add notes i think it sounded like those sounds that i put into the bass line were around a g so we'll do uh maybe a yeah we'll do g because it's a pad so we'll just make it kind of long um i'm gonna go down here to the bottom to adjust the sort of the volume of the note and just turn up that velocity uh all the way so now i've got one note that lasts two bars and now as you can see this little container that i had sort of reserved space for has filled up as a green bar meaning that it contains midi data rather than sequenced drum data and now i should be able to play we will hear both i don't know how loud i guess i could turn up the synth a little bit more even let's see what happens still very soft but yeah i can make it louder but i could go in and make it louder in the synth um interface i kind of don't want to mess up that sound right now so i'm going to leave it at that so it'll just be soft synth right now i guess a soft pad over clangs and drums probably wasn't the wisest choice um but there is a mixer i don't know how to get there so i usually just go to um view and uh affects mixer um so let's see what should i affect first i guess i could affect the synth first uh so currently i have two effects because i had already had data in in this uh sequence but i can create a new effect by clicking the big plus button that creates an effect track so now we're routing we're creating a space in lmms where we can add sound effect or rather effects plugins nothing is going to this space yet we're just creating the space there's a lot of that in lmms where you're creating something that is empty until you put something into it whether it's a beat and baseline whether it's a uh a synth sequence whether it's an effect so that's a lot very often that's the workflow is create the empty thing and then put something into it or route something to it so in this case i've created an effects an effects channel effects three and i'm and it's empty right now but there's a space for an effects chain so i'm going to add an effect into this chain then i'm going to look for something uh to boost something uh or maybe just add gain really let's see is there no gain no how about maximizer yeah that would work um yeah let's just do uh let's do this booster here so i'm going to say okay to that and now you can kind of see that i've got a little effects unit here don't know if this is really what i wanted um once again clicking on control just like on a synthesizer it kind of gives you your your full view of the controls and now for my synth i want to send my synthesizer which is still too soft through effects channel three because i'm i'm going to try to to to hear it better so to do that click on the little gear icon and as you can see every track every track in your song sequencer has the opportunity to be assigned to either an effects channel or to a MIDI channel we've already done that of course because we were playing on the keyboard but for the effects we could say yeah i want to send this track to effects channel three oops there you go um so we've just sent this to effects channel three so ideally i should be able to to boost this gain a little bit we'll see we'll see how well it does i think i'm sending too much to that effects channel actually no it's okay all right yeah this isn't really doing what i wanted to do but that's fine i can definitely hear everything clear i think i'll probably deactivate that though that's a little bit loud uh we could create one though uh for for instance get rid of that let's do an echo effect on the drums instead that's usually an interesting effect okay so here's uh an echo effect ideally on the drums we'll do it to the snare i think effects channel three so you can hear that how the snare was all of a sudden echoing so lots of different effects there's echo effects there's reverb effects and so on actually gonna remove those i think so that's beaten bass line it's a synth uh there's also samples included in lms so we've already kind of drawn from some of them for the beaten bass line but there's also samples for for various sound effects and instruments sample all of those by just clicking on them but possibly one of the the more fun way of getting like really sort of unique instruments into lmms are through sound fonts or or sample libraries so there's a couple of different uh ways to do that i've got a bunch of sound fonts that i use but there is a sample it's not that one there's a sample there's a giga sample um plugin as well i think maybe not um but i just use sound fonts sound fonts are very cool they're really tiny slivers of of of samples that you can load into um into a sampler and sort of play as if though it was a full a full synthesizer and i should be should be explaining what i'm doing as i do it so again i've gone up to the to the instrument plugins i've located the sound font file sampler and then clicked on the the track that i've assigned it to in order to get to get the interface that's the typical workflow of adding any instrument into your lmms song you're going to drag it from your asset list into the track list and then you're going to click on it to see the actual interface the interfaces are going to be different depending on what kind of instrument it is so for instance a sound font is designed to load a specific file into into the little sampler let's get something interesting in here um well there's a sitar that's it's different now i don't think this is assigned to my midi device yet so if i go to the keyboard enable in input and assign my midi device nothing happens i could either assign it to a different channel of my midi device but then i'd have to go back over to my midi device and reassign it so i think what i'll have to do probably is tell this one to let go of the midi device and maybe i'll get lucky and then that'll make this see my midi device not today well generally that's how i would assign this to my midi device i'm not sure why that's not working right now but um ah there you go maybe it is sensing the midi device i guess it's just not it's not gonna play it for me today but that's um that's a sound font and uh there are a bunch of different ones out there a little bit difficult to find these days because they've fallen out of favor for actual sample files but i i quite like them because they are very small but again just because this is a sample file or a sound font file on the hard drive it doesn't mean that it's you can treat it because it's being loaded into this this plugin you can you essentially treat it just like a synthesizer so to add to add a a sequence with this you would simply go to the track where where that instrument lives click to create a space for it double click to open up the the editor and then you can draw that's gotta be the wrong nope that is the right one i'm not sure why i'm getting the wrong sound in that track that is very unusual this is demo magic um no that's the correct one okay i thought that was the other pad cool okay so it's just very loud right now there we go there you go um okay so talking about the the little editor here when you're drawing sounds into this uh the piano roll as long as you're in the draw mode the pencil you can click create notes seems very loud to me hopefully that's not as loud as it sounds in my headphones um if you click and hold and you can change the position you can change the length by sort of hovering over the the edge making it longer or shorter and to delete you go up here to your toolbar and get the erase mode and just click on it to get rid of it that's different than how you delete something from your song editor in your song editor for whatever reason it's the middle mouse button to erase or rather to remove a block so if you don't want to start with a drum beat maybe then i can middle click on it to remove it then i've got just the an opener with the synth and then we'll go into the drums sound editor also has down at the bottom or the piano roll rather has down at the bottom the note velocity which i was trying to use with the other synth that was uh too quiet uh so i was commenting that this seemed very uh loud to me so i can bring that down just by kind of dragging those down they're just little little um levels so that's quiet maybe i wanted to get louder over as they play and we're just hearing that bar right now because well first of all that's the only bar that exists um but it's also because i'm in the piano roll editor so when you're in piano roll you're not listening to the whole sound you're just listening to your little sequence here within the piano roll and this can be as long as you want like maybe i don't want to stop there or maybe i want to uh do a note here so now the length of my full sequence or my full uh piano roll is two bars in my song editor rather than just the one and that's okay and depending on your sort of theory of of how you're composing this you can create a fresh uh piano roll within your song or if this if this is sort of like one segment to you then you could uh just continue on with this and now you've got a four bar piano roll even though your beat and bass line is just the one bar okay so another important thing about music is the tempo uh we've been playing everything at 170 beats per minute so that's the tempo of this song and it's a little bit i guess on the fast side maybe um so you can adjust that here just scrolling down slow it down quite a lot and that comes into play uh pretty significantly if you're using loops and loops is another way to i mean you you can create your own loops which is what we've done with the the beat and the bass line like that's a loop that we've created essentially we've we've programmed in one one bar of of a drum beat and we're just looping it over and over and over and over again in our song but you can also hunt down um loops on the internet they places sell them in packs of like you know 500 loops of really really nicely done um pre-made beats and sometimes uh even bits of songs and then you can just string them together so uh there's a couple of different ways to do that let's see if i remember any of them uh today i haven't done it in a while um but if we go to uh a place where we have our loops kept and you can also keep them within your lmms file like it doesn't have to be uh it can be anywhere it's arguably better to keep it within within your lmms asset sort of library um and they do have they have space for you to do that so you could drop these things into there i have not done that because i just don't use them that often but um let's see let's find some something loopable um and even better something with beats per minute specified that would be really useful okay here's a a tenor sax loop that says it's uh 90 bpm so and it even gives us the key d minor uh so i've got some loops here so i could just uh nope okay that's right so i go to um audiophile processor drag that into my track no i'm thinking of a different a different plugin here we go my samples okay so in your lmms directory there's a space for samples you might not have an lmms directory yet because uh you may not have ever opened lmms but once you do you you get one and then you've got a samples directory from there you can drag in loops or uh yeah loops samples that you want to use in your compositions but i guess it would have been better uh here we go refresh there we go okay so i've refreshed um so that it picks up my new additions now i've got all my loops and to hear that i'm just clicking and holding the mouse button and apparently that's 90 um that's 90 beats per minute so i can drag that loop again over to the left hand side of the lmms window it becomes a track just like everything else and then of course we know that all we have to do to make it appear is is click okay so i'll sort of drag this after my synth because i have no idea what keo is in for the synths uh so i'll have i'll have that come in maybe i don't know let's do let's do a little bit of a cushion uh and then we'll see what this sounds like so needed to extend that uh most samples we'll we'll sort of tell you how many how many beats they are now that was at 140 um 140 beats per minute so if we wanted to conform to what it claims it is we can knock it down to 90 it's going to be kind of slow but those are loops and you can you know i mean there are drum loops and things like that that will tell you exactly what beats per minute you need to set them to and then you'll have a a pre-made loop that is probably usually like one bar that you can then plug into your um lmms sequence okay so that's the basics of lmms um to then get your song out of lmms uh you can export from the file menu you can export it as wave aug or mp3 i usually go out as wave um just so that i can then compress it the way that i want to uh into whatever formats i want you get a lot of different options in terms of what you how you want to export it this is significant especially if you are designing your own loops um you can select to export it as a loop so that you don't you don't get any of the space like if there's an echo effect or something like that you don't get that hanging off the end you get just the just the the part of the part of your sequence that you've programmed in you get that exactly um so you can do that you can also uh tell it to only export where you've marked it to loop uh sample rate and so on so we'll just do that it can take a while if it's a full full length you know three minute four minute 20 minute song with a bunch of effects it it can take a little bit but uh yeah it exports as a file that you can then send to everyone uh again one of the nice things about lmms is that once you've worked on something then everything is contained within um within this file so you don't have to keep track of uh well even your samples at this point because we dragged our samples into the sample directory of lmms uh all your projects by default to get saved to your lmms directory all of your synths that you've used they exist within lmms so you're not going to open up your your sound file uh three years from now and realize that you forgot to install uh the zen add some effects synth because you may have but it's already in lmms so you'll be able to you still have access to it um on other audio programs a lot of times that's not how it is you you have to kind of manage all of your assets and your soft synths and your effects and all of those things you kind of have to add uh to your system external of the application which i mean there's a lot of flexibility there but lmms uh just keeps it all bundled in one place and and you never have to think about it i think that's probably everything to be honest i think that's everything i can think of to do as an intro to lmms uh are there any questions that was such an informative and really amazing talk um so thank you so much i don't think any questions have come in just yet but another stream will catch up to us i would say just generally in absence of questions um generally if if if this is you know if you've never messed around with music applications before uh you don't need you know a controller i mean you can you can you can do everything within lmms within the piano roll editor or the beaten baseline editor and i i really feel like at least for me maybe um starting with a beat in a baseline is the easiest way to go and there's a surprising amount of stuff that you can do just by looking through the um the my samples bit of this you can find all kinds of weird sounds uh some of them musical some of them less musical but you can sequence them in the bass the bass and beat line and just come up with something that repeats and sort of has rhythm and then if you get more adventurous you can add to it with with maybe an instrument or two so i feel kind of like that's maybe one of the starting places if you have no idea where to start and and that is kind of the lmms method is kind of like building up sort of a sequence by just piling on more and more self-contained loops it's very much like an akai in pc 2000 from the early 2000s it's patches that you then just kind of layer over on top of each other until you end up with a song yeah it's like any project it has to yeah yeah um some questions have come in um and the first one is what's your favorite piece of music you've made using lmms and can we hear it why yes um person who maybe i planted into this audience almost i didn't but thanks for asking if you go to um c e t x dot bandcamp dot com um you can download my album uh that i did almost entirely on lmms um it's called regal there's i don't know six or eight tracks or something it's really weird music just prepare yourself for that um but that is it does exist um but probably for more like even maybe arguably um an easier listen uh there is there is trying to get my music player up probably screw up all my sound while i'm at it um there is there's an album like there are albums by um by lmms like itself like they they contributors put out albums i have it and i if i could get my music player to come up right now i would but yeah best of lmms um there's a bunch of yet apparently there's nine of them at the very least and there's some amazing stuff on there yeah yeah the different styles that people have yeah yeah i could just oh wait there there are other ways to access this on my hard drive i know well while you find that um there's one easy question which is how long have you been messing around in the music world um longer than it seems from me stumbling around forgetting how to do stuff um probably about 10 10 12 15 years well no a long time 20 years i started out on elesis uh mmt 8 and hr 16 uh rollins um not not the tb 303 there was another one r b b t 303 something like that br 303 um akai mpc 2000 lots of hardware imu imu um emacs to the um yeah there were lots of hardware synthesizers that i used to have and then once i got around to uh discovering all that stuff on all the software stuff on linux it was just like why am i carrying around these 70 pound synthesizers so yeah um this is lmms not mine i'm not sure we can hear it i can hear it very softly like very softly oh right you can't hear it because it's not piped into the thing yeah well maybe we can we can drop some later but i think yeah yeah it's yeah it's it's uh it's an amazing application there if you listen to the lmms community albums you will you'll be wowed i am all the time yeah honestly um second to last question is are there any generative or probabilistic functions for say note or velocity info yeah um yes um okay so there's sort of i mean you'd have to invent it yourself i guess but i mean there is an automation track so uh you can um you can do weird things with inputs um all over the place but how it's not really sort of like it's not tied to anything specific so but but yes uh you can you can automate all kinds of different aspects of your music it's all tied to midi input so it has to be a valid midi attribute as far as i know i shouldn't say it has to be as far as i know it has to be a valid midi attribute so i guess in that sense yes you can you can do things but that's not exactly like randomized but you know i mean a good effect too like there's there's all kinds of weird effects that you could add so i don't know i yes and no i guess that there is there is some ability to to have the computer mess around or to to make feedback loops through the effects channels to then affect the thing that you're hearing but whether that's what the question was really asking i'm not sure i mean yeah um and then do you have any fully sequenced songs that you could show that you some of the more advanced sequencing techniques um i don't think i do on my hard drive right now uh it would be it would be um have it would have been archived by now so yeah not not yeah that's something that i probably could have could have thought to have so no is the short answer and last but not least um have you ever worked on trackers i can see some parallels to the workflow absolutely yeah like milky tracker or um yeah those those ones yeah absolutely there's a real similarity here so if you're you if you again sort of like got used to trackers at any point it's not dissimilar for sure and you could kind of think of it in in that way especially especially if you do if you do things like in the the beat in the baseline editor i mean you're just yeah triggering sounds so yeah there's yeah it's i think it's perfect if you're used to trackers i think you would fall into lmms really easily cool well i think those are all of our questions so far which is perfectly on time um right people in the comments that you know live demos are destined to be difficult and yes you know you're thinking on the fly and i think it just goes to show how um comfortable you are with the program i mean you know we can all get there one day of a huge jam session but um yeah yeah so much so um cool hi malt we are leaving you in the lobby but let me know if you can hear me hello hi hi we can hear you cool i think um i think it's just me i think marie it's probably um busy fixing something always things going on with the stream okay this is confusing i'm hearing myself twice with a delay in the matrix do you have the stream open somewhere yes let me mute that let me guess it's like my own thoughts like out of the brain perfect you're our last you're our last talk for for day one free software and open data standards and architecture engineering and construction so um if you are ready i can turn my camera off and let you take take it away um sure let's do that let's go would you prefer for questions to be answered all at the end or throughout whatever works best uh whatever whatever yeah throughout throughout okay um absolutely fine cool then i am excited to hear all about it okay cool i'm sharing my screen and so hopefully people can see this and this uh inception of streams happening right now i've prepared a couple slides just the beginning just for an intro because i'm uh people watching this might not be an architect an engineer or work in construction um that might not be familiar with the open software uh free software and open source software and open data standards that we use so i guess let's get started here um i guess it's not new uh free software being used in design engineering and construction this is an example of the wiki lab project done by free cad there's also the wiki house project where they take uh uh they basically open source their designs for building a house and um their software like free cad the software like q-cad and leber cad which do 2d drafting but today i want to talk about something a little bit different and i'll be focusing on blender so blender as you know it's kind of like the um the show child of of uh of the cg free software world you know it's a huge success it's made a big difference in the world and i'd like to talk not about uh smaller scale projects but on uh larger scale uh projects you know something on the scale of something like this and so this picture that i'm showing you uh was created with blender and this is by an architect called demitar and although it looks kind of space age and something out of a computer game uh demitar actually works at very big architectural firms and actually uses blender heavily in the concept design of uh many of the large projects that you might see when you're walking down the road in your city centers things like large skyscrapers hospitals um train stations large retail shopping centers um residential towers and so on so even though this might look like something out of a game i just want to say that there's actually a little more it's a bit more grounded than you might think it is and today i want to go a bit past this concept design because it's very easy to imagine tools like blender being used for this concept and architectural visualization stage but i'd like to talk about what if blender was used whoops sorry on something a bit more like this if my screen would go to it there we go um something that looks a little bit more like this and what what you might not realize is that all of these architectural drawings which is something that an architect might submit to cancel and they do because all of these drawings are by a firm called opening design was actually created by blender and so things like line weights and pen thicknesses and fill colors and and strokes and architectural symbols and engineering symbols placed on plans with scales this is actually all produced by blender and today in the demo that i'll be giving i'd like to show you exactly how this type of stuff is created with uh with blender which is probably not created for that purpose but uh now surprise it can do that type of stuff and to stretch this a little bit further not just uh technical drawings can be produced with blender uh something like this can actually also be produced by blender now uh or at least through the blender interface so um when we talk about using free software in engineering construction it's not just the the 3d shapes of buildings or the 2d drawings of buildings and the renders of buildings it's also things like construction scheduling you know the start dates and end dates of various construction tasks the relationships tasks have which uh with one another as well as uh resources that they use and the costs associated with those resources and their productivity rates and so on so it's just i'm just hoping to lay the foundation here that it goes a little bit broader than just design work so here's a project that i actually worked on quite a while many years ago and just to set the the scale of the products that i'm talking about this is about 30 000 square meters and it's got about six apartment towers and a big retail shopping center and blender was actually used in its design so a lot of the the fancy facade forms that you can see here this kind of weird faceted facade uh was designed with blender um and was what was used to submit to the early council uh for many of the street elevations and so on uh but more than that in fact one of the things that blender was used for was the solar analysis so for example in australia all these apartment towers there are certain rules that throughout the year you need at least a certain number of hours of daylight access or sunlight access and a certain percentage of apartments need to have this much of sunlight and so on and so blender was actually used in that analysis and that um and so it's not just about creating these kind of funky forms that can be used in that aspect as well and i guess to push it a little bit further this is a more recent project this is a train station currently under construction in sydney this is just north of the harbour bridge in the opera house and uh this one's pretty fascinating because blender was used in in a in a few aspects in this project as well and it was actually used for producing and auditing the asset registers for facility management which is something that you know it's probably not advertised on the blender.org homepage um but it's uh something to think about you know when you when you start walking around your built environment you might say hold on you know what free software was actually used and what goes into uh the engineering and the construction and maintenance of a of a facility like this i think that's an interesting thought and um now kind of pushing it even further out there uh this uh incredible picture is actually of the hinkley point c nuclear power plant which is being constructed in the uk right now and in in the foreground you can see big carl that's the largest construction crane in the world and and kind of you guessed it because it's in this talk um blender was actually used in this project as well and it's used for all sorts of things it's being used for earthworks modeling it's being used for uh fixing laser scan meshes it's been used for health and safety visualization or recreating incidents fire escape plans or method statement videos and construction planning similar to that kind of gantt chart type uh aspect that was shown before uh in we call it 4d in in the industry it's being used for quantity takeoff and concrete pour modeling so there's a huge um number of use cases for free software out there which probably go unnoticed by the general public uh but it's like it's pretty cool to share um and there are a lot more examples um but i guess the ones i'm showing today are the ones that are more publicly known that's why i can show them um but for example uh in in my day job i work on many large projects and i can tell you that every day uh tools like blender are in my toolkit so uh that's really exciting and the reason all this happens is because of these three words is something known as building information modeling and uh the best way to describe this is that this is how we digitally describe our built environment so in the same way that the computer graphics world describes the world using objects and meshes uh with materials and uh textures and scene graphs and compositing and shaders and those types of concepts you know animation keyframes they use those types of concepts when we want to digitally describe our built environment we have things like products you know we have uh walls we have doors windows we have valves we have pumps we have chillers uh we also have locations we have rooms and stories and buildings and roads and tunnels and so on we also have not just not colors but physical materials so things like uh timber or concrete or steel aluminium but then we also have non uh physical things we have things like construction tasks we have things like lag time relationships we have things like people you know who are the warrantors who are their suppliers who are the manufacturers who are the occupants of the building who are the people leasing the building we have work orders we have construction tasks you know what's going to be built when we have maintenance tasks what's going to be maintained when it's almost like your calendar software you know it has all those entities as well um so when we talk about building information modeling uh we're not just replacing CAD and CAM software uh so the proprietary equivalents would be things like AutoCAD or Autodesk Revit or Graphisoft Archicad we're also talking about things like Microsoft Project which Project Planning or Asta Power Project or or Primavera 6 by Oracle or Costex you know these are all other big software that's that's big proprietary software uh that the free software world is slowly catching up on uh in a more tailored way to our built environment so here's what it kind of looks like in Blender because you know a picture speaks a thousand words and here is a combination of various things you can see in green you have the the mechanical parts that make up a building so we have ducks and vents and grills and and and VAVs and things like that and then we have all this blue stuff which is your hydraulic engineers design which do your hot and cold water and your your storm water drainage and your sewers and your stuff like that and your uh sanitary where so your basins your your toilets and your showers and stuff like that and then you also have your fire engineering things like sprinklers and um fire extinguishers and uh whip panels and so on and and mimic panels and then you have your electrical all your lights um all your cable trays and all your power sources your distribution boards and then of course you go back to the architect you have all your walls doors windows and all the things everybody sees every day uh and your spaces and your structural engineers your columns your beams and so on and it looks a little bit like this and um we'll dig into this interface into quite a bit and this what i'll be demoing today is a software known as the blender been mad on um which is an add-on to blender like the name suggests which uh completely uh overhauls blender to be something that is able to read this building information modeling data and is able to edit it and the full set of capabilities is kind of described in these eight panels here uh where you can kind of open this building information modeling data um you can create it you can create drawings from it and then you can do various things for each discipline whether it comes from structural analysis right through to operating your building so let's get started live demo time and the really exciting thing we have for you today that the blender been mad on is alpha software and this is a live demo so when you put both of those together things will go wrong so I will try my best and occasionally I will flick through over here um for any questions okay nothing yet so this is actually uh the same model that I showed earlier on and this is typically what happens uh in the industry we tend to have multiple models that make up a building each model is produced by a different consultant or subcontractor that's responsible for uh either designing or installing or both um a trade or or an aspect of your building so they call the mechanical services in your building and all of that will be combined to create this federated model that describes your your building and um this is kind of the the next evolution from 2d drawings from 3d models we now have many combined 3d models and more than that each one of these 3d models actually contains data so in this other screen I've got a mechanical model loaded up here and you can see that we have hfac over there and these big uh boxes you see are actually spaces so rooms which is pretty important for mechanical engineers so they might want to know the volume of the air for example they might want to know for maintenance purposes what room a piece of equipment is in so if I jump into my uh object confirmation you can see that this room actually contains a little bit of data some of it's useful some of it's not useful uh so if we can see we have our zone name and and uh category over here uh that's zoning the spaces the rest is not particularly useful over here uh so that we'll select all the spaces and we'll just zoom into what we can see so this object I've selected here is a a segment of a duct and again you can see the data of that particular duct segment and it's um like unfortunately in this case the data is not particularly rich and this is because this is some free sample model if I uh you can find online I won't be showing any proprietary models and the industry is very proprietary today um and duct segments are not that exciting anyway but at least we can see there is a length to it and this flow looks completely untrustworthy to me um and there is some sort of categorization of the type of object that it is um there's no quantification of this duct which is probably okay if we take a look at something more interesting like this like the ceiling exhaust uh you can see our grill grill misspelled length and with a certain type of code that was probably used in the documentation somewhere and if we scroll down further uh we may find let's see um here we are the the model reference which will probably be used to um uh it's just specified to the manufacturer or you can think of this as a model number interestingly they don't have the the manufacturer here maybe I missed it so so this might give you a bit of an idea of the type of models that are being created about the buildings that that are around us so now I guess let's try to um I'll just quickly go through some of the other things you can see here things like the type of geometry and materials that are created from this actually this is very interesting I think I might show you some systems so naturally all of these are part of distribution systems like supply air or return air so you can hopefully see here that this is actually sucking up air and bringing up air out over here so it's not just we drew a box you know we drew a cylinder they actually have data that connects this box to that segment that segment to that bend and so on so you can go and trace the directionality of the of the distribution and that's something that a MEP contractor would be taking a look at so we'll just click on a few other distribution systems over here this is part of mechanical supply air number eight which is probably not the best system name but it does give you an idea okay so let's create one from scratch so here I am in the blend of imadon I'm going to go file new and you can see we've actually replaced the built-in blender new because what we're doing here is that we're not actually working with the blend data anymore we're working with a totally new format and data model known as IFC which is the ISO standard for building information modeling so I'll go file new demo project and what this will do is that it'll just give me a few types a few construction types in my asset library that will make it easier to start creating things so let's say a few types of walls or wall thicknesses like we might have a 100 thick partition wall 100 millimeter thick partition wall which consists of two layers of plasterboard plus metal of wooden studs and or we might have a 300 thick or 200 thick concrete or masonry wall something like that so I can see my different wall thicknesses here just built in as a demo of fairly generic thicknesses good to draw so let's say we choose a 200 thick wall and I can go click add I'll be using the hotkeys here so I might turn on screencast keys nope should have planned this there we go screencast keys great and we can go and set the length of our wall so for example we might make this I don't know 4000 and now this is exactly 4000 and what's gone into drawing this wall is again quite a bit detailed you know it's not just I drew in a box over here it actually knows it's a wall so if I jump over into the object information it knows it's a wall and it knows that that particular wall is of a wall construction type known as wall type wall 200 or it could be wall type a wall type b whatever it is the architect would nominate a series of wall construction types it doesn't have much data because we're just starting off it also knows that it has a certain geometry so what you see here is not a blender mesh even though well it is a blender mesh it's represented in blender but under the hood it's actually described using a extruded profile and this is a definition which is in IFC which is heavily based off step which is then parsed by the open cascade geometry kernel and this is a big question that people have they say oh blender can't be used for CAD but actually if you kind of replace blender meshes you can you know so it's actually being parsed here by open cascade and I'll just take a brief glance over here into this debug panel you can think of this as the the web inspector and if I inspect that object and kind of zoom into this make it a bit easier this is the raw data that defines that so under the hood there's this kind of graph object database that defines this wall and so the wall's representation or or geometry you can see it has two associated geometries this kind of 2d curve as well as an extrusion and this extrusion is defined as an extrusion which is along this vector of this magnitude of 3000 millimeters which has which extrudes a closed profile which is defined by this poly curve of these points over here so there's quite a bit involved under the hood of course this is like the developer debug section but but that's kind of what's happening under the hood so I hope that was interesting thing anyway let's continue drawing these walls so now I won't pay too much attention um to to accuracy or anything and you'll notice that when I join these walls like this this wall is joined to here and this wall is joined there I'm not just placing boxes next to one another if I go down under geometric relationships it knows that this wall is connected at its start and its end and this is important because then when I move this wall for example uh the other walls know it's meant to be joined to that and it snaps to it and this is all part of the iso standard of how um walls are meant to have relationships with other walls so let me just continue oops so let's cut that short um Deon just as we're getting into the last kind of 10 minutes um I have a few questions coming in um do you mind if I start asking them or would you go ahead yeah okay how have the tools changed since you've been involved do you think open source software is set to overtake some of the bigger established names asks our first person um so back when I first started there's absolutely no way to do bin modeling very well on linux for example uh we had free cad which is kind of pioneering things at the time uh but definitely the support for the IFC was very very poor since then you know we've we've made leaps and strides but we're still at its infancy this is still alpha software there are only a small handful of firms which are using it from end to end production of design drawings but at the same time there are an increasing amount of really really large companies they're not using it from beginning to end to deliver their products but they're using it here and there kind of like those examples I gave at the beginning of that nuclear power plant or these train stations or these big retail and residential developments so I would say that we're far from where the proprietary software are but we're quickly catching up in two ways from the grassroots of small firms doing end to end and then the large companies as well yeah that's very interesting to see um our next question is what's your vision for the future of free software and open standards in architecture slash engineering and construction and you know what are some of the potential barriers to that vision of yours becoming a reality yeah so I think um on a practical note we are miss we have a lot of weaknesses right now there's a lot of things that free software doesn't do very well um so for example we have we struggle a lot with performance so it's totally fine when you're dealing with a small building um and we're starting to inch into mid medium level development um like small retail fitouts and and retail designs office fitouts uh but definitely for large projects like a hospital um we have performance issues when dealing with the graph that represents uh all all of this all this data or the geometry like blender starts to choke when you throw um 100 000 objects at it and very often a single model on a large project would have anywhere between 10 000 to 100 000 objects per discipline so multiply by that five you might have you know a good 400 000 500 000 elements uh down to every nut and bolt it kind of depends so performance issues is a big issue a drawing generation so a lot of our industry works on drafting so I'll just create a drawing right now real quick um and we can create drawings but the level what's what what's needed to take a drawing um from a simple drawing like I'm about to generate you know that's great it's it's it's it's a fairly simple drawing to a fully detailed uh uh documentation is quite a lot so our drawing tools have a lot to catch up on yeah I guess collaboration is also a big one they're often big teams working on the stuff not sole practitioners so I think uh earlier on today Bruno Basel gave a great talk about that um so hopefully that that's one of the possible solutions of getting this solved sooner rather than later but I think we also have some strengths you know that's important too to note that although we are lacking in feature parity on things like drawings or structural analysis or our MEP modeling like ducks and so on we actually um have some strengths like we are the leading in in this kind of native ISE editing no other proprietary software does this at the moment we're leading in this in the breadth of the standards implementation you know most software they do just structural analysis or just um or or just architectural drawing they don't do cost planning at the same time or construction sequencing whereas all it takes is for me to jump over over here and start creating a work schedule I can start saying that this is my construction plan and nobody quite has that ability uh right now or um I guess another aspect is the kind of modularity we're very cross-platform we work across a lot of stacks everything you see here can be accessed through uh command line or or Python script and so on yeah that is a big thing I mean it's not really the same but talking with friends who are on mac and like the certain things that are just you can't jailbreak um it it can be super frustrating when you are trying to do something and can't cross-platform it the same way um so I think we've got another um can blender bim geometry and data work with the blender open usd connector um there's probably some integration which will be built sooner or later but I think usd at the moment there's a few problems with usd it's great for the cg world but it's not very appropriate for the construction world so for example the geometry it might use to describe uh our objects are just not suitable you know it's it's heavily mesh focused whereas a structural engineer will really want to know my ibeam has five profiles that or it has a you know has five parameters that define my ibeam and it must be extruded along this axis you know that's the type of thing we're looking at um and and usd just doesn't do that and very well and there's a huge amount of non-geometric data that usd also doesn't do so although there might be a translator written sooner rather than later um I don't think it would ever quite replace the the breadth of um uh this semantics the rich semantics that are in our industry right now of course and then the last question is could you expand on the connection with open cascade kernel with solid nerves and blender mesh geometry um the short answer is that the original geometric definition is in ifc in the domain language of ifc this is then interpreted using a software known as ifc open shell uh that's the underlying software that powers all of this um and then it open shell is a wrapper around open cascade but it also is starting support some other kernels as well which which kind of orchestrates these open cascade commands to then generate the shape um it generates in different ways in an open cascade b-rep form where it can be in a tessellated form um because ifc is heavily based off step so so the the models of open cascade are quite influenced by step uh but in blender we take the tessellated form and we just update the the blender mesh data with that tessellation so literally what you're seeing here are tessellations of the raw geometry so that is a tessellated uh filleted um arc but under the hood it's a true arc you know if i dug in the debug panel it is a true arc if you want to find out more there's a talk uh by thomas krainen at uh fosdem which he'll talk about the details of mixing geometry kernels and the pros and cons of each one oh that sounds like an exciting talk um but i have to say this talk was really amazing um if you have any last minute things that you want to get across i know it's uh two minutes over but you know you are the last talk of the day so any little tidbits of information like feel free to let it out now uh sure yes why not so um i guess this is the website of ifc open shell for all of the um the dev heavy people out there who want all the programming stuff uh for the the user facing side this is the website this blenderbim.org where you can go and play with things and you know access it through the the buttons and so on uh if you want to see a demo because i totally don't have any time today or i was very bad at time planning today uh this youtube video this technical demonstrations uh i'll put it in the chat i guess gives a very condensed demo of almost every feature you can think of you know goes from uh creating models a bit of this stuff that was talked about earlier with git uh generating drawing structural analysis cost schedules fm and so if you skip like the first bit in the last bit it'll it'll give you a very very good overview but it but it plays at like five times the normal speed of somebody using software so it's also a bit overwhelming cool will be able to go back to all my engineering friends and be like i think i know a little more after today get into blender there we go oh this is a beautiful website too we're all of the uh people trying to use more open source in architecture engineering construction hangout okay the link there we go that's it for me thank you so much for your wonderful talk um and thank you all there on the stream and in the element chat fair watching the whole day um it's been such a great start today one of the summit yeah thank you dianne thanks for having me of course yeah it was our pleasure so we're gonna just say a few wrap up things uh for your day one here um as madon was saying thank you so much for everyone who has attended today we have two more days of amazing content yet to come um but really the chat was so engaged and asking so many amazing questions so really just thank you uh to everyone who attended and also to our speakers as we closed out the last day um i found the fedora batch is finally working so if you're waiting to grab your attendee badge make sure to check the link that i sent earlier in the chat um it's also in the hack md widget though i know the widgets were kind of being funky for some people so uh we'll be sure to send that again in the morning and maybe i'll send it again after i get off this call after i get off the call here so definitely grab your badge if you're a fedoren um also we put together an attendee survey so if you think you won't be attending for the next couple days we invite you to fill that out to give us some feedback about how the event experience was for you um we try to do as much as we can with the small team that we have to make it um as pleasant and smooth and experience as possible and we're always looking to improve that experience for everybody um try to think there's anything else that i wanted to say before we close out but i don't think so we'll see you back here tomorrow morning and uh i hope you have a great evening or night or middle of the night depending on where you are right now um and thanks madeline for being an amazing host thank you for being um amazing co-host um and thanks to everyone in the chat who is just saying some funny jokes laughing at the jokes that the speakers were doing because i was laughing and i was like it was just a really great time so i'm excited for the next two days all right folks