Requesting idea for creating shapes with webdialog

hanl000

Hi,

I am trying to create various shapes(2D, 3D both) with webdialog, not inputbox. Im already familiar with the way creates shapes with inputbox and It was a bit easy to learn. Determining variables(with @) -> drawing shape(with add_face, add_line etc.) -> coordinate(Geom::Transformation) are all steps i have done for creating shapes with inputbox.
On the other hand, Webdialog,,,, looked unfamilir. To say exactly, Im not good at HTML and Javascript yet. Now, Im looking for the way how I can draw various shapes in Sketchup with Ruby API and Webdialog. Could you please give me advice or help? Your reply will encourage me to study Ruby API hard.
Again, What I want to know is to make a webdialog can create shapes with variables for length(if the shape is box, and it would be radius or diameter if the shape is sphere), coordinate. Im sharing an example I tried. Id like to apply this code to Webdialog.

toolbar = UI;;Toolbar.new "Box"
 
 cmd = UI;;Command.new("Create_Box") { box }
 cmd.small_icon = cmd.large_icon = "box.png"
 toolbar = toolbar.add_item cmd
 toolbar.show

def box
model = Sketchup.active_model
entities = model.entities

@Length = 0.mm unless @Length
@Width = 0.mm unless @Width
@Height = 0.mm unless @Height
@X = 0.mm unless @X
@Y = 0.mm unless @Y
@Z = 0.mm unless @Z

results = inputbox(['Length', 'Width', 'Height', 'X', 'Y', 'Z'], [@Length, @Width, @Height, @X, @Y, @Z], 'Box')
return nil unless results
@Length, @Width, @Height, @X, @Y, @Z = results

#Points
p1 = [0, 0, 0]
p2 = [@Length, 0, 0]
p3 = [@Length, @Width, 0]
p4 = [0, @Width, 0]

group=entities.add_group
entities=group.entities
face = entities.add_face(p1, p2, p3, p4)
face.pushpull @Height

pos = Geom;;Transformation.new([@X, @Y, @Z])
group.transform! (pos)

end

sdmitch

My solution

module HANL000

	module Create_Shape

		unless file_loaded?(__FILE__)
			toolbar = UI;;Toolbar.new "Box"
			cmd = UI;;Command.new("Create_Box") { self.box }
			cmd.small_icon = cmd.large_icon = "box.png"
			toolbar = toolbar.add_item cmd
			toolbar.show unless toolbar.get_last_state==0
			file_loaded(__FILE__)
		end

		def self.box

			@mod = Sketchup.active_model
			@ent = @mod.active_entities
		
			@Length = 100.mm unless @Length
			@Width = 100.mm unless @Width
			@Height = 100.mm unless @Height
			
			@X = 0.mm unless @X
			@Y = 0.mm unless @Y
			@Z = 0.mm unless @Z

			@dlg=UI;;WebDialog.new("Create Box", false,"WDID",200,300,10,10,true)
			html = <<-HTML
			<!DOCTYPE html>
			<html lang="en-US">
				<head>
					<meta charset="utf-8" />
					<meta content="IE=edge" http-equiv="X-UA-Compatible" />
				</head>
				<body>
					<form action='skp;submit_form@'>
						<fieldset>
							<legend style='font-size;125%;color;red'><b> Dimensions </b></legend>
							<table style='font-size;100%'>
								<tr><td align='right'>Length;</td>
								<td><input name='Length' type='text' value='#{@Length}' size=5/></td></tr>
								<tr><td align='right'>Width;</td>
								<td><input name='Width' type='text' value='#{@Width}' size=5/></td></tr>
								<tr><td align='right'>Height;</td>
								<td><input name='Height' type='text' value='#{@Height}' size=5/></td><tr>
							</table>
						</fieldset>
						<fieldset>
							<legend style='font-size;125%;color;red'><b> Box Origin </b></legend>
							<table style='font-size;100%'>
								<tr><td align='right' width=50>X;</td>
								<td><input name='X' type='text' value='#{@X}' size=5/></td></tr>
								<tr><td align='right' width=50>Y;</td>
								<td><input name='Y' type='text' value='#{@Y}' size=5/></td></tr>
								<tr><td align='right' width=50>Z;</td>
								<td><input name='Z' type='text' value='#{@Z}' size=5/></td></tr>
							</table>
						</fieldset><br>
						<center><input type='submit' name='submit' value='Submit' /></center>
					</form>
				</body>
			</html>
			HTML

			@dlg.set_html(html)
			
			@dlg.add_action_callback("submit_form") {|d,p|
				p.gsub!("?",""); tokens=p.split("&"); puts p
				tokens.each{|t|
					var,val = t.split("="); puts t
					case var
						when 'Length' then @Length = val.to_l
						when 'Width' then @Width = val.to_l
						when 'Height' then @Height = val.to_l
						when 'X' then @X = val.to_l
						when 'Y' then @Y = val.to_l
						when 'Z' then @Z = val.to_l
					end
				}

				@mod.start_operation "Create Box"
				
				p1 = [@X, @Y, @Z]
				p2 = [@X+@Length, @Y, @Z]
				p3 = [@X+@Length, @Y+@Width, @Z]
				p4 = [@X, @Y+@Width, @Z]

				g = @ent.add_group; ge = g.entities
				face = ge.add_face(p1, p2, p3, p4)
				face.pushpull -@Height

				@mod.commit_operation
			};
			
			RUBY_PLATFORM =~ /(darwin)/ ? @dlg.show_modal() ; @dlg.show();
			
		end
		
	end

