Ability to zoom in/out and shaking canvas on ipad - javascript

We have been trying to build a map for a client where users can:
Use a joystick to navigate left and right
Zoom in/out on the canvas
Select a specific building and have that center align for them
Everything works great on a PC but when we try to use an iPad 2 problems happen:
The screen becomes quite shaky
When you zoom in on the screen the quality of the map drops, even though the map is over 10mb and the quality is good for some reason it becomes pixelated.
URL: http://bit.ly/1MDcVhV
Does anyone have experience with such problems.
Thanks.

Related

Customize zoom-in speed for SAPUI5 network graph

I am using a network graph in my SAPUI5 application. In the Graph tag I set the 'enableWheelZoom'-property to true, which allows the user to zoom in/out using the mouse wheel.
Is there a way to adjust or customize the zoom-in velocity? Without further adjustments the zoom happens quite quickly, though I'm scrolling slowly. I would want the zoom to be smoother/slower.
Many thanks in advance! :)

How to enable touch events on a html canvas for mobile browsers

Problem: If a mobile browser zooms in on something, say a login input, then the input fades away to a html canvas, the user can't use their taps or drags to have any effect on the html canvas too zoom out or move around. This means if the screen is zoomed in, there's no way for the user to zoom out unless there is a different html object sitting over the canvas for the user to tap.
Desired solution: javascript code that allows the canvas to function like other divs when tapped on or dragged (for zooming in/out and navigating while zoomed)
Acceptable solution: A javascript function to have the browser zoom out to the documents original size. - OR - A way to use CSS to make sure the browser doesn't zoom in on the canvas.
Not acceptable: disable zooming in or out on the entire page.
Using chrome and iphone safari.
Update
if ( viewport ) {
viewport.content = "initial-scale=0.1";
viewport.content = "width="+screenW;
}
After selecting the viewport, this code manages to zoom out google chrome's rendition of an mobile phone, but this does not work on my iphone 7.

How to disable auto rotate for a video preview in a Windows Phone 8.1 App using javascript/html5

I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.

Android Tablet paper.js on zoomed canvas

I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.

fabrics on image editor mobile device

I want to make a simple image editor (drag, rotate, resize) in javascript. It has to work at tablet and mobile phones.
Fabric seems to be very fast. The only problem is that rotating / resizing don't work intuitive (sometimes you click and nothing happen). Does anybody know there is a solution for this in Fabric.
Or is there a other fast platform to create a fast editor
fabric example rotating resize

Categories