<canvas>

[thomthom]

Are you waiting for the HTML DOM to be ready?
I use jQuery's "ready" event to call back to Ruby to tell it when it's ok to use execute_script.

[thomthom]

@msp_greg said:

Thom - I'm one of the old-fashioned guys that think jQuery is overkill for
environments like SU

I use it for simplicity - less worries about cross platform issues and it shorter syntax. I also like to use jQuery UI to quickly deploy UI widgets what native HTML is missing. And it's not like jQuery adds much to the extension filesize.

[driven]

@msp_greg said:

The following will draw a canvas line on load, then will draw three more lines via button click.
...

not on a mac...
it requires a right click to see the first content...

I agree about jQuery as it's hard to debug in SU...
john

[MSP_Greg]

John,

@driven said:

not on a mac...
it requires a right click to see the first content...

I agree about jQuery as it's hard to debug in SU...
john

Cool...

Okay, being a Windows type, I don't have a mac handy to test with. If I try the html in Chrome (and set the inSU flag to false), I do see the callback to winLoad in the console.

Hence, do you (or Thom, or anyone on a mac) have any idea why this happens? FWIW, the main feature of my plugin is exporting and importing files with other software. Those software packages only run on a pc. Hence, I've never felt a need to make my plugin run on a mac...

Thanks,

Greg

[sdmitch]

Greg,

Thank you for your response and especially for the code example. I get so much more from a working example than searching through reference material.

Based on your example, I now know it is possible to reference a function using dlg.execute_script.

Sam

ps. the plugin now opens with the default shape drawn on the canvas!

[driven]

@Greg,

to elaborate after a couple more tries, it waits for any click...

so I think your click handler is blocking the initial draw...

why? on a mac the dlg exists with or without show, so it can load the js that says wait for click before the show, I have used 'onFocus' to trigger things in the past, but need to have a look for something that works...

once 'clicked' it runs fine...

john

[MSP_Greg]

Sam,

@sdmitch said:

Greg,
Based on your example, I now know it is possible to reference a function using dlg.execute_script.

Glad that helped. On Windows, the dlgCvs.show code executes immediately and steps to the next line of code, so you have to muc around with the 'load' event, since the DOM isn't yet loaded in the WD. Just the way it works, which does make sense, given that the show_modal method blocks (at least on Windows) until the dialog is closed.

You can also string together several method calls in execute_script. Hence, if the following is the code in the Ruby winLoad method

str = dLine(50,50,50,150);dLine(50,150,150,150);dLine(150,150,150,50);dLine(150,50,50,50);"
dlgCvs.execute_script(str)

a square will be drawn. BTW, there might be a limit to how long the parameter string can be in execute_script, but I don't know what it is...

As an aside, I did a canvas project (unrelated to SU) a while back. With good code, canvas is very fast...

Greg

[tt_su]

@msp_greg said:

e, do you (or Thom, or anyone on a mac) have any idea why this happens? FWIW, the main feature of my plugin is exporting and importing files with other software. Those software packages only run on a pc. Hence, I've never felt a need to make my plugin run on a mac...

I think I've seen this when you hook into the load event. Though hooking into the DOMContentLoaded appear to not suffer from this. Hooking into this might differ from browser to browser (glares at IE). (This is where frameworks like jQuery comes to it's good nature.)

@driven said:

I agree about jQuery as it's hard to debug in SU...

I've been meaning to write an article on this topic. With the web console under OSX (thanks to you) and using Visual Studio's JS debugger under Windows debugging is actually quite nice.

[MSP_Greg]

The following will draw a canvas line on load, then will draw three more lines via button click.

Shows callbacks from WebDialog to Ruby, both on WD init and from button clicks. Also shows execute_script (Ruby calls into WD javascript)

Thom - I'm one of the old-fashioned guys that think jQuery is overkill for
environments like SU

HTH...

Greg

def canvasTest()
  cntr = 0      # counter for button clicks
  aPtSt = []    # 2 element array for line start point [x,y]
  aPtEnd = []   # 2 element array for line end point   [x,y]

  html = <<-HTML
<!DOCTYPE html>
<html lang="en-US">
  <head>
  <meta charset="utf-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <style type="text/css">
      em {text-decoration;underline; font-style;normal; }
      #myCanvas {border;3px solid #d3d3d3; }
      #bNext {height;2em; width;100px; margin-left;50px; }
    </style>
    <script type="text/javascript">
      'use strict';
      var $el = function(x) { return document.getElementById(x); },
          ctx,
          inSU = true;

      // dLine - draw canvas line
      function dLine(stX, stY, endX, endY) {
        ctx.moveTo(stX,stY); ctx.lineTo(endX,endY); ctx.stroke();
      };

      // clkBtn - button click
      function clkBtn(e) { talk("Next"); };
      
      // winLoad - set doc variables, attach events to DOM elements,
      //           then tell SU we're ready
      function winLoad() {
        ctx = $el("myCanvas").getContext("2d");
        $el("bNext").addEventListener('click', clkBtn, false);
        talk('winLoad');
      };

      // talk - used for SU callbacks, also script debugging
      //        set inSU = false to output to browser console
      function talk(sSend) {
        if (inSU) window.location = 'skp;' + sSend;
        else      console.log(sSend);
      };
      
      if ('DOMContentLoaded' in document)
        document.addEventListener('DOMContentLoaded', winLoad, false);
      else
        window.addEventListener('load', winLoad, false);
    </script>
  </head>
  <body>
    <div><canvas id="myCanvas" width="200" height="200" /></div>
    <button id="bNext" accesskey="n"><em>N</em>ext Line</button>
  </body>
</html>
  HTML

  dlgCvs = UI;;WebDialog.new("Canvas", false, "WDID", 300, 300, 10, 10, true)
   
  # add callback for onload event
  dlgCvs.add_action_callback("winLoad") { |dlg,ret|
    dlgCvs.execute_script("dLine(50,50,50,150);")
  }

  # add callback for button click, loop thru lines for drawing square
  dlgCvs.add_action_callback("Next") { |dlg,ret|
    case cntr
    when 0 then aPtSt = [50,150]  ; aPtEnd = [150,150]
    when 1 then aPtSt = [150,150] ; aPtEnd = [150,50]
    when 2 then aPtSt = [150,50]  ; aPtEnd = [50,50]
    end
    if (cntr < 3)
      cntr += 1
      dlg.execute_script("dLine(#{aPtSt.join(',')},#{aPtEnd.join(',')});")
    end
  }

  dlgCvs.set_html(html)
  dlgCvs.show
end
canvasTest()

[MSP_Greg]

Thom,

@tt_su said:

I think I've seen this when you hook into the load event. Though hooking into the DOMContentLoaded appear to not suffer from this. Hooking into this might differ from browser to browser (glares at IE).

I updated my post with the code to use the DOMContentLoaded event, if available...

Thanks,

Greg

[driven]

@Greg
updated script runs from the top...

@TT
please right up the debug info...
The biggest hassle I find is injecting Web Inspector on jQ UI's [especially from .rbs files]...

john