Create HtmlDialog with clickable thumbnails

I am creating and saving a collection of components together with their thumbnails using the Sketchup::ComponentDefinition methods #save_as and #save_thumbnail.

I know I can import them back using Importer::load_file, but I would like to create a HtmlDialog showing the thumbnails in that specific folder, so that when I click a thumbnail icon, that component is imported in SketchUp.

Having a look to the Sketchup::HtmlDialog class it seems that everything relies on loading a html dialog box from Ruby. Is there any straightforward way to achieve this without a complex html/css/js structure? I don’t have too much expertise on that, so I just ask in case there is some tip that could save me a bit of my time, even thought I know I’ll have to catch up with that sooner or later. Thanks.

have a look at this old one of mine, it uses webDialog but could be updated…

I recall it works cross platform, but a quick test would confirm…

copy/paste into Ruby Console or save as a .rb and use load "your/path/to/dlg_browser.rb"

it lets you choose any folder, makes a thumbnail set, shows them in a browser…

when you click they attach to the mouse for inserting…

I have a htmlDialog version somewhere, but will need to find it tonight…

# my namespace
module JcB
  OSX = Sketchup.platform == :platform_osx unless defined? JcB::OSX
  NODLG ='noDlg', false, '', 0, 0, 0, 0, false) unless defined? JcB::NODLG
  # a html browser for components...
  module ComponentBrowser
    extend self

    def de_focus

    def make_browser
      head = <<-HEAD
        <title>Drop Comps</title>
         body {
           text-align: left;
         img {
          border: 0;
         .container div {
           position: relative;
           background-color: rgba(245, 245, 245, 0.58);
           width: 63mm;
           height: 6.4mm;
           bottom: 10mm;
           padding: 1mm;
        <body onscroll="dlgBlur()">

      model = Sketchup.active_model
      defs = model.definitions

      i = 0
      body = ''

      dir = File.dirname(UI.openpanel('Get Comps', '.skp'))
      skps = Dir.entries(dir).reject { |s| s unless s =~ /\.skp/ }

      return if skps.count == 0

      img_dir = File.join(dir, 'dlg_thumbnails')
      Dir.mkdir(img_dir) unless Dir.exist?(img_dir)

      skps.each do |name|
        i += 1
        basename = name.sub('.skp', '')
        img_name = basename + '.png'
        skp = File.join(dir, name)
        img = File.join(img_dir, img_name)
        Sketchup.save_thumbnail(skp, img) # unless File.exist?(img)
        col = 'inherit'
        in_mod = 'highlight'
        col = in_mod if defs[basename].respond_to?(:path)
        body << %(
        <div class="container">
        <button  id='action#{i}' style="background-color: #{col};" onmouseover="click()"
        onmouseout="'action#{i}'" value="#{basename}">
        <img src="#{img}" alt="#{name}"><div>#{basename}</div></button></div>

      tail = <<-TAIL
        function dlgBlur() { window.location='skp:dlg_blur'; }
        function importSkp() { window.location='skp:import_skp'; }


      html = head + body + tail
      sel = model.selection
      ents = model.entities
      scale = NODLG.screen_scale_factor.to_i
      vpw = model.active_view.vpwidth
      vph = model.active_view.vpheight
      dlgw = vpw / scale
      dlgh = (vph - 22) / scale
      min = 268
      dlg =, true, '', min, dlgh, 40, 112, true)
#       dlg.min_width  = min
#       dlg.max_width  = dlgw
#       dlg.min_height = min
#       dlg.max_height = dlgh
      dlg.add_action_callback('dlg_blur') do |_d|
        de_focus # if OSX   # to prevent default focus taking/holding on mac...,
        sel.clear unless sel.empty?

      dlg.add_action_callback('import_skp') do |d|
        tl = d.get_element_value('action')
        skp = File.join(dir, tl + '.skp')
        de_focus # if OSX   # to prevent default focus taking/holding on mac...,
        #  if defs[tl].respond_to?(:path)
        #   comp = ents.add_instance(defs[tl], ORIGIN)
        #   sel.add(comp)
        #   Sketchup.send_action('selectMoveTool:')
        #   else
        #   model.import(skp)
        #   end

      if OSX
      end # if
      de_focus # to prevent default focus taking/holding on mac.
# to run use


1 Like

HTML dialogs are the only way SketchUp can provide the widest flexibility and possibilities for extension GUIs. Especially if you want a dynamic GUI (dynamically populated with content), it requires some effort. Besides a simple HTML/CSS scaffold, you would have to pass the component info (name, thumbnail path, skp path) to JavaScript and have it build a list with labeled and clickable image objects.

If you want a pure Ruby solution, you could try to use the SKUI framework (it supports images, but I’m not sure if you can easily create such a dynamic UI).

1 Like

On windows, the old MSIE based webdialogs could natively display a directory contents (sortable list with standard set of file property columns,) and allow (natively) drag and drop of skp files into SketchUp.

But I never did find a way to have then natively display as thumbnails within a WebDialog browser frame. However we can just use a File Browser that is set to thumbnails.
ie, this open a file browser from which I can drag and drop SKP models into SketchUp:

UI.openURL('C:\Users\Dan\Documents\SketchUp\SketchUp 2016\Models')
1 Like

Thank you guys for your help. I’ll test your solutions and let’s see which one fits better for my scenario.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.