Arduino Serial Draw - Display via USB Interface!

Have you ever wanted to start working on new project, but you were lazy and you quit? These wires always make a mess, you need to buy that shield or module to work with and on top of all that you need to install complex coded libraries that don't work all the time. However, I made a solution myself! There is a simple program that runs on computers that runs Java and a very simple library to install so I can help you out of this mess! The program called Serial Draw will save you money, and you don't need to care about those wires anymore, you just connect your Arduino to USB port and that's it! In the following steps I'll show you how to do it:

Step 1:

Check if your PC runs Java. To check if you have Java installed open CMD (type "cmd" in start-up menu and open it) and type "java -version". If it displays witch version you have you have installed Java on your computer and go straight to Step 2. For others who don't have it download the next file and follow the instructions: https://www.java.com/EN/download/

Step 2:

Download .jar file in the APPS AND ONLINE SERVICES section (click on "Serial Draw Software Client" and download the most recent release).

You can now open the program using Java. This will launch the application and you'll see the following:

For now, close it. We will return back to this program later.

Step 3:

Download the "SerialDraw" library from Arduino Library Manager.

The following code will interact with this library. Copy and Paste it in your Arduino IDE.

#include <SerialDraw.h>
ASD ASD(0); //declare an object
void setup() {
 Serial.begin(1000000); //open serial because it is needed by the library
 ASD.initialise(31, 31, "Pixel Demo"); //configure communication and starts the software
 ASD.background("black"); //set background to black
}
void loop() {
 ASD.fillArea(13, 13, 18, 17, "white"); //fill area with white color
 ASD.pixel(15, 15, "red"); //write red pixel in the middle of the screen
 delay(5000);
}

Step 4:

When you finish uploading code to your Arduino, open the Serial Draw Client (which you have downloaded in step 2). Now click on the drop-down menu and select your COM port. If you don't know which port you are using for your Arduino, check it in Arduino IDE under Tools>Port. If you don't see your Arduino port in the drop-down menu, try restarting the Serial Draw Client.

After you have selected it click on the "Connect" button. After that wait a moment and you should see something like that.

This is a test screen. Those functions are tested in it:

ASD.background("black");

Set the background color to Black. It will not overwrite already drawn shapes.

ASD.fillArea(13, 13, 18, 17, "white");

Fills the area (draw rectangle) from XY: 13, 13 to XY: 18, 17 with white color.

ASD.pixel(15, 15, "red");

Draws a pixel to coordinates XY: 15, 15 with red color.

Keep in mind that the background will not overdraw any pixels. To remove all pixels from the screen write the following function:

ASD.clearPage();

or

ASD.clearPixel(x, y); 

to clear pixel on specified coordinates.

Other functions:

 ASD.setScore(score);

Set the score counter to a specific score number. The score counter is located on the right-hand side of the "Refresh" button.

There is another demo: it just prints hello world on display as seen on the project thumbnail.

#include <SerialDraw.h>
ASD ASD(0);
void setup() {
 Serial.begin(1000000); //open serial for library to communicate with computer
 ASD.initialise(60, 60, "Hello World Example"); //configure communication and starts the software
 ASD.background("black"); //set background to black
}
void loop() {
 hello();
 world();
 delay(5000);
}
void hello() {
 //H
 ASD.fillArea(20, 24, 20, 28, "white");
 ASD.pixel(21, 26, "white");
 ASD.fillArea(22, 24, 22, 28, "white");
 //E
 ASD.fillArea(24, 24, 24, 28, "white");
 ASD.pixel(25, 24, "white");
 ASD.pixel(25, 26, "white");
 ASD.pixel(25, 28, "white");
 //L
 ASD.fillArea(27, 24, 27, 28, "white");
 ASD.pixel(28, 28, "white");
 //L
 ASD.fillArea(30, 24, 30, 28, "white");
 ASD.pixel(31, 28, "white");
 //O
 ASD.fillArea(33, 25, 33, 27, "white");
 ASD.fillArea(36, 25, 36, 27, "white");
 ASD.fillArea(34, 24, 35, 24, "white");
 ASD.fillArea(34, 28, 35, 28, "white");
}
void world() {
 //W
 ASD.fillArea(20, 30, 20, 33, "white");
 ASD.fillArea(22, 30, 22, 33, "white");
 ASD.fillArea(24, 30, 24, 33, "white");
 ASD.pixel(21, 34, "white");
 ASD.pixel(23, 34, "white");
 //O
 ASD.fillArea(26, 31, 26, 33, "white");
 ASD.fillArea(29, 31, 29, 33, "white");
 ASD.fillArea(27, 30, 28, 30, "white");
 ASD.fillArea(27, 34, 28, 34, "white");
 //R
 ASD.fillArea(31, 30, 31, 34, "white");
 ASD.fillArea(32, 30, 33, 30, "white");
 ASD.fillArea(32, 32, 33, 32, "white");
 ASD.fillArea(34, 33, 34, 34, "white");
 ASD.pixel(34, 31, "white");
 //L
 ASD.fillArea(36, 30, 36, 34, "white");
 ASD.pixel(37, 34, "white");
 //D
 ASD.fillArea(39, 30, 39, 34, "white");
 ASD.fillArea(40, 30, 41, 30, "white");
 ASD.fillArea(40, 34, 41, 34, "white");
 ASD.fillArea(42, 31, 42, 33, "white");
}

And that's it! Stay tuned for new updates on my GitHub page: https://github.com/TilenS6/SerialDraw-Software for new updates that will be coming soon!

Have Fun!!!