Merge pull request #38 from rasika90/IoTS-1.0.0-M1

refactoring and adding qr code gen
Ruwan 9 years ago
commit b5d0fe4a95

@ -4,7 +4,7 @@ function onRequest(context) {
var deviceId = request.getParameter("id"); var deviceId = request.getParameter("id");
if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) { if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
var deviceModule = require("/modules/device.js").deviceModule; var deviceModule = require("/app/modules/device.js").deviceModule;
var device = deviceModule.viewDevice(deviceType, deviceId); var device = deviceModule.viewDevice(deviceType, deviceId);
if (device && device.status != "error") { if (device && device.status != "error") {

@ -5,29 +5,23 @@
to the WSO2 device cloud.</p> to the WSO2 device cloud.</p>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{@unit.publicUri}}/images/thumb.png" class="img-responsive"> <i class="fw fw-android fw-5x"></i>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top"> <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h3 class="uppercase">Ingredients</h3> <h3 class="uppercase">Ingredients</h3>
<hr> <hr>
<p class="grey margin-top">Hardware Requirements </p> <p class="grey margin-top">Hardware Requirements </p>
<br> <br>
<span class="fw-stack fw-lg margin-right"> <ul class="list-unstyled">
<i class="fw fw-ring fw-stack-2x"> </i> <li><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> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Raspberry Pi (Internet Enabled)</li>
</span> Raspberry Pi (Internet Enabled)<br/> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack fw-lg margin-right"> <i class="fw fw-right-arrow fw-stack-1x"></i></span> DHT11 Temperature Sensor</li>
<i class="fw fw-ring fw-stack-2x"> </i> <li><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> <i class="fw fw-right-arrow fw-stack-1x"></i></span> LED</li>
</span> DHT11 Temperature Sensor<br/> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack fw-lg margin-right"> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Buzzer(3v)</li>
<i class="fw fw-ring fw-stack-2x"> </i> </ul>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span> LED<br/>
<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> Buzzer(3v)<br/>
<br> <br>
<a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download</a> <a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download</a>
@ -39,34 +33,23 @@
<h3>Name your device and download the agent from following link.</h3> <h3>Name your device and download the agent from following link.</h3>
<br/> <br/>
<form id="downloadForm" method="GET" <form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download">
action="{{@app.context}}/api/devices/sketch/download">
<div class="control-group"> <div class="control-group">
<div class="controls"> <div class="controls">
<input class="new-device-name" style="color:#3f3f3f;padding:5px" <input class="new-device-name" style="color:#3f3f3f;padding:5px"
type="text" type="text"
placeholder="Ex. Lobby_Firealarm" placeholder="Ex. Personal_Android"
name="deviceName" size="60" required> name="deviceName" size="60" required>
<br/> <br/><br/>
<input type="hidden" class="deviceType" name="deviceType" <input type="hidden" class="deviceType" name="deviceType" value="android_sense"/>
value="virtual_firealarm"/> <input type="hidden" class="sketchType" name="sketchType" value="android_sense" />
<input type="hidden" class="sketchType" name="sketchType"
value="virtual_firealarm"/>
<div class="sketchTypes"
style=" padding-top: 20px; padding-bottom: 5px; font-size: 18px;">
<input type="radio" name="sketchType" id="virtual_firealarm"
value="virtual_firealarm"><label for="virtual_firealarm">virtual_firealarm</label>
</div>
</div> </div>
</div> </div>
<br/> <div class="buttons" style="padding-bottom: 0px">
<a class="btn btn-operations" onclick="downloadAgent()">Download
<div class="buttons">
<a class="btn-operations" onclick="downloadAgent()">Download
Now</a> Now</a>
&nbsp;&nbsp; &nbsp;&nbsp;
<a href="#" id="download-device-download-link" class="blue-button"> <a href="#" id="download-device-download-link" class="btn btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Copy Link&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Copy Link&nbsp;&nbsp;&nbsp;&nbsp;
</a> </a>
&nbsp;&nbsp; &nbsp;&nbsp;
@ -184,47 +167,36 @@
<hr> <hr>
<p class="grey margin-top">Get your device ready</p> <p class="grey margin-top">Get your device ready</p>
<br/> <br/>
<ul class="list-unstyled">
<li class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device
as shown in the schematic below and get the FireAlarm setup.</li>
<p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device <li class="padding-top-double"><span class="circle">02</span> Connect a monitor to your
as shown in the schematic below and get the FireAlarm setup.</p> RaspberryPi via the HDMI cable to get a UI view of the device.</li>
<p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your
RaspberryPi via the HDMI cable to get a UI view of the device.</p>
<p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect
to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p>
<li class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect
to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</li>
</ul>
<br> <br>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Schematic Diagram</h3>
<hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
<img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive"
style="max-width: 500px; max-height: 500px">
</a>
</center>
<br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Connect (Quick Start)</h3> <h3 class="uppercase">Connect (Quick Start)</h3>
<hr> <hr>
<p class="grey margin-top">Internet of Things Foundation Quickstart connection</p> <p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
<br/> <br/>
<p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create <ul class="list-unstyled">
DEB'</i> button above to get the download link for the FireAlarm setup files</b></p> <li class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create
DEB'</i> button above to get the download link for the FireAlarm setup files</b></li>
<p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can <li class="padding-top-double"><span class="circle">02</span> <i>(The following commands can
be issued by directly typing into the terminal of the device or by an <b>'ssh'</b> login be issued by directly typing into the terminal of the device or by an <b>'ssh'</b> login
from a remote PC)</i></p> from a remote PC)</i></li>
<p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup <li class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup
files using the following command: 'curl -k < url_link_received_from_the_above_step >> files using the following command: 'curl -k < url_link_received_from_the_above_step >>
Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></li>
</ul>
<br> <br>
</div> </div>
@ -300,19 +272,5 @@
{{#zone "bottomJs"}} {{#zone "bottomJs"}}
{{js "/js/download.js"}} {{js "/js/download.js"}}
{{js "/js/jquery.validate.js"}} {{js "/js/jquery.validate.js"}}
<script type="text/javascript">
$(document).ready(function () {
toggleEnrollment();
});
function toggleEnrollment() {
$(".modalpopup-content").html($("#qr-code-modal").html());
//generateQRCode(".modalpopup-content .qr-code");
showPopup();
}
</script>
{{/zone}} {{/zone}}

@ -4,7 +4,7 @@ function onRequest(context) {
var deviceId = request.getParameter("id"); var deviceId = request.getParameter("id");
if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) { if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
var deviceModule = require("/modules/device.js").deviceModule; var deviceModule = require("/app/modules/device.js").deviceModule;
var device = deviceModule.viewDevice(deviceType, deviceId); var device = deviceModule.viewDevice(deviceType, deviceId);
if (device) { if (device) {

@ -1,37 +1,27 @@
<div class="col-lg-12 margin-top-double"> <div class="col-lg-12 margin-top-double">
<h1 class="grey ">Virtual Firealrm</h1> <h1 class="grey ">Virtual Firealrm</h1>
<hr> <hr>
<p class="margin-bottom-double light-grey ">Connect your Android device <p class="margin-bottom-double light-grey ">Connect your Android device to the WSO2 device cloud.</p>
to the WSO2 device cloud.</p>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{@unit.publicUri}}/images/firealarm.png" class="img-responsive"> <img src="{{@unit.publicUri}}/images/firealarm.png" class="img-responsive">
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top"> <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h3 class="uppercase">Ingredients</h3> <h3 class="uppercase">Ingredients</h3>
<hr> <hr>
<p class="grey margin-top">Hardware Requirements </p> <p class="grey margin-top">Hardware Requirements </p>
<br> <br>
<ul class="list-unstyled">
<span class="fw-stack fw-lg margin-right"> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-ring fw-stack-2x"> </i> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Raspberry Pi (Internet Enabled)</li>
<i class="fw fw-right-arrow fw-stack-1x"></i> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
</span> Raspberry Pi (Internet Enabled)<br/> <i class="fw fw-right-arrow fw-stack-1x"></i></span> DHT11 Temperature Sensor</li>
<span class="fw-stack fw-lg margin-right"> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-ring fw-stack-2x"> </i> <i class="fw fw-right-arrow fw-stack-1x"></i></span> LED</li>
<i class="fw fw-right-arrow fw-stack-1x"></i> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
</span> DHT11 Temperature Sensor<br/> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Buzzer(3v)</li>
<span class="fw-stack fw-lg margin-right"> </ul>
<i class="fw fw-ring fw-stack-2x"> </i> <br>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span> LED<br/>
<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> Buzzer(3v)<br/>
<br>
<a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download</a> <a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download</a>
@ -39,7 +29,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="row"> <div class="row">
<div class="col-md-7 center-container"> <div class="col-md-7 center-container">
<h3>Name your device and download the agent from following link.dsfsdfdsf</h3> <h3>Name your device and download the agent from following link.</h3>
<br/> <br/>
<form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download"> <form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download">
<div class="control-group"> <div class="control-group">
@ -50,7 +40,7 @@
name="deviceName" size="60" required> name="deviceName" size="60" required>
<br/><br/> <br/><br/>
<input type="hidden" class="deviceType" name="deviceType" value="virtual_firealarm"/> <input type="hidden" class="deviceType" name="deviceType" value="virtual_firealarm"/>
<input type="radio" name="sketchType" value="simple_agent" id="simple_agent"> <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp; <input type="radio" name="sketchType" value="simple_agent" id="simple_agent" checked> <label for="simple_agent">Simple Agent</label> &nbsp;&nbsp;
<input type="radio" name="sketchType" value="advanced_agent" id="advanced_agent"> <label for="advanced_agent">Advanced Agent</label> <input type="radio" name="sketchType" value="advanced_agent" id="advanced_agent"> <label for="advanced_agent">Advanced Agent</label>
</div> </div>
</div> </div>
@ -63,7 +53,7 @@
</a> </a>
&nbsp;&nbsp; &nbsp;&nbsp;
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
@ -155,40 +145,38 @@
<br/><br/> <br/><br/>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg "> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h3 class="uppercase">Prepare</h3><hr> <h3 class="uppercase">Prepare</h3><hr>
<p class="grey margin-top">Get your device ready</p> <p class="grey margin-top">Get your device ready</p>
<br/> <ul class="list-unstyled">
<li class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</li>
<p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</p> <li class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</li>
<p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</p> <li class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</li>
<p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p> </ul>
<br>
<br> </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Schematic Diagram</h3><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
<img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
</a>
</center>
<br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Connect (Quick Start)</h3><hr> <h3 class="uppercase">Schematic Diagram</h3><hr>
<p class="grey margin-top">Internet of Things Foundation Quickstart connection</p> <p class="grey margin-top">Click on the image to zoom</p>
<br/> <center>
<a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
<img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
</a>
</center>
<br/>
</div>
<p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></p> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></p> <h3 class="uppercase">Connect (Quick Start)</h3><hr>
<p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p> <p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
<ul class="list-unstyled">
<br> <li class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></li>
</div> <li class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></li>
<li class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></li>
</ul>
<br/>
</div>
</div> </div>
@ -272,5 +260,4 @@
} }
</script> </script>
{{/zone}} {{/zone}}

@ -4,7 +4,7 @@ function onRequest(context) {
var deviceId = request.getParameter("id"); var deviceId = request.getParameter("id");
if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) { if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
var deviceModule = require("/modules/device.js").deviceModule; var deviceModule = require("/app/modules/device.js").deviceModule;
var device = deviceModule.viewDevice(deviceType, deviceId); var device = deviceModule.viewDevice(deviceType, deviceId);
if (device) { if (device) {

@ -1,95 +1,49 @@
<div class="col-lg-12 margin-top-double"> <div class="col-lg-12 margin-top-double">
<h1 class="grey ">Android Mobile</h1> <h1 class="grey ">Android Mobile</h1>
<hr> <hr>
<p class="margin-bottom-double light-grey ">Connect your Android device <p class="margin-bottom-double light-grey ">Connect your Android device to the WSO2 device cloud.</p>
to the WSO2 device cloud.</p>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="/devicemgt/public/cdmf.unit.device.type.virtual_firealarm/images/thumb.png" class="img-responsive"> <i class="fw fw-android fw-5x"></i>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top"> <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h3 class="uppercase">Ingredients</h3> <h3 class="uppercase">Ingredients</h3>
<hr> <hr>
<p class="grey margin-top">Hardware Requirements </p> <p class="grey margin-top">Hardware Requirements </p>
<br> <br>
<ul class="list-unstyled">
<span class="fw-stack fw-lg margin-right"> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-ring fw-stack-2x"> </i> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Android Mobile</li>
<i class="fw fw-right-arrow fw-stack-1x"></i> </ul>
</span> Raspberry Pi (Internet Enabled)<br/> <br>
<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> DHT11 Temperature Sensor<br/>
<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> LED<br/>
<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> Buzzer(3v)<br/>
<br>
<a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}"><i class="fw fw-download"></i> Download</a> <a href="#" class="download-link btn-operations"><i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
<br/><br/> <br/><br/>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg "> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h3 class="uppercase">Prepare</h3><hr> <h3 class="uppercase">Prepare</h3><hr>
<p class="grey margin-top">Get your device ready</p> <p class="grey margin-top">Get your device ready</p>
<br/> <ul class="list-unstyled">
<li class="padding-top-double"><span class="circle">01</span> Download Device Agent into your Android Mobile.</li>
<p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</p> <li class="padding-top-double"><span class="circle">02</span> Install the Agent APK file.</li>
<p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</p> <li class="padding-top-double"><span class="circle">03</span> Configure the Agent App</li>
<p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p> </ul>
<br>
<br> </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Schematic Diagram</h3><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" target="_blank">
<img src="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
</a>
</center>
<br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Connect (Quick Start)</h3><hr>
<p class="grey margin-top">Internet of Things Foundation Quickstart connection</p>
<br/>
<p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></p>
<p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></p>
<p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p>
<br>
</div>
</div> </div>
<div id="qr-code-modal" data-enrollment-url="{{deviceType.enrollmentURL}}" class="hidden"> <div id="qr-code-modal" data-enrollment-url="{{enrollmentURL}}" class="hidden">
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3> <h3>Scan QR code to start enrollment</h3>
Scan QR code to start enrollment <p>Please scan the QR code using your mobile device to retrieve enrollment URL.</p>
</h3>
<h4>
Please scan the QR code using your mobile device to retrieve enrollment URL.
</h4>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body col-centered "> <div class="panel-body col-centered">
<div class="qr-code"></div> <div class="qr-code"></div>
</div> </div>
</div> </div>
@ -98,54 +52,58 @@
</div> </div>
</div> </div>
<script type="text/javascript"> {{#zone "topCss"}}
<style type="text/css">
$(document).ready(function(){ .circle {
toggleEnrollment(); background: none repeat scroll 0 0 #191919;
}); border-radius: 50px;
height: 50px;
padding: 10px;
function toggleEnrollment(){ width: 50px;
$(".modalpopup-content").html($("#qr-code-modal").html()); color: #fff;
generateQRCode(".modalpopup-content .qr-code"); }
showPopup(); .padding-top-double {
} padding-top: 20px;
}
</script> .padding-double {
<style type="text/css"> padding: 20px;
.circle { }
background: none repeat scroll 0 0 #191919; .grey {
border-radius: 50px; color: #333;
height: 50px; }
padding: 10px; hr {
width: 50px; display: block;
color: #fff; height: 1px;
} border: 0;
.padding-top-double { border-top: 1px solid #7f7f7f;
padding-top: 20px; margin: 1em 0;
} padding: 0;
.padding-double { opacity: 0.2;
padding: 20px; }
} .light-grey {
.grey { color: #7c7c7c;
color: #333; }
} .uppercase {
hr { text-transform: uppercase;
display: block; }
height: 1px; .grey-bg {
border: 0; background-color: #f6f4f4;
border-top: 1px solid #7f7f7f; }
margin: 1em 0; </style>
padding: 0; {{/zone}}
opacity: 0.2;
} {{#zone "bottomJs"}}
.light-grey { <script type="text/javascript">
color: #7c7c7c;
} $(".download-link").click(function(){
.uppercase { toggleEnrollment();
text-transform: uppercase; });
}
.grey-bg { function toggleEnrollment(){
background-color: #f6f4f4; $(".modalpopup-content").html($("#qr-code-modal").html());
} generateQRCode(".modalpopup-content .qr-code");
</style> showPopup();
}
</script>
{{/zone}}

@ -0,0 +1,6 @@
function onRequest(context){
var viewModel = {};
var devicemgtProps = require('/app/conf/devicemgt-props.js').config();
viewModel.enrollmentURL = devicemgtProps.enrollmentURL;
return viewModel;
}

@ -4,7 +4,7 @@ function onRequest(context) {
var deviceId = request.getParameter("id"); var deviceId = request.getParameter("id");
if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) { if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
var deviceModule = require("/modules/device.js").deviceModule; var deviceModule = require("/app/modules/device.js").deviceModule;
var device = deviceModule.viewDevice(deviceType, deviceId); var device = deviceModule.viewDevice(deviceType, deviceId);
if (device) { if (device) {

@ -5,7 +5,7 @@
to the WSO2 device cloud.</p> to the WSO2 device cloud.</p>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="/devicemgt/public/cdmf.unit.device.type.virtual_firealarm/images/thumb.png" class="img-responsive"> <i class="fw fw-windows fw-5x"></i>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top"> <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h3 class="uppercase">Ingredients</h3> <h3 class="uppercase">Ingredients</h3>
@ -13,83 +13,43 @@
<p class="grey margin-top">Hardware Requirements </p> <p class="grey margin-top">Hardware Requirements </p>
<br> <br>
<span class="fw-stack fw-lg margin-right"> <ul class="list-unstyled">
<i class="fw fw-ring fw-stack-2x"> </i> <li><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> <i class="fw fw-right-arrow fw-stack-1x"></i></span> Windows Mobile</li>
</span> Raspberry Pi (Internet Enabled)<br/> <li><span class="fw-stack fw-lg margin-right"><i class="fw fw-ring fw-stack-2x"></i>
<span class="fw-stack fw-lg margin-right"> <i class="fw fw-right-arrow fw-stack-1x"></i></span> QR Code Scanner App</li>
<i class="fw fw-ring fw-stack-2x"> </i> </ul>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span> DHT11 Temperature Sensor<br/>
<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> LED<br/>
<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> Buzzer(3v)<br/>
<br> <br>
<a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}">
<a href="#" class="download-link btn-operations" data-devicetype="{{@uriParams.deviceType}}" data-sketchtype="{{@uriParams.deviceType}}"><i class="fw fw-download"></i> Download</a> <i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
<br/><br/> <br/><br/>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h3 class="uppercase">Prepare</h3><hr>
<p class="grey margin-top">Get your device ready</p>
<br/>
<p class="padding-top-double"><span class="circle">01</span> Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</p>
<p class="padding-top-double"><span class="circle">02</span> Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</p>
<p class="padding-top-double"><span class="circle">03</span> Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</p>
<br>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Schematic Diagram</h3><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" target="_blank">
<img src="/public/cdmf.unit.device.type.virtual_firealarm/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px">
</a>
</center>
<br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double">
<h3 class="uppercase">Connect (Quick Start)</h3><hr> <h3 class="uppercase">Connect (Quick Start)</h3><hr>
<p class="grey margin-top">Internet of Things Foundation Quickstart connection</p> <p class="grey margin-top">Quickstart connection</p>
<br/> <br/>
<ul class="list-unstyled">
<p class="padding-top-double"><span class="circle">01</span> <b>Click on the <i>'Create DEB'</i> button above to get the download link for the FireAlarm setup files</b></p> <li class="padding-top-double"><span class="circle">01</span> Click on <b>`Enroll Device`</b></li>
<p class="padding-top-double"><span class="circle">02</span> <i>(The following commands can be issued by directly typing into the terminal of the device or by an <b>'ssh'<b> login from a remote PC)</i></p> <li class="padding-top-double"><span class="circle">02</span> Get your mobile and scan the QR Code to download the <i>Agent App</i></li>
<p class="padding-top-double"><span class="circle">03</span> <b>Download the FireAlarm setup files using the following command: 'curl -k < url_link_received_from_the_above_step >> Agent.zip'</b><br/><i>This will download a zip file named 'Agent.zip'</i></p> <li class="padding-top-double"><span class="circle">03</span> Once downloaded, start installing and follow the instructions</li>
</ul>
<br> <br>
</div> </div>
</div> </div>
<div id="qr-code-modal" data-enrollment-url="{{enrollmentURL}}" class="hidden">
<div id="qr-code-modal" data-enrollment-url="{{deviceType.enrollmentURL}}" class="hidden">
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3> <h3>Scan QR code to start enrollment</h3>
Scan QR code to start enrollment <p>Please scan the QR code using your mobile device to retrieve enrollment URL.</p>
</h3>
<h4>
Please scan the QR code using your mobile device to retrieve enrollment URL.
</h4>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body col-centered "> <div class="panel-body col-centered">
<div class="qr-code"></div> <div class="qr-code"></div>
</div> </div>
</div> </div>
@ -98,13 +58,54 @@
</div> </div>
</div> </div>
{{#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;
}
</style>
{{/zone}}
{{#zone "bottomJs"}}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(".download-link").click(function(){
toggleEnrollment(); toggleEnrollment();
}); });
function toggleEnrollment(){ function toggleEnrollment(){
$(".modalpopup-content").html($("#qr-code-modal").html()); $(".modalpopup-content").html($("#qr-code-modal").html());
generateQRCode(".modalpopup-content .qr-code"); generateQRCode(".modalpopup-content .qr-code");
@ -112,40 +113,4 @@
} }
</script> </script>
<style type="text/css"> {{/zone}}
.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;
}
</style>

@ -0,0 +1,6 @@
function onRequest(context){
var viewModel = {};
var devicemgtProps = require('/app/conf/devicemgt-props.js').config();
viewModel.enrollmentURL = devicemgtProps.enrollmentURL;
return viewModel;
}
Loading…
Cancel
Save