Global TUniPanel HTML modification

[MarBar77]

Hi,

I have main layout as showed as example in attached image. There are 3 panels for navigation and main panel (named ClientPanel presented in orange color) which has another two panels for navigation and rest of place of this panel is used to display frames.

Now I have a question if this is possible to inject to this ClientPanel some additional HTML code and scripts. I want to add additional functionality to make screenshot of content of this panel using html2canvas plugin. To make this I need to ask some scripts to head section of this panel code and add script with function take this screenshot possible. Or maybe there is another way how can I take it globally neverthless what is displayed in that panel? The other question is hot to call JS function from another external control e.g. button?

Thank you for any suggestions or examples

Marcin

 

[MarBar77]

Maybe I add some additional info.

I need to extend body of particular TUniPanel with following HTML/Scripts:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<style>
  canvas {
  max-width: 100%;
  max-height: 100%;
}
</style>



<script>
function genScreenshot() {
    html2canvas(myCanvas, {
      onrendered: function(canvas) {
      document.body.appendChild(canvas);
        if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                  navigator.userAgent.match(/Trident.*rv\:11\./)) 
            {
             var blob = canvas.msToBlob();
          window.navigator.msSaveBlob(blob,'Test file.png');
        }
        else 
        {
          $('#test').attr('href', canvas.toDataURL("image/png"));
          $('#test').attr('download','Test file.png');
          $('#test')[0].click();
        }
      }
    });
}
</script>

This should allow me to make a screenshot of panel content.

[MarBar77]

Or maybe another approach:

1) How to add additional items to head and body of whole mainform?

2) How to find the ID of particular TUniPanel div in generated html?

Regards,

Marcin

[Sherzod]

Hi,

10 hours ago, MarBar77 said:

1) How to add additional items to head and body of whole mainform?

Also this post may help you:

 

10 hours ago, MarBar77 said:

2) How to find the ID of particular TUniPanel div in generated html?

Can you please clarify in more detail?

Or make a simple testcase if possible.

 

Regards,

[MarBar77]

Sherzod, thank you for your response.

About second point I mean that eg. my Panel Is named ClientPanel in designtime and in html it has eg. Id = 10F. How can I retrive this Id in runtime?

Regards,

Marcin

[Sherzod]

9 minutes ago, MarBar77 said:

About second point I mean that eg. my Panel Is named ClientPanel in designtime and in html it has eg. Id = 10F. How can I retrive this Id in runtime?

//Delphi code

ClientPanel.JSName

 

[MarBar77]

Thank you.