end

hanl000

Thank you for giving me clear solution!

And I got two more questions from the solution.

what codes do I have to use to rotate the shape instead of to_l of val.to_l in the solution?
to_l is the method of numeric class which can convert inches to length and it's not related with rotation of shape. Maybe, another way is used next to val.. I tried to use just '.degrees', but it didn't work
If I make more webdialogs create different shapes, how can I connect the webdialogs with each other? I'd like to try to make a webdialog which something in the webdialog takes me to another page which shows me another inputbox. It is like usual links in usual webpages and id like to add it.

To start learning HTML alone is so difficult it will be really great if you reply to my questions again.

Happy Easter!

sdmitch

Use a rotation transformation to rotate the group g following its creation, ie

g.transform! Geom::Transformation.rotation(p1,Z_AXIS,some_angle.degrees)
It would be far easier to create separate webdialogs for each shape and activate them from a single Toolbar.

kaas

Interesting ruby code Sdmitch. I never knew how to embed the html code in Ruby. I expected all code would be in embedded into 1 string or something like that. Can you explain the syntax of the beginning and end capitalized HTML tags? Or maybe do you have a link to the relevant Ruby-doc.org page?

html = <<-HTML
...
HTML

driven

@kaas, have a look for HEREDOC, the main gotcha is omitting the dash

  puts <<HEREDOC

  after newline and two spaces in
this this will be left justified...
HEREDOC # this MUST be left justified without the dash...

  puts <<-HEREDOC

  after newline and two spaces in
  adding dash allows nicer looking code, but text will not be left justified...
  HEREDOC

  @var = 'no curly brackets needed'
  var = 'curly brackets needed'
  puts <<-HEREDOC

  after newline and two spaces in
  #@var
  #{var}
  HEREDOC

john

kaas

Thanks John,
HEREDOC - exactly what I was looking for.
Max

sdmitch

@kaas said:

Interesting ruby code Sdmitch. I never knew how to embed the html code in Ruby. I expected all code would be in embedded into 1 string or something like that. Can you explain the syntax of the beginning and end capitalized HTML tags? Or maybe do you have a link to the relevant Ruby-doc.org page?

html = <<-HTML
...
HTML

I learned about this technique from code or a plugin that was posted sometime ago. Before then I was creating the html code in a separate file or as a quoted string inside the plugin. This was a major pain trying to keep the single and double quotes straight. This way is so much easier.

hanl000

@unknownuser said:

It would be far easier to create separate webdialogs for each shape and activate them from a single Toolbar.

Thank you for kind answer, sdmitch

Question brings new questions.

Now, I'm combining separated codes into one ruby file as you said and am looking around existing tools used webdialog.

https://github.com/joshaxey/Led-Staircase/blob/master/ledstaircase.rb showed me one good example which Id like to indicate(and I saw 'floorgenerator' you created as well!).

According to your tip, a single toolbar would be created for indicating one webdialog contains several basic tools which can be jump into each other clicking link on the webdialog. It sounded like I have to use like

` #Add item
A = Module::Class.new

#Make toolbar
toolbar = toolbar.add_item A.ACommand

Show toolbar

toolbar.show`

Then, this is different with the way which excisting tool used(difference of code structure).

I have a few basic tools created based on your help. Maybe, it is better to share my works with other users and would like to make a bridge connects these individual tools on one webdialog by using

<option value='A' #{@B=='A' ? 'selected' : ''} >Option A</option>

or

<input type=radio name=rset value="B"> Option B 

or

<li class="selected"><a href="C" title="Tool1">Tool1</a></li> <li><a href="D" title="Tool2">Tool2</a></li>

Everything will be solved if this problem is solved. Please have a look at the attached two files and help me with this problem

box_webdialog.rb

sphere_webdialog.rb

sdmitch

Please check messages.