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