I am working on a phonegap app for IPhone using cordova. I am trying to implement a scenario where I need to open the IPhone native calendar when the user clicks on a particular button to add an event. I have followed this link to accomplish my task, i.e, Calendar Plugin for IPhone.
I did the following steps as they specified:
Added CalendarPlugin.m,CalendarPlugin.h in the Plugins folder
Added calendar.js file and add refrence in my .html file.
Added dependencies EventKit framework and the EventKitUI framework
Added the plugin with the key/pair value of calendarPlugin in
cordova.plist file.
And my HTML file would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>My Calendar Plugin</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="assets/Scripts/jquery-1.9.1.min.js"></script>
<script src="assets/Scripts/cordova-2.3.0.js"></script>
<script type="text/javascript" src="assets/Scripts/calendar.js"></script>
<script type="text/javascript" src="assets/Scripts/index.js"></script>
<script type="text/javascript">
function addEvent()
{
var cal = new calendarPlugin();
console.log("creating event");
var title= "My Sample Appt";
var location = "Los Angeles";
var notes = "This is a sample note";
var startDate = "2012-04-16 09:30:00";
var endDate = "2012-04-16 12:30:00";
var errCall = function(theerror) {
console.log("Error occurred - " + theerror);
}
var succCall = function(themessage) {
console.log("Success - " + themessage);
}
cal.createEvent(title,location,notes,startDate,endDate, succCall, errCall);
return false;
}
</script>
</head>
<body>
<input type="button" id="btnAddEvent" onclick="return addEvent();"/>
</body>
</html>
But I am unable to open the native calendar and add an event at a specified date. I have reviewed several StackOverflow questions and Google Groups discussions, but they have not worked for me. I have changed my calendarPlugin.m and calendarPlugin.h files according to IPhone 6 updates specified in the issues section of github. Please guide me if I went a wrong direction in implementing calendarplugin in phonegap.
Try
cal = window.plugins.calendarPlugin
instead of,
cal = new calendarPlugin()
See if that helps.
Related
I am trying to use vuetify component like tables in my sails project. I can get the UI working fine, but all actions (button clicks) are not working unless I disable parasails for that page. Anyone has experience integrating sails with vuetify?
I followed this example:
https://github.com/ndabAP/vue-sails-example
But instead of using vue-bootstrap I did with Vuetify with the vue-cli:
vue create frontend
cd frontend
vue add vuetify
And in the vue.config.js I used:
// frontend/vue.config.js
outputDir: "../backend/assets/dependencies",
In the backend generate a controller route to index.js:
// config/routes.js
'/*': { action:'index', skipAssets: true, skipRegex: /^\/api\/v1\/.*$/ },
with the content:
// controllers/index.js
module.exports = {
friendlyName: 'View homepage',
description: 'Display homepage view',
exits: {
success: {
statusCode: 200,
description: 'Display the view index page.',
viewTemplatePath: 'pages/index'
},
},
fn: async function () {
return {};
}
};
The view layouts/layout.ejs should content:
<% /* views/layouts/layout.ejs */ %>
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<noscript>
<strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<!--TEMPLATES-->
<!--TEMPLATES END-->
<%- exposeLocalsToBrowser() %>
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
And that is the better way that I figured it out. If there is another simplest way I want to know, because I think that is necessary modifying parasails.js to upload components directly or change the form of registering pages by registering components instead, using a unique page in a similar way.
I try to display a 360-video in a a-sphere using the a-frame framework.
My code is as follows:
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
<title></title>
</head>
<body>
<a-scene>
<a-assets
<video id="antarctica" playsinline autoplay loop="true" src="130.mp4">
</a-assets>
<a-videosphere src="#antarctica"></a-videosphere>
<!-- Using the asset management system. -->
<a-camera position = "0 0 0">
<a-cursor color=#FFFFFF></a-cursor>
</a-camera>
</a-scene>
<script>
</script>
</body>
</html>
The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)
EDIT: I bookmarked the page to my home screen
Unfortunately, video does not autoplay on mobile browsers yet.
For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.
Here's an example...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video example</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="./bower_components/aframe/dist/aframe.js"></script>
<script>
window.addEventListener("load", function() {
document.querySelector("#video").addEventListener("play", function() {
var video = document.querySelector("video");
var assets = document.querySelector("a-assets");
var videosphere = document.querySelector("a-videosphere");
var scene = document.querySelector("a-scene");
assets.appendChild(video);
videosphere.setAttribute("src", "#video");
scene.removeAttribute("style");
video.play();
})
});
</script>
</head>
<body>
<video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
<a-scene>
<a-assets></a-assets>
<a-videosphere></a-videosphere>
</a-scene>
</body>
</html>
Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?
I have a little NodeJS server, which an index.html invites me over serve-static.
Is it somehow possible that are contained in the index.html functions of NodeJS?
Theoretically, I could of course solve the whole problem with express routes, but possibly there is also another solution
var serve = serveStatic(__dirname+"/../Websites", {'index': ['index.html']});
// Create server
var server = https.createServer(options,function onRequest (req, res) {
serve(req, res,finalhandler(req, res));
})
// Listen
server.listen(443, function(){
console.log('WebServer running on 443...');
});
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var hello = require('hello');
console.log(hello.sayHello());
</script>
<div>TODO write content</div>
</body>
</html>
My ultimate goal is to have on iDevices viewing my website, an image link that on click, plays a video at full screen, and upon finish of video redirects to another webpage. I am open to any solution that achieves my goal, even if it means scrapping the code I've got.
Here is my best attempt as of yet:
This is My current testing site
I was following this stackoverflow post
I am happy with the results on my laptop [edit works on Chrome but not FF 16.0.1 sigh I don't know anymore), but I am currently unable to click the image to play the video on my iDevices (ipad1 & iphone4). I've spent hours attempt to achieve this by researching, trial & error to no prevail.
Here is the code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="description" content="" />
<title>test</title>
<script type="text/javascript">
function videoEnd() {
var video = document.getElementById("video");
video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
video.addEventListener('ended', videoEnd, true);
video.webkitEnterFullScreen();
video.load();
video.play();
}
</script>
</head>
<body>
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
</video>
</body>
</html>
If a browser doesn't support the fullscreen API (http://caniuse.com/#feat=fullscreen) then that may throw an error in your playVideo function. Try this modification:
function videoEnd() {
var video = document.getElementById("video");
if(video.webkitExitFullScreen) video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
if(video.webkitEnterFullScreen) video.webkitEnterFullScreen();
video.load();
video.play();
}
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();" onended="videoEnd();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
Ok this is might be the dumbest question ever.. but i cannot for the life of me figure out how to add one of my Facebook apps to one of my Facebook pages. When I would look at my app settings on developers.facebook.com there used to be a link to view the App Profile Page. Then from there I could click an Add to Page link. But I have no clue how to do this now grrr.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Frederick Behrends" />
<title>Facebook PageTab Dialog Generator</title>
</head>
<body>
AppID:<input type="text" id="AppID" value=""/><br />
<input type="button" value="Add to page" onclick="AddToPage();"/>
<script>
function AddToPage(){
var Next,AppID;
AppID = document.getElementById('AppID').value;
if(isNaN(AppID) === true){
alert('AppID ungültig');
return false;
}
if(Next == '' || typeof Next == 'undefined')
Next = 'http://www.facebook.com/';
window.open("http://www.facebook.com/dialog/pagetab?app_id="+AppID+"&next="+Next,"PageTab","width=800,height=500");
return false;
}
</script>
</body>
</html>
Use this html file.
Try this
http://www.facebook.com/add.php?api_key=__APP_ID__&pages
where __APP_ID__ is the application ID of the application you wish to add. Pretty simple.