Custom Asset Type Icon

albrundy · March 23, 2021, 9:29am

Hi there,
I have successfully created a custom asset type with attributes. I also would like to have a custom icon for my asset type, therefore I added an svg icon to this path:
.\openremote\node_modules@mdi\svg\svg\octicon-container-24.svg

Then I ran

./gradlew clean installDist
docker-compose build manager

in order to build and compose the docker image.

However, the icon is not shown even though in the browser debug everything looks ok.

What could be the reason? Did I miss anything?

Thank you,
Alex

rich · March 25, 2021, 12:12pm

Hi Alex,

Well done for getting so far, documentation is still lacking so it shows some perseverance on your part.

Interesting hack you are trying, without investigating why your icon doesn’t make it into the final image I would guess that the yarn install command which is run as part of ./gradlew clean installDist causes your modifications to the @mdi package in node_modules to be lost.

You can always do what your doing (placing the svg into the @mdi package and then generate the mdi-icons.json file using:

cd ui/component/core
npm run generate

The mdi-icon.json file will be in the dist folder, you can then copy this into a running manager container or use a volume mapping, the path within the manager container is:

/opt/web/shared/mdi-icons.json

The more structural approach is to use a custom icon set as demoed/tested in code at:

github.com

openremote/openremote/blob/master/ui/demo/demo-core/src/index.ts#L88



connectedCallback() {
    super.connectedCallback();
    manager.addListener((e) => this._onOrEvent(e));
}

protected updated(_changedProperties: PropertyValues) {
    super.updated(_changedProperties);
}

public createIconSet() {
    let testIconSet = {
        size: 100,
        icons: {
            "x": "<path d=\"m0.3125,39.74088l37.33242,0l11.53601,-37.43277l11.53601,37.43277l37.33242,0l-30.20251,23.13446l11.5366,37.43277l-30.20252,-23.13509l-30.20252,23.13509l11.53661,-37.43277l-30.20252,-23.13446z\" stroke-width='5' stroke=\"#000\"/>"
        }
    }   ;
    IconSets.addIconSet("test", testIconSet);
}

public toggleLanguage() {

Inspired by what the old polymer iron icons used to do, you can essentially have sets of icons and mdi is set as the default in our UI components we also have an or icon set which just has OpenRemote logos in at the moment. To use an icon set you just prefix the icon name with the icon set name e.g.:

or:logo

Using this mechanism you could load your own iconset but you’d need to write some UI code to do this so your hack is the quickest approach.

Rich

ahmedgis · April 4, 2021, 3:09pm

Hi albrundy,

Thanks for your post,

Kindly i need to know how you did create a custom asset type with attributes? because i tried many times to create a custom asset type by adding a new class:

model/src/main/java/org/openremote/model/asset/impl/MyNewAsset.java

and build the project and the docker image with

./gradlew clean installDist
docker-compose build manager

but with no luck.

Thanks