I have 2 frames which i would like to switch between when rotating a mobile device. These two frames have similar content except that the content in frame one consists of text and graphics and that in frame two consists of audio and graphics.
The idea is to allow the user to read the text when the device is in the upright position and when they rotate the device, they get the similar content but with audio.
Any suggestions will be appreciated.
Have you looked into the StageOrientationEvent? You could catch Portrait/Landscape orientation there and switch frames based on what orientation, no?
Or continuously check the Stage Width/Height in onEnterFrame update and if height is bigger than width = Portrait, Else Landscape.
Related
I'm trying to create a website that depending on which div is in view will play a different audio file.
The only thing closely related that I could find was different audio playing depending on specific height locations of the website, i.e. between start height = 1000px and end height = 1400px play X music. Example here: http://home.jejaju.com/play/smoothFade/tracks
The only issue with this approach is that my website is responsive, so depending if you're on mobile or desktop will have different heights.
Any ideas or examples on how to approach this?
Have you looked into using the intersectionObserver? You can choose to play the audio based on the ratio of the div being within the viewport.
I have a monitor of size 800 x 480. I would like to render an HTML5 Canvas that fills the entire monitor in a full screen browser setting (no toolbar, dock, taskbar, browser window, etc) such that one pixel in canvas coordinate space corresponds exactly to one pixel in monitor coordinate space.
For example, I would like to ensure that canvas(0,0) corresponds physically to the top left pixel on the monitor.
Just making the canvas fill the width and height of the webpage doesn't make sense because the viewport isn't the same size as the entire monitor.
Would appreciate some advice on how to go about solving this.
Thanks!
I've looked at a number of similar questions, and tried implementing those solutions, but I'm still having the same problem, I believe primarily because I have an additional complication (and the fact that my understanding of image manipulation is limited).
Here's the situation: in a web app I have a webcam picture capture (using getUserMedia). The <video> element which displays the feed, as well as the <canvas> are sized to 640 pixel width as default. This works fine on desktop browsers.
On devices with screen width under 700px, the site responsively resizes everything, including the picture capture dialog, which resizes to 95% of the screen width, thus the <video> element display the camera feed is less than 640px in width most of the time (those are the times that matter here). The video feed displays fine, you can see the entire camera field. But every you take a picture, it gets displayed on the canvas (which resizes the same as the video feed) clipped, depending on the size of the screen. That is to say, the canvas displays as much of the original image, which remains 640px wide, as it can.
I don't want to resize the actual image; I'd like the uploaded data at the end of the day to be a 640px image regardless of the screen width. I just want the user to be able to see the whole thing before s/he saves it.
I've already tried playing with width attribute (element attribute, not CSS) on the canvas, but that did nothing, and changing the width of the video display will shrink the actual image, so that's not what I want.
I also played with the drawImage method which should resizing, but I couldn't quite get what I wanted. This is the line I thought should work, but still gives me a clipped image:
if($(window).width()<701){
var ratio = videoHeight/videoWidth;
var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}
Update
The following code will show the entire picture on the canvas, but shrinks it, and I get a much smaller image file, depending on the screen width it was taken on:
context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);
Many thanks!
I've been having a lot of issues with displaying images on mobile devices. It has something to do with pixel ratios and scaling.
The idea is that I want to prevent billiniar filtering on my images. On desktop this is easy, just display the image at 1x, and it looks perfect.
There are some issues with desktop, such as when you try to scale up using the browser it filters the image, but you can at least upload a scaled version and it will look perfect.
Here is my test page: http://stage.samkeddy.com/test/
You can see that all but the second one are perfectly crisp.
But here is what it looks like on my phone: http://imgur.com/a/4rMKj
It's not even close to the right size. The image should be 70 pixels wide, but it comes out to either 53 or 63 pixels wide (one is page loaded, second is after double tapping).
I want my image to line up exactly with the pixels on my phone, is there a way to even achieve this?
Actually you should forget pixel in mobile device, like android, the screen density is barely same, a picture looks different at different density screen.
I suggest using some responsive design, use min-width parameter for a img tag, and the image from server side should big enough to prevent blur.
There are also some image service which provide scale function, you can add ?w=100&h=100 to thre image url for compressing a big picture to a small one.
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.