Press "Enter" to skip to content

Let’s Code a Pomodoro Button – FunFunFunction #30


good Monday morning I am mpj and you are

watching fun fun function today we are

continuing a series where we are

building a Pomodoro button and if you

don’t know what that is or you’re

confused and haven’t seen the previous

episodes you can do so by clicking there

but the goal for today is to I think

we’re gonna press that there and then

it’s gonna make a likely thing there you

go round and round and round and round

here and when it has done that it should

log that to the server let’s get going

okay because I have the memory of a

goldfish I tend to keep a work log and

last time we did this we did an

automated deploy of this thing on Google

container cloud because that was such a

hassle and I did that every time I made

this video just get warmed up I am going

to I’m going to do that deploy now oh I

need to connect to docker you’d have a

doctor terminal one thing that strikes

me when working with this project is

that docker Wow very nice it is also

very slow like it’s with development I

think that one of the most frustrating

things you know when we when we talk

about users we we have this all these

kind of data saying that the user

experience should hit you below 100

milliseconds there’s a study that Google

did that showed that once they made

longer search result they had a lot

lower conversion rate simply because the

the the search results took like 110

milliseconds instead of 90 milliseconds

to load and that made such a huge

difference so we tend to be very wary of

above milliseconds here and there but

when it comes to our own experience our

own development tools we tend to just

thirty minutes here and there whatever

while we’re waiting for that I want to

make sure that we have defined our

current goal and that is gonna be press

a button on the phone and have I can

type go around the clock in quotes and

Oh No okay I think this means that we

can get odds let’s log that logs no yes

okay and now if I press the button yes

yes yes yes yes hahaha it’s showing

things on the screen on the internet

when I’m pressing these buttons that is

why I’m so excited

and that is what makes me a nerd okay

let’s go back to the work log press the

button on the phone and have it go

around the clock and then report back to

server I’m not entirely sure how to go

about this I want as much as possible of

the logic to be on the server but ah I’m

not sure if there is any benefit at all

to that in this point I want I think I

just want to go into the photon right

now and do the around the clock motion

immediately upon the button press and

yeah let’s start there what is this

no it’s particle I own this is a great

okay so I want your house like this

why did it do that how did it Oh what no

I’m flashing it

oh it’s this one and I wanna press this

one it lapses anyway here is on the loop

thingamabob here I want to do something

I want to because when I when I press

like I’m at this logic point here it’s

when I press don’t know it’s flashing I

have to wait for it to flash it because

I accidentally press the the button here

which flashes the thing down from the

Internet to the device that’s what I’m

waiting for

I’m waiting for it to flash and boot the

phone is pretty cool from this wall okay

not doing something did i flash it with

something else

no it’s what is it doing

flashing green okay alright I think this

is the software yeah because when it

boots when it setups here it does this

sweeps function which is down here and

that is what the swipey thing does and

then up here on the button 100 when I

press this button here button 1 it

should oh okay that is this is button 1

okay I want to press the left one the

left button and that is help I can talk

here I want to make the thing go round

so let’s see what are these parameters

this is can I get this bigger for you

guys yes I can not that bit that way

okay so here we have an LED thing yeah

this is this is the first

the first primary here that is the the

number the index of the lead that we

want to light up and this is the colors

so let’s just try this like I want to

light up the first two lands and see

Wow now I’m gonna press this button okay

so that is index 1 and that is index 2

and they are staying lit because the the

old one the old code flashed this one

and then it turned off after a little

while and it did that because I’m

turning the LED number 3 off so it’s

that one but it’s these are number one

and number two I think I’m gonna keep

them green I like the green ones because

it gives a good sense of accomplishment

that’s the point of the Pomodoro timer

it’s supposed to give you a sense of

progression ok so we know how to start

lighting these up because we’re gonna

just go like 1 2 3 up like until we have

it does that for 25 minutes like I

talked what how do we do that

because this this is not like Java

Script this is some C dialect and the

loop here it’s going to be running all

the time so what we’re gonna do is we’re

gonna set this button it’s gonna set

some kind of states how do we do that I

guess can we just declare variables up

here like a rules now not do spin state

I knew nothing about this language so

I’m just winging it completely means

they that’s the basic state does that

work okay right okay can you compile it

yes

all right yes it’s here so that you can

see yes

code verify the great work it’s nice

that would be great work all right

so when I press this button it’s gonna

be change the state to how

let’s call it that and we’re gonna

create a new if here if state equals

counting we are going do you do what are

we doing here are we want to lightly

leads up as we go as time progresses so

the longer from the time we started

counting longer the time has passed the

more laps we want to light up so I think

we need to keep track of when we started

counting

so how okay particle date time current

maybe store when pressing the button we

want to set count start time dot local

and we want to create calculate

difference between when we started and

current time time dot local – the start

em so this will be the difference

between when we started counting and

what the time is now and with that so we

want this to light up let’s the longer

we have the traveled on the journey of

25 minutes but I’m gonna make it 25

seconds for now otherwise debugging will

be strange so we’re gonna say that

