Jump to content

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


andyhill

Recommended Posts

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.

Link to comment
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:

 

<html>
<body>
    <h1>Example Title</h1>
    <hr>
    <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>
    </div>
</body>
</html>

 

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!
 

Link to comment
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)",

 

for 

 

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

 

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

Link to comment
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!

Link to comment
Share on other sites

One last thing:

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

 

function afterupdatehtml(sender, eOpts)
{
  ajaxRequest(sender,'loaded',[]);
}

 

For ImageHTMLFrame.OnAjaxEvent:

 

if EventName='loaded' then
  if not ImageFrameInitialized then
    begin
     
      UpdateImageFram3e;

      ImageFrameInitialized := true;

    end;

 

 

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

 

Let me know if all of this works for you.

Link to comment
Share on other sites

×
×
  • Create New...