Starting WebView fit to scale, with pinch zoom - android

I am trying to load a url into a webview, its actually a screen share stream into a phone app.
I have a couple of issues I need help with.
WebView starts always zoomed at the top left corner
There are zoom controls and fit to scale button, and after zooming you can move around by touch, however the two finger pinch zoom does not work.
Adding the setWebViewClient as below, enables pinch zoom but gives two more problems; there are additional -+ buttons, and zooming by pinch the original -+/fit to scale buttons become zoomed as well
screenShareWebView.settings.useWideViewPort = true
screenShareWebView.settings.loadWithOverviewMode = true
screenShareWebView.settings.setSupportZoom(true)
screenShareWebView.settings.builtInZoomControls = true
screenShareWebView.settings.displayZoomControls = true
screenShareWebView.scrollBarStyle = WebView.SCROLLBARS_INSIDE_OVERLAY
screenShareWebView.isScrollbarFadingEnabled = true
screenShareWebView.settings.javaScriptEnabled = true //needs to be true or else it doesnt work
screenShareWebView.loadUrl(it)
the pinch zoom is enabled (with the extra buttons) with
screenShareWebView.setWebViewClient(object : WebViewClient() {
override fun onPageFinished(view: WebView, url: String?) {
val javascript ="javascript:document.getElementsByName('viewport'[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');"
view.loadUrl(javascript)
}
})
So i need to start fit to scale, enable pinch zoom if possible and dont add extra buttons

Related

Camera rotation not rotating correctly on mobile

I'm making a FPS and I want the player to rotate the camera, my code works for PC, but on mobile if I'm rotating the camera and I also touching the fire button (or anywhere else with my other finger) the camera rotates to right (here where my fire button is) and I don't know if I can do something about it, or I need to cancel the release for android and IOS and publish my game only for PC
Part of my code:
if (CanProcessInput())
{
// Check if this look input is coming from the mouse
bool isGamepad = Input.GetAxis(stickInputName) != 0f;
float i = isGamepad ? Input.GetAxis(stickInputName) : Input.GetAxisRaw(mouseInputName);
// handle inverting vertical input
if (InvertYAxis)
i *= -1f;
// apply sensitivity multiplier
i *= LookSensitivity;
if (isGamepad)
{
// since mouse input is already deltaTime-dependant, only scale input with frame time if it's coming from sticks
i *= Time.deltaTime;
}
else
{
// reduce mouse input amount to be equivalent to stick movement
i *= 0.01f;
#if UNITY_WEBGL
// Mouse tends to be even more sensitive in WebGL due to mouse acceleration, so reduce it even more
i *= WebglLookSensitivityMultiplier;
#endif
}
return i;
}
Segment the touch input so you ignore values that are generated in the area of the fire button. You can do this by checking the Touch. position value:
Description
The position of the touch in screen space pixel coordinates.
Position returns the current position of a touch contact as it's dragged. If you need the original position of the touch see Touch.rawPosition.
The documentation hints at what you might be interested in, too - the original touch position. Your question body is asking about horizontal motion, but your code is referencing y values. The position coordinates are given in (width, height), so I just wanted to be clear up front that I'll use x values to answer your question about horizontal motion.
So if you know that the bottom-left corner of the screen is (0,0) and you can use Screen.width to get the width in pixels, then you could calculate the right 20% of the screen as reserved for the fire button. Anything less than that would be acceptable inputs for rotation, but the 80%-of-width pixel would be the maximum allowable input:
private int maxAllowablePixel;
void Start()
{
maxAllowablePixel = 0.8f * Screen.width;
}
and then only process the touch as a rotation if the original touch was less than that value:
if(touch.rawPosition.x < maxAllowablePixel)
{
DoRotation(touch.position);
}
and again here you are allowing the user to put their finger down in the middle of the screen, drag it over the fire button, and still rotate that much, but any touches that originate in the fire button "exclusion zone" are ignored for the purposes of doing rotations.
Also when you do the rotation, do it where the finger is now (Touch.position) and not where it started (Touch.rawPosition).
The way I always solve an issue like this is to not use the touch positions directly, but to have a "TouchReceiver" Object in the Canvas with a script that implements IDragHandler. So the class might look like this:
[RequireComponent(typeof(Image))]
public class TouchReceiver : MonoBehaviour, IDragHandler
{
public void OnDrag(PointerEventData data)
{
Vector2 delta = data.delta;
// do something with delta, like rotating the camera.
}
}
Then set up your canvas like so:
Make sure to put the "TouchReceiver" behind the fire button, that way the OnDrag event will not occur when pressing the fire button, because the fire button blocks the "TouchReceiver" object itself. The "TouchReceiver" object needs to have an Image component, otherwise it won't be able to receive any touches. Of course the image should then be made totally transparent.
With this setup is pretty easy to move the fire button around without changing anything else. This might also come in handy when adapting to different screen resolutions.

