Jump to content
uniGUI Discussion Forums

TUnimImage Gestures: Pinch (Zoom in/out), Pan - Help Required

Recommended Posts

Can someone please show me how to implement Gestures for TUnimImage:-


Pinch (zoom in/out)




Thanks in advance

Share this post

Link to post
Share on other sites

Farshad, I need to be able to show an image and offer Pinch (Zoom In/Out) and Pan Gestures which are requirements for modern mobile users today.


You have remained silent, please advise if you are working on this now or you have a work around - I need this desperately in order to move forward with UniGUI.

Share this post

Link to post
Share on other sites

Thanks for the tip Farshad.


I tried it but no show - my Form is attached attached.


Can you please advise - thanks.



Share this post

Link to post
Share on other sites

Actually, it was me, not Farshad.


I didn't spend much time on this and I don't know much about Javascript, but here's how I got it to work for me just now:


Take the source of img-canvas-touch.js and paste it into the AfterScript property of your unimHTMLFrame followed by:


var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "files/images/picfirst0.jpg",
            desktop: true



Your HTML strings property of your unimHTMLFrame will only be:


    <h1>Example Title</h1>
    <div id="console">Console</div>
    <div id="mycontainer" style="width: 300px; height: 200px"> <!-- set desired position and size to that div -->
        <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>


For a test, I used the AllFeatures Touch demo and modified the Miscellaneous HTML Frame form.

It worked for me when testing on my Android 7.0 mobile phone using the stock Chrome browser.

Hopefully this will get you started.


Good luck!

Share this post

Link to post
Share on other sites

Thank you Dale, that works - I appreciate your help.


Because my image contents are changing all the time, and the js has to be in the AfterScript (it would be silly to delete and recreate every time the form is shown).


How can I implement Farshad's suggestion for working around cache issues ? 


"files/temp/image.jpg? + FormatDateTime('ddmmyyyyhhmmss', Now)",




path: "files/temp/image.jpg",


As you can see I am slowly coming to grips with js. 

Share this post

Link to post
Share on other sites

Unfortunately, I'm also not very good with Javascript, but here's a technique I've used in the past that worked for me for something similar:


1. Create a procedure that you can invoke as needed called "UpdateImageFrame", for example

2. Within that procedure, clear out the frame's HTML using "ImageHTMLFrame.HTML.Clear;"

3. Create a random name for your div id and update your HTML with the new id.  I've used something like:


    ContainerName := 'MyImage'+ImageHTMLFrame.JSControl.Id+FormatDateTime('YYYYMMDDHHNNSSZZZ', Now);

For example: ReferenceHTML :=

  ... canvas: document.getElementById('<#ContainerName>'), ...


ImageHTMLFrame.HTML.Text := StringReplace(ReferenceHTML,'<#ContainerName>',ContainerName,[]);


Similarly, have a string constant that contains the script source for image-canvas-touch-js followed by

  var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('<#ContainerName>'),
            path: "files/images/picfirst0.jpg",
            desktop: true


and update the ContainerName to match the new div id:

UpdatedScript := StringReplace(ReferenceScript,'<#ContainerName>',ContainerName,[]);


4. Then set JScript := '$(setTimeout(function () { '+UpdatedScript+' }, 50)); '

5. Then call 'UniSession.AddJS(JScript);'


Unfortunately, I simply don't have the time today to actually code this to test, but like I said, this technique has worked for me before for something very similar.

With this technique, you no longer put anything in your AfterScript property and simply call your UpdateImageFrame procedure as needed.


Hope this helps and good luck!

Share this post

Link to post
Share on other sites

One last thing:

In ImageHTMLFrame.ClientEvents.ExtEvent.afterupdatehtml, set to:


function afterupdatehtml(sender, eOpts)


For ImageHTMLFrame.OnAjaxEvent:


if EventName='loaded' then
  if not ImageFrameInitialized then

      ImageFrameInitialized := true;




in your frame/form creation, set ImageFrameInitialized := false;


Let me know if all of this works for you.

Share this post

Link to post
Share on other sites

Thanks again Dale.


The simplest way was to just clear and add the modified AfterScript code again.

Share this post

Link to post
Share on other sites