And so we come to what can be described using the Douglas Adams-esque "a trilogy in four parts", or simply the fourth part of a Quadrilogy (although somehow the word is even worse than Alien Resurrection).

Some would even choose to use the term, however, especially if the first three parts have been released close together, "cynical cash grab". This isn't quite accurate here though as it's instead a case of "Oh, That's how that works".

The "That" in this case is being able to add images to the Echo Show. Having got it working, it seems only fair that the tutorial should be finished off with this.

Templating

Before we delve into the code, let's cover what you can do with the Echo Show (there's also the Echo Spot, which is a silly name as it's not shaped like cartoon dog).

Amazon doesn't give you completely free reign over what you can do, but it does give you a decent choice of various templates - and if you don't like any of them and don't have too much information to display you can always use a single image and fake any template you like by using Photoshop.

For a look at all of the various templating options, go to Amazon's developer documentation.

The one we're going to use is for a full-size, single image. My ideas tend not to be too text-heavy so work well with a single image. Amazon refers to this as "Template 7". The design for this shows a background image, a foreground image, and some text, but we're just going to use the background image for simplicity.

Adding images

So we know what template we're going to use, and we know what options it can take:

{
  "type": "BodyTemplate7",
  "token": "SampleTemplate_3476",
  "backButton": "VISIBLE",
  "title": "Sample BodyTemplate7",
  "backgroundImage": {
    "contentDescription": "Textured grey background",
    "sources": [
      {
        "url": "https://www.example.com/background-image1.png"
      }
    ]
  },
  "image": {
    "contentDescription": "Mount St. Helens landscape",
    "sources": [
      {
        "url": "https://example.com/resources/card-images/mount-saint-helen-small.png"
      }
    ]
  }
}

These can be translated into Node using the following commands:

const builder = new Alexa.templateBuilders.BodyTemplate7Builder();
const template = builder
    .setTitle('Sample BodyTemplate 7')
    .setImage(Alexa.utils.ImageUtils.makeImage('https://example.com/resources/card-images/mount-saint-helen-small.png')
    .setBackgroundImage(Alexa.utils.ImageUtils.makeImage('https://www.example.com/background-image1.png'))
    .setBackButtonBehavior('VISIBLE')
    .build();
this.response.renderTemplate(template);

Let's focus on adding an image then to our existing code then. If we look at Part 2 of this tutorial - to the ShapeIntent code, we can add the following lines:

'ShapeIntent': function () {
    ...

    this.response.speak('So your favourite is a ' + colour + " " + shape + ". Great. Thanks! Bye!");

    const builder = new Alexa.templateBuilders.BodyTemplate7Builder();
    const template = builder.setBackgroundImage(Alexa.utils.ImageUtils.makeImage('https://imgs.xkcd.com/comics/exploits_of_a_mom.png'))
        .setBackButtonBehavior('HIDDEN')
        .build();
    this.response.renderTemplate(template);

    this.handler.state = states.COLOUR_STATE;
    this.attributes = {};
    this.emit(':saveState', true);

    this.emit(':responseReady');
},

This takes a publicly-accessible image and sets it as the only thing to show when using running your code on an Echo Show.

Flagging

If you want to run the code now, you'll likely encounter the following error. This error, unfortunately, doesn't really mean that much:

Error: In state: . No handler function was defined for event SessionEndedRequest and no 'Unhandled' function was defined.
at AlexaRequestEmitter.EmitEvent (/var/task/node_modules/alexa-sdk/lib/alexa.js:212:15)

Annoyingly, this is the wrong error message for the error that's occurring. What the error message should actually be complaining about is that you haven't enabled the Display Interface in developer.amazon.com so your Alexa application doesn't have the ability to show images on the Echo Show.

To fix this, log into the developer console and go to your skills page. Once here, edit your skill (Alexa application) and find the Interfaces page from the menu.

There'll be a lot of various settings on here and I recommend you enable all of the stuff you want to use now, or be faced with weird and useless error messages like the one above.

Now when you run your code again, you should see your image and not an error, which is nice.