How to add a preview to a custom widget which is hooked on the cockpit?

What product/components do you use and which version/fix level?

Cumulocity IoT

Are you using a free trial or a product with a customer license?

product with a customer license

What are trying to achieve? Please describe in detail.

We want to add a custom widegt for remote controlling the robot arm in our lab. Now we have successfully wrote component.ts, html and css file to realise the function of the widegt. This widegt is also added to the widegt list through HOOK concept. But different from other official widgets, our widget has no preview image. These files are put in to folder where app.moudle.ts is.
We tried to create a new folder in the location node_modules@c8y\ng1-modules. There we imitate other widget folders and modified like cumulocity.json and index.js file and put the html and css file in the right location. WIth these operations we can also add a custom widget with the preview image on our local server. But this widget did not follow the css file to display in the defined style. And we also have problem to add the component.ts to the folder, which means our widegt can not control our robot.
So my final question is, how to add preview to our custom widget through the tutorial way which means these files locate at the same position with the app.module.ts but not newly create a folder at node_modules@c8y\ng1-modules.

Do you get any error messages? Please provide a full error message screenshot and log file.

image

first image: tutorial way without preview
second image: newly create a folder at node_modules@c8y\ng1-modules with preview

Have you installed latest fixes for the products

Hi Yumao,

one option to add a preview image for your widget is to transform the desired image to a base64 string and store it as a constant. This constant is referenced in the configuration of the widget to define the preview image.

You can find an example in this github project for the Cumulocity Indoor Data Point Map Widget. The file preview-image.ts contains the preview image as a base64 constant. In the data-point-indoor-map.module.ts the image constant is referenced to provide the preview image:

import { previewImage } from './assets/preview-image';
...
providers: [
    {
      provide: HOOK_COMPONENTS,
      multi: true,
      useValue: [
        {
          id: 'indoor-data-point-map-widget',
          label: 'Indoor Data Point Map Widget',
          description: 'Display markers on a indoor map and their data points',
          component: DataPointIndoorMapComponent,
          configComponent: DataPointIndoorMapConfigComponent,
          previewImage: previewImage, // set the preview image
          data: {
            settings: {
              noNewWidgets: false, // Set this to true, to don't allow adding new widgets.
              ng1: {
                options: {
                  noDeviceTarget: true, // Set this to true to hide the device selector.
                  groupsSelectable: false // Set this, if not only devices should be selectable.
                }
              }
            }
          } as ContextWidgetConfig
        }
      ] as DynamicComponentDefinition[]
    }
  ]
...

Using this approach you don’t need to care about copying assets during the build process of the widget.

Best regards
Christian

2 Likes

Thank you so much Christian! I will try it right now. This problem really sticks us for a long time! Very appreciate for the great help!

Best Regards
Yumao