Setting an action to happen on specific date/time from web page

Hi Guys,

I’m working on project with a web page an the Electric Imp. On my web page I allow the user to input a date and time along with a submit button. How can I send the day & time to the agent in which forwards this data to the device. From there, the device will jump to a function in which turns on/off this device based on the user input (date/time)?

I’ve been looking for similar projects as reference but with no luck. If any additional information is needed let me know.

Thanks for the hand.

I already have the code set up where my appliance turns on/off based on a push button within the app. So, I have the code to send the push button within the agent:

if( jsonRequest.request == “buttonPressed” )

device.send( jsonRequest.request, jsonRequest.button );

Relatively straightforward.

Firstly you need a common reference for date time. As @coverdriven had noted in another post, this value would be a unix timestamp representing the number of seconds since 1/1/1970. Check out http://www.epochconverter.com/ for more info.

You can either calculate this via webpages using javascript or you would need to first post the future date time string to Imp Agent and then use Squirrel code to convert. You then subtract this value from current unix timestamp to determine when the time event must fire.

There is then an imp timer method which you can use to create a future timer event using the imp.wakeup method. Note the max limit. You can create a future date time event up to 248 days away. This method can be used in either agent or device. If you create the event in the device the device function which is called when time event fires can then be used to do what you need it to do.

Hope this makes sense.

I’ll have to read it a couple of times but I get the idea (haha). I really appreciate your quick reply!

I’m a little confused. Right now, I’ve implemented just two standard text boxes. When clicked, they pop-up a calendar. When the data is picked, the date is presented as such: 04/08/2015. I have not set the time feature yet. But, when the submit button is pressed I can have a function that will need to translate the “04/08/2015 and time” into this UNIX time stamp (based on epoch’s javascript conversion) which is just represented as a int value. Then, can post this int value to the agent, and the agent can then forward the int value to the device. But, how will the imp know that this int value represents a week from now?

I’m sorry for the confusion. Just trying to put the pieces together.

Thanks.

Time is easy too. With html5 there is a time input type. This ensures that the input is in the hh:mm (:ss) format. You can use the javascript date function to create a date object. You can then get the UTC time as at 00h00 for that date using the getTime method. Just add your input time to this timestamp by converting your time input to seconds and adding the two.

This then gives you your future unix time stamp (i.e. the timestamp when you want a timer event to trigger). Then, as you correctly say, you post this to the agent. Within Agent you now need to do some maths in order to know as you say that it will be “a week from now”. To do this you need to know what current time is. You get this by using the time function.

You then subtract one from the other. This then gives you the time in seconds before the event will trigger. You can then send this value to your device. Remember to then convert this to a float and use this value to set up your wakeup routine.

When you say “your website”, I assume you have your own website online with a shared webhost, such as GoDaddy?

If so, you can use JQuery date/time picker as the UI (user interface) to enter the 2 times, and PHP to convert the times to UNIX timestamp and POST them to the Imp agent. This happens as soon as the user picks the 2 times and clicks ‘submit’ on your web page. Let me know more about your website/ web page.

Using JQuery and PHP automatically formats the date/time inputs, so the user can’t enter them incorrectly.

This is an example of what I mean: http://www.catpin.com/appliance

I do not. I’m using my own site using a temp server through Visual Studio.

My project is based on MidnightMaker over @ instructable

Here is my html thus far. It using that “action_page.php” which actually formats appropriately and looks nice on my phone.

https://jsfiddle.net/nkznn6yL/

There is the “datetime-local” which places both date/time into one line. So, where I’m stuck now is doing all the sending of data really. So, should I start by doing an onclick=“passData()” type of thing? Then in this function of javaScript post this over to the agent and then over to the device?

Thanks for the help guys.

@mlseim, I just looked at what you have. That is basically exactly what I went where it returns the epoch time. I’ve tried to implement that calendar into my html and it’s just kind of clunky looking on the iPhone. The date and time (or datetime-local) automatically brings up a default scroll through menu for the date and time. Apparently its function was implemented with HTML5 then removed & now it’s a permanent feature (Safari compliant). I know that this feature does not work with Chrome/IE.

Found this, somewhat, confusing article.

