RGB LED Matrix, Aangestuurd Via Zelfgemaakte Unity (teken) App

Eerste idee

De corresponderende lichten, lichten op wanneer in een app getekend wordt. Zo kan art gemaakt worden in een ‘lichtbak’. Hiervoor eventueel LEDS of een LEDstrip gebruiken, maar kan nog gekeken worden naar andere materialen. Door een houten frame wordt het licht van de LED’s goed gescheiden om een ‘pixel’ gevoel te geven. Het eerste idee is te zien in de tekening.

Iteratie

Ipv een LEDstrip wordt een RGBmatrix board gebruikt, hier heb je meer lichten terwijl het goedkoper is. Daarnaast scheelt het extra werk.

Uiteindelijk uitgevoerde idee

Via een app, gemaakt in unity, wordt kleur toegewezen aan de cirkels. Hierbij gaan de corresponderende LED's in de RGB LED Matrix aan. De rijen met rondjes communiceren met de LEDs op dezelfde plek op de RGB LED Matrix. Zo kan op een makkelijke manier getekend of geschreven worden op de Matrix zonder rijen code te schrijven.

Van dit idee heb ik veel geleerd. Zo heb ik op een andere manier geleerd te solderen als eerst. Wanneer je met tin de draden wil vast solderen zal je snel te veel tin gebruiken waardoor het ‘uitsteekt’ en de andere pins zal beïnvloeden. Zo heb ik, om dit zoveel mogelijk te voorkomen, wat alsnog behoorlijk lastig was, de draden eerst ‘gecoat’ met tin. Hierdoor kan je het draad warm maken en hem zo vastmaken aan de LED matrix. Daarnaast weet ik nu hoe ik een Arduino kan combineren met unity.

Benodigdheden

Elektronische componenten

• Arduino Mega;
• USB-B (male) naar USB-A (male) kabel;
• RGB matrix (64x32);
• Datakabel;
• 16 stuks Jumperdraad male to male;
• 5v power cable for RGB LED Matrices;
• 5v adapter.

Behuizing

• Hout;
• Scharnieren (optioneel);
• Schroeven;
• Spijkers.

Gereedschap

• Soldeerbout met toebehoren;
• Schroevendraaier;
• Houtzaag;
• Boormachine;
• Striptang. 

Programma’s

• Arduino IDE https://www.arduino.cc/en/software;
• Unity https://unity.com/download. 

Sluit de Arduino aan op de RGB LED matrix. Wanneer de datakabel gebruikt wordt, let dan op dat de kabels omgekeerd aangebracht moeten worden dan dat op het bord zelf staat. G1 staat rechtsboven in op het bord, maar moet dan linksboven in de datakabel gedaan worden. Vergeet daarnaast niet de 5V voeding aan te sluiten op het matrixbord, wanneer je dit niet doet dan lichten de matrixbord LED’s waarschijnlijk alleen op in het rood.

Download als aller eerst de Arduino IDE https://www.arduino.cc/en/software.

Download vervolgens de library RGB matrix Panel by Adafruit via de Arduino IDE. Vervolgens kan je de voorbeeldcode gebruiken via “file -> examples -> RGB Matrix Panel -> testshapes_32x64” om zeker te weten dat alles goed aangesloten zit. Verander in de voorbeeldcode de CLK naar 11, automatisch staat deze op 8 voor de Adafruit METRO M0.

Wanneer dingen niet goed overeenkomen of werken, probeer dan te zien wat eventueel verkeerd aangesloten zit.

OE = actief wanneer LOW aan staat, wanneer het HIGH is, zet het alle LED’s uit.

CLK= wordt gebruikt om de kleur data door te geven.

LAT = wanneer dit HIGH staat geeft het de data door aan de LED output registers.

A, B, C en D= selecteert 8 of 16 rijen in de matrix om op te lichten.

R1, G1 en B1= geeft de kleur data door aan de bovenste helft van de matrix.

R2, G2 en B2= geeft de kleur data door aan de onderste helft van de matrix.

