forked from community/device-mgt-plugins
Merge branch 'IoTS-1.0.0-M1' of https://github.com/wso2/carbon-device-mgt-plugins into IoTS-1.0.0-M1
Conflicts: components/device-mgt-iot-arduino/org.wso2.carbon.device.mgt.iot.arduino.mgt.service.impl/src/main/java/org/wso2/carbon/device/mgt/iot/arduino/service/util/ArduinoServiceUtils.java features/device-mgt-iot-digitaldisplay-feature/org.wso2.carbon.device.mgt.iot.digitaldisplay.feature/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.digital_display.type-view/type-view.hbs
Shabirmean
9 years ago
commit
f0b12bab62
@ -1,279 +1,95 @@
|
|||||||
<div class="col-lg-12 margin-top-double">
|
{{#zone "topCss"}}
|
||||||
<h1 class="grey ">Arduino</h1>
|
<style>
|
||||||
<hr>
|
.thumbnail.icon:before {
|
||||||
<p class="margin-bottom-double light-grey ">Connect your Arduino device to the WSO2 IoT Server.</p>
|
padding-top: 0;
|
||||||
</div>
|
}
|
||||||
|
</style>
|
||||||
|
{{/zone}}
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
|
{{#zone "device-thumbnail"}}
|
||||||
<img src="{{@unit.publicUri}}/images/ardunio-icon.png" class="img-responsive">
|
<img src="{{@unit.publicUri}}/images/ardunio-icon.png" class="img-responsive">
|
||||||
</div>
|
{{/zone}}
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
|
|
||||||
|
|
||||||
<h3 class="uppercase">What You Need</h3>
|
|
||||||
<hr>
|
|
||||||
<p class="grey margin-top">You'll need the following "Hardware":</p>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li class="padding-top-double"><span class="circle">ITEM 01</span> Arduino UNO Board.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">ITEM 02</span> Adafruit Wifi-Sheild for
|
|
||||||
Arduino.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">ITEM 03</span> An LED Bulb connected to Pin
|
|
||||||
13. <i>(If not available, will use the one on
|
|
||||||
the board.)</i>
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">GO-TO PREPARE</span></li>
|
|
||||||
</ul>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<a href="/api-store/apis/info?name={{@uriParams.deviceType}}&version=1.0.0&provider=admin"
|
|
||||||
class="btn-operations" target="_blank"><i class="fw fw-api"></i> View API</a>
|
|
||||||
<a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Download Sketch</a>
|
|
||||||
|
|
||||||
<div id="download-device-modal-content" class="hide">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-7 center-container">
|
|
||||||
<h3>Name your device and download the agent from following link.</h3>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<form id="downloadForm" method="GET" action="{{@app.context}}/api/devices/sketch/download">
|
{{#zone "device-opetations"}}
|
||||||
<div class="control-group">
|
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
|
||||||
<div class="controls">
|
Operations
|
||||||
<input class="new-device-name" style="color:#3f3f3f;padding:5px"
|
|
||||||
type="text"
|
|
||||||
placeholder="Ex. Home_Arduino"
|
|
||||||
name="deviceName" size="60" required>
|
|
||||||
<br/><br/>
|
|
||||||
<input type="hidden" class="deviceType" name="deviceType"
|
|
||||||
value="{{@uriParams.deviceType}}"/>
|
|
||||||
<input type="hidden" class="sketchType" name="sketchType"
|
|
||||||
value="{{@uriParams.deviceType}}"/>
|
|
||||||
</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>
|
</div>
|
||||||
|
<div class="add-margin-top-4x">
|
||||||
<div id="device-400-content" class="hide">
|
{{unit "iot.unit.device.operation-bar" device=device}}
|
||||||
<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>
|
||||||
|
{{/zone}}
|
||||||
|
|
||||||
<div id="device-401-content" class="hide">
|
{{#zone "device-detail-properties"}}
|
||||||
<div class="modal-content">
|
<div class="media">
|
||||||
<div class="row">
|
<div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
|
||||||
<div class="col-md-7 col-centered center-container">
|
<ul class="list-group" role="tablist">
|
||||||
<h3>You have to log in first.</h3><br/>
|
<li class="active"><a class="list-group-item" href="#device_statistics" role="tab"
|
||||||
|
data-toggle="tab" aria-controls="device_statistics">Device
|
||||||
<div class="buttons">
|
Statistics</a>
|
||||||
<a href="#" id="device-401-link" class="blue-button">
|
</li>
|
||||||
Goto Login Page
|
<li><a class="list-group-item" href="#policy_compliance" role="tab"
|
||||||
</a>
|
data-toggle="tab" aria-controls="policy_compliance">Policy Compliance</a>
|
||||||
<a href="#" onclick="hidePopup();" class="btn-operations">
|
</li>
|
||||||
Cancel
|
<li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab"
|
||||||
</a>
|
aria-controls="event_log">Operations Log</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="media-body add-padding-left-5x remove-padding-xs tab-content">
|
||||||
|
<div class="panel-group tab-content">
|
||||||
|
|
||||||
<div id="device-403-content" class="hide">
|
<div class="panel panel-default tab-pane active"
|
||||||
<div class="modal-content">
|
id="device_statistics" role="tabpanel" aria-labelledby="device_statistics">
|
||||||
<div class="row">
|
<div class="panel-heading">Device Statistics</div>
|
||||||
<div class="col-md-7 col-centered center-container">
|
{{unit "iot.unit.device.stats" device=device}}
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="device-409-content" class="hide">
|
<div class="panel panel-default tab-pane" id="policy_compliance" role="tabpanel"
|
||||||
<div class="modal-content">
|
aria-labelledby="policy_compliance">
|
||||||
<div class="row">
|
<div class="panel-heading">Policy Compliance <span><a href="#"
|
||||||
<div class="col-md-7 col-centered center-container">
|
id="refresh-policy"><i
|
||||||
<h3>Device Sketch does not exist.</h3><br/>
|
class="fw fw-refresh"></i></a></span></div>
|
||||||
|
<div class="panel-body">
|
||||||
<div class="buttons">
|
<div id="policy-spinner" class="wr-advance-operations-init hidden">
|
||||||
<a href="#" id="device-409-link" class="btn-operations">
|
<br>
|
||||||
OK
|
|
||||||
</a>
|
<i class="fw fw-settings fw-spin fw-2x"></i>
|
||||||
|
|
||||||
|
Loading Policy Compliance . . .
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div id="policy-list-container">
|
||||||
|
<div class="panel-body">
|
||||||
|
Not available yet
|
||||||
|
</div>
|
||||||
|
<br class="c-both"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="panel panel-default tab-pane" id="event_log" role="tabpanel"
|
||||||
</div>
|
aria-labelledby="event_log">
|
||||||
</div>
|
<div class="panel-heading">Operations Log <span><a href="#"
|
||||||
|
id="refresh-operations"><i
|
||||||
<div id="device-unexpected-error-content" class="hide">
|
class="fw fw-refresh"></i></a></span></div>
|
||||||
<div class="modal-content">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div id="operations-spinner" class="wr-advance-operations-init hidden">
|
||||||
<div class="col-md-7 col-centered center-container">
|
<br>
|
||||||
<h3>Unexpected error.</h3><br/>
|
|
||||||
|
<i class="fw fw-settings fw-spin fw-2x"></i>
|
||||||
<div class="buttons">
|
|
||||||
<a href="#" id="device-unexpected-error-link" class="btn-operations">
|
Loading Operations Log . . .
|
||||||
OK
|
<br>
|
||||||
</a>
|
<br>
|
||||||
|
</div>
|
||||||
|
<div id="operations-log-container">
|
||||||
|
<div class="panel-body">
|
||||||
|
Not available yet
|
||||||
|
</div>
|
||||||
|
<br class="c-both"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
|
||||||
<p class="grey margin-top">Get the Wifi-Sheild mounted onto the Arduino-UNO board and follow the steps: </p>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li class="padding-top-double"><span class="circle">01</span> Download the Arduino-Sketch from
|
|
||||||
the [Download] link above.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">02</span> Unzip the downloaded
|
|
||||||
Arduino-Sketch and open the <i>"ArduinoBoardSketch.h"</i>
|
|
||||||
file.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">03</span> Provide appropriate values for
|
|
||||||
<i>[WLAN_SSID]</i> and <i>[WLAN_PASS]</i> variables according to your network.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">04</span> Burn the sketch onto your Arduino
|
|
||||||
board and let the program run.
|
|
||||||
</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>
|
|
||||||
The Arduino will publish its internal temperature to the WSO2-IoT-Server and its LED on
|
|
||||||
<i>PIN 13</i> can be controlled from our Device Management page.
|
|
||||||
</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>
|
|
||||||
<p class="grey margin-top">WSO2-IoT Server provides Analytics and Real-Time Statistics of your device</p>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
<li class="padding-top-double"><span class="circle">01</span> You can view all your created
|
|
||||||
devices at our <a href="{{@app.context}}/devices">[Device
|
|
||||||
Management]</a>
|
|
||||||
page.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">02</span> You can select any of your
|
|
||||||
created devices here and check for available
|
|
||||||
operations and monitor Real-Time data.
|
|
||||||
</li>
|
|
||||||
<li class="padding-top-double"><span class="circle">03</span> You can also view "Analytics" of
|
|
||||||
the data published to the IoT-Server by navigating
|
|
||||||
to the [Device-Analytics Page] from here.
|
|
||||||
</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>
|
|
||||||
</center>
|
|
||||||
|
|
||||||
</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"}}
|
|
||||||
{{js "/js/download.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}}
|
||||||
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 327 KiB |
Loading…
Reference in new issue