Know if it's possible to access the iPhone compass in Safari using JavaScript? I see how the GPS can be accessed, but I can't figure out the compass.
On iOS, you can retrieve the compass value like this.
window.addEventListener('deviceorientation', function(e) {
console.log( e.webkitCompassHeading );
}, false);
For more informations, read the Apple DeviceOrientationEvent documentation.
Hope this helps.
You cannot access that information via javascript, unless you're using something like iPhoneGap
At the time this was true, in iOS 5 you can use the compass heading in JS. https://developer.apple.com/documentation/webkitjs/deviceorientationevent/1804777-webkitcompassheading
For Android it works auto, for iOS it needs to be clicked to start it.
Here's a part of code you can use for that
startBtn.addEventListener("click", startCompass);
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
} else {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function handler(e) {
const degree = e.webkitCompassHeading || Math.abs(e.alpha - 360);
}
Full tutorial is here, try demo also
https://dev.to/orkhanjafarovr/real-compass-on-mobile-browsers-with-javascript-3emi
I advise you to use LeafletJS with this plugin
https://github.com/stefanocudini/leaflet-compass
very simple to use with events and methods.
You can try a demo here:
https://opengeo.tech/maps/leaflet-compass/
Related
I have been trying to upload images to my Medium-editor using the Medium-editor-insert-plugin with Laravel5.5 for days without success.
To me it seems like the image is to passing to the sever and I don't know why.
I am using the latest release version of medium-editor-insert-plugin.
here is my javascript code to initiate the medium-insert-plugin:
$(function () {
$('.body-editable').mediumInsert({
editor: bodyEditor,
addons: {
images: {
fileUploadOptions: {
url: 'upload',
}
}
}
});
});
and the route to send the request to the back-end look like this.
// upload image route for MediumInsert plugin
Route::post('upload', 'PostsController#upload');
and inside my controller i am return all the request data like this:
public function upload(Request $request)
{
return array('data:'=> $request->all());
$upload_handler = new UploadHandler(array(
//'upload_dir' => public_path().'uploads/',
'upload_dir' => 'uploads/',
'upload_url' => 'posts/upload/',
));
}
but after use the plugin to insert an image to the editor i am get this error
But in my network response i am getting this.
{"data:":{"files":[{}]}}
Please can someone tell me what to do? have been trying to edited the plugin itself but no way till now.
You should probably return only the data object property.
{"files":[{}]}
How can I detect when Mapbox or Leaflet enters or exits fullscreen mode?
I found this answer where someone said this:
Documentation says:
map.on('fullscreenchange', function () {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
If doesnt work, use this instead:
map.on('enterFullscreen', function(){
});
map.on('exitFullscreen', function(){
});
I tried that, as well as a few variations of the event type parameter. No dice.
Also, the documentation doesn't mention an event for this.
Note that I am using Mapbox GL JS.
I know this is a late response but to anyone in the future this is how I approached it (for mapbox GL JS (without leaflet).
map.on("resize", () => {
if (document.fullscreenElement) // do something
});
You can give the map wrapper div a name and exclusively also check if the map is what triggered the fullscreen event
map.on("resize", () => {
if (document.fullscreenElement?.attributes.name.value === "mapWrapper") // do something
});
And if you are using React you can use a state to hold this information.
const [isFullScreen, setIsFullScreen] = useState();
...
map.on("resize", () => {
setIsFullScreen(
document.fullscreenElement?.attributes.name.value === "mapWrapper"
);
});
...
if (isFullScreen) //do something
This is actually really simple. You don't need anything from Leaflet or Mapbox. Just use an event listener on the document object.
let fullScreenChange;
if ('onfullscreenchange' in window.document) {
fullScreenChange = 'fullscreenchange';
} else if ('onmozfullscreenchange' in window.document) {
fullScreenChange = 'mozfullscreenchange';
} else if ('onwebkitfullscreenchange' in window.document) {
fullScreenChange = 'webkitfullscreenchange';
} else if ('onmsfullscreenchange' in window.document) {
fullScreenChange = 'MSFullscreenChange';
}
function onFullscreenChange() {
// Your stuff.
}
window.document.addEventListener(fullScreenChange, onFullscreenChange);
I'm working on an ionic mobile application where I needed to read videos on streaming by providing the URI of the video online. So I used cordova-plugin-media-streamingplugin offered by cordova.
My problem is that: the window reading the video closes automatically after the video finishes, the user won't be able to play the video again in this window.
In the official documentation of the plugin [that i found here], there is an attribute called shouldAutoClosethat should be set to false to avoid that problem. But this didn't work for me.
Here is the code I used to play a video on streaming :
startVideo(item : Multimediasendtrust) {
let options = {
successCallback: () => { console.log('Finished Video') },
errorCallback: (e) => { console.log('Error: ', e) },
orientation: 'portrait',
controls: true,
shouldAutoClose: false
};
console.log('those are option ',options );
console.log('the link of the video ', item.url_media);
this.streamingMedia.playVideo(item.url_media, options); }
Can anyone help please. Thanks in advance.
I trying to learn SmartFace App Development Platform. I added a SliderDrawer in Page then after I added codes as follows. But this codes not working in OnShow() event. How can I do this? Maybe I can do with write a lot of code. But I want to do without writing a lot of code.
function Page1_Self_OnShow() {
Pages.Page1.SliderDrawer1.show();
}
This is a known issue for Android, it will be fixed.But you can solve the problem until the bug is fixed as follows:
function Page1_Self_OnShow() {
var timeoutID = setTimeout(function () {
setHello();
}, 200);
function setHello() {
Pages.Page1.SliderDrawer1.show();
}
function cancelHello() {
clearTimeout(timeoutID);
}
}
When I use this method in chrome 38,it output:
Unchecked runtime.lastError while running sockets.tcp.secure: net::ERR_INVALID_ARGUMENT
at Object.callback (chrome-extension://dljefdleijndedodoomhhlajcjddenpf/main.js:66:32)
This is my code:
chrome.sockets.tcp.create({}, function (createInfo) {
var socketId = createInfo.socketId;
chrome.sockets.tcp.connect(socketId, 'www.alipay.com', 443, function (connectResult) {
if (connectResult !== 0) {
return;
}
chrome.sockets.tcp.secure(socketId,{tlsVersion:{min:"ssl3",max:"tls1.2"}},function(secureResult) {
console.log("secureResult",secureResult);
});
});
});
You might want to follow https://code.google.com/p/chromium/issues/detail?id=403076 ("Unable to use new chrome.sockets.tcp.secure API due to setPause not taking immediate effect"), which sounds similar to your issue. If it is, then please star the bug and wait for a resolution.