forked from community/product-iots
Merge pull request #83 from charithag/master
Update coffee cup UIapplication-manager-new IoTS-1.0.0-M2
Charitha Goonetilleke
9 years ago
commit
0c2318c425
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 112 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,299 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
input[type=range][orient=vertical]
|
||||
{
|
||||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical; /* WebKit */
|
||||
width: 8px;
|
||||
height: 175px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-pane{
|
||||
float: left;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
min-width: 325px;
|
||||
}
|
||||
.right-pane{
|
||||
float: right;
|
||||
background-color: rgba(204, 204, 204, 0.61);
|
||||
width: 70%;
|
||||
}
|
||||
.coffee-wrapper{
|
||||
margin: 10% 0 5% 10%;
|
||||
text-align: center;
|
||||
}
|
||||
.coffee-top{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
.coffee-bottom{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 97px;
|
||||
top: 39px;
|
||||
left: -111px;
|
||||
border-top-left-radius: 75px 100px;
|
||||
border-bottom-left-radius: 75px 100px;
|
||||
border-top-right-radius: 50% 20px;
|
||||
border-bottom-right-radius: 50% 20px;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 100%);
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.handle:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 167px;
|
||||
width: 76px;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
border-top-left-radius: 45px 70px;
|
||||
border-bottom-left-radius: 45px 70px;
|
||||
border-top-right-radius: 45px 35px;
|
||||
border-bottom-right-radius: 45px 35px;
|
||||
background: rgba(204, 204, 204, 0.3);
|
||||
}
|
||||
|
||||
:before, :after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coffee {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
margin: 0 20px 50px 0;
|
||||
}
|
||||
|
||||
.coffee:after {
|
||||
height: 14px;
|
||||
width: 300px;
|
||||
border-radius: 46px/10px;
|
||||
box-shadow: 0px 1px 4px -2px rgba(0, 0, 0, 0.2), 0px 2px 10px -3px rgba(0, 0, 0, 0.1);
|
||||
bottom: -7.6px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.coffee:before {
|
||||
height: 14px;
|
||||
width: 300px;
|
||||
border-radius: 46px/10px;
|
||||
box-shadow: 0px 2px 10px -2px rgba(0, 204, 255, 0.3), 0px 2px 15px -2px rgba(0, 204, 255, 0.4);
|
||||
bottom: -7.6px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.coffee_main {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
width: 298px;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.coffee_main:after, .coffee_main:before {
|
||||
height: 12px;
|
||||
width: 296px;
|
||||
border-radius: 46px/10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.7);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.coffee_main:after {
|
||||
top: -7px;
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6) inset, 0px 3px 3px -1px rgba(255, 255, 255, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
|
||||
.coffee_main:before {
|
||||
top: 294px;
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
|
||||
.coffee_mouth {
|
||||
height: 52px;
|
||||
width: 44px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
background: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0.3));
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_mouth:after {
|
||||
height: 6px;
|
||||
width: 44px;
|
||||
border-radius: 25px/6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_inner {
|
||||
height: 295px;
|
||||
width: 92%;
|
||||
margin: 0px auto;
|
||||
border-radius: 10px 10px 20px 20px/10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.01);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-bottom-width: 0.5px;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 8px rgba(255, 255, 255, 0.6) inset, 0px 0px 5px rgba(255, 255, 255, 0.5);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.coffee_inner:before {
|
||||
border-radius: 40px/4px;
|
||||
top: 140px;
|
||||
width: 90%;
|
||||
left: 3px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.coffee_top .highlight {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
transform: skew(0deg, 5deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.coffee_top .highlight:after {
|
||||
height: 30px;
|
||||
width: 2px;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
transform: skew(0deg, 5deg);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_main .highlight {
|
||||
display: block;
|
||||
height: 301px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 6px;
|
||||
transform: skew(0deg, 6deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.coffee_main .highlight:after {
|
||||
height: 150px;
|
||||
width: 4px;
|
||||
left: -6px;
|
||||
top: 0px;
|
||||
transform: skew(0deg, 3deg);
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 80%);
|
||||
}
|
||||
|
||||
.coffee_neck .highlight {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 6px;
|
||||
transform: skew(0deg, 6deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.1) 98%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.water {
|
||||
background: linear-gradient(-85deg, rgba(167, 92, 24, 0.35), rgba(169, 108, 52, 0.55) 70%, rgba(185, 128, 76, 0.4));
|
||||
width: 99%;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
border-radius: 50px 50px 20px 20px/8px 8px 10px 10px;
|
||||
box-shadow: 0px 0px 6px rgba(165, 117, 73, 0.5) inset, 0px 0.2px 3px -1px rgba(0, 0, 0, 0.3) inset, 0px 2px 6px -1px rgba(0, 0, 0, 0.1) inset, 0px 2px 5px rgba(190,155,123,0.3), 0px 1px 3px rgba(190,155,123,0.2);
|
||||
}
|
||||
|
||||
.water:after {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
left: -1px;
|
||||
top: 0px;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 127, 0, 0.05) 50%, rgba(251, 148, 0, 0.1) 80%, rgba(255, 255, 255, 0.3));
|
||||
border-radius: 50px/8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0px 1px 2px -1px rgba(165, 90, 26, 0.35);
|
||||
}
|
||||
|
||||
.water:before {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
left: 2px;
|
||||
bottom: -1px;
|
||||
background: linear-gradient(to right, rgba(190,155,123,0.2), rgba(190,155,123,0.1) 50%, rgba(190,155,123,0.2) 80%, rgba(190,155,123,0.3));
|
||||
border-radius: 50px/10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
box-shadow: 0px -2px 3px -1px rgba(190,155,123,0.25);
|
||||
}
|
||||
|
||||
.water {
|
||||
height: 0px;
|
||||
-webkit-transition: all 3s ease-out;
|
||||
-moz-transition: all 3s ease-out;
|
||||
-o-transition: all 3s ease-out;
|
||||
transition: all 3s ease-out;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 112 KiB |
@ -1,140 +1,134 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="jquery-ui.css">
|
||||
<script src="jquery-1.12.0.min.js"></script>
|
||||
<script src="jquery-ui.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
.filler {
|
||||
height:200px;
|
||||
background-color:black;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<%
|
||||
String deviceId = request.getParameter("deviceId");
|
||||
if(deviceId != null)request.getSession().setAttribute("deviceId",deviceId);
|
||||
|
||||
String deviceOwner = request.getParameter("deviceOwner");
|
||||
if(deviceOwner != null)request.getSession().setAttribute("deviceOwner",deviceOwner);
|
||||
|
||||
String token = request.getParameter("token");
|
||||
if(token != null)request.getSession().setAttribute("token",token);
|
||||
<%--
|
||||
~ 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="row col-sm-offset-5">
|
||||
<div class="col-md-4" ><h3>Connected Cup</h3></div>
|
||||
<html>
|
||||
<head>
|
||||
<title>Connected Coffee Cup</title>
|
||||
|
||||
<link rel="stylesheet" href="css/coffee.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%
|
||||
String deviceId = request.getParameter("deviceId");
|
||||
if (deviceId != null) {
|
||||
request.getSession().setAttribute("deviceId", deviceId);
|
||||
}
|
||||
|
||||
String deviceOwner = request.getParameter("deviceOwner");
|
||||
if (deviceOwner != null) {
|
||||
request.getSession().setAttribute("deviceOwner", deviceOwner);
|
||||
}
|
||||
|
||||
String token = request.getParameter("token");
|
||||
if (token != null) {
|
||||
request.getSession().setAttribute("token", token);
|
||||
}
|
||||
|
||||
%>
|
||||
|
||||
<div class="container">
|
||||
<h1>Coffee Cup - Demo</h1>
|
||||
<div class="left-pane">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td align="right" style="width: 140px">Temperature:</td>
|
||||
<td id="temperature_level" align="left" style="width: 60px">0 C</td>
|
||||
<td align="right" style="width: 140px">Coffee Level:</td>
|
||||
<td id="coffee_level" align="left" style="width: 60px">0%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" align="center">
|
||||
<input id="amount_temp" type="range" orient="vertical" min="0" max="100"
|
||||
value="0"
|
||||
onchange="updateTemperature(this.value)"><br/>
|
||||
</td>
|
||||
<td colspan="2" align="center">
|
||||
<input id="amount_coffee" type="range" orient="vertical" min="0" max="100"
|
||||
value="0"
|
||||
onchange="updateCoffee(this.value)">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" align="center">
|
||||
<button id="order-cup">Order Coffee Cup</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<br>
|
||||
</br>
|
||||
|
||||
<div class="row col-sm-offset-2">
|
||||
<div class="col-md-2" >
|
||||
<p>
|
||||
<label for="amount_temp">Temperature: </label>
|
||||
<input type="text" id="amount_temp" readonly style="border:0; color:#f6931f; font-weight:bold;">
|
||||
</p>
|
||||
<div id="temperature_level" style="height:200px; margin: 10%;"></div>
|
||||
</div>
|
||||
<div class="col-md-2" id="objectHolder">
|
||||
<p>
|
||||
<label for="amount">Coffee Level: </label>
|
||||
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
|
||||
</p>
|
||||
<div id="slider-vertical" style="height:200px; margin: 10%;"></div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-4" style="height:200px; ">
|
||||
<div id="filler" class="filler" style="height: 0%; bottom: 0px; position: absolute; width: 100%; ">
|
||||
<img src="coffeecup.png" style="height: 200px; width: 100%; position: absolute; bottom:0px;">
|
||||
<div class="right-pane">
|
||||
<div class="coffee-wrapper">
|
||||
<div class="coffee">
|
||||
<div class="coffee_main">
|
||||
<div class="coffee_inner">
|
||||
<div class="handle"></div>
|
||||
<div class="water" id="water"></div>
|
||||
</div>
|
||||
<div class="highlight"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2" >
|
||||
<button id="order-cup">Order Coffee Cup</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript">
|
||||
function processCoffeeLevel(min, max){
|
||||
var filler = document.getElementById("filler");
|
||||
$( "#slider-vertical" ).slider({
|
||||
orientation: "vertical",
|
||||
range: "min",
|
||||
min: min,
|
||||
max: max,
|
||||
value: 0,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( ui.value );
|
||||
filler.style.height = map(min, max, 0, 100, ui.value) + "%";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
|
||||
|
||||
|
||||
}
|
||||
|
||||
function processTemperature(min, max){
|
||||
$( "#temperature_level" ).slider({
|
||||
orientation: "vertical",
|
||||
range: "min",
|
||||
min: min,
|
||||
max: max,
|
||||
value: 0,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount_temp" ).val( ui.value );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function map(a,b,c,d,N)
|
||||
{
|
||||
return c+((N-a)*(d-c))/(b-a);
|
||||
}
|
||||
|
||||
processCoffeeLevel(0, 100);
|
||||
processTemperature(0,100);
|
||||
|
||||
$("#order-cup").click(function() {
|
||||
|
||||
var deviceId = '<%=request.getSession().getAttribute("deviceId")%>';
|
||||
var deviceOwner = '<%=request.getSession().getAttribute("deviceOwner")%>';
|
||||
var token = '<%=request.getSession().getAttribute("token")%>';
|
||||
var url = "https://localhost:9443/connectedcup/controller/ordercoffee?deviceId=" + deviceId +"&deviceOwner=" +
|
||||
deviceOwner;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
headers: {
|
||||
"Authorization" : "Bearer " + token
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function sendData()
|
||||
{
|
||||
var deviceId = '<%=request.getSession().getAttribute("deviceId")%>';
|
||||
var deviceOwner = '<%=request.getSession().getAttribute("deviceOwner")%>';
|
||||
var tempPayload = "temperature:" + $( "#temperature_level" ).slider( "value" );
|
||||
var levelPayload = "coffeelevel:" + $( "#slider-vertical" ).slider( "value" );
|
||||
$.post( "/connected-cup-agent/push_temperature?deviceId=" + deviceId +"&deviceOwner=" + deviceOwner +
|
||||
"&payload=" + tempPayload);
|
||||
$.post( "/connected-cup-agent/push_level?deviceId=" + deviceId +"&deviceOwner=" + deviceOwner +
|
||||
"&payload=" + levelPayload);
|
||||
setTimeout(sendData, 5000);
|
||||
}
|
||||
|
||||
sendData();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<script src="js/libs/jquery.min.js"></script>
|
||||
<script src="js/coffee.js"></script>
|
||||
<script src="js/libs/htmlpreview.min.js"></script>
|
||||
<script>HTMLPreview.replaceAssets();</script>
|
||||
<script>
|
||||
$("#order-cup").click(function() {
|
||||
|
||||
var deviceId = '<%=request.getSession().getAttribute("deviceId")%>';
|
||||
var deviceOwner = '<%=request.getSession().getAttribute("deviceOwner")%>';
|
||||
var token = '<%=request.getSession().getAttribute("token")%>';
|
||||
var url = "/connectedcup/controller/ordercoffee?deviceId=" + deviceId +"&deviceOwner=" +
|
||||
deviceOwner;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url,
|
||||
headers: {
|
||||
"Authorization" : "Bearer " + token
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function sendData()
|
||||
{
|
||||
var deviceId = '<%=request.getSession().getAttribute("deviceId")%>';
|
||||
var deviceOwner = '<%=request.getSession().getAttribute("deviceOwner")%>';
|
||||
var tempPayload = "temperature:" + temperature;
|
||||
var levelPayload = "coffeelevel:" + coffee_amount;
|
||||
$.post( "/connected-cup-agent/push_temperature?deviceId=" + deviceId +"&deviceOwner=" + deviceOwner +
|
||||
"&payload=" + tempPayload);
|
||||
$.post( "/connected-cup-agent/push_level?deviceId=" + deviceId +"&deviceOwner=" + deviceOwner +
|
||||
"&payload=" + levelPayload);
|
||||
setTimeout(sendData, 5000);
|
||||
}
|
||||
|
||||
sendData();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
var temperature = 0;
|
||||
var coffee_amount = 0;
|
||||
|
||||
function updateCoffee(newValue){
|
||||
var coffee_level = document.getElementById("coffee_level");
|
||||
coffee_level.innerHTML = newValue + "%";
|
||||
coffee_amount =newValue;
|
||||
|
||||
var coffee = document.getElementById("water");
|
||||
if(newValue == 0){
|
||||
coffee.style.height= (newValue*3) + 'px';
|
||||
}else{
|
||||
coffee.style.height= (newValue*3) - 3 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function updateTemperature(newValue){
|
||||
temperature = newValue;
|
||||
var temperature_level = document.getElementById("temperature_level");
|
||||
temperature_level.innerHTML = newValue + " C";
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
var HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b<a.length;++b)if(c=a[b].src,0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))a[b].src="//"+location.hostname+location.pathname+"?"+c;a=document.querySelectorAll("a[href]");for(b=0;b<a.length;++b)if(c=a[b].href,0<c.indexOf("#"))a[b].href="//"+location.hostname+location.pathname+location.search+"#"+a[b].hash.substring(1);else if((0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))&&(0<c.indexOf(".html")||0<c.indexOf(".htm")))a[b].href="//"+location.hostname+location.pathname+"?"+c;if(!document.querySelectorAll("frameset").length){a=document.querySelectorAll("link[rel=stylesheet]");for(b=0;b<a.length;++b)c=a[b].href,(0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))&&HTMLPreview.send(c,"loadCSS");a=document.querySelectorAll("script");for(b=0;b<a.length;++b)c=a[b].src,0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org")?HTMLPreview.send(c,"loadJS"):!c&&0>a[b].innerHTML.indexOf("HTMLPreview")&&document.write(a[b].outerHTML)}},loadHTML:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadHTML"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status?(HTMLPreview.content=a.query.results.resources.content.replace(/<head>/i,'<head><base href="'+HTMLPreview.raw()+'">').replace(/<\/body>/i,'<script src="//'+location.hostname+'/htmlpreview.min.js">\x3c/script><script>HTMLPreview.replaceAssets();\x3c/script></body>').replace(/<\/head>\s*<frameset/gi,'<script src="//'+location.hostname+'/htmlpreview.min.js">\x3c/script><script>document.addEventListener("DOMContentLoaded",HTMLPreview.replaceAssets,false);\x3c/script></head><frameset'),setTimeout(function(){document.open();document.write(HTMLPreview.content);document.close()},50)):HTMLPreview.previewform.innerHTML=a&&a.error&&a.error.description?a.error.description:"Error: Cannot load file "+HTMLPreview.raw()},loadCSS:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadCSS"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status&&document.write("<style>"+a.query.results.resources.content.replace(/url\((?:'|")?([^\/][^:'"\)]+)(?:'|")?\)/gi,"url("+a.query.results.resources.url.replace(/[^\/]+\.css.*$/gi,"")+"$1)")+"</style>")},loadJS:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadJS"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status&&document.write("<script>"+a.query.results.resources.content+"\x3c/script>")},send:function(a,b){document.write('<script src="//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22'+encodeURIComponent(a)+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=HTMLPreview."+b+'">\x3c/script>')},submitform:function(){location.href="/?"+document.getElementById("file").value;return!1},init:function(){HTMLPreview.previewform.onsubmit=HTMLPreview.submitform;HTMLPreview.file()&&(HTMLPreview.previewform.innerHTML="<p>Loading...</p>",HTMLPreview.send(HTMLPreview.raw(),"loadHTML"))}};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue