Adding HTML on runtime

[HISPhilip]

My specific task is to be able to dynamically create HTML5 canvas on a TUniHTMLFrame so that I can show multiple TeeChart HTML5 according to user input.

 

I have seen sample projects such as the High Charts Demo, however since I need many TUniHTMLFrames with unique names as well as unique names for each canvas, I need to be able to programmatically achieve step 6) of Delphi Developer's guide within the High Charts Demo (which has helped a lot thank you).

 

However using  

UniHTMLFrame1.HTML.Add('<canvas id="canvas" width="600" height="300">This browser does not seem to support HTML5 Canvas.</canvas>' + '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>');

does not load the chart onto the TUniHTMLFrame itself. And for some reason if I try

ShowMessage(UniHTMLFrame1.HTML.Text);

it will load the chart in a new window like so (I am using someone's demo for testing but I cannot find the original source again my apologies) but I want it to load onto the UniHTMLFrame properly:

 

https://imgur.com/a/Q0oru

 

For reference below is a snippet of the relevant code.

  UniHTMLFrame1.HTML.Add('<canvas id="canvas" width="600" height="300">This browser does not seem to support HTML5 Canvas.</canvas>' +
    '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>');

  ShowMessage(UniHTMLFrame1.HTML.Text);

  UniSession.AddJS(
    'Chart1=new Tee.Chart("canvas");' +
    'Chart1.axes.left.title.text="Axis Y";' +
    'Chart1.axes.bottom.title.text="Axis X";' +
    'Chart1.title.text="Testing";' +
    'var series=Chart1.addSeries(new Tee.Line(Chart1));' +
    'series.data.x=[];' +
    'Chart1.panel.transparent=true;' +
    'Chart1.legend.visible=false;' +
    'Chart1.zoom.enabled=false;' +
    'Chart1.scroll.mouseButton=0;' +
    'Chart1.scroll.direction="horizontal";' +
    'Chart1.axes.bottom.setMinMax(200,499);' +
    'scroller=new Tee.Scroller("canvas2", Chart1);'
    );

  UniSession.AddJS(
    'for (var t=0; t<1000; t++) {' +
    'series.data.values[t]=Math.random()*1000;' +
    'series.data.x[t]=t;' +
    '}' +
  'Chart1.applyTheme("minimal");' +
  'Chart1.applyPalette("lookout");' +
  'Chart1.title.format.font.shadow.visible=false;' +
  'Chart1.footer.format.font.shadow.visible=false;' +
  'Chart1.panel.format.shadow.visible=false;' +
  'for (var i=0; i < Chart1.series.items.length; i++)' +
  '{' +
  '  Chart1.series.items[i].format.shadow.visible=false;' +
  '}' +
  'Chart1.applyTheme("minimal");' +
  'Chart1.draw();'
  );

  UniSession.AddJS(
    'Chart1.draw();'
    );

[HISPhilip]

  UniSession.AddJS('document.body.innerHTML += ''<canvas id="canvas" width="600" height="300">' +
  'This browser does not seem to support HTML5 Canvas.</canvas><canvas id="canvas2" width="600" height="100"></canvas>'';' +
                   'document.getElementById(''' + UniHTMLFrame1.JSId +''').innerHTML = ''<canvas id="canvas" width="600" height="300"></canvas>' +
                   '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>'';');

 

Using this instead of UniHTMLFrame1.HTML.Add works, but now the rest of the program freezes (Chart is still 'alive').

 

edit: I can't figure out how to upload via unigui so here is an external link for the program: https://files.fm/u/y2exh6aw

[Sherzod]

Hi,

 

Which edition and build are you using ?!

 

Best regards,

[HISPhilip]

I'm using build uniGUI 1.0.0 build 1421 using RAD Studio 10.1 Berlin.

 

Does this mean it's working fine on your end?

[Sherzod]

Are you using a trial edition ?!

[HISPhilip]

No, I'm using a full version but I will shortly upgrade to the newest version and see if there's any difference.

 

edit: Just tested with the latest version from the customer portal, still have the same issue.

[Sherzod]

Hi,

 

Ok, First of all please visit here:

http://forums.unigui.com/index.php?/topic/6291-new-users-please-adjust-your-forum-email-address/

 

And try to use this solution:

procedure TMainForm.UniButton2Click(Sender: TObject);
...

//  UniSession.AddJS('document.body.innerHTML += ''<canvas id="canvas" width="600" height="300">' +
//  'This browser does not seem to support HTML5 Canvas.</canvas><canvas id="canvas2" width="600" height="100"></canvas>'';' +
//                   'document.getElementById(''' + UniHTMLFrame1.JSId +''').innerHTML = ''<canvas id="canvas" width="600" height="300"></canvas>' +
//                   '<canvas id="canvas2" width="600" height="100">This browser does not seem to support HTML5 Canvas.</canvas>'';');

  UniHTMLFrame1.JSInterface.JSCall('update', ['<canvas id="canvas" width="600" height="300"></canvas><canvas id="canvas2" width="600" height="100"></canvas>']);  //<--------------------------

  UniSession.AddJS(
    'Chart1=new Tee.Chart("canvas");' +
  ... 
end

Best regards,

[HISPhilip]

Thank you! It works perfectly now, if possible could you show me where I can find more information about JSInterface and when to use as opposed to UniSession.AddJS?