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.
first image: tutorial way without preview
second image: newly create a folder at node_modules@c8y\ng1-modules with preview
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.
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.
