minor ui changes

merge-requests/1/head
Rasika Perera 9 years ago
parent 864ee109a5
commit 29001aca93

@ -105,7 +105,7 @@ if (uriMatcher.match("/{context}/api/device/sketch/download/{downloadId}")) {
sketchGenerateLinkEndPoint = deviceManagerService + "/device/" + sketchType + "/generate_link";
var fileId = get(sketchGenerateLinkEndPoint + "?owner=" + user.username, null, "text");
result = carbonHttpsServletTransport + constants.WEB_APP_CONTEXT + "/api/device/sketch/download/" + fileId.data;
result = "curl -k " + carbonHttpsServletTransport + constants.WEB_APP_CONTEXT + "/api/device/sketch/download/" + fileId.data + " > agent.zip";
}
}

@ -8,8 +8,6 @@
<p class="margin-bottom-double light-grey ">Connect your Android
to the WSO2 device cloud. </p>
</div>
</div>
<div class="row margin-bottom-double">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/android.png" class="img-responsive">
</div>

@ -8,8 +8,6 @@
<p class="margin-bottom-double light-grey ">Connect your Android Sense
to the WSO2 device cloud. </p>
</div>
</div>
<div class="row margin-bottom-double">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/android_sense.png" class="img-responsive">
</div>

@ -39,7 +39,7 @@ function onRequest(context) {
links.users.push(dashboardLink);
links.policies.push(dashboardLink);
links.profiles.push(dashboardLink);
links.store.push(dashboardLink);
//links.store.push(dashboardLink);
links.store.push(storeLink);
links['group-mgt'].push(dashboardLink);
var groupId = request.getParameter("groupId");

@ -8,8 +8,6 @@
<p class="margin-bottom-double light-grey ">Connect your Arduino Uno device
to the WSO2 Device Cloud. </p>
</div>
</div>
<div class="row margin-bottom-double">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<img src="{{self.publicURL}}/images/arduino.png" class="img-responsive">
</div>

@ -46,13 +46,13 @@
</span>
View
</a>
<a href="user-create.html">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-add fw-stack-1x"></i>
</span>
Add
</a>
<!--<a href="user-create.html">-->
<!--<span class="fw-stack">-->
<!--<i class="fw fw-ring fw-stack-2x"></i>-->
<!--<i class="fw fw-add fw-stack-1x"></i>-->
<!--</span>-->
<!--Add-->
<!--</a>-->
</span>
</div>
</div>

@ -8,8 +8,6 @@
<p class="margin-bottom-double light-grey ">Connect your Fire Alarm device
to the WSO2 device cloud. </p>
</div>
</div>
<div class="row margin-bottom-double">
<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>
@ -20,25 +18,25 @@
<br>
<span class="fw-stack fw-lg margin-right">
<i class="fw fw-ring fw-stack-2x"> </i>
<i class="fw fw-right-arrow-2 fw-stack-1x"></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-2 fw-stack-1x"></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-2 fw-stack-1x"></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-2 fw-stack-1x"></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">Download</a>
<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" />

@ -1,213 +0,0 @@
{{#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 device cloud. </p>
</div>
</div>
<div class="row margin-bottom-double">
<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-2 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-2 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-2 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-2 fw-stack-1x"></i>
</span>Buzzer(3v)<br><br>
<a href="#" class="download-link btn-operations" data-devicetype="firealarm" data-sketchtype="firealarm">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: "wget &#60;url_link_received_from_the_above_step&#62;"</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;FireAlarmAgent.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>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">04 </span> <span class="padding-left">Use the Sketch program to open the samples code samples/quickstart/quickstart.ino</span><br>
</div>
<div class="margin-doubles padding-top-double light-grey margin-left-double margin-bottom ">
<span class="circle">05 </span> <span class="padding-left">View the lower part of the Sketch pad window to check that the COM connection is shown as active</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}}

@ -73,12 +73,20 @@ function attachEvents() {
payload,
function (data, textStatus, jqxhr) {
if(jqxhr.status == 200) {
if(data == "403"){
$(modalPopupContent).html($('#device-403-content').html());
$("#device-403-link").click(function () {
window.location = "/iotserver/login";
});
showPopup();
}else {
$(modalPopupContent).html($('#download-device-modal-content-links').html());
$("#download-device-url").val(data);
$("#download-device-url").focus(function () {
$(this).select();
});
showPopup();
}
}else{
$(modalPopupContent).html($('#device-403-content').html());
$("#device-403-link").click(function () {

@ -155,7 +155,7 @@
<div class="row wr-wizard">
<div class="col-md-4 col-xs-4">
<div class="itm-wiz itm-wiz-current" data-step="policy-devicetype"><div class="wiz-no">1</div><div class="wiz-lbl hidden-xs"><span>Select Platform</span></div></div>
<div class="itm-wiz itm-wiz-current" data-step="policy-devicetype"><div class="wiz-no">1</div><div class="wiz-lbl hidden-xs"><span>Select Device Type</span></div></div>
<br class="c-both" />
</div>
<div class="col-md-4 col-xs-4">

@ -2,43 +2,20 @@
<!-- anonymous landing page -->
<div class="container wr-content-alt">
<!--<div class="row wr-wizard">-->
<!--<div class="col-md-4 col-xs-4">-->
<!--<div class="itm-wiz">-->
<!--<div class="wiz-no"><img src="{{self.publicURL}}/images/step-01.png"></div>-->
<!--<div class="wiz-lbl hidden-xs"><span>Select your Device</span></div>-->
<!--</div>-->
<!--<br class="c-both"/>-->
<!--</div>-->
<!--<div class="col-md-4 col-xs-4">-->
<!--<div class="itm-wiz">-->
<!--<div class="wiz-no"><img src="{{self.publicURL}}/images/step-02.png"></div>-->
<!--<div class="wiz-lbl hidden-xs"><span>Enroll your Device</span></div>-->
<!--</div>-->
<!--<br class="c-both"/>-->
<!--</div>-->
<!--<div class="col-md-4 col-xs-4">-->
<!--<div class="itm-wiz">-->
<!--<div class="wiz-no"><img src="{{self.publicURL}}/images/step-03.png"></div>-->
<!--<div class="wiz-lbl hidden-xs"><span>Manage your Device</span></div>-->
<!--</div>-->
<!--<br class="c-both"/>-->
<!--</div>-->
<!--</div>-->
<div class="row wr-wizard">
<div class="row">
<div class="col-md-3 col-xs-4 col-md-offset-1">
<div class="itm-wiz"><div class="wiz-no col-md-offset-2"><img src="{{self.publicURL}}/images/step-01.png" style="width:85px" ></div><div class="wiz-lbl hidden-xs"><span>Select your Device</span></div></div>
<div class="itm-wiz"><div class="col-md-offset-2"><img src="{{self.publicURL}}/images/step-01.png" style="width:85px" ></div><div class="wiz-lbl hidden-xs"><span>Select your Device</span></div></div>
<br class="c-both" />
</div>
<div class="col-md-1 col-xs-1"><i class="fw fw-right-arrow" style="font-size:28px; font-weight:100; margin-top:28px; color:#11375B"></i></div>
<div class="col-md-1 col-xs-1 wr-showcase"><i class="fw fw-right" style="font-size:28px; font-weight:100; margin-top:28px; color:#11375B"></i></div>
<div class="col-md-3 col-xs-4">
<div class="itm-wiz"><div class="wiz-no col-md-offset-2"><img src="{{self.publicURL}}/images/step-02.png" style="width:85px"></div><div class="wiz-lbl hidden-xs"><span>Enroll your Device</span></div></div>
<div class="itm-wiz"><div class="col-md-offset-2"><img src="{{self.publicURL}}/images/step-02.png" style="width:85px"></div><div class="wiz-lbl hidden-xs"><span>Enroll your Device</span></div></div>
<br class="c-both" />
</div>
<div class="col-md-1 col-xs-1"><i class="fw fw-right-arrow" style="font-size:28px; font-weight:100; margin-top:28px; color:#11375B"></i></div>
<div class="col-md-1 col-xs-1 wr-showcase"><i class="fw fw-right" style="font-size:28px; font-weight:100; margin-top:28px; color:#11375B"></i></div>
<div class="col-md-3 col-xs-4 ">
<div class="itm-wiz"><div class="wiz-no col-md-offset-2"><img src="{{self.publicURL}}/images/step-03.png" style="width:85px"></div><div class="wiz-lbl hidden-xs"><span>Manage your Device</span></div></div>
<div class="itm-wiz"><div class="col-md-offset-2"><img src="{{self.publicURL}}/images/step-03.png" style="width:85px"></div><div class="wiz-lbl hidden-xs"><span>Manage your Device</span></div></div>
<br class="c-both" />
</div>
</div>

@ -631,3 +631,7 @@ input[type=checkbox] {
padding-left: 15px;
text-indent: -15px;
}
.CodeMirror pre{
padding-left: 45px !important;
}
Loading…
Cancel
Save