How to get the camera to work with Blackberry Webworks - blackberry-webworks

I am fairly new to webworks. I am trying to get the camera api to work and I keep getting the error:
Error in supported: TypeError: 'undefined' is not an object (evaluating 'blackberry.media.camera')
The page I am trying to use is on a hosted server. The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<script language="javascript" type="text/JavaScript" >
function takePicture() {
try {
blackberry.media.camera.takePicture(successCB, closedCB, errorCB);
} catch(e) {
alert("Error in supported: " + e);
}
}
function successCB(filePath) {
document.getElementById("path").innerHTML = filePath;
//alert("Succeed: " + filePath);
}
function closedCB() {
// alert("Camera closed event");
}
function errorCB(e) {
alert("Error occured: " + e);
}
</script>
<title>Camera Test Widget</title>
</head>
<body >
<p>Test the Camera by pressing the button below</p>
<b>Take a Picture</b>
<div id="path"></div>
</body>
</html>
And my config.xml file is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0" rim:header="WebWorks Sample">
<access uri="http://www.flyloops.net/" subdomains="true">
<feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
<feature id="blackberry.media.camera" />
</access>
<name>Flyloops.net</name>
<description>This is a sample application.</description>
<content src="index.html"/>
</widget>
The page is hosted at: http://www.flyloops.net/mobile/bb/camera.html
I have been tearing my hair out for the past 3 hours...any help would be greatly appreciated.


If using PlayBook, make sure to have the correct element(s) defined
https://developer.blackberry.com/html5/apis/blackberry.media.camera.html
otherwise, if you are trying to access the blackberry.media.camera API from a remote website, then you need to white list that correctly in config.xml like this:
<access uri="http://www.flyloops.net/" subdomains="true">
<feature id="blackberry.media.camera" />
</access>


What device are you running? The code seems fine and it should work. You can get the eventlogs from the device and see what exceptions are being thrown.
Thanks
Naveen M

Related

Getting _flutter is undefined in flutter web, only in production

I have an error that has been appearing in my last few deploys and I am unable to trace it.
It only happens when I deploy to firebase website, debug works without any issues.
Uncaught SyntaxError: Unexpected token '<' (at flutter.js:1:1)
(index):50 Uncaught ReferenceError: _flutter is not defined
at (index):50:7
This shows up in the browser console.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Trading made easy">
<meta name="google-signin-client_id"
content="xxx.apps.googleusercontent.com">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="tornmarket">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>Torn Market</title>
<link rel="manifest" href="manifest.json">
<!-- <script>self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;</script> -->
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>

You should try to rebuild your application with:
flutter clean
and then
flutter build web
I tried to delete build folder manually, but it didn't work. It's preferable to use flutter clean.

Here's a solution that worked for me.
In index.html
Change this
<base href="/">
To this
<base href="./">

Open the index.html file in your_project_name/build/web path and put this script after the body tag :
<script src="main.dart.js" type="application/javascript"></script>.
If it didn't work so maybe flutter.js is missing from the build directory so clean your project by flutter clean in the terminal then build it again
using flutter build web after that add the tag I mentioned above. Now deploy your web to the host.

You're most likely missing the flutter.js file in the build/web folder

don't know whether below code works or not. try to implement the same and revert back. please change your body tag as below
<body>
<script src="main.dart.js" type="application/javascript"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>

How to add a favicon to a Next.js static site?

I'm trying to add a favicon to a Next.js static site without much luck.
I've tried customising the document with components from 'next/document'
https://nextjs.org/docs/#custom-document
A straight link to the favicon.ico file doesn't work because the file isn't included in the build and the href doesn't update to /_next/static/...
Importing the image and adding to the link's href doesn't work either (see commented out lines).
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
{/* <link rel="shortcut icon" href={favicon} /> */}
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
The favicon links get added however it doesn't display. I'd expect it to work when I import the file, but it just adds a <link rel="shortcut icon" href="[object Object]"> link.
Has anyone done this yet?

Create a /static folder in project root. This will be added to the static export folder.
Add favicon file in /static folder.
Add _document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com).
Add <link rel="shortcut icon" href="/static/favicon.ico" /> to head.
npm run build && npm run export
P.S. Thanks to the previous answer that was deleted. It works!
Edit: Another way is to do this is to import Head into your root layout and add the link there. Anything added to Head gets inserted into the document head tag.
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;
Update :
The static directory has been deprecated in favor of the public directory. Doc
So, the code would now look like
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);