GND= hier is het elektrische niveau 0 volt.

Als specifieke problemen zich voordoen dan kan het probleem snel gevonden worden door de functies te weten van de verschillende pins. Als iets bijvoorbeeld niet werkt, terwijl alles zeker weten aangesloten zit, dan is iets via het solderen per ongeluk aangesloten (of een brug van tin ertussen) op de GND.

Om de Arduino te laten werken met Unity hebben we de Uduino extensie nodig. Download Unity via: https://unity.com/download en open een nieuw 2d project. Ga vervolgens naar de Unity assetstore en log in met je gegevens. Daarna moet je op zoek naar Uduino en moet deze gedownload worden https://assetstore.unity.com/packages/tools/input-management/uduino-arduino-communication-simple-fast-and-stable-78402.

• Ga in Unity naar Window->Package Manager-> volgens ga je op zoek naar de Uduino extensie en druk je op importeren;
• Open de Uduino map in je assets en sleep de Uduino prefab in de scene. 
• Daarna krijg je het stappenplan uit het eerste plaatje in je instructor. Selecteer waar op je computer de Arduino libraries folder staat via ‘select path’. Als je dit gedaan hebt, klik op ‘add Uduino library to Arduino'. 
• Druk bij stap 2 op ‘fix now’.
• Selecteer bij stap 3 de Arduino Mega, daarna kan je het opslaan en kan je verder.
• In het nieuwe menu krijg je waarschijnlijk de volgende melding. Uduino werkt met de Arduino net iets anders en heeft daardoor aanpassingen nodig in de instellingen. Door op de onderste knop te drukken past hij de instellingen vanzelf aan. Mocht deze melding niet verschijnen of de arduino nog niet verbinden nadat op ‘discover ports’ gedrukt is, zet dan in de advanced settings de discovery delay en discovery tries omhoog totdat hij wel verbind.

De Arduino code is een combinatie van voorbeeldcode van de Uduino en RGB Matrix Panel en zelfgemaakte functies.

#include <RGBmatrixPanel.h> //includes the RGB matrix Panel library by Adafruit

//defines the functions on the matrix board to the pins on the arduino
#define CLK 11 
#define OE   9
#define LAT 10
#define A   A0
#define B   A1
#define C   A2
#define D   A3

RGBmatrixPanel matrix(A, B, C, D, CLK, LAT, OE, false, 64); //calls a RGB matrix Panel library function


//includes the uduino library and gives it a name
#include<Uduino.h>
Uduino uduino("uduinoBoard"); // Declare and name your object

void setup()
{
  Serial.begin(9600); //starts connection with laptop
  matrix.begin(); //calls upon the matrix function

  uduino.addCommand("draw", drawPixel); //the draw function, which is to be called upon from unity to light the right leds up
}

void loop()
{
  uduino.update(); // keeps the uduino functions running
}

//the function that lights up the right led with the right color from Unity
void drawPixel() {
  int x = uduino.charToInt(uduino.getParameter(0));
  int y = uduino.charToInt(uduino.getParameter(1));
  int r = uduino.charToInt(uduino.getParameter(2));
  int g = uduino.charToInt(uduino.getParameter(3));
  int b = uduino.charToInt(uduino.getParameter(4));
  matrix.drawPixel(x, y, matrix.Color333(r, g, b));
}

Voor het maken van de app heb je in stap 3 al een unity project geopend met de Uduino prefab toegevoegd. Volg daarna de volgende stappen:

• Voeg een 2d cirkel toe aan unity en maak het een prefab, voeg vervolgens nog eenzelfde soort cirkel toe als child. Zorg dat het over de originele cirkel heen valt, maak hem wit en zet de alpha lager. Dit wordt gebruikt als de highlight van de cirkels, wanneer je er met de muis overheen gaat;
• Maak een nieuw script aan, en voeg de code 'matrixBoard' toe. Maak vervolgens een lege gameobject aan in de scene en voeg het script hieraan toe.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Uduino; // add this for the uduino functions

public class matrixBoard : MonoBehaviour
{

