Programmatically add event in iPhone/Android Calendar with PhoneGap/jQuery Mobile? - javascript

How can I create a calendar event from a JavaScript / jQuery Mobile / PhoneGap app in iOS/Android?
Are there any, e.g., PhoneGap plugins? Didn't see any in the official repository.
For iOS, the Event Kit framework (iOS 4.0+) seems to be able to add an event.

Per the comments below, it is now possible to create an iCal file for iOS and a vcs file for Android. It will require browser/device sniffing, or give the user the choice, but it should at least be possible.

I realize it's old question but there is plugin for this now. It has its cons, but works. At the moment of writing it supports the following functionality:
iOS supports: create (silently), update (silently) and delete (silently) event
Android >= 4: create (interactively and silently), update (not supported), delete (silently) event
Android < 4: create (interactively), update (not supported), delete (not supported) event
Here follows code example:
var startDate = new Date(2014,2,15,18,30,0,0,0);
var endDate = new Date(2014,2,15,19,30,0,0,0);
var title = "My nice event";
var newTitle = "My new nice event";
var location = "Home";
var notes = "Some notes about this event.";
var success = function(message) {
alert("Success: " + JSON.stringify(message));
};
var error = function(message) {
alert("Error: " + message);
};
window.plugins.calendar.createEvent(title,location,notes,startDate,endDate,success,error);
window.plugins.calendar.modifyEvent(title,location,notes,startDate,endDate,newTitle,location,notes,startDate,endDate,success,error);
window.plugins.calendar.deleteEvent(newTitle,location,notes,startDate,endDate,success,error);

Currently the PhoneGap development roadmap does not include calendar support. However, there are many requests for it. See this post called "Calendar plugin following W3C calendar API" which points to the PhoneGap-Calendar-Plugin project which includes some initial calendar support for Android.

Adding an event to the iOS calendar is very simple with the latest API.
However, you need to create your own plugin in order to do it.
since this is platform specific, come time will pass before there is an official PhoneGap plugin.

I found plugins for Android and iOS but they do not have the same JavaScript API so you have to write different code for both systems or add another layer. Also they are not up to date and will need fixes to run with Cordova 2.2.0. To make things worse documentation is kind of short:
Android
Dcheng's Android Plugin is able to create, remove and search calender events but is totally outdated and will not work as it is. With Android 4.0 there is a Calendar Provider that makes things easier but still I did not find a good plugin. jbajor can only add events and twistandshout only search events.
iOS
Felixactv8's iOS Plugin is able to create, remove and search calender events. Notice that in iOS there is no event id, so searching your events will be fun. The author explains how to add the two needed frameworks in xcode:
the iphone calendar uses the 2 frameworks, EventKit.framework and
EventKitUI.framework.
if you click on the xcode icon, you should see the project icon and
the target icon. click on the target icon, then click build phases.
Click the dropdown for "Link Binary with libraries. Click the plus
sign at the bottom of the window, then search for both frameworks. Add
both of those frameworks, rebuild the project and run it.

Related

How to Disable Text to speech Using Javascript?

