|
|
|
@ -1,231 +1,68 @@
|
|
|
|
|
<div class="col-lg-12 margin-top-double">
|
|
|
|
|
<h1 class="grey ">Android Sense</h1>
|
|
|
|
|
<h1 class="grey ">Android Mobile</h1>
|
|
|
|
|
<hr>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/android-sense-icon.png" class="img-responsive">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/android-icon.png" class="img-responsive">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
|
|
|
|
|
<h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android+Sense"
|
|
|
|
|
target="_blank">[ here ]</a> for latest instructions and
|
|
|
|
|
troubleshooting.</h4>
|
|
|
|
|
<h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android"
|
|
|
|
|
target="_blank">[ here ]</a> for latest instructions and troubleshooting.</h4>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
|
|
|
|
|
|
|
|
|
|
<h3 class="uppercase">What it Does</h3>
|
|
|
|
|
<hr>
|
|
|
|
|
<p class="grey margin-top">Connect an Android device to WSO2 IoT Server and visualize sensor
|
|
|
|
|
data.</p>
|
|
|
|
|
<p class="grey margin-top">Connect and manage your Android device with WSO2 IoT Server.</p>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<h3 class="uppercase">What You Need</h3>
|
|
|
|
|
<hr>
|
|
|
|
|
<p class="grey margin-top">You should have an Android Device to get started.</p>
|
|
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">STEP 01</span>
|
|
|
|
|
Go ahead and click [Enroll Device].
|
|
|
|
|
<li class="padding-top-double"><span class="circle">STEP 01</span> Android
|
|
|
|
|
Mobile.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">STEP 02</span>
|
|
|
|
|
You can either scan the QR code or directly download Android agent.
|
|
|
|
|
<li class="padding-top-double"><span class="circle">STEP 02</span> Go ahead
|
|
|
|
|
and click [Enroll Device].
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">STEP 03</span>
|
|
|
|
|
Install Android agent into your Android Device.
|
|
|
|
|
<li class="padding-top-double"><span class="circle">STEP 03</span> Proceed
|
|
|
|
|
to the [Prepare] section.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double"><span class="circle">STEP 04</span>
|
|
|
|
|
Proceed to [Prepare] section.
|
|
|
|
|
</ul>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}"
|
|
|
|
|
data-sketchtype="{{@uriParams.deviceType}}" data-url="{{enrollmentURl}}">
|
|
|
|
|
<i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
|
|
|
|
|
<br/><br/>
|
|
|
|
|
|
|
|
|
|
<div id="download-device-modal-content-links" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Please download the file from following link(Press CTRL+C).</h3>
|
|
|
|
|
<br/>
|
|
|
|
|
<div>
|
|
|
|
|
<input id="download-device-url" style="color:#3f3f3f;padding:5px"
|
|
|
|
|
type="text" value="" placeholder="Type here" size="60">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="device-400-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Exception at backend. Try Later.</h3>
|
|
|
|
|
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<a href="#" id="device-400-link" class="btn-operations">
|
|
|
|
|
OK
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="device-401-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>You have to log in first.</h3><br/>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<a href="#" id="device-401-link" class="blue-button">
|
|
|
|
|
Goto Login Page
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" onclick="hidePopup();" class="btn-operations">
|
|
|
|
|
Cancel
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="device-403-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Action not permitted.</h3><br/>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<a href="#" id="device-403-link" class="btn-operations">
|
|
|
|
|
OK
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<a href="#" class="download-link btn-operations"><i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
|
|
|
|
|
|
|
|
|
|
<div id="device-409-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Device Sketch does not exist.</h3><br/>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<a href="#" id="device-409-link" class="btn-operations">
|
|
|
|
|
OK
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="device-unexpected-error-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Unexpected error.</h3><br/>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<a href="#" id="device-unexpected-error-link" class="btn-operations">
|
|
|
|
|
OK
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<br/><br/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double grey-bg">
|
|
|
|
|
<h3 class="uppercase">Prepare</h3>
|
|
|
|
|
<hr>
|
|
|
|
|
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 padding-double grey-bg">
|
|
|
|
|
<h3 class="uppercase">Prepare</h3><hr>
|
|
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">01</span>
|
|
|
|
|
Connect Android device to network.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">02</span>
|
|
|
|
|
Start Android Sense app in your device.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">03</span>
|
|
|
|
|
Fill login form with the credentials.
|
|
|
|
|
<i>(Use server URL as [ https://<WSO2_IoT_SERVER_HOST>:<
|
|
|
|
|
HTTPS_SERVER_PORT> ] and click on
|
|
|
|
|
<strong>Register Device</strong> button.)</i>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="{{@unit.publicUri}}/images/registerView.png" target="_blank"
|
|
|
|
|
class="padding-top-double">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/registerView.png" class="img-responsive">
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">04</span>
|
|
|
|
|
Once the device is enrolled, click on <strong>[+]</strong> button to
|
|
|
|
|
select the sensors.
|
|
|
|
|
<a href="{{@unit.publicUri}}/images/selectSensorView.png" target="_blank"
|
|
|
|
|
class="padding-top-double">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/selectSensorView.png" class="img-responsive">
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="circle">05</span>
|
|
|
|
|
Click on <i>[Publish data]</i> button to publish sensor readings to
|
|
|
|
|
IoT server.
|
|
|
|
|
<a href="{{@unit.publicUri}}/images/publishDataView.png" target="_blank"
|
|
|
|
|
class="padding-top-double">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/publishDataView.png" class="img-responsive">
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double"><span class="circle">01</span> Download Device Agent into your Android Mobile.</li>
|
|
|
|
|
<li class="padding-top-double"><span class="circle">02</span> Install Agent APK file.</li>
|
|
|
|
|
<li class="padding-top-double"><span class="circle">03</span> Configure Agent App</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
|
|
|
|
|
<h3 class="uppercase">Try Out</h3>
|
|
|
|
|
<hr>
|
|
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="fw-stack fw-lg margin-right">
|
|
|
|
|
<i class="fw fw-ring fw-stack-2x"></i>
|
|
|
|
|
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
|
|
|
</span>
|
|
|
|
|
You can view all your connected devices
|
|
|
|
|
<a href="{{@app.context}}/devices">[Device Management]</a> page.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="fw-stack fw-lg margin-right">
|
|
|
|
|
<i class="fw fw-ring fw-stack-2x"></i>
|
|
|
|
|
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
|
|
|
</span>
|
|
|
|
|
You can select any one of your connected devices for available
|
|
|
|
|
operations and Real-Time data monitoring.
|
|
|
|
|
</li>
|
|
|
|
|
<li class="padding-top-double">
|
|
|
|
|
<span class="fw-stack fw-lg margin-right">
|
|
|
|
|
<i class="fw fw-ring fw-stack-2x"></i>
|
|
|
|
|
<i class="fw fw-right-arrow fw-stack-1x"></i>
|
|
|
|
|
</span> For historical analytics of sensor data navigate to device
|
|
|
|
|
analytics page.
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<br/>
|
|
|
|
|
<p class="grey margin-top">Click on the image to zoom</p>
|
|
|
|
|
<center>
|
|
|
|
|
<a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
|
|
|
|
|
<a href="{{@unit.publicUri}}/images/android_device.png" target="_blank">
|
|
|
|
|
<img src="{{@unit.publicUri}}/images/android_device.png" class="img-responsive">
|
|
|
|
|
</a>
|
|
|
|
|
</center>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="qr-code-modal" data-enrollment-url="{{enrollmentURL}}" class="hidden">
|
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
|
|
<div id="qr-code-modal"
|
|
|
|
|
data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/android-agent.apk" class="hidden">
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-lg-5 col-md-6 col-centered">
|
|
|
|
@ -236,102 +73,74 @@
|
|
|
|
|
<div class="qr-code"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<form id="downloadForm" method="GET"
|
|
|
|
|
action="{{@app.context}}/api/devices/sketch/download">
|
|
|
|
|
<div class="control-group">
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<input type="hidden" class="deviceType" name="deviceType"
|
|
|
|
|
value="android_sense"/>
|
|
|
|
|
<input type="hidden" class="sketchType" name="sketchType"
|
|
|
|
|
value="android_sense"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttons" style="padding-bottom: 0px">
|
|
|
|
|
<a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="device-agent-downloading-content" class="hide">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-7 col-centered center-container">
|
|
|
|
|
<h3>Device Agent will downloading shortly.</h3>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.circle {
|
|
|
|
|
background: none repeat scroll 0 0 #191919;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.padding-top-double {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.padding-double {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grey {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
display: block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-top: 1px solid #7f7f7f;
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-grey {
|
|
|
|
|
color: #7c7c7c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.uppercase {
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grey-bg {
|
|
|
|
|
background-color: #f6f4f4;
|
|
|
|
|
}
|
|
|
|
|
{{#zone "topCss"}}
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.circle {
|
|
|
|
|
background: none repeat scroll 0 0 #191919;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.padding-top-double {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.padding-double {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
.grey {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
hr {
|
|
|
|
|
display: block;
|
|
|
|
|
height: 1px;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-top: 1px solid #7f7f7f;
|
|
|
|
|
margin: 1em 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
}
|
|
|
|
|
.light-grey {
|
|
|
|
|
color: #7c7c7c;
|
|
|
|
|
}
|
|
|
|
|
.uppercase {
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
}
|
|
|
|
|
.grey-bg {
|
|
|
|
|
background-color: #f6f4f4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.doc-link {
|
|
|
|
|
background: #11375B;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.doc-link {
|
|
|
|
|
background: #11375B;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.doc-link a {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
.doc-link a {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
{{/zone}}
|
|
|
|
|
|
|
|
|
|
{{#zone "bottomJs"}}
|
|
|
|
|
{{js "/js/download.js"}}
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$(".download-link").click(function () {
|
|
|
|
|
|
|
|
|
|
$(".download-link").click(function(){
|
|
|
|
|
toggleEnrollment();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function toggleEnrollment() {
|
|
|
|
|
function toggleEnrollment(){
|
|
|
|
|
$(".modalpopup-content").html($("#qr-code-modal").html());
|
|
|
|
|
generateQRCode(".modalpopup-content .qr-code");
|
|
|
|
|
showPopup();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
{{js "/js/jquery.validate.js"}}
|
|
|
|
|
{{/zone}}
|
|
|
|
|
{{/zone}}
|