Uploading a website to the ESP32 module - Revision history

Heerko at 08:36, 2 December 2022

2022-12-02T08:36:25Z

← Older revision		Revision as of 10:36, 2 December 2022
Line 3:		Line 3:
	Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here].		Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here].

	The SPIFFS plugin only works with Arduino IDE 1.8.x, so make sure you are using that version!		<big>'''The SPIFFS plugin only works with Arduino IDE 1.8.x, so make sure you are using that version!'''</big>

	== Publishing your first mini webpage to the module ==		== Publishing your first mini webpage to the module ==

Heerko at 08:36, 2 December 2022

2022-12-02T08:36:04Z

← Older revision		Revision as of 10:36, 2 December 2022
Line 2:		Line 2:

	Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here].		Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here].

			The SPIFFS plugin only works with Arduino IDE 1.8.x, so make sure you are using that version!

	== Publishing your first mini webpage to the module ==		== Publishing your first mini webpage to the module ==

Heerko at 08:38, 27 October 2022

2022-10-27T08:38:49Z

← Older revision		Revision as of 10:38, 27 October 2022
Line 49:		Line 49:
	Screen when upload is completed successfully		Screen when upload is completed successfully

	[[File:Arduino-wifizine-webpage-upload-done.png\|500px\|frame\|alt=Screenshot of arduino window stating SPIFFS image uploaded\|Screenshot of arduino window stating SPIFFS image uploaded]]		[[File:Arduino-wifizine-webpage-upload-done.png\|500px\|none\|frame\|alt=Screenshot of arduino window stating SPIFFS image uploaded\|Screenshot of arduino window stating SPIFFS image uploaded]]

	Success! You can now find your private internet spot. Open the network settings on your phone, and select your network. Your website should pop up automatically, but some patience might help :)		Success! You can now find your private internet spot. Open the network settings on your phone, and select your network. Your website should pop up automatically, but some patience might help :)
Line 57:		Line 57:
	Look up the list of available networks on your phone with the name you provided to the .ssid file earlier. You should see your network popping up there. Try connecting to it. Your website should come up automatically with a pop-up window.		Look up the list of available networks on your phone with the name you provided to the .ssid file earlier. You should see your network popping up there. Try connecting to it. Your website should come up automatically with a pop-up window.

	[[File:Login network.png\|500px\|frame\|alt=LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made\|LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made]]		[[File:Login network.png\|500px\|none\|frame\|alt=LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made\|LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made]]

	== Acknowledgments ==		== Acknowledgments ==

	Is document is heavily based on the wonderful documentation of Dianaband: https://github.com/applecargo/WifiZineThrowie/blob/master/docs/index.md		Is document is heavily based on the wonderful documentation of Dianaband: https://github.com/applecargo/WifiZineThrowie/blob/master/docs/index.md

Heerko: Created page with "On this you'll find instructions on how to upload a small website to the ESP32 module. It's assumed that you have already set up your Arduino IDE for working with the ESP32 module, if not follow these instructions. Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here]. == Publishing your first mini webpage to the module == * The content of the small webpage we will..."

2022-10-27T08:38:05Z

Created page with "On this you'll find instructions on how to upload a small website to the ESP32 module. It's assumed that you have already set up your Arduino IDE for working with the ESP32 module, if not follow these instructions. Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here]. == Publishing your first mini webpage to the module == * The content of the small webpage we will..."

New page

On this you'll find instructions on how to upload a small website to the ESP32 module. It's assumed that you have already set up your Arduino IDE for working with the ESP32 module, if not [[ESP32 Arduino Setup|follow these instructions]].

