Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (74 sloc) 2.77 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sensors Client</title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<script src="http://localhost:8080/signalr/hubs"></script>
<style type="text/css">
div {
margin: 20px;
}
p {
color: #ff9900;
font-family: 'Segoe UI', sans-serif;
font-size: 24px;
font-weight: bold;
}
img#directionImage {
margin-left: 100px;
transform-origin: 50% 70%;
}
</style>
</head>
<body>
<div>
<p>Light: <span id="lightText">0</span>&nbsp;lx</p>
<p>Compass: <span id="compassText">0</span>&nbsp;°</p>
</div>
<div>
<img id="directionImage" src="Images/direction.png" alt="" />
</div>
<script type="text/javascript">
$(function () {
$.connection.hub.url = "http://localhost:8080/signalr";
var appModel = { light: 0, compass: 0 };
var lightSensor = $.connection.lightSensorHub;
lightSensor.client.notifyIlluminanceInLux = function (illuminanceInLux) {
appModel.light = illuminanceInLux;
renderLight();
};
var compass = $.connection.compassHub;
compass.client.notifyHeadingMagneticNorth = function (headingMagneticNorth) {
appModel.compass = headingMagneticNorth;
renderCompass();
};
$.connection.hub.start()
.done(function () {
lightSensor.server.getIlluminanceInLux()
.done(lightSensor.client.notifyIlluminanceInLux);
compass.server.getHeadingMagneticNorth()
.done(compass.client.notifyHeadingMagneticNorth);
});
function renderLight() {
console.log("Light: %f lx", appModel.light);
$("#lightText").text(appModel.light);
$("body").css({ backgroundColor: getGrayColor(appModel.light, 306) });
}
function renderCompass() {
console.log("Compass: %f °", appModel.compass);
$("#compassText").text(appModel.compass);
$("#directionImage").css({ transform: "rotate(" + (360 - appModel.compass) + "deg)" });
}
function getGrayColor(value, maxValue) {
var brightness =
value < 0 ? 51 :
value > maxValue ? 255 :
parseInt(51 + 204 * value / maxValue);
return "rgb(" + brightness + ", " + brightness + ", " + brightness + ")";
}
});
</script>
</body>
</html>
You can’t perform that action at this time.