You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1408 lines
64 KiB
1408 lines
64 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="cache-control" |
|
content="max-age=0" /> |
|
<meta http-equiv="cache-control" |
|
content="no-store" /> |
|
<meta http-equiv="expires" |
|
content="-1" /> |
|
<meta http-equiv="expires" |
|
content="Tue, 01 Jan 1980 1:00:00 GMT" /> |
|
<meta http-equiv="pragma" |
|
content="no-cache" /> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<!--meta http-equiv="refresh" content="300" />--> <!--Refresh each 5s--> |
|
<meta charset="utf-8" /> |
|
|
|
<script src="jquery_3_2_1.min.js"></script> |
|
<script src="fabric_jquery.easyui.min_compressed_on_nvr.js"></script> |
|
<script src="config.js"></script> |
|
<script src="cookie.min.js"></script> |
|
<script src="lang.js"></script> |
|
<script src="label_names.js"></script> |
|
<script src="lang_cookie.js"></script> |
|
<script src="gauge.min_on_nvr.js"></script> |
|
<script src="cool_counter.js"></script> |
|
|
|
<style> |
|
html { |
|
box-sizing: border-box; |
|
font-size: 2px; |
|
padding-top: 15px; |
|
padding-bottom: 15px; |
|
/*overflow-x: auto; |
|
overflow-y: auto;*/ |
|
} |
|
|
|
html, body { |
|
background-color: #2a2a2a; |
|
color: #ffffff; |
|
/*width: 100%;*/ |
|
/**min-height: 100%;*/ |
|
font-family: Arial; |
|
margin: 0; |
|
width: 100%; |
|
height: calc(100vh - 30px); |
|
} |
|
|
|
body { |
|
/*top: 0;*/ |
|
/* |
|
padding-left: 15px; |
|
padding-right: 15px; |
|
height: 100vh; |
|
font-size: 2rem;*/ |
|
} |
|
|
|
.chart { |
|
margin: auto; |
|
width: 1000px; |
|
height: 1000px; |
|
} |
|
|
|
.ChartTitle { |
|
text-align: center; |
|
top: 0; |
|
color: #fff; |
|
} |
|
|
|
.flex { |
|
display: flex; |
|
} |
|
|
|
.flex.straight-flex { |
|
flex-direction: column; |
|
} |
|
|
|
.flex.space-around { |
|
justify-content: space-around; |
|
} |
|
|
|
.flex.space-evenly { |
|
justify-content: space-evenly; |
|
} |
|
|
|
.pos-relative { |
|
position: relative; |
|
} |
|
|
|
.col-4 { |
|
width: 33%; |
|
} |
|
|
|
.col-6 { |
|
width: 50%; |
|
} |
|
|
|
.col-12 { |
|
width: 100%; |
|
} |
|
|
|
.col-4, |
|
.col-6, |
|
.col-12 { |
|
float: left; |
|
} |
|
|
|
/* |
|
main { |
|
padding-top: 50px; |
|
height: 100vh; |
|
}*/ |
|
|
|
/* |
|
.flex { |
|
display: flex; |
|
} |
|
|
|
.flex.straight-flex { |
|
flex-direction: column; |
|
} |
|
|
|
.flex.space-around { |
|
justify-content: space-around; |
|
} |
|
|
|
.flex1 { |
|
flex: 1; |
|
} |
|
|
|
.flex2 { |
|
flex: 2; |
|
}*/ |
|
|
|
/* |
|
.col-xs-12 { |
|
width: 100%; |
|
}*/ |
|
|
|
/* |
|
@media (min-width: 1200px) { |
|
.col-lg-6 { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.col-lg-1, |
|
.col-lg-10, |
|
.col-lg-11, |
|
.col-lg-12, |
|
.col-lg-2, |
|
.col-lg-3, |
|
.col-lg-4, |
|
.col-lg-5, |
|
.col-lg-6, |
|
.col-lg-7, |
|
.col-lg-8, |
|
.col-lg-9 { |
|
float: left; |
|
}*/ |
|
|
|
|
|
/* |
|
.PersonQ span { |
|
font-size: 3.5rem; |
|
margin: auto; |
|
}*/ |
|
|
|
.container { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
} |
|
</style> |
|
|
|
<script> |
|
window.onerror = function (message, url, linenumber) { |
|
|
|
console.log('JavaScript error: ' + message + ' on line ' + linenumber + ' for ' + url); |
|
|
|
if (url.search("fabric_jquery.easyui.min_compressed_on_nvr.js") >= 1) { |
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
}); |
|
} |
|
else if (url.search("jquery_3_2_1.min.js") >= 1) { |
|
loadScript("jquery_3_2_1.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("gauge.min_on_nvr.js") >= 1) { |
|
loadScript("gauge.min_on_nvr.js", function () { |
|
}); |
|
} |
|
else if (url.search("config.js") >= 1) { |
|
loadScript("config.js", function () { |
|
}); |
|
} |
|
else if (url.search("label_names.js") >= 1) { |
|
loadScript("label_names.js", function () { |
|
}); |
|
} |
|
else if (url.search("cool_counter.js") >= 1) { |
|
loadScript("cool_counter.js", function () { |
|
}); |
|
} |
|
else if (url.search("cookie.min.js") >= 1) { |
|
loadScript("cookie.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("lang.js") >= 1) { |
|
loadScript("lang.js", function () { |
|
}); |
|
} |
|
else if (url.search("lang_cookie.js") >= 1) { |
|
loadScript("lang_cookie.js", function () { |
|
}); |
|
} |
|
else if (message.search("slider") >= 1) { |
|
loadScript("fabric_jquery.easyui.min_compressed_on_nvr.js", function () { |
|
}); |
|
} |
|
else if (message.search("myport") >= 1) { |
|
loadScript("config.js", function () { |
|
}); |
|
} |
|
else if (message.search("cookie") >= 1) { |
|
loadScript("cookie.min.js", function () { |
|
}); |
|
} |
|
else { |
|
//location.reload(); |
|
var replaceUrl = 'http://' + window.location.hostname + ':' + GetUrlPort() + '/Aida/cool_counter.html'; |
|
//alert(replaceUrl); |
|
window.location.replace(replaceUrl); |
|
} |
|
} |
|
function GetUrlPort() { |
|
var url_href = window.location.href; |
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
return arr_url; |
|
} |
|
if (window.history.replaceState) { |
|
window.history.replaceState(null, null, window.location.href); |
|
} |
|
</script> |
|
|
|
<script> |
|
var g_Canvas_BackgroundImage = null; |
|
var g_mouse_status = 0; |
|
var g_h = -1; |
|
var g_m = -1; |
|
var g_s = -1; |
|
var g_ms = -1; |
|
|
|
var g_time_canvas = 166; |
|
var g_imgUrl = ""; |
|
var g_speed = 99999; |
|
var g_times_update_canvas = 0; |
|
var g_avg_speed = 7000; |
|
|
|
function update_canvas() { |
|
clearInterval(g_Canvas_BackgroundImage); |
|
g_Canvas_BackgroundImage = setInterval(function update_canvas_set_interval() { |
|
var current_page = localStorage.getItem('current_page'); |
|
//if (current_page === 'alarm') |
|
{ |
|
var win_width = G_VIEW_CANVAS_X, win_height = G_VIEW_CANVAS_Y; |
|
g_times_update_canvas++; |
|
var NowDate = new Date(); |
|
var h = NowDate.getHours(); |
|
var m = NowDate.getMinutes(); |
|
var s = NowDate.getSeconds(); |
|
var ms = NowDate.getMilliseconds(); |
|
|
|
if (g_h == -1 || g_m == -1 || g_s == -1 || g_ms == -1) { |
|
g_h = h; |
|
g_m = m; |
|
g_s = s; |
|
g_ms = ms; |
|
} |
|
|
|
//var imgUrl='../snap.jpg?'+Math.random(); |
|
//var imgUrl='./snap.jpg?'+Math.random(); |
|
|
|
var imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/getimage_ori?' + 'alarm_' + h + '_' + m + '_' + s + '_' + ms; |
|
|
|
if (localStorage.getItem("Radar_recognition") == "Yes") { |
|
imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/Aida/images/gray_background.png'; |
|
} |
|
else { |
|
imgUrl = 'http://' + window.location.hostname + ":" + GetUrlPort() + '/getimage_ori?' + 'alarm_' + h + '_' + m + '_' + s + '_' + ms; |
|
} |
|
|
|
g_imgUrl = imgUrl; |
|
|
|
try { |
|
fabric.Image.fromURL(imgUrl, function (img) { |
|
if (img != null && img._element != null) { |
|
img.set({ |
|
scaleX: win_width / img.width, |
|
scaleY: win_height / img.height, |
|
}); |
|
|
|
document.getElementById("CanvasTripwire1").style.visibility = "visible"; |
|
if ((h * 3600 + m * 60 + s + ms / 1000) > (g_h * 3600 + g_m * 60 + g_s + g_ms / 1000)) |
|
canvasTripwire1.setBackgroundImage(img, canvasTripwire1.renderAll.bind(canvasTripwire1)); |
|
|
|
if ((h * 3600 + m * 60 + s + ms / 1000) > (g_h * 3600 + g_m * 60 + g_s + g_ms / 1000)) { |
|
g_h = h; |
|
g_m = m; |
|
g_s = s; |
|
g_ms = ms; |
|
} |
|
|
|
if ((g_h * 3600 + g_m * 60 + g_s + g_ms / 1000) - (h * 3600 + m * 60 + s + ms / 1000) >= 3600) { |
|
g_h = h; |
|
g_m = m; |
|
g_s = s; |
|
g_ms = ms; |
|
} |
|
|
|
img = null; |
|
} |
|
}); |
|
} |
|
catch (e) { |
|
//console.log(e); |
|
} |
|
imgUrl = null; |
|
if (g_times_update_canvas >= 20) { |
|
g_times_update_canvas = 0; |
|
if (localStorage.getItem('AI_fps') != null) { |
|
g_time_canvas = 1000 / localStorage.getItem('AI_fps'); |
|
clearInterval(g_Canvas_BackgroundImage); |
|
g_Canvas_BackgroundImage = setInterval(update_canvas_set_interval, g_time_canvas); |
|
} |
|
} |
|
} |
|
}, g_time_canvas); |
|
} |
|
|
|
$(document).ready(function () { |
|
$(window).resize(function () { |
|
location.reload(); |
|
}); |
|
}); |
|
</script> |
|
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> |
|
<link rel="stylesheet" type="text/css" href="easyui.css"> |
|
</head> |
|
<body translate="no" onContextMenu="window.event.returnValue=false"> |
|
|
|
<!--<div class="container" align="center" vlign="center"> |
|
<div class="row">--> |
|
<div id="border_canvas"> |
|
<canvas id="CanvasTripwire1"></canvas> |
|
</div> |
|
|
|
<div id="main_layout"> |
|
<div id="col_layout_1" class="flex space-around"> |
|
<div class="col-12 flex straight-flex space-evenly"> |
|
<!--<div style="position:relative;">--> |
|
<nobr class="ChartTitle" id="message_detection_output_1"></nobr> |
|
|
|
<div class="flex pos-relative straight-flex"> |
|
<canvas class="chart" id="gauge_chart_1" style="background-repeat:no-repeat;background-position:center;border:0px #5C5C5C solid;"></canvas> |
|
</div> |
|
|
|
<div id="PersonQ_1" class="flex space-around PersonQ"> |
|
<div> |
|
<nobr id="counter_a_name_1"></nobr><nobr id="counter_a_value_1"></nobr> |
|
</div> |
|
<div> |
|
<nobr id="counter_b_name_1"></nobr><nobr id="counter_b_value_1"></nobr> |
|
</div> |
|
<div id="counter_c_div_1"> |
|
<nobr id="counter_c_name_1"></nobr><nobr id="counter_c_value_1"></nobr> |
|
</div> |
|
</div> |
|
<!--</div>--> |
|
</div> |
|
</div> |
|
<div id="col_layout_2" class="flex space-around"> |
|
<div class="col-12 flex straight-flex space-evenly"> |
|
<!--<div style="position:relative;">--> |
|
<nobr class="ChartTitle" id="message_detection_output_2"></nobr> |
|
<div class="flex pos-relative straight-flex"> |
|
<canvas class="chart" id="gauge_chart_2" style="background-repeat:no-repeat;background-position:center;border:0px #5C5C5C solid;"></canvas> |
|
</div> |
|
<div id="PersonQ_2" class="flex space-around PersonQ"> |
|
<div> |
|
<nobr id="counter_a_name_2"></nobr><nobr id="counter_a_value_2"></nobr> |
|
</div> |
|
<div> |
|
<nobr id="counter_b_name_2"></nobr><nobr id="counter_b_value_2"></nobr> |
|
</div> |
|
<div id="counter_c_div_2"> |
|
<nobr id="counter_c_name_2"></nobr><nobr id="counter_c_value_2"></nobr> |
|
</div> |
|
</div> |
|
<!--</div>--> |
|
</div> |
|
</div> |
|
<div id="col_layout_3" class="flex space-around"> |
|
<div class="col-12 flex straight-flex space-evenly"> |
|
<!--<div style="position:relative;">--> |
|
<nobr class="ChartTitle" id="message_detection_output_3"></nobr> |
|
<div class="flex pos-relative straight-flex"> |
|
<canvas class="chart" id="gauge_chart_3" style="background-repeat:no-repeat;background-position:center;border:0px #5C5C5C solid;"></canvas> |
|
</div> |
|
<div id="PersonQ_3" class="flex space-around PersonQ"> |
|
<div> |
|
<nobr id="counter_a_name_3"></nobr><nobr id="counter_a_value_3"></nobr> |
|
</div> |
|
<div> |
|
<nobr id="counter_b_name_3"></nobr><nobr id="counter_b_value_3"></nobr> |
|
</div> |
|
<div id="counter_c_div_3"> |
|
<nobr id="counter_c_name_3"></nobr><nobr id="counter_c_value_3"></nobr> |
|
</div> |
|
</div> |
|
<!--</div>--> |
|
</div> |
|
</div> |
|
<div id="col_layout_4" class="flex space-around"> |
|
<div class="col-12 flex straight-flex space-evenly"> |
|
<!--<div style="position:relative;">--> |
|
<nobr class="ChartTitle" id="message_detection_output_4"></nobr> |
|
<div class="flex pos-relative straight-flex"> |
|
<canvas class="chart" id="gauge_chart_4" style="background-repeat:no-repeat;background-position:center;border:0px #5C5C5C solid;"></canvas> |
|
</div> |
|
<div id="PersonQ_4" class="flex space-around PersonQ"> |
|
<div> |
|
<nobr id="counter_a_name_4"></nobr><nobr id="counter_a_value_4"></nobr> |
|
</div> |
|
<div> |
|
<nobr id="counter_b_name_4"></nobr><nobr id="counter_b_value_4"></nobr> |
|
</div> |
|
<div id="counter_c_div_4"> |
|
<nobr id="counter_c_name_4"></nobr><nobr id="counter_c_value_4"></nobr> |
|
</div> |
|
</div> |
|
<!--</div>--> |
|
</div> |
|
</div> |
|
</div> |
|
<!--</div> |
|
</div>--> |
|
|
|
<script> |
|
|
|
if (localStorage.getItem('current_state_hide_or_open_label') == null) |
|
localStorage.setItem('current_state_hide_or_open_label', 0); |
|
else |
|
current_state_hide_or_open_label = localStorage.getItem('current_state_hide_or_open_label'); |
|
|
|
if (localStorage.getItem('current_state_hide_or_open_direction') == null) |
|
localStorage.setItem('current_state_hide_or_open_direction', 0); |
|
else |
|
current_state_hide_or_open_direction = localStorage.getItem('current_state_hide_or_open_direction'); |
|
|
|
if (localStorage.getItem('current_state_hide_or_open_speed') == null) |
|
localStorage.setItem('current_state_hide_or_open_speed', 0); |
|
else |
|
current_state_hide_or_open_speed = localStorage.getItem('current_state_hide_or_open_speed'); |
|
|
|
var MAX_SIZE_REPORT_COUNTERS = 4; |
|
var MAX_SIZE_COUNTERS = 8; |
|
var MAX_DETECTION_ZONE = 8; |
|
|
|
var g_normal_browser_width = 0; |
|
var g_normal_browser_height = 0; |
|
|
|
var g_ratio = 0; |
|
var count_report = 0; |
|
var enable_report = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var initial_icon = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var counter_mode = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var detection_output = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var output_icon = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
|
|
var counter_a = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var counter_a_name = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
//var counter_a_zone = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var counter_b = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var counter_b_name = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var counter_c_name = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
//var counter_b_zone = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
var report_max_value = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
|
|
var current_report_state = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
|
|
var enable_counter_snap = "No"; |
|
|
|
var NowPerson = new Array(MAX_SIZE_REPORT_COUNTERS); //目前人數 |
|
|
|
var gauge = new Array(MAX_SIZE_REPORT_COUNTERS); |
|
|
|
var reset_value = new Array(MAX_SIZE_COUNTERS); |
|
|
|
|
|
|
|
var count_zone = 0; |
|
var queuing_count = new Array(MAX_DETECTION_ZONE); |
|
var checked_trigger_events = new Array(MAX_DETECTION_ZONE); |
|
var selected_counter_name = new Array(MAX_DETECTION_ZONE); |
|
var selected_counter_increment = new Array(MAX_DETECTION_ZONE); |
|
|
|
|
|
var canvas_1 = document.getElementById("gauge_chart_1"); |
|
var canvas_2 = document.getElementById("gauge_chart_2"); |
|
var canvas_3 = document.getElementById("gauge_chart_3"); |
|
var canvas_4 = document.getElementById("gauge_chart_4"); |
|
|
|
var canvas_1_tag = $("#gauge_chart_1"); |
|
var canvas_2_tag = $("#gauge_chart_2"); |
|
var canvas_3_tag = $("#gauge_chart_3"); |
|
var canvas_4_tag = $("#gauge_chart_4"); |
|
|
|
var len_alarm = 0; |
|
var bbox_count = 0; |
|
var plate_count = 0; |
|
var plate_idx = 0; |
|
|
|
var complete_flag = 0; |
|
var content_len = 0; |
|
|
|
var wait_count = 0; |
|
|
|
var clear_count = 0; //sophia add 20201207 |
|
var clear_count_2 = 0; //檢查畫布畫久一點 |
|
|
|
var index_ = 0; |
|
|
|
var winh = $('body').height(); |
|
var winw = $(window).outerWidth(); |
|
|
|
var opts = { |
|
angle: -0.5, // 角度 -0.5 |
|
animationSpeed: 20, //動畫速度 |
|
lineWidth: 0.1, // 儀錶板粗細 |
|
radiusScale: 1, // 儀錶板半徑 |
|
pointer: { |
|
length: 0, // // 指針長度 |
|
strokeWidth: 0, // 指針寬度 |
|
}, |
|
limitMax: false, // 是否固定最大值 |
|
limitMin: false, // 是否固定最小值 |
|
highDpiSupport: true, // High resolution support |
|
colorStart: '#6C87D4', // Colors |
|
colorStop: '#6C87D4', // just experiment with them |
|
strokeColor: '#5C5C5C', // to see which ones work best for you |
|
}; |
|
|
|
gauge[0] = new Gauge(document.getElementById("gauge_chart_1")).setOptions(opts); |
|
gauge[1] = new Gauge(document.getElementById("gauge_chart_2")).setOptions(opts); |
|
gauge[2] = new Gauge(document.getElementById("gauge_chart_3")).setOptions(opts); |
|
gauge[3] = new Gauge(document.getElementById("gauge_chart_4")).setOptions(opts); |
|
|
|
{ |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
enable_report[i] = "No"; |
|
initial_icon[i] = "NULL"; |
|
counter_mode[i] = "0"; |
|
detection_output[i] = "No entry for cars"; |
|
output_icon[i] = "NULL"; |
|
report_max_value[i] = "100"; |
|
|
|
counter_a[i] = "Counter01"; |
|
counter_a_name[i] = "Name"; |
|
counter_b[i] = ""; |
|
counter_b_name[i] = ""; |
|
counter_c_name[i] = ""; |
|
|
|
gauge[i].minValue = 0; |
|
gauge[i].maxValue = 15; |
|
gauge[i].set(0); |
|
NowPerson[i] = 0; |
|
current_report_state[i] = ""; |
|
|
|
//counter_a_zone[i] = "1"; |
|
//counter_b_zone[i] = "0"; |
|
} |
|
|
|
for (var i = 0; i < MAX_SIZE_COUNTERS; i++) { |
|
reset_value[i] = 0; |
|
} |
|
|
|
for (var i = 0; i < MAX_DETECTION_ZONE; i++) { |
|
checked_trigger_events[i] = new Array(MAX_SIZE_IDC_LIST_TRIGGER_EVENTS); |
|
selected_counter_name[i] = new Array(MAX_SIZE_IDC_LIST_TRIGGER_EVENTS); |
|
selected_counter_increment[i] = new Array(MAX_SIZE_IDC_LIST_TRIGGER_EVENTS); |
|
} |
|
} |
|
|
|
var trun; |
|
|
|
func_get_lang_cookie(); |
|
|
|
detectZoom(); |
|
resize_destImage(); |
|
//console_destImage(); |
|
|
|
func_getAlarmData(); |
|
func_getEventsData(); |
|
|
|
set_col_layout(); |
|
run_cool_counter(); |
|
//show_counter(); |
|
createCanvasTrafficLight_counter(); |
|
getalarmmotion_value(); |
|
update_canvas(); |
|
|
|
function validatingJSON(json) { |
|
|
|
var checkedjson; |
|
try { |
|
checkedjson = JSON.parse(json); //JSON parse only for try catch |
|
//console.log("json OK"); |
|
//console.log(json); |
|
} catch (e) { |
|
checkedjson = null; |
|
console.log(e);//the character would be drop sometimes, for example the label "class_id" may be "clas_id". |
|
//console.log(json); |
|
} |
|
return checkedjson; |
|
} |
|
|
|
function get_index_counter(counter_name) { |
|
var ret = -1; |
|
for (var i = 0; i < MAX_SIZE_COUNTERS; i++) { |
|
if (counter_name == "Counter0" + (i + 1).toString()) { |
|
ret = i; |
|
break; |
|
} |
|
} |
|
return ret; |
|
} |
|
|
|
function get_counter_name(index_counter) { |
|
var counter_name = "" |
|
if (index_counter >= 0 && index_counter < MAX_SIZE_COUNTERS) { |
|
counter_name = "Counter0" + (index_counter + 1).toString(); |
|
} |
|
return counter_name; |
|
} |
|
|
|
function detectZoom() { |
|
var ratio = 0, |
|
screen = window.screen, |
|
ua = navigator.userAgent.toLowerCase(); |
|
|
|
if (window.devicePixelRatio !== undefined) { |
|
ratio = window.devicePixelRatio; |
|
} else if (~ua.indexOf('msie')) { |
|
if (screen.deviceXDPI && screen.logicalXDPI) { |
|
ratio = screen.deviceXDPI / screen.logicalXDPI; |
|
} |
|
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { |
|
ratio = window.outerWidth / window.innerWidth; |
|
} |
|
|
|
if (ratio) { |
|
ratio = Math.round(ratio * 100); |
|
} |
|
|
|
g_ratio = ratio; |
|
|
|
//console.log("Web browser ratio:" + ratio.toString()); |
|
if (g_ratio <= 100) { |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
else { |
|
document.body.style.overflow = 'visible'; |
|
} |
|
} |
|
|
|
function resize_destImage() { |
|
//console.log("screen width" + screen.width.toString()); |
|
//console.log("screen height" + screen.height.toString()); |
|
|
|
//console.log("browser width" + window.innerWidth.toString()); |
|
//console.log("browser height" + window.innerHeight.toString()); |
|
|
|
//console.log("webpage width" + document.documentElement.scrollWidth.toString()); |
|
//console.log("webpage height" + document.documentElement.scrollHeight.toString()); |
|
|
|
var adjust_unit = 1; |
|
if (g_ratio > 100) { |
|
adjust_unit = 100 / g_ratio; |
|
} |
|
|
|
var normal_browser_width = parseInt(window.innerWidth /** g_ratio / 100 * adjust_unit*/); |
|
var normal_browser_height = parseInt(window.innerHeight*0.45/* * g_ratio / 100 * 1 * adjust_unit*/); |
|
|
|
//console.log("normal browser width" + normal_browser_width.toString()); |
|
//console.log("normal browser height" + normal_browser_height.toString()); |
|
|
|
document.getElementById("CanvasTripwire1").style.width = normal_browser_width.toString() + "px"; |
|
document.getElementById("CanvasTripwire1").style.height = normal_browser_height.toString() + "px"; |
|
|
|
g_normal_browser_width = normal_browser_width; |
|
g_normal_browser_height = normal_browser_height; |
|
|
|
|
|
//document.getElementById("live_video").style.transformOrigin = "0 0"; |
|
// document.getElementById("live_video").style.transform = "scale(" + (window.innerHeight / screen.height * g_ratio / 100).toString() + ")"; |
|
|
|
//timebar.setWidth(parseInt(normal_browser_width * 0.5).toString() + "px"); |
|
|
|
/* |
|
for (var i = 0; i < 4; i++) { |
|
document.getElementById("table_color_" + (i + 1).toString()).style.width = (normal_browser_width * 0.04).toString() + "px"; |
|
document.getElementById("table_color_" + (i + 1).toString()).style.height = (normal_browser_height * 0.02).toString() + "px"; |
|
|
|
document.getElementById("table_value_" + (i + 1).toString()).style.width = (normal_browser_width * 0.04).toString() + "px"; |
|
document.getElementById("table_value_" + (i + 1).toString()).style.height = (normal_browser_height * 0.02).toString() + "px"; |
|
document.getElementById("table_value_" + (i + 1).toString()).style.lineHeight = (normal_browser_height * 0.02).toString() + "px"; |
|
document.getElementById("table_value_" + (i + 1).toString()).style.fontSize = (normal_browser_height * 0.018).toString() + "px"; |
|
document.getElementById("table_value_" + (i + 1).toString()).style.textAlign = "center"; |
|
}*/ |
|
G_VIEW_CANVAS_X = normal_browser_width; |
|
G_VIEW_CANVAS_Y = normal_browser_height; |
|
|
|
winh = $('body').height(); |
|
winw = $(window).outerWidth(); |
|
|
|
//set_width_HD(normal_browser_width); |
|
///set_height_HD(normal_browser_height); |
|
|
|
//set_mNheatRadius(30 * window.innerHeight / screen.height * g_ratio / 100 * adjust_unit); |
|
} |
|
|
|
function console_destImage() { |
|
console.log("screen width" + screen.width.toString()); |
|
console.log("screen height" + screen.height.toString()); |
|
|
|
console.log("browser width" + window.innerWidth.toString()); |
|
console.log("browser height" + window.innerHeight.toString()); |
|
|
|
console.log("webpage width" + document.documentElement.scrollWidth.toString()); |
|
console.log("webpage height" + document.documentElement.scrollHeight.toString()); |
|
|
|
var normal_browser_width = parseInt(window.innerWidth * g_ratio / 100); |
|
var normal_browser_height = parseInt(window.innerHeight * g_ratio / 100); |
|
|
|
console.log("normal browser width" + normal_browser_width.toString()); |
|
console.log("normal browser height" + normal_browser_height.toString()); |
|
} |
|
|
|
function func_getEventsData() { |
|
|
|
$.ajax({ |
|
url: "/geteventsfile?ch=all", |
|
type: "GET", |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
}, |
|
success: function (retdata) { |
|
//var jsonbuf = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); |
|
var jsonbuf = validatingJSON(retdata); |
|
|
|
if (jsonbuf != null) { |
|
for (var i = 0; i < MAX_SIZE_COUNTERS; i++) { |
|
reset_value[i] = jsonbuf["event_counter_setting"]["event_counters"][i]["reset_value"]; |
|
} |
|
|
|
enable_counter_snap = jsonbuf["notification"]["enable_counter_snap"]; |
|
localStorage.setItem("events_default_version", jsonbuf["notification"]["events_default_version"]); |
|
|
|
var count_report_temp = 0; |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
enable_report[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["enable_report"]; |
|
initial_icon[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["initial_icon"]; |
|
counter_mode[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_mode"]; |
|
detection_output[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["detection_output"]; |
|
output_icon[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["output_icon"]; |
|
report_max_value[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["report_max_value"]; |
|
|
|
gauge[i].maxValue = parseInt(report_max_value[i], 10); |
|
|
|
counter_a[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_a"]; |
|
counter_a_name[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_a_name"]; |
|
//counter_a_zone[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_a_zone"]; |
|
counter_b[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_b"]; |
|
counter_b_name[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_b_name"]; |
|
counter_c_name[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_c_name"]; |
|
//counter_b_zone[i] = jsonbuf["event_counter_setting"]["report_counters"][i]["counter_b_zone"]; |
|
|
|
if (enable_report[i] == "Yes") { |
|
count_report_temp++; |
|
} |
|
} |
|
count_report = count_report_temp; |
|
|
|
} |
|
else { |
|
setTimeout(func_getEventsData(), 3000); |
|
} |
|
//console.info(retdata); |
|
}, |
|
error: function (retdata) { |
|
setTimeout(func_getEventsData(), 3000); |
|
console.warn(retdata); |
|
} |
|
}); |
|
} |
|
|
|
function set_col_layout() { |
|
var count_report_temp = 0; |
|
if (count_report == 4) { |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
if (enable_report[i] == "Yes") { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"; |
|
//document.getElementById("col_layout_" + (i + 1).toString()).style.display = "Inline"; |
|
|
|
if (enable_counter_snap == "Yes") { |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "25%"; |
|
} |
|
else { |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "50%"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.height = "50%"; |
|
} |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.cssFloat = "left"; |
|
} |
|
} |
|
} |
|
else if (count_report == 3) { |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
if (enable_report[i] == "Yes") { |
|
if (count_report_temp < 2) { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"; |
|
count_report_temp++; |
|
//document.getElementById("col_layout_" + (i + 1).toString()).style.display = "Inline"; |
|
|
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "33%"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.cssFloat = "left"; |
|
} |
|
else if (count_report_temp < 3) { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6"; |
|
count_report_temp++; |
|
//document.getElementById("col_layout_" + (i + 1).toString()).style.display = "Inline"; |
|
//document.getElementById("col_layout_" + (i + 1).toString()).style.left = "25%"; |
|
|
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "33%"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.cssFloat = "left"; |
|
} |
|
} |
|
else { |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.display = "none"; |
|
} |
|
} |
|
} |
|
else if (count_report == 2) { |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
if (enable_report[i] == "Yes") { |
|
if (count_report_temp < 2) { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"; |
|
//document.getElementById("col_layout_" + (i + 1).toString()).style.display = "Inline"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "50%"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.cssFloat = "left"; |
|
count_report_temp++; |
|
} |
|
} |
|
else { |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.display = "none"; |
|
} |
|
} |
|
} |
|
else if (count_report == 1) { |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
if (enable_report[i] == "Yes") { |
|
if (count_report_temp < 1) { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.width = "100%"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.cssFloat = "left"; |
|
count_report_temp++; |
|
} |
|
} |
|
else { |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.display = "none"; |
|
} |
|
} |
|
} |
|
else { |
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
//document.getElementById("col_layout_" + (i + 1).toString()).className = "col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6"; |
|
document.getElementById("col_layout_" + (i + 1).toString()).style.display = "none"; |
|
} |
|
} |
|
} |
|
|
|
function get_font_size(normal_browser_width, normal_browser_height) { |
|
var temp_unit = normal_browser_width < normal_browser_height ? normal_browser_width : normal_browser_height; |
|
var font_size = "small"; |
|
|
|
if (temp_unit <= 100) { |
|
font_size = "small"; |
|
} |
|
else if (temp_unit <= 150) { |
|
font_size = "medium"; |
|
} |
|
else if (temp_unit <= 250) { |
|
font_size = "large"; |
|
} |
|
else if (temp_unit <= 350) { |
|
font_size = "x-large"; |
|
} |
|
else { |
|
font_size = "xx-large"; |
|
} |
|
|
|
return font_size; |
|
} |
|
|
|
function show_counter() { |
|
|
|
var Canvas1_h = $('#CanvasTripwire1').height(); |
|
var Canvas1_w = $('#CanvasTripwire1').width(); |
|
|
|
if (enable_counter_snap == "Yes") { |
|
|
|
} |
|
else { |
|
document.getElementById("border_canvas").style.display = "none"; |
|
} |
|
|
|
var check_if_ok_trigger = new Array(MAX_DETECTION_ZONE); |
|
for (var i = 0; i < MAX_DETECTION_ZONE; i++) { |
|
check_if_ok_trigger[i] = 0; |
|
} |
|
|
|
for (var i = 0; i < MAX_SIZE_REPORT_COUNTERS; i++) { |
|
var canvas_temp; |
|
var canvas_tag; |
|
|
|
if (i == 0) { |
|
canvas_temp = canvas_1; |
|
canvas_tag = canvas_1_tag; |
|
} |
|
else if (i == 1) { |
|
canvas_temp = canvas_2; |
|
canvas_tag = canvas_2_tag; |
|
} |
|
else if (i == 2) { |
|
canvas_temp = canvas_3; |
|
canvas_tag = canvas_3_tag; |
|
} |
|
else if (i == 3) { |
|
canvas_temp = canvas_4; |
|
canvas_tag = canvas_4_tag; |
|
} |
|
|
|
if (enable_report[i] == "Yes") { |
|
|
|
var ChartTitle_h = $('#message_detection_output_' + (i + 1).toString()).height(); |
|
var PersonQ_h = $('#PersonQ_' + (i + 1).toString()).height(); |
|
|
|
//console.log("ChartTitle_h:" + ChartTitle_h.toString()); |
|
//console.log("PersonQ_h:" + PersonQ_h.toString()); |
|
|
|
|
|
/* |
|
var canvas_width = window_width; |
|
if (window_width > 2000) { |
|
canvas_width = 600; |
|
} |
|
else { |
|
canvas_width = 600; |
|
} |
|
|
|
var canvas_height = canvas_width * 0.5; |
|
canvas_temp.style.width = canvas_width.toString() + "px"; |
|
canvas_temp.style.height = canvas_height.toString() + "px";*/ |
|
|
|
var normal_browser_width = 0; |
|
var normal_browser_height = 0; |
|
|
|
|
|
if (count_report >= 2) { |
|
normal_browser_width = parseInt(window.innerWidth * g_ratio / 100 / 2); |
|
normal_browser_height = parseInt(window.innerHeight * g_ratio / 100 / 2); |
|
} |
|
else { |
|
normal_browser_width = parseInt(window.innerWidth * g_ratio / 100); |
|
normal_browser_height = parseInt(window.innerHeight * g_ratio / 100); |
|
} |
|
|
|
//console.log("normal browser width" + normal_browser_width.toString()); |
|
//console.log("normal browser height" + normal_browser_height.toString()); |
|
if (enable_counter_snap == "Yes") { |
|
//if (count_report <= 3) |
|
{ |
|
if (winw + ChartTitle_h + PersonQ_h + Canvas1_h > winh) { |
|
if (winh - ChartTitle_h - PersonQ_h - Canvas1_h > canvas_tag.parent().width()) { |
|
canvas_tag.width(canvas_tag.parent().width() * 1); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
else { |
|
canvas_tag.width((winh - ChartTitle_h - PersonQ_h - Canvas1_h) * 1); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
else { |
|
canvas_tag.width("100%"); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
}/* |
|
else { |
|
if (winw + ChartTitle_h + PersonQ_h + Canvas1_h > winh) { |
|
if (winh - ChartTitle_h - PersonQ_h - Canvas1_h > canvas_tag.parent().width()) { |
|
canvas_tag.width(canvas_tag.parent().width() * 0.27); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
else { |
|
canvas_tag.width((winh - ChartTitle_h - PersonQ_h - Canvas1_h) * 0.27); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
else { |
|
canvas_tag.width("27%"); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
}*/ |
|
} |
|
else { |
|
if (count_report <= 3) { |
|
if (winw + ChartTitle_h + PersonQ_h > winh) { |
|
if (winh - ChartTitle_h - PersonQ_h > canvas_tag.parent().width()) { |
|
canvas_tag.width(canvas_tag.parent().width() * 1); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
else { |
|
canvas_tag.width((winh - ChartTitle_h - PersonQ_h) * 1); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
else { |
|
canvas_tag.width("100%"); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
else { |
|
if (winw + ChartTitle_h + PersonQ_h > winh) { |
|
if (winh - ChartTitle_h - PersonQ_h > canvas_tag.parent().width()) { |
|
canvas_tag.width(canvas_tag.parent().width() * 0.35); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
else { |
|
canvas_tag.width((winh - ChartTitle_h - PersonQ_h) * 0.35); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
else { |
|
canvas_tag.width("35%"); |
|
canvas_tag.height(canvas_tag.width()); |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
//canvas_temp.style.width = normal_browser_width.toString() + "px"; |
|
//canvas_temp.style.height = normal_browser_height.toString() + "px"; |
|
|
|
var index_counter_a = get_index_counter(counter_a[i]); |
|
var index_counter_b = get_index_counter(counter_b[i]); |
|
NowPerson[i] = 0; |
|
|
|
|
|
if (index_counter_a >= 0) { |
|
NowPerson[i] += counter_value[index_counter_a]; |
|
} |
|
|
|
if (index_counter_b >= 0) |
|
{ |
|
//NowPerson[i] += counter_value[index_counter_b]; |
|
} |
|
|
|
/* |
|
var correct_zone_a = -1; |
|
var trigger_queuing_a = -1; |
|
var correct_zone_b = -1; |
|
var trigger_queuing_b = -1; |
|
|
|
if (index_counter_a >= 0) { |
|
for (var index_zone = 0; index_zone < count_zone; index_zone++) { |
|
for (var j = 0; j < MAX_SIZE_IDC_LIST_TRIGGER_EVENTS; j++) { |
|
if (checked_trigger_events[index_zone][j] == 1) { |
|
if (selected_counter_name[index_zone][j] != "NULL") { |
|
if (get_index_counter(selected_counter_name[index_zone][j]) == index_counter_a) { |
|
correct_zone_a = index_zone; |
|
trigger_queuing_a = queuing_count[index_zone]; |
|
} |
|
} |
|
break; |
|
} |
|
} |
|
if (correct_zone_a != -1) { |
|
break; |
|
} |
|
} |
|
} |
|
|
|
if (index_counter_b >= 0) { |
|
for (var index_zone = 0; index_zone < count_zone; index_zone++) { |
|
for (var j = 0; j < MAX_SIZE_IDC_LIST_TRIGGER_EVENTS; j++) { |
|
if (checked_trigger_events[index_zone][j] == 1) { |
|
if (selected_counter_name[index_zone][j] != "NULL") { |
|
if (get_index_counter(selected_counter_name[index_zone][j]) == index_counter_b) { |
|
correct_zone_b = index_zone; |
|
trigger_queuing_b = queuing_count[index_zone]; |
|
} |
|
} |
|
break; |
|
} |
|
} |
|
if (correct_zone_b != -1) { |
|
break; |
|
} |
|
} |
|
}*/ |
|
|
|
if (counter_mode[i] == "1") { |
|
if (index_counter_a >= 0 && last_counter_value[index_counter_a] != counter_value[index_counter_a]) { |
|
var blue_icon = output_icon[i]; |
|
blue_icon = blue_icon.replace("red","blue"); |
|
current_report_state[i] = "url(../Aida/Icon/counter_icon/" + blue_icon + ".png)"; |
|
} |
|
else if (index_counter_b >= 0 && last_counter_value[index_counter_b] != counter_value[index_counter_b]) { |
|
current_report_state[i] = "url(../Aida/Icon/counter_icon/" + output_icon[i] + ".png)"; |
|
} |
|
else { |
|
if (current_report_state[i].length == 0) { |
|
current_report_state[i] = "url(../Aida/Icon/counter_icon/" + initial_icon[i] + ".png)"; |
|
} |
|
} |
|
canvas_temp.style.backgroundImage = current_report_state[i]; |
|
} |
|
else if (counter_mode[i] == "0") { |
|
if (/*trigger_queuing_a != -1 &&*/ index_counter_a >= 0 && counter_value[index_counter_a] >= report_max_value[i]) { |
|
canvas_temp.style.backgroundImage = "url(../Aida/Icon/counter_icon/" + output_icon[i] + ".png)"; |
|
} |
|
else { |
|
canvas_temp.style.backgroundImage = "url(../Aida/Icon/counter_icon/" + initial_icon[i] + ".png)"; |
|
} |
|
} |
|
|
|
var back_width = canvas_temp.clientWidth / 4; |
|
var back_height = canvas_temp.clientHeight / 4; |
|
var back_unit = back_height; |
|
|
|
if (back_width >= back_height) { |
|
back_unit = back_width; |
|
} |
|
|
|
canvas_temp.style.backgroundSize = back_unit.toString() + "px" + " " + back_unit.toString() + "px" |
|
//canvas_temp.style.display = "Inline"; //Inline block |
|
|
|
//這邊還需要再對應到計數器 |
|
|
|
//var ctx = canvas_temp.getContext("2d"); |
|
|
|
//ctx.beginPath(); |
|
//ctx.clearRect(0, 0, canvas_temp.width, canvas_temp.height); |
|
//ctx.fill(); |
|
|
|
//ctx.beginPath(); |
|
|
|
var font_size = get_font_size(normal_browser_width, normal_browser_height); |
|
|
|
$('#message_detection_output_' + (i + 1).toString()).text(detection_output[i]); |
|
document.getElementById('message_detection_output_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('message_detection_output_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('message_detection_output_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('message_detection_output_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('message_detection_output_' + (i + 1).toString()).style.top = "0px"; |
|
//document.getElementById('message_detection_output_' + (i + 1).toString()).style.left = "0px"; |
|
|
|
if (1) { |
|
|
|
if (index_counter_a >= 0) { |
|
$('#counter_a_name_' + (i + 1).toString()).text((counter_a_name[i]).toString() + " "); |
|
document.getElementById('counter_a_name_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_a_name_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_a_name_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('counter_a_name_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('counter_a_name_' + (i + 1).toString()).style.top = (canvas_temp.offsetTop + (canvas_temp.clientHeight / 3)).toString() + "px"; |
|
//document.getElementById('counter_a_name_' + (i + 1).toString()).style.left = (canvas_temp.clientWidth * 0.01).toString() + "px"; |
|
|
|
$('#counter_a_value_' + (i + 1).toString()).text((counter_value[index_counter_a]).toString()); |
|
document.getElementById('counter_a_value_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_a_value_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_a_value_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('counter_a_value_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('counter_a_value_' + (i + 1).toString()).style.top = (canvas_temp.offsetTop + (canvas_temp.clientHeight * 1.7 / 3)).toString() + "px"; |
|
//document.getElementById('counter_a_value_' + (i + 1).toString()).style.left = (canvas_temp.clientWidth * 0.01).toString() + "px"; |
|
|
|
} |
|
|
|
if (index_counter_b >= 0) { |
|
$('#counter_b_name_' + (i + 1).toString()).text((counter_b_name[i]).toString() + " "); |
|
document.getElementById('counter_b_name_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_b_name_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_b_name_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('counter_b_name_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('counter_b_name_' + (i + 1).toString()).style.top = (canvas_temp.offsetTop + (canvas_temp.clientHeight / 3)).toString() + "px"; |
|
//document.getElementById('counter_b_name_' + (i + 1).toString()).style.right = (canvas_temp.clientWidth * 0.01).toString() + "px"; |
|
|
|
if (index_counter_b == index_counter_a) { |
|
if (report_max_value[i] - counter_value[index_counter_b] >= 0) |
|
$('#counter_b_value_' + (i + 1).toString()).text((report_max_value[i] - counter_value[index_counter_b]).toString()); |
|
else |
|
$('#counter_b_value_' + (i + 1).toString()).text((0).toString()); |
|
} |
|
else { |
|
$('#counter_b_value_' + (i + 1).toString()).text((counter_value[index_counter_b]).toString()); |
|
} |
|
|
|
document.getElementById('counter_b_value_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_b_value_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_b_value_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('counter_b_value_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('counter_b_value_' + (i + 1).toString()).style.top = (canvas_temp.offsetTop + (canvas_temp.clientHeight * 1.7 / 3)).toString() + "px"; |
|
//document.getElementById('counter_b_value_' + (i + 1).toString()).style.right = (canvas_temp.clientWidth * 0.01).toString() + "px"; |
|
} |
|
|
|
if (index_counter_a != index_counter_b && index_counter_a >= 0 && index_counter_b >= 0 && report_max_value[i] == 0) { |
|
$('#counter_c_name_' + (i + 1).toString()).text((counter_c_name[i]).toString() + " "); |
|
document.getElementById('counter_c_name_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_c_name_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_c_name_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
//document.getElementById('counter_c_name_' + (i + 1).toString()).style.position = "absolute"; |
|
//document.getElementById('counter_c_name_' + (i + 1).toString()).style.top = (canvas_temp.offsetTop + (canvas_temp.clientHeight / 3)).toString() + "px"; |
|
//document.getElementById('counter_c_name_' + (i + 1).toString()).style.right = (canvas_temp.clientWidth * 0.01).toString() + "px"; |
|
|
|
var left_value = counter_value[index_counter_a] - counter_value[index_counter_b]; |
|
if (left_value < 0) |
|
left_value = 0; |
|
|
|
$('#counter_c_value_' + (i + 1).toString()).text((left_value).toString()); |
|
|
|
document.getElementById('counter_c_value_' + (i + 1).toString()).style.color = "white"; |
|
document.getElementById('counter_c_value_' + (i + 1).toString()).style.fontSize = font_size; |
|
document.getElementById('counter_c_value_' + (i + 1).toString()).style.fontFamily = "Arial"; |
|
} |
|
else{ |
|
document.getElementById('counter_c_div_' + (i + 1).toString()).style.display = "none"; |
|
} |
|
} |
|
//document.getElementById('message_detection_output_' + (i + 1).toString()).style.top = "500px"; |
|
//document.getElementById('message_detection_output_' + (i + 1).toString()).style.left = "500px"; |
|
|
|
/*var ctx_detection_output = canvas_temp.getContext("2d"); |
|
ctx_detection_output.font = (back_unit / 200).toString() + "rem Arial"; |
|
ctx_detection_output.fillStyle = "red"; |
|
ctx_detection_output.textAlign = "center"; |
|
ctx_detection_output.fillText(detection_output[i], canvas_temp.width/2, canvas_temp.height * 31 / 32); |
|
//ctx.fill(); |
|
|
|
//ctx.beginPath(); |
|
var ctx_nowperson_1 = canvas_temp.getContext("2d"); |
|
ctx_nowperson_1.font = (back_unit / 100).toString() + "rem Arial"; |
|
ctx_nowperson_1.fillStyle = "white"; |
|
ctx_nowperson_1.textAlign = "center"; |
|
ctx_nowperson_1.fillText((1).toString(), canvas_temp.width / 8, canvas_temp.height * 3 / 4); |
|
//ctx.fill(); |
|
|
|
//ctx.beginPath(); |
|
var ctx_nowperson_2 = canvas_temp.getContext("2d"); |
|
ctx_nowperson_2.font = (back_unit / 100).toString() + "rem Arial"; |
|
ctx_nowperson_2.fillStyle = "white"; |
|
ctx_nowperson_2.textAlign = "center"; |
|
ctx_nowperson_2.fillText((2).toString(), canvas_temp.width * 7 / 8, canvas_temp.height * 3 / 4); |
|
//ctx.fill();*/ |
|
|
|
// ctx.drawImage(canvas_temp, canvas_temp.width, canvas_temp.height) |
|
|
|
gauge[i].set(NowPerson[i]); |
|
} |
|
else { |
|
canvas_temp.style.display = "none"; |
|
} |
|
} |
|
|
|
/* |
|
for (var i = 0; i < MAX_DETECTION_ZONE; i++) { |
|
if (check_if_ok_trigger[i] == 1) { |
|
trigger_zone_happened[i] = 0; |
|
} |
|
}*/ |
|
|
|
//width: 70 %; background - repeat: no - repeat; background - position: center; |
|
|
|
//canvas background-image: url(../Aida/Icon/counter_icon/mask_1_300X300_red.png); |
|
} |
|
|
|
function func_getAlarmData() { |
|
|
|
$.ajax({ |
|
url: "/getconfig?ch=01", |
|
type: "GET", |
|
async: false, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
}, |
|
success: function (retdata) { |
|
//var jsonbuf = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); |
|
var jsonbuf = validatingJSON(retdata); |
|
|
|
if (jsonbuf != null) { |
|
count_zone = jsonbuf["count_zone"]; |
|
|
|
for (var i = 0; i < MAX_DETECTION_ZONE; i++) { |
|
queuing_count[i] = jsonbuf["detection_zone"][i]["queuing_count"]; |
|
|
|
for (var j = 0; j < MAX_SIZE_IDC_LIST_TRIGGER_EVENTS; j++) { |
|
checked_trigger_events[i][j] = jsonbuf["detection_zone"][i]["trigger_events"][j]["checked"]; |
|
|
|
if (jsonbuf["detection_zone"][i]["trigger_events"][j]["counter_name"].length <= 0) |
|
selected_counter_name[i][j] = "NULL"; |
|
else |
|
selected_counter_name[i][j] = jsonbuf["detection_zone"][i]["trigger_events"][j]["counter_name"]; |
|
|
|
if (jsonbuf["detection_zone"][i]["trigger_events"][j]["counter_increment"].length <= 0) |
|
selected_counter_increment[i][j] = "NULL"; |
|
else |
|
selected_counter_increment[i][j] = jsonbuf["detection_zone"][i]["trigger_events"][j]["counter_increment"]; |
|
} |
|
|
|
} |
|
|
|
} |
|
//console.info(retdata); |
|
}, |
|
error: function (retdata) { |
|
console.warn(retdata); |
|
} |
|
}); |
|
} |
|
|
|
//隨機資料產生，請將此段隨機產生的部分改為取資料的部分 |
|
|
|
function run_cool_counter() { |
|
|
|
/* |
|
var s = Math.floor(Math.random() * 2); //收到資料，會有兩種狀況，一個是有帶口罩，一個是沒戴口罩 |
|
if (s == 0) { |
|
//有帶口罩，更改人數 |
|
var p = Math.floor(Math.random() * 2); //進或出 |
|
|
|
if (p == 0) { |
|
//出 |
|
if (NowPerson == 0) { |
|
trun = setTimeout('run()', 3000); |
|
return; |
|
} else { |
|
NowPerson = NowPerson - 1; |
|
} |
|
} else { |
|
//入 |
|
if (MaxQuantity - NowPerson == 0) { |
|
trun = setTimeout('run()', 3000); |
|
return; |
|
} else { |
|
NowPerson = NowPerson + 1; |
|
} |
|
} |
|
|
|
$('#RemainingSpace').text(MaxQuantity - NowPerson); //設定剩餘人數 |
|
$('#NowPerson').text(NowPerson); //設定目前人數 |
|
|
|
if (MaxQuantity - NowPerson == 0) { |
|
//滿人 |
|
$('#MonitorStatus_icon').addClass('my-icon my-icon-full-red'); |
|
$('#MonitorStatus').text('Full'); |
|
} else { |
|
//沒滿人則不顯示圖示 |
|
$('#MonitorStatus_icon').removeClass('my-icon my-icon-full-red my-icon-mask-red'); |
|
$('#MonitorStatus').text(''); |
|
} |
|
|
|
gauge.set(NowPerson); |
|
} else { |
|
//沒戴口罩，秀警告 |
|
$('#MonitorStatus_icon').addClass('my-icon my-icon-mask-red'); |
|
$('#MonitorStatus').text('Please wear your mask'); |
|
}*/ |
|
|
|
if (switch_run_counter == 1) |
|
{ |
|
show_counter(); |
|
switch_run_counter = 0; |
|
} |
|
|
|
trun = setTimeout('run_cool_counter()', 100); |
|
} |
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|