Displaying Inkscape images on the LEGO NXT brick with LeJOS

If you are new to using inkscape then maybe check out their tutorial page to get started drawing basic shapes.

This is what it looks like when you open up inkscape:
1

The default page size when Inkscape is started up is a4. To make our lives easier, we can change the page size to match the screen size on the lego NXT brick. The bricks LCD is 100×64 (100 pixels wide, 64 high). To change the page size click File > Document Properties. This will open up a new window. Under the ‘page’ tab enter the custom width and height as shown below. Check to make sure that the units are px and not something else like mm.
2

Now the page should look something like this:
3

Everything is now set up to start drawing so fill the page with whatever you want! Hopefully it’s better than what I did :
4

Before exporting the picture there is an important step to ensure that the image displays correctly on the NXT brick. The background colour of the image looks white but it is actually undefined or blank. This will cause it to be displayed as black on the NXT brick resulting in just a black square being displayed. To make the background white click File > Document Properties and once again a window will pop up. Under the page tab, click the rectangle beside “Background Colour” and under the RGB tab, make sure all values are 255.
6
7

We are now ready to export the image as a PNG file. To do this click File > Export PNG Image. To display this image on the NXT using lejos we first have to convert it to a format it can work with. Lejos comes with a tool called nxjimage. This is a little gui that will let you import an image and export it in the proper lejos format. The nxjimage tool can be found in the lejos installation directory in the bin folder.

This is what the nxjimage gui looks like:
8

To import the png file created in Inkscape click Image > Import Image. Then navigate to wherever you saved the file.
The export the file in the native lejos format click Image > Export LeJOS NXT Image File

Now to upload the image to the NXT brick. This can be done in terminal presuming you have lejos added to your path.
The following command can be used to upload the image. (the image name is test.lni)

nxjupload test.lni

Now all that’s needed is a LeJOS program that will run on the NXT and display the image file we just transferred. See below for some example code:

//lejos program to display images stored on nxt brick
//will display image until button is pressed
//wattnotions 31/5/2015

import javax.microedition.lcdui.Font;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
import javax.microedition.lcdui.game.Sprite;
import lejos.nxt.*;

import lejos.nxt.Button;

import java.io.File;
import java.io.FileInputStream;


public class GraphicsSample {
	final int DELAY = 4000;
	Graphics g = new Graphics();
	final int SW = LCD.SCREEN_WIDTH;
	final int SH = LCD.SCREEN_HEIGHT;
	
	void fileImage(String picname) throws Exception
    {
       
        Image img = Image.createImage(new FileInputStream(new File(picname)));
        g.drawRegion(img, 0, 0, SW, SH, Sprite.TRANS_NONE, SW / 2, SH / 2, Graphics.HCENTER | Graphics.VCENTER);
        Button.waitForAnyPress(DELAY);
    }

	public static void main(String[] args) throws Exception {
		
		GraphicsSample sample = new GraphicsSample();
		sample.fileImage("test.lni");
		Button.waitForAnyPress();
	}
}


This LeJOS program can be compiled using this command:

nxjc GraphicsSample.java

to upload it to the NXT:

nxj -r GraphicsSample

The Result:

IMG_1512.JPG

Bonus Pics:

r2d2
r2d2

dragon
dragon

One thought on “Displaying Inkscape images on the LEGO NXT brick with LeJOS

  1. Hello!!…nice tutorial!!…but i have a problem…i copied your code,but when i run the program in the display NXT show:

    Exception: 77
    (Image).lni doe
    at: 124.35
    at: 34.13
    at: 35.12

    what is the problem?

    Thank you!!

Leave a Reply

%d bloggers like this: