Arduino Ethernet Web Server + SD Card + Jquery to control the relay

Hi Guys,

I want to create a project lighting control system via Web Browser, I was inspired from a project created on the site http://codingowl.com/readblog.php?blogid=154 and Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino, and I tried to do a combination between the two to generate a Web Server SD Card that can do On / Off to Relay via Buttons I created with HTML and CSS code. I have modified both codes obtained from both sites, but I am NOT a GOOD PROGRAMMER :frowning: , so I need code corrections from Master here. I want to make an interface display of the light control system as shown below, if "Red (Off)" button is clicked it will be "Green (On)" button and Device status will be "Off" and vice versa.

Arduino Code Google Drive: Sign-in

HTML Code Google Drive: Sign-in

JavaScript Code Google Drive: Sign-in

I am unsure of the Arduino and JavaScript code above if it works, because I do not understand that. What can I fix or change from the code?

Please help me, to help me finish my code.

jurs:
What about using a little bit different approach?
no SD card
no Javascript
no jQuery

Actually if without SD Card, Java Script, Jquery, I've found it on post http://www.boarduino.web.id/2016/06/control-relay-with-arduino-dan_25.html, but I want to more easily modify It looks with HTML and CSS code, therefore I want to make it using SD Card and Jquery.

jurs:
What do you think?
Do you want to see the Arduino webserver code for such a home automation interface?

Yes, I want to create an automated home interface as you ask, I plan to integrate with NTP Server to automatically control the Relay. But here I do not question it first because I think it's better if I ask one by one.

Can you help me?

IdrisRizal:
Yes, I want to create an automated home interface as you ask, I plan to integrate with NTP Server to automatically control the Relay. But here I do not question it first because I think it's better if I ask one by one.

Can you help me?

Yes, the Arduino webserver sketch, which I used to create the screenshot from reply ä#1 should be someshere on the harddisk of my PC, I will just have to find it.Then I can post it.

How many devices do you want to control?

I think, up to ten devices should be possible easily, by using just an UNO and Ethernet Shield.

If you tell me more about

  • name for devices, as to be printed in the application
  • pin numbers for those devices to be turned ON and OFF
  • switching logic of your relay module:
  • ist it "active HIGH", meaning HIGH is ON and LOW is OFF
  • or is it" active LOW", meaning LOW is ON and HIGH is OFF
    ? Which switching logic? Active HIGH or active LOW?

If you tell about that, I can include it in the example sketch as needed, before I post it

NTP time updates is not yet currently included, but should be possible, I'm sure.

What for do you need time and date in the webserver control sketch?
Is it just to display date and time in the user interface?

Or do you want to have "switching by time" also, not only "switching by commands from the HTML user interface", like tapping HTML buttons?

jurs:
How many devices do you want to control?

I want to control 4 devices.

jurs:
If you tell me more about

  • name for devices, as to be printed in the application

I'm using a device:

  • Arduno Uno R3
  • Ethernet Shield W5100
  • 4 Channel Relay Module
  • RTC DS1302 (in addition, but I will not use it if NTP works, and I hope NTP can work)

jurs:

  • pin numbers for those devices to be turned ON and OFF

I am using pin 2,3,4,5 as Output.

jurs:

  • switching logic of your relay module:

The logic I use is that the user can turn on or off the Relay device with just one button, if the device is turned on then the button will turn to Red (stating if button is clicked again then device will Off) but if device is off then button will Turns green (stating if the button is clicked again then the device will turn on) as well as the Status of the device will change according to the Click Button.

Regarding this Logic, I can sure make it with the Source Code snippet I found from Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino because I've tried it, but I Confusion to integrate with NTP to "Switching" to Automatically Relay devices based on Scheduled schedule. And I hope you will help me to do that.

jurs:

  • ist it "active HIGH", meaning HIGH is ON and LOW is OFF
  • or is it" active LOW", meaning LOW is ON and HIGH is OFF
    ? Which switching logic? Active HIGH or active LOW?

I use Active Low.

jurs:
What for do you need time and date in the webserver control sketch?
Is it just to display date and time in the user interface?

I want to "Switching" to electrical devices like Fan, Lights, and other devices on my Campus based on Scheduled Lecture Schedule, so if Lecture Schedule has arrived, then the lamp and fan will be on, but after Lecture Schedule is finished then the lamp And the fan will turn off automatically. That way we can save the electrical energy that we use every day.
So not just display the date and time.

jurs:
Or do you want to have "switching by time" also, not only "switching by commands from the HTML user interface", like tapping HTML buttons?

I really hope you can help me to integrate NTP with Relay device so that it can be done "Switch" automatically based on predetermined time, and customize the code NTP yand with code located on the site Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino.

Thanks for replying and wishing to help me.

IdrisRizal:
I want to control 4 devices.

Name of the devices?

