Welcome back to code time. This is episode four of controlling a, A 19 life X smart bulb with PHP and Vue JS. And then the last demo, we were able to show you the full process of doing just that. We set up a view JS page and a color picker, and we binded the color picker value to the selected color. We sent that value over to our PHP page, and then our PHP page sent it over to life X's API in which sent it over to our smart light bulb via wifi. And that all happens in less than a second. Like you can literally click the button and you can see the light bulb change colors. It's truly amazing. If you think about the distances that it might have to travel to make that happen, uh, back and sort of forth many times, uh, every time you click, I guess it's only going to come back once around, right.
But really cool stuff. In this episode, I want to show you how you can use a couple more of the effects. And so, for example, the cycles, uh, that life X is API provides. If you've downloaded the app and you've played around with the app that they provide, you can see the InBev, uh, various sort of effects. One of them is spooky. Another one. Um, you can set up color effects and different things like that. So these things allow you to sort of animate the color, transitions and switch them between pulses and things like that. And that's what I want to cover here. And the rest of this, you should pretty much be able to have a firm understanding of like what's going on and how it works. And you should be able to then apply that to whatever project that you're working on. And so whether your input device might be different.
For example, it's not a mouse interaction like I'm doing here where I clicked send event, it could be something like a, a leap motion, and you're using the leap motion to control a script. And the script then sends a request to PHP and PHP. Then we'll turn on the light or do whatever you want to do. And you can do that with your hand. So it's pretty cool full circle there on your ability to create whatever you want. So I'm going to start over here with my light folder and I have process dot PHP, and I have index dot PHP inside the current document. And again, this is the folder I have here called my light. And I'm going to drag that over to sublime tax that you can see those two files that I'm working with. I'm right, where we left off pretty much on the last episode here. And this time, I want to sort of go a little bit deeper into what's going on here. Uh, remember there's a link here that we set up. It says HTTPS to API slash life x.com/version/light/all/state. Well, because it's an API, each URL is going to be a little bit different based on what you want to do. So,
So if we go over to the life X documentation, and we were using some of the,
These, uh, API end points, we have one called
Just the lights and that'll list all the lights that you have set state or set States if you wanted to set multiple States,
Uh, and then you have state Delta toggle power breathe, a fact pulse effect cycle list scenes activate is scene and, uh, validate color. And so, uh, of course there's a various things that you can do. The one that I want to do is maybe the breathe effect, or you could do a pulse effect, and then you can see the, uh, URL that would be changed here, right? So it's HDPS slash life ex.com/version one slash
Eight slash the selector slash a fax Breathe. And so this is something that they've sort of set
Up for you as well. So if you go over to PHP Here, you can see, the period is two cycles
Is five and the color is green. And if we look at the
Body parameters, it'll actually give you a definition of what's going on here. So the period, the time and seconds for one cycle,
The effect, and then cycles the number of times to repeat the effect. So let's say I wanted to switch between red and green, red, and then green. And I wanted to do that a couple of times over, right? The period is how long it would take between red to green and the cycles.
It would be a number of times that it's going to switch from red to green. And so if we, uh, come down here, you can see some other things such as power On peak, uh, defines when The period of the tar colors at its maximum-minimum,
Uh, and values. You also have this from value, which is.
Pretty cool. And that's what I want to specify as well. So from color, the color to start the effect from, if this primer is omitted in the color of the Was currently set to it's used instead. And so I want to include that from color as well. And
We're gonna get this set up. It's a little bit different coat. So I'm gonna kind of go back to where we were before by just testing it on a PHP page
To start. So I'll
Duplicate this PHP page called process dot PHP, and I'm going to rename it to breathe because that is what our effect essentially is.
So now I have a breathe page right now, we're getting a mic color from Ghana. I'm going to just comment this out because we're not going to be getting this yet. And if we come back to
Our example here, it says, this is the link
That we need to have. So HTTPS,
API, life, X version, one lights, all effects
And breathe. So I just grabbed that again. I'm under PHP here. The next thing is our auth token. So this is my token,
Which is the same value here, because I've essentially connected the two of this with my auth token. That's why you're seeing it here. Then I have my headers and then my data period.
So here are my headers,
Which are pretty much the same. Here's my data,
Period. Two cycles five. So
This is essentially two, I believe this is in seconds. So two seconds and cycles. I don't think it specifies cycles. Yeah. It is a special ice, the number of seconds. So two seconds. So every two seconds, it's going to fade from red to green, but right now it's just going to go to green because we don't have another color. It's going to do this five
Times. So if I want to change that from color,
I could come over here and I could append another Valley. Right. And all of these are working on is just the simple and sign. So I could say, period equals two and cycles equal five and in color equals green. And then I could do another one
Say, uh, and from color is equal to red. And that's all set up now down Here, this seems like it's the same, but actually, it's A little bit different. So, uh, yeah, If we copy and paste this one, uh, right next to it, let me close this down here. Uh, this here, uh, custom requests, which is a put request. This is simply a post request. And you can see here, the difference here
Post and it put request, right? Uh, so if I remove these things and now If, again, I'm not going to go to index that HTML, I'm going to go to,
I read that PHP. And again, this is going to do it for two seconds and five cycles. So two seconds, one from green or from red to green, and then cycle back around. And it's just going to take two seconds to transition the colors. So let's go to our URL here. We'll go to slash breathe dot PHP and let's take a look at our light. So there it's red, it's green, it's red, it's green, it's red, it's green, it's fresh, it's green, it's red, green, red. And then back to its original color here, which I believe is blue. I think it started at blue.
See that's how that would go through that process. So if I wanted this to be very quick, I could say something like, um, maybe change his color to white, or we could put in our hexadecimal colors and I'll change this color to blue. And then I can change the period, which is now one second. And then the number of times that this is going to do it, I'll say is 10 is 10. So, so 10 cycles, let's refresh this and see what we get.
Yeah. So it's white, it's blue,
It's white, it's blue, it's white, it's blue, it's white,
It's blue, white, blue, white, blue. And you've got this nice sort of, sort of
Re the fact as that it's set up, I get a course, change this to be much slower, maybe something like four seconds and we'll refresh to this.
And so then you can see it slowly switching over and then it's back and then it's wide again. And then it's blue again. And then it's wide again. And so you can start to build out different effects with that. Now imagine you setting up two of these lights and now you're mixing those colors together. You could put on quite the light show. So now that we have this set up,
I need to take these values and
Be able to control these values inside view JS as I wouldn't want to have to manually go into here and do it each time. So how would I do go in fact, go and do that? Well, before we get into the JavaScript, let's set up some of the rest of the PHP. So we'll go over to a PHP or it has my color. And that could be either the color or we can do a from color. So let's do that as well. I'm going to just change this value to color, and then this value to from color. And we'll just match up those names exactly how they are, it's going to get from color. And then here, we're going to say, cycles is cycles, and then period is period.
So now we have controlled period cycles, color and from color. So sometimes I like to clean this up. Like this just looks a little bit easier to read. I need to pass these values down here now. Okay. So to do that, we're going to have to do that. Concatenation so start with a color one, which is right here in the middle. So what was blue? I'm going to do single con single quotes and then periods for poetry concatenation and then for, from color, where was white, I'll do single quotations and inside of it, I'll do up a, hit the wrong key there I'll do from color and they don't need this last one. And I can put a dollar sign on it. The next one is cycles. I'll make sure to copy the dollar sign this time. And it's 10 currently, although single quotations are then concatenate the value with the word cycles and the periods.
And the last one here is periods a, which has two periods, and then the word period in between it. So now, if I write a URL that passes all of these things in, it'll pass it over to data and then it will be able to run. So now these names, we need to make sure we match these names here in the rest. I'm going to change from color to something a little bit more, just like F color, just so it's a little bit shorter. So these are the values that I need to get. I'm going to just copy these over and go to my index dot HTML page now so that you don't lose this. I'm going to duplicate this page and call this page, breathe dot HTML. And this is page that we're going to essentially run our R Q J S N.
Currently we have a Sen color button. We have a selected color. We have all those. We essentially need to scale this a little bit more. So what I'm going to do is just pace this. And of course, I'm just doing this
France. We need to build those other input fields. So here's
Going to be one, that's a color. It was selected color. And then here was selected color here. Again, I want to change this to
Maybe something like F color,
Then this value. I could say something to just color, or I could say as color, doesn't really matter. I'm going to leave it as select a color, but this one I'm going to do is F color. Uh, we'll need to make another input field. So we'll say here's our new input field. And this one's going to cycle. Cycles is a number. So I'm going to specify this as a number field, and then I'm going to use a V model
And I'm going to bind cycles to it. I'll copy this over and paste it because like I'm missing a less than there. And this one will do period. So we'll just do period there. Now I need to put labels on these things because I don't know what they are,
And that's a bit of a problem. So I could do something with like a placeholder tag, or I could do something with a label tag. I'm going to do something just with a basic label tag. And if we wanted to make this essentially correct syntax or semantics, and we need to specify the name of what this is. So I'm going to just say, this is for cycles. And then this is going to reference an idea of cycles. And that's just our correct form code
Syntax. And I can do the same thing for this next one down here. This one's going to be period, period here in period there. And then I need to create an ID of period. Yeah.
And this ID and for that allows you. So when you click on the word period, it actually takes you into the
Good field for the idea of period. I don't need to select a color here anymore. And now we have a basic sort of setup I can get rid of this old PHP code that I just dumped in there to reference. Now we need to say
These additional models that we just created. So the first one we had was selected color. We'll make another one called F color. So we'll say comma F color is also equal to know. And that way you have to set it each time I'll set up the cycles and the cycles, I'm going to say our node as well.
Or we could specify
Maybe something like one cycle
Around once. And then we can say the period is about two. And that one, we don't need another comma because there's nothing following it.
Now we have the two colors. We have the cycle,
The period. So now we got to do a little bit more here, right? Uh, when the, I can get rid of some of this extra stuff here
Was our value. So here was color. Absolutely. We did that string replace here.
And then we set up the URL question, Mark Kohler color
Equals our color value. Here. We a pass in additional
Parameters and then additional parameters.
It's pretty similar to what we're doing, but we're doing it in JavaScript now. So in order to do it in JavaScript, we're going to have to do a little bit different syntax, and that's going to be a plus sign and then single quotation.
And then we're going to do an an just as we did before. And then the next one,
The value that we're going to name. So the next value that we're going to name, it doesn't really matter the order because it's all going to get sent to the same
Place here. Again, we have F color. So we'll do, uh, and, and these names, right? So we're aware, selected color. If we go over to our breathe dot PHP, it's now equal to color. And that's what the color value here is. So we need to these the same
Values as what we're sending here
In the breathe dot PHP. So I'm going to say, and F color is equal to, and then we need to do that plus for essentially
The same concatenation, but in JavaScript,
The F color value, and then we'll do it again, plus single quotation. And then this time we're looking for the cycles and we're missing an ampere or an sign there, right? So, uh, there it is. And we'll say equals same thing, plus cycles. And then we'll do another plus single quotations. This time is period. And we're almost there period equals and we'll do the plus. And then we'll take the period value here, which was
The same period value is here. I guess it doesn't really matter.
We could erode it. And now we seem
Like we're set up. So it's going to hit this URL.
It's going to pen the color, the F color, the cycles, and the period. Let's see if this is working now. So we'll go back to our page this time. We're going to type in breathe dot HTML. And if you need any of these,
These files, they're available, the exercise files are
Here on code time, IO, co time IO. So take a look at that. Uh, that'll help you through this. So here's our first color. I want it to be a yellow and let's take that yellow and change its value to a green. Let's do yellow to red, a yellow to green. Let's see what it looks like. And then
Many times do I want this cycle to happen? So how many times is it
Just going to loop around? I'll just say 10 times. And then here, it says, period, how long do I want that to be? Like, how long a period? How long a time? I'll say two seconds is probably good. And I'm going to click the send color button. And we got an air. It says, F colors not defined. So let's take a look. Here's our F color. And here's F color and here's color. Well, we didn't specify the app or this on me. So we'll need to do that. I can, we can say app, or we can say this, but I'm going to go with app. So it's app dot cycles, and then we'll do app dot period.
And now we will, uh, of course we have to refresh this and choose new colors. So we'll do the same thing. I'm going to just do green to yellow. It'll work the same way, close this, like the color let's go with the yellow now cycles are maybe five times and two and one click send color. And we can see now that are, it looks like it didn't send for us. So here was our cycles. Here was our period. And here was all of that value. If we want to see what this URL is, we can go and take this URL and console log this value just to make sure we did everything correctly.
Don't need that. Semi-colon click refresh and we'll choose the two colors. Let's just do something random, like a blue, and we'll choose something like a yellow. And we'll say 10 cycles and click send color. And this is our URL. So color is our color value. F color is our second color value and cycles is our third color value or fourth color value period. And then when we look at this, we realize we have that pound sign then for color again. And so we need to do the same thing we kind of did here. So we'll grab this and this time, we'll say F color is equal to the app F color, and we'll replace the values.
Now, if we refresh this, we'll flick our color. We'll say that this is, uh, I want to do blue to yellow. I'll choose a yellow. I'll say that there are 10 cycles. It runs for two seconds each time. And I click send, and this is what we have now F color that doesn't seem to be replacing it. Yeah. So we say apt dot F colored. I replaced pound sign equals F color. Oh, cause I'm referencing app dot F color. There let's remove one last time. Here we go. Choosing the blue, choosing the yellow again, this is the part of development, right? We at the task, we have to, uh, try it out 10 and two colors. Let's click send, and it looks like our URL now is color passes. The color and F color passes. The F color and cycle is 10. And period is two. That all looks pretty good, but it's all going to the process that PHP page, this needs to go to the breve.page. So if we refresh this now click on our colors, promise this is going to be it. This is going to be the last time. Here we go, and let's do yellow and we'll do 10 cycles. And period of two, we click send and now we're getting color changing. And you can see that right here to the right, and it's going to do it 10 times.
Now. What's cool about that is I can come over here. And again, this is asynchronously. I can click on red and maybe I want to switch this over to like a purple issue a year pinkish color, and I want to go red. I'm going to do this a smaller amount of time. I was going to do three and this time I'm going to slow that, that sort of into five seconds. All right, so this will be 15 seconds. Total click send color. It's going to make another request. There's our red and there's our pinkish color. And then we're back to red and back to pink and back to red and back to pink. And I can continue to do this by just sort of switching out these colors. Let's say I wanted to go from green to red and click send color. There's our red and there's our green. And there's our red again. Now I can course slow this down quite a bit and say something like, I want this to take, uh, let's say 25 seconds to do this. So I'll click send.
So there's red and it's very slowly turning to green and there's our green. And now it's going to go from our green to very slowly to our red there. It's starting to turn, it's turning and now it's red. So that's, uh, that's essentially the setup right now. You're able to control the breath of fact and you should be able to, as they add more effects on the add more, uh, sort of filters or things that you can do with it via the API, you could start to extend your project with that as well and connect it with whatever you're doing. So I hope you enjoyed this series here on code time on controlling life ex smart light bulb with PHP. And of course, Vue JS.