http://encosia.com/setting-the-value-of-a-datetime-local-input-with-javascript/

I trust you’re aware that your Imp Agent has its own URL: https://agent.electricimp.com/ ---- Unique ID -----

… and that you can create its own webpage for this sort of thing - I have already implemented a date picker and time input box on my webpage. This works well as it removes an external interface between Imp agent and another web server, such as through GoDaddy. The only thing is that the url is not easy to remember.

For website I used mixture of jquery / jquery-ui for handling UI / datepickers etc., javascript for form validation and calculating unix dates etc. and then ajax for posting data to agent.

For css and the nice stuff I use the getbootstrap template. As @mlseim had mentioned in another post there is a handy example of how to get started using this template: take a look at this: https://github.com/beardedinventor/ElectricImp-PowerSwitch

So instead of using form post method with a submit button you handle this using the onclick() method. E.g.

<button type='button' class='btn btn-primary' onclick='sendData();'>Submit Time & Date</button>

Then you have a script “function sendData()” to handle calculation of unix timestamps and the posting of this data to the agent.

Then within Imp agent there is the http.onrequest() method which allows you to do most of what php server-side scripting can do. Requires a little bit of out the box thinking but it works well enough.

Yeah, I’m fully aware of that. Please refer to my github for source code. I think then, you can get a better feel for the project i.e. how data is being sent & my intentions.

https://github.com/jboss10/GarageDoorSystem

Sounds intriguing but I’m wondering why you want to automatically set your garage door to open/close on a certain date/time?

…haha

The reason I laugh is because I was explaining this to my mom and she kind of said the same thing. But came back with, “Well, if someone needs access at a certain time to the house you can set it to close after they leave.”

You’re right though, why? Well, this is a project and a huge learning experience using different techniques/methods/coding so, why not lol?

Just really banging my head against the wall trying to send the user input of the date/time to a function after clicking submit and then converting this to the appropriate timestamp. Don’t want to give up but don’t want to spend too much time either.

I used the same Instructable to create my garage door opener (I’m Instructaspark in the comments). I set my code to send me emails when the door is open and automatically close the door after 15 minutes (in case I forget). I can also close it from the website if I get an email saying it is open and I’m not expecting it to be.

Learning is good, don’t get me wrong :).

I also have an imp controlled garage door. With limit switches to monitor position. If someone needs access, they call me on my cell phone and I simply open it for them while they are in my driveway. That way, I know it’s them calling me, and I can close it when they leave. Even texting works if you don’t want to actually speak to them. I can check the status of my door at any time (open/close) to make sure it’s closed.

That rational made sense to me too. Because the problem with setting a date and time to close it after a person is supposed to show up doesn’t work if they don’t show up and never tell you. Then the controller thinks it’s closing the door and it actually opens it. It better have a check to only close if the door is currently in the open state.

Yeah I set mine up with magnetic reed sensors which actually work really good. Maybe I’ll ditch the idea and keep what I have.

Buy another imp, like an Imp002 mounted on a breakout board and start another project. You know you’re addicted to this like everyone else. You can make other things turn on and off, like outdoor light displays (even during Summer, not just Christmas). I’m thinking of making some interactive art project in my front yard.

I’ve pulled together some code and created a quick demo for you to see. Please note it has not been tested fully so hopefully no bugs. The demo simply sends an email to an email address at the scheduled time and date. It uses the Mailgun API so if you don’t get an email exactly on time it is probably because of their email queuing etc.

Note this web-browser interface is all done through the Imp Agent. Now as I have to show my agent ID URL, I am only going to keep this “live” for the next 2 to 3 days. This is a working demo - I have purposely limited the forward scheduling dates to only be +4 days from current date.

https://agent.electricimp.com/CUAZW2ZwImuA

If it works ok I will see if I can port the code across to github over the coming days.

I can think of one good project for your set date/time start/stop devices. There is an Instructable about making a fake TV for when you’re on vacation. It is an array of RGB LEDs which flicker to simulate someone watching TV. It is designed to reduce the chance of robbery. It would be good to set a time for this to go on and off so that it emulates someone watching for real.

Edit: http://www.instructables.com/id/Fake-TV-Burglar-Deterrent/