Separation of code and image display in webdialog

hanl000 · 24 May 2016, 18:23

Hi,

I'm currently doing work on webdialog and have two problems now
This is the code I have made



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

      def icons

         dlg=UI;;WebDialog.new("Icons", false,"WDID",200,300,10,10,true)

	dlg.add_action_callback("Orbit") {|d, p|Sketchup.send_action "selectOrbitTool;"}
	dlg.add_action_callback("Hide") {|d, p|Sketchup.send_action "editHide;"}
	dlg.add_action_callback("Unhide") {|d, p|Sketchup.send_action "editUnhide;"}
	dlg.add_action_callback("Select") {|d, p|Sketchup.send_action "selectSelectionTool;"}
	dlg.add_action_callback("Hidden") {|d, p|Sketchup.send_action "viewShowHidden;"}
	dlg.add_action_callback("Undo") {|d, p|Sketchup.send_action "editUndo;"}
	dlg.add_action_callback("Redo") {|d, p|Sketchup.send_action "editRedo;"}
	

         html = <<-HTML
         <!DOCTYPE html>
         <html>
            <head>
               <meta charset="utf-8" />
               <meta content="IE=edge" http-equiv="X-UA-Compatible" />
						    <script>
							function Select() {window.location = "skp;Select";}
							function Undo() {window.location = "skp;Undo";}
							function Redo() {window.location = "skp;Redo";}
							function Orbit() {window.location = "skp;Orbit";}
							function Hide() {window.location = "skp;Hide";}
							function Unhide() {window.location = "skp;Unhide";}
							function Hidden() {window.location = "skp;Hidden";}
						    </script>
            </head>
            <body>

		<table>
                       <td><button onclick="Select();"><img src="Webdialog/images/Select.png"></img></button></td>
                       <td><button onclick="Undo();"><img src="Webdialog/images/Undo.png"></img></button></td>
                       <td><button onclick="Redo();"><img src="Webdialog/images/Redo.png"></img></button></td>	
                       <td><button onclick="Orbit();"><img src="Webdialog/images/Orbit.png"></img></button></td>
                       <td><button onclick="Hide();"><img src="Webdialog/images/Hide.png"></img></button></td>
                       <td><button onclick="Unhide();"><img src="Webdialog/images/Unhide.png"></img></button></td>
                       <td><button onclick="Hidden();"><img src="Webdialog/images/Hidden.png"></img></button></td>
		</table>


               </form>
            </body>
         </html>
         HTML


         dlg.set_html(html)
         
         RUBY_PLATFORM =~ /(darwin)/ ? dlg.show_modal() ; dlg.show();
         
      end

Once I run this code in Sketchup, One icon opens webdialog is seen. The problem is, icons correspond to each basic tool are not displayed. I correctly specified the pathway to the folder where image files are contained. Please have a look at the attached file. This is what I'm seeing now. My expectation was icons are displayed well.

For better work, I would like to separate HTML code from the whole code. The codes HTML and Ruby API are mixed look messy. In the code, HTML part is written together and I want to substitute 'Sketchup.find_support_file "Pathway1/Pathway2.html'(or other codes can load external html file) for the internal HTML in main code. How can I proceed this work?