How to show Material Texture in HTML?

Hi,

          mat = Sketchup.active_model.materials
          mat1 = mat["[Wax 01]"]
          texture = mat1.texture
          temp_path = File.join(Sketchup.temp_dir, "Wax_01_export.jpg")
          texture.write(temp_path)
          encoded_image = Base64.encode64(File.open(temp_path, 'rb').read)
          image_data = "data:image/jpeg;base64,#{encoded_image}"

in HTML we can use image_data and show the picture same as following code.

<img src='#{image_data}' alt='Material Texture' />

How can I show another material picture that selected from a list in HTML?

Why would you need to Base64 encode the image data this way?
Why can you not just use:

<img src='#{temp_path}'>

?

It is not clear what you wish to do.

Where is the “list” ?
Is the selection made in the HTML dialog or in SketchUp Ruby ?

List is material list and it is in mat.
If users in HTML select another material and I want use this method to show them, I should create all materials pictures in ruby and it takes time and memory.

Hello,
You and I have the same concern with show list of materials in HTML Dialog with speed.

I have already released a new version of my free extension name 5D+ Library. You can download and see my code in HTML and JS (I didn’t encrypt them except Ruby codes).

In Ruby, I only write a material to an image has size 256x256, then push the image link and material HSL delta values to the HTML Dialog. Then I draw canvas and hande changing colors with JS to adapt the speed.
The results is my material edior react quicker than the Material Editor of SketchUp native, even user change the color on the native.

Here is the topic link:

2 Likes