hello everyone thank you for coming i know it's not that easy after three nice and we are okay so today we're gonna talk about how we can use played and you guys actually to create custom interface usually judy katies meant for create in the top applications so they're supposed to look all consistent here is a screenshot of all the number for like a regular that's not and you can see that there are many different applications and since they are all implemented with the G T K to give they all look a consistent so that's the idea of the toolkit but now with seems a adjudicate reimplemented C S it's really easy to use it to create our own loops for custom applications so generally i keep doing generally in on the next talk there are if you applications that don't want to look like the rest and usually those are within the application for example and it's gonna mess here which is based on the look and feel of win has its own look i hear you can see there's a the same it's the same application running with a custom game and the educating so the idea of this talk is that about show with and real what example of how to make a custom look application using the normal start before that i wanna show you another example this is markup of another multimedia application i used to work on this like five years ago this is the artist more and that's this should be great to implementation he used to run on win those my controllers and obviously minutes in order to implement a sun screen injured the guy i had to have a lot i had to create my don't you think a style my own we should so like to choose how they look and implement everything in i for example in this screenshot the only images and music are obviously the idols and then we can you have buttons the rest is all implement with a custom style but that was quite a lot of work because you have to understand how well which it where drawn a it was a pretty tedious work but there was so where really good initial you another example of the same application run in a slightly different call the thing okay enough with the screen shot let's start looking at the base time so few months ago somebody in a small casino warily from in argentina ask me if i could do a display for background table and i still haven't learned to playback are a but i did the display anyway so first we gonna see a mock up i'm a bit friend that's a designer then we gonna see that by state how i implemented if you elements of the of that program using C S and then we can see how all fit together so this is the mock up really it was quite simple apparently people that play are gonna like to you know of every a player it's all in the table so there's tree possible out on it play kind of have it like between the player could win the then there or there or we could be attacked so we had to implement like agreed like table and we were gonna use a different icon for each possible results so once we have something like they like this i decided to split the design in different elements and here so we have and i use a background image and another image shows for the icons and the low and that's it the rest has to be implemented in C S in order to make it easier to add up to different display and you you have to change something you don't have to go and change all you really images so we're gonna as a study the is three elements the top frame which i call the but frame that baby and the information frame so what i do longer like experiment i'm a teacher and a man like a regular and your big issue and i use mostly reads and no i'm gonna tell you about why i use the fright so C S for she to guy it's very similar how it works on the on the browser all you have to read about is the box model and how it maps to the which so basically in in triplicate every which it and it's can see their like a box so in in theory you could set the martine or there and and or there are a frame and all this is this probability you would do on on a bro so sometimes they are which is that don't work like expected and that because they which it sell have to a call different function for each a C S probably be for example are some which is that don't know about rome so you can expect to change their background with C S A so it's when if you are working on P G T K and C S and there's something that doesn't work there's a really good chin that's because they which it is not only in the write a growing function so it's don't have a don't be afraid should go take a look at the draw signal i did a little mental in the which it and see what it's doing so that might have but so okay one here i am sure win the results of editing delay and apply this year says changes to the one place a this is all or and work in rubber is a there is the C S ranch of really that ad only that option it lets you choose which see assessed to use a this type provided for the whole right okay let's are for with the but three also said before i use it typically frame so i could make sure that it what quality in what drawing the frame on the bottom so i you can see this is the first thing i did was obviously change the font type and i think that's a reporter's size and the way to make it look like i wanted and the vote on C S it makes you it's a like all the G T gave frames that has a frame but the startup as you can see you can change or they're or they're all your the radios that you choose if you want rounded corners or not and the books when i implemented this it was with G T K three point eight so shallows where always inset there was to know way to make the shallow there on the outside and that's because we should be there drawing in the two they are location they are not allowed to to your all outside but no that's gonna i think that change in carbon to ticket and this you are able to save you know side and but still gonna get a lot but you could create a your own which it that draws a frame inside it's i location and you will be able to see your yourself anyway if anyone wants to the right and ask any question about the C S you're welcome again okay and that see the other the other frame seems i wasn't able to have the outside shuttle i decided i was gonna use i used one frame inside of another as you can see the top frame the C S style escort frame shuttle i said all the borders to be zero and i said the right and bottom body to be four pixels so when you back something inside you will show up a lot more well so if you had that top frame and you but inside a another friend before frame and change the font like we did on the other thing you gonna get something like that that their result okay so now the main great as you i don't know if you noticed but the main great how the gradient so each a square inside was a have the different gradient so i decided i will implement that by creating it big frame that will have the one change the border as you can see you can specify that the the we have and the type of for the or if it's already or that's not and then the court i said the three years and i this is a very nice feature you can set the background to be any image or you can use a seven different functions that will create an image for the in the example i used a gradient so as you can see it's in your relate in that goes from left up to the right button and from a little great to a little later great and that's you sure i that some instead a shallow and on the right here you can see the first us yes this is so i let's go back so it's a frame and i was going to use the i used it should again agree for the inside and this is all gone been i meekly at a runtime you choose that we have a paper on how many rows on all new once and my custom which it with a to decay image each sell and it will say those C S class to each image accordingly so every images every image it's i agree get the first style that sets only travel think shallow and then all a so this guy that i with a different background all so you can see how they do their and once you put it all together it looks something like that another thing i had to do to make it look like this is each corner image have to add it on radio set so as you can see here in the top left and top right you can see the this C S for each corner and what yes the animation so i choose to use that you think the image because i knew you when there's a background also because that will let me if i eventually needed to do something more complicated i could use an icon set the five or maybe i could draw myself on their cost know all about it i want to do some animation that wasn't possible with C S but and then do that you see in a simple animation with C S and effective way nice and it works pretty well so as you can see i'm sitting the it she play here and make sure or when the player wins for B G banker or try and make sure it simply said create animation and it's nice wanna use the player animation it's gonna last have to segment it's gonna be playing ones and it's gonna be pretty ones and the function to calculate the correlation between the first frame and the last one it should really your animation so it's really your function so you goes straight from there and on the top you can see how i define the they year transition from start to and start with a know are grown image and then it's a bad so this is the and we saw when you put all together i guess know you're wondering why the markup was a vertically and now this is horizontal that is because when we installed it the first time we realised they what the the chip money door that when you put it vertically it didn't look why well from the young girl so we have to reimplemented and make it horizontal okay so what's missing to do well first of all i have to finish a this yes this branch and merge it into laughter and then i would like to see there is the way to disable C S animation in the workspace because sometimes can make it a little bit the slow and another thing i was i have to investigate is the final if we can at the something to be in there to specify a C S S E S provide something like that and obviously make it a little bit fast that faster okay by the way this presentation is made we play and it's this since i can if the source code of the other application at least you have this as an example everything is implemented we play and see a says and actually you didn't even create a program i'm using glade review where we'd if you arch and i did you can specify the C S you can even say you want to make it slide shows so it's gonna pick up all the top level widgets in your russia and i could into she to case that and make you go up and down and change the top levels okay so that would be if there's any question you want to ask me then we can move and see the actual implementation of be that's less okay you wanna see this light on great alright okay here i remove the idea because choose the resolution is not enough but as you can see let me make this a little bit bigger so you can see the parakeet they and main top level it's just the frame and in the common top you have this type questions property where you can set all this type classes one and now the initial you if you choose the C S this for this virtual then it's gonna low alright it's a little bit slow i a it is on my desktop and he was quite fast then when i move it to my old notebook i realised it wasn't that us so but that would like if you hours before catching the bus to the airport huh so that so i realised that when you when you set a it problem animation to katie's embodied eighteen the whole which it so that was you can E a whole rear all the whole us me so what i did to make it a little bit faster now as you can see here i create and event box shot for the animation so that only but it's regional and the same thing for this dining guide and you can see here all the top levels and here's the C S for be slide first log is all the different examples you show in this light and you to be for the down is the actual topsy assess for example right changed a greedy and on the back of the of the cover background that's it is that this is something you see like i don't read and it will back you are and it save this there we go so what's played i'm review do we they are actually money tori in the file and each time it change simply below the C S so those that make it a little bit easier to to try different things because well i'm not exciting or so we take me a little bit longer to make things look a little bit better but this is the i think it's a pretty good way to create custom application because scenes G to create a list of to be it has a lot of different features which make it really handy to do this kind of a application easy like it's really easy to have a configuration save and all that you already taking care by the that we could so the only missing think was a easy way to create custom lots but now i think with this that it's a little bit the easier so any more questions yes how are the presentation include okay we took me three days a but i spend most of the time actually adding those features like it to me like probably i don't know all the options i added to weekly review were they probably took me like a full day because i was going to create a i was gonna hide in D C application that creates the low the be there and at the baby in the end and then i decided okay i since i'm doing this work anyway split really to be better an idea to the preview where which it could be handy for someone another thing like making sure you since i'm doing this with G T K and you everything is wrong with cairo it was thinking okay so what about it pdf because if someone wants to download and see the apply than see this light and don't have the latest create from master at another branch gonna be a little bit difficult for them to see so i did i make so when you you have screenshot option in great review where that will taking screenshot and dump it to the feel slightly so i made it when you pass that parameter and also this light show parameter when you put those two together we actually create a B D S four S P G or possibly a star first graders are first and we it will draw every top level to have pdf so for example this is the same it's like this is the same slide rent or buy cairo into the P D F i actually really good i only seen one are defined in the first in the cover i don't know if you can leave your not it's not baseball but if you watch this in you know money per there are some time they show with a thin line between the building in each and a C S right on the bottom but otherwise you by good so you can download these P I it what's created by late two one of them questions so we will become part of the future to gnome office okay we don't currently have any plan for that but i can say know how just there so you well noted that a lot of random would use and you D J don't really respects uses properties so i went about fixing that are interesting to which is the just it for us well i don't know we won every which is to well all this C S a different things because maybe i mean we can make a label draw it but if you already wrote about one on the so that's a different that you had to learn maybe we should document that a little bit better and it spend the differences between C S own should decay and actual implementations in browsers that but if we've if i find any after about yes i will try to fix it but more questions sexual much is