 Okay, I shall begin. I'm Tomas Wanger from Collaborative Productivity and I'll talk about custom widget teams Yeah, it's okay So what are the custom widget teams? First I want to talk about a little bit what the widget are themed in a LibreOffice Normally, there are teams with like this native widget framework and we have at least think that it's The the it's called like this. I'm not sure but usually that the widgets are drawn For each back end like a GTK or QT or Windows Mac Inside of the back ends of the VCR so Then there is another one when you have no widget team usually this is like if you don't like Pass these parameters are no and we have equals one and around the LibreOffice and Then the widget will be draw widgets will be drawn by whatever the widgets have by default drawing code and this was like very legacy before the native widget framework was introduced and This is like the widgets look like they are from Windows 95 and So now we have like collaboration online and We want to present the on the browser LibreOffice and And We made it so that the dialogues are like drawn from Taking directly From the LibreOffice core and drawn inside the browser itself and because of that The default look that is There is like no widgets team, so it doesn't have no native look and Of course because we cannot use the and we have back ends in them at all and of course now as As you heard in the morning like from candy and Tor we also have the Online inside of the iOS app and Android app Where we use the Dialogs and we want to team them like they are on the iOS or the Android itself So this is a little bit screenshot. I made how it looks like this is just Online and as you can see like For example, like the tab bar and the every Widgets here is not themed at all and this is not native look or It's not pleasant even for For for users to look at So to to make some additional Team We wanted we created it for For the iOS first and Because we have to solve one of the problems So we have the Ios custom team which we started to make for the at finish which sponsored this work and The idea is something that is suited to for the iOS app we can use it and should mimic the native look of the Ios and Be attractive to the users So the main Look was created by Pedro Silva, which is our UI designer and the Team is now currently at least located in this part and somebody wants to look at it So first I want to show how it all looks like when when it's themed and later I will go into details how we achieve this so as you can see like this is Native Looks like a native iOS application. This is taken from online not from the the actual iOS app so At least the upper border this is don't is just Not there but okay And as you can see this Looks a little bit more native for the eyes And the environment itself so now how How do we create this custom widget teams? Yes so first was to create on like this and WIF like native widget framework has an interface and we just created another instance of Of this native native widget framework a little bit extended so that it can support all of this because this is not Supported from the beginning and now when we have these we the idea was that we want some definition files that Define the the team itself and so one of the The idea is also that we want to have multiple widgets team possible But it wasn't like the priority. But this is something we want to open to feel open that later. We can introduce our own Widget team for online And of course currently currently Which widget team you wanted to To assist pretty pretty much hard-coded and depends on the runtime So if you have if you detect that there is a is we automatically pick the is team currently but it's not something that is Necessarily if we in the future want to change this So for the team definition Of course when you are when you want a Team draw a team you want don't want to do it for each team and inside codes and write it how it should look like should be something that also the designers itself can change and Doesn't need to mess with the code itself So this is why we created the definition for the team and the definition has Defines when to draw something What was the states and which the widgets and how to draw it itself? So this is an example just a part of the the whole definition for the edit books itself and Actually, you can see like draw like edit box and we have edit box part of the edit box There are some widget that has multiple parts And but it's not for the edit box So the value is the entire you define the height and then you have different states like for the edit box You can have like if it's enabled If it's disabled or if it's focused then you can use a different Different svg files to the draw it itself So as I said each team has a definition I define in a definition you define like what are the style and this is mainly colors that are what are the properties and like the behavior of the widget this is mainly like if you want for example In the Mac Mac OS at least There is a possibility to have the Top bar in the middle Which is more normally and but other environments must have thought bar in the left Yeah, so for the widgets we these properties or defining the behavior is exactly This So you can define you can then choose which one for your team is more appropriate And then of course the last is the widget look and feel So so first the stars the colors which this are mostly defined like background color text color border colors and state colors in this Square and they are all of them are listed. So I just put them inside some of these interesting to water exactly is defined there but There are a lot of them and You can define them here, which color they use So for properties as I said already the tab alignment. Yeah, so if it's top in the middle of the left Various margins sizes and a lot of them are currently hard-coded but Maybe they are one or two which you can actually change but in the future we can extend this And then lastly you have look the look and feel This is how the the widget is drawn and As you can see from the example before that you have you have to define for the widget the type the part and the state The type of the widget as they find here I put maybe for for the reference where these all various Possibilities are listed inside the source code. You can check it here and this corresponds to this control type similar to the part part corresponds to the control part and it's in the same Available So a little bit more interested are the states when the states are like you can have it Enabled or disabled. Is it focused? Is it pressed? Is it roll over? Is it selected? does body does button value have some is enabled or Does you see it like in the intermediate state or off and there is an another extra state which is more like Depending on the type of the widget you can put some extra states inside so For example in this one we have like this checkbox and it's like enabled and if it's enabled it's drawn like this and if you have it disabled and Disabled and on It's a little bit different and if you press it It's drawn differently. So this is all the all the states and each one corresponds to different SVG in the end that you will be drawn Of course because you have multiple states states are independent from each other, so you can have it more and There could be that in the definition you have Situation when more of them are valid in this case only the first one is Taken so This is something we Have to be careful so the most interesting is how the the widgets are drawn and for these in the definition we have very simple Simple possibilities like you can draw just a line or you can draw just a Round-track tangle, but mostly this is if you want to a little bit check Which are the bounds of the widget and it's not really good to use it For for actual drawing, but it's just there that you can use it mostly what you want to use it is like the vector definition so SVG and In this case you have actually two possibilities either SVG use SVG as an image or use SVG with special resize algorithm Use SVG as an image In this case This is like Like you would use the SVG file and import it inside the LibreOffice. It will just show show it the Content as is so this is used for like a radio button a checkbox and combo box combo box is More complex widget which has the just one of the parts it is this button with the down arrow. This is the part that is Drawn as an image currently and The the main thing here is that when you resize it or something that you should keep the the same proportions or It's you don't want to resize it at all or only what you want to resize it is if you have a high DPI then you do it double the size or The size by some proportion So so the next is like SVG with special resizing The problem here is that when when we When we want to resize An SVG normally this means that it will proportionally resize it and this is not really good for widgets we want to If if you just look at this example, I don't know if it's Visible, but if you resize it one square and then resize it in just one dimension then the lines become Some some lines are become become bigger and some are like just smaller Just doesn't look right and it's not not Nicely around that anymore So so to overcome these we have to especially treat some SVGs and that they are resized properly and The algorithm is pretty simple here that you just take it the half from one dimension the half of the widget and What is the on the right side of the widget you just apply some? Delta size And then you do the same for the for the other dimension and Then you don't have these problems anymore because you don't Proportionally resize it you resize it so that it keeps the The keeps the shape of the widget itself, so how I Did it is that I had to just use the SG IOS a parser and just took SG is subset which will work for for these kinds which We which are actually needed and then I changed a little bit the parser so that it has this visitor pattern, but it's only used for the code for this SG resizing of the widgets Maybe later we could Change it so that all SAG IO uses the visitor pattern, but this is not currently done yet and after that We create like this draw commands and draw commas is just simple like draw path draw rectangle And apply some properties like which color which stroke or which feel color or how much opacity to it and maybe soon I like at the gradient Support so this will be possible to have gradients and Yeah, but what's very important here is then also the performance and how we cash did these things when we Write it because when you're writing on the user interface Elements, these are quite repetitive. You have a lot of same elements just shifted Inside the dialogue like for example for three or four combo boxes three or four checkboxes one and another and these are Mending the same the same element. You just have to shift it And this is quite quite easy to cash so for SG's as Image elements, we just cashed the we draw it to a bitmap and cash that and we have the bitmap and just draw it at the correct positions and For the for the SVG elements that with this special resizing we have the draw commands itself like how they are drawn and We just have to Cashed draw comma draw comments. You don't have to parse again the SVG. We just do it one time and then just Have the draw comments. We just goes down the the list and draws inside Vcl itself and it's quite fast. It's no problem What what we have to change is I'll just the position where where to place them and yes And this is more or less what I have a very little recap for so for the Custom team for the IS. This is the position. This is the location. You can check it out See how it works. Maybe you can Maybe you can play around and change the the look and feel it for it So and then the team definition, this is something that should be for the Designer easy to change. We have it like this main main team definition is written in XML file and then we have the SVG files or the widgets and then what is still important is like the Color styles and parameters and you define inside the definition and you're generally done Okay, thank you