# Set up Web Workflow on the Adafruit MEMENTO ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/128/672/medium800/circuitpython_Main.jpg?1710280083) Web Workflow is an excellent way to update your MEMENTO camera board remotely. If your project involves keeping the MEMENTO in a specific position or perhaps it is mounted in a difficult to reach place, then editing your code with Web Workflow will be essential. This guide focuses on getting you up and running with Web Workflow specifically for the MEMENTO. If you need a guide with a more general focus on the editor itself, check out the [CircuitPython Web Workflow Code Editor Quick Start](https://learn.adafruit.com/getting-started-with-web-workflow-using-the-code-editor/) guide. Web Workflow is baked into CircuitPython itself, so there's nothing additional to install and it's only a matter of setting up a few things. This guide will show you an example of using the Web Workflow with time lapse photography. If you would like to mount the camera to a tripod other by another means that requires a 1/4"-20 thread and you have a 3D printer available, you may want to check out the [https://learn.adafruit.com/memento-3d-case/3d-printing](https://learn.adafruit.com/memento-3d-case/3d-printing "3D Printed Camera Case for MEMENTO") guide, which can make timelapse photography much easier. The guide will show you one use case of Web Workflow that is more specific to the Adafruit MEMENTO. If you do any timelapse phtography, you may wish to test that images are being saved. This is particularly helpful if you have a long timelapse going or are in low power mode with the preview window off. ## Parts ### MEMENTO - Python Programmable DIY Camera - Bare Board [MEMENTO - Python Programmable DIY Camera - Bare Board](https://www.adafruit.com/product/5420) Make memories, or just a cool camera-based project, with **Adafruit's MEMENTO Camera Board**. It's a development board with everything you need to create programmable camera and vision projects: with a camera module, TFT preview screen, buttons, SD card slot and... Out of Stock [Buy Now](https://www.adafruit.com/product/5420) [Related Guides to the Product](https://learn.adafruit.com/products/5420/guides) ![Video of a DIY camera on a lazy susan.](https://cdn-shop.adafruit.com/product-videos/640x480/5420-05.jpg) ### Adafruit MEMENTO Camera Enclosure & Hardware Kit [Adafruit MEMENTO Camera Enclosure & Hardware Kit](https://www.adafruit.com/product/5843) Once you've picked up your **MEMENTO Camera** and you're ready to take it out into the world, here is a chic and minimalist enclosure that will look great on the runways of Paris or the street photography of New York City! These front and back plates have been... In Stock [Buy Now](https://www.adafruit.com/product/5843) [Related Guides to the Product](https://learn.adafruit.com/products/5843/guides) ![Overhead shot of two square-shaped PCB boards for a DIY camera above eight black plastic screws and four black plastic hex nuts with 3pin to 3pin JST PH cable and adhesive sticker.](https://cdn-shop.adafruit.com/640x480/5843-05.jpg) ### USB Type A to Type C Cable - approx 1 meter / 3 ft long [USB Type A to Type C Cable - approx 1 meter / 3 ft long](https://www.adafruit.com/product/4474) As technology changes and adapts, so does Adafruit. This   **USB Type A to Type C** cable will help you with the transition to USB C, even if you're still totin' around a USB Type A hub, computer or laptop. USB C is the latest industry-standard connector for... In Stock [Buy Now](https://www.adafruit.com/product/4474) [Related Guides to the Product](https://learn.adafruit.com/products/4474/guides) ![Angled shot of a coiled black, USB-C to USB-A cable.](https://cdn-shop.adafruit.com/640x480/4474-02.jpg) # Set up Web Workflow on the Adafruit MEMENTO ## Device Setup Make sure you are running **version 9.0.0-rc.2 or later** of CircuitPython. This release includes a fix for Web Workflow. You can download it from the [downloads page on circuitpython.org](https://circuitpython.org/board/adafruit_esp32s3_camera/). Once you have that downloaded, you will want to check out the [Adafruit MEMENTO Camera Board](https://learn.adafruit.com/adafruit-memento-camera-board/install-circuitpython) guide for installation instructions. If you have previously installed an earlier version, you will need to backup your data and erase the filesystem, as it was previously formatted with the incorrect size. This can be achieved by connecting to the terminal and running the following commands: ```python import storage storage.erase_filesystem() ``` ## Creating a **settings.toml** File Once you have the correct version of CircuitPython installed and running, the next step is to create an **settings.toml** file in the root of the **CIRCUITPY** drive. Then configure it by adding the following contents and changing the values as appropriate: ```auto # To auto-connect to Wi-Fi CIRCUITPY_WIFI_SSID="yourwifissid" CIRCUITPY_WIFI_PASSWORD="yourpassword" # To enable modifying files from the web. Change this too! # Leave the User field blank when you type the password into the browser. CIRCUITPY_WEB_API_PASSWORD="passw0rd" CIRCUITPY_WEB_API_PORT=80 ``` A summary of the values is as follows: - **CIRCUITPY\_WIFI\_SSID** : This is the name of the WiFi network that you usually see advertised in a list of available WiFi networks on your computer. It should match exactly. - **CIRCUITPY\_WIFI\_PASSWORD** : This is the password for your WiFi network. It should also match exactly. - **CIRCUITPY\_WEB\_API\_PASSWORD** : This is the password that is used to protect access to the files on your device when connecting with Web Workflow. This is what you will type in when prompted for a password. You will want to change it to something that you'll remember. - **CIRCUITPY\_WEB\_API\_PORT** : This is the TCP port that the built-in Web Workflow web server on the device will use. At this point in time, the Code Editor hasn't been thoroughly tested with ports other than the default, so leaving it at **port 80 is recommended**. If you would like a more technical detail of the underlying aspects of Web Workflow, be sure to check out the [official CircuitPython documentation](https://docs.circuitpython.org/en/latest/docs/workflows.html#web). Info: ## Disabling USB Mass Storage Primary: One of the more challenging aspects of using web workflow is that in order to avoid corrupting files, the USB mass storage device may need to be disabled **on native USB chipsets like ESP32-S3** if you plan on using the camera while connected to a computer over USB, otherwise the files will only be available in read-only mode over the WiFi link. The easiest way to do this is to simply eject the **CIRCUITPY** drive in your OS. However, this will only be temporary until the next time you reset the device or plug it back in. If you'd like it to stay disabled, you can create a **boot.py** file in the root folder of the **CIRCUITPY** drive with the following contents: ```python import storage storage.disable_usb_drive() ``` Once you have saved the file, go ahead and perform a hard reset on the board by pressing the reset button or by temporarily disconnecting it from power. After it starts back up, the **CIRCUITPY** drive should no longer appear. If you'd like to learn more about editing **boot.py** to customize the device, check out the [Customizing USB Devices in CircuitPython](https://learn.adafruit.com/customizing-usb-devices-in-circuitpython/circuitpy-midi-serial) guide. ### Re-enabling USB Mass Storage If you find you want to access the mass storage device after you have disabled it, there are a couple of ways you can do it. The first way to temporarily enable it is to boot it into safe mode. To do this, just reset the device and while it is booting, pay attention to the status NeoPixel. When it starts flashing yellow, press the boot button. Alternatively, if you'd like to permanently re-enable it, you can run the following code from a serial terminal to remove the **boot.py** file: ```python import storage import os storage.remount("/", False) os.remove("/boot.py") ``` After hard resetting your device, the **CIRCUITPY** drive should reappear, though re-enabling it will cause web workflow to be in read-only mode again. # Set up Web Workflow on the Adafruit MEMENTO ## Usage At this point, your MEMENTO should be connected to your network. You can confirm this be looking at the top line of your display and seeing that it shows an IP address instead of "Wi-Fi: No IP". If it says "Wi-Fi: off", then you likely haven't added your Wi-Fi info to settings.toml yet. ![](https://cdn-learn.adafruit.com/assets/assets/000/128/009/medium800/circuitpython_IP_Address.jpg?1708726233) If it launches code instead of displaying the REPL, you can try connecting to the serial console with a terminal application. For more details on how to do this, you can take a look at the [Connecting to the Serial Console](https://learn.adafruit.com/adafruit-memento-camera-board/kattni-connecting-to-the-serial-console) page. ## Install Fancy Camera Example For the purposes of the guide, you will need to install the fancy camera example. This example has more features than the basic camera example and includes changing the mode to timelapse. To install, click **Download Project Bundle** below, unzip the file, and copy the full contents of the folder matching your version of CircuitPython to your **CIRCUITPY** drive. If you already have an existing **boot.py** file, you will need to edit it and add the contents of both files. To learn more about this example, check out the MEMENTO [Fancy Camera](https://learn.adafruit.com/adafruit-memento-camera-board/fancy-camera) guide page. https://github.com/adafruit/Adafruit_CircuitPython_PyCamera/tree/main/examples/camera ## Install an SD Card Make sure you have a micro SD card installed in the camera. This is where the photos will be written to. One of the newer features of Web Workflow is the ability to access the files from your SD card remotely and download photos. The SD Card doesn't need to be very big.  You can use a small one like the [256MB Micro SD Card](https://www.adafruit.com/product/5251) in the Adafruit shop. ## Put in Timelapse Mode For this example, this guide will show you how you can use timelapse photography and access the photos while it is recording. To find out more information about the timelapse mode, visit the [Timelapse Project](https://learn.adafruit.com/adafruit-memento-camera-board/timelapse) page of the main MEMENTO guide. Press the **left/right** buttons, move the selector over to the mode option in the lower righthand side of the screen. It should say **JPEG** if you haven't already adjusted it. Once it is highlighted, use the **up/down** buttons to change it to **LAPS**. To conserve battery, you can change it from Hi Power to Medium or Low power mode at this point by pressing the **Select** button. ![circuitpython_Timelapse_Mode.jpg](https://cdn-learn.adafruit.com/assets/assets/000/128/011/medium640/circuitpython_Timelapse_Mode.jpg?1708808576) Now using the left/right buttons, select the time interval between photos and adjust to whatever you like. For the purposes of this example, it will be set to 10 seconds. ![circuitpython_Timelapse_Interval.jpeg](https://cdn-learn.adafruit.com/assets/assets/000/128/657/medium640/circuitpython_Timelapse_Interval.jpeg?1710204181) If desired, change the resolution to one for which you would like to capture images. The default is 240x240 pixels, but you may desire a little bit higher resolution than that. ![circuitpython_Timelapse_Resolution.jpeg](https://cdn-learn.adafruit.com/assets/assets/000/128/658/medium640/circuitpython_Timelapse_Resolution.jpeg?1710204194) Set up your MEMENTO camera to point at the subject that you would like to take a timelapse of and press **OK** to start. You may wish to set the camera on a steady surface so that it doesn't inadvertently tip over while recording. The timer countdown will start and after it finishes, it will save a photo on the SD Card. ![circuitpython_IMG_5677.jpeg](https://cdn-learn.adafruit.com/assets/assets/000/128/673/medium640/circuitpython_IMG_5677.jpeg?1710280275) ## Accessing the Photos Warning: Now that your camera is all set up and taking a timelapse, you may want to check the progress or download the photos. You can do this through the enhanced code editor, which can be opened by either going to **http://circuitpython.local/code/** or typing **http://[device IP address]/code/** (replacing "[device IP address]" with the actual IP address). Be sure to include the trailing slash or it won't load the page. Once it loads, it should prompt for a password. Leave the username field blank and use the password that you set in your settings.toml file. ![circuitpython_Screenshot_2024-02-23_at_2.13.17_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/128/659/medium640/circuitpython_Screenshot_2024-02-23_at_2.13.17_PM.png?1710204361) Once you login, an information box about the board you connected to will appear. Click the **Close** button. ![circuitpython_Screenshot_2024-03-11_at_1.21.31_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/128/660/medium640/circuitpython_Screenshot_2024-03-11_at_1.21.31_PM.png?1710204465) Go ahead and click the **Open** button at the top. This will allow you to do some additional file operations such as downloading files. ![circuitpython_Screenshot_2024-03-11_at_1.21.44_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/128/661/medium640/circuitpython_Screenshot_2024-03-11_at_1.21.44_PM.png?1710204589) Warning: ## Downloading a Single Photo With the File Dialog box open, doubleclick on the **sd folder** or select the file and click **Open**. ![circuitpython_Screenshot_2024-03-11_at_1.22.01_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/128/668/medium640/circuitpython_Screenshot_2024-03-11_at_1.22.01_PM.png?1710204735) Select the file you wish to download and then click on the **Download button** (the button with the arrow pointing down). ![circuitpython_Download_File.png](https://cdn-learn.adafruit.com/assets/assets/000/128/669/medium640/circuitpython_Download_File.png?1710275238) ## Downloading All Photos There are a couple of ways that you can do this. The first is by selecting the SD folder and then clicking on the  **Download button**  (the button with the arrow pointing down). ![circuitpython_Download_SD_Folder.png](https://cdn-learn.adafruit.com/assets/assets/000/128/670/medium640/circuitpython_Download_SD_Folder.png?1710275613) The second way is by entering into the SD Folder and then **without selecting anything** , just click the **Download button**. ![circuitpython_Screenshot_2024-03-12_at_1.35.52_PM.png](https://cdn-learn.adafruit.com/assets/assets/000/128/671/medium640/circuitpython_Screenshot_2024-03-12_at_1.35.52_PM.png?1710275819) This is only one example of what you can do with Web Workflow. You'll probably be able to think of many more things you can use this for. Future improvements in CircuitPython and the Code Editor should make using Web Workflow even more useful. ## Featured Products ### MEMENTO - Python Programmable DIY Camera - Bare Board [MEMENTO - Python Programmable DIY Camera - Bare Board](https://www.adafruit.com/product/5420) Make memories, or just a cool camera-based project, with **Adafruit's MEMENTO Camera Board**. It's a development board with everything you need to create programmable camera and vision projects: with a camera module, TFT preview screen, buttons, SD card slot and... Out of Stock [Buy Now](https://www.adafruit.com/product/5420) [Related Guides to the Product](https://learn.adafruit.com/products/5420/guides) ### Adafruit MEMENTO Camera Enclosure & Hardware Kit [Adafruit MEMENTO Camera Enclosure & Hardware Kit](https://www.adafruit.com/product/5843) Once you've picked up your **MEMENTO Camera** and you're ready to take it out into the world, here is a chic and minimalist enclosure that will look great on the runways of Paris or the street photography of New York City! These front and back plates have been... In Stock [Buy Now](https://www.adafruit.com/product/5843) [Related Guides to the Product](https://learn.adafruit.com/products/5843/guides) ### ADABOX 021 - MEMENTO Python Programmable DIY Camera [ADABOX 021 - MEMENTO Python Programmable DIY Camera](https://www.adafruit.com/product/5419) Out of Stock [Buy Now](https://www.adafruit.com/product/5419) [Related Guides to the Product](https://learn.adafruit.com/products/5419/guides) ### USB Type A to Type C Cable - approx 1 meter / 3 ft long [USB Type A to Type C Cable - approx 1 meter / 3 ft long](https://www.adafruit.com/product/4474) As technology changes and adapts, so does Adafruit. This   **USB Type A to Type C** cable will help you with the transition to USB C, even if you're still totin' around a USB Type A hub, computer or laptop. USB C is the latest industry-standard connector for... In Stock [Buy Now](https://www.adafruit.com/product/4474) [Related Guides to the Product](https://learn.adafruit.com/products/4474/guides) ## Related Guides - [Adafruit MEMENTO Camera Board](https://learn.adafruit.com/adafruit-memento-camera-board.md) - [Face Tracking Robot with MEMENTO](https://learn.adafruit.com/face-tracking-robot-with-memento.md) - [MEMENTO Focus Stacking](https://learn.adafruit.com/memento-focus-stacking.md) - [3D Printed Camera Case for MEMENTO](https://learn.adafruit.com/memento-3d-case.md) - [Facial Detection and Recognition with MEMENTO](https://learn.adafruit.com/facial-detection-and-recognition-with-memento.md) - [ePaper Camera](https://learn.adafruit.com/epaper-camera.md) - [Memento Photo Capture with itsaSNAP](https://learn.adafruit.com/memento-photo-capture-with-itsasnap.md) - [IoT Bird Feeder with Camera](https://learn.adafruit.com/iot-window-bird-feeder-with-camera.md) - [MEMENTO Camera Quick Start Guide](https://learn.adafruit.com/memento-camera-quick-start-guide.md) - [DIY IoT Doorbell Camera with MEMENTO](https://learn.adafruit.com/diy-iot-doorbell-camera-with-memento.md) - [BLE Cat Thermal Printer with MEMENTO](https://learn.adafruit.com/ble-cat-thermal-printer-with-memento.md) - [AdaBox 021](https://learn.adafruit.com/adabox021.md) - [Adafruit PCA9546 4-Channel STEMMA QT Multiplexer](https://learn.adafruit.com/adafruit-pca9546-4-channel-stemma-qt-multiplexer.md) - [Simon Game for PyRuler and CircuitPython](https://learn.adafruit.com/simon-game-with-pyruler-and-circuitpython.md) - [CircuitPython Powered Sip & Puff with ST LPS33HW Pressure Sensor](https://learn.adafruit.com/st-lps33-and-circuitpython-sip-and-puff.md)