Rotate Image Component

Queries and Resources
1

I would like the user to be able to rotate an image by clicking on a button. How can I achieve that?

Thanks

2

Hey @halahmadi and welcome to the forum! There’s no way to do this natively in Retool, unfortunately, but you can use Custom CSS and apply a transform. What’s your use case exactly? What you could do is have a few different image components each transformed to rotate at different angles, and clicking a button shows the one with your desired rotation, and hides all the others.

3

Hi @justin, thank you for your response. In my dashboard, I show an image from a url which has some text that the user needs to validate. The images sometimes are rotated side way, and we need to be able to rotate it back to be able to read.

In the image component, there is no option to enter custom css. It only has the image url. What’s the best way to address this?

1 Like
4

@halahmadi check out the post I linked to. In Retool, you don’t write custom CSS on a component basis, it’s global.

5

OK thank you Justin. I solved this issue by creating a custom component.

1 Like
6

Here is another simple solution with a JavaScript query & a style text component that Justin mentions above:

a4cf233ac6f207671ab590e486f730f1

This just uses a JavaScript query to set a text value: text1.setValue(" ._retool-image1{ transform: rotate(90deg);}")

And then another query to set it back: text1.setValue(" ")

3 Likes
7

This is dope @JoeyKarczewski!

1 Like
8

I didn't understand the approach and convention used in this.

9

Hi @ishi8! Are you looking to implement Joey's rotate solution? What do you have set up so far?

10

I have currently a button and an image. Now how can I use the above query? Please wrote to me

11

My solution was to create a custom component in HTML and Javascript. When clicking on the image, it rotates. Here is my code:

Model

{
  "url": {IMG_URL}
}

IFrame Code

<html>
<body>
  <div id="myDiv"></div>
</body>

<script>
	window.Retool.subscribe(function(model) { 
		const imageTag = "<img src='" + model.url + "' id='myimage' onclick='rotateImage();' alt='No content' style='height: 100%; width: 100%; object-fit: contain'/>"
		document.getElementById("myDiv").innerHTML = imageTag;
	})
      
    var rotate_factor = 0;
	function rotateImage() {
		rotate_factor += 1;
		var rotate_angle = (90 * rotate_factor) % 360;
		var img = document.getElementById('myimage');
		img.style.transform = 'rotate(' + rotate_angle.toString() +'deg)';
    }
</script>
</html>