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

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

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

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

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 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

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

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

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

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

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

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

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