andyhill Posted November 29, 2017 Share Posted November 29, 2017 Can someone please show me how to implement Gestures for TUnimImage:- Pinch (zoom in/out) Pan Thanks in advance Link to comment Share on other sites More sharing options...
andyhill Posted November 30, 2017 Author Share Posted November 30, 2017 Farshad, please advise. Link to comment Share on other sites More sharing options...
andyhill Posted December 1, 2017 Author Share Posted December 1, 2017 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 More sharing options...
DFong Posted December 2, 2017 Share Posted December 2, 2017 Check out http://www.rombdn.com/img-touch-canvas/ I haven't tested this yet, but theoretically, you should be able to use this in a UnimHTMLFrame Link to comment Share on other sites More sharing options...
andyhill Posted December 2, 2017 Author Share Posted December 2, 2017 Thanks for the tip Farshad. I tried it but no show - my Form is attached attached. Can you please advise - thanks. Zoomm.zip Link to comment Share on other sites More sharing options...
DFong Posted December 2, 2017 Share Posted December 2, 2017 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 More sharing options...
andyhill Posted December 2, 2017 Author Share Posted December 2, 2017 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 More sharing options...
DFong Posted December 2, 2017 Share Posted December 2, 2017 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 More sharing options...
DFong Posted December 2, 2017 Share Posted December 2, 2017 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 More sharing options...
andyhill Posted December 5, 2017 Author Share Posted December 5, 2017 Thanks again Dale. The simplest way was to just clear and add the modified AfterScript code again. Link to comment Share on other sites More sharing options...
Recommended Posts