I have created a Samsung smart-tv app using javascript and now I want to disable the TTS in this app but don't know how I can do this please help.
I have tried using window.speechSynthesis but it is not working don't know why.
currently what i have done is when window load i call an init() function
function init(){
if ('speechSynthesis' in window) {
var synthesis = window.speechSynthesis;
synthesis.cancel();
} else {
console.log('Text-to-speech not supported.');
}
}
but it does not work and so finally i want to disable the feature of Text to speech from my application
You can't disable that feature. The SpeechSynthesis api is if you want to add extra functionality, not for disabling the native feature (which can only be disabled by users of your app from the TV/browser settings).
As written here: https://developer.samsung.com/smarttv/develop/legacy-platform-library/tv-functionality/accessibility.html
If user turns on Accessibility option for TTS in menu, TTS will read contents of HTML elements automatically.
You can try 2 things (which might not work):
Run every 1s (or more often) speechSynthesis.cancel() in a setInterval (I'm not sure this will stop the native TTS of the TV though).
setInterval(() => window.speechSynthesis.cancel(), 1000)
Replace window.speechSynthesis.speak with an empty function at the beginning of your app (considering Samsung TV uses this for speaking).
window.speechSynthesis.speak = () => {}
Please have a good reason to do so, disabling voice over is never a good choice. You are basically removing access to people with visual impairments and even if you did a bad job at making your app accessible that will always be better than just disabling it.
Having said that, there's no way to disable voice over using javascript but you can disable it by adding the following tag inside <widget> in your config.xml file:
<tizen:metadata key="http://samsung.com/tv/metadata/use.voiceguide" value="false" />

Cordova disable shrink view on input focus

I'm creating an app in Cordova/Phonegap (v6.5.0).
Platforms installed:
- IOS (problem is present)
- Android (problem is present)
- Browser (problem is not present)
Now I have a known problem, but no adequate fix for it.
When I focus on a field on my page, the whole page tries to fit on the view the user has (between the top bar and the virtual keyboard). This makes my fields overlapping each other and making the app ugly.
What I would like to have is that my page stays the same, so not adapting to the keyboard.
Do any of you have a solution for this? I have this on all my pages.
Thanks in advance
EDIT:
I found the answer by myself on the following link: Soft-keyboard makes the cordova-view shrink
The cross platform (iOS and Android) solution to this problem is to install the following plugin:
cordova plugin add ionic-plugin-keyboard --save
And add the following code to your deviceready handler:
document.addEventListener('deviceready', function(){
if (window.cordova && cordova.plugins && cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.disableScroll(true);
}
});
Note: Ignore the fact it's an iconic plugin, it works fine with regular cordova projects

Can I use Javascript to get the compass heading for iOS and Android?

Can I use Javascript in a cross-platform way to get the compass heading in iOS and Android (with Chrome), without using something like PhoneGap? I know iOS has DeviceOrientationEvent, but I can't find any equivalent on Chrome for Android.
As a primer you should review this previous related StackOverflow answer and be familiar with the general practical considerations for using DeviceOrientation Events in web applications.
The simple solution I provided in my previous related StackOverflow answer only applies to browsers that implement absolute deviceorientation events (i.e. browsers where the deviceorientation alpha property is compass-oriented). That means the solution provided there currently only works in Android browsers and not iOS-based browsers or any other browser that does not provide absolute-based deviceorientation event data.
To reliably obtain the current compass heading across both Android and iOS browsers today you need to handle both absolute and non-absolute implementations that provide the additional webkitCompassHeading property and make sure to account for any current screen orientation changes as part of that. AFAIK the only library that currently does this is Full Tilt JS (disclaimer: I am the author of this library).
The following code will give you the same correct compass heading across both iOS and Android browsers, taking account of the differences in device orientation implementations and applying any necessary runtime screen orientation transforms too:
<!-- Include the Full Tilt JS library from https://github.com/richtr/Full-Tilt-JS -->
<script src="fulltilt-min.js"></script>
<script>
// Obtain a new *world-oriented* Full Tilt JS DeviceOrientation Promise
var promise = FULLTILT.getDeviceOrientation({ 'type': 'world' });
// Wait for Promise result
promise.then(function(deviceOrientation) { // Device Orientation Events are supported
// Register a callback to run every time a new
// deviceorientation event is fired by the browser.
deviceOrientation.listen(function() {
// Get the current *screen-adjusted* device orientation angles
var currentOrientation = deviceOrientation.getScreenAdjustedEuler();
// Calculate the current compass heading that the user is 'looking at' (in degrees)
var compassHeading = 360 - currentOrientation.alpha;
// Do something with `compassHeading` here...
});
}).catch(function(errorMessage) { // Device Orientation Events are not supported
console.log(errorMessage);
// Implement some fallback controls here...
});
</script>
Here is a demo that demonstrates this technique to obtain the compass heading the user is facing. It should work well on both iOS and Android browsers.
The implementation of the code in that demo is as shown above and can be viewed on Github at ./scripts/compass.js:L268-L272.
Yes you can! Unfortunately the alpha doesn't work on iPhones/iPads. With Mobile Safari, alpha is based on the direction the device was pointing when device orientation was first requested. The included webkit offers you the compass heading. To make it work for all other browsers (which all supports alpha as compassheading) you can use the following Javascript code:
if (window.DeviceOrientationEvent) {
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
var compassdir;
if(event.webkitCompassHeading) {
// Apple works only with this, alpha doesn't work
compassdir = event.webkitCompassHeading;
}
else compassdir = event.alpha;
});
}
Android also supports Webkit, so would also use event.webkitCompassHeading, but that's OK.
BTW: "oncompassneedscalibration" is also not supported for iPhones and iPads.
I believe you can use the "heading" field of the location object, from navigator.geolocation, please see here:
https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation
I know no other way.
Hope it helps,
A.

Programmatically "open in Adobe Reader" from JavaScript

The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.

windows 8 metro style app - find mouse or touch based execution

I am creating one app for Windows 8 Metro style app using HTML 5 and JavaScript. I require to find at launch of the app whether it will be touch base process or mouse based process (smartphone or desktop computer).
I tried following things.
1) As per following,
http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.input.pointerdevicetype.aspx
but we are not sure what to pass in as “pdt” in function getPointerDeviceType(pdt)
Tried various things but it return me “undefined” only.
2) We tried Modernizr js framework to find for following code
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
But when we insert the latest js code of “Modernizr”, it gives us security error for appendchild command. Something like
“0x800c001c - JavaScript runtime error: Unable to add dynamic content.”
Can anyone please tell how we can achieve so that based on condition, we can execute code for touch based and mouse based execution of app.
Just got it solved. Can come useful for others.
I Put following code on which i need to find which css i need to apply.
helloButton.addEventListener("MSPointerDown", buttonClickHandler, false);
Here is the function:
function buttonClickHandler(eventInfo) {
if (eventInfo.pointerType == eventInfo.MSPOINTER_TYPE_TOUCH) {
// Do something for touch input only
console.log('Touch');
} else {
// Do something for non-touch input
console.log('Mouse');
}
}
You can set your code as per condition.
Your assumption that the app will only have one input type for the duration of execution is a bad one -- I change between mouse, keyboard, and touch on my devices all the time.
That stated:
If you are dynamically adding Modernizr, just include the Modernizer as a script tag in your HTML rather than adding dynamically
You need to use Windows.Devices.Input.PointerDevice.GetPointerDevices(); to get the devices, and then see which ones support touch using the function in the link you provided. (Details here)
You can detect which type of device a specific input event was for (e.g. onmspointerup et al), by looking at the pointerType property on the event object.

Categories

Resources