Skip to content

Commit c17d0ff

Browse files
witnessmenowwitnessmenow
committed
Moving to a generic display implementation, added Matrix support
1 parent acaac37 commit c17d0ff

File tree

13 files changed

+1377
-452
lines changed

13 files changed

+1377
-452
lines changed

‎.github/workflows/build-deploy-webflash.yml

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ jobs:
6262
- name: ESP_DoubleResetDetector
6363
- name: ArduinoJson
6464
- name: JPEGDEC
65-
- name: XPT2046_Touchscreen
65+
- name: Seeed_Arduino_NFC
66+
source-url: https://github.com/witnessmenow/Seeed_Arduino_NFC.git
6667
sketch-paths: |
6768
- SpotifyDiyThing
6869
enable-warnings-report: true
@@ -90,6 +91,47 @@ jobs:
9091
# Using a version agnostic search to find the file. grep -m 1 makes sure only one file is copied in case multiple versions are installed.
9192
find /home/runner/.arduino15/packages/esp32/hardware/esp32/ -type f | grep -i -m 1 boot_app0.bin$ | xargs -i cp {} GitHubPages/ESPWebTools/cyd
9293
94+
# Build Matrix Arduino Code
95+
- uses: arduino/compile-sketches@v1
96+
name: Compile Matrix code
97+
with:
98+
fqbn: "esp32:esp32:esp32"
99+
platforms: |
100+
- name: esp32:esp32
101+
source-url: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
102+
# No need to specify ESP-libraries as these are installed with the platform (on the line above).
103+
# Just need to specify the matrix specific libraries, the others are already installed.
104+
libraries: |
105+
- name: ESP32 HUB75 LED MATRIX PANEL DMA Display
106+
source-url: https://github.com/witnessmenow/ESP32-HUB75-MatrixPanel-I2S-DMA.git
107+
- name: Adafruit GFX Library
108+
sketch-paths: |
109+
- SpotifyDiyThing
110+
enable-warnings-report: true
111+
verbose: false
112+
cli-compile-flags: |
113+
- --build-property
114+
- compiler.cpp.extra_flags=-DMATRIX_DISPLAY
115+
- --export-binaries
116+
117+
# Copy binaries to GitHubPages folder for publishing
118+
- name: Copy compiled binaries to Matrix
119+
run: |
120+
# Make matrix directory
121+
mkdir GitHubPages/ESPWebTools/matrix
122+
123+
# Copy the manifest file for the matrix
124+
cp GitHubPages/ESPWebTools/manifest.json GitHubPages/ESPWebTools/matrix
125+
126+
cd SpotifyDiyThing/build
127+
find . -print | grep -i .bin$ | xargs -i cp --parent {} ../../GitHubPages/ESPWebTools/matrix
128+
cd ../..
129+
130+
# Copy boot_app0.bin to the esp32Firmware folder. This file will be common for all esp32 boards (i think)
131+
# Using a version agnostic search to find the file. grep -m 1 makes sure only one file is copied in case multiple versions are installed.
132+
find /home/runner/.arduino15/packages/esp32/hardware/esp32/ -type f | grep -i -m 1 boot_app0.bin$ | xargs -i cp {} GitHubPages/ESPWebTools/matrix
133+
134+
93135
# Build GitHub Page
94136
- name: Setup Github Page
95137
uses: actions/configure-pages@v3

‎GitHubPages/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@ <h1>Spotify DIY Thing</h1>
1717
</span>
1818

1919
<br>
20-
<script type="module" src="https://unpkg.com/[email protected]/dist/web/install-button.js?module">"></script>
20+
<span>CYD</span>
21+
<script type="module" src="https://unpkg.com/[email protected]/dist/web/install-button.js?module"></script>
2122
<esp-web-install-button id="installButton" manifest="ESPWebTools/cyd/manifest.json"></esp-web-install-button>
2223
<br>
24+
<span>Matrix</span>
25+
<script type="module" src="https://unpkg.com/[email protected]/dist/web/install-button.js?module"></script>
26+
<esp-web-install-button id="installButtonMatrix"
27+
manifest="ESPWebTools/matrix/manifest.json"></esp-web-install-button>
28+
<br>
2329
<span>NOTE: Make sure to close anything using your devices com port (e.g. Serial monitor)</span>
2430
</div>
2531
<div id="notSupported" style="display: none;">

‎README.md

Lines changed: 119 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,97 @@ This project is a Work in Progress!
1212

1313
## Hardware Required
1414

15-
ESP32 With Built in 320x240 LCD with Touch Screen (ESP32-2432S028R), buy from wherever works out cheapest for you:
15+
This project is designed to make use of basically ready to go hardware, so is very easy to get up and running
16+
17+
Currently this project runs on two types of hardware:
18+
19+
### "Cheap Yellow Display" (CYD)
20+
21+
An ESP32 With Built in 320x240 LCD with Touch Screen (ESP32-2432S028R), buy from wherever works out cheapest for you:
1622

