Skip to main content
Solved

Setting the icon on my Panel with local resources

  • 27 June 2024
  • 8 replies
  • 65 views

I would like to use my logo to the panel that i’m building in an extension.

I have a file “mylogo.png” in the public directory of my extension project. I use this code to define the panel.

class MyPanel extends Panel {
  private viewport = new Viewport(this.client);
  constructor(client: EditorClient) {
      super(client, {
          title: 'My Panel',
          content: 'Hello this is my panel',
          iconUrl: 'mylogo.png',
          location: PanelLocation.RightDock,
      });
  }

The mylogo icon is not displayed and it is replace by an unknown image:

 What i’m doing wrong?

Comments

Connor B
Userlevel 1
Badge +1

Hi Michel,

 

Is the public folder placed at the root of your extension package? Could you provide an image of your directory structure?

Richard U
Userlevel 4
Badge +7

Hi @Michel L, thank you for your question. Since this pertains to our Developer Platform and Extension API, I’ve moved your post to our Lucid for Developers Community space.

To begin with troubleshooting, can you please confirm if the mylogo.png file is publicly accessible by navigating to http://<your-public-server-address>/public/mylogo.png directly in your browser?

Michel L
Userlevel 1
Badge +5

Thanks Connor and Richard.

Here is the snapshot of my directory structure.

Here is the try to navigate without success.

I’m working in local debbuging using :

npx lucid-package test-editor-extension visual-lucidchart-dump-extension.

 

Here is how the panel appears:

 

Thanks for your help.

 

 

 

 

 

 

Connor B
Userlevel 1
Badge +1

Could you instead try the url:

http://localhost:9900/resources/LucidSoftwareFavicon.png

and see if it comes up with the icon?

Michel L
Userlevel 1
Badge +5

Yes i works with that code

class DebugPanel extends Panel {
  private viewport = new Viewport(this.client);
  constructor(client: EditorClient) {
    super(client, {
      title: 'My Panel',
      //          content: 'Hello from a panel',
      iconUrl: 'http://localhost:9900/resources/LucidSoftwareFavicon.png',
      location: PanelLocation.RightDock,
      url: 'debug.html',
    });
  }

But when I will publish idoes the iconUrl must be modified?

Connor B
Userlevel 1
Badge +1

Hi Michel. Unfortunately, the iconUrl would have to be modified in order to see the image after publishing. After I looked into this more, it looks like we have a bug using relative urls and the iconUrl field, so I don’t think it is possible (right now) to use the public folder to host images for your panel. I would recommend instead uploading your images to google drive, and then reference the URL that is used from google to host the picture.

Michel L
Userlevel 1
Badge +5

Thanks.

Could we use lucidchart cdn (https://cdn-cashy-static-assets.lucidchart.com) to store our images?

Richard U
Userlevel 4
Badge +7

Hi @Michel L , jumping in here while Connor is out of office. Our CDN is not set up to support storing custom images for extensions. However, you can use other reliable hosting solutions such as Google Drive to host your images and then reference those URLs in your extension.

Reply


Lucid Software Inc. Supplemental Community Terms