Jump to content


Photo

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

TUnimImage Gestures Zoom Pan

  • Please log in to reply
9 replies to this topic

#1 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 29 November 2017 - 04:39 AM

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

 

Pinch (zoom in/out)

 

Pan

 

Thanks in advance


  • 0

Andy


#2 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 30 November 2017 - 09:09 AM

Farshad, please advise.


  • 0

Andy


#3 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 01 December 2017 - 08:12 PM

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.


  • 0

Andy


#4 Dale Fong

Dale Fong

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 139 posts

Posted 02 December 2017 - 04:39 AM

Check out

 

http://www.rombdn.co...g-touch-canvas/

 

I haven't tested this yet, but theoretically, you should be able to use this in a UnimHTMLFrame


  • 0

#5 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 02 December 2017 - 05:26 AM

Thanks for the tip Farshad.

 

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

 

Can you please advise - thanks.

 

Attached Files


  • 0

Andy


#6 Dale Fong

Dale Fong

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 139 posts

Posted 02 December 2017 - 05:01 PM

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!
 


  • 0

#7 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 02 December 2017 - 07:17 PM

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. 


  • 0

Andy


#8 Dale Fong

Dale Fong

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 139 posts

Posted 02 December 2017 - 08:31 PM

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!


  • 0

#9 Dale Fong

Dale Fong

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 139 posts

Posted 02 December 2017 - 08:48 PM

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.


  • 0

#10 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 155 posts
  • LocationMelbourne Australia

Posted 05 December 2017 - 05:54 AM

Thanks again Dale.

 

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


  • 0

Andy






Also tagged with one or more of these keywords: TUnimImage, Gestures, Zoom, Pan

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users