B4J Question [ABMaterial] How to catch data:image from JavaScript of an ABMaterial WebApp?

Mashiane

Expert
Licensed User
Longtime User
Hi there

I am working on an ABMaterial app, I'm able to generate a chart and this gets rendered into its own canvas element as depicted below:

mygraph.png


I mean to download the chart when the lime "cloud" button is clicked (top right). I have javascript to do that...

B4X:
Sub Download(InternalPage As ABMPage)
    Dim sb As String
    sb = $"var canvas = $("#${iID}").ejChart("export");
            alert(canvas.toDataURL());
            this.href = canvas.toDataURL();"$
    InternalPage.ws.Eval(sb, Array As Object(ABMComp.ID))
End Sub

The alert method included here generates the data:image as depicted below. I want to trap this so that a download is executed instead, how do I pass this back to execute the download? Another option will be to save this to a file for emailing purposes. Can someone please advise how I can achieve this feat?

data_image.png


Thanks a million..
 

Mashiane

Expert
Licensed User
Longtime User
This seems to have done the "download" trick. Found that I could add an anchor and run a click event in it. Would be nice to save the canvas to a file though using websockets.

B4X:
Sub Download(InternalPage As ABMPage)
    Dim sb As String
    sb = $"var chart = $("#${iID}").ejChart("instance");
           chart.model.enableCanvasRendering = true;
           chart.redraw();
           var canvas = chart.export();
           var lnk = canvas.toDataURL("image/png");
           $("#${iID}").attr('href', lnk);
           $("#${iID}").attr('download', ${iID}.png);
           var a = document.createElement("a");
             a.download = "${iID}.png";
           a.href = lnk;
           a.click();
           delete a;"$
    InternalPage.ws.Eval(sb, Array As Object(ABMComp.ID))
End Sub
 
Upvote 0
Top