update PTZ button appearance
Moe Alam
parent
a2e8de4386
commit
edbcbcdd29
|
|
@ -89,6 +89,8 @@
|
|||
"Never": "Never",
|
||||
"API": "API",
|
||||
"ONVIF": "ONVIF",
|
||||
"Set Home": "Set Home",
|
||||
"Set Home Position (ONVIF-only)": "Set Home Position (ONVIF-only)",
|
||||
"Non-Standard ONVIF": "Non-Standard ONVIF",
|
||||
"FFprobe": "Probe",
|
||||
"Monitor States": "Monitor States",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ var ejs = require('ejs');
|
|||
var fileupload = require("express-fileupload");
|
||||
module.exports = function(s,config,lang,app,io){
|
||||
const {
|
||||
ptzControl
|
||||
ptzControl,
|
||||
setPresetForCurrentPosition
|
||||
} = require('./control/ptz.js')(s,config,lang,app,io)
|
||||
if(config.productType === 'Pro'){
|
||||
var LdapAuth = require('ldapauth-fork');
|
||||
|
|
@ -1658,16 +1659,25 @@ module.exports = function(s,config,lang,app,io){
|
|||
app.get(config.webPaths.apiPrefix+':auth/control/:ke/:id/:direction', function (req,res){
|
||||
res.setHeader('Content-Type', 'application/json');
|
||||
s.auth(req.params,function(user){
|
||||
ptzControl(req.params,function(msg){
|
||||
s.userLog({
|
||||
if(req.params.direction === 'setHome'){
|
||||
setPresetForCurrentPosition({
|
||||
id: req.params.id,
|
||||
ke: req.params.ke,
|
||||
},{
|
||||
msg: msg,
|
||||
direction: req.params.direction,
|
||||
},(response) => {
|
||||
res.end(s.prettyPrint(response))
|
||||
})
|
||||
res.end(s.prettyPrint(msg))
|
||||
});
|
||||
}else{
|
||||
ptzControl(req.params,function(msg){
|
||||
s.userLog({
|
||||
id: req.params.id,
|
||||
ke: req.params.ke,
|
||||
},{
|
||||
msg: msg,
|
||||
direction: req.params.direction,
|
||||
})
|
||||
res.end(s.prettyPrint(msg))
|
||||
})
|
||||
}
|
||||
},res,req);
|
||||
})
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -13,9 +13,6 @@
|
|||
position: relative;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
background: #b7b7b7;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 1px rgba(120, 120, 120, 0.6), inset 0 2px 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(240, 240, 240, 0.4);
|
||||
}
|
||||
.PTZ_controls .control {
|
||||
position: absolute;
|
||||
|
|
@ -23,9 +20,10 @@
|
|||
.PTZ_controls .pad .control {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: #636363;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(60, 60, 60, 0.2), 0 0 0 4px rgba(60, 60, 60, 0.2);
|
||||
background: #101f54;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.4);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.PTZ_controls .zoom_in{
|
||||
top: 0;
|
||||
|
|
@ -44,25 +42,29 @@
|
|||
right: 0;
|
||||
}
|
||||
.PTZ_controls .pad .top {
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -15px;
|
||||
top: 10px;
|
||||
border-radius: 10px 10px 50px 50px;
|
||||
}
|
||||
.PTZ_controls .pad .left {
|
||||
top: 45px;
|
||||
left: 15px;
|
||||
left: 10px;
|
||||
border-radius: 10px 50px 50px 10px;
|
||||
}
|
||||
.PTZ_controls .pad .right {
|
||||
top: 45px;
|
||||
right: 15px;
|
||||
right: 10px;
|
||||
border-radius: 50px 10px 10px 50px;
|
||||
}
|
||||
.PTZ_controls .pad .control.right:before {
|
||||
transform: rotate(90deg) translate(-3px, -5px);
|
||||
}
|
||||
.PTZ_controls .pad .bottom {
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -15px;
|
||||
bottom: 10px;
|
||||
border-radius: 50px 50px 10px 10px;
|
||||
}
|
||||
/* Overlap the other controls to hide box-shadow */
|
||||
.PTZ_controls .pad .middle {
|
||||
|
|
@ -72,18 +74,6 @@
|
|||
top: 43px;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -17px;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.PTZ_controls .pad .middle:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -35% 0 0 -35%;
|
||||
content: '';
|
||||
background: #636363;
|
||||
height: 70%;
|
||||
width: 70%;
|
||||
border-radius: 100%;
|
||||
box-shadow: inset 0 0 2px rgba(120, 120, 120, 0.6), inset 0 2px 8px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(240, 240, 240, 0.2);
|
||||
border-radius: 50%;
|
||||
background: #1f396c;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -456,8 +456,23 @@ $(document).ready(function(e){
|
|||
});
|
||||
break;
|
||||
case'control':
|
||||
e.a=e.e.attr('control')
|
||||
$.ccio.cx({f:'monitor',ff:'control',direction:e.a,id:e.mid,ke:e.ke},user)
|
||||
var switchChosen = e.e.attr('control')
|
||||
switch(switchChosen){
|
||||
case'setHome':
|
||||
$.get(getApiPrefix() + '/control' + '/' + $user.ke + '/' + e.mid + '/setHome',function(data){
|
||||
console.log(data)
|
||||
})
|
||||
break;
|
||||
default:
|
||||
$.ccio.cx({
|
||||
f: 'monitor',
|
||||
ff: 'control',
|
||||
direction: switchChosen,
|
||||
id: e.mid,
|
||||
ke: e.ke
|
||||
},user)
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case'videos_table':case'calendar':case'video_grid'://call videos table or calendar or video grid
|
||||
$.vidview.launcher=$(this);
|
||||
|
|
@ -685,23 +700,27 @@ $(document).ready(function(e){
|
|||
if(e.e.length>0){
|
||||
e.e.remove()
|
||||
}else{
|
||||
var html = '<div class="PTZ_controls">'
|
||||
html += '<div class="pad">'
|
||||
html += '<div class="control top" monitor="control" control="up"></div>'
|
||||
html += '<div class="control left" monitor="control" control="left"></div>'
|
||||
html += '<div class="control right" monitor="control" control="right"></div>'
|
||||
html += '<div class="control bottom" monitor="control" control="down"></div>'
|
||||
html += '<div class="control middle" monitor="control" control="center"></div>'
|
||||
html += '</div>'
|
||||
html += '<div class="btn-group btn-group-sm btn-group-justified">'
|
||||
html += '<a title="'+lang['Zoom In']+'" class="zoom_in btn btn-default" monitor="control" control="zoom_in"><i class="fa fa-search-plus"></i></a>'
|
||||
html += '<a title="'+lang['Zoom Out']+'" class="zoom_out btn btn-default" monitor="control" control="zoom_out"><i class="fa fa-search-minus"></i></a>'
|
||||
html += '</div>'
|
||||
html += '<div class="btn-group btn-group-sm btn-group-justified">'
|
||||
html += '<a title="'+lang['Enable Nightvision']+'" class="nv_enable btn btn-default" monitor="control" control="enable_nv"><i class="fa fa-moon-o"></i></a>'
|
||||
html += '<a title="'+lang['Disable Nightvision']+'" class="nv_disable btn btn-default" monitor="control" control="disable_nv"><i class="fa fa-sun-o"></i></a>'
|
||||
html += '</div>'
|
||||
html += '</div>'
|
||||
var html = `<div class="PTZ_controls">
|
||||
<div class="pad">
|
||||
<div class="control top" monitor="control" control="up"></div>
|
||||
<div class="control left" monitor="control" control="left"></div>
|
||||
<div class="control right" monitor="control" control="right"></div>
|
||||
<div class="control bottom" monitor="control" control="down"></div>
|
||||
<div class="control middle" monitor="control" control="center"></div>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<a title="${lang['Zoom In']}" class="zoom_in btn btn-default" monitor="control" control="zoom_in"><i class="fa fa-search-plus"></i></a>
|
||||
<a title="${lang['Zoom Out']}" class="zoom_out btn btn-default" monitor="control" control="zoom_out"><i class="fa fa-search-minus"></i></a>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<a title="${lang['Enable Nightvision']}" class="nv_enable btn btn-default" monitor="control" control="enable_nv"><i class="fa fa-moon-o"></i></a>
|
||||
<a title="${lang['Disable Nightvision']}" class="nv_disable btn btn-default" monitor="control" control="disable_nv"><i class="fa fa-sun-o"></i></a>
|
||||
</div>
|
||||
${$.parseJSON($.ccio.mon[$user.ke + e.mid + $user.auth_token].details,{}).is_onvif === '1' ? `
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<a title="${lang['Set Home Position (ONVIF-only)']}" class="btn btn-default" monitor="control" control="setHome"><i class="fa fa-h-square"></i> ${lang['Set Home']}</a>
|
||||
</div>` : ``}
|
||||
</div>`
|
||||
e.p.append(html)
|
||||
}
|
||||
break;
|
||||
|
|
|
|||
Loading…
Reference in New Issue