to use lib easeljs.js with Wt

Added by Ericken Sty 6 months ago

i would like to use the lib easeljs for canvas with wt but it does not work.
How to make it work?

here is a piece of code
Wt::WApplication::instance()->require("js/easeljs.min.js");


Replies (11)

RE: to use lib easeljs.js with Wt - Added by lm at 6 months ago

You'll want to make sure your server is serving js/easeljs.min.js. What does the runtime log look like when that is requested?

RE: to use lib easeljs.js with Wt - Added by Ericken Sty 6 months ago

Log:
127.0.0.1 - - [2018-Dec-13 15:38:15.464] "POST /Avs?wtd=EUmHUbIUfIHO34oh HTTP/1.1" 200 22989
[2018-Dec-13 15:38:15.465] 9444 - [info] "WebRequest: took 2448.28 ms"
127.0.0.1 - - [2018-Dec-13 15:38:15.523] "GET /js/easeljs.min.js HTTP/1.1" 200 127543
127.0.0.1 - - [2018-Dec-13 15:38:15.643] "GET /Avs/Avs?wtd=EUmHUbIUfIHO34oh&request=resource&resource=olw6loi&rand=0 HTTP/1.1" 200 124
[2018-Dec-13 15:38:15.644] 9444 - [info] "WebRequest: took 7.682 ms"
127.0.0.1 - - [2018-Dec-13 15:38:15.653] "GET /docroot/resources/themes/bootstrap/3/time-edit-button.png HTTP/1.1" 200 1930
127.0.0.1 - - [2018-Dec-13 15:38:15.654] "GET /docroot/resources/themes/bootstrap/3/date-edit-button.png HTTP/1.1" 200 1006
127.0.0.1 - - [2018-Dec-13 15:38:15.860] "POST /Avs?wtd=EUmHUbIUfIHO34oh HTTP/1.1" 200 15502
[2018-Dec-13 15:38:15.861] 9444 - [info] "WebRequest: took 35.022 ms"

RE: to use lib easeljs.js with Wt - Added by lm at 6 months ago

Well that's great! The file is being fetched by the browser and the server is serving it.

Now perhaps take a look at your browser and verify the file is being loaded? Chromium developer tools Network tab is useful for this.

RE: to use lib easeljs.js with Wt - Added by Ericken Sty 6 months ago

in my browser Chrome easeljs.min.js is loaded.

RE: to use lib easeljs.js with Wt - Added by lm at 6 months ago

Okay, great. So what's the problem? Above you said, "it does not work", but everything you've posted since then seems to contradict that indictment.

RE: to use lib easeljs.js with Wt - Added by Ericken Sty 6 months ago

the probleme is that i want to use the javascript lib easeljs.js with WPaintedWidget so
can i used the javascript lib easeljs.js with WPaintedWidget?

RE: to use lib easeljs.js with Wt - Added by lm at 6 months ago

I'm not sure, you'll have to be much more specific. What have you tried and what error did you get? Generally, javascript works, but the devil is in the details.

RE: to use lib easeljs.js with Wt - Added by Ericken Sty 6 months ago

I use Qt frameWork, i used the ligne following to add the lib javascript Wt::WApplication::instance()->require("js/easeljs.min.js"); and j ai run a script js with

@widget->doJavaScript
(
QString(
"(function()"
"{"
"var canvas_"+ID+";"
"var stage_"+ID+";"
"var drawingCanvas_"+ID+";"
"var oldPt_"+ID+";"
"var oldMidPt_"+ID+";"
"var title_"+ID+";"
"var color;"
"var stroke_"+ID+";"
"var colors;"
"var index;"

"canvas_"+ID+" = document.getElementById("+ID+");" 
"stage_"+ID+" = new createjs.Stage(canvas_"+ID+");" 
"stage_"+ID+".autoClear = false;"
"stage_"+ID+".enableDOMEvents(true);"
"createjs.Touch.enable(stage_"+ID+");" 
"createjs.Ticker.framerate = 24;"
"drawingCanvas_"+ID+" = new createjs.Shape();"
"stage_"+ID+".addEventListener('stagemousedown', handleMouseDown_"+ID+");" 
"stage_"+ID+".addEventListener('stagemouseup', handleMouseUp_"+ID+");"
"stage_"+ID+".addChild(drawingCanvas_"+ID+");" 
"stage_"+ID+".update();"
"function handleMouseDown_"+ID+"(event)" 
"{"
"if (!event.primary) { return; }"
"color = \"#000000\";"
"stroke_"+ID+" = 5;"
"oldPt_"+ID+" = new createjs.Point(stage_"+ID+".mouseX, stage_"+ID+".mouseY);"
"oldMidPt_"+ID+" = oldPt_"+ID+".clone();"
"stage_"+ID+".addEventListener(\"stagemousemove\", handleMouseMove_"+ID+");"
"}"
"function handleMouseMove_"+ID+"(event)" 
"{"
"if (!event.primary) { return; }"
"var midPt = new createjs.Point(oldPt_"+ID+".x + stage_"+ID+".mouseX >> 1, oldPt_"+ID+".y + stage_"+ID+".mouseY >> 1);"
"drawingCanvas_"+ID+".graphics.clear().setStrokeStyle(stroke_"+ID+", 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt_"+ID+".x, oldPt_"+ID+".y, oldMidPt_"+ID+".x, oldMidPt_"+ID+".y);"
"oldPt_"+ID+".x = stage_"+ID+".mouseX;" 
"oldPt_"+ID+".y = stage_"+ID+".mouseY;"
"stage_"+ID+".update();" 
"}"
"function handleMouseUp_"+ID+"(event)" 
"{"
"if (!event.primary) { return; }"
"stage_"+ID+".removeEventListener(\"stagemousemove\", handleMouseMove_"+ID+");"
"}"
"})();"
).toStdString()
);@
i have no error but i can't draw on widget
NB: widget is a WPaintedWidget. ID = id of widget

RE: to use lib easeljs.js with Wt - Added by Wim Dumon 6 months ago

Hi,

Tip for debugging this: by adding

debugger;

at the beginning of your javascript code, you can use the browser's interactive debugger to step through the javascript code and check where it does not work as intended.

Best regards,
Wim.

RE: to use lib easeljs.js with Wt - Added by Ericken Sty 6 months ago

Thanks for your help,

i continue my tests.
will you say me how insert the tag <script>...</script> with wt.

RE: to use lib easeljs.js with Wt - Added by lm at 6 months ago

I think Wt::WApplication::require is what you want?

(1-11/11)