all right we're going to do some drawing
and this is going to be a two-part video
this is Part B for the other one Part A
is more complicated so Part B should be
the first one I should probably rename
those it's really stupid but anyway this
is Part B all right first of all in the
glade window we've got the usual window
we got fixed and we've got draw it's an
instance of gtk drawing area as you can
see here and it comes from display and
drawing area and I dragged it in alright
in drawing area I've given it a name
it's called draw one it's located 0
comma 0 its upper left-hand corner and
then it's size is down here for 40 by
261 so for 45 to 61 down there's some
margins I was playing around with they
don't do much of anything but they're
there ok only one signal the signal is
draw where is it there it is right there
draw on draw one draw that's the
function that will be called whenever it
needs to draw the area it'll be
initialized the first time you start the
program and then it'll be called
periodically to update ok and then I've
got a label I'm just a plain old label I
didn't even give it a name because I
don't change it or anything and it's got
the content CPU utilization okay so
that's all there is there not much of
anything different just a just this guy
the draw which is empty now and and one
callback all right get that off the
screen the program down here is fairly
short as it turns out first of all I
declare a timer handler which I'm going
to have a timer that's going to click
every second and every second the timer
is going to look up the current CPU
utilization and it's going to put it
into an array and shove everything in
the array down it'll put it in the first
part of the array and everybody else
will be shoved down
not the most efficient but it works
there's the array a hundred elements CPU
I use CPU utilization as a calculation I
actually doesn't need to be global
there's the ondestroy which gets me out
so what do we get
first of all we initialize the array to
be all zeros so the CPU utilization
because we start off with a flatline
zero okay this is the same as before
initializing gtk starting the Builder
it's part one Glade file getting the
window getting connecting the destroy
the callback signal for to destroy the
window that's on destroy and probably
can you probably can put that in the
glade but nonetheless I've done it here
and getting the getting the signals for
fixed although I don't actually use it
and draw one draw one is is the object
that is the drawing area that we're
gonna draw in unrest a builder for
tidying this purpose not much else keep
above that's optional has nothing to do
with drawing show the window start the
timer starts the timer it's going to be
one second between clicks in the timer
and we passed to the function the name
of the function that will be called once
a second and it's called timer Handler
and I'm not passing anything to it timer
handler will get nothing just know and I
start off the main gtk loop and that'll
keep running okay there's the on destroy
what you've seen before and first of all
the timer handler fairly simple I've got
some static variables here some static
burials what you're going to hold the
we're going to contain the time at times
it was from one time to the next we get
the previous time the current time the
time that we're going to get is an
accumulated time so I want a difference
the current time from the previous one
to know how much was used in the
meantime it's a war utilization in the
mean time and it's in hundredths of a
second so it's actually
it corresponds well to a percentage and
there's a flag indicating whether I've
done this once or not the first time
through we just initialize I've got two
character strings okay how do I get the
time how do I get the utilization well
in /proc /stat there are a bunch of
lines y'all should show them over here
thank you
yeah a lot a bunch of lines as I said
which gives information about the CPU
and other stuff the first line is the
aggregate for the CPU now my machine is
an eight-core machine then it gives you
the individual numbers for each of the
individual CPUs and you can look up what
these numbers mean but the first one is
the accumulated amount of time since
boot that's been used by this is all of
them aggregated together and these are
the individual CPUs so what I'm doing
over here is saying head - one which
means the first line this line right
here is the only one that's going to be
echoed of /proc slash stat so that that
program head will write out the first
line of /proc slash stat and I'm doing
it a P open which is like a system call
starts a shell but the output of the
shell comes back to me in this case it
comes back as because of the R means I'm
gonna read from the shell W would mean
that was writing to the shell
but anyway it's gonna come back as an
input line coming in through the file
pointer p1 okay we so we open p1 I
assume that works I mean see how it
couldn't works and technically I should
check to see if p1 is null but anyway I
really think slash products last that's
gonna be there alright the I read the
line in from the and I doing sscanf and
I ignore the first thing which says CPU
the first text over here is you notice
that CPU that's character strings I
ignore them and then I'll over here and
then I read in the time
okay into time too so I really want the
time to I don't care about the word CPU
I close out the close out the file
pointer and I just add an extra line if
if if the flag is zero then I turn the
flag on I copy time to into time one
here's where the difference is and I
return TRO is the boolean and the true
means no further processing on this
timer interrupts false would mean yeah
you can process it further but there's
nothing else to be done so that
basically gives sets my base time
subsequently it's gonna be differences
as you can see here if if flag is one
which would be the second time down in
all subsequent times CPU utilization is
going to be time to minus time one
that's the difference between the two
cliques and we're doing this once every
second so that'll be so basically that's
the amount of dense the amount of CPU
time that was used in the in the interim
now the CPU time if this if one of the
CPUs is at a hundred percent that will
come back as as as a hundred all right I
think it's a hundred yeah is it yes it's
the different it's supposed to be in
hundreds it's in it's in hundreds of a
second so if one CPU is in utilization
you'll be out it'll be one at 102 it'll
be 200 300 400 and so forth up to say up
to 800 okay here's where I shift the CPU
values start at the top and shift them
all upwards therefore leaving at CPU
sub-zero index position zero and empty
spot and I put into the empty spot the
utilization divided by eight so the so
it's not going to go from zero to 800 is
going to go from zero to 100 which would
be the actual utilization that goes into
them so the you of the array is going to
have the most recent 100 observations
and when we paint the screen we've got
to have we got to paint the whole screen
we
paying part of its they're gonna pay a
whole hundred of them
okay CPU zero that's in the lowest
position and I printed out you'll see
the numbers coming out on the screen as
I'm doing this and it's it's technically
it's a well it's a percentage so if all
eight CPUs are in usage CPU utilization
will be eight hundred and divided by
eight it will be 100 which is 100
percent okay so you'll see that there I
copied time to into time one and I run
this function which tells the GDK hey
why don't we draw something trigger a
cue a draw event on the widget draw one
so the background loop the gtk loop will
queue up a draw event for widget draw 1
and since there's nothing else going on
that's going to happen immediately
so that'll so that will trigger that
signal and then I return true I'm out of
the timer the draw signal is down here
this is draw one draw this is the signal
this receives the signal whenever
there's a draw event you'll get one
immediately when the ghrelin the program
starts up and that'll basically clear
the screen see height and width these
are in here are not using them but I
thought I'd leave them here this gives
you the height and width of the draw
window I'm not using them but I just
left them in there in case you want to
find out what they are so there's the
now the drawing is all done in Cairo
which is the separate package of drawing
stuff I'm not very good at it there's a
lot in it there's a lot of functions you
can draw arcs and rectangles and squares
and straight lines all I'm doing this
drawing lines you can fill things in you
can change colors it's it's actually not
that not that complicated but so if you
really want to get into drawing you're
gonna have to look at the Cairo
functions well the first Cairo function
is to set the width CR when when I came
in here on the draw function
I got a pointer to the Kairos
in the drawing window alright and that
that's the thing I play with so I called
the Cairo set line width and I passed
down CR which is the pointer for this
drawing surface and I'm sitting it 21.0
a width of one point no it doesn't
appear to be one pixel it's what it's
one unit of some kind I don't know what
it is it looks like it's thicker than a
pixel considerably thicker but whatever
the window not what the units are I
don't know I could look it up but I'm
sure the function would tell you what
the wind what the units are then I got
now I'm gonna print that now I'm gonna
start the windows clean it's empty
I'm going to start drawing on it and I'm
gonna draw all 100 elements of the CPU
were right so I start off from 0 up to
98 okay last night I draw all but the
last one well I go from 0 to 98 because
I'm you you have to you need 2 points
you need the current point in the point
to go to as I'll see you in a second
first of all I set the color suppose I
can take this out of the loop the color
is red green blue it's between 0 & 1 and
you see I've got red at 1 if you want
other colors blend them as appropriate
it's red green blue and it's a double
precision floating point number so
potentially you've got a lot of colors
all right first of all I move the
imaginary pointer to a place on the
screen now I'm kind of adjusting this
first of all it's got to be a double so
that they're all being cast
alright so it's when I just print at I
printed them out or drew them normally
they were too close together so I'm
using multipliers to expand things
without exceeding the bounds so it's X
by Y by the way if the first parameter
here is X I'm in the X parameter so I is
going to be the horizontal so I'm
starting at the left most part from you
know I being 0 1 2 3 it's the left next
to left next going right so I times 4 so
in other words the maximum would be
about 400 wide
when we get up all the way up the top
and you remember the the window is 440
or something like that I know and then I
dis so it's I times four and I displays
it by ten okay so instead of starting at
the at the actual left edge in by 10
pixels but it's its expanded by a factor
of four so that's and that's where we
start the draw and then the in terms of
the vertical again ever it's double
precision this is the vertical two time
well first of all it's a hundred minus
this is the value in CPU sub I we're not
drawing at the top of the screen we want
to draw down near the bottom of the
screen that's zero that's our zero
position and if CPU utilization goes up
we want the line to move up
so if CPU utilization is zero we will be
at 200 got it
so if CPU is zero I'm the starting point
for the draw operation I get two points
here the starting point and the
connecting point the next line is at the
connecting point draw two from two this
is the from I'm setting up the starting
point so I'm going to I'm going to so if
CPU utilization is zero this will be a
hundred the value of this expression
will be a hundred times - in other words
it'll be 200 it'll be down 200 from the
top that's my base line the actual
window is greater than 200 as you may
recall and again i displace it by ten so
that's the starting point the second
point is same idea different function a
Cairo line - so I move from starting at
this point we move to this point this is
where the line actually gets drawn so
it's the same thing it's I where you
know in the same horizontal location we
didn't change I no excuse me um
horizontal location I plus one okay we
horizontally are have displaced by one
which is multiplied by four so it's
actually four displacement of four
above here it was I now it's I plus one
because the CPU value is going to be I
plus one so the most recent one the one
that starts off at CPU 0 will be the
leftmost one the second one will be four
in from it the third one will be eight
in from it and so forth because of the
multipliers by four it's actually I'm
one two three all right
messy but not that really tricky this
guy here is pretty much the same thing
the only difference is that we're not
doing CPU I we're doing CPU I plus one
so we're drawing from that position to
this position and again it's just placed
by ten all right so that connected a
line from the let us say the leftmost to
the second leftmost or from the second
leftmost to the third leftmost and so
forth all right and then we stroke it we
actually add this actually puts it on
the screen you have to do it for each
one apparently and we're done so
basically we draw a hundred segments and
we only go up to ninety eight because
ninety nine is the last one and of
course the high plus one here is good
that'll be 98 plus one that's 99 that's
the last element so that's all there is
to it on the fact of all is gymnastics
about you know shifting things on the
screen these are just points and I'm so
I'm using the I I'm using the I as the
x-axis and as I goes greater it's time
into the past eyes ears the current the
most recent one that was added to the
array because the array is I'm just
being shifted upwards every time I add
one to it which is once a second and the
vert of the horrors of the exam the
vertical is based on the value in CPU
from 100 and then multiplied by two so a
value of zero CPU gives us the maximum
displacement from the top down anyway
does this work of course it works
all right and here we go and you can see
some little bumps going on cpu
utilization there's my label and this is
you know 200 down over here you'll see
the numbers popping in and surprises
anything going on as a matter of fact um
one of the CPUs is actually doing
something
who knows what's probably could be doing
some background maintenance of some kind
but there's my utilization it's only one
CPU that's doing it otherwise you'd see
a bigger number up here what I done here
is to run I can run some programs in the
background you know this is a mumps
program and I'm running it with the
ampersand which means it's gonna kick
off and I'll get control again now you
see the CPU jumped up two hundred and
seventy percent hundred and seventy
eight I can run another one and now way
up to 200 keep running them and you can
see it's doing it now I'm up around 652
I don't know what's going in the
background that's this program is not
using that much it's not using any
hardly any CPU time so something else is
going on in the background the machine I
don't see what I don't think there's
anything that I can see oh it's OBS of
course OBS is running to record this I
hope OBS is recording us all right there
kicked off another one now I'm up to 7
and 33 let's kick off another one and
we're max out now well I guess we've
we've gotten as maxy as we're going to
get given all things being equal and I
can actually hear the fan spinning up
because the temperature if you look down
there someplace you can see the
temperature room spam fans spinning up
the temperatures beginning to rise
temperature is at 65 and the fan is
trying to catch up with it so there it
is now if I like kill these guys now you
see it drops away to hell down and the
only thing that stays running of course
is the OBS which is using about 70 years
70 or so percent of the CPU so what have
we got well we've got the ability to
draw graphs you could fill this
you could change colors you could do all
sorts of stuff it's actually fairly easy
you'll have to look at the Cairo
functions but once you get the Cairo
functions on it's not hard to generate
an area on your screen with some kind of
dynamic graphic activity and there you
are I've got the second video which is
which is a paint program and that's more
complicated and it's money far more
parts to it so I will quit it now