Pomodoro signs it’s going to be 25 times

this is this milliseconds or what is it

keep the current time zone in the

correct time zone as second since

January 1 all right so I this is gonna

be second so we want to know 25 second

ok that is seconds and this sense

I like having longer variable names that

and having them to be different this

thing it has 12 police I think so

we are going to like LEDs for number of

LEDs to light

divided by 25 I wonder how this will

round it probably will work see and we

how do you do this

oh let’s just be afforded equal zero

we’re gonna loop here while I equals

number of leads to light and I need I

need I need I need I need something like

this it’s gonna be be led on and it’s

gonna be I yeah so taking the interior

here the law I don’t think we’re gonna

start and yeah I think I need to add on

to that or it won’t work so yeah I’m

just gonna remove these verify yeah it’s

compiling just compile yes

citing what oh I think this is I want

this and nothing okay what is wrong

why doesn’t did how do we debug this

thing I think is there some kind of

print or something particle published

booted can I so these things can I see

them somewhere can i if I click the

I can do this can view this in the

Chairman election uh I have to remember

to delete this access token here when I

publish this video but wait a minute

it has worked now afterwards this is

what we it works it works

I is yes didn’t realize what the

consequence of my code would would be so

now it’s actually as 25 seconds go past

it will it will light up more and more

meds come on there you go okay let’s

change this to yes be 10 seconds or

something

so that comes saner oh saint counting

like 5 seconds and that’s my boot up

it takes a long time this is definitely

not 10 seconds it’s very slow it’s like

more like wait a minute I’m not I’m not

using this variable anywhere I need to

do that okay

let’s flash it and see what what that

does you things mm-hmm now this should

be faster this should definitely be

faster why isn’t it it’s doing what it

should though it is just too small

I’m just watching it because you know I

made this I’m proud of it let’s watch

this stream on the terminal do you like

particle publish and starting counting

so if I had a second person here I am

sure that that person would have spotted

the error but now I’m just stuck on my

own this is if you watched the previous

episodes where we pair program where me

and David Fred programs you’ll see you

see how much more efficient that is

because you don’t get stuck at all for

for for long periods of time which you

this is so embarrassing because you

probably have figured this out like the

minute I started doing this this number

of let’s light is wrong this is what I’m

actually calculating is the percentage

of lights to light or something like

that which is gonna be either 0 or 1

because these are int so it’s gonna be

number of LEDs total 12 these two light

right this won’t work though because

these are int and I want this to be a

floating-point values and I’m not sure

how to convert them to that I’m just

gonna publish this and see what I get

yeah yeah so it does what I I get the

industry who result right but because

these are floats the percentage doesn’t

work I need to make this into clothes I

want this to be a float how do I do this

but I’m gonna try it anyway oh yes it

actually worked

right okay let’s make that Oh Dora six

seconds twelve so one so that should get

us one LED lighting up per second – come

do you yes all right yes we’re almost

out of time we need to do the publish to

the server when you want to publish an

event to the server if number of LEDs to

light equals 12 we want to article

publish this event we want to publish

publish o complete one I don’t remember

what these things are and also we don’t

want to do this a thousand times

so we’re gonna do a Maduro complete

publish true and not see stable that

did something bad expected problem

what is wrong with this oops I can’t do

that in expected primary expression

before equals – oh wait

I mean is code in JavaScript in C++ here

code verified great work awesome

all right going around and when it

reaches the final one it did not or not

equals false if that is false there

right publishing again pressing right

this time

get there get there publish pomodoro

complete please yes now we just need to

have this picked up by the server so I’m

going to go back to Adam and find our

server code we haven’t seen long time we

need to all right so we actually don’t

do much where there we just request the

body out so we should this should

actually already have worked so we can

I would have expected a Maduro complete

here but maybe the service hook template

oh we have to make a we only have a web

hook for the forward event or the button

event so we need to make one more for

that thing okay you know what

that we can only have one web hook per

file and I’ve kind of tied my deploy

script together with with just having

one file so creating several will be

messy I’m just gonna do a dirty one and

call this server event and go – no –

back – oh call this server event there

and I will need to republish this

service hook template I already know

what I’m gonna I’m gonna cheat a bit

copy this cuz I already know what the

IPS paste all of this in here BAM

mmm now particle web for list steal this

here for that end and particle web work

creates what’s called serve this hook

template dot JSON now rule and it’s it’s

in the deploy directory cool we have

created web hook let’s delete the old

web book list what all right there we

are and watch is watching for button and

this is our new one watching for server

event we want to delete this one so I’m

list watching serve air vent now I think

we’re good let’s publish that and see

what we get

yes Pomodoro completes this means that

we actually achieved our objective we

have press a button on the potent and

have it go around top and then server

whoa yes you have just watched an

episode of fun fun function I release

new episodes of fanfiction every Monday

morning Oh 800 GMT time so make sure

that you subscribe so you don’t miss

next one and if you know why wait but

and if you don’t want to wait that long

you can check out some of the other

episodes by clicking until next Monday

morning stay curious I am no gum to make some faces

Please follow and like us: