Skip to content

Backend code

Jean-Baptiste Le coz edited this page Nov 3, 2023 · 3 revisions

Wifi (beginner)

Default value : Wifi in AP mode

//#define STA       // Decomment this to use STA mode instead of AP

ImagePainting can operate in two separate mode :

  • STA : As STAtion. In this case, the ESP8266 will connect to your router and be another client of your network. You have to look at the serial monitor of the Arduino IDE during the boot of the ESP8266 to find its IP address. This is mainly for debug.

  • AP : As Access Point. In this case, the ESP8266 will provide his own wifi network and you will connect directly on him. To keep it simple, there is no password and the ESP8266 can be reach at http://192.168.1.1. This is the preferred mode as it is very unlikely to have a wifi router everywhere.

This section of the code define the Wifi parameter in STA and AP mode :

// WIFI --------------
#ifdef STA // STA Mode
const char* ssid = "SSID"; // your wifi ssid for STA mode
const char* password = "PASSWORD"; // your wifi password for AP mode
#else // AP Mode
const char* ssid = "imagePainting"; // wifi ssid for AP mode
IPAddress apIP(192, 168, 1, 1); // wifi IP for AP mode
#endif
// end WIFI -----------
  • SSID and PASSWORD : you have to set your router ssid and password to use STA mode.

LED Strip (beginner)

Default value : Support for Dotstars (aka APA102)

#define FEATURE DotStarBgrFeature // Dotstars : DATA_PIN : MOSI / CLOCK_PIN :SCK (Wemos D1 mini DATA_PIN=D7(GREEN) CLOCK_PIN=D5 (Yellow))
#define METHOD DotStarSpiMethod // Dotstars
//#define FEATURE NeoGrbFeature // Neopixels : DATA_PIN : RDX0/GPIO3 (Wemos D1 mini DATA_PIN=RX)
//#define METHOD Neo800KbpsMethod // Neopixels

I have test with success Dotstars (aka APA102) and Neopixels (aka WS2812B). I have selected the fastest METHOD for this two type of LED, but you can find more options at the NeoPixelBus dedicated page. If you have a problem with color try to select the right FEATURE : Brg, Grb, Rgb... are the order of the Red, Green and Blue component inside each LED which can vary.

This section of the code define the LED strip :

// LED --------------
const int NUMPIXELS = 119;
NeoPixelBus<FEATURE, METHOD> STRIP(NUMPIXELS);
NeoPixelAnimator ANIMATIONS(1); // NeoPixel animation management object
NeoBitmapFile<FEATURE, fs::File> NEOBMPFILE;
// end LED -----------
  • NUMPIXELS : Choose the number of LED in your LED strip.

Push button (beginner)

Default value : Push button enable

#define BUTTON      // Decomment this to use BUTTON

The 2 push buttons are optional. However, it's more convenient to launch your animation with a button than clicking on a touch screen.

By default, ImagePainting handle the 2 push buttons (BTNA and BTNB) like this :

  • BTNA : "short click" --> Play/Pause and "long click" --> Burn

  • BTNB : "short click" --> Stop and "long click" --> Light

This section of the code define the push button :

// BUTTON --------------
long DEBOUNCETIME = 50; //Debouncing Time in Milliseconds
long HOLDTIME = 500; // Hold Time in Milliseconds
const int BTNA_PIN = D3; //PIN for the button A
const int BTNB_PIN = D4; //PIN for the button B
long BTNATIMER = 0;
long BTNBTIMER = 0;
boolean ISBTNA = false;
boolean ISBTNB = false;
boolean ISBTNAHOLD = false;
boolean ISBTNBHOLD = false;
// end BUTTON-----------
  • BTNA_PIN and BTNB_PIN : I use D3 and D4 on purpose for my Wemos D1. This is internal Pull-Up Pin, so check the specification of your board before changing those PIN.

  • HOLDTIME : HOLDTIME can be tweak to have a shorter/longer "long click".

  • DEBOUNCETIME : DEBOUNCETIME can be tweak to have a good button response without false detection.

Playlist size (beginner)

Default value : Max playlist size = 5

The playlist is an array of the struct that store all the parameter. Its size has to be declare in the code, but don't go too big to keep memory.

This section of the code define the playlist :

// PLAYLIST --------------
const uint8_t PLAYLISTMAX = 5; // Playlist max size
t_parameter PLAYLIST[PLAYLISTMAX]; // Hold playlist
uint8_t PLAYLISTSIZE; // Playlist size
// end PLAYLIST --------------
  • PLAYLISTMAX : The maximum size of the playlist.

CORS ( Cross-Origin Resource Sharing ) (advanced)

Default value : CORS support disable

//#define CORS      // Decomment this to support CORS

CORS is a nice to protect you on the web, but not so much when you want to make request directly on the ESP8266.

  • CORS support disable : The frontend (html+js+css) must to be on the ESP8266 flash memory to be serve by the ESP8266 ( var address = ""; in imagePainting.js). If not, CORS will block all request.
  • CORS support enable : The frontend (html+js+css) can be anywhere (var address = "http://ES.82.66.IP";in imagePainting.js). CORS will be satisfy. It can be useful to save space the ESP8266 memory as the frontend take 500ko-600ko. It will also boost reactivity as the ESP8266 won't serve the html+js+css. This is mainly for debug.

This section of the code define the CORS preflight :

#ifdef CORS //CORS enable : respond to preflight
    if (server.method() == HTTP_OPTIONS)
    {
      server.sendHeader("Access-Control-Max-Age", "10000");
      server.sendHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE");
      server.sendHeader("Access-Control-Allow-Headers", "*");
      server.send(200);
      return;
    }
#endif
  • Access-Control-Allow-Methods : Request method that ESP8266 allow.