   // sets the right color
    public Color pixelColor;

   // takes the highlight and sets the position
    public GameObject highlight;
    float xHighlight = 49f;
    float yHighlight;

    // Start is called before the first frame update
    void Start()
    {
      // sets the standard color to black
      Black();
    }

//color functions, these functions have been linked to their respective color buttons. they change the color that gets painted with and changes the position of the highlight accordingly
   public void Red() {
      pixelColor = new Color32(255, 0, 0, 255);
      yHighlight = 1022.4f;
   }

   public void Orange() {
      pixelColor = new Color32(255, 75, 0, 255);
      yHighlight = 904.5f;
   }

   public void Yellow() {
      pixelColor = new Color32(255, 255, 0, 255);
      yHighlight = 800/1;
   }

   public void Green() {
      pixelColor = new Color32(0, 255, 0, 255);
      yHighlight = 696.5f;
   }

   public void LightBlue() {
      pixelColor = new Color32(0, 198, 255, 255);
      yHighlight = 596.3f;

   }

   public void DarkBlue() {
      pixelColor = new Color32(0, 17, 255, 255);
      yHighlight = 480.7f;
   }

   public void Purple() {
      pixelColor = new Color32(102, 0, 255, 255);
      yHighlight = 379.9f;
   }

   public void Pink() {
      pixelColor = new Color32(255, 0, 251, 255);
      yHighlight = 274.5f;
   }

   public void White() {
      pixelColor = new Color32(255, 255, 255, 255);
      yHighlight = 168.6f;
 
   }

   public void Black() {
      pixelColor = new Color32(0, 0, 0, 255);
      yHighlight = 59.34f;
   }

    // changes the highlight position when needed
    void Update()
    {
       highlight.transform.position = new Vector3(xHighlight,yHighlight,0);
    }
}

• Maak daarna 10 verschillende vierkanten knoppen aan (je kan gewoon 2d vierkanten aanmaken en het component “button” toevoegen), voeg hier de verschillende kleur functies aan toe uit het eerder toegevoegde script (in de button component de “On click ()” moet je de gameobject toevoegen waar het script aan verbonden staat) en maak de vierkanten de bijbehorende kleur;
• Vervolgens maak je nog een 2d vierkant aan die iets groter is dan de andere 10 en maak je deze wit. Deze voeg je toe aan het eerder aangemaakte script bij “highlight” bij het gameobject. Bekijk in de inspector welke X en Y gegevens hij moet hebben, bij mij is het waarschijnlijk anders, omdat ik de kleur vierkanten net op een andere plek heb gezet. Verander de xHighlight en yHighlight in het MatrixBoard script op hoe jij je eigen UI (de kleur vierkanten) heb geplaatst;
• Maak een nieuw script, en voeg de code 'color' toe. Zet dit script vervolgens bij de cirkel die je aan hebt gemaakt bij de eerste stap. Voeg in de inspector bij dit script de highlight toe die je bij de eerste stap gemaakt heb bij “highlight”, laat de X en Y op 0 staan, zet het gameobject met het eerste script bij “gameobject” en laat restart op 0 staan;

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement; // add this for the clear button, to reset the board
using Uduino; // add this for the uduino functions

public class color : MonoBehaviour
{
    private SpriteRenderer rend; // takes the renderer to change the circle color
    
    [SerializeField] private GameObject highlight; //gets the highlight

    // the x and y to send to the corresponding light of the arduino
    [Range(0,63)]
    public int x;
    [Range(0,31)]
    public int y;

    //calling other script to grab the pixel color
    matrixBoard mB;
    public GameObject gameobject;

    public int Restart; // for the clear button

    // Start is called before the first frame update
    void Start()
    {
        //get the components
        mB = gameobject.GetComponent<matrixBoard>();
        rend = GetComponent<SpriteRenderer>();

        // makes all circles black
        rend.color = Color.black;

    }

