ESP8266 and Visuino: GPS Location Web Server With Google Maps

30,726

294

34

Intro: ESP8266 and Visuino: GPS Location Web Server With Google Maps

ESP8266 modules are great low cost stand alone controllers with built in Wi-Fi, and I already made a number of Instructables about them.

I also made some instructables on using Serial GPS modules.

In this Instructable I will show you how you can make a GPS Web Server using Google Map to show the position of the GPS Module with ESP8266 and Serial GPS . You will be able to connect to it on your existing Wi-Fi network from multiple devices with a web browser, and always see where your module is.

Please note that since we will use the Serial to connect the GPS Module, you will need to program the ESP8266 before you connect the Serial GPS Module!

Step 1: Components

  1. OneNodeMCU ESP8266 board (I used NodeMCU 0.9 version, but any other, or even stand alone ESP-12 or ESP-01 will work)
  2. One GPS module
  3. 3 Female-Female jumper wires
  4. Optionally: One USB Power supply with USB Cable (I used a USB Power Bank but any other option will work) to power the NodeMCU ESP8266

Step 2: Start Visuino, and Select the ESP8266 Board Type

To start programming the Arduino, you will need to have the Arduino IDE installed from here: http://www.arduino.cc.

Please be aware that there are some critical bugs in Arduino IDE 1.6.6.

Make sure that you install 1.6.7 or higher, otherwise this Instructable will not work!

If you have not done follow the steps in this Instructable to setup the Arduino IDE to program ESP 8266!

The Visuino: https://www.visuino.com also needs to be installed.

  1. Start Visuinoas shown in the first picture
  2. Click on the "Tools" button on the Arduino component (Picture 1) in Visuino
  3. When the dialog appears, select "NodeMCU ESP-12" as shown on Picture 2

Step 3: In Visuino: Set a Host Name and Access Point

First we need to configure the module to connect to existing Access Point and to assign HostName to it so we can discover it on the network.

  1. In the Object Inspector, expand the “Modules” property, then the “WiFi” sub property (Picture 1)
  2. In the Object Inspector set the value of the "HostName" property to "gpsserver" (Picture 1)
  3. In the Object Inspector, expand the “AccessPoints” sub property of the “WiFi”, and click on the "..." button next to its value (Picture 2)
  4. In the "AccessPoins" editor, select “WiFi Access Point” in the right view, and then click on the "+" button on the left to add the access point (Picture 2)
  5. In the Object Inspector, set the value of the "SSID" property to the SSID of your Wi-Fi Hotspot(Access Point) (Picture 4)
  6. If your Wi-Fi Hotspot(Access Point) requires password, In the Object Inspector, set the password in the value of the "Password" property (Picture 4)
  7. Close the "AccessPoints" dialog

Step 4: In Visuino: Add a TCP/IP Server Socket for the Communication

Next we need to add an TCP/IP Server socket for the communication.

  1. In the Object Inspector, click on the "..." button next to the value of the "Sockets" sub property of the WiFi (Picture 1)
  2. In the Sockets editor select “TCP/IP Server”, and then click on the "+" button (Picture 2) to add one (Picture 3)
  3. Close the "Sockets" dialog

Step 5: In Visuino: Add GPS and Formatted Text Component With 2 Analog Channels

To control and read the GPS information from the module we need to add component for it in Visuino.

We also need to generate the web page from the data. The page is just an HTML text document, so we can use Formatted Text component to generate it.

  1. Type "gps" in the Filter box of the Component Toolbox then select the "Serial GPS" component (Picture 1), and drop it in the design area
  2. Type "form" in the Filter box of the Component Toolbox then select the "Formatted Text" component (Picture 2), and drop it in the design area
  3. Click on the "Tools" button of the FormattedText1 component (Picture 3)
  4. In the Elements editor, select the Analog Element on the right, and click 2 times on the "+" button on the left (Picture 4), to add 2 of them (Picture 5)
  5. Optionally: In the Object Inspector you can specify a higher precision for the Analog Elements.
  6. Close the "Elements" editor

Step 6: In Visuino: Set Formatted Text for the Server Response

We need to specify the HTML text that will be generated when a web client connects to the server.

