Merge pull request #478 from DimalChandrasiri/release-3.0.x

Merging UI/UX improvements
revert-dabc3590
Charitha Goonetilleke 8 years ago committed by GitHub
commit cf2753832f

@ -147,15 +147,15 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
<span class="badge">01</span>
Connect Android device to network.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">02</span>
Start Android Sense app in your device.
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">03</span>
Fill login form with the credentials.
<i>(Use server URL as [ https://&lt;WSO2_IoT_SERVER_HOST&gt;:&lt;
HTTPS_SERVER_PORT&gt; ] and click on
@ -169,7 +169,7 @@
</li>
<li class="padding-top-double">
<span class="circle">04</span>
<span class="badge">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"
@ -178,7 +178,7 @@
</a>
</li>
<li class="padding-top-double">
<span class="circle">05</span>
<span class="badge">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"
@ -190,41 +190,47 @@
<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">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double">
<div class="row">
<div class="col-xs-6 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 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">
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 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">
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 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>
</center>
analytics page.
</li>
</ul>
<br/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
<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>
</div>
</div>
<div id="qr-code-modal" data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk" class="hidden">

@ -196,11 +196,11 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
<span class="badge">01</span>
Wifi-Shield mounted onto the Arduino-UNO board
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">02</span>
Connect LED bulb to arduino as follows
<br/><br/>
<a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
@ -210,20 +210,20 @@
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">03</span>
Download Arduino-Sketch from [Download Sketch] link above.
</li>
<li class="padding-top-double">
<span class="circle">04</span>
<span class="badge">04</span>
Unzip the downloaded Arduino Agent
</li>
<li class="padding-top-double">
<span class="circle">05</span>
<span class="badge">05</span>
Create a folder called "ArduinoBoardSketch" and move all source files
inside
</li>
<li class="padding-top-double">
<span class="circle">06</span>
<span class="badge">06</span>
Open ArduinoBoardSketch.h and provide appropriate values for
<i>[WLAN_SSID]</i>,
<i>[WLAN_PASS]</i>,
@ -233,19 +233,19 @@
variables according to your network.
</li>
<li class="padding-top-double">
<span class="circle">07</span>
<span class="badge">07</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">
<span class="fw-stack margin-right">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span>
Arduino will publish it's internal temperature to WSO2-IoT-Server
<br/><br/>
<span class="fw-stack fw-lg margin-right">
<span class="fw-stack margin-right">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span>
@ -256,36 +256,38 @@
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double">
<div class="col-xs-6 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="circle">01</span>
You can view all your connected devices at
<a href="{{@app.context}}/devices">[Device Management]</a> page.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
Select one of connected devices and check for available control
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 IoT-Server by
navigating to Device Analytics page.
</li>
</ul>
<br/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
<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 class="row">
<div class="col-xs-6 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="badge">01</span>
You can view all your connected devices at
<a href="{{@app.context}}/devices">[Device Management]</a> page.
</li>
<li class="padding-top-double">
<span class="badge">02</span>
Select one of connected devices and check for available control
operations and monitor Real-Time data.
</li>
<li class="padding-top-double">
<span class="badge">03</span>
You can also view analytics of the data published to IoT-Server by
navigating to Device Analytics page.
</li>
</ul>
<br/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
<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>
</div>
</div>

@ -192,31 +192,31 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
<span class="badge">01</span>
Connect RaspberryPi, DHT11 Temperature sensor and LED as per the
schematic below.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">02</span>
Ensure your RaspberryPi Board can connect to Internet.
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">03</span>
Download RaspberryPi Agent via [Download Agent] button above.
(Alternatively you can use the "curl" command to directly download the Agent to your
RaspberryPi.)
</li>
<li class="padding-top-double">
<span class="circle">04</span>
<span class="badge">04</span>
Copy downloaded Agent into your RaspberryPi.
</li>
<li class="padding-top-double">
<span class="circle">05</span>
<span class="badge">05</span>
Unzip the downloaded Agent and start terminal to run below commands.
</li>
<li class="padding-top-double">
<span class="fw-stack fw-lg margin-right">
<span class="fw-stack margin-right">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span>
@ -225,7 +225,7 @@
</li>
<li class="padding-top-double">
<span class="fw-stack fw-lg margin-right">
<span class="fw-stack margin-right">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-right-arrow fw-stack-1x"></i>
</span>
@ -251,17 +251,17 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
<span class="badge">01</span>
You can view all your connected devices at
<a href="{{@app.context}}/devices">[Device Management]</a> page.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">02</span>
Select one of connected devices and check for available control
operations and monitor Real-Time data.
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">03</span>
You can also view analytics of the data published to IoT-Server by
navigating to Device Analytics page.
</li>

@ -205,19 +205,15 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
Download your VirtualFireAlarm using [Download Agent] button above.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">01</span>
Unzip the downloaded Agent.
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">02</span>
Move into the unzipped Agent folder in the terminal.
</li>
<li class="padding-top-double">
<span class="circle">04</span>
<span class="badge">03</span>
Unzip the downloaded Agent and start terminal to run this command: [sh
start-device.sh]
</li>
@ -240,17 +236,17 @@
<hr>
<ul class="list-unstyled">
<li class="padding-top-double">
<span class="circle">01</span>
<span class="badge">01</span>
You can view all your connected devices at
<a href="{{@app.context}}/devices">[Device Management]</a> page.
</li>
<li class="padding-top-double">
<span class="circle">02</span>
<span class="badge">02</span>
Select one of connected devices and check for available control
operations and monitor Real-Time data.
</li>
<li class="padding-top-double">
<span class="circle">03</span>
<span class="badge">03</span>
You can also view analytics of the data published to IoT-Server by
navigating to Device Analytics page.
</li>

@ -37,6 +37,26 @@
<br/><br/>
</div>
<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="badge">01</span> Download Device Agent into your Android Mobile.</li>
<li><span class="badge">02</span> Install Agent APK file.</li>
<li><span class="badge">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">
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href="{{@unit.publicUri}}/images/android_device.png" target="_blank">
<img src="{{@unit.publicUri}}/images/android_device.png" class="img-responsive">
</a>
</center>
</div>
<br/>
{{#zone "topCss"}}
@ -45,4 +65,4 @@
{{#zone "bottomJs"}}
{{js "js/type-view.js"}}
{{/zone}}
{{/zone}}

Loading…
Cancel
Save