Start by downloading the code for the [https://github.com/hackersanddesigners/WifiZineThrowie%20ScavengerHunt Wifizine workshop here].

== Publishing your first mini webpage to the module ==

* The content of the small webpage we will put on the wifi modules is stored separately from the running code that takes care of publishing it. Therefore, it goes through a separate process from the usual Arduino IDE code upload process. To do this, you need to install a separate extension plug-in.

* Download and install [https://github.com/me-no-dev/arduino-esp32fs-plugin/releases '''the ESP32FS plug-in''']

Create a folder called ‘tools’ in your Arduino sketch directory.
The location of this folder varies depending on your system:
* On Windows: <code>My Documents\Arduino\libraries</code>
* On MacOS: <code>~/Documents/Arduino/libraries</code>
* On Linux: <code>{sketchbook folder}/libraries</code>. The sketchbook folder location can be found (or changed) at File > Preferences > Sketchbook location:. This is the location of libraries installed via Library Manager (Sketch > Include Library > Manage Libraries…) or Sketch > Include Library > Add .ZIP Library. You should also manually install libraries to that location.

Copy unpacked ESP32FS into the subfolder tools

[[File:Arduino-esp32fs-00002.png|500px|frame|none|alt=Screenshot of finder window open at Arduino, showing subfolders tools|Screenshot of finder window open at Arduino, showing subfolders tools]]
[[File:Arduino-esp32fs-00003.png|500px|frame|none|alt=screenshot of finder window open at tools with subfolder ESP32FS inside it|screenshot of finder window open at tools with subfolder ESP32FS inside it]]

Be mindful with the construction of the folders. It should be installed as shown in the following figure. (Note also that the folder name is ESP32FS!)

[[File:Arduino-esp32fs-00004.png|500px|frame|none|alt=Screenshot of finder wiindow open at tools, showing filepath - ESP32FS - tool - esp32fs.jar|Screenshot of finder wiindow open at tools, showing filepath - ESP32FS - tool - esp32fs.jar]]

After restarting the Arduino IDE, verify that the plug-in installation was successful. If successful, you will see a menu called ‘ESP32 Sketch Data Upload’ added.

[[File:Arduino-esp32fs-00005.png|500px|frame|none|alt=Screenshot of Arduino window with menu open at - Tools - ESP32 Sketch Data Upload|Screenshot of Arduino window with menu open at - Tools - ESP32 Sketch Data Upload]]

When you click this menu option, it will move all the files in the ‘WifiZineThrowie/data’ folder to the ESP32 module’s web page store.

=== Changing the name of your wifi network ===

The arduino code (WifiZineThrowie.ino) specifies the name of your personal mini network by looking for a file in the data folder that ends with '''.ssid'''. In the files you downloaded you can see it is now called: “solarpunk-schat.ssid”. You can change this filename to the name you like for your network (avoid symbols to be sure). E.g. Clue1-Loes.

[[File:Ssid name.png|500px|frame|none|alt=screenshot of finder window showing contents of the data folder, with the ssid file solarpunk-schat selected|screenshot of finder window showing contents of the data folder, with the ssid file solarpunk-schat selected]]

=== Uploading your website to the module ===

Then, in the Arduino software, go to > Tools and select > ESP32 Sketch Data Upload

[[File:Arduino-wifizine-webpage-upload.png|500px|thumb|none|alt=screenshot of arduino software with the WifiZineThrowie sketch open and output window saying SPIFFS uploading image…|screenshot of arduino software with the WifiZineThrowie sketch open and output window saying SPIFFS uploading image…]]

Please execute the upload. The color of the message output during upload is displayed in white instead of red.

While ‘Connecting …’ displays, [https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/ press and hold the’ BOOT ’button on the ESP board for one second].

Screen when upload is completed successfully

[[File:Arduino-wifizine-webpage-upload-done.png|500px|frame|alt=Screenshot of arduino window stating SPIFFS image uploaded|Screenshot of arduino window stating SPIFFS image uploaded]]

Success! You can now find your private internet spot. Open the network settings on your phone, and select your network. Your website should pop up automatically, but some patience might help :)

=== Find your wifi network! ===

Look up the list of available networks on your phone with the name you provided to the .ssid file earlier. You should see your network popping up there. Try connecting to it. Your website should come up automatically with a pop-up window.

[[File:Login network.png|500px|frame|alt=LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made|LEFT - screenshot of android phone open at wifi menu, showing all the available networkds, with network solarpunk-schat highlighted. RIGHT - screenshot of pop-up window displaying the website contents of the html file we made]]

== Acknowledgments ==

Is document is heavily based on the wonderful documentation of Dianaband: https://github.com/applecargo/WifiZineThrowie/blob/master/docs/index.md