Tutorial: Add images

In this tutorial, you are adding images to a device type and to assets. Later, you use the images in image cards.

About this task

Add images to the device type for use in image cards in later tutorials. Use an API call to add images.

A third-party application such as Postman can be used to make the REST API call. Postman is available to download here.

To add an image to a device type, define the URL as follows:

https://{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entitiTypeName}}

For example:

https://api-beta.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/AnalyticsServiceStage/entityType/Robot_tutorial_type

To add an image to a device, define the URL as follows:

https://{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entitiTypeName}}/entityid/{{entityid}}

For example:

https://api-beta.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/AnalyticsServiceStage/entityType/Robot_tutorial_type/entityid/73000

The following parameters are used in the POST requests:

• {tenantID} - Your Analytics Service TenantId. The id is displayed by your user icon in the Analytics Service dashboard.
• {entity_type} - The name of the device type that you created.
• {API_key}/{token} - The API credentials.

Before you begin

Complete a tutorial that adds data into the data lake.

Gather API information

Gather the following information to use in your requests:

• Your API key and authentication token. Generate an API key and authentication token.
  1. From the user interface, go to the Services tab.
  2. Select Watson IoT Platform Service.
  3. Click View Details.
  4. Click View more.
  5. Save the API key and token for use. If you are not in a SaaS environment, for instructions on accessing the API key and token, see the Connection parameters topic.
• Your tenant ID: The tenant ID where you created the device type.

• The URL to use in the request: The protocol and environment where the API is placed. The URL is:

    https://api-{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entityTypeName}}
  

• The country code for your geo: Use us, or uk, or de. If you are in the beta environment, use beta as the country code.
• Your device type name.

Define the header

Define the following key value pairs for the header:

Steps

Step 1: Save the images locally

Add an image to the device type for use in image cards. The painting robot at device 73000 is slightly different from all of the other assets. You want to add a unique robot image for 73000 and associate it with the device or device.

1. Save images of the robots and a map. Save the images in figures 1 - 3 to your local system and note the local absolute path to the files.
   
   Figure 1. Robot
   
   Figure 2. Robot for 73000
   Figure 3. Map

Step 2: Add image to the device typ

Create a new request. Use Postman to add the images. If you are using a tool other than Postman, use the parameter values in these steps to complete the task.

1. Open Postman.
2. Click New > Request.
3. Assign a name to the request.
4. Select POST from the request drop-down.
5. Enter the API endpoint URL.
   Example:

  https://api-{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entityTypeName}}.

Where {api-prefix} depends on your location:. API prefixes are api-us,api-uk, and api-eu

1. Select the Header tab. Define the following key value pairs for the header:

   
   
   
   

   Key	Value
   x-api-key	{API_key}
   x-api-token	{token}

2. Specify the device type name in the URL.

3. Enter the form data for the map image. You are uploading an image of a robot to your device type. In an image card, you reference the image using the ID map.
   
   
   

   Key	Value
   imagefilecontent	Set the file type to File. Click the File field, and select File from the drop-down. Then, browse for your robot.png file.
   imageid	map
   tags	world_map,map

4. Click Send.

In the file field, make sure to set the file type to File.

Step 3: Add images to the assets

Create a new request. Use Postman to add the images. If you are using a tool other than Postman, use the parameter values in these steps to complete the task.

1. Open Postman.
2. Click New > Request.
3. Assign a name to the request.
4. Select POST from the request drop-down.
5. Enter the API endpoint URL. Example:

  https://api-{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entityTypeName}}/entityid/{{entityID}}.

Where {api-prefix} depends on your location:. API prefixes are api-us,api-uk, and api-eu

1. Select the Header tab. Define the following key value pairs for the header:
   
   
   

   Key	Value
   x-api-key	{API_key}
   x-api-token	{token}

2. Specify the device type and device name in the URL. Start with device 73000.
3. Select the Body tab and then the form-data data type.
4. Enter the form data for the robot_73000 image. You are uploading an image of a robot to your 73000 device. In an image card, you reference the image using the ID robot.
   
   
   

   Key	Value
   imagefilecontent	Set the file type to File. Click the File field, and select File from the drop-down. Then, browse for your robot_73000.png file.
   imageid	robot
   tags	robot

5. Click Send.
6. Repeat these steps for the other assets but select the image robot.png instead. Change the device name in the URL. You are uploading a different robot image. In an image card, you still reference the image using the ID robot.
   
   
   
   

   Key	Value
   file	Set type to File and then browse for your robot.png file.
   imagefilecontent	robot.png
   imageid	robot
   tags	robot

Step 4: Verify that the map image was added

Check that the map image was added to the data lake.

1. In Postman, click New > Request.
2. Assign a name to the request.
3. Select GET from the request drop-down.
4. Enter the URL in the URL field. Define the URL as follows:

   https://{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entitiTypeName}}/imageid/{{imageID}}
   

   Example:

   https://api-us.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/MyTenant/entityType/Tutorial_robot_type/imageid/map
   

5. Select the Header tab.
6. Add x-api-key as a parameter and specify your API key.
7. Add x-api-token as a parameter and specify your API token.
8. Click Send.

If the request is successful, a 200 OK message is returned and the image is displayed.

Step 5: Verify that the robot_73000 image was added

Check that the map image was added to the data lake.

1. In Postman, click New > Request.
2. Assign a name to the request.
3. Select GET from the request drop-down.
4. Enter the URL in the URL field. Define the URL as follows:

   https://{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entitiTypeName}}/entityid/{{entityID}}/imageid/{{imageID}}
   

   Example:

   https://api-us.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/MyTenant/entityType/Tutorial_robot_type/entityid/73000/imageid/robot_73000
   

5. Select the Header tab.
6. Add x-api-key as a parameter and specify your API key.
7. Add x-api-token as a parameter and specify your API token.
8. Click Send.

If the request is successful, a 200 OK message is returned and the image is displayed.

Step 6: Verify that the robot image was added

Check that the map image was added to the data lake.

1. In Postman, click New > Request.
2. Assign a name to the request.
3. Select GET from the request drop-down.
4. Enter the URL in the URL field. Define the URL as follows:

   https://{{geo_country_code}}.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/{{tenantID}}/entityType/{{entitiTypeName}}/entityid/{{entityID}}/imageid/{{imageID}}
   

   Example:

   https://api-us.connectedproducts.internetofthings.ibmcloud.com/api/images/v1/MyTenant/entityType/Tutorial_robot_type/entityid/73001/imageid/robot
   

5. Select the Header tab.
6. Add x-api-key as a parameter and specify your API key.
7. Add x-api-token as a parameter and specify your API token.
8. Click Send.

If the request is successful, a 200 OK message is returned and the image is displayed.

Next steps

Add a device dashboard