We will specify the connection to close after the data i sent, and also will instruct the browser to reconnect(Refresh) after 5 seconds by adding "Refresh: 5" to the document. This way the web page will refresh every 5 seconds.

For this Instructable, I used the Google javascript maps API . If you would like, you can change the HTML text to customize the map better.

  1. In the Design Area, select the FormattedText1 component (Picture 1)
  2. In the Object Inspector select the "Text" property, and click on the "..." button next to its value (Picture 1)
  3. In the "Text" editor type the text from Picture 2 . You can find the HTML text in the attached text file, and copy it from there.


    The %0 will be replaced with the value from AnalogElement1, and %1 will be replaced with the value from AnalogElement2

  4. Click on the OK button to close the dialog

Step 7: In Visuino: Connect the GPS Component

  1. Connect the "Latitude" output pin of the GPS1 component to the "In" pin of the AnalogElement1 of the FormattedText1 component (Picture 1)
  2. Connect the "Longitude" output pin of the GPS1 component to the "In" pin of the AnalogElement2 of the FormattedText1 component (Picture 2)
  3. Connect the "Out" output pin of the GPS1 component to the "In" input pin of the "Serial[ 0 ]" channel of the Arduino component (Picture 3)

Step 8: In Visuino: Connect the Formatted Text Component, and Add and Connect Delay Component

  1. Connect the “Out” pin of the FormattedText1 component to the “In” pin of the "Modules.WiFi.Sockets.TCPServer1” of the “NodeMCU ESP-12” component (Picture 1)
  2. Type "delay" in the Filter box of the Component Toolbox then select the "Delay" component (Picture 2), and drop it in the design area
  3. Connect the “Out” pin of the FormattedText1 component to the “In” pin of the Delay1 component (Picture 3)
  4. Connect the “Out” pin of the Delay1 component to the “Disconnect” input pin of the "Modules.WiFi.Sockets.TCPServer1” of the “NodeMCU ESP-12” component (Picture 4)

The Delay component will disconnect the socket shortly after the text has been sent.

Step 9: Generate, Compile, and Upload the Arduino Code

  1. In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE
  2. Connect theNodeMCU module with USB cable to the computer
  3. Select the board type and serial port as I have shown you in this Instructable
  4. In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)

Step 10: Connect the GPS Module to the ESP8266

  1. Connect Power(Red wire), Ground(Black wire), and TX(Gray wire) to the GPS Module
  2. Connect the other end of the Ground wire(Black wire) to Ground pin of the NodeMCU board (Picture 2)
  3. Connect the other end of the TX (Gray wire) to RX pin of the NodeMCU board (Picture 2)
  4. Picture 4 shows where are the Ground, 3.3V Power, and RX pins of the NodeMCU 0.9

Step 11: And Play...

Congratulations! You have made a Wi-Fi GPS Web Server with Google Maps.

On Picture 1 you can see the connected and powered up project. I used a small USB Power Bank to power the module.

Make sure in the project on Step 4 you have entered the correct SSID and Password for your Wi-Fi hotspot!

Usually shortly after powering up, the GPS will start sending location data. Depending on the location, it can take up to few minutes to show the location data. If after few minutes the data is still not shown, power down the project wait about a minute and power it again to reset the GPS.

If you open a web browser on your computer or mobile device, and type:

gpsserver./

And press Enter, you will see the map of the GPS location detected by the module (Picture 2).The map will refresh every 5 seconds as specified in Step 7 by the HTML text in the formatted text component.

Make sure to add the Dot at the end of the name, otherwise Windows will not be able to resolve the domain name!

On Picture 3 you can see the complete Visuino diagram.

Also attached is the Visuino project, that I created for this Instructable. You can download and open it in Visuino: https://www.visuino.com

To run the attached project, you will need to set the SSID and Password for your Wi-Fi Hotspot as shown on Step 3!

5 People Made This Project!

Recommendations

  • Audio Contest 2018

    Audio Contest 2018
  • Electronics Tips & Tricks Challenge

    Electronics Tips & Tricks Challenge
  • Optics Contest

    Optics Contest

34 Discussions

