schihei/sample-bodypose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
ascendhuawei
2020-09-16 11:50:53 -07:00
commit a61dda4612
97 changed files with 15410 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presenterserver/body_pose/ui/templates/home.html
+183
View File
@@ -0,0 +1,183 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Channels</title>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/list.css">
<link rel="stylesheet" href="/static/css/dialog.css">
</head>
<body>
<div class="box">
<div class="nav">
<div class="nav_left">
<img src="/static/images/logo.png" alt="">
<p><span>Presenter Server</span></p>
</div>
<div class="nav_right">
</div>
</div>
<div class="box_top">
<span> >View List</span>
</div>
<div style="width:100%;height:2px;background-color:#ccc;"></div>
<div class="box_content">
<ul class="content_top">
<li class="top_refresh"><img src="/static/images/u1.png" alt=""><span>Refresh</span></li>
<li class="top_del"><img src="/static/images/u2.png" alt=""><span>Delete</span></li>
</ul>
<div class="content_bot">
<form name="myForm">
<table id="mytable" border="1" width="100%">
<tr>
<th></th>
<th><input type="checkbox" id="checkAll"></th>
<th>Status</th>
<th>View Name</th>
</tr>
{% for item in listret %}
<tr>
<td>{{item['id']}}</td>
<td><input type="checkbox" name="selectFlag" value="1"></td>
{% if item['status'] == 1 %}
<td><img src="/static/images/u5.png" alt=""></td>
{% else %}
<td><img src="/static/images/u6.png" alt=""></td>
{% end %}
<td ><a class="view_channel" style="cursor:pointer">{{item['name']}}</a></td>
</tr>
{% end %}
</table>
</form>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/dialog.js"></script>
<script>
$("#checkAll").click(function() {
if (this.checked) {
$("input[name='selectFlag']:checkbox").each(function() {
$(this).attr("checked", true);
})
} else { //反之 取消全选
$("input[name='selectFlag']:checkbox").each(function() {
$(this).attr("checked", false);
})
}
});
$(".view_channel").click(function(){
var url = "/view?name=" + encodeURIComponent($(this).text());
window.open(url);
}
);
</script>
<script>
function checkNameValidate()
{
var name = $("#cname").val().trim();
if (name.length == 0)
{
dialog.tip("Tips","Channel name can not be empty");
return false;
}
if (name.length > 25)
{
dialog.tip("Tips", "Length of channel name should less than 25" ,function(){});
return false;
}
for (var i = 0; i < name.length; i++)
{
var c = name.charAt(i).charCodeAt();
var flag = ((c >= 48 && c <= 57) || (c >= 97 && c<= 122) || (c>= 65 && c <= 90) || (c == 47));
if (false == flag)
{
dialog.tip("Tips", "Channel name only support 0-9, a-z, A-Z /" ,function(){});
return false;
}
}
return true;
}
$(".top_create").click(function () {
if($(".content_mid").css("display")=="none"){
$(".content_mid").css("display","block").animate({height:"100px"});
}else{
$(".content_mid").animate({height:"0"}).css("display","none");
}
});
$(".mid_add").click(function () {
var rowlen = $("#mytable").find("tr").length;
if (rowlen >= 11)
{
dialog.tip("Tips", "Presenter supports up to 10 channels" ,function(){});
return;
}
//check
if (true == checkNameValidate())
{
var url = "/add?"+"name=" + encodeURIComponent($("#cname").val().trim()) +"&time="+(new Date().getTime());
$.ajax({
type: "POST",
url: url,
dataType: "json",
success: function(data)
{
if (data["ret"] == "success")
{
window.location.reload()
}
else
{
dialog.tip("Tips", data["msg"], function(){});
}
},
});
}
});
$(".top_refresh").click(function () {
window.location.reload();
});
$(".top_del").click(function () {
if($("input[name='selectFlag']").is(":checked")){
var msg = "";
$("input[name='selectFlag']:checked").each(function() {
// 遍历选中的checkbox
tr = $(this).parents("tr");
td = $(tr).find("td");
msg += encodeURIComponent($(td).eq(3).text());
msg += ",";
});
dialog.confirm("Tips", "Are you sure to delete ？", function(){
var url = "/del?"+"time="+(new Date().getTime())+"&name="+msg;
$.ajax({
type: "POST",
url: url,
dataType: "json",
success: function(data)
{
if (data["ret"] == "success")
{
window.location.reload()
}
else
{
dialog.tip("Tips", data["msg"], function(){});
}
},
});
}, function(){});
}else{
dialog.tip("Tips", "Please select one item at least", function(){});
}
});
</script>
</html>
presenterserver/body_pose/ui/templates/view.html
+155
View File
@@ -0,0 +1,155 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>view</title>
<link rel="stylesheet" href="/static/css/base.css">
<link rel="stylesheet" href="/static/css/testvideo.css">
</head>
<body>
<div class="video_box">
<div class="nav">
<div class="nav_left">
<img src="/static/images/logo.png" alt="">
<p><span>Presenter Server</span></p>
</div>
<div class="nav_right">
</div>
</div>
<div class="video_top">
<span> >view</span>
</div>
<div style="width:100%;height:2px;background-color:#ccc;"></div>
<div class="video_content">
<div class="video_fps" id='fpswapper' hidden><p><span> channel name: {{ channel_name }} </span> <span>&nbsp;&nbsp;&nbsp;&nbsp;fps:</span><span id='fpsval'></span></p></div>
<div class="video_inner">
<img src="/static/images/loading.gif" id = "loading" board = "1" alt=""/>
<!-- <img id = "load_media" hidden width = "1024px" board = "1" alt=""/> -->
<canvas id="canvas"></canvas>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script>
var canvas=document.getElementById("canvas")
var ctx=canvas.getContext("2d")
$('#fpswapper').hide()
$('#loading').hide()
function startViewVideo(){
$('#loading').show()
$('#canvas').hide()
var image = new Image();
var wsProtocol = "ws://";
if (window.location.protocol == "https:"){
wsProtocol = "wss://";
}
var wsUrl = wsProtocol + window.location.host+"/websocket?req={{req}}&name={{channel_name}}";
var ws = new WebSocket(wsUrl);
var onmessageflag = false;
ws.onopen = function() {
ws.send('next');
};
var count = 0;
var timestart = 0;
ws.onmessage = function (evt) {
$('#loading').hide()
$('#canvas').show()
var data = JSON.parse(evt.data)
var rectangles = []
if ('ok' == data['status']){
$('#fpsval').text(data.fps);
$('#loading').hide();
// $('#load_media').show();
var src = "data:image/jpeg;base64," + data['image'];
// $('#load_media').attr('src', src);
if (data['type'] == 'video'){
$('#fpswapper').show();
rectangles = data['rectangle_list']
}
var wantedWidth = 1024
var img = new Image()
img.src = src
img.onload=function(){
scale_factor = wantedWidth/img.width
canvas.setAttribute("width",1024)
canvas.setAttribute("height",img.height*scale_factor)
ctx.strokeStyle="yellow"
ctx.font="30px serif"
ctx.fillStyle="yellow"
ctx.strokeStyle="yellow"
ctx.font="30px serif"
ctx.fillStyle="yellow"
ctx.drawImage(img,0,0, wantedWidth, img.height*scale_factor)
for (var index in rectangles){
var pos= rectangles[index].slice(0,4) //
for (var i in pos){
pos[i] = pos[i]*scale_factor
}
var msg = rectangles[index].slice(4,5)
//add space between msg and face
//if upper space is not enough show the msg at the bottom
if(50>pos[1]){
// ctx.fillText(msg,pos[0],pos[3]+50)
}
else{
// ctx.fillText(msg,pos[0],pos[1]-10)
}
ctx.beginPath()
// 1/3 space draw line
if(msg == 'points'){
ctx.strokeStyle = "#0F4F00"
ctx.arc(pos[0],pos[1],6,0,2*Math.PI)
ctx.fillStyle = "#6CFF33"
ctx.fill()
}else if(msg == 'hand_box'){
ctx.strokeStyle = "#FF0000"
ctx.lineWidth = 5
ctx.moveTo(pos[0],pos[1])
ctx.lineTo(pos[2],pos[1])
ctx.moveTo(pos[2],pos[1])
ctx.lineTo(pos[2],pos[3])
ctx.moveTo(pos[0],pos[1])
ctx.lineTo(pos[0],pos[3])
ctx.moveTo(pos[0],pos[3])
ctx.lineTo(pos[2],pos[3])
// }else if(msg == 'hand_point'){
// ctx.strokeStyle = "#33FAFF"
// ctx.arc(pos[0],pos[1],3,0,2*Math.PI)
// ctx.fillStyle = "#33FAFF"
// ctx.fill()
// }else if(msg == 'hand'){
// ctx.strokeStyle = "#FC33FF"
// ctx.lineWidth = 3
// ctx.moveTo(pos[0],pos[1])
// ctx.lineTo(pos[2],pos[3])
}else if(msg == 'body'){
ctx.strokeStyle = "#FFF700"
ctx.lineWidth = 5
ctx.moveTo(pos[0],pos[1])
ctx.lineTo(pos[2],pos[3])
}else{
ctx.font = "30px Arial";
ctx.lineWidth = 5
ctx.fillStyle = "#33FAFF"
ctx.fillText(msg, 200, 200);
}
ctx.stroke()
}
}
}
ws.send('next');
}
}
startViewVideo();
</script>
</html>