Jump to content

Global TUniPanel HTML modification


MarBar77

Recommended Posts

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

 

layout.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...