Hi Team,

Can we dynamically change the color of images. Supposing the  image is rendered in UI and user is provided with options listed for a specific items. For example, a Car's door color palette , once a color selection is made the new selected color is applied on that area of image. We have looked at Moodboard and other plugins in Outsystems. can someone guide if this can be achieved with a plugin or we need to customise on the UI level


Regards,

Ravi


Hi Ravi,

What colour do you want to change of an image? An image itself, that is, the pixel data, can't change colour. That has nothing to do with OutSystems, and everything with the way images are displayed by the browser. If you want to change, say, the border around an image, that's a matter of applying the right CSS.

For your second question about plugins please start a new post, as it seems to have little to do with the first question.

Hi Kilian

Both Image and Color of item should get changed when user will select  it from Image palette or color palette of a given Item.

Regards,

Ravi

Hello Ravi,

What you want to do can only be accomplished if you are using vectorial images (SVG), you can change their colors and even format in runtime using javascript, take this for example:


First you have to display your vectorial image with an expression:


<svg height="100" width="100">  <circle class="ColorChange" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="#000" />  Sorry, your browser does not support inline SVG.  </svg> 


Then you can change its color with javascript:


document.getElementsByClassName("ColorChange")[0].style.fill="#fff";


This requires time and programmer skills, but you can manipulate any vectorial image as you like.

Best of luck!


Kind Regards

Hi Ravi,

Apart from João's solution, you'll need to use different images, and swap one image for another.

João Domingos wrote: 

Hi Joao,

If any related oml is available to achieve this. please share.






Hello Ravi,

What you want to do can only be accomplished if you are using vectorial images (SVG), you can change their colors and even format in runtime using javascript, take this for example:


First you have to display your vectorial image with an expression:


<svg height="100" width="100">  <circle class="ColorChange" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="#000" />  Sorry, your browser does not support inline SVG.  </svg> 


Then you can change its color with javascript:


document.getElementsByClassName("ColorChange")[0].style.fill="#fff";


This requires time and programmer skills, but you can manipulate any vectorial image as you like.

Best of luck!


Kind Regards



Hello again,


I made an example for you, it's really simple but i hope you get the point.

Good luck


João Domingos wrote: Thanks for your Valuable feedback.


Using SVG we are facing lot of issue. So planning to use different images, and swap one image for another on place. if you have any OML on this. please share, it will be more helpful for us.

Regards,

Ravi

Hello again,


I made an example for you, it's really simple but i hope you get the point.

Good luck




Kilian Hekhuis wrote: Hi Kilian,

Using this approach if you have any OML then please share.

Regards,

Ravi


Hi Ravi,

Apart from João's solution, you'll need to use different images, and swap one image for another.



Hi Ravi,

If you have the images stored in the database, use this approach. By using a Variable as the Entity Identifier Property you can use Ajax Refresh to update the image after changing the Variable's value. If you have images accessible via an External source, use a Variable to store the URL. Again, after changing the URL to access a different images, use an Ajax Refresh to refresh the image.

Note that the above should be enough for someone having some experience with the OutSystems Platform to get this working. If you have specific questions please ask them, but don't ask us to provide you with a full solution. We're here to help, not do your job.