@ -1,16 +1,28 @@
<div class="col-lg-12 margin-top-double" xmlns="http://www.w3.org/1999/html">
{{ !
Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
WSO2 Inc. licenses this file to you under the Apache License,
Version 2.0 (the "License"); you may not use this file except
in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
}}
<div class="col-lg-12 margin-top-double">
<h1 class="grey ">Connected Cup</h1>
<hr>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
<div class="col-xs-12 col-sm- 4 col-md-3 col-lg-3 padding-top">
<img src=" {{ @ unit .publicUri }} /images/coffeecup.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
<h4 class="doc-link">Click
<a href="https://docs.wso2.com/display/IoTS100/Sample+-+Getting+the+Connected+Cup+into+the+WSO2+IoT+Server"
target="_blank">[ here ]</a> for latest instructions and troubleshooting.</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 padding-top">
<h3 class="uppercase">What it Does</h3>
<hr>
<p class="grey margin-top">Connected cup is a virtual simulation of a smart coffee cup from the IOT Hardware
@ -18,35 +30,36 @@
around with the temperature and Coffee level. And the information will be relayed back to
the IoTServer and summarized.
</p>
<p>The device supports communication via HTTPS only.</p>
<br>
<h3 class="uppercase">What You Need</h3>
<hr>
<ul class="list-unstyled">
<li class="padding-top-double"><span class="circle">STEP 01</span> Go ahead and
[Crete an Instance] of the Device.
<li class="padding-top-double">
<span class="badge">STEP 01</span>
Go ahead and [Download] the Device.
</li>
<li class="padding-top-double"><span class="circle">STEP 02</span> Give a name to your
Connected Cup instance.
<li>
<span class="badge">STEP 02</span>
Proceed to [Prepare] section.
</li>
<li class="padding-top-double" ><span class="circle">STEP 03</span> Read
[Try Out] section
to further experiment with the device.
<li >
<span class="badge">STEP 03</span>
Read [Try Out] section to further experiment with the device.
</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</i> </a>
<a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Create an Instance</a>
class="btn-operations"
target="_blank"><i class="fw fw-api"></i> View API</i>
</a>
<a href="#" class="download-link btn-operations">
<i class="fw fw-download"></i>Create an instance</a>
<div id="download-device-modal-content" class="hide">
<div class="modal-content">
<div class="row">
<div class="col-md-7 col-centered">
<h3>Name your device and download the agent from following link .</h3>
<h3>Name your Connected cup instance .</h3>
<br/>
<form id="downloadForm">
<div class="control-group">
@ -69,16 +82,16 @@
</div>
</div>
<div id="d ownload-device-modal-content-links " class="hide">
<div id="d evice-created-content " class="hide">
<div class="modal-content">
<div class="row">
<div class="col-md-7 col-centered center-container">
<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" >
<h3> Connected cup device created. </h3>
< p> Select instance of the Connected Cup you created from the "Devices" section. </p >
<div class="buttons">
<a href="#" id="device-created-link" class="btn-operations" >
OK
</a >
</div>
</div>
</div>
@ -176,75 +189,28 @@
<p class="grey margin-top">Access your Device</p>
<br/>
<ul>
<p class="padding-top-double"><span class="circle">01</span> Select instance of the Connected Cup you created from the "Devices" section and click "View" .</p>
<p class="padding-top-double"><span class="circle">01</span> Select instance of the Connected Cup you created from the "Devices" section .</p>
<p class="padding-top-double"><span class="circle">02</span> Click the [Go to Device] button from the "Operations" section and you will be able to view and experiment with the device.</p>
</ul>
<br>
</div>
<div class="col-xs-12 col-sm-6 col-md- 3 col-lg-12 padding-double">
<div class="col-xs-12 col-sm-6 col-md- 6 col-lg-6 padding-double">
<h3 class="uppercase">Connected Cup Agent</h3><hr>
<p class="grey margin-top">Click on the image to zoom</p>
<center>
<a href=" {{ @ unit .publicUri }} /images/coffee_stats.png" target="_blank">
<img src=" {{ @ unit .publicUri }} /images/coffee_stats.png" class="img-responsive" style="max-width: 500px; max-height: 500px" >
<img src=" {{ @ unit .publicUri }} /images/coffee_stats.png" class="img-responsive" >
</a>
</center>
<br/>
</div>
</div>
<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;
}
.doc-link {
background: #11375B;
padding: 20px;
color: white;
margin-top: 0;
}
.doc-link a {
color: white;
}
</style>
{{ # zone "topCss" }}
{{ css "css/styles.css" }}
{{ / zone }}
{{ # zone "bottomJs" }}
{{ js "/js/download.js" }}
{{ js "/js/jquery.validate.js" }}
{{ / zone }}
{{ / zone }}
charitha
8 years ago