pahansith
/
product-iots
forked from community/product-iots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding ui functionality for doormanager application

Browse Source
application-manager-new
Sahan Kariyawasam 8 years ago
parent f062ec27a7
commit 67a7271299
7 changed files with 27672 additions and 0 deletions
Show Stats Download Patch File Download Diff File

55
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/device-view.hbs
Unescape View File

@ -19,6 +19,51 @@
</div>
{{/zone}}
<div class="wr-uioperations" style="display: block;">
<table>
<tr>
<td width="47%"> <div id="light-bulb" class="off ui-draggable" >
<div id="bulb-intensity"></div>
<p class="intensity-val">Bulb intensity = <span>0</span></p>
<div id="light-bulb2" style="opacity: 0; "></div>
</div>
</td>
<td width="20%"><div href="" class="cube-switch">
<span class="switch">
<span class="switch-state off">Off</span>
<span class="switch-state on">On</span>
</span>
</div>
<br> <p class="operation-label" style="margin-left: 33px;">Fan On/Off</p>
</td>
<td width="20%"><div href="" class="door-switch">
<span class="switch">
<span class="switch-state off">Unlock</span>
<span class="switch-state on">Lock</span>
</span>
</div>
<br> <p class="operation-label">Door Lock/Unlock</p>
</td>
<td width="20%">
<a href="javascript:operationSelect('{{operation}}')">
{{#if icon}}
<img src="{{@app.context}}/{{icon}}" style="width: 48px;"/>
{{else}}
<i class="fw fw-user fw-5x"></i>
{{/if}}
<span>{{name}}</span>
</a>
<br> <p class="operation-label">Assign new user to lock</p>
</td>
</tr>
</table>
</div>
{{#zone "device-detail-properties"}}
<div class="media">
<div class="media-left col-xs-12 col-sm-2 col-md-2 col-lg-2">
@ -65,4 +110,14 @@
</div>
</div>
</div>
{{/zone}}
{{#zone "bottomJs"}}
{{css "css/custom-style.css"}}
{{css "css/jquery-ui.css"}}
{{js "js/jquery-1.8.3.js"}}
{{js "js/jquery-ui.js"}}
{{js "js/ui-operation.js"}}
{{/zone}}

265
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/css/custom-style.css
Unescape View File

@ -0,0 +1,265 @@
.wr-uioperations{background:#46484B; padding-top: 15px;}
.wr-uioperations .block{
background: #fafafa none repeat scroll 0 0;
color: #526a84;
display: inline-block;
float: left;
font-size: 12px;
margin-bottom: 10px;
margin-right: 10px;
min-width: 70px;
padding: 2px 10px 10px;
text-align: center;
text-decoration: none;
}
/* FAN SWITCH */
.cube-switch {
border-radius:10px;
border:1px solid rgba(0,0,0,0.4);
box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
/* Prevents clics on the back */
cursor:default;
display: block;
height: 100px;
position: relative;
margin: 5% 0px 0px 10%;
overflow:hidden;
/* Prevents clics on the back */
pointer-events:none;
width: 100px;
white-space: nowrap;
background:#333;
}
/* The switch */
.cube-switch .switch {
border:1px solid rgba(0,0,0,0.6);
border-radius:0.7em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -7px 0 rgba(0,0,0,0.2),
inset 0 50px 10px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.2);
display:block;
width: 60px;
height: 60px;
margin-left:-30px;
margin-top:-30px;
position:absolute;
top: 50%;
left: 50%;
width: 60px;
background:#666;
transition: all 0.2s ease-out;
/* Allows click */
cursor:pointer;
pointer-events:auto;
}
/* SWITCH Active State */
.cube-switch.active {
/*background:#222;
box-shadow:
0 0 5px rgba(0,0,0,0.5),
inset 0 50px 50px rgba(55,55,55,0.1);*/
}
.cube-switch.active .switch {
background:#333;
box-shadow:
inset 0 6px 0 rgba(255,255,255,0.1),
inset 0 7px 0 rgba(0,0,0,0.2),
inset 0 -50px 10px rgba(0,0,0,0.1),
0 1px 0 rgba(205,205,205,0.1);
}
.cube-switch.active:after,
.cube-switch.active:before {
background:#333;
box-shadow:
0 1px 0 rgba(255,255,255,0.1),
inset 1px 2px 1px rgba(0,0,0,0.5),
inset 3px 6px 2px rgba(200,200,200,0.1),
inset -1px -2px 1px rgba(0,0,0,0.3);
}
.cube-switch.active .switch:after,
.cube-switch.active .switch:before {
background:#222;
border:none;
margin-top:0;
height:1px;
}
.cube-switch .switch-state {
display: block;
position: absolute;
left: 40%;
color: #FFF;
font-size: .7em;
text-align: center;
}
/* SWITCH On State */
.cube-switch .switch-state.on {
bottom: 15%;
}
/* SWITCH Off State */
.cube-switch .switch-state.off {
top: 15%;
}
/* DOOR SWITCH */
.door-switch {
border-radius:10px;
border:1px solid rgba(0,0,0,0.4);
box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
/* Prevents clics on the back */
cursor:default;
display: block;
height: 100px;
position: relative;
margin: 5% 0px 0px 10%;
overflow:hidden;
/* Prevents clics on the back */
pointer-events:none;
width: 100px;
white-space: nowrap;
background:#333;
}
/* The switch */
.door-switch .switch {
border:1px solid rgba(0,0,0,0.6);
border-radius:0.7em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -7px 0 rgba(0,0,0,0.2),
inset 0 50px 10px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.2);
display:block;
width: 60px;
height: 60px;
margin-left:-30px;
margin-top:-30px;
position:absolute;
top: 50%;
left: 50%;
width: 60px;
background:#666;
transition: all 0.2s ease-out;
/* Allows click */
cursor:pointer;
pointer-events:auto;
}
/* SWITCH Active State */
.door-switch.active {
/*background:#222;
box-shadow:
0 0 5px rgba(0,0,0,0.5),
inset 0 50px 50px rgba(55,55,55,0.1);*/
}
.door-switch.active .switch {
background:#333;
box-shadow:
inset 0 6px 0 rgba(255,255,255,0.1),
inset 0 7px 0 rgba(0,0,0,0.2),
inset 0 -50px 10px rgba(0,0,0,0.1),
0 1px 0 rgba(205,205,205,0.1);
}
.door-switch.active:after,
.door-switch.active:before {
background:#333;
box-shadow:
0 1px 0 rgba(255,255,255,0.1),
inset 1px 2px 1px rgba(0,0,0,0.5),
inset 3px 6px 2px rgba(200,200,200,0.1),
inset -1px -2px 1px rgba(0,0,0,0.3);
}
.door-switch.active .switch:after,
.door-switch.active .switch:before {
background:#222;
border:none;
margin-top:0;
height:1px;
}
.door-switch .switch-state {
display: block;
position: absolute;
left: 27%;
color: #FFF;
font-size: .7em;
text-align: center;
}
/* SWITCH On State */
.door-switch .switch-state.on {
bottom: 15%;
}
/* SWITCH Off State */
.door-switch .switch-state.off {
top: 15%;
}
#light-bulb2 {
width: 150px;
height: 150px;
background: url("/devicemgt/public/cdmf.unit.device.type.doormanager.device-view/images/lightbulb.png")no-repeat 0 0;
}
#light-bulb {
/* position: absolute; */
width: 150px;
height: 150px;
top: 5%;
left: 40%;
background: url("/devicemgt/public/cdmf.unit.device.type.doormanager.device-view/images/lightbulb.png") no-repeat -150px 0;
cursor: move;
z-index: 800;
}
#bulb-intensity {
float: left;
clear: left;
width: 300px;
margin-left:159px;
margin-top: 68px;
}
.intensity-val {
color: #ffffff;
float: left;
margin-left: 242px;
margin-top: 15px;
width: 179px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#bulb-intensity .ui-slider-range { background: #729fcf; }
#bulb-intensity .ui-slider-handle { border-color: #729fcf; }
.operation-label{ color: #ffffff;}

1225
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/css/jquery-ui.css vendored
View File

File diff suppressed because it is too large Load Diff

BIN
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/images/lightbulb.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

9472
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/js/jquery-1.8.3.js vendored
View File

File diff suppressed because it is too large Load Diff

16617
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/js/jquery-ui.js vendored
View File

File diff suppressed because it is too large Load Diff

38
modules/samples/doormanager/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.doormanager.device-view/public/js/ui-operation.js
Unescape View File

@ -0,0 +1,38 @@
function refreshSwatch() {
var intensity = $( "#bulb-intensity" ).slider( "value" );
$('#light-bulb2').css({'opacity': (intensity / 100)});
$('.intensity-val span').html(intensity);
}
$(function(){
$('.cube-switch .switch').click(function() {
if ($('.cube-switch').hasClass('active')) {
$('.cube-switch').removeClass('active');
} else {
$('.cube-switch').addClass('active');
}
});
$('.door-switch .switch').click(function() {
if ($('.door-switch').hasClass('active')) {
$('.door-switch').removeClass('active');
} else {
$('.door-switch').addClass('active');
}
});
$( "#bulb-intensity" ).slider({
orientation: "horizontal",
range: "min",
min:0,
max: 100,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( "#bulb-intensity" ).slider( "value", 0 );
});
Write Preview
Loading…
Cancel
Save