I am new to this UWP, so bear with me please. I modified the code in the following MS GitHub: Link to create a Windows Phone App that can 'watch' BTLE advertisements.
But it is not able to read it any advertisements. My phone does support BTLE, I am able to see the devices in Windows BT Settings so the device is advertising it too. Please help me find where I am wrong and why.
Here is my code for JS:
var watcher = new Windows.Devices.Bluetooth.Advertisement.BluetoothLEAdvertisementWatcher();
//watcher.signalStrengthFilter.inRangeThresholdInDBm = -70;
//watcher.signalStrengthFilter.outOfRangeThresholdInDBm = -75;
//watcher.signalStrengthFilter.outOfRangeTimeout = 2000;
$(document).ready(function () {
console.log("HERE: ready");
watcher.onreceived = onAdvertisementReceived;
$("button#start").unbind('click').on('click', function (e) {
console.log('CLICKED >');
e.preventDefault();
watcher.start();
});
$("button#stop").unbind('click').on('click', function (e) {
console.log('CLICKED <');
e.preventDefault();
watcher.stop();
});
});
function onAdvertisementReceived(eventArgs) {
console.log("HERE: function watcher", eventArgs);
var timestamp = eventArgs.timestamp;
var advertisementType = eventArgs.advertisementType;
var rssi = eventArgs.rawSignalStrengthInDBm;
var localName = eventArgs.advertisement.localName;
$("div#list > ul").append("<li> Timestamp: <strong>" + timestamp.getHours() + ":" + timestamp.getMinutes() +
":" + timestamp.getSeconds() + "</strong> Type:" + advertisementType.toString() + " RSSI:" + rssi.toString() + " Name:" +
localName + "</li>");
}
Here is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bluetooth LE Smart Watch</title>
<link href="css/default.css" rel="stylesheet" />
<link href="css/materialize.min.css" rel="stylesheet" />
</head>
<body class="container">
<div class="row">
<h4>List of BTLE Devices</h4>
<button class="btn" id="start">Start Watcher</button><button class="btn" id="stop">Stop Watcher</button>
<div id="list" class="col m12 s12">
<ul>
</ul>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
But it is not able to read it any advertisements. My phone does support BTLE, I am able to see the devices in Windows BT Settings so the device is advertising it too. Please help me find where I am wrong and why.
To get the BTLE work, you need to enable the BlueTooth capability in package.appxmannifest. You can achieve this through:
In VS2015->Double click package.appxmannifest->Capabilities->Check Bluetooth capability.
Or You can open package.appxmannifest in code view and add <DeviceCapability Name="bluetooth" /> in Capabilities tag:
<Capabilities>
<Capability Name="internetClient" />
<DeviceCapability Name="bluetooth" />
</Capabilities>
Related
I have a web page with a simple image OCR text.
I would like to get the text of this image with Tesseract.js. It's working fine except at first launch. The following message is displayed and nothing more:
initializing api (100%)
After reloading it's working fine. I don't know why it only work after reloading the page. If I clear the cache the issue reappears. I use Firefox.
My HTML/Javascript file
<html>
<head>
<title>QRScanner Library Test</title>
<script src="tesseract.js"></script>
</head>
<body>
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<img id="img" src="ocr.gif"/>
<script>
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("img").src;
runOCR(url);
});
function runOCR(url) {
Tesseract.recognize(url)
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
</script>
</body>
</html>
I have downloaded in the same folder all js files: tesseract.js, worker.js, index.js and language package eng.traineddata.gz
So I'm pretty experienced with programming, but I am just getting new to Javascript. I am making a new element when I click a div, but it won't work. I have tried many methods, and this one seems like the simplest. Can you help me figure out what is wrong?
<!doctype html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='style.css'/>
<meta charset="UTF-8">
</head>
<body>
<div class="head">
<h1>Corkboard</h1>
<div id="addNote" onclick="showNewNoteMenu()">+</div>
</div>
<div id = "newNoteMenu">
<div class="container">
<input id="title" type="text" placeholder="Title" name="Title"/> <br />
<textarea id="details" cols=22.5 rows=5></textarea> <br />
<div onclick="createNewNote()" id='submitNewNote'>Make New Note</div>
</div>
</div>
<div class="content" onclick="hideNewNoteMenu()">
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="script.js"></script>
</html>
function showNewNoteMenu() {
document.getElementById("newNoteMenu").style.display = "inline-block";
};
function hideNewNoteMenu() {
document.getElementById("newNoteMenu").style.display = "none";
};
function createNewNote() {
document.getElementsByTagName("h1").innerHTML = "This works"
alert("OK");
var title = document.getElementById("title").value;
var text = document.getElementById("details").value;
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var time = hours + ":" + minutes;
var content = document.getElementsByClassName("content");
var note = '<div class="note"><div class="container"><h2>'+ title + '</h2><i>' + time + '</i><p>' + text + '</p></div></div>';
}
hideNewNoteMenu();
It appears all that's missing is to insert the string of markup, note, into the document.
In this case, you can use .insertAdjacentHTML():
var content = document.getElementsByClassName("content");
var note = /* ... */;
content[0].insertAdjacentHTML('beforeend', note);
With beforeend, it will insert the note as the content's last child.
Also, the use of [0] is because getElementsByClassName() returns a collection of Elements (note the plural getElements...).
Since you've included jQuery, this could also be accomplished with jQuery(html) and .appendTo():
$(note).appendTo(content[0]);
Change this:
<div id="addNote" onclick="showNewNoteMenu()">+</div>
to
<div id="addNote">+</div>
and
document.getElementById("addNode").addEventListener("click",showNewNoteMenu);
Be sure the JavaScript executes after the page has been loaded and parsed. You should have a window.onload.
I'm using Mozilla Firefox 43.0 on Ubuntu 12.04 LTS. I wrote the following JavaScript method saved in mainScript.js:
function writeDateHu() {
var days = ["Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat", "Vasárnap"];
var current = new Date();
var s = "";
s.concat("<p>", current.getFullYear(), ". ", (current.getMonth() + 1), ". ", current.getDate(), ".<br />", days[current.getDay()], "</p>");
document.getElementById("datum").innerHTML = s;
}
I've also tried to add them by using + instead of concat.
In the main.html I have the following:
<!DOCTYPE html>
<html>
<head>
<title>HomePage</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="mainStyle.css" />
<script type="text/css" src="mainScript.js"></script>
</head>
<body onload="writeDateHu();">
<div class="alap">
<div class="fejlec">
</div>
<div class="bal" id="datum">
</div>
<div class="tartalom">
</div>
<div class="lablec">
</div>
</div>
</body>
</html>
After loading page, the inspector says me ReferenceError: writeDateHu is not defined. Also, sometimes (e.g. I insert the script in the html) I don't get the error, but nor the date.
Thanks for any advance.
You have loaded a JavaScript file as CSS.
<script type="text/css" src="mainScript.js"></script>
All you should have done is this
<script src="mainScript.js"></script>
I want to copy some text to clipboard using javascript
I have downloaded latest version of zeroClipboard 2.2
I have followed this example from http://davidwalsh.name/clipboard
Here is my html page:
$(document).ready(function(){
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
});
<html>
<meta http-equiv="Content-Type"/>
<head>
<script src="ZeroClipboard.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>
</head>
<body>
<textarea name="box-content" id="box-content" rows="5" cols="70">
The David Walsh Blog is the best blog around! MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>
</body>
</html>
Thanls in advance.
The example you choose is a little bit strange with the setTimeout on the demo page. Can you try with this version ? (it comes from the official website)
The target element is set with the data-clipboard-target attribute.
<textarea id="fe_text" cols="50" rows="3">Copy me!</textarea>
<button id="d_clip_button" title="Click me to copy to clipboard." data-clipboard-target="fe_text">Copy To Clipboard...</button>
<script>
$(document).ready(function() {
var clip = new ZeroClipboard($("#d_clip_button"), {
moviePath: "ZeroClipboard.swf"
});
clip.on("ready", function() {
this.on("aftercopy", function(event) {
console.log("Copied text to clipboard: " + event.data["text/plain"]);
});
});
clip.on("error", function(event) {
console.error('error[name="' + event.name + '"]: ' + event.message);
ZeroClipboard.destroy();
});
});
</script>
Warning :
Zero Clipboard might not work from local disks due to the security restrictions placed by Adobe.
https://stackoverflow.com/a/9450359/4682796
I have build a simple demo app that should play a locally stored mp3-file (delivered as part of the app). I want to use html5-audio instead of phonegap's Media-Object. I am using the howler.js framework to get somewhat better performance.
The local file is stored under www/res/audio/2.mp3.
Everything works fine when running it on my desktop browser. However, I cannot get it to work when deployed to my android device. The weired thing is: The playback of a remotely hosted mp3-file works just peachy, thus I assume that something is wrong with url(s) I use with my local file. I have tried different url-"versions", but none of the below works:
www/res/audio/2.mp3
/android_asset/www/res/audio/2.mp3
file:///android_asset/www/res/audio/2.mp3
file://android_asset/www/res/audio/2.mp3
http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3 //works great
It drives me crazy. Any ideas how to get it to work and what my mistake is? Please see my code below or download my entire code here.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Audio-Test</title>
</head>
<body>
<!-- ------------- -->
<!-- Script import -->
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
<script src="js/libs/howler/howler.min.js"></script>
<script src="js/index.js"></script>
<!-- ---------- -->
<!-- Start Page -->
<div id="index" data-role="page" data-theme="a">
<!-- HEADER, FOOTER -->
<div data-role="header" data-position="fixed">
<h1>Audio-Tester</h1>
</div>
<!-- CONTENT -->
<div class="ui-content">
<h1 id='ready' style='text-align: center;'></h1>
<select id='urls'></select>
<button id='playSelected'>Play audio from selected source!</button>
<div id='log'></div>
</div>
</div>
<!-- ------------- -->
<!-- Init Phonegap -->
<script>
$(document).ready(function() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
isPhonegap = true;
$.getScript( 'cordova.js', function() {
document.addEventListener("deviceready", onDeviceReady, false);
app.initialize();
});
}
else {
//Fallback for desktop browsers!
isPhonegap = false;
onDeviceReady();
}
});
</script>
</body>
</html>
index.js
function onDeviceReady() {
$('#ready').html("I'm ready!");
//populate selection
var basePath = getBasePath();
var audioUrl = 'res/audio/2.mp3';
var myOptions = {
val1 : 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3',
val2 : audioUrl,
val3 : basePath + audioUrl,
val4 : 'file://' + basePath + audioUrl,
val5 : 'file:/' + basePath + audioUrl
};
var urls = $('#urls');
$.each(myOptions, function(val, text) {
urls.append(
$('<option></option>').val(val).html(text)
);
});
//append listener to button
$('#playSelected').click(function() {
var myHowl = new Howl({ urls: [$('#urls option:selected').text()] });
myHowl.play();
$('#log').html($('#log').html() + '<br /> Playing ' + myHowl.urls());
});
}
function getBasePath() {
var htmlFilename = 'index.html';
var path = window.location.pathname;
path = path.substr(0, path.length - htmlFilename.length);
return path;
}
This code is working in phonegap.
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
$('#playSelected').click(function() {
var media = new Media(your_audioUrl);
media.play();
}