S1E3: Infinite Volume Wheels

Rotary encoders are infinite volume knobs, and they can go to 11. Hooking this one up to a Raspberry Pi Zero W and a web page for visual feedback.

Transcript:

hello I'm gonna remember to unmute the
mic welcome everybody we're just getting
started here with the new microphone and
everybody who was here last week that
was fantastic I finally got around to
getting at discord so feel free to jump
in there it's in the channel page so you
can see that down below last week we had
a lot of fun building a steam deck we
managed to wire it up to a whole bunch
of custom commands using the Linux event
interface now what that was kind of cool
I didn't wire it up today because I had
a lot of fun with the hardware that
we're gonna be dealing with and hardware
is always fun let me tell you but there
is a I'll be posting the code for that
and I'll drop a link down there below as
well
in case you missed that so this week
what are we doing we're gonna deal with
infinite volume knobs so normal volume
knobs which are quite boring because
they have limits they they go all the
way to the left and that's zero and then
it sort of stops it tells you now that's
as far as you're going or they go all
the way to the right and that has the
you know that that that only goes to ten
and sometimes you want to go to eleven
now when we're going to be building we
might even go beyond that today so when
we're gonna be building a infinite
volume knob what we're not gonna do is
use the same piece of technology so
that's what's what's built into a normal
volume knob is a it's basically a
variable resistor so as you as you turn
it the resistance goes up you turn it
you know and then you turn it down the
resistance go down it reads that and it
goes okay this is what volume you want
or back in the day it actually just
directly limited how much output was
coming to the speaker's so this is a
little bit different this is a rotary
encoder so these are the kinds that you
might have seen in like you know cars or
modern equipment that has that kind of
nice clicky sound you know and it just
sort of goes forever
and just keep turning it or you can turn
it all the way back and whatever you
know that they're a little bit trickier
because there's no resistance they work
on a slightly different technology so
we're gonna we're gonna cover that in a
little bit basically what we're gonna do
since they don't have ends there's no
start and end to a rotary encoder we
we're gonna like just kind of say well
wherever the program starts up that's
that's your starting value and we're
gonna keep track of how much left we go
and how much weight we go we're gonna
deal with that on a well we'll get to
that a little bit so without further ado
I would like to invite you to this
session
[Music]
are you telling me that instead of
writing code myself I could watch some
guy write code alright well thank you
for that so we're gonna come over here
to the whiteboard for a moment and
figure out what we're gonna do so this
is a little bit different than what
we've done before because this this time
we're gonna be dealing with actual
hardware so let me let me tell you a
moment about that so this is um we're
just getting hard started here this is
where we are and we're going to be doing
infinite so this this is using
technology called a rotary encoder now
the way we're gonna deal with that is
we're basically going to take that
rotary encoder which is a nice little
little little device it's gonna be
coming out here and you have your little
encoder logic and then you know that
sucked up and then we have that's
usually sitting on a board and that
board is you know the standard piece of
PCB and coming out the end of it is
typically three sometimes five pins
we're gonna take these pins and we're
gonna hook them up to a very bad drawing
of a Raspberry Pi and we're gonna take
that into the GPIO so this this
particular input this is general purpose
input an output so we're gonna connect
these pins up and these are gonna again
this is something else but we're gonna
hook those up to the Raspberry Pi
now once once we have the the actual
thing hooked up we're going to take that
and sort of process it so we're gonna
write a little program on here and that
is going to say okay did you turn and if
you did turn did you go left did you go
right and once we figured out how to do
all that we're gonna take that and we're
gonna go over a magical technology
called Wi-Fi and we're gonna hook that
up to the computer that I'm broadcasting
to you on right now on a web server so
we're gonna take this web server so
after we have this we're gonna we're
gonna decode stuff then we're gonna hook
this thing up to a very simple web app
and that's gonna report where we are on
the actual knob as we're turning it
around and when we're done with that
we're gonna build a very very simple UI
which is going to show us where that
Nabi is at any given point so for this
we're just gonna be doing kind of
standard stuff we're gonna be using
flask and we're gonna use the single
thread version because I don't really
want to muck up this example too much
so let's you you can you know properly
use this in a data store have fun over
there and then you can hook a few of
them up and then you can do all sorts of
other magical stuff that you do when
you're in the cloud but we're gonna skip
all that today we're just gonna focus on
taking this encoder hook it up send it
over to the PI program send that over
across there over to this website to say
this is the dial has changed and then
we're gonna hook that up to a web
browser so this is that's the plan all
right you have questions about that just
throw it in chat and I'll kind of get to
it as we yeah as we can now all of that
magic aside let's let's come back over
here so this is kind of how we normally
operate on this stream but today we're
gonna be doing something a little bit
different I have up here the pin out
this is one of my favorite websites this
is pin out that XYZ so just in case you
forget what pain is what and they're
numbered all sorts of crazy different
ways on a Raspberry Pi you can go to pin
out XYZ and you can see what your
hooking up
what so this is really good when I'm
wiring things I'm always like at which
pin did I put that on where is that
input you know all that stuff now we're
gonna have a little uh a little bit more
fun today because that's that's just not
enough so we're gonna hook this thing up
to a microscope except it's in macro
mode right now so this is actually our
live Raspberry Pi it is powered on I've
not done much else with it other than
configure it to be on the same network
that we're going to be operating on and
we have these this this row over here
these are the GP is so we're we're gonna
plug these these two wires they're just
not connected we're not using them today
so that was that was from some other bad
soldering I am NOT the best person in
the world at soldering and these pins
over here this is what we're gonna be
hooking up to the actual rotary so this
this is the rotary encoder we're going
to use and it has it's one of the five
pin versions so these first two pins
they're not very interesting this is
ground and this is v plus and they're
really only there just to make sure that
when we start reading this stuff zero is
kind of normally zero so if the encoders
not doing anything it's saying like okay
this is this is zero
nothing nothing special happening here
these three pins are kind of the
interesting part this one here the grey
wire in the middle which you get that
better in the shot so this this grey
wire over here this is a this is just a
switch so if I actually push this guy
then this is I read it off just by
checking out this switch so we're gonna
kind of ignore that it's not really
about encoders today yes you are
absolutely right nightshade dude I'm
sure I just really just get over that I
mean it is definitely a black board but
it doesn't have like the really annoying
screeches and all the other fun that
goes with an actual black chalkboard
okay so you have this gray wire we're
gonna ignore that and then these two
values are kind of the ones that you
really need to deal with this this red
one in this blue
and that is typically it's called a and
B so this we're gonna we're gonna call
this the a side we're gonna call that
the B side on this particular switch
it's labeled as clock and DT I'm
guessing data but it's not really a
clock you don't actually clock this
thing out so it's it's really just just
think of it as a and B it doesn't really
matter so there is one more thing that I
want to talk about before we actually
dive into code so let me let me just
equip the writing glove for a moment and
go back to nightshade dudes blackboard
which is much better okay so the way the
way this actually encodes is we do have
this we have this we have this a line
and we have this B line and if you want
to imagine this sort of physically it
has a in there is actually a kinda like
a strip so if you if you imagine this
strip let me fill this out a little bit
more so in this strip of tape then there
are areas which are going to be black in
there are areas that are gonna be white
so or in this case they're gonna be
yellow and they're going to be black
okay we're gonna put these things at
regular intervals and we're gonna offset
a and B by 90 degrees so they're gonna
be ninety degrees out of phase so
wherever this guy starts up a little bit
a little turn later this is going to be
starting up and that's where this strip
is going to be and then we're gonna have
a nice little gap so that we know that
there's a zero line and then you know
this this guy is gonna be coming over
here and this guy's gonna be coming over
here and so same story again and this is
kind of important because we're gonna
need this to be able to read the encoder
so
the way that's gonna work is imagine
that like reading it is sort of like
cutting a line straight across okay so
if I cut the line straight across here
and I pretend that whenever I'm on this
black cube I have a 1 and so these these
black values or ones and that's all
great and these other values over here
let's we want that back these other
values over here we're gonna we're going
to call them pink yeah we're gonna go
with zeros so whenever I'm in one of
these areas if the sensors directly over
it I get a zero and if I'm directly over
this this black area I'm going to get
one so how does this look if we sort of
go down like like say say we're actually
turning this thing and so we're taking
this line though that we just you across
and we're sort of bringing it down so at
the line point where it is right now so
we have a and B and actually let's not
confuse our colors we have a and B and
we're heading in the down direction so
right now at the line where it is we
have kind of a zero
sorry that's a that's a 1 and a 1
because we're just reading across and
we're going okay you're on the one
you're on the one we come down a little
bit until we're just hitting here and we
noticed that this is now flipped to zero
and this other side is still one because
we're still in that black area now is
that kind of proceeds this is going to
keep going down so we eventually hit
this point and you know then we end up
with now they're both zero and then as
we hit this point now it's going to be
this is going to go back to one and this
is going to stay on zero and if I keep
going to my next cycle then this is
going to be a 1 and a 1 now that's all
pretty cool so I can tell that this is
going this direction because I'm just
going to be looking at what these inputs
are now let's do the same thing in
Reverse so assuming that we start at
this same line we're going to start off
with our you know 1 1 so we don't really
know anything but this time this is
going to stay one and this is going to
turn zero so we're gonna get be going
zero first and then as we move up we're
going to move them both to zero and then
B is going to move off into the 1 but a
is gonna stay zero and then eventually
you know we're gonna come back to the
next cycle where we're sort of appear
and there's just both ones okay we can
see this is different from this so I can
tell that I'm if I'm reading a and B I'm
going down if I'm seeing this stuff and
I'm going up if I see it in this order
so all I have to do is just watch a and
B sort of relative to each other and
then I can read this thing so that's
important I'm gonna leave that up for
myself so that I get the code right but
that's important for how we're going to
actually decode the hardware so I've got
this wired up for you and thank God you
don't need to watch me soldering but
this these pins here these these first
two are this corresponds to this is why
I have this highlighted this is B cm 17
and b CM 27 by the way nightshade dude
if you get a chance let me know how's
the mic sounding is this better than
last week or you know I mean the other
one was kind of fuzzy so I've got that
plugged into BCM 17 and BCM 27 and
that's hooked up to over here on the
encoder that's our NRB so as long as
we're just reading those lines we should
be alright all of these other wires you
just don't have to worry about I mean
that's basically just power and ground
boring stuff and the switch in case we
feel like playing with the button
alright
so without further ado let's get to some
code okay so this time we're not really
going to be coding too much on this
particular machine because we're gonna
be going over to the the Raspberry Pi so
let's let's just jump over there and
with a little bit of luck yeah we're
good so yes this is the inception
version of coding with some guy this is
this is screens within screens within
screen so I'm just going to label this
real fast
you know that I'm sitting on the pie
when we're on this window okay and then
we're also going to need maybe I'm being
optimistic but we're gonna need the the
stuff for the web server so let's let's
make a nice episode three directory for
us to work in and this is where we're
gonna we're gonna work on web stuff okay
so great
oh thanks nightshade dude that's good
nice improvement over the last week okay
so don't don't read that there are
things there you just shouldn't see
we'll get to inertial forces later
so here I've just started this directory
and there should be nothing in it it
could have a good person okay so let's
get coding now I don't have any My
Little Helper scripts on here so we're
just gonna code this the old-fashioned
way which is we're just gonna edit the
file starting from the beginning all
right so let's call this rotary encoder
no that looks like something I don't
like that's regular so we call it raw
egg okay so to get this started we're
gonna need the we're gonna need the GPIO
functions so this is this is this allows
us to access that this board over here
this is the this corresponds to those
pins that you're seeing over here isn't
that nice
if I turn this then they actually line
up too right well yeah okay then they
actually line up exactly the same as
they are in that pin out which is cool
and what we're interested in is this 17
in this 27 so we're gonna we're gonna
try to remember that so let's say that
this is pin I don't know what you want
to call this I've been naming it the
same as the what's on the board which is
the clock so let's just stay with that
so pin clock is gonna be 17 I'm gonna
use these BCM numbers instead of using
the actual pin number
and the data line is 27 okay so I need
to set those up I need to to get going
and we're gonna need a main because we
need to call our setup stuff for the
moment and let's do a little Python
craft that we don't really need this
because we're not gonna import it as a
module but you know let's not let our
standards slip so if if we have this
setup then nothing really just and we
can just make sure that we're good now
okay let's go - all right so we have
this thing the Python installed this is
based on raspbian already has GPIO in in
the system so you don't have to worry
about that so let's let's just run our
trivial thing and yeah it's just not
gonna do much at all okay so it's
telling us to get set up all right so
the first thing we have to do is say are
we going to use so this BCM I'm guessing
this stands for Broadcom because
Broadcom made the main chip that's in
the PI and these correspond to kind of
I'm guessing the wires that are actually
on the die for the chip so that's gonna
be what the system thinks of the pins
these are just actually these pins are
where they're these numbers that are
very hard to read are where it's tied to
on the circuit board based on the
circuit board design
so using this is more logical using this
is more physical it doesn't really
matter which one you use but make sure
that you're using the right numbers for
whatever you're programming
okay so we want to say like well we're
not going to set this up we're just
going to do it we want to put the board
into the right mode so let's let's set
it for we don't want bored we want what
does that call forget oh it's PCM mode
isn't it not very not very interesting
except it's cap so that's now we're
gonna use the 17 in the 27 and we have
to set both of these up for inputs so we
want to make sure that when we're
actually on the clock pin it's set for
going in we're not going to be driving a
load out on the on the circuit and we're
gonna do the same thing for the data pin
okay so both of these are set up so
we're gonna able to read them now so
that means that this program should
visibly do nothing but if I was watching
the circuits over there then we would
have just seen the state change on the
on the PI module okay let me put my star
here in the shot because it just just
doesn't want to be there okay great well
what do we do well now that we have
these things opened up and you know
we're ready to start our action let's
let's let that happen
we're also gonna bring in just
optimistically well now let's not do
that so let's try reading one of these
pins all right so if we if we actually
read both of these pins then I'll do one
at a time so we want to take the GPIO
input on the clock pin and we're going
to assign it to clock and we're gonna do
the same thing without a pin except
that's capitals cuz it's a constant and
then we're gonna print both of these out
so that's gonna tell us what clock and
data are right this second okay
great it was ready and then it was one
one now that means that it's sitting on
that area that I showed you before where
you know it's kind of in its like zero
state so the the rotary encoders not
turning it's gonna sit on one until it
moves over one of those other patches at
which point it goes to zero and then
it's gonna switch to one what order
they're in is kind of what's important
okay so if we read them infinitely we
just say all right just just keep on
reading them forever then I can actually
just put that in a loop and yet there
they go now if I go over here and I
start turning this encoder then you
won't be able to see it probably because
it's really really fast but some of
those numbers are blurring because the
we're actually getting the zeros cool
all right we have some input now we need
to take that input we need to decode it
so we're gonna use a little trick with
rotary encoder this is one of those
things where you can just write like all
sorts of crazy code if you want but the
easy way to do it and I like easy is we
are going to take the yeah this we're
gonna take the we're gonna take clock
switching so right now it's one so it's
logic high we're gonna say when that
thing Falls to zero that's where I want
to read so I'm not really interested in
this until clock drops down to zero so
we're not gonna read this directly
alright so we're gonna we're gonna stop
that little program instead we're gonna
say alright GPIO wait for edge so we're
gonna wait for either it's gonna go up
or down and it's already up so we're
waiting for it to go down so we're gonna
wait for edge on pin clock to be
followed so that means it's I want at
the exact moment I want this program to
stop everything until it sees that
change from 1 to 0 and then it's gonna
report it back to me now I know at that
point that the clock is now zero so
that's fun and if I go and I check that
then alright so this program should spit
out to zero as soon as it notices a
change
so you notice right now it's not it is
looping but it's just waiting for me to
do some input so if I turn it yep
there's my zero
okay so that's I'm gonna get a zero
either way that I turn it because it
really matters what's going on with the
other pin so ya know you'll notice it
blocks until I give it another input all
right great so what I want to do here in
a very tight loop is I want to say okay
so here we know that the the edge came
in so we know that where the clock has
just gone to zero so now we want to
watch for data so we want to know when
the wheel turned far enough that data
actually did a thing so let's sum we're
just gonna say oh but we're gonna wait a
full cycle so rather than like like we
could say like okay the moment data it
goes but dad is gonna bounce cuz
switches are a little bit messy and of
course they don't you know the values
jump all over the place so instead what
we're gonna do is we're gonna take which
is going to keep watching clock because
clock is now low all right so it's it's
chillin low and we're gonna wait until
it goes back up except this time we're
gonna keep reading data because we want
the last number that was on data right
before the clock went back up so to get
that coded I need to basically just sit
here pounding on and by the way there's
a lot of ways to do this and this is
just I think the simplest to see I'm
just gonna keep pounding on this input
until it's one again so actually it's
well you know this is it's gonna be
sitting on 0 so as long as it's not 1 so
we're just going to keep on reading it
until it hits 1 and when it hits 1 we
know that we're we've transitioned out
of that loop and while we're doing that
we're just gonna keep resetting data
with whatever the latest value is from
that great now when I get down here
clock is now I know that clock is
flipped back up to 1 because that's what
terminated the blue so clock is that one
so if I print this out I'm gonna see
okay it's ready and we're good to go we
start turning it there it is and you'll
notice when I turn it to the left
I'm getting a one on data now clock is
always gonna be one because that's
that's the end of the read that I'm
doing but when I turn it to the right
magic it's a zero so we read that
encoding off it and now we know based on
the moment that we're reading it that
this data pin basically tells us which
way we're done so I'm gonna stop that
and because it's a lot of fun now we're
gonna do something with it because we
didn't just sit around reading all those
pins and just to see that the encoder
works we know the encoder works okay
so instead now that we're here we don't
really care about clock anymore we do
care about data and that's probably the
reason they named it that because if I
read it at that point then that's gonna
tell me a zero whenever it is going to
the left and a one whenever it's coming
to the right so let's do something with
it what are we gonna do well let's say
that our delta which is currently 0 so
if i'm gonna go to the left then I'm
gonna say Delta is negative 1 if I'm
gonna go to the right then Delta is
gonna be negative it's gonna be positive
1
all right so if data is 0 then Delta is
gonna be negative 1 I'm just gonna write
this out the long way because I don't
want to do any fancy code otherwise I
mean there isn't another case data is
gonna be one but so let's just say
otherwise
well just just the B code complete if
Delta is gonna get all right so if I do
this and I print out Delta Delta should
now be telling me negative 1 if I'm
going left positive 1 if I'm going right
great let's try it okay now you know
it's a little switch bounce in there I
got a few turns even though I was just
turning it to the left
and I'm turning to the right and of
course I've got my logic reversed I I
now have it it's negative 1 if it's
going to the right so let's let's change
that because our volume should work the
way people think it works
okay so this will be positive one in
this thing all right so if we do that
then yeah
okay so there's our negative one and
there's our positive great part one done
ship it we're done we've we've built a
nice little digital decoder on our
rotary encoder all right we didn't
really want to just write out one or
negative one we want to go and do
something with it in fact we're gonna
want to make a web request so I'm gonna
use the requests API because it's fairly
simple but before we actually make a web
request whenever this knob turns we need
to have a web server so someone's got to
be sitting around to actually receive
the results of this thing so here we get
to use our fancy tools
all right great so I'm calling this dial
because this is it's not a Python app
it's actually gonna be a blast gap so we
can make a nice little simple and that's
gonna tell me I need the name so we're
gonna call this dial alright great we
have a little web app and we can come in
here and fire this up so I've actually
I'm gonna edit the code in this window
so let me let me just come back here
this will be our I'll label this this is
our server so here I'm just gonna run in
the virtual environment the main yeah
okay now what is this application do
well it's got my boilerplate code so
there's not much it's just telling me to
edit the template great okay so what's
the template before we get to the
template let's so I'm gonna put this
back up here like this
let's what's going edit our program so
to do something so I'm not gonna do
anything on the pic on the homepage yet
instead I'm gonna work and I'm not gonna
be taking post input here so we're not
gonna need that but I'm gonna make
another endpoint which is where the PI
is gonna hit and it's gonna say okay we
just went up or we went down hey what's
up hikers how are you
I can use some hikers
ah Manas low no no man is fine alright
so um let's uh Oh coffee is low so let's
I was I was feeling very I was I was
taunting an astrophysicist the other
night so I decided to theme today on
Arecibo Observatory it is really cool to
see if you ever get a chance to check it
out and it was not destroyed in the
earthquakes in Puerto Rico so it's still
there for you this is gonna be the dial
end point and actually it doesn't have
those we're just gonna do this we were
saying okay when you hit dial come here
and let's just return
let's return zero except you can't use a
number so we'll just return zero for the
moment so cool thing about flask it auto
reloads so if I go and I hit this page
I've now got a dial end point and it's
returning zero great so I'm gonna add a
parameter which is going to be the value
that is gonna come in so let's do that's
on the request so it's get args we're
gonna call this the V parameter X yeah
cuz it's just a ring so I was looking at
some Java earlier today so the all right
so this will be our V parameter so let's
let's actually test to make sure that's
there because we don't we're not sure
yet so if V is in request args then
we're gonna read the V parameter and
we're gonna just very simply convert it
to a number which should throw if I pass
it a string and I forget to send the
right value so if I can't turn it into a
number then puke all over the website oh
that's that yeah I know that feeling and
on a Friday it's very hard to catch up
on the weekly calls that I used to sit
next to where the board game people the
table
group would meet at Netflix and they had
tabletop nights on Thursdays and
basically every time I saw them starting
to collect like George or some of the
others like drop by I would be like oh
no it's Thursday I'm not done with the
stuff for the week he thinks I live in
fear of board games even though I
actually really like them okay so let's
just convert that up and actually I
guess let's do it all at once so this is
fine as long as the number that I passed
to it is really a number so V is like 10
we're all right but if V is hikers
because it's hikers then we get all
sorts of garbage and you know everything
breaks so the key thing here is that
sorry the the non pun version of that's
the important part of this is that I get
thrown a value error if this thing can't
be turned into a integer so let's just
catch that so we're gonna say unless you
get try this unless you get a value
error in which case we're just not going
to do anything so this tells us to kind
of quietly disregard it so if I pass in
hikers okay it's just gonna still
returning zero okay so we want to hand
in things like three all right fine
there's three and it actually works okay
if I want to just double-check that on
the console I can do this yep there's my
three okay so we know how to parse in
the now that I've got this control why
don't we make it return I'm gonna go
very simple here I told you before I was
not using database and technically since
this is a website I mean any number of
requests could be coming in any number
of users could be coming in and that's a
problem because now I've got a global
situation where I have one number which
applies to every request so because I'm
not worried about more than me using
this right now and I'm not putting it on
chat for you all to hit and break my
little demo
I'm going to instead just make a global
which is gonna be called value let's say
dial value and it's gonna start let's
start off in the middle so let's let's
go five I guess I'm gonna scale all the
numbers up by ten so what we can we can
always scale them back down so now that
I've got this I'm gonna need to say wow
there's a global and yeah I know this
doesn't work on a production web server
with multiple threads but you can write
this thing out to a store you can do all
the fun stuff of dealing with a global
locking increment but I not important
for right now if you do want to hear
about that we can do that another stream
I know everybody's probably been bit by
it at some point so if I do this thing
that what I'm gonna do is I'm just
instead of writing it out I'm gonna
adjust the dial value by whatever comes
in so if the dial value I'm just gonna
say it's my I'll write it out for you
dial value is dial value plus whatever B
is all right cool and for output I'm
gonna return the string version the dial
value okay so now I go and I reload this
page I'm at 53 because I passed three
and okay so if I pass in a negative
three I'm back to 50 and if I do it
again then 47 all right cool I don't
know hikers I may upload this to youtube
let's let's see if it works first okay I
don't want to tempt the demo gods okay
this is live hardware for y'all so all
right but thank you for dropping by I'm
just an even you got a run so now I've
got something which will sort of persist
the value on this web server and I see
we're running low on mana so we better
better move along okay so I've got my
actual value over here and because I
feel like dealing with larger numbers
I'm gonna say this is Delta
times 10 and I'm gonna instead of
printing it if Delta is not equal to
zero I'm going to actually run a request
because we're building web servers right
so we actually want to hit the requests
now this is gonna be a get request
nothing too fancy and the server that
I'm running my laptop right now is
sitting over here and we're looking on
port 5000 and I know they say don't make
it accessible to external hosts but this
is well alright and we're gonna hit the
dial end point and we're gonna pass
along the value which is going to be
some number and that number is held in
Delta alright great so this will run a
web request and totally ignore the
result and it let's let's see now the
requests import is actually quite big
that's why it's important that you want
to see this ready thing so that you know
when to actually turn the knob but
anyway let's give it a go to see Reddy's
not coming up Randy's not cut it's not
ready oh it's really not ready ok there
it is that's that yeah when you when you
pull in requests its it pulls in a lot
of stuff for a PI 0 and the PI 0 doesn't
have the fastest processor but so we're
gonna watch on the web server now to see
requests coming in so I'm gonna come
over here to our dial and I'm gonna turn
oh look at that look at that there's our
numbers coming in and if I reload it
over here without the parameters so that
I can see what the nope Wow
70 all right now I can take this and I
can go well we don't want 70 we want
like 88 yeah all right so great all
that's left is we just have to put this
into UI and we have we have this volume
knob on the Internet so let's whip
something up real quick with
ignore the global sorry let's let's put
something over here in this this home
template so I'm gonna just actually just
split this so you can stay over here I
want to open up this template and there
it is alright I was telling us that we
needed to edit some stuff great we're
editing this is going to be we're gonna
do a little JavaScript alright sorry
Jordan has giving them a bit of a hard
time about some of this stuff last night
this so here we're not gonna do too to
much basically it just logic wise the
idea is we're gonna just pull just like
this website over here is is showing me
the value let's just pull the value and
whenever that value comes up we're gonna
adjust like the width of an element so
let's let's make an element to kind of
mess with so I'm using a span because
I'm tired of divs so we're gonna call
this the dials an overload word let's
say value widget okay man we're gonna
write proper HTML so we need to read
that so this is the the knob widget is
going to be
the knob widget and we're cool all right
so we have something that we can play
with and just to make sure that we've
kind of got our styling right let's try
let's try setting the yeah let's update
see writing Python okay so here I'm
gonna take my knob widget control and
I'm gonna be very bold well here let's
make sure we call this thing once just
do a little no I want the semicolon
let's let's set the attributes on there
before we're just gonna mess around with
the style so I'm gonna put let's drop
some well let's make it shorts that we
can see that it's changing all right so
we're gonna set the style on there we're
just going to kind of dynamically
manipulate this so we want to make sure
that this is acting as a block element
and I'm gonna give it a background color
so that we can see what it is chat let
me know what color you want in the
meantime I'm just gonna go with teal but
I'll take whatever your your your
recommendations are and we're gonna set
the width to something we're gonna say
the width is 50 right so if we do this
we should have gotten nothing because
this is the wrong page it's why so I
need to look at the home page okay so
it's 50 I can change that I can make it
and make it a hundred
all right so we do that yeah all right
so we're changing our size now because
I'm just gonna mess around and assume
that all browsers implement the things
we're gonna do this as a we need to make
this a variable
and let's let's change this to dial
value okay so we're gonna set a dial
value the 75 all right so this should be
the kind of result we end up getting and
we want to basically just adjust the
size based on whatever this dial value
is gonna be all right so we reload it
yep cool it's working all right so our
job is really just to set dial value at
this point we need to go poll we're
gonna use polling I mean you could use a
WebSocket or whatever but we're gonna
we're gonna just pull very simply on the
server and you know every time we hit
this update let's fire let's fire off a
request okay
so well use the fetch API it's pretty
widely available these days so and you
have to deal with the XML stuff okay so
so we're gonna call this the request and
this is going to be a request and we
have to build a request where are we
going well relative to this server we're
going locally just to hit the dial end
point but we don't actually want to set
the value to anything so we're just
gonna kind of do that so that it says
okay I'm just going to tell you what the
current value is we don't need any
framers I mean there's there's basically
nothing to again I mean you get that
method by default I don't even really
actually sorry ice junking all this all
up I can let it do that because it's
gonna it's gonna assume that I'm on the
same server that I requested the webpage
from so if I have this request and I'm
gonna go and I'm going to fetch it then
this this is available so I can then say
or and we use new syntax I'm gonna get
back my request that's built and what
part do I want I want the just just give
me the raw text that comes back I know
that the things just gonna be a number
but
let's let's get the text and just to be
boring
let's when we get that text I'll call it
something else let's let's see it on the
console alright so if that works right
then we should go here and there it is
the the value came back it was 50 if I
check here in the server log I can see
that a dialect reload this yep there it
is there's my dial request come in and
so request API for the wind nice and
easy okay so we know that dial is coming
back and it'll have a number and we're
not going to check the input but you
would do that in a real application so
instead we know that this is basically
the dial value so I don't need this
anymore
and this knob widget I'm just gonna set
it right here oops
so this'll and let's just break this
line and it's gonna it's not gonna fit
anyway hey look I can cheat I can get
rid of the spaces yeah that makes it
nice and readable okay oh just barely
alright so line games aside if I reload
this page this now sets it now if I go
and I wow that worked I'm always shocked
with like code works so let's let's just
go and turn this a little bit so we're
gonna we're gonna turn that and we
noticed it's not updating on the webpage
but yeah it did it did when I actually
reloaded so let's throw that let's set
interval that let's just just start
hitting that endpoint you know so every
200 milliseconds check to see what the
value is so if I reload this alright
it's it should be hitting if I go and I
check the server
yeah it's hitting okay
so now if I turn it there we go
yeah there's a little switch bounce in
there and we can come back and
everything just kind of works
voila
there you go knob hooked up now if I
want to cheat because I did tell you
that this one was going to go to 11 we
could do the math on this dial value
that came in we could take that dial
value and we could divide it by 10 and
we could say that that is the text which
is knob text it's gonna be that and I
can set this attribute and at the same
time I can take this widget and set the
inner text of it to non text and if I
check that out now I'm getting the
number in here so this is showing us
that we went to 24 but
there you go and we have it this one
goes to 11
thanks everybody for dropping by I'm
going to be doing a live learn session
I'm going to continue on free code so
this will be this is your kind of
prepped things kind of work yeah because
they always work but running out of mana
so I'm gonna go and grab lunch and I'll
be back on streaming at about half an
hour so you know let's see what are we
go that's about two now yeah 2:30 all
right cool
I hope you enjoyed it and please if
you're around sign up for the discord
I'll I'll go find that someday because
it's yeah let's let's let's find it
together it's twitch we're gonna see
ourselves some coding guy yeah we could
see the lag okay but we're gonna ignore
all that and this is kind of the thing
that you're gonna want so I'm just gonna
drop that in chat and I got two main
roles in there and so inception aside
have a nice day and I'm Polly see some
of you and half an hour for some Godot
GD script we're gonna continue on the
game that I started at Lux Jim continued
on the game that