what is going on everybody and welcome
to part five of the TV tutorials in this
video we're going to be doing is
building out that actual chat app page
basically where the chatting is to occur
so so far we have built the following
which is just a label and instead what
we want to do is actually kind of set up
the layout and then talk a little bit
about how we're actually going to update
the chat because the label itself while
that contains text and we could
continuously like update that label once
the text is long enough to run off the
screen it's just going to run off the
screen so there's no like scroll so
instead what we need to do is kind of
combine the scroll view with a label and
kind of make our own custom scrollable
label so we're gonna be working on that
so the first thing that we're gonna do
is we're gonna keep self calls as one
and then we're gonna say self dot rows
is two so I've drawn a beautiful picture
for the text based tutorial about how I
envisioned this app to work and this is
it so the chat will kind of exist here
and wrote one and then for Row two Row
two is actually gonna have two columns
so it will be it'll layout inside of a
layout so on Row 2 will have column 1
which will take about 80% of the width
and then column 2 will be the actual
send button so this is where you'll
enter your message this is the chat
history and then this is the send button
cool so first thing I'm gonna do is just
get rid of this because we're not going
to be using that anymore so now we're
gonna say is self dot history is gonna
be still a label here for now
that we're gonna set to be height is
equal to the window dot size and 1 and
since I've just brought in window let me
see your TV core window so then to
reference just generally the window from
kV chord window import window coming
back down
chat up here okay so one it's
coordinates right window that size will
be coordinates so X 0 Y is 1 Y is your
height boom so Y so for that height x
will do 0.9 times 0.9 and then size hint
why none these are parameters so room
the space for pep eight great
so then self dot add widgets self dot
history lovely now in the second row
we're gonna have the message input that
we want to input and then the send
button so for that we're gonna say self
dot new message is equal to a text
inputs and this will be width and that's
going to be window dot size 0 with for
the x times 0.8 so 80% size hint not y
it'll be X none and for now we'll set
multi-line to false okay then we need
our send button so self dot send is
going to be a button that says send
surprise then self dot sent bind anytime
we send a message
what we want is on press we're going to
say self dot send underscore message so
we'll need to build that okay now what
we want to do is we have this widget
history which is taking up that entire
because remember the way this can it's
gonna feel kind of weird until you get
used to it and you almost have to have
like this mental image so right now
we're programming in the space that is
one column two rows so the first add
widget that we did is taking up this
whole thing now if we
add one more widget it's gonna take up
this whole thing okay so we can't just
we don't want to just add a widget right
away because it's gonna take up that
full row so instead what we're gonna say
is bottom line is equal to the a grid
layout of calls equals two and then
we're going to set up bottom line so
we're gonna say bottom line add widget'
and we're gonna add both widgets mmm
self dot new message and then bottom
line dot add widget self dot send so now
this bottom line grid layout thing that
just doesn't belong anywhere now we're
going to add that and now this bottom
line widget takes up that entire bottom
row but inside of that we have a grid
layout that's two columns and it
contains these two widgets which are
sized accordingly I'm sorry
sized accordingly and then this just
takes up the rest so now when we say
self dot add widgets we add bottom line
boom done
now what we're gonna do is we'll just
add this send message method just real
quick send message so so cool so when
you click the button it also returns
what is it the button right it'll return
whether you hit the send button or the
enter key that's right so so in this
case we don't really care so that's why
we're using the underscore here so for
now when this method gets triggered
we're just gonna say send a message okay
very good
okay let's test I think yeah we'll test
this for now let's just run that real
quick so PI - 3 7 TV app no give you a 5
there we go
and since this is the first time we're
running it don't forget you need to be
also running sockets server dot PI if
you don't know what the heck I'm talking
about quit skipping tutorials ok hit
join and it looks pretty good so in here
you could say blah blah blah and then
we'll click send and we can see here on
our TV app thing as we hit Send
it says send a message so it knows ok
we're gonna do something when we send a
message and we'll probably handle that
in the next video but the other issue is
as we continue to populate this label
we're gonna get too much so we need to
make this a scrollable label which
unfortunately doesn't exist it seems
like a really obvious thing so if
anybody watching knows TV and knows what
should be in place of this like how
would you use key v-- to display
anything scrollable that would be
updated right let me know anyway so
let's fix that so what we're gonna do is
from TV UI x dot scroll view we're going
to import scroll view and we're just
gonna make something that is a better
version of a label so we're gonna make
this like label widget thing that will
just take the place of a like a label
not all of the labels but the one that
we want to take a place of so class
scrollable label it's going to inherit
from scroll view and wouldn't you guess
it we're gonna do this as well cool all
right so first we're gonna say self dot
layout is equal to a grid layout where
we just have one column and then size
hint y equals
and then we're gonna add that so self
dot add widgets self dot layout great
now we want to do is basically we need
two widgets
one to be appended to and have a
scrolling capability and the other
widget is simply there for us to scroll
to it so to scroll like down right by
default as new messages come in we
actually we want to continue scrolling
down so we need like a target to scroll
down to so we're gonna just throw a
widget there to scroll to and that's its
sole purpose so we're gonna say self dot
chat underscore history equals a label
with a size hint wine none and then mark
up equals true and this is just so we
can add pretty colors make your username
one color and everybody else's username
a different color so you know so it's
like just easier for you to read and
then self dot scroll to point is just
going to be a label so it's just an
empty label but this is the thing that
we're gonna scroll to every single time
so now we're gonna add this to our
layout so we're just gonna say self dot
layout dot add widgets and we're gonna
add self dot chat history and then we're
going to and self dot scroll to our self
the self dot layout add widget you can
do it man and we're adding self self dot
scroll to point more coffee as necessary
okay so awesome
so yeah so we have the chat history and
these two things are gonna go in this
layout widget in this layout widget is
scrollable and all we're doing is just
we've got this label that's just ever
updating it will scroll but to get it to
scroll to the bottom we're adding one
more widget that's just gonna be empty
it's just an empty label kind of like we
abused an empty label earlier
and we're just simply using it as like a
target to scroll to so pretty cool
awesome so that's our init method here
for our scrollable label now we need a
method to actually update the chat
history as a new message comes in so
we're gonna say define update chat
history this will take two Parnes it'll
be self and the message that you want to
update into the chat history so self dot
chat history dot text is going to be a
plus equals first of all it should be a
new line so backslash n plus whatever
the message was so immediately you
should be taking note that this is not
sanitized in any way yeah more do you
think of all kinds of fun stuff we could
do so yeah that's why I'm not gonna
leave this public now I'm not gonna
leave my chat server public anyway chat
history text okay so new Matt a new line
then the message and then now what we
want to do is we want to set the layout
height to be whatever the height is
necessary and then we just kind of are
gonna be adding some padding here so the
first thing that we're gonna do is self
dot layout daunt height is gonna be self
dot chat hich history dot texture it's
not know haven't typed it yet texture
size one from the Y plus 15 pixels just
to give us some extra space at the
bottom and then what we're gonna say is
self daunt chat history it's self dot
height is self dot chat history dot
texture size one awesome
so now self dot chat history dot text
underscore size is equal to the self dot
chat history with
time's 0.98 comma and then none there
okay I think that's what we want we'll
find out
and then finally don't forget our we
want a self dot scroll underscore two
self dot scroll two point cool so that's
with our scroll view so when we update
we'll add the message we get the the
height here we add that information and
then set the text set the size and we're
good to go
cool so now I think we're ready to go
ahead and try this let's just make sure
we don't have any errors because until
we actually get some code or some text
coming in we're not really gonna know if
this is working as intended so I think
what I'll do let's just run it really
quickly and just see what we have here
okay so I mean everything up to this
point that we can test does work but
until we actually start updating the
text in this actual label there's really
nothing for us to to test further so
okay so yeah in the next video we'll
wrap up the application and and then the
subsequent video will talk about
packaging so we'll get it on I mean
doing Windows I mean pretty much every
desktop you could just install Python
but on Windows you can create an
executable I'm trying to think on Mac if
there no Linux there is no option you
would just need to get pas yeah get
python in key be on Mac there is I
haven't tested it on Mac I have got it
on Android and then I haven't tested on
iOS but apparently you can get it there
too so anyway we'll start talking about
packaging and stuff like that and mostly
just the the hardships of packaging
because there's so many seven it's so
hard to read the errors and stuff but
anyways that's what you guys have to
look forward to next tutorial we'll
finish the chat app and it'll actually
be a functioning chat app that I can
show you guys works so cool questions
comments concerns suggestions whatever
feel free to them below if you want some
help you could join discord discord GG /
cent Dex otherwise Thomas see you guys
in the next video