device-orientation | React Native hook for Device Orientation | Frontend Framework library
kandi X-RAY | device-orientation Summary
kandi X-RAY | device-orientation Summary
React Native hook for Device Orientation
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of device-orientation
device-orientation Key Features
device-orientation Examples and Code Snippets
Community Discussions
Trending Discussions on device-orientation
QUESTION
I have posted a similar question here UIView Position After Device Orientation
I am designing an app with a single ViewController and a subview of the main view. This subview is a map. Initially the center of it is equal to the center of the main view (and equal to center of the device). The position of this subview can change using a gesture, so it does not have any layout constraints. When the orientation of the device changes, the default behaviour is that the center of the subview is moved in a way that its horizontal and vertical distance from the upper left corner of the device, remain unchanged. I am trying to change this so that the distances to remain unchanged would be the horizontal and vertical distance between the subview's center and the main view's center (which, after the orientation, remains equal to the center of the device). I have tried the following approaches:
First approach (It works fine for iphone, but not for ipad, since it has regular trait collections for vertical and horizontal class for both orientations.)
...ANSWER
Answered 2021-Jan-26 at 13:52For positioning your subviews try to use viewWillLayoutSubviews and viewDidLayoutSubviews e.g.:
QUESTION
I am trying to disable the drag feature of A-frame so that if a object is in front of your screen the user can't just drag on the screen and remove it from your front to other place without even moving. Here is what i have tried with the camera, but still the drag is not disabled:
...ANSWER
Answered 2020-Jul-31 at 06:50According to the documentation, you can set the look-controls "touchEnabled" property to false, it should solve your issue.
https://aframe.io/docs/1.0.0/components/look-controls.html
It should do with something like this
QUESTION
I am trying to use the look-at feature of Ar.js dynamically through js. But for some reason, the 3d-object is not looking out of the screen. Here is my code:
HTML
...ANSWER
Answered 2020-Jul-20 at 16:33You have to call the lookAt method on the object3D of your entity. Something like this :
QUESTION
I have a large Ionic 4 Cordova project that was working fine and all, no new plugins installed in the past 3+ months.
It seems to happen almost every time Google decides to update Firebase that breaking changes occur and everything is messed up (at least twice a year).
This just happened, one moment I was building the project and after 5 minutes, I did another build with nothing changed other than some Typescript code and everything was broken (see part of the output below). When I looked at the build output, it seems clear that it's another Firebase issue out of nowhere (April 23rd update), but this one seems to break a lot of things, not just Firebase plugin (such as D8: Type libcore.io.Memory was not found).
What can be done about this? It no longer works with or without Firebase plugin. I've tried reinstalling platform and plugins, removing Firebase plugin (then it builds with warnings but crashes when running on Android device).
Here is the cordova build output:
...ANSWER
Answered 2020-Apr-26 at 21:36it seems firebase.core not needed anymore, and you need to add implementation 'com.google.firebase:firebase-messaging:20.1.6'
as you'r missing it
The Firebase Android library firebase-core is no longer needed. This SDK included the Firebase SDK for Google Analytics.
Now, to use Analytics or any Firebase product that recommends the use of Analytics (see table below), you need to explicitly add the Analytics dependency: com.google.firebase:firebase-analytics:17.4.0.
QUESTION
In JavaScript we can get a device alpha, beta and gamma angles.
- alpha: rotation around the z-axis [0, 360]
- beta: rotation around the x-axis [90, -90]
- gamma: rotation around the y-axis [180, -180]
ANSWER
Answered 2020-Apr-21 at 08:04var heading;
window.addEventListener('deviceorientation', handleOrientation, false);
const handleOrientation = (event) => {
if(event.webkitCompassHeading) {
// some devices don't understand "alpha" (especially IOS devices)
heading = event.webkitCompassHeading;
}
else{
heading = compassHeading(event.alpha, event.beta, event.gamma);
}
};
const compassHeading = (alpha, beta, gamma) => {
// Convert degrees to radians
const alphaRad = alpha * (Math.PI / 180);
const betaRad = beta * (Math.PI / 180);
const gammaRad = gamma * (Math.PI / 180);
// Calculate equation components
const cA = Math.cos(alphaRad);
const sA = Math.sin(alphaRad);
const cB = Math.cos(betaRad);
const sB = Math.sin(betaRad);
const cG = Math.cos(gammaRad);
const sG = Math.sin(gammaRad);
// Calculate A, B, C rotation components
const rA = - cA * sG - sA * sB * cG;
const rB = - sA * sG + cA * sB * cG;
const rC = - cB * cG;
// Calculate compass heading
let compassHeading = Math.atan(rA / rB);
// Convert from half unit circle to whole unit circle
if(rB < 0) {
compassHeading += Math.PI;
}else if(rA < 0) {
compassHeading += 2 * Math.PI;
}
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
return compassHeading;
};
QUESTION
I tried using the Ionic Device Orientation in an ionic project in order to find the heading direction of the device like the blue thing you have in Google Maps to show which direction you're heading to on a map. My final objective is to make a compass integrated in an ionic app.
Here is my function.
...ANSWER
Answered 2019-Feb-02 at 09:16You seem to have installed device-orientation plugin (Version >= 5.0.0) which is supported for ionic 4. Since you are using ionic 3 uninstall the plugin and install 4.20.0 version.
QUESTION
Aframe version: 1.0.3
Platform: android
Browser: chrome and firefox
The cursor (a-cursor tag) on mobile has gone when I enter VR mode.
Is there a way how can I enable/add the cursor when its on VR mode? or
Why the cursor has gone when I enter the VR mode.
...ANSWER
Answered 2020-Jan-16 at 19:57It's a known bug that has been fixed and will ship in the upcoming 1.0.4 version. You can use master builds meanwhile:
QUESTION
While working with the Device Orientation API I noticed something strange.
The following online demo works perfectly (except for "compassneedscalibration"): https://www.audero.it/demo/device-orientation-api-demo.html
But when I clone the Soucecode locally and provide the Web page via a local Web server* the API seems to not be available anymore. Although using the same browser tab. Also no Messages, warnings or errors appear in the JavaScript console.
The Web page states:
deviceorientation event not supported
devicemotion event not supported
compassneedscalibration event not supported
Am I doing something wrong? Or is this an intended behavior or a bug? I will need to provide my web app by a local web server.
I am using "Chrome 79.0.3945.93" on "Android 7.1.1;VNS-L21 Build/NMF26V"
*) python3 -m http.server
ANSWER
Answered 2020-Jan-08 at 10:36I found out that you need to provide the wep page via an Encrypted HTTPS connection on order to access the Device Orientation API and also some mediaDevices.
A simple way of providing HTTPS pages during development (not production) is this simple python webserver:
QUESTION
I am trying to deploy a mobile webapp using PhoneGap build. The webapp is ran through Docker, using HTML, CSS, and JS on the front end, connected to a Python, Apache, and SQL servers on the back end, running through docker.
This works fine as a website, and displays correctly on a mobile web browser. However, when I try to package the app using phonegap build, it displays only the index.html page.
I believe this may be an issue with the model view controller set up I am using for my webapp (so that multiple pages load inside the 1 page)
the pages are gotten as follows:
...ANSWER
Answered 2019-Sep-09 at 19:36The file is compiled to a directory that represents the folder where your config.xml file is contained.
You can access this folder using:
QUESTION
I've written a JS SDK that listens to mobile device rotation, providing 3 inputs:
α : An angle can range between 0 and 360 degrees
β : An Angle between -180 and 180 degrees
γ : An Angle between -90 to 90 degrees
Documentation for device rotation
I have tried using Euler Angles to determine the device orientation but encountered the gimbal lock effect, that made calculation explode when the device was pointing up. That lead me to use Quaternion, that does not suffer from the gimbal lock effect.
I've found this js library that converts α,β and γ to a Quaternion, so for the following values:
α : 81.7324
β : 74.8036
γ : -84.3221
I get this Quaternion for ZXY order:
w: 0.7120695154301472
x: 0.6893688637611577
y: -0.10864439143062626
z: 0.07696733776346154
Code:
...ANSWER
Answered 2019-Jul-04 at 11:41Given that you've already managed to convert the Euler angles into a unit quaternion, here's a simple way to determine the orientation of the device:
Take a world-space vector pointing straight up (i.e. along the +z axis) and use the quaternion (or its conjugate) to rotate it into device coordinates. (Note that you could also do this using the Euler angles directly, or using a rotation matrix, or using any other representation of the device rotation that you can apply to transform a vector.)
Take the transformed vector, and find the component with the largest absolute value. This will tell you which axis of your device is pointing closest to vertical, and the sign of the component value tells you whether it's pointing up or down.
In particular:
- if the device x axis is the most vertical, the device is in a landscape orientation;
- if the device y axis is the most vertical, the device is in a portrait orientation;
- if the device z axis is the most vertical, the device has the screen pointing up or down.
Here's a simple JS demo that should work at least on Chrome — or it would, except that the device orientation API doesn't seem to work in Stack Snippets at all. :( For a live demo, try this CodePen instead.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install device-orientation
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