How to setSupportZoom in Kotlin

I know that there is a way to support zoom in java: webview.getSettings().setSupportZoom(true). But I've been searching for a while for this in Kotlin. And yes, I have tried using the converter try.kotlinlang.org but It gives me the same piece of code. Does somebody know how to support zoom in Kotlin?
Why not simply:
var webView: WebView = view.findViewById(R.id.webview)
webView.settings.setSupportZoom(true)
Update
As per your comments you would want to do this as well:
webView.settings.builtInZoomControls = true // enable pinch to zoom and zoom controls
webView.settings.displayZoomControls = false // hides the zoom controls so you can just pinch to zoom

PhotoView - calculate appropriate coordinates of pin-tile view depending of displayed matrix

Let's assume I have some pin view which I want to render on top of PhotoView according current scale and zoom (aka simplified TileView).
PhotoView provide method setOnMatrixChangeListener when we zoom or scroll image it will trigger with displayed matrix parameter which is represented as RectF type.
So my question is how properly calculate positioning and scale of pin view on top of PhotoView depending on current zoom and scroll?
photView.setOnMatrixChangeListener(object: OnMatrixChangedListener {
override fun onMatrixChanged(rect: RectF?) {
// calculation of new coordinates and scale here
...
pinView.x = calculatedCoordinateX;
pinView.y = calculatedCoordinateY;
pinView.scale = calculatedScale;
}
})
Any material to study how to use such matrix for such calculation, positioning and scale?
Appreciate if anyone can provide sample code how exactly to solve such problem.

AChartEngine Android - reset zoom and pan of graph?

I am building an Android Application and I am using AChartEngine to display a graph and values I obtain.
I am able to graph the values I have properly. However, once the user zooms in and pans around my graph, it becomes difficult to view the data. One option I considered is to display a "redraw graph" button where once the user clicks it, the graph would redraw itself to the original state, zoom and pan would also reset.
Here's by code thus far:
public void redrawGraph(View view){
chartView.repaint();
}
where redrawGraph is a the onClick function of my button and chartView is an object of type GraphicalView.
However, that does seem to do anything as it only repaints changes in my graph (if I added/removed series renderers, series, etc).
How can I reset the zoom and pan of graphs in AChartEngine?
My answer refers to XY/time charts. First you have to enable the external zoom feature in every renderer you use. The snippet below shows the code for accomplishing this:
yourMultipleSeriesRenderer.setExternalZoomEnabled(true);
In your method redrawGraph you then have to execute the command shown below:
public void redrawGraph(View view) {
chartView.zoomReset();
}
This works great for me. If you need any further information leave a comment.
Put this in your Multiple Series Render
multiRenderer.setZoomButtonsVisible(false);
// setting pan enablity which uses graph to move on both axis
multiRenderer.setPanEnabled(true, false);
// setting click false on graph
multiRenderer.setClickEnabled(false);
// setting zoom to false on both axis
multiRenderer.setZoomEnabled(true, false);
// setting lines to display on y axis
multiRenderer.setShowGridY(true);
// setting lines to display on x axis
multiRenderer.setShowGridX(true);
// setting legend to fit the screen size
multiRenderer.setFitLegend(true);
// setting displaying line on grid
multiRenderer.setShowGrid(true);
// setting zoom to false
multiRenderer.setZoomEnabled(false);
// setting external zoom functions to false
multiRenderer.setExternalZoomEnabled(false);

Simple ImageView zooming

I'm trying to build a screen that shows a bunch of thumbnails at the bottom along with a full size version of the photos.
The thumbnails are (indirect) children of a HorizontalScrollView and the full size pictures are added as ImageViews of Fragments in a ViewPager.
What is the simplest way of zooming in on an ImageView? Zooming will use a fixed factor.
I've been unable to locate the Android Gallery source code, which might help me.
public boolean onDoubleTap(MotionEvent event) {
Log.e("test", "on double tap; event: "+ event);
Matrix m = new Matrix();
m.setScale(1.25f, 1.25f);
clickedImageView.setImageMatrix(m);
clickedImageView.invalidate();
clickedImageView.refreshDrawableState();
Log.e("test", "set image matrix after double tap event");
return true; // indicate event was handled
}
That code looks like it should work, just make sure you set
android:scaleType="matrix"
in the xml for the ImageView, or
clickedImageView.setScaleType(ImageView.ScaleType.MATRIX);
if you want to do it in the code. Otherwise the matrix you have set will not be applied.

Categories

Resources