Skip to main content

I’m trying to create an ellipse that can be filled with an image url from a data source.   I can’t seem to figure out how to do this for the life of me.  Any help would be appreciated.  Here’s what I’ve got so far:

Data Source Image (attempt):

{
"defs": >],
"properties": o
{
"name": "imageUrl",
"type": "string",
"default": "https://via.placeholder.com/100",
"label": "Image URL"
}
],
"images": {
"logo": {
"type": "url",
"source": "{{=@imageUrl}}"
}
},
"geometry": g
{
"type": "ellipse"
}
],
"style": {
"fill": {
"type": "image",
"ref": "logo",
"mode": "stretch"
},
}
}

Is {{=@imageUrl}} wrong?

 

Switching the type and source out for a local image works just fine:

{
"defs": ],
"properties": p
{
"name": "imageUrl",
"type": "string",
"default": "https://via.placeholder.com/100",
"label": "Image URL"
}
],
"images": {
"logo": {
"type": "file",
"source": "logo.png"
}
},
"geometry":
{
"type": "ellipse"
}
],
"style": {
"fill": {
"type": "image",
"ref": "logo",
"mode": "stretch"
},
}
}

Of course this does not give the desired outcome.

What’s the proper way to do this?

Hi ​@DavidPinkerton , thanks for contributing to the Lucid for Developers Community. We’re taking a closer look at your setup and will get back to you soon with some guidance.


Hey ​@DavidPinkerton , I’m a developer at Lucid, and although I don’t have much background with Custom Shapes, I have a recommendation from another dev that might help solve your problem. 

In your example, it looks like you are defining an image map (the `images` element in your JSON). I’ve been told that instead of doing that, you can simply use the property you define directly in the `style` section. Here’s an example based on yours:

{
"defs": /],
"properties": r
{
"name": "imageUrl",
"type": "string",
"default": "https://via.placeholder.com/100",
"label": "Image URL"
}
],
"geometry": "
{
"type": "ellipse"
}
],
"style": {
"fill": {
"type": "image",
"url": "{{=@imageUrl}}"
},
}
}

I hope this solves your problem, if not feel free to reach back out in this thread!


@alec.bingham You are a magician!  Thank you. I just overcomplicated it.

I don’t know why lucid chart doesn’t have any built in native shapes that can receive urls as images from data.  I’m going to use this custom shape constantly.

I’m new to development and rather a novice in Jason, so it’s a lot of trial and error.

Ultimately I’d like to make a shape with Properties that can be adjusted:

1) Shape Options
        -  I’d like the standard shape that can convert into any other shape, with dynamic properties, like for polygon, where when selected you get a property for points.

2) Image from data (as shown above)
        -  Constrain Proportions XY - so image does not get distorted when the shape is transformed
        -  Image Scale - where image default is fit, but can be scaled larger while never being smaller.
        -  Image XY Adjustment - options for adjusting the position of the image inside the shape, but again, where the boarders of the image can never come inside the shape.
        -  Turn off Image - an option to just turn off the image so the background color shows through
        -  Turn off default image - so if no value is present, then the default colors show through

3) Text
        -  Standard Text box with editable text - it seems that in custom shapes, you don’t automatically get the default text box.  Having the default shape text box with editable text that can also take variables like normal shapes would be great.

So basically I just want a normal Lucid Chart Shape, with image functionality, where I can display an image from a url from data.   I’m really not sure why this is not native to Lucid Chart.  I will be using me custom shape constantly. 

This will take me quite some time to sort out, but if this is easy for someone, by all means have a crack at it and share your results!


Reply