community/device-mgt-plugins
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-plugins.git synced 2025-09-16 23:42:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Merging UI/UX improvements
This commit is contained in:
Charitha Goonetilleke 2016-12-14 14:13:30 +05:30 committed by GitHub
commit cf2753832f
5 changed files with 115 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.type-view/type-view.hbs
View File

@ -147,15 +147,15 @@
<hr> <hr>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="padding-top-double"> <li class="padding-top-double">
<span class="circle">01</span> <span class="badge">01</span>
Connect Android device to network. Connect Android device to network.
</li> </li>
<li class="padding-top-double"> <li class="padding-top-double">
<span class="circle">02</span> <span class="badge">02</span>
Start Android Sense app in your device. Start Android Sense app in your device.
</li> </li>
<li class="padding-top-double"> <li class="padding-top-double">
<span class="circle">03</span> <span class="badge">03</span>
Fill login form with the credentials. Fill login form with the credentials.
<i>(Use server URL as [ https://&lt;WSO2_IoT_SERVER_HOST&gt;:&lt; <i>(Use server URL as [ https://&lt;WSO2_IoT_SERVER_HOST&gt;:&lt;
HTTPS_SERVER_PORT&gt; ] and click on HTTPS_SERVER_PORT&gt; ] and click on
@ -169,7 +169,7 @@
</li> </li>
<li class="padding-top-double"> <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 Once the device is enrolled, click on <strong>[+]</strong> button to
select the sensors. select the sensors.
<a href="{{@unit.publicUri}}/images/selectSensorView.png" target="_blank" <a href="{{@unit.publicUri}}/images/selectSensorView.png" target="_blank"
@ -178,7 +178,7 @@
</a> </a>
</li> </li>
<li class="padding-top-double"> <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 Click on <i>[Publish data]</i> button to publish sensor readings to
IoT server. IoT server.
<a href="{{@unit.publicUri}}/images/publishDataView.png" target="_blank" <a href="{{@unit.publicUri}}/images/publishDataView.png" target="_blank"
@ -190,41 +190,47 @@
<br> <br>
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double">
<h3 class="uppercase">Try Out</h3> <div class="row">
<hr> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
<ul class="list-unstyled"> <h3 class="uppercase">Try Out</h3>
<li class="padding-top-double"> <hr>
<span class="fw-stack fw-lg margin-right"> <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-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> </span>
You can view all your connected devices You can view all your connected devices
<a href="{{@app.context}}/devices">[Device Management]</a> page. <a href="{{@app.context}}/devices">[Device Management]</a> page.
</li> </li>
<li class="padding-top-double"> <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-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> </span>
You can select any one of your connected devices for available You can select any one of your connected devices for available
operations and Real-Time data monitoring. operations and Real-Time data monitoring.
</li> </li>
<li class="padding-top-double"> <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-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> For historical analytics of sensor data navigate to device </span> For historical analytics of sensor data navigate to device
analytics page. analytics page.
</li> </li>
</ul> </ul>
<br/> <br/>
<p class="grey margin-top">Click on the image to zoom</p> </div>
<center> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 padding-double">
<a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank"> <p class="grey margin-top">Click on the image to zoom</p>
<img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive"> <center>
</a> <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
</center> <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
</a>
</center>
</div>
</div>
</div> </div>
<div id="qr-code-modal" data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk" class="hidden"> <div id="qr-code-modal" data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk" class="hidden">

80
components/device-types/arduino-plugin/org.wso2.carbon.device.mgt.iot.arduino.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.arduino.type-view/type-view.hbs
View File

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

20
components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.type-view/type-view.hbs
View File

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

16
components/device-types/virtual-fire-alarm-plugin/org.wso2.carbon.device.mgt.iot.virtualfirealarm.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.virtual_firealarm.type-view/type-view.hbs
View File

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

20
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs
View File

@ -37,6 +37,26 @@
<br/><br/> <br/><br/>
</div> </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/> <br/>
{{#zone "topCss"}} {{#zone "topCss"}}