    //paints the circles the right color and sends a message to light up the corresponding led with the right color & sets the highlight to active
    void OnMouseOver(){
        highlight.SetActive(true);

        if (Input.GetKey (KeyCode.W)){
        Debug.Log("function has been called");
        
        rend.color = mB.pixelColor;
        UduinoManager.Instance.sendCommand("draw", x, y, (mB.pixelColor[0] * 255), (mB.pixelColor[1] * 255), (mB.pixelColor[2] * 255));
        } else {
            Debug.Log("entered without function active");
        }
    }


    // makes the highlight inactive if the mouse leaves the circle
   void OnMouseExit(){
        highlight.SetActive(false);
    }

    // clears the screen
    public void clear(){
        SceneManager.LoadScene(Restart);
    }
}

• Voeg de cirkel toe aan de scène en test de app, standaard staat de kleur op zwart dus betekent het dat het licht uit staat. Wanneer je op een kleur klikt en vervolgens “W” ingedrukt houdt en over de cirkel heen gaat, moet de LED helemaal linksbovenin je matrixbord oplichten in de geselecteerde kleur. (Voor mij persoonlijk kreeg ik het niet werkend met het klikken van de muis, dan lichtte alleen het eerste lichtje op en de rest niet wanneer je sleepte, als je hiervoor een oplossing hebt gebruik het.);
• Zet het testen van de app uit, wanneer alles werkt moet je nu de cirkels gaan dupliceren totdat het een volledig grid vormt van 64 x 32. Ik heb eerst een rij van 32 naar beneden gemaakt (vergeet niet de “Y” per cirkel te veranderen iedere keer als je er eentje naar beneden gaat, geef het ook een duidelijke naam zodat je weet of het goed werkt). Zet alle cirkels in een mapje en dupliceer de rijen en plaats ze steeds 1 naar rechts (vergeet dan niet de “X” per cirkel te veranderen) totdat je het volledige grid hebt (mocht je willen dan kan je zelf een script maken met code die de grid automatisch maakt, dan moet je alleen wel kijken of je de X en Y van de cirkels door kan geven voor de Uduino functie, dit lukte mij persoonlijk niet dus heb ik zelf het grid met de hand gemaakt).
• Maak als laatste een nieuwe button aan die het grid en matrixbord weer zwart maakt wanneer het aangeklikt wordt. Bij “On Click ()” voeg het gameobject toe met de tweede gemaakte script met de Clear() functie. Bekijk bij file->build settings voor de zekerheid of deze scene de eerste (dus 0) is, wanneer dit niet zo is, verander het cijfer naar welke het wel moet zijn;
• Aan het einde ziet jouw app waarschijnlijk ongeveer hetzelfde uit als het toegevoegde plaatje.

Sluit de Arduino aan en start de Unity app op, nu moet wanneer je tekent ('w' ingedrukt houden en erover heen slepen, je kan de knop ook zelf veranderen in het color script. Dus ipv de 'w' een andere knop) in de app de bijbehorende LED’s op de matrix aangaan in de goede kleur. Wanneer dit niet zo is, controleer de code of de aansluitingen nog een keer.

Mijn behuizing heb ik van hout gemaakt, maar andere materialen kunnen natuurlijk ook gebruikt worden. Ik heb mijn behuizing precies gemaakt zodat het aansluit op de achterkant van de matrix, dus meet de matrix op en zaag de hout op lengte (zoals op de foto's), voor de breedte heb ik ervoor gezorgd dat de Arduino in de behuizing past, in mijn geval was heb ik hem ongeveer 10 cm breed gemaakt. Voor de achterkant heb ik een stuk hout gezaagd op de maat van de matrix om het mooi af te sluiten. Schroef de stukken aan elkaar, zo is uiteindelijk de Arduino verborgen en kan je hem neerzetten. Aan de kant van de Arduino moet nog een gat gemaakt worden waar de USB in past en een gat voor de draad van de 5v adapter.

Voor mijn behuizing heb ik een scharnier gebruikt voor de achterkant, zodat ik makkelijk bij de Arduino en bedrading kon voor mijn opdracht, dit is optioneel.