Close
0%
0%

DIY Social Media Follower Display (Awtrix)

3D Printed Matrix display that allows you to display anything you want

Public Chat
Similar projects worth following
Welcome to my first project on Hackaday. This is a fully 3d printed matrix display that allows you to use an automation program like n8n to display anything you want. ( I use it to display my social media information)

The PCB is not needed for this project, but it makes it much easier.
https://theprintingpilot.com/products/diy-social-media-follower-display-awtrix-pcb-only-youtube-tiktok-reddit-twitch-instagram

Welcome!

If you're looking for a way to display all your social media followers' information on one device, this project is for you! The project uses Awtrix software (open-source), and basically, it is a blank display, and you can display ANYTHING you want there (not only social media information).

This is my first project on Hackaday, so if it feels like this post is all over the place, it's because I'm still learning :)

This project uses an open-source project called Awtrix3 - link

I wrote step-by-step instructions for the project, and all the 3d printed parts needed are available on my Printables.

The Display has 3 Touch sensors, and a Temp/Humidity sensor. You can seed all the information Via MQTT to HomeAssistant and control it via HA.

Printed parts needed:

1x Body left
1x Body Right
1x Diffuser Left 
1x Diffuser Right
1x Diffuser Connector
4x LED Support

Electronics:

8*32 WS2812B Matrix Display -
Temperature & Humidity Sensor 
TTP223 Capacitive Touch Switch 
On/Off Switch 
Power Supply

Need to choose from 2 options:

PCB - Fully assembled PCB that will make the project much easier (and will also help and support us to make more projects like that) - 

OR

ESP32 version -  you will have to wire everything yourself and hot glue the power connector and the ESP to the body of the display.

Hardware:

M3 Thread Inserts (x23) 
M3X8 Screws (x11) 
M3X5 Screws (x16)

Step-by-Step Video (Body + Software): the easy way

youtube.json

JavaScript Object Notation (JSON) - 4.30 kB - 05/21/2025 at 17:30

Download

reddit.json

JavaScript Object Notation (JSON) - 3.04 kB - 05/21/2025 at 17:30

Download

tiktok.json

JavaScript Object Notation (JSON) - 3.91 kB - 05/21/2025 at 17:30

Download

twitch.json

JavaScript Object Notation (JSON) - 3.47 kB - 05/21/2025 at 17:30

Download

instagram.json

JavaScript Object Notation (JSON) - 3.85 kB - 05/21/2025 at 17:30

Download

View all 10 components

  • 1
    Instructions:

    Body build Instructions:  

    (DONT forget to follow the wire diagrams added in the files project)

    1. press 3 thread inserts into the right body part, as you see in the picture below. 

         2. Connect the two halves of the body with 3 M3x8 screws

         3. Press 2 heat inserts into the left body part, and screw in the PCB with 2 M3x5 screws

         4.  Hot glue the temperature sensor (don't forget to wire it!) to the right body part ( make sure the temp sensor is showing through the hole).

       5.   Wire and hot glue the 3 touch sensor into the top of the body assembly.

      6.   Press the 16 heat inserts into the diffuser 2 parts.

      7. inserts the LED matrix and close everything with the 4 LED Support parts using M3x5        Screws. Connect the two halves of the diffusers with the Diffuser Connector and 2 M3x8    screws.

      8. Finish the assembly with 6 M3x8 Screws and connect the body with the diffusers.

    n8n instructions:

    in the project here, you have .json flies (example YouTube.json), this files are the automation workflow that n8n will run to send information to the display. the code is already ready! all you have to do is just add your information.

    DO THIS FOR ALL THE WORKFLOWS:

    Start with:

    Open n8n: and press “Create Workflow”

    Press the 3 Dots on the top right, import from file, and import the JSON file you want.

    Now follow the instructions under the correct json file (for example Tiktok)

    COME BACK HERE after you finish with the json instructions and do this:

    AFTER changing everything you need to change in the json (check the instructions below) 
    for every json, you will also need to download the icon to your display, go to the social media flow, go to send to clock, scroll down until you will see ICON and copy the numbers:
     



    Go to your favorite browser, go to the display IP, go to icons, paste that number there and press download, that will load the icon to the display memory,

    Tiktok:

    after loading the json, double click on fetch data, and add your username instead of “ChangeMe”

    Under Send to Clock and Remove app, Change the IP to the IP of the Display:
     

    Now go back and do the Icon download.

    Youtube:

    You will need to create a project in Youtube Developer, (full instructions in this video).
    You will need your channel ID and your API Secret key.

    after loading the json, double click on fetch data, and add your ID and Secret KEY instead of “ChangeMe”

    Under Send to Clock and Remove app, Change the IP to the IP of the Display:

    Now go back and do the Icon download.

    Instagram:

    after loading the json, double click on fetch data, and add your Instagram name under username. (replace the ChangeMe).

    Under Send to Clock and Remove app, Change the IP to the IP of the Display:

    Now go back and do the Icon download.

    Reddit:

    after loading the json, double click on fetch data, and add your Reddit name under username. (replace the ChangeMe).

    Under Send to Clock and Remove app, Change the IP to the IP of the Display:

    Now go back and do the Icon download.

    Twitch:

    1. Go to Twitch Developer Console, Press on Register your Application.
    2. Name - whatever you want.
    3. OAuth Redirect URLs -  http://localhost:5678/rest/oauth2-credential/callback.
    4. Category -  Other.
    5. Go back to Dashboard and press on your Mange on your new app.
    6.  Copy Your Client ID, Press New Secret, And copy your Secret Code.
    7. Go to this Website, and get your Twitch Broadcaster ID.

    Now we have everything we need, go back to n8n and load the Twitch Json file.
    Press the Fetch Data, Under OAth2 API press Create New Credentials

    In the new window fill all the inforrmatin needed:

    1. under Grant Type choose Client Credentials.
    2. under Access Token URL  add https://id.twitch.tv/oauth2/token.
    3. add your Client ID from the previous step.
    4. add your Client Secret from the previous step.
    5. Under Scope add moderator:read:followers.
    6. under Authentication choose body.

    Go back to fetch data window, scroll down, under Broadcaster ID add the Broadcaster id we got from the previous step. (the website). And under Client ID add your Client ID again.

    Now go back and do the Icon download.

View all instructions

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates