Images

When an Image is created, it needs a way of providing Homey with its data. This can be either:
an URL, available from anywhere on the internet
a binary stream through the getStream method
a local path to a static image which is shipped with the App.
Note: Images are limited to 5 MB.
You can debug your images in the Developer Tools.
Creating an image
Using an URL
URLs should be used when the image is available publicly on the internet.
/app.js
1
const Homey = require('homey');
2
​
3
class App extends Homey.App {
4
  async onInit() {
5
    const myImage = await this.homey.images.createImage();
6
    // the URL must start with https://
7
    myImage.setUrl("https://www.example.com/image.png");
8
  }
9
}
10
​
11
module.exports = App;
Copied!
Using a Stream
Streams should be used when downloading an image that cannot be supplied using Image#setUrl(). Using image streams involves writing data directly into a Node.js stream. Using streams requires homey version 2.2.0 or higher.
/app.js
1
const Homey = require('homey');
2
const fetch = require("node-fetch");
3
​
4
class App extends Homey.App {
5
  async onInit() {
6
    const myImage = await this.homey.images.createImage();
7
​
8
    myImage.setStream(async (stream) => {
9
      const res = await fetch("http://192.168.1.100/image.png");
10
      if (!res.ok) {
11
        throw new Error("Invalid Response");
12
      }
13
​
14
      return res.body.pipe(stream);
15
    });
16
  }
17
}
18
​
19
module.exports = App;
Copied!
Using a Path
Paths should be used when the image is locally available.
/app.js
1
const Homey = require('homey');
2
​
3
class App extends Homey.App {
4
  async onInit() {
5
    const myImage = await this.homey.images.createImage();
6
    myImage.setPath("/userdata/image.png");
7
  }
8
}
9
​
10
module.exports = App;
Copied!
Updating the image
Call Image#update() when the image has been updated, and the front-end will download the image again.
When your image uses a Stream, the method provided in Image#setStream() will be called again.
At any time, you can switch between delivery type by calling Image#setPath(), Image#setStream() or Image#setURL().
Retrieving an image
It is also possible to consume an image in your app, for instance through use of Flow Tokens.
1
const { PassThrough } = require("stream");
2
const fetch = require("node-fetch");
3
const FormData = require("form-data");
4
​
5
//uploads an image to imgur and returns a link
6
async function uploadImage(image) {
7
  const stream = await image.getStream();
8
​
9
  const form = new FormData();
10
​
11
  form.append("image", stream, {
12
    contentType: stream.contentType,
13
    filename: stream.filename,
14
    name: "image",
15
  });
16
​
17
  form.append(
18
    "description",
19
    `This image can also be (temporarily) viewed at: ${image.cloudUrl} and ${image.localUrl}`
20
  );
21
​
22
  const response = await fetch("https://api.imgur.com/3/image", {
23
    method: "POST",
24
    //pipe through a passthrough stream, workarround for a node-fetch bug involving form-data streams without content length set.
25
    body: form.pipe(new PassThrough()),
26
    headers: {
27
      ...form.getHeaders(),
28
      Authorization: "Client-ID <YOUR_CLIENT_ID>",
29
    },
30
  });
31
​
32
  if (!response.ok) {
33
    throw new Error(response.statusText);
34
  }
35
​
36
  const { data } = await response.json();
37
  return data.link;
38
}
Copied!

Advanced - Previous

Web API

Next - Advanced

LED Ring

Last modified 6mo ago

Copy link

Contents