Idea: In-console visualizations

[thomthom]

I was doing some improvements to my Transformation Inspector and I got an idea for Console Plus I wanted to run by you:

Allowing return value lines to have visualization widgets in-line in the console. This wouldn't be far off from the visualization already done for vectors etc in the viewport.

Some things like Transformations can't be visualized in the viewport, but it would be nice to bring up a better view of it in the console. For example:

This could also be extended to other things, for instance:
An array of points. The console widget could be expanded to some options:

• Points
• GL_LINES. GL_LINE_LOOP, ...
• draw3d, draw2

Would be very useful for visually debugging and experimenting.

Is this something you'd be interested to feature in this extension? Would you accept PR for this?

[Aerilius]

I am definitely interested. I was already looking into it, when I thought about exposing Ruby object properties as hierarchical trees (maybe by embedding Firefox's lazy loading object trees and implementing REPS protocol, but that single feature would have multiplied this extension's code).

It would not be too difficult to hard-code a single new visualization type in addition to the existing ones, but in the long-term I need to figure out an interface to make it extendible with more visualizations without blowing up the code.

[thomthom]

Can you point me to where I'd start in trying to add such a prototype visualizer? Would it be in Ruby or JS?

[Aerilius]

The interactivity is added client-side in JavaScript, after tokenization and highlighting (with Ace's highlighter). So the output is already split into colorized HTML tags and annotated with CSS classes depending on the type of token. Look into feature_highlight_entity.js.

• Define a regexp pattern to detect transformations in the output from their Ruby inspect string, and capture its object id. (If the desired string has been split into multiple HTML tags, one can avoid that by adding the string as a new token in mode-ruby_sketchup.js). But #<Geom::Transformation:...> is probably a single HTML tag with class sketchup.entity.
• Define a function analog to addEntityHighlight that is given the matched HTMLElement and current state of the Regexp object and does something with it. For transformation, you could register an onclick event handler which will toggle a child element containing the matrix table.
• In detectVisualizableElements, add a pattern match and call that function.
• You can register an action callback
  dialog.on('get_transformation_matrix') { |action_context, object_id| ... }
  in feature_highlight_entity.rb and then do
  Bridge.get("get_transformation_matrix", object_id).then(function(matrix){ ... })
  where you receive the matrix and generate the HTML table.