Create HtmlDialog with clickable thumbnails

import
thumbnails
components
webdialog
ui::htmldialog

#1

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.


#2

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 = UI::WebDialog.new('noDlg', false, '', 0, 0, 0, 0, false) unless defined? JcB::NODLG
  # a html browser for components...
  module ComponentBrowser
    extend self

    def de_focus
      NODLG.show
      NODLG.close
    end

    def make_browser
      head = <<-HEAD
        <html><head>
        <title>Drop Comps</title>
        <style>
         body {
           font:caption;
           margin:1mm;
           color:GrayText;
           background-color:Window;
         }
         button{
           text-align: left;
           width:68mm;
           height:36mm;
           cursor:pointer;
        }
         img {
          width:64mm;
          height:36mm;
          border: 0;
         }
         .container div {
           position: relative;
           background-color: rgba(245, 245, 245, 0.58);
           width: 63mm;
           height: 6.4mm;
           bottom: 10mm;
           padding: 1mm;
         }
        </style>
        </head>
        <body onscroll="dlgBlur()">
      HEAD

      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()"
        onclick="importSkp(); this.id='action'; this.style.background='#{in_mod}';"
        onmouseout="this.id='action#{i}'" value="#{basename}">
        <img src="#{img}" alt="#{name}"><div>#{basename}</div></button></div>
        )
      end

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

        </body></html>
      TAIL

      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 = UI::WebDialog.new(File.basename(dir), 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...,
        Sketchup.send_action('selectSelectionTool:')
        sel.clear unless sel.empty?
      end

      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
        model.import(skp)
      end

      dlg.set_html(html)
      if OSX
        dlg.show_modal
      else
        dlg.show
      end # if
      de_focus # to prevent default focus taking/holding on mac.
    end
  end
end
# to run use
JcB::ComponentBrowser.make_browser

john


#3

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).


#4

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')

#5

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


#6

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