I want to use requestLEScan method to scan ble peripheral devices, but I cannot find requestLEScan method.
I wrote below following this doc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
</head>
<body>
<button id="test" onclick="onButtonClick()">test</button>
<script>
function onButtonClick() {
navigator.bluetooth.requestLEScan({
filters: [{manufacturerData: {0x004C: {dataPrefix: new Uint8Array([
0x02, 0x15, // iBeacon identifier.
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 // My beacon UUID.
])}}}],
options: {
keepRepeatedDevices: true,
}
}).then(() => {
navigator.bluetooth.addEventListener('advertisementreceived', event => {
let appleData = event.manufacturerData.get(0x004C);
if (appleData.byteLength != 23) {
// Isn’t an iBeacon.
return;
}
let major = appleData.getUint16(18, false);
let minor = appleData.getUint16(20, false);
let txPowerAt1m = -appleData.getInt8(22);
let pathLossVs1m = txPowerAt1m - event.rssi;
});
})
}
</script>
</body>
</html>
but it cause error like this.
Also, I checked object and it only has requestDevice() method
According to the WebBluetooth implementation status page, Chrome has not implemented requestLEScan so far. Depending on your device, you may be able to use the regular requestDevice instead.
Related
I have an spring/dojo application. The requirement is to locate an address in a stackcontainer/content-pane, in map. First thought was to have the redirection to google maps and CORS & ACCESS_ORIGIN issues are being thrown.
Can anyone guide us?
Not sure what you mean with "redirection to google maps", and I am not familiar with spring.
Below an example that I built after some googling (among others here), uses the google maps javascript api, and displays a map in a ContentPane (at least in my environment). You'll need to provide your google API key and adapt config to your environment:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google maps demo</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div id='theMap'></div>
<script>var dojoConfig ={
baseUrl: "", isDebug: true, async: true,
packages: [{"name": "dojo", "location": "dojo-release-1.12.2-src/dojo"}, {"name": "dijit", "location": "dojo-release-1.12.2-src/dijit"},
],
};
</script>
<script src="dojo-release-1.12.2-src/dojo/dojo.js"></script>
<script>
require([
'dijit/layout/ContentPane',
'myApp/gmapsLoader!http://maps.google.com/maps/api/js?v3&key=YOUR_GOOGLE_API_KEY'
], function (ContentPane) {
var theMap = new ContentPane({style: {height: '1000px'}}, 'theMap');
var mapOptions = {
center : new google.maps.LatLng(-34.397, 150.644),
zoom : 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var theMapContent = new google.maps.Map(theMap.domNode, mapOptions);
theMap.startup();
});
</script>
</body>
</html>
It has a dependency upon gmapLoader, which is described here (under the name async.js).
jc
I am having alot of trouble getting c3 to work in my web page. My code for the graphing is right, it just wont load anything and I am guessing this is due to me not having the right script src. Does anyone have a starter file for using c3, or the code I would need to load it in. Or is there a CDN I could reference?
Here is a quick starter file
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
But I would recommend, getting stable versions from the respective sites or GitHub projects.
I am creating a line chart for a data series using C3.js.
I am struggling in trying to show the "points" only for one of the series.
Basically, first I am creating a multiple series line chart with some reference data, and then I am loading (with char.load) a new particular data line in which I want to show points, only for that particular line while the other reference lines remain with hidden points.
Is that possible via C3.js? If so, could you instruct me to do so, thanks!
Also, any method to do so using D3.js while using C3.js is welcome.
This is the official example in which all points are hidden for a data series, just for reference:
http://c3js.org/samples/point_show.html
c3.js provides comprehensive class attributes on all its elements so you can customize them with CSS. For example to hide the points on the 2nd series add this CSS:
#chart .c3-circles-data2 {
display: none;
}
Example here.
Here's an example of using the show and hide methods of a chart object to selectively display lines:
<!DOCTYPE html>
<html lang="en">
<head>
<title>show hide</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 1, 2, 3, 4, 5],
['y1', 3, 5, 6, 4, 5],
['y2', 2, 4, 7, 6, 5]
]
}
});
function cbclick(a){
var lineData = "y" + a;
var cbID = "cb" + a
var cb = document.getElementById(cbID);
if (cb.checked) {
chart.show([lineData]);
} else {
chart.hide([lineData]);
}
}
</script>
<div align="center">
<input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
<input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
</div>
</body>
There are a code for this purpose in the C3.js library:
point: {
show: false,
}
You can check this at here
d3.js is not appending the div as expected. Debuggin on FF 18+ and Firebug.
The d3 Object is returned (on alert message) but the chart object returns blank.
The d3.js lib is loading ok.
Here's the code
<?php header('Content-type: text/html; charset=utf-8');?>
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='js/d3.v3.js'></script>
<script type='text/javascript'>
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select("#hurtme").append("div").attr("class", "chart");
alert (d3);
//chart.selectAll("div").data(data).enter().append("div").style("width", function(d) { return d * 10 + "px"; }).text(function(d) { return d; });
</script>
</head>
<body>
<div id='hurtme'></div>
hello
</body>
</html>
What am I missing?
PS: I've discarted the browser imcompatibility since other examples from the web works fine.
PS2: Also tried using d3.v2.js and loading from source on <script src="http://d3js.org/d3.v3.min.js"></script>, no success so far.
Your script is loaded and executed before the div comes into existence. Try moving the script tags after the div:
<div id='hurtme'></div>
<script> type='text/javascript'>
var data = [4, 8, 15, 16, 23, 42];
var chart = d3.select("#hurtme").append("div").attr("class", "chart");
</script>
Or use an 'onload' function: window.onload vs document.onload
This code below works fine in Chrome and IE 9. But breaks in IE 8.
The errant line is here. I think it's the bind.
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
Has anyone else had this problem? It's not clear if someone has this on SO.
<!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" >
<head>
<style>
html, body, #map
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&sensor=true" type="text/javascript"></script>
<script language="javascript">
var MyPage = function () {
this.map = null; //google map
};
MyPage.prototype.initialize = function () {
this.map = new google.maps.Map(document.getElementById("map"),
{
zoom: 8,
center: new google.maps.LatLng(30, -97),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
}
MyPage.prototype.leftClick = function (event) {
alert('hi');
}
$(window).load(function(){
var my = new MyPage();
my.initialize();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the bind Method is not supported in IE8 or below see http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx