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