OnScreen GUI Toolkit

Aerilius

In some situations the possibilities with SketchUp's built-in UI elements are easily exhausted, they are either too obtrusive (UI.inputbox), too hidden (VCB) or not flexible enough (Toolbar).
In my case I needed only a few tool options that were not worth to have a webdialog or that would be rather confusing on a toolbar (where users expect tools).
So I created these UI elements using the View.draw methods, nothing new, except that I made some sort of toolkit that can be implemented with only a few lines (example):

**```
class TestTool

include AE;;GUI;;OnScreen

def initialize

window.layout=({;margin=>5, ;orientation=>;horizontal, ;align=>;center, ;valign=>;top})

button = Button.new("Click Me"){
  UI.messagebox("Clicked!")
}

slider = Slider.new("Radius", [0,100]){|value|
  @@radius = value
}

window.add(button, slider)

end

[https://bitbucket.org/Aerilius/onscreen-gui/wiki/Home](https://bitbucket.org/Aerilius/onscreen-gui/wiki/Home)
More widgets can be added and the style can be changed with a CSS-like syntax.
![sketchup_css.png](/uploads/imported_attachments/S1gZ_sketchup_css.png)

Jim

Nice idea. It definitely fills a niche for some types of plugins.

driven

Excellent,

I'll give it a spin on my mac... if I can clone the source for AE::GUI::OnScreen ??

john

Dan Rathbun

interesting!

Aerilius

@driven said:

if I can clone the source for AE::GUI::OnScreen ??

An easy way (without need for git) is to download a zip archive (top right corner "get source").

Then in SketchUp:
load "ae_OnScreenGUI.rb" # (which loads the other files)
Sketchup.active_model.select_tool(AE::GUI::OnScreen::TestTool.new)

Anton_S

Just, Spectacular, just Spectacular!!!

thomthom

Very nice! I got framework of my own for this - but I've never got around to release it for public consumption.

One thing to note - if you want to draw lines of odd size then you need to offset the co-ordinates by 0.5. (This is only on nVidia cards I think - ATI adjust to pixel grid automatically last time I checked on my very old Radeon 9800)

I'm building a wrapper to let me draw shapes that adjust correctly to the pixel grid. It's combined with a cache system - where it takes all the drawing call that View does. This means that you send drawing instructions to the cache when something changes and in the draw event it simply draws all the instructions which has been pre-processed. This easily avoids unnecessary calculations in the draw event which often slows down the refresh rate.

I'm also working on a GL vector image system, which you might find interesting. I'll see if I can extract tit to standalone code. It's a system mean for replacement of my GL bitmap drawing (which can only handle a handful of small bitmaps before things get to slow.). The GL vector image framework let you define shapes etc in a simple text file which then loaded is converted into GL drawing instructions. Nice for scalable vector images.
Just wish I had time for a simple drawing editor - or a converter from something like SVG to GL.

It'd be cool to consolidate some of this into a large framework.

driven

@aerilius said:

An easy way (without need for git) is to download a zip archive (top right corner "get source").

I don't see any source option, but I can at TT's repositry
on yours, it says

Repositories
Aerilius has no public repositories.

any clues or could you PM the zip file

cheers

john

Chris Fullmer

Well done. I had a pretty awesome RGB color selector box 90% made. But I never quite figured out one of the conversions that I needed, so I never finished. Maybe I should finish it and pass it on to you. I'd love to see it released finally.

thomthom

The source for GL_Image is here at the repo:
https://bitbucket.org/thomthom/tt-library-2/src/7462992bf4f3/TT_Lib2/gl_image.rb
Docs:
http://www.thomthom.net/software/sketchup/tt_lib2/doc/TT/GL_Image.html

@chris fullmer said:

Well done. I had a pretty awesome RGB color selector box 90% made. But I never quite figured out one of the conversions that I needed, so I never finished. Maybe I should finish it and pass it on to you. I'd love to see it released finally.

I was thinking of that one the other day. I way playing with the idea of a viewport on-screen sketching plugin. For when you make videos or make presentations. Needs a colour picker.

GL_Image Test

Aerilius

@driven said:

I don't see any source option

I didn't notice that it was not public (because of the auto-login I didn't see how it looks from outside). I made it downloadable now.

@chris fullmer said:

But I never quite figured out one of the conversions that I needed, so I never finished.

There are some color conversion methods in my color library.

driven

@aerilius said:

load "ae_OnScreenGUI.rb" # (which loads the other files)
Sketchup.active_model.select_tool(AE::GUI::OnScreen::TestTool.new)

Had to comment out protected line 128 in Window.rb for everything to work, and to stop error messages re. view being a protected method.

else, works a treat until I draw something, and I can only get it back by using Sketchup.active_model.select_tool(AE::GUI::OnScreen::TestTool.new)

is that right?

john

thomthom

Can we get a public Issue Tracker?

thomthom

My draw cache class. You create an instance of it and call the drawing methods you'd usually call on View to this. And in the tool's draw event to make it render out the cached drawing instructions.

Example:

<span class="syntaxdefault"><br />class MyTool<br />  def initialize<br />    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> DrawCache</span><span class="syntaxkeyword">.new(</span><span class="syntaxdefault"> Sketchup</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">active_model</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">active_view </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">  end<br />  def onLButtonUp</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">flags</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> x</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> y</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> view</span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">line_stipple </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">'-'<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">draw</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> GL_QUADS</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">...</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">draw</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> GL_LINES</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">...</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">draw_points</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> GL_QUADS</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">...</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">  end<br />  def draw</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> view </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">drawing_cache</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">render<br />  end<br />end </span><span class="syntaxcomment"># class<br /></span><span class="syntaxdefault"> </span>

DrawCache Class

<span class="syntaxdefault"><br /></span><span class="syntaxcomment">#-------------------------------------------------------------------------------<br />#<br /># Thomas Thomassen<br /># thomas[at]thomthom[dot]net<br />#<br />#-------------------------------------------------------------------------------<br /><br /><br /></span><span class="syntaxdefault">module TT</span><span class="syntaxkeyword">;;</span><span class="syntaxdefault">Plugins</span><span class="syntaxkeyword">;;</span><span class="syntaxdefault">BezierSurfaceTools<br />  <br />  </span><span class="syntaxcomment"># Caches drawing instructions so complex calculations for generating the<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment"># GL data can be reused.<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment"># Redirect all Skethcup;;View commands to a DrawCache object and call<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment"># #render in a Tool's #draw event.<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">  </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">  class DrawCache<br />    </span><span class="syntaxcomment"># (?) Move to TT_Lib ?<br /></span><span class="syntaxdefault">    <br />    </span><span class="syntaxcomment"># @param [Sketchup;;View]<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">    def initialize</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> view </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">view </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> view<br />      </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">commands </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">[]<br /></span><span class="syntaxdefault">    end<br />    <br />    </span><span class="syntaxcomment"># Clears the cache. All drawing instructions are removed.<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @return [Nil]<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">    def clear<br />      </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">commands</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">clear<br />      nil<br />    end<br />    <br />    </span><span class="syntaxcomment"># Draws the cached drawing instructions.<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @return [Sketchup;;View]<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">    def render<br />      view </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">view<br />      for command in </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">commands<br />        view</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">send</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">*</span><span class="syntaxdefault">command </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">      end<br />      view<br />    end<br />    <br />    </span><span class="syntaxcomment"># Cache drawing commands and data. These methods received the finsihed<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># processed drawing data that will be executed when #render is called.<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">[<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw2d</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw_line</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw_lines</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw_points</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw_polyline</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">draw_text</span><span class="syntaxkeyword">,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">drawing_color</span><span class="syntaxkeyword">=,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">line_stipple</span><span class="syntaxkeyword">=,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">line_width</span><span class="syntaxkeyword">=,<br /></span><span class="syntaxdefault">      </span><span class="syntaxkeyword">;</span><span class="syntaxdefault">set_color_from_line<br />    </span><span class="syntaxkeyword">].</span><span class="syntaxdefault">each </span><span class="syntaxkeyword">{</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">|</span><span class="syntaxdefault">symbol</span><span class="syntaxkeyword">|<br /></span><span class="syntaxdefault">      define_method</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> symbol </span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">|*</span><span class="syntaxdefault">args</span><span class="syntaxkeyword">|<br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">commands </span><span class="syntaxkeyword"><<</span><span class="syntaxdefault"> args</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">unshift</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> this_method </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">commands</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">size<br />      </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault">    <br />    </span><span class="syntaxcomment"># Pass through methods to Sketchup;;View so that the drawing cache object<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># can easily replace Sketchup;;View objects in existing codes.<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">#<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">    def method_missing</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">*</span><span class="syntaxdefault">args </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">      view </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">@</span><span class="syntaxdefault">view<br />      method </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> args</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">first<br />      if view</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">respond_to</span><span class="syntaxkeyword">?(</span><span class="syntaxdefault"> method </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">        view</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">send</span><span class="syntaxkeyword">(*</span><span class="syntaxdefault">args</span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">      else<br />        raise NoMethodError</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">"undefined method `#{method}' for #{self.class.name}"<br /></span><span class="syntaxdefault">      end<br />    end<br />    <br />    </span><span class="syntaxcomment"># @return [String]<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment"># @since 1.0.0<br /></span><span class="syntaxdefault">    def inspect<br />      hex_id </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> TT</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">object_id_hex</span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> self </span><span class="syntaxkeyword">)<br /></span><span class="syntaxdefault">      </span><span class="syntaxstring">"#<#{self.class.name};#{hex_id} Commands;#{@commands.size}>"<br /></span><span class="syntaxdefault">    end<br />    <br />    private<br />    <br />    </span><span class="syntaxcomment"># http://www.ruby-forum.com/topic/75258#895569<br /></span><span class="syntaxdefault">    def this_method<br />      </span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> caller</span><span class="syntaxkeyword">[</span><span class="syntaxdefault">0</span><span class="syntaxkeyword">]</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">=~</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">/`</span><span class="syntaxdefault">([^']*)'/ and $1 ).intern<br />    end<br />    <br />  end # class DrawCache<br />  <br /><br />end # module<br /></span>

Jim

Here's how it looks on my cheap laptop. Do the sliders work? They did not work for me. It was a little slow with all 3 themes shown. When I commented out all but the native theme, it was better. I wouldnt expect the average plugin to use anywhere close to the number of widgets in the test tool, so performance wouldn't be an issue.

OnScreen Example

sdmitch

When I try to test OnScreen GUI no errors are indicated but the window never appears.

Jim

Sam, you need to make it the active tool..

Sketchup.active_model.select_tool(TestTool.new)

And you may need to zoom a little to get it to activate - the tool may need a view.invalidate/view.refresh in there somewhere.

sdmitch

DOH!!!

edit:

Ok now how to use it. I have played around a bit with the testGUI.rb trying to figure out how to get the value from the widget. The slider example seems to emply that variable value should be the current value of the slider but it contains something like "pos(84.0,19.0,-1.0)flags0".

Aerilius

That's a bug! (the raw data of the event and where the slider was clicked)

tomasz

Thank you for sharing this! I want to revamp SU2KT when time permits.
I will report if I find any bugs.