I'm trying to find my device listed under the bluetooth options when I am trying to use the Javascript Bluetooth API, but my device John's iPhone is not showing up for me to pair with. Really new at this, so was hoping to get some help on this issue.
I've linked the code below. All I see is null and unknown devices that fail to connect.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
onButtonClick();
});
function onButtonClick() {
const options = {
"acceptAllDevices": true
}
navigator.bluetooth.requestDevice(options)
.then(device => {
log('> Name: ' + device.name);
log('> Id: ' + device.id);
log('> Connected: ' + device.gatt.connected);
})
.catch(error => {
log('Argh! ' + error);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<button type="submit">Submit</button>
</form>
<script src="./index.js"></script>
</body>
</html>
Its console.log() instead of log()
Example:
...
navigator.bluetooth.requestDevice(options)
.then(device => {
console.log('> Name: ' + device.name);
console.log('> Id: ' + device.id);
console.log('> Connected: ' + device.gatt.connected);
})
.catch(error => {
console.log('Argh! ' + error);
...
Related
I'm Trying to Export this JSON table as an Excel file using Javascript so this is what I have tried and I get this error on the Console log
this is prepear.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<script src='https://unpkg.com/tesseract.js#v2.1.0/dist/tesseract.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- <script src='excelexportjs.js'></script> -->
<script src='main.js'></script>
<script src="filesaver.js"></script>
<div class="container mt-5 ">
<pre id="json"></pre>
<button class="btn btn-primary" onclick="downloadAsExcel(json.innerHTML)">download excel</button>
</div>
</head>
<body>
</body>
</html>
and the second file is main.js
async function readFile(fileName)
{
console.log({
fileName
});
return await Tesseract.recognize(fileName, 'ara', {
logger: m => console.log(m)
}); // fake it ...
}
async function parseDataFromTextAndPropertyNames(text, propertyNames)
{
console.log({
text, propertyNames
});
return propertyNames .reduce((table, key) => Object.assign(table, {
[ key ]: RegExp(`${ key }\\W+(\\w+)`) .exec(text)?.[1] ?? '' }
), {});
}
async function writeParsedTextDataAsJSON(fileName, table)
{
console.log({
table
});
JSON.stringify({
table
}) // fake it ...
return (await new Promise(resolve => setTimeout(() => {
console.log({ fileName, json: JSON.stringify({ table }) });
resolve({ success: true });
}, 1500) ));
and finally, filesaver.js
The Console Log
Uncaught TypeError: r.forEach is not a function at rb (xlsx.full.min.js:23:18346) at Object.tb [as json_to_sheet] (xlsx.full.min.js:23:19000) at downloadAsExcel (mains.js:61:32) at HTMLButtonElement.onclick (prepare.php:16:83)
I’m using Academy LMS script with Academy LMS Live Class (zoom) Addon.
This addon asked me to enter api key and security key, I did.
Then I start a meeting via the zoom app and save the id and password to the system as a teacher.
When i try to connect a meeting as a student i get this error: “Joining meeting timeout. Your connection has timed out and you cannot join the meeting. Verify your network connectivity and try again.”
Please help me on this issue, thanks.
Thats my code:
<!DOCTYPE html>
<head>
<title>Zoom</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.7/css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.7/css/react-select.css"/>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="https://source.zoom.us/1.7.7/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.7/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.7/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.7/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.7/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.7/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-1.7.7.min.js"></script>
<script>
$( document ).ready(function() {
start_zoom();
});
function start_zoom() {
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
testTool = window.testTool;
var meetConfig = {
apiKey: 'Existing Values',
apiSecret: 'Existing Values',
meetingNumber: 'Existing Values',
userName: 'Existing Values',
passWord: 'Existing Values',
};
var signature = ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: 0,
success: function(res){
console.log(res.result);
}
});
ZoomMtg.init({
leaveUrl: "file:///C:/Users/User/Desktop/zoom.html",
isSupportAV: true,
success: function () {
ZoomMtg.join(
{
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: signature,
apiKey: meetConfig.apiKey,
passWord: meetConfig.passWord,
success: function(res){
console.log('join meeting success');
},
error: function(res) {
console.log(res);
}
}
);
},
error: function(res) {
console.log(res);
}
});
}
</script>
</body>
</html>
My Error : “Joining meeting timeout. Your connection has timed out and you cannot join the meeting. Verify your network connectivity and try again”
Error Image:
enter image description here
I am looking at PayPal's documentation to implement their service, and I see this HTML code with JavaScript How can I do this in angularjs? separating javascript from HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>
<body>
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=USD"></script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '77.44'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
var transaction = orderData.purchase_units[0].payments.captures[0];
alert('Transaction '+ transaction.status + ': ' + transaction.id);
});
}
}).render('#paypal-button-container');
</script>
</body>
</html>
There is a guide with samples for Angular and Angular 2.
I am developing one PWA of the ionic capacitor and there is a requirement to load another website in an iframe so from one of the ionic app component I called another site.
iframe.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="end" (click)="goBack()">
Close
<ion-icon slot="icon-only" name="close-outline"></ion-icon>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<iframe #iframe height="100%" width="100%" title="test"></iframe>
</ion-content>
iframe.page.ts
export class IframePage implements OnInit, AfterViewInit {
userId = localStorage.getItem('userId');
gameData: any;
gameUrl: any;
docId;
#ViewChild('iframe') iframe: ElementRef;
constructor(private navCtrl: NavController,
private authSrv: AuthService,
private commanSrv: CommannService,
private router:Router) {
firebase.analytics().logEvent('Web_game');
this.iframe.nativeElement.setAttribute('src', 'anotherdomain.com?UID=sadsajdhsakjhdasjhkjsd');
window.addEventListener('message', (event) => {
console.log(event.data);
if (event.data.res === 'win') {
// let routename = commanSrv.getLastRoute();
// navCtrl.navigateForward(routename || 'home_tab');
this.router.navigate(['arcade-outcome', { type: 'arcade_win' }]);
} else if (event.data.res === 'loss'){
this.router.navigate(['arcade-outcome', { type: 'arcade_lose' }]);
} else {
// if (event.data === 'closed') {
let routename = commanSrv.getLastRoute();
navCtrl.navigateBack(routename || 'home_tab');
// }
}
});
}
}
And now
another site is made up of HTML and javascript and here is code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<link rel="stylesheet" type="text/css" href="./assets/css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-database.js"></script>
<script src="scripts/firebase.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<title>HTML 5 game application</title>
</head>
<body>
<p>Loader screen</p>
<div class="loader"></div>
<script>
$(document).ready(function(){
const serverUrl = 'https://us-central1-domain.cloudfunctions.net/';
var token;
var xhttp = new XMLHttpRequest();
var gamePlayData;
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('UID')
const gamePlay = urlParams.get('gameplay')
const mode = urlParams.get('mode')
function getUserDetails(token) {
console.log("getUserDetails start token ", token);
console.log(firebase);
firebase.auth().signInWithCustomToken(token).then((userCredential) => { // execution stop from here.
console.log("getUserDetails end");
var user = userCredential.user;
if (user !== null) {
window.location.replace(`anotherdomain.com/start.html?id=${userId}&gamePlay=${gamePlay}`);
}
})
.catch((error) => {
console.log('error in catch: ', error);
var errorCode = error.code;
var errorMessage = error.message;
// window.history.back();
alert('User is not logged in.')
// parent.postMessage('closed', '*');
});
}
function checkAuth() {
console.log("ajax call start");
$.ajax({
type: "POST",
url: serverUrl + 'checkAuthStatus',
data: { uid: userId },
success: function (response) {
console.log("ajax call end");
//if request if made successfully then the response represent the data
getUserDetails(response.result);
},
error: function (err) {
console.log(err);
}
});
}
checkAuth();
});
</script>
From the line
firebase.auth().signInWithCustomToken(token).then(() => {
Execution cancelled and iframe got closed , window.addEventListener('message', (event) => { got called navigated to ionic application back.
The surprising is, this issue only occurs in iPhone whereas for android it is working fine.
When navigating to another domain site 3rd time then it working and got the success in firebase.auth().signInWithCustomToken(token).then((userCredential) => { .
Please help me.
I have a Javascript file that I'm calling in my Flutter Webview Plugin.
I am trying to return the callback in the console after the onReward method is called. This is the code of my js file:
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/cdn.theoremreach/v3/theorem_reach.min.js"></script>
</head>
<body>
<iframe src="https://theoremreach.com/respondent_entry/direct?api_key=845783b32b8bef12f1b55a36a8be&user_id=12345"></iframe>
<script type="text/javascript">
var theoremReachConfig = {
apiKey: "",
userId: "12345",
onRewardCenterOpened: onRewardCenterOpened,
onReward: onReward,
onRewardCenterClosed: onRewardCenterClosed
};
var TR = new TheoremReach(theoremReachConfig);
function onRewardCenterOpened(){
console.log("onRewardCenterOpened");
}
function onReward(data){
console.log("onReward: " + data.earnedThisSession);
}
function onRewardCenterClosed(){
console.log("onRewardCenterClosed");
}
if (TR.isSurveyAvailable()) {
TR.showRewardCenter();
}
</script>
</body>
</html>
And this is how I'm calling it in my Dart file:
...
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Reward earned"), actions: [
Text("$reward"),
]),
body: WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
controller.loadAsset(
'assets/tr.html',
);
},
));
}
When I complete a survey I get the following message in my console:
I/chromium( 3560): [INFO:CONSOLE(28)] "onReward: 2", source: http://localhost:56537/assets/tr.html (28)
I want to scan this console message and just add the value of the reward, i.e. 2, in my existing page and display it in the appBar.