# What is the best way to rotate material's images from Ruby?

**URL:** <https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008>\
**Category:** Ruby API\
**Tags:** texture, image, cutlist, material\
**Created:** [June 11, 2019, 1:11pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008 "2019-06-11T13:11:32Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 1:11pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/1 "2019-06-11T13:11:33Z")

</div>

Hi all !

I’m using Sketchup for woodworking and improve my workflow by developing the [OpenCutList](https://extensions.sketchup.com/fr/content/lair-du-bois-sketchup-toolbox-0) extension. An extension to generate a quite well formated part list from the model.

Recently I release a new build of OpenCutList, that integrate a feature to rotate material’s images directly from the extension itself. I need this feature to avoid to do this from an externel image editor and to permit OpenCutList users to import any wood texture and rotate it after according to the wood grain. (The best orientation is to put the grain horizontaly in picture)

 ![36](https://global.discourse-cdn.com/sketchup/original/3X/f/d/fd8d52aa9b42d28abb796ffe26b7edb5db35c0b2.jpeg)

To do this I inspire myself from the [Material Resizer](https://extensions.sketchup.com/en/content/material-resizer) extension that embed **ImageMagick** to manipulate material’s images.

Even if this grows up the size of the extension (env 8Mb), it works like a charm.

**But on Windows platform, it flashes a cmd window on each ImageMagick call. Do you know a best way to do this ?**

Thanks for your answer and happy coding.

---

<div class="post-metadata">

**Author:** ![john\_drivenupthewall](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@john\_drivenupthewall](https://forums.sketchup.com/u/john_drivenupthewall)\
**Post date:** [June 11, 2019, 5:09pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/2 "2019-06-11T17:09:01Z")

</div>

you don’t need ImageMagic to simply rotate an image…

you can use js/css in the html dialog to rotate and then use ruby to take a snapshot of the dialog window…

john

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 5:21pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/3 "2019-06-11T17:21:54Z")

</div>

Interesting strategy and thanks for your answer, John.  
But what do you mean by “take a snapshot” ?

---

<div class="post-metadata">

**Author:** ![john\_drivenupthewall](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@john\_drivenupthewall](https://forums.sketchup.com/u/john_drivenupthewall)\
**Post date:** [June 11, 2019, 5:34pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/4 "2019-06-11T17:34:46Z")

</div>

with a webDialog we had/have…

` **write_image** (image_path, option, top_left_x, top_left_y, bottom_right_x, bottom_right_y) ⇒ Object`

it seems to be missing from htmlDialog, but you could use js to save it locally…

I’ll have a dig and see if I updated any of mine that use/d `write_image`…

john

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 5:50pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/5 "2019-06-11T17:50:44Z")

</div>

Ok, interesting, I discover this feature on WebDialog.  
But in this case it will be difficult to keep texture image at its original size if it is bigger than dialog, no ?

---

<div class="post-metadata">

**Author:** ![john\_drivenupthewall](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@john\_drivenupthewall](https://forums.sketchup.com/u/john_drivenupthewall)\
**Post date:** [June 11, 2019, 5:58pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/6 "2019-06-11T17:58:44Z")

</div>

I built a image compositor using a Webdialog and just before capture I bumped it’s size up to image size, did the capture then closed it…

it seemed to work fine even if larger than my screen…

john

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 6:02pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/7 "2019-06-11T18:02:28Z")

</div>

It mays flash to the eyes of the user 🙂, no ?

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 6:05pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/8 "2019-06-11T18:05:07Z")

</div>

Else, the main problem of using JS or WebDialog, is that currently the extension is working on SU 14 with IE 9 as minimal requirement. And I think that this technic can’t be done in this configuration, no ?

---

<div class="post-metadata">

**Author:** ![john\_drivenupthewall](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@john\_drivenupthewall](https://forums.sketchup.com/u/john_drivenupthewall)\
**Post date:** [June 11, 2019, 6:07pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/9 "2019-06-11T18:07:54Z")

</div>

all my stuff is written on a mac and ‘some’ run on windows, from memory IE 9 should cope with html 5…

john

---

<div class="post-metadata">

**Author:** ![DanRathbun](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/danrathbun/32/500_2.png) [@DanRathbun](https://forums.sketchup.com/u/DanRathbun)\
**Post date:** [June 11, 2019, 9:10pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/10 "2019-06-11T21:10:37Z")

</div>

For version 2018 and higher, I’d say the best solution would be to use an [`Sketchup::ImageRep`](http://ruby.sketchup.com/Sketchup/ImageRep.html) instance.

You’d transpose the pixel data depending upon the angle of rotation and then set the transposed data back to the `ImageRep` and then set the material’s texture to the altered `ImageRep`.

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 9:24pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/11 "2019-06-11T21:24:08Z")

</div>

Thank you Dan !  
I saw the ImageRep feature, but in my case it needs to work for SU 2014 and higher ☹

---

<div class="post-metadata">

**Author:** ![DanRathbun](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/danrathbun/32/500_2.png) [@DanRathbun](https://forums.sketchup.com/u/DanRathbun)\
**Post date:** [June 11, 2019, 9:36pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/12 "2019-06-11T21:36:06Z")

</div>

Have you seen this post ?

> [@Rotate texture, not on a face](https://forums.sketchup.com/t/rotate-texture-not-on-a-face/14326/2):
>
> The rotation of a texture is not a property of the material. It is either defined by the UV coordinates on a face, or by the pixel data in the image. Unfortunately the SketchUp API has no way to edit pixel data (do image manipulation). You would have to write the texture to an image file, run an external (platform-dependend) program and re-import the image. That is slow, requires disk-IO… If it works for your use case to modify the UV coordinates (= makes changes to the component!, if the user…

* * *

Aerilius also wrote a ImageMagik extension for SketchUp.

> **[GitHub - Aerilius/sketchup-imagemagick: A library to simplify editing of...](https://github.com/Aerilius/sketchup-imagemagick)**
>
> A library to simplify editing of textures using external programs (like ImageMagick). It abstracts exporting and asynchronous re-importing of image files. - GitHub - Aerilius/sketchup-imagemagick: ...

… also see his TextureResizer plugin …

[https://extensions.sketchup.com/sv/content/texture-resizer](https://extensions.sketchup.com/sv/content/texture-resizer)

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 11, 2019, 10:04pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/13 "2019-06-11T22:04:53Z")

</div>

Realy interesting. Thank you Dan ! But in my tries, VB script ([As Aerilius did](https://github.com/Aerilius/sketchup-imagemagick/blob/0151e090f78029540a4c18183b7a63f5749d507c/src/ImageMagick.rb#L637)) ask for authorization to execute on my Win 7 test computer.  
I will investigate …

---

<div class="post-metadata">

**Author:** ![DanRathbun](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/danrathbun/32/500_2.png) [@DanRathbun](https://forums.sketchup.com/u/DanRathbun)\
**Post date:** [June 11, 2019, 10:25pm UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/14 "2019-06-11T22:25:40Z")

</div>

You might use **runas** to run the script under the “admin” account (or an account with elevated privileges) …

> **[Runas](https://learn.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2012-r2-and-2012/cc771525(v%3Dws.11))**

```nohighlight
runas /noprofile /user:admin "cscript.exe C:\Scripts\Test.vbs"

```

---

<div class="post-metadata">

**Author:** ![tt\_su](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/tt_su/32/17_2.png) [@tt\_su](https://forums.sketchup.com/u/tt_su)\
**Post date:** [June 12, 2019, 7:56am UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/15 "2019-06-12T07:56:42Z")

</div>

Does the texture data itself have to be rotated? Can’t be done by rotating the UVs when mapping the material?

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 12, 2019, 8:19am UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/16 "2019-06-12T08:19:11Z")

</div>

Hi Tomas !

> Does the texture data itself have to be rotated?

In my use case, yes. Because the default strategy of the plugin is to search the length of each part along the red axis, the width along the green axis and the thickness along the blue axis.  
In the real world, length direction (even if it’s smaller than width) equals wood grain direction.

Then it would be preferable that the material represents this “strategy”. And if the wood grain representation in the texture image is horizontal, it is correctly displayed along the red axis.

And as the material could be applyed on instance, as on faces it would be easier to have directly the correct orientation. In the goal to reduce the user operations count to have the best result.

---

<div class="post-metadata">

**Author:** ![tt\_su](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/tt_su/32/17_2.png) [@tt\_su](https://forums.sketchup.com/u/tt_su)\
**Post date:** [June 12, 2019, 10:29am UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/17 "2019-06-12T10:29:49Z")

</div>

I see. That makes sense.

By the way, I see that you can use ImageMagic as a library in many languages:

> **[ImageMagick](https://imagemagick.org/script/develop.php)**
>
> Create, Edit, Compose, or Convert Digital Images

You could use a C dll library ([ImageMagick – MagickWand, C API](https://imagemagick.org/script/magick-wand.php)) and then use `Fiddle` to interface from Ruby. That will avoid the command line dialog and WScript.  
[Module: Fiddle (Ruby 2.5.3)](https://ruby-doc.org/stdlib-2.5.3/libdoc/fiddle/rdoc/Fiddle.html)

You could also look at other C image libraries - like this small header only lib:

> **[GitHub - nothings/stb: stb single-file public domain libraries for C/C++](https://github.com/nothings/stb)**
>
> stb single-file public domain libraries for C/C++. Contribute to nothings/stb development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![john\_drivenupthewall](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@john\_drivenupthewall](https://forums.sketchup.com/u/john_drivenupthewall)\
**Post date:** [June 12, 2019, 11:31am UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/18 "2019-06-12T11:31:54Z")

</div>

this is meant to work in IE9…

you will need your own image file and a webdialog to test `write_image`…

john

```nohighlight
<!DOCTYPE html>
<html>
<body>
<button id="button" value="click here!">Click Here!</button>
<div id="parentdiv">
<img id="image"
src="file:///Users/johns_iMac/Documents/forum/4-3_9mm.png" />
</div>
<style>
#parentdiv {width:820px;height:100px;}
#parentdiv.rotate90,#container.rotate270 {width:100px;height:820px}
#image {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
}
#parentdiv.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#parentdiv.rotate180 #image {
transform: rotate(180deg) translate(-100%,-100%);
-webkit-transform: rotate(180deg) translate(-100%,-100%);
-ms-transform: rotate(180deg) translateX(-100%,-100%);
 }
#parentdiv.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
</style>
<script>
var angle = 0, img = document.getElementById('parentdiv');
document.getElementById('button').onclick = function() {
angle = (angle+90)%360;
img.className = "rotate"+angle;
}
</script>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![boris.beaulant](https://sea2.discourse-cdn.com/sketchup/user_avatar/forums.sketchup.com/boris.beaulant/32/31562_2.png) [@boris.beaulant](https://forums.sketchup.com/u/boris.beaulant)\
**Post date:** [June 12, 2019, 11:52am UTC](https://forums.sketchup.com/t/what-is-the-best-way-to-rotate-materials-images-from-ruby/97008/19 "2019-06-12T11:52:55Z")

</div>

Thanks for this snippet @john_drivenupthewall ! I will take a look, but the bad thing is that HtmlDialog doesn’t have this feature. And OpenCutList uses HtmlDialog if the user run on SU 2017 and upper.

> <https://github.com/lairdubois/lairdubois-opencutlist-sketchup-extension/blob/1028bc4080165bd45647e9121ed26231bb9d64d0/src/ladb_opencutlist/ruby/plugin.rb#L288>

Nice tip @tt_su ! Thank you very much !