Simply add your favicon.ico in public folder,
Next js will automatically take that favicon for all pages.
No need to add any favicon link to any pages or in tag no need to add link for favicon.
https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md

The accepted answer is nice, but might be worth pointing out that you don't have to modify _document.js for adding a favicon (nor for adding any tags to head).
I found out for myself that placing favicon in _app.js makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add Head tag literally anywhere (see the docs)
So I ended up with _app.js
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</Layout>
);
}
}

As of June 2020, you don't have to add/edit the document.js or _head.js files. All you need do to is place the favicon.ico file inside the public directory and that's it.

Only adding .ico file is not enough.
Add link tags to <Head> section in _document.jsx or _document.tsx The question is only about .ico file, but I would recommend to add different dimensions and formats for better support.
import React from 'react';
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render(): React.ReactElement {
return (
<Html>
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#ffc40d" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
You can generate different icons using RealFaviconGenerator and upload results to /public/favicons/ folder. This folder can be referenced by /favicons/ due to nature of public directory.

In my case it DID NOT WORK WITH OUT THE IMPORT:
file: _app.tsx
import { AppContext, AppProps } from "next/app";
import "../styles/common.scss";
import Head from 'next/head';
//For me it didn't work without the following import...
import favico from "../static/favicon.ico";
function MyApp({ Component, pageProps }: AppProps) {
const csrfToken = pageProps["anti-csrftoken-a2z"];
return (
<div>
<Head>
<link rel="shortcut icon" href={favico} type="image/x-icon" />
</Head>
<Component {...pageProps} />
</div>
);
}
MyApp.getInitialProps = async ({ Component, ctx }: AppContext) => {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
};
export default MyApp;

I had to do favicon.src to make it work
Doesn't work:
import favicon from '...'
...
<link rel="shortcut icon" href={favicon} />
Works:
import favicon from '...'
...
<link rel="shortcut icon" href={favicon.src} />
To figure this out, I ran console.log(favicon) and it turns out that it was an object that looks something like this:
{
height: 16,
src: "path/to/favicon.603d046c.ico"
width: 16,
}

Next.js can serve static files, like images, under a folder called
public in the root directory. Files inside public can then be
referenced by your code starting from the base URL (/).
For example, if you add an image to public/me.png, the following code
will access the image:
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar
Note: next/image requires Next.js 10 or later.
This folder is also useful for robots.txt, favicon.ico, Google
Site Verification, and any other static files (including .html)!
For your case, if you just replace the favicon.ico it will update accordingly.
For more details visit the official documentation.

I think it would be useful for someone
<Head>
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/favicons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/favicons/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicons/favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png"/>
<meta name="msapplication-square144x144logo" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png"/>
</Head>

For me it was missing in production site but working fine in local because I didn't add the public folder in the artifacts of the production site. I assumed that next.js would put all it needs in .next folder but it's not the case.
cp -R ./.next/ artifacts/
cp -R ./node_modules/ artifacts
cp -R ./public/ artifacts #missing line in my github action code
cp package.json ./artifacts/package.json

I had to put mine under public/images directory with Next.js v18.
Putting under public did not work.

Primefaces Forms and LayoutUnit

I am new to primefaces and I am using the latest version 6.2. Following the guidelines on the user guide I have created a template using 2 forms (one for each layoutunit) setting different ID for each form.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:head>
<title>#{messages.appname}</title>
<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" type="image/x-icon" />
</h:head>
<body>
<p:layout fullPage="true" id="myPage">
<p:layoutUnit id="up" position="north" size="130" header="" resizable="true" closable="false" collapsible="true">
<h:form id="upform">
<ui:include src="/templates/top.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<h:form id="centerform">
<ui:include src="/templates/center.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="down" position="south" size="60" header="" resizable="true" closable="true" collapsible="true">
<h:outputText value="© 2018 - IT" />
</p:layoutUnit>
</p:layout>
</body>
</ui:composition>
</html>
My problem is that when I load the page in Chrome and I inspect the elements, Chrome is complaining for DOM,as it tracks 2 elements with non-unique ID.
​login.xhtml:1 [DOM] Found 2 elements with non-unique id #j_id1:javax.faces.ViewState:0: (More info:) <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla" autocomplete=..."off">... <input type=..."hidden" name=..."javax.faces.ViewState" id=..."j_id1:...javax.faces.ViewState:...0" value=..."bla bla 2" autocomplete=..."off">...
As I suspect that this will cause javascript problems - how can I overcome this?

How to integrate calendar plugin in IPhone using cordova and phonegap app

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.

iDevice onclick not playing video with current code

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" />