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

Code: Select all

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

end

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

[driven]

Excellent,

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

john

[Jim]

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

[Dan Rathbun]

interesting!

[Aerilius]

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]

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-libra ... l_image.rb
Docs:
http://www.thomthom.net/software/sketch ... Image.html

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.

[Aerilius]

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.

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]

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:

Code: Select all


class MyTool
  def initialize
    @drawing_cache = DrawCache.new( Sketchup.active_model.active_view )
  end
  def onLButtonUp(flags, x, y, view)
    @drawing_cache.line_stipple = '-'
    @drawing_cache.draw( GL_QUADS, ... )
    @drawing_cache.draw( GL_LINES, ... )
    @drawing_cache.draw_points( GL_QUADS, ... )
  end
  def draw( view )
    @drawing_cache.render
  end
end # class
 

DrawCache Class

Code: Select all

#-------------------------------------------------------------------------------
#
# Thomas Thomassen
# thomas[at]thomthom[dot]net
#
#-------------------------------------------------------------------------------


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

end # module


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

2012-09-08_103757.png

[sdmitch]

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

OnScreenGUI.png

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

[kirill2008]

I don't even know how to call this coincidence maybe a kind of synchronicity... I mean a few weeks ago the idea to make custom UI library based on view.draw method suddenly came to my mind. And I even started to code it Actually I needed a kind of adjustment curve editing control for one of my tools and since I didn't find any javascript ready made widget I decided to make my own control based on view.draw...
I think it would be interesting to take a look at the result in a video: http://youtu.be/QLfI1McLMa0?hd=1 (skip to 1:08 to view 'Control Curve' window).
In short, now I think there is no need to continue coding my own library since OnScreen GUI Toolkit is already exist . I'll try to adapt 'Control Curve' control in it and post result here if you don't mind.
Thanks for sharing your library

[Aerilius]

That looks cool!
This toolkit is in early development and it's possible that there will be soon bigger changes in the architecture of the underlying code.
Dialogs like yours don't exist yet at all, one would have to create a new Dialog class as subclass of Container and then create the dialog titlebar, close buttons etc. maybe border resizing...

[Chris Fullmer]

Ok, I uploaded my code for the RGB color picker. I'm sure there is lots of optimization that could be done. And its just wrapped in a class. As this development kit keeps improving and adding, maybe the RGB picker could get incorporated into it as well.

viewtopic.php?f=180&t=47808

Chris

[thomthom]

Cool! It'd be really nice to see a unified framework here. We're clearly re-inventing each others work.
I have code that reads BMP files and let you draw it - but it's terrible slow.

[dacastror]

with this would it be possible to create a dialog that allows the user to enter a number?

(google translator)

[Aerilius]

Possibly, but it would not be ideal.
I also haven't yet got time to finalize this, but I might be able to finish it in future.

[driven]

Has everyone else seen this one?
http://sketchucation.com/forums/viewtopic.php?f=323&t=41982&start=45#p406363
it is in the other thread but thought it was easier to ask about if it's here...

Video

is it the same concept?
john

[dacastror]

I would like to do this, to make a inputbox made with OpenGL, could you please show an example of how to do this?