You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
product-iots/modules/samples/firealarm/units/firealarm.hbs

214 lines
12 KiB

{{#zone "main"}}
<div class="container container-bg white-bg">
<div class=" margin-top-double">
<div class="row row padding-top-double padding-bottom-double margin-bottom-double">
<div class="col-lg-12 margin-top-double">
<h1 class="grey ">Fire Alarm</h1>
<hr>
<p class="margin-bottom-double light-grey ">Connect your Fire Alarm device
to the WSO2 IoT server. </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/firealarm.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<h2 class="uppercase">Ingredients</h2>
<hr>
<p class="grey margin-top">Hardware Requirements </p>
<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>Raspberry Pi (Internet Enabled)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
<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/><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
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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="firealarm" data-sketchtype="firealarm"><i class="fw fw-download"></i> Download</a>
<!--form method="POST" class="form-login-box float-left"
action="{{sketchPath}}">
<input type="hidden" name="deviceType" value="firealarm" />
<input type="hidden" name="sketchType" value="firealarm" />
<button class="wr-btn margin-right" type="submit">Create
Sketch
for Ethernet</button>
</form-->
<br/>
</div>
<div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h2 class="uppercase">Prepare</h2><hr>
<p class="grey margin-top"><b>Get your device ready</b></p>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">01 </span> <span class="padding-left"><b>Set up your RaspberryPi device as shown in the schematic below and get the FireAlarm setup.</b></span>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom">
<span class="circle">02 </span> <span class="padding-left"><b>Connect a monitor to your RaspberryPi via the HDMI cable to get a UI view of the device.</b></span>
</div>
<div class="margin-doubles padding-top-double margin-bottom-double light-grey margin-left-double margin-bottom">
<span class="circle">03 </span> <span class="padding-left"><b>Get the RaspberryPi to connect to the internet (via Ethernet or Wifi) and note its IP_ADDRESS</b></span>
</div>
</div>
<div class ="col-xs-12 col-sm-6 col-md-3 col-lg-12 padding-double grey-bg ">
<h2 class="uppercase">Schematic Diagram</h2><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="{{self.publicURL}}/images/schematicsGuide.png" target="_blank">
<img src="{{self.publicURL}}/images/schematicsGuide.png" class="img-responsive" style="max-width: 500px; max-height: 500px" />
</a>
</center>
</div>
</div>
<div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
<div class="col-lg-12 margin-top-double">
<h2 class="uppercase ">Connect (Quickstart)</h2>
<hr>
<p class="margin-bottom-double light-grey ">Internet of Things Foundation Quickstart connection </p>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">01 </span> <span class="padding-left"><b>Click on the <i>"Create DEB"</i> button above to get the download link for the FireAlarm setup files</b></span><br>
</div>
<br>
<div>
<span class="padding-left"><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></span>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">02 </span> <span class="padding-left"><b>Download the FireAlarm setup files using the following command: "curl -k &#60;url_link_received_from_the_above_step&#62; > Agent.zip"</b></span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i> This will download a zip file named &#34;Agent.zip&#34;</i>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">03 </span> <span class="padding-left"><b>Run the following commands to successfuly install the package and get the service running:</b></span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>&nbsp;&nbsp;cd &#60PATH_WHERE_THE_DOWNLOADED_&#34;Agent.zip&#34;_FILE_IS&#62 </b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>unzip Agent.zip -d Agent</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>cd Agent</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>sudo chmod 755 startservice.sh</b> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>sudo ./startservice.sh</b> <br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">04 </span> <span class="padding-left">Follow the installation instructions and complete installation. Upon completion the Agent would have started automatically</span><br>
</div>
</div>
</div>
</div>
<div id="download-device-modal-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Please download the file from following link.</h3>
<br/>
<div class="buttons">
<form method="POST" action="{{sketchPath}}">
<input type="hidden" name="deviceType" value="firealarm" />
<input type="hidden" name="sketchType" value="firealarm" />
<button class="btn-operations" type="submit" style="font-size: 13px;border:none; padding: 10px 10px; display: inline-block; margin-right: 2px; text-decoration: none;">Download Now</button>
&nbsp;&nbsp;
<a href="#" id="download-device-download-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Copy Link&nbsp;&nbsp;&nbsp;&nbsp;
</a>
&nbsp;&nbsp;
</form>
</div>
</div>
</div>
</div>
</div>
<div id="download-device-modal-content-links" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<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="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Exception at backend. Try Later.</h3>
<div class="buttons">
<a href="#" id="device-400-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="device-403-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Action not permitted.</h3>
<div class="buttons">
<a href="#" id="device-403-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="device-409-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Device Sketch does not exist.</h3>
<div class="buttons">
<a href="#" id="device-409-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
<div id="device-unexpected-error-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Unexpected error.</h3>
<div class="buttons">
<a href="#" id="device-unexpected-error-link" class="btn-operations">
&nbsp;&nbsp;&nbsp;&nbsp;Ok&nbsp;&nbsp;&nbsp;&nbsp;
</a>
</div>
</div>
</div>
</div>
</div>
{{/zone}}
{{#zone "topCss"}}
<link href="{{self.publicURL}}/css/fontwso2.css" rel="stylesheet">
<link href="{{self.publicURL}}/css/fontwso2-extend.css" rel="stylesheet">
{{/zone}}
{{#zone "bottomJs"}}
<script src="{{self.publicURL}}/js/firealarm.js"></script>
{{/zone}}