1723
- [Aliexpress\*](https://s.click.aliexpress.com/e/_DkSpIjB)
1824
- [Aliexpress\*](https://s.click.aliexpress.com/e/_DkcmuCh)
1925
- [Aliexpress](https://www.aliexpress.com/item/1005004502250619.htm)
20-
- [Makerfabs](https://www.makerfabs.com/sunton-esp32-2-8-inch-tft-with-touch.html) - Makerfabs also sell what is required to make a [similar project with an RGB Matrix panel](https://github.com/witnessmenow/Spotify-NFC-Matrix-Display/blob/master/README.md)
26+
- [Makerfabs](https://www.makerfabs.com/sunton-esp32-2-8-inch-tft-with-touch.html)
2127

22-
* = Affilate Link
28+
### Matrix panel (ESP32 Trinity)
2329

24-
### Alternate Hardware
30+
It's built to work with the [ESP32 Trinity](https://github.com/witnessmenow/ESP32-Trinity), an open source board I created for controlling Hub75 Matrix panels, but it will does work with any ESP32 that breaks out enough pins.
2531

26-
There is nothing special about this particaulr display other than it is cheap! This project could be adapted to run on any ESP32 based display. If the display has a different resolution than 320x240 it will need to be modified.
32+
The display it uses is a 64x64 HUB75 Matrix Panel.
2733

28-
## Software
34+
All the parts can be purchased from Makerfabs.com:
2935

30-
The following libraries need to be installed for this project to work:
36+
- [ESP32 Trinity](https://www.makerfabs.com/esp32-trinity.html)
37+
- [64 x 64 Matrix Panel](https://www.makerfabs.com/64x64-rgb-led-matrix-3mm-pitch.html)
38+
- Optional: [5V Power Supply](https://www.makerfabs.com/5v-6a-ac-dc-power-adapter-with-cable.html) - You can alternatively use a USB-C power supply
3139

32-
| Library Name/Link | Purpose | Library manager |
33-
| -------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------- |
34-
| [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI) | For controlling the LCD Display | Yes ("tft_espi") |
35-
| [SpotifyArduino](https://github.com/witnessmenow/spotify-api-arduino) | For interacting with Spotify API | No |
36-
| [ArduinoJson](https://github.com/bblanchon/ArduinoJson) | Dependancy of the Spotify API | Yes ("Arduino Json") |
37-
| [JPEGDEC](https://github.com/bitbank2/JPEGDEC) | For decoding the album art images | Yes ("JPEGDEC") |
38-
| [XPT2046 Touchscreen](https://github.com/PaulStoffregen/XPT2046_Touchscreen) | For handling the touch screen | Yes ("XPT2046") |
39-
| [WifiManager - By Tzapu](https://github.com/tzapu/WiFiManager) | Captive portal for configuring the WiFi | Yes ("WifiManager") |
40-
| [ESP_DoubleResetDetector](https://github.com/khoih-prog/ESP_DoubleResetDetector) | Detecting double pressing the reset button | Yes ("ESP_DoubleResetDetector") |
40+
\* = Affilate Link
4141

42-
### Display Config
42+
### BYOD (Bring your own display)
4343

44-
This project makes use of [TFT_eSPI library by Bodmer](https://github.com/Bodmer/TFT_eSPI).
44+
I've tried to design this project to be modular and have abstracted the display code behind an interface, so it should be pretty easy to get it up and running with a different type of display.
4545

46-
TFT_eSPI is configured using a "User_Setup.h" file in the library folder, you will need to replace this file with the one in the `DisplayConfig` folder of this repo.
46+
## NFC Tags (Optional)
47+
48+
One of the coolest parts about this project, in my opinion at least, is the ability to connect an NFC reader to control what songs/albums/playlists are being played.
49+
50+
You can write the spotify URI or URL of the song, album or playlist to an NFC tag and when you swipe it off the reader, the device will tell your spotify account to play what it reads.
51+
52+
If you aren't interested in this feature, you can just not connect it and the device will work without it.
53+
54+
### PN532 NFC reader and Tags
55+
56+
This code has been tested with these red PN532 NFC readers and cheap NFC stickers.
57+
58+
To use the PN532 as an SPI device, you need to configure the toggle switches so switch 1 is down and 2 is up. (You may need to remove the sticker on top of it)
59+
60+
#### Links
61+
62+
- [PN532 NFC reader - Aliexpress\*](https://s.click.aliexpress.com/e/_DCanbAB)
63+
- [NFC Stickers - Aliexpress\*](https://s.click.aliexpress.com/e/_DkX2F5z)
64+
65+
### Hardware support
66+
67+
#### "Cheap Yellow Display" (CYD)
68+
69+
The CYD does not have enough free pins to use an SPI device by default, and the NFC reader is quite slow over i2c, so we need to get creative.
70+
71+
With the help of an "SD Card Sniffer", we can make use of the Micro SD slot of the CYD to connect the NFC reader to.
72+
73+
##### Connections
74+
75+
| Sniffer Board Label | ESP32 Pin | PN532 NFC |
76+
| ------------------- | --------- | --------- |
77+
| DAT2 | - | - |
78+
| CD | IO5 | CS |
79+
| CMD | IO23 | DI / MOSI |
80+
| GND | GND | GND |
81+
| VCC | 3.3V | VCC |
82+
| CLK | IO18 | SCLK |
83+
| DAT0 | IO19 | DO / MISO |
84+
| DAT1 | - | - |
85+
86+
#### Links
87+
88+
- [Micro SD Card Sniffer - Aliexpress\*](https://s.click.aliexpress.com/e/_Ddwcy9h)
89+
90+
#### Matrix Panel (ESP32 Trinity)
91+
92+
Again, it is designed for the ESP32 Trinity, but can work with any ESP32 that breaks out the required pins.
93+
94+
The Trinity has some pins broken out that can be used for this purpose
95+
96+
#### Connections
97+
98+
| ESP32 Pin | PN532 NFC |
99+
| ---------- | --------- |
100+
| IO22 (SCL) | CS |
101+
| IO21 (SDA) | DI / MOSI |
102+
| GND | GND |
103+
| 3.3V | VCC |
104+
| IO33 | SCLK |
105+
| IO32 | DO / MISO |
47106

48107
## Project Setup
49108

@@ -90,6 +149,46 @@ The final step is to connect this device to your Spotify account. When the Wifi
90149
- Go to the displayed address using your phone or PC
91150
- Add the address displayed in bold to the callback URI section as mentioned in the Spotify API section
92151
- Click the `Spotify Auth` URL
93-
- You will need to give permision to the app you created to have access to your spotify account
152+
- You will need to give permission to the app you created to have access to your spotify account
94153

95154
Your project should now be setup and will start displaying your currently playing music!
155+
156+
## Code
157+
158+
If you want to program the devices yourself using the Arudino IDE, you will need to do the following to get it working
159+
160+
The following libraries need to be installed for this project to work:
161+
162+
| Library Name/Link | Purpose | Library manager |
163+
| -------------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------- |
164+
| [SpotifyArduino](https://github.com/witnessmenow/spotify-api-arduino) | For interacting with Spotify API | No |
165+
| [ArduinoJson](https://github.com/bblanchon/ArduinoJson) | Dependancy of the Spotify API | Yes ("Arduino Json") |
166+
| [JPEGDEC](https://github.com/bitbank2/JPEGDEC) | For decoding the album art images | Yes ("JPEGDEC") |
167+
| [WifiManager - By Tzapu](https://github.com/tzapu/WiFiManager) | Captive portal for configuring the WiFi | Yes ("WifiManager") |
168+
| [ESP_DoubleResetDetector](https://github.com/khoih-prog/ESP_DoubleResetDetector) | Detecting double pressing the reset button | Yes ("ESP_DoubleResetDetector") |
169+
| [Seeed_Arduino_NFC](https://github.com/witnessmenow/Seeed_Arduino_NFC) | For the NFC reader | No (it's a modified version) |
170+
171+
### Cheap Yellow Display Specific libraries
172+
173+
| Library Name/Link | Purpose | Library manager |
174+
| ---------------------------------------------- | ------------------------------- | ---------------- |
175+
| [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI) | For controlling the LCD Display | Yes ("tft_espi") |
176+
177+
### Matrix Panel Specific libraries
178+
179+
| Library Name/Link | Purpose | Library manager |
180+
| ------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------ |
181+
| [ESP32-HUB75-MatrixPanel-I2S-DMA](https://github.com/mrfaptastic/ESP32-HUB75-MatrixPanel-I2S-DMA) | For controlling the LED Matrix | Yes ("ESP32 MATRIX DMA") |
182+
| [Adafruit GFX library](https://github.com/adafruit/Adafruit-GFX-Library) | Dependency of the Matrix library | Yes ("Adafruit GFX") |
183+
184+
### Cheap Yellow Display Display Config
185+
186+
The CYD version of the project makes use of [TFT_eSPI library by Bodmer](https://github.com/Bodmer/TFT_eSPI).
187+
188+
TFT_eSPI is configured using a "User_Setup.h" file in the library folder, you will need to replace this file with the one in the `DisplayConfig` folder of this repo.
189+
190+
### Display Selection
191+
192+
At the top of the `SpotifyDiyThing.ino` file, there is a section labeled "Display Type", follow the instructions there for how to enable the different displays.
193+
194+
Note: By default it will use the Cheap Yellow Display

0 commit comments

Comments
 (0)