Extending AWComponent - HTML5 Canvas

[Sarosh Mathew Koshy]

Dear Gurus

I need a component that will allow annotations to be recorded against a background image. The annotations could be graphical patterns or text.

I've looked at the HTML5 spec and have found an easy way to implement this using the Canvas and javascript. I've prototyped a simple HTML page that can capture the annotations, store it in an "Edit Array" (essentially x,y coordinates and the graphic symbol used).

Can someone help me with direction on how I can integrate this into the Aribaweb framework? I've looked at the source code of the Chart component as I thought it would be closest to what I need, but since it uses flash for rendering the charts, I'm back at square one. The RichTextArea component also looks helpful, but its taking a while to get my head around it.

The image below is a mock of what I need to achieve.

All help appreciated!

With regards,
Sarosh

[Sarosh Mathew Koshy]

The inline screenshot didn't get uploaded. Attaching it for ref

[Sarosh Mathew Koshy]

Dear All

I've made some progress by looking at the way the GMaps example has been developed.

I'm able to get the HTML Canvas up and am able to pick up click events in the javascript code. As of today, I've managed to get the click to propogate back to the java component in the server.

However, I see this message on the console and am not sure what it means. Any ideas?

[java] 23:56:13,741 DEBUG state:178 - ****** Unclean stateless object modules.cpoe.charting.EzChart: java.lang.Object _chartId == _qzkxg

I'm a bit hard-pressed.. & continuing the investigation :)

Sarosh

[Sarosh Mathew Koshy]

Dear All,

The charting component I'm developing renders a background image against which the user makes annotations. The image is loaded in the component's Javascript code.

Is there a way to work out the full URL in javascript (including the server address, port and the app url)? The image is managed by Resource Manager.

As a workaround, I am attempting to generate the full URL in the parent component's java class and pass it as a parameter to the javascript method. I'm using the following line for this:

session().resourceManager().urlForResourceNamed("branding/EzChart/BodyChart.jpg", true, true);

But this is generating a URL with an incorrect number (in red below).

URL: https://localhost/EasyCare2.5/AribaWeb/ad/content/AWXDebugResourceActions/2/branding/EzChart/BodyChart.jpg

When I look at the other resource URLs in Firefox's web console, i see a different number (19)

GET
http://localhost:8080/EasyCare2.5/AribaWeb/ad/content/AWXDebugResourceActions/19/branding/EzChart/EzChart.css [HTTP/1.1 200 OK 1ms]
GET
http://localhost:8080/EasyCare2.5/AribaWeb/ad/content/AWXDebugResourceActions/19/branding/EzChart/EzChart.js [HTTP/1.1 200 OK 1ms]

I replaced 2 with 19 in the Image's URL and the browser was able to GET the resource.

What does the number in the URL mean? Why is it different in my case (i.e., what am I doing wrong)?

With regards,
Sarosh

...

[Frantisek Kolar]

This debugging Resource Action go thru the resource dir index each dir (assign each dir a number) and then instead of using AWXDebugResourceActions/MYIMAGES/xx.jpg this number. You probably need to debug this class AWXDebugResourceActions to find out how come it picked from hash different number

--
You received this message because you are subscribed to the Google Groups "AribaWeb (aribaweb.org)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to aribaweb+u...@googlegroups.com.
To post to this group, send email to arib...@googlegroups.com.
Visit this group at http://groups.google.com/group/aribaweb.
For more options, visit https://groups.google.com/d/optout.

[Sarosh Mathew Koshy]

Dear All,

I've not managed to solve the mystery of the hash number, but I found a workaround by looking at how the Explorer mode in the data table renders the folder and file icons. Src: OutlineFolderControl.awl

I realised that if I place the image in the same package as the source file, then the line <a:Image filename="pointmode.svg" align="middle" /> is picking up the image. Whereas if I give it a path to the application's branding folder, it picks up the wrong hash number, and the image does not load up.

I still don't know why the resource manager is doing this. Will investigate the mystery of the hash number.

Sarosh

[Sarosh Mathew Koshy]

Dear All

Could you help me understand what causes AribaWeb to do a full-page refresh? The dynamic content of my page is encased in a bunch of nested <a:RefreshRegion> tags, but in some cases, I see the entire page being refreshed.

At the top of the page, I see the following text (beside AWOptions...)

FULL PAGE REFRESH!:
session.RequestType() != AWSession.NewRequest (==4)

My content incorporates a custom javascript component that handles the HTML 5 Canvas feature I need.

The full page refresh is causing the state of the page (edits on the canvas) to be lost! I need to prevent this.

With much regards,
Sarosh

On Friday, July 10, 2015 at 2:43:45 PM UTC+5:30, Sarosh Mathew Koshy wrote:

...

[Sarosh Mathew Koshy]

Dear All,

The refresh issues are solved. I thought I should update this group with the issue and the solution for future reference.

In my design I had Javascript code to generate some of the dynamic content on the page. This included routines to draw annotations on the HTML 5 Canvas object and some DIV tags to enable the user to click the symbol that was edited and then delete it.

Generating any HTML content off-server caused aribaweb to force a full page refresh. I rewrote the component to manage all the dynamic content in AWL and used Javascript purely for drawing on the canvas. This approach worked and the component is working predictably now.

Attached is a screenshot of the component in action.

Thanks for all the responses to my questions. Your help was invaluable to me.

Regards,
Sarosh

[Frantisek Kolar]

Thanks Sarosh. Good to know. 

Frank

--
You received this message because you are subscribed to the Google Groups "AribaWeb (aribaweb.org)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to aribaweb+u...@googlegroups.com.
To post to this group, send email to arib...@googlegroups.com.
Visit this group at http://groups.google.com/group/aribaweb.
For more options, visit https://groups.google.com/d/optout.

<Screenshot from 2015-10-05 16-38-54.png>