Images

Images are very important for making your app more interesting.

In NodeGui, QLabel is typically used for displaying text, but it can also display an image.

A very minimal example would look like this:

const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');
const win = new QMainWindow();
const label = new QLabel();
const absoulteImagePath = '/Users/atulr/Project/nodegui/nodegui/extras/assets/logox200.png';
const image = new QPixmap();
image.load(absoulteImagePath);
label.setPixmap(image);
win.setCentralWidget(label);
win.show();
global.win = win;

Here,

  • We first create a label using QLabel.
  • Then we create an instance of QPixmap. QPixmap is used to represent the image in memory. QPixmap is not a widget, so it can’t be shown on the screen as it is.
  • Hence, we use QLabel instance and set QPixmap to it.

The result would look like this:

image example

Loading an image using a url

Lets say we want to load an image from a URL on the internet. In this case we can't use the load() method of QPixmap since its only reserved for local file system images.

Instead, we’ll download the image using axios as a buffer and use the QPixmap's method loadFromData instead.

So let’s start with the axios installation:

npm i axios

Now let’s create a function that will take a URL as a parameter and will return a configured QMovie instance for the GIF:

const axios = require('axios');
async function getPixmap(url) {
const { data } = await axios.get(url, { responseType: 'arraybuffer' });
const pixmap = new QPixmap();
pixmap.loadFromData(data);
return pixmap;
}

The getPixmap function takes in a URL, tells axios to download the image as a buffer, and then uses that buffer to create a QPixmap instance.

Since getPixmap returns a promise, we need to make some changes to the code. After some minor refactoring, we end up with the following.

const { QMainWindow, QPixmap, QLabel } = require('@nodegui/nodegui');
const axios = require('axios');
async function getPixmap(url) {
const { data } = await axios.get(url, { responseType: 'arraybuffer' });
const pixmap = new QPixmap();
pixmap.loadFromData(data);
return pixmap;
}
async function main() {
const win = new QMainWindow();
const label = new QLabel();
const image = await getPixmap('https://upload.wikimedia.org/wikipedia/commons/9/96/Nature-morocco.jpg');
label.setPixmap(image);
win.setCentralWidget(label);
win.show();
global.win = win;
}
main().catch(console.error);

And the result would look like this:

image url example

Some tips

Showing large images

The above examples wont allow you to show a huge image without either cutting it off or making the widget huge.

In order to do that:

  • You can create the image instance using QPixmap
  • Set the image instance to a QLabel
  • And finally set the QLabel to a QScrollArea that allows you to scroll the image if the size of the image is too big.

Animated images

In order to use animated images

  • Instead of QPixmap use QMovie
  • And instead of a label's setPixmap method use setMovie

More details on it can be seen on this blog post : https://www.sitepoint.com/build-native-desktop-gif-searcher-app-using-nodegui/

Edit this page