@ -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> <h1 class="grey ">Connected Cup</h1>
<hr> <hr>
</div> </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"> <img src=" {{ @ unit .publicUri }} /images/coffeecup.png" class="img-responsive">
</div> </div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top"> <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 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">
<h3 class="uppercase">What it Does</h3> <h3 class="uppercase">What it Does</h3>
<hr> <hr>
<p class="grey margin-top">Connected cup is a virtual simulation of a smart coffee cup from the IOT Hardware <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 around with the temperature and Coffee level. And the information will be relayed back to
the IoTServer and summarized. the IoTServer and summarized.
</p> </p>
<p>The device supports communication via HTTPS only.</p> <p>The device supports communication via HTTPS only.</p>
<br> <br>
<h3 class="uppercase">What You Need</h3> <h3 class="uppercase">What You Need</h3>
<hr> <hr>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="padding-top-double"><span class="circle">STEP 01</span> Go ahead and <li class="padding-top-double">
[Crete an Instance] of the Device. <span class="badge">STEP 01</span>
Go ahead and [Download] the Device.
</li> </li>
<li class="padding-top-double"><span class="circle">STEP 02</span> Give a name to your <li>
Connected Cup instance. <span class="badge">STEP 02</span>
Proceed to [Prepare] section.
</li> </li>
<li class="padding-top-double" ><span class="circle">STEP 03</span> Read <li >
[Try Out] section <span class="badge">STEP 03</span>
to further experiment with the device. Read [Try Out] section to further experiment with the device.
</li> </li>
</ul> </ul>
<br> <br>
<a href="/api-store/apis/info?name= {{ @ uriParams .deviceType }} &version=1.0.0&provider=admin" <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> class="btn-operations"
<a href="#" class="download-link btn-operations"><i class="fw fw-download"></i>Create an Instance</a> 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 id="download-device-modal-content" class="hide">
<div class="modal-content"> <div class="modal-content">
<div class="row"> <div class="row">
<div class="col-md-7 col-centered"> <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/> <br/>
<form id="downloadForm"> <form id="downloadForm">
<div class="control-group"> <div class="control-group">
@ -69,16 +82,16 @@
</div> </div>
</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="modal-content">
<div class="row"> <div class="row">
<div class="col-md-7 col-centered center-container"> <div class="col-md-7 col-centered center-container">
<h3> Please download the file from following link(Press CTRL+C). </h3> <h3> Connected cup device created. </h3>
< br/ > < p> Select instance of the Connected Cup you created from the "Devices" section. </p >
<div class="buttons">
<div > <a href="#" id="device-created-link" class="btn-operations" >
<input id="download-device-url" style="color:#3f3f3f;padding:5px" OK
type="text" value="" placeholder="Type here" size="60" > </a >
</div> </div>
</div> </div>
</div> </div>
@ -176,75 +189,28 @@
<p class="grey margin-top">Access your Device</p> <p class="grey margin-top">Access your Device</p>
<br/> <br/>
<ul> <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> <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> </ul>
<br> <br>
</div> </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> <h3 class="uppercase">Connected Cup Agent</h3><hr>
<p class="grey margin-top">Click on the image to zoom</p> <p class="grey margin-top">Click on the image to zoom</p>
<center> <center>
<a href=" {{ @ unit .publicUri }} /images/coffee_stats.png" target="_blank"> <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> </a>
</center> </center>
<br/> <br/>
</div> </div>
</div> {{ # zone "topCss" }}
{{ css "css/styles.css" }}
<style type="text/css"> {{ / zone }}
.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 "bottomJs" }} {{ # zone "bottomJs" }}
{{ js "/js/download.js" }} {{ js "/js/download.js" }}
{{ js "/js/jquery.validate.js" }} {{ js "/js/jquery.validate.js" }}
{{ / zone }} {{ / zone }}
charitha
8 years ago