I'm trying to create a spot the difference game that will work on desktop and mobile and am having problems finding the coordinates on the image the player touched when using a mobile.
The game is fluid on the mobile, so the images automatically resize to fill the available screen.
I'm using this code to detect mouse position:
$(document).on("click",".image-wrapper",function(e){
var coordX = e.pageX - $(this).offset().left;
var coordY = e.pageY - $(this).offset().top;
alert (coordX + ', ' + coordY);
}
The code works great on desktop, but when I try it on mobile, it gives different results.
The image dimensions are 368px x 550px.
If I touch the image at the top, the coordinates I see are the same as the desktop.
However, if I touch half way down the image, the vertical coordinate shows about 60 pixels more than the desktop and if I touch at the bottom of the image, the vertical coordinate shows about 120 pixels more than the desktop.
Is there a way to get reliable coordinates on all devices?
My spot the difference game will be pretty useless otherwise :(
Related
The problem is React RND stores the drop area position in pixels like transform: translate(18px, 18px); so If I test this in different screen resolutions with window resize then this is not working as expected and translate is not calculating again with respect to window size. It's going out of the view if I use small resolution.
Any possible way to fix this ?
I am looking to take photos on mobile that can cover the whole screen, which is done in the Snapchat app. Images taken by Android and iPhone only cover a part in the center of the screen (probably intented so that that menu bars could cover the rest).
If you take an image in snapchat - and export it to your camera roll, you will see the image remains enlarged - covering the whole screen. That is how I would like my photos being taken. (Right now they become deformed as the images are too small - as I try to display them using the whole screen)
I am using Gluon and the PicturesService: http://docs.gluonhq.com/charm/javadoc/4.1.0-SNAPSHOT/index.html?com/gluonhq/charm/down/plugins/PicturesService.html
However I assume you need to adjust things in deeper layers to acheive this. Could someone point me in the right direction?
The camera aspect ratio and the screen aspect ratio on iOS differ. That is why you cannot display the image fully and at the same time avoid deformation. However in video it matches the screen aspect ratio. So I thought Snapchat somehow took screenshots, or one single frame out of the camera in video mode.
However, looking at my Android phone - the camera on video mode did not display on the whole screen (no matching aspect ratio). I was suprised. I downloaded snapchat on it and found the snaps still covered the whole screen - and I was even more suprised.
Then I started realizing the snap was cut, at the sides. So what they do is to simply cut the original image until it matches the aspect ratio of the display.
The following worked for me to cut Android images:
public Image cutImageFit(Scene scene, Image image){
PixelReader pixelReader = image.getPixelReader();
double sceneRatio = scene.getWidth() / scene.getHeight();
double width = image.getWidth();
double height = image.getHeight();
double ratio = width / height;
// System.out.println("Scene is " + scene.getWidth() + " and " + scene.getHeight());
// System.out.println("sceneRatio " + sceneRatio);
// System.out.println("ratio is " + ratio);
if(sceneRatio > 1){
double cutTo = width / sceneRatio;
height = cutTo;
}
else if(sceneRatio < 1){
double cutTo = height * sceneRatio;
width = cutTo;
}
else{
// Square scene...
}
Double d = width;
int w = d.intValue();
d = height;
int h = d.intValue();
System.out.println("new width " + w + " and height " + h + " for the image");
WritableImage writableImage = new WritableImage(pixelReader, 0, 0, w, h);
return writableImage;
}
... You can could also edit the method so that it cuts both sides, instead of only one. This was helpful: Effective image cropping in JavaFX
However, when it comes to iOS images I am having problems. The image has to be rotated. If it was taken with iphone vertically that is. I would be glad if someone could help out with that!
This latter problem I could solve by rotating the image with the imageView and then taking a javafx snapshot, to pas as image parameter with the method instead of the iOS original image. That way the local cordinate system also stays "in sync" with the rest of the GUI cordinalts in ate system after rotating. So in effect a relabeling of the x and y - axises is done.
Edit: The android defualt camera actually contained a "Fullscreen" setting of which I was not aware of. So that setting simply have to be selected. It results in a white area however of which I think comes from that the app cannot display onto the statusbar area. Everything looks fine in the other default photo viewer apps are able to do (displaying image beneath status bar). So either the image can be cropped, using this method above - or a FullscreenService can be create to display the taken image, using a independant seperate Android layer, suggested by José in the comments to the question.
When it comes to iOS it might be possible to use camera third party apps, that does this - or edit the IOSPicturesService of which have native ObjectiveC code connected to it.
I need your help with ThreeJS, panorama view and Quaternions.
For mobile device orientation panorama view, in a page like this one:
https://richtr.github.io/Full-Tilt/examples/vr_test.html
how would you go about locking the view when rotating around the Z axis (between the use and the middle of the screen), like the way this video does:
https://www.youtube.com/watch?list=PLbsGxdAPhjv_tgCNWGaGvSnlIMZNkmnrM&t=10&v=ClAuhgFQpLo
Please watch on mobile.
Thanks!
Sa'ar
I've been trying numerous viewport combinations, but can't seem to find the right one.
I have a mobile site that is built to be 320 pixels wide. I'd like these 320 pixels to stretch the full width of the screen in both portrait and landscape mode, regardless of which orientation the screen starts out with, or whether the viewer rotates the device.
Thanks
What is the point of using fixed pixel values when you want the site to stretch?
Just use
width: 100%
Black screen on top is seen on launch. It seems the view goes down. It is a project developed in xcode 4.4 and after upgrading to xcode 4.5 shows black screen on top moving the total view downwards. The status bar though remains in the right position. Is it a iphone simulator bug?
That Black screen appears when is application launches is called as Splash screen.
When user run the application, it will show the splashScreen after some time it will automatically remove from the Screen.
There are different sizes and naming conventions for iPhone and iPad.
On the iPhone one Default.png file was adequate, with the iPad one needs to anticipate the device being started in any orientation, including upside down.
iPad Launch Image Orientations
To deal with various orientation options, a new naming convention has been created for iPad launch images. The screen size of the iPad is 768×1024, notice in the dimensions that follow the height takes into account a 20 pixel status bar.
Filename, Dimensions
Default-Portrait.png * (768w x 1004h)
Default-PortraitUpsideDown.png (768w x 1004h)
Default-Landscape.png ** (1024w x 748h)
Default-LandscapeLeft.png (1024w x 748h)
Default-LandscapeRight.png (1024w x 748h)
Default.png (Not recommended)
Actually this happened because of hiding the navigation bar after
[self.window makeKeyAndVisible];
[self.navigationController.navigationBar setHidden:YES];
So solution is
[self.navigationController.navigationBar setHidden:YES];
[self.window makeKeyAndVisible];
I think this is a bug in ios.
Hope this helps someone..