Shall I create an example and simply name them "DEVICE-1, DEVICE-2, DEVICE-3 and DEVICE-4 in the HTML user interface?
Or which names would you like to use for those devices in the HTML user interface?

IdrisRizal:
I really hope you can help me to integrate NTP with Relay device so that it can be done "Switch" automatically based on predetermined time, and customize the code NTP yand with code located on the site Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino.

Getting time and date from the Internet by using NTP time server is not a big deal with Ethernet Shield and W5100 chip.
I've done that before.

Which country are you located?

For reliable NTP, you better not decide to use NTP from the other side of the world.

I.e., if you are from Sweden, DO NOT USE NTP server from United States!

And if you are from United Kongdom, DO NOT USE NTP server from New Zealand!

Always use NTP server from the same part of the world where you are located!
This is much more reliable than sending NTP requests around the world.

How exactly do you need your timed switching?

Is it "daily switching times by the minute", and "accuracy up to a couple of seconds" is enough?

Or do you need switching times accurate to less than one second?

How do you want to define switching times?

Compile switching times into the program?

Or do you want to create a user interface for editing all switching times in a web browser?
So that a user can enter/edit switching times and then "send" new switching times to the Arduino? This would be somewhat more complicted than to compile all switching times into the code.

jurs:
Name of the devices?

The device name I will use is relay1, relay2, rela3, relay4.
Four Relays I will use to turn on the Lights in 4 Rooms.

jurs:
Which country are you located?

My location in Indonesia.

jurs:
How exactly do you need your timed switching?

Is it “daily switching times by the minute”, and “accuracy up to a couple of seconds” is enough?

Or do you need switching times accurate to less than one second?

How do you want to define switching times?

Compile switching times into the program?

On or off will be arranged according to lecture hour, for example we enter the room at 07.30 until 10.00 in the room to one then Relay1 will live until 10.00 and will Off if it exceeds that time. If we log in again at 14.00 to 17.00 then Relay1 will turn back until 17:00 and will Off if it exceeds that time. So every day time switch will be adjusted to the schedule of the lecture we take so that the light will light up when we enter the room and will Off if it indicates the time out.

So also with the second, third and fourth rooms, adjusting to the time of entry and exit from our college schedule.

If you created a source code sample for me, then I will try to adjust to what I want to create.

For example the logic I use you can see on the piece of RTC DS1302 code I made.

 // Pin 2 will be assigned a value of 0 to light at 07:30:00 and will be rated 1 for Off at 10:00:00.

    if (myRTC.hours == 07 & myRTC.minutes == 30 & myRTC.seconds == 0)
    {
      digitalWrite(2, LOW);
    }

    else if (myRTC.hours == 10 & myRTC.minutes == 0 & myRTC.seconds == 0)
    {
      digitalWrite(2, HIGH);
    }

jurs:
Or do you want to create a user interface for editing all switching times in a web browser?

So that a user can enter/edit switching times and then “send” new switching times to the Arduino? This would be somewhat more complicted than to compile all switching times into the code.

Actually I want to make it, but it seems to be a bit more difficult and takes a long time for me to do. Therefore I do not make it difficult, but if you can help me why not.

With the Web Interface is indeed easier for users to set the time On / Off according to the schedule of lectures we take.

IdrisRizal:
The device name I will use is relay1, relay2, rela3, relay4.
Four Relays I will use to turn on the Lights in 4 Rooms.

My location in Indonesia.

OK.
ntp.org is keeping a list of NTP servers you can use, and they will redirect your NTP requests to a suitable NTP server in your area.

As ntp.org says, in Indonesia you should send NTP rqests to these servers:

server 0.id.pool.ntp.org
server 1.id.pool.ntp.org
server 2.id.pool.ntp.org
server 3.id.pool.ntp.org

I’d give it a try and test whether these four servers offer reliable NTP time services for your location.

If it does not work with time servers from Indonesia, you can always switch over to use NTP servers from other parts of the world, like USA.

IdrisRizal:
On or off will be arranged according to lecture hour, for example we enter the room at 07.30 until 10.00 in the room to one then Relay1 will live until 10.00 and will Off if it exceeds that time. If we log in again at 14.00 to 17.00 then Relay1 will turn back until 17:00 and will Off if it exceeds that time. So every day time switch will be adjusted to the schedule of the lecture we take so that the light will light up when we enter the room and will Off if it indicates the time out.

Now it might become complicated with some logical problems:

As far as I have understood you want TWO different user interfaces:

One user interface offering "toggle ON/OFF by tapping a virtual button in the web browser

And another user interface to enter “ON time” and “OFF time”, changing each day for each day and each room.

I think you have to decide, which is the priority.

Example:

If you programmed a switching time from 7:30a.m. to 10:00first, and at 9:00 you enter the togglee interface and toggle the light: What do you want then?

  • switching by time says: light has to be ON
  • switching by toggle interface says: light has to be toggled OFF
  • what do you actually want to happen, then?
  • priority for “switching by time”?
  • or priority for “switching by toggling the state manually”?

jurs:
One user interface offering "toggle ON/OFF by tapping a virtual button in the web browser

And another user interface to enter "ON time" and "OFF time", changing each day for each day and each room.

Yes, because I want to control the Lamp and Fan in two ways:

First I want to control the Lamp or Fan in Automatic way according to the time set.

The second is by way of Manual by pressing the On / Off button on the Browser interface. This method is useful to anticipate if there is a change of time because there are additional activities or other activities in the room.

jurs:
I think you have to decide, which is the priority.

Example:

If you programmed a switching time from 7:30a.m. to 10:00first, and at 9:00 you enter the togglee interface and toggle the light: What do you want then?

  • switching by time says: light has to be ON
  • switching by toggle interface says: light has to be toggled OFF
  • what do you actually want to happen, then?
  • priority for "switching by time"?
  • or priority for "switching by toggling the state manually"?

I can not say which I prioritize because I need both.

What I want from you is a simple NTP Time Server program code that can turn on and off Relay in time set, which I'll try to combine the code with the Code I get from Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino. That's if you can help me and I hope so, because the code I got from the sites I visited has a long and complicated code so I can not understand it with my logic.

IdrisRizal:
Yes, because I want to control the Lamp and Fan in two ways:

First I want to control the Lamp or Fan in Automatic way according to the time set.

The second is by way of Manual by pressing the On / Off button on the Browser interface. This method is useful to anticipate if there is a change of time because there are additional activities or other activities in the room.

I can not say which I prioritize because I need both.

What I want from you is a simple NTP Time Server program code that can turn on and off Relay in time set, which I'll try to combine the code with the Code I get from Kontrol Relay dengan Arduino dan Ethernet Shield | BoArduino. That's if you can help me and I hope so, because the code I got from the sites I visited has a long and complicated code so I can not understand it with my logic.

Seems like you want a rather complicated code running several things at the same time

  • webserver task for manual channel switchingand timer channel configuration, maybe
  • NTP client task
  • timekeeing task
    timed switching task for four output channels

I'd like to suggest modular Arduino programming with several tasks:

NTP time update task
timekeeping task
channel switching task
webserver task

Are you ready to do a NTP ttime test in your network?

Shall I send you some code for NTP time testing?

And whch time formatting do you prefer for time entry / time display?

12-hour mode time with AM/PM indication?
or 24-hour mode with time running straight from 00:00 up to 23:59 each day?

jurs:
Are you ready to do a NTP ttime test in your network?

Yes, I'm ready.

jurs:
Shall I send you some code for NTP time testing?

I think it is necessary, for example, to learn, but simple code, which can control the relay.

jurs:
And whch time formatting do you prefer for time entry / time display?

12-hour mode time with AM/PM indication?
or 24-hour mode with time running straight from 00:00 up to 23:59 each day?

I want to use 24-hour.

IdrisRizal:
Yes, I'm ready.

I think it is necessary, for example, to learn, but simple code, which can control the relay.

I want to use 24-hour.

Today I tried a lot of things, have put together several of my codes.
Finally more than 400 lines of code.
But it doesn't work together.
I have to give up and cannot help you at the moment.

Tomorrow I'll try a much simpler approach.

jurs:
Today I tried a lot of things, have put together several of my codes.
Finally more than 400 lines of code.
But it doesn't work together.
I have to give up and cannot help you at the moment.

Tomorrow I'll try a much simpler approach.

Thank you for your efforts to help me. I'm waiting for the code from you. :slight_smile:

I want a simple NTP code because if it's too much, I'm afraid the Arduino memory is not enough to hold it, not to mention I add the code I have. Hope you understand that.

Thanks for the reply. Your program is very cool and I learnt a lot from it. So I have it working now the way I want to. I basically removed the if else's from the main loop and put them into its own function like your handleToggle.

I'm still not entirely sure why it works this way and not the other as the function is just a tidier way to do it, it still performs the exact same function. I'm sure its just down to programming and the webpage is not getting sent this time round. More for me to get my head round.

I would like to do something similar to this project.

Hardware.:

  • An Arduino UNO
  • An Ethernet card.
  • A relay card

Software.:

  • A web server
  • on / off buttons and a timer for relays.
  • Use of NTP server for time correction.
  • Possibly be able to read the status of the various relays with a PC

Is the result of this program something that I could use? (I can't find the code)

"Is the result of this program something that I could use? (I can't find the code)"

Well, maybe. You really need to start your own discussion with what you have and want to do. Lots of web server code has been posted in years past (top right of page search function) and there are examples in the IDE examples drop down.