0
None
IreneoF

8 months ago

In file included from Generated.ino:18:0:

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h: In member function 'virtual void Mitov::ESP8266WiFiModule::StartEthernet()':

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h:426:9: error: 'class ESP8266WiFiClass' has no member named 'setAutoReconnect'

WiFi.setAutoReconnect( AutoReconnect );

^

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h: In member function 'virtual void Mitov::ESP8266WiFiModule::SystemLoopBegin(long unsigned int)':

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h:448:45: error: 'class ESP8266WiFiClass' has no member named 'isConnected'

RemoteConnectedOutputPin.SetValue( WiFi.isConnected(), true );

^

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h: In member function 'virtual void Mitov::ESP8266ModuleReconnectOperation::DoClockReceive(void*)':

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_ESP8266_WiFi.h:527:9: error: 'class ESP8266WiFiClass' has no member named 'reconnect'

WiFi.reconnect();

^

In file included from Generated.ino:21:0:

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h: At global scope:

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h:20:15: error: 'SerialConfig' does not name a type

static const SerialConfig CSerialInits[] =

^

In file included from Generated.ino:21:0:

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h: In member function 'virtual void Mitov::SerialPort<T_SERIAL_TYPE, T_SERIAL>::StartPort()':

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h:129:40: error: 'CSerialInits' was not declared in this scope

T_SERIAL->begin( inherited::Speed, CSerialInits[ AIndex ], SERIAL_FULL );

^

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h:132:40: error: 'CSerialInits' was not declared in this scope

T_SERIAL->begin( inherited::Speed, CSerialInits[ AIndex ], SERIAL_RX_ONLY );

^

C:\Users\Eren\Documents\Arduino\libraries\mitov-visuino-libraries-b6e9919c7c66/Mitov_FormattedSerial.h:135:40: error: 'CSerialInits' was not declared in this scope

T_SERIAL->begin( inherited::Speed, CSerialInits[ AIndex ], SERIAL_TX_ONLY );

^

Error compiling.

after i generating the code from visuino. how do i fix this?

0
None
BoianMkeverett458429

Reply 9 months ago

It depends on the WiFi hotspot. I have not experimented to see the distance of my one,

0
None
paulrosero

11 months ago

If this project is out of range of my wifi connection... this project is lost ?

1 reply
0
None
BoianMpaulrosero

Reply 11 months ago

Not if it is connected to some portable WiFi ;-)
I will see to make GPRS version too one of this days ;-) I may do a LoRa too.

0
None
Niekd5

1 year ago

Hey, thanks for your great instructable! I got a question, the code uploads perfectly to my NodeMCU, but i can't load the gps web server. it says that it can't find the DNS address from the GPS server. Do you know what the problem can be? I have filled in the SSID and the Password for my Wi-Fi hotspot correctly.

0
None
Bekir BerkeB

1 year ago

How can i send gps data to server, pc, or phone? i want global communication with gps but i'm low about IoT and web programing. Visuino, javascript, html which one i need? Thanks for help. Sorry for my English.

2 replies
0
None
BoianMBekir BerkeB

Reply 1 year ago

Well... the simplest option is to use MQTT with Visuino like in this tutorial:
https://youtu.be/oX1DB68TF_k

0
None
BoianMmanisware

Reply 1 year ago

Not yet, have been busy with a lot of other projects :-( . Hope to make one soon!

0
None
HeshanH

1 year ago

gps web server (gpsserver./) is not loading code uploaded successfully why?

1 reply
0
None
BoianMHeshanH

Reply 1 year ago

Hi HeshanH,

What is the problem?

0
None
BoianMDipB5

Reply 2 years ago

Thank you! :-)

0
None
MariaJ62BoianM

Reply 1 year ago

sir pls help i am attaching my gps module with wemos d1 mini and uploaded code by following steps noting happened what to do???

0
None
MariaJ62MariaJ62

Reply 1 year ago

sir i need to submit this project what is problem my webserver is not working the code is uploaded perfectly????

0
None
MariaJ62

1 year ago

sir pls help i am attaching my gps module with wemos d1 mini and uploaded codeby following steps noting happened what to do???