This article explains how to use vector and bitmap graphics in the NB HMI.
The NB HMI supports two different kind of graphical image formats: vector graphics and bitmap graphics. Before explaining how to use vector and bitmap graphics it is important to understand the differences between the two graphics.
Bitmap vs Vector Images
Bitmap graphics are exactly as their name implies; maps of binary color information. They store this information in a grid of points or pixels, which have a fixed width and height, and they can store various ranges of colors according to the image type. Because they have a fixed number of pixels in width and height, they are difficult to resize, and have a limited resolution; zooming in produces a blocky, 'pixelated' image (as shown in the below illustration). At normal resolution, the pixels are too small for the eye to distinguish, and we see smooth and subtle color transitions.
Vector images are constructed from lines and curves drawn out in much the same way as a technical drawing. When the image is saved, the information about these lines is stored as coordinates and directions, and when viewed, the image is displayed by rendering these lines back onto the screen. Since they're drawn from these coordinates, they can be resized to almost any level and still retain their sharpness. Their main drawback is that they cannot easily render the subtlety of color blending needed for photographic images and readily available in bitmap formats, and so are generally useful for drawings, diagrams and cartoons.
Creating Graphics
Start NB-Designer, create a new program, and select either the pictogram in the toolbar or Draw (D) and then New Graphics (N) from the menu.
Define a name, select the type of graphics (Vector Graphics or Bitmap), width and height of the preview window, number of states and provide a description if required.
The width and height of the preview window is not the actual size of the graphics on the NB HMI screen nor is it the dimensions of the bitmap file. The width and height is only for the preview window to hold the image and the maximum size of the preview window is 320 x 240. The actual size and dimensions of the graphics is determined by the original file.
After creating a vector and/or bitmap graphics, they appear in the ‘vector graph’ folder structure overview as shown in the illustration below.
How to Import a Bitmap
After creating a bitmap the bitmap graphics window will open as shown in the illustration below. This window is used to load the image or multiple images depending on the number of states defined.
Please note that it is not possible to use the draw toolbar with only exception for the ‘Load image’ function.
The ‘Load image’ function allows selecting the image file (.png, .bmp, .jpg or .gif) to be used for this state. Make sure the dimensions of the image file you import match the dimensions that you want to show the image on the NB HMI screen. Example if you want to show an image full screen on the NB7, then it needs to have a resolution of 800 x 480 pixels.
It is important to save the project after creating the bitmap graphic and before using the imported bitmap. NB-Designer will not find the imported bitmap unless the NB HMI project is saved.
When the image is selected, the newly created bitmap graphic can be used as a graphic display for several components e.g. ‘Bitmap Component’ or ‘Bit State Lamp’. The ‘Bitmap Component Attribute’ window is displayed below; in this window the bitmap image can be selected.
Please note that it is possible to use the original resolution of the imported bitmap by selecting the ‘Use Original Size’ option.
How to Import a Vector Graph
Importing a Vector Graph is different compared to importing a Bitmap. It is not possible to load an image directly from a specified location as shown in the illustration below.
However it is possible to use the draw toolbar as shown in the illustration below. The ‘Use Original Size’ option cannot be used with vector graphics as this is not needed for a Vector Graph.
Import from System Library
The installed NB-Designer contains a System Library with ready-to-use vector graphs and bitmaps that can be imported by clicking on the ‘Import Graphics’ button as shown in the illustration below.
Export to System Library
Graphics used in your current project can be saved to the System Library. By saving them to the System Library they can be used in multiple projects. The illustration below shows how to save the selected graphic to the System Library.
NB-Designer creates a folder named UserSelPath that contains the saved graphics as shown in the illustration below.
