The README provided in the GitHub repository explains how to use the application succinctly; nonetheless, this visual guide is provided to help. When you first open up the application, you should see the following:

First, upload an image by either clicking the left box and selecting the image to upload or dragging the image into the box. Once the image has uploaded, you should see your input image under the "Input image" label, as well as the color palette chosen by the tool to represent your image. You should also see a preview of what the image will look like after going through JSFormer. On the right, you should see a large block of code.

Be wary that high-resolution images may take some time to render. Do not expect high-resolution images to necessarily look good on the LCD.

Now that we have our image uploaded, let's play around with the settings.

Image output size sets the dimensions (in pixels) of your output image. By default, this is set to 16x16 pixels. The LCD on the MSP432 has a maximum resolution of 128x128, so you should not have to make any images larger than this.

Color depth determines how many colors should be used in the output image. Your options are:

• 2-color (1 bit per pixel)

• 16-color (4 bits per pixel)

• 256-color (8 bits per pixel)

The lower your bits per pixel rates (bpp), the fewer colors will be used in your image but also the smaller your file size will be. It's recommended to use 2-color or 16-color for large output images.

(Quick math: a 128x128 image is 128*128=16,384 pixels. With 8 bits per pixel, your image file size would be at least 131,072 bits or 16,384 bytes (about 16 KB). Using 4 bits per pixel slashes that file size in half to 65,536 bits or 8,192 bytes (about 8 KB). The LCD driver is already slow, so the smaller your image file sizes, the better the LCD can draw and render your images. Be efficient!)

As mentioned in the README, you can apply dithering to your images to potentially improve image quality. Dithering is a method of "blending" color pixels to provide a more detailed or smoother image with a limited color palette. The effects are most noticeable with 2-color or 16-color images.

On the right, you can choose your image prefix and indentation style. The indentation style is completely up to your preferences as a coder. More importantly, every image you use in a single project should have a unique image prefix. This prefix should not contain any spaces or hyphens. Using spaces or hyphens in the image prefix name will cause compiler issues and will prevent your code from building.

Examples of invalid image prefixes:

• • circuit board blue

  • circuit-board-blue

Examples of VALID image prefixes:

• circuit_board_blue

• circuitBoardBlue

Your image is now ready to be exported to CCS! If this is the first image you are using for your project, then you will first need to open the CCS project you want to work with. Next, create a new source file by right-clicking on your project in the Project Explorer > New > Source File.

You will see a pop-up prompting you to give a name to your file. Be sure to append .c to the end of the file name.

Once the new source file is created, open the file. Then copy the code from JSFormer and paste it into the newly-created source file.

Next, find the part of the code that declares a const Graphics_Image with your specified image prefix and copy the name of that image object. For this example, the variable's name would be circuit_board_blue4BPP_UNCOMP, as highlighted below in yellow.