Displays a bitmap image on the display.

The ImageView can render a bitmap image on the display. It needs a image data source, that delivers the actual bitmap. (See BMPImage)

You provide the image data and a bounding rect where the ImageView is painted.

If you wish to use the class BMPImage as a image source, you must initialize the SD Card Filesystem first!

## Example

// init the SD card before accessing the file system

// Open and prepare the BMP file to display
mono::media::BMPImage img("/sd/my_pic.bmp");

// create the view and provide the image source
mono::ui::ImageView imgView(&img);

// tell the image to be showed;

It is your responsibility to make sure the source image data object is staying around, and do not get deallocated. Preferreably you should make both the image source and the view class members.


The image view can crop the source image, thereby only showing a selected portion. The default crop is defined by the views bounding rect. Naturally images larger than the view’s rect will be cropped with repect to the upper left corner.

The default cropping Rect is therefore *(0, 0, imageWidth, imageHeight)*

Public Functions


Construct an empty image view, where no image is displayed To display an image you need to call setImage later.

ImageView::ImageView(media::Image *img)

Construct an UI image from an image file

At the moment only BMP images are supported! Remember to initialize the mbed class object before calling this consructor!

The image viewRect is set to the full screen size. Use setRect to adjust size and position.

  • img -

    The image data slurce to show

void ImageView::setImage(media::Image *img)

Set a new image source object Note: This method also resets the current cropping rectangle!

  • img -

    A pointer to the new image to display

void ImageView::setCrop(geo::Rect crp)

Set image cropping.

Define switch portion for the image should be display inside the view own bounding rectangle. By default as much as the original image as possible, will be showed.

By defining a cropping rectangle you can define an offset and size to display from thesource image.

The source image has the same coordinate system as the display. That is (0,0) is the upper left corner.

  • crp -

    A cropping rectangle

const mono::geo::Rect &ImageView::Crop()

Get the current cropping rectangle Get the current used cropping rectangle for the source image.

virtual void ImageView::repaint()

Repaint the view content, using the View::painter.

Re-paint the view content. This method should be called when the view content has changed. You can call this method directly, but it might cause graphics artifacts because the display is not double buffered. Instead you should schedule a repaint by calling the scheduleRepaint() method. This method will schedule the repaint, right after the next display update.

The display system will not schedule any repaints automatically. The view does not contain any state information, so you or other classes utilizing view must schedule repaints.

In subclasses of View, this method must be overwritten.

Protected Attributes

media::Image *mono::ui::ImageView::image

A pointer to the Image object that is to be displayed in the screen.

geo::Rect mono::ui::ImageView::crop

Image crop rectangle. Setting this rect will crop the source image (non destructive).