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.
467 lines
16 KiB
467 lines
16 KiB
//------------------------------------------------------------------------------ |
|
// Lilin Heatmap for NAV v0.1 |
|
// DO NOT EDIT MORE unless... B) |
|
var maxX,maxY;// map image size, autoDetect for canvas draw |
|
var heatmap = null; |
|
var mNheatRadius = 30;// 事件圈尺寸 |
|
var heatmap_max = 100; |
|
|
|
var play_video = 1; |
|
var pause_time = 0; |
|
|
|
var width_HD = 0; |
|
var height_HD = 0; |
|
|
|
var data_width = 1920; |
|
var data_height = 1080; |
|
|
|
var g_playback_time_array = null; |
|
|
|
var NUM_SEVEN_DAYS = 7 * 24; |
|
var seven_days_check_tables = new Array(NUM_SEVEN_DAYS); |
|
|
|
//window.onresize = function() { |
|
// setTimeout("heatMapReDraw()", 1000); |
|
//} |
|
|
|
window.onload = function () { |
|
|
|
} |
|
|
|
var check_initial = 0; |
|
|
|
function initial_heatmap() { |
|
check_initial = 0; |
|
// heatmap.repaint(); |
|
|
|
/*var trackData=false; |
|
setInterval(function(){trackData=true;},50); |
|
var idleTimeout,idleInterval; |
|
var lastX,lastY; |
|
var idleCount; |
|
function startIdle(){ |
|
idleCount=0; |
|
function idle(){ |
|
heatmap.addData({x:lastX,y:lastY}); |
|
idleCount++; |
|
if(idleCount>10){ |
|
clearInterval(idleInterval); |
|
} |
|
}; |
|
idle(); |
|
idleInterval = setInterval(idle,1000); |
|
};*/ |
|
|
|
//body.onmousemove=function(ev){ |
|
/* |
|
if(idleTimeout) clearTimeout(idleTimeout); |
|
if(idleInterval) clearInterval(idleInterval); |
|
if(trackData){ |
|
lastX=ev.pageX; |
|
lastY=ev.pageY; |
|
heatmap.addData({x:lastX,y:lastY}); |
|
trackData=false; |
|
} |
|
idleTimeout=setTimeout(startIdle,500); |
|
*/ |
|
//}; |
|
|
|
/* |
|
test in random data |
|
var mArs = generateRandomData(500,maxX,maxY); |
|
heatmap.setData({max: 1, min: 0, data: mArs }); |
|
*/ |
|
|
|
var mOimg = document.getElementById('CanvasTripwire1'); |
|
var mNimgW_ = parseInt(mOimg.style.width.replace(/px/, ''), 10); |
|
var mNimgH_ = parseInt(mOimg.style.height.replace(/px/, ''), 10); |
|
//console.log("img size: " + mNimgW_ + ":" + mNimgH_); |
|
|
|
maxX = mNimgW_; |
|
maxY = mNimgH_; |
|
|
|
//var body = document.body; |
|
//var bodyStyle=getComputedStyle(body); |
|
//var hmEl = document.querySelector('.heatmap-wrapper'); |
|
///// hmEl.style.width = bodyStyle.width; |
|
//hmEl.style.width = maxX + 'px'; |
|
//hmEl.style.height = maxY + 'px'; |
|
|
|
var hm = document.querySelector('.heatmap'); |
|
hm.style.width = maxX + 'px'; |
|
hm.style.height = maxY + 'px'; |
|
|
|
// 建立物件 |
|
if (heatmap != null) { |
|
heatmap.setData({ max: heatmap_max, min: 0, data: { x: 0, y: 0, value: 0 } }); |
|
} |
|
|
|
heatmap = h337.create({ |
|
container: hm, radius: mNheatRadius, |
|
defaultGradient: { .25: "rgb(0,0,255)", .55: "rgb(0,255,0)", .85: "yellow", 1: "rgb(255,0,0)" } |
|
}); |
|
|
|
//setTimeout("heatMapDraw()", 250); |
|
check_initial = 1; |
|
} |
|
|
|
/* |
|
window.requestAnimationFrame=(function() |
|
{ |
|
return window.requestAnimationFrame || |
|
window.webkitRequestAnimationFrame || |
|
window.mozRequestAnimationFrame || |
|
function(callback){ |
|
window.setTimeout(callback,1000/60); |
|
}; |
|
})();*/ |
|
|
|
//------------------------------------------------------------------------------ |
|
|
|
/* |
|
function heatMapReDraw() { |
|
heatmap.setData({data:[]}); |
|
setTimeout("heatMapReDraw()", 1000); |
|
}*/ |
|
|
|
function set_heatmap_max(heatmap_max_temp) { |
|
heatmap_max = heatmap_max_temp; |
|
} |
|
|
|
function get_heatmap_max() { |
|
return heatmap_max; |
|
} |
|
|
|
function set_mNheatRadius(mNheatRadius_temp) { |
|
mNheatRadius = mNheatRadius_temp; |
|
} |
|
|
|
function heatMapDraw() { |
|
if (check_initial == 1) |
|
dynaLoadData(); |
|
|
|
// console.log(mArs); |
|
//setTimeout("heatMapDraw()", 250); |
|
|
|
} |
|
|
|
//------------------------------------------------------------------------------ |
|
/* |
|
function generateRandomData(len,maxX,maxY) { |
|
var mA_=[]; |
|
while (len--) { |
|
var mNx=randomNum(maxX); |
|
var mNy=randomNum(maxY); |
|
mA_[mA_.length]={x:mNx, y:mNy}; |
|
} |
|
// heatmap.setData({x:mNx, y:mNy}); |
|
return mA_; |
|
}; |
|
|
|
function randomNum(pN){ |
|
return Math.floor( Math.random()*pN ); |
|
}*/ |
|
|
|
// Set-up to use getMouseXY function onMouseMove |
|
|
|
|
|
document.onmousemove = mouseXYget; |
|
var mNtempX = 0; |
|
var mNtempY = 0; |
|
|
|
function mouseXYget(e) { |
|
mNtempX = parseInt(e.pageX, 10); |
|
mNtempY = parseInt(e.pageY, 10); |
|
|
|
// catch possible negative values in NS4 |
|
if (mNtempX < 0){mNtempX = 0} |
|
if (mNtempY < 0){mNtempY = 0} |
|
|
|
return true; |
|
} |
|
|
|
function mouseXYshow(){ |
|
//console.log(mNtempX+":"+mNtempY); |
|
/* |
|
click page as dynaLoadData() |
|
if(mNtempX && mNtempY){ |
|
heatmap.setData({data:[]}); |
|
setTimeout("heatMapDraw()", 2000); |
|
} |
|
*/ |
|
} |
|
|
|
//------------------------------------------------------------------------------ |
|
// dyna load data |
|
function dynaLoadData() { |
|
if (play_video == 1) { |
|
var NowDate = new Date(); |
|
var h = NowDate.getHours(); |
|
var m = NowDate.getMinutes(); |
|
var s = NowDate.getSeconds(); |
|
var ms = NowDate.getMilliseconds(); |
|
var wday = NowDate.getDay() == 0 ? 7 : NowDate.getDay(); |
|
|
|
if (h == 0) { |
|
wday = wday - 1; |
|
if (wday <= 0) { |
|
wday = 7; |
|
} |
|
} |
|
|
|
var heatmap_url = ""; |
|
if (h == 0) { |
|
heatmap_url = "./heatmap_data_" + wday + ".js?" + 'heatmap_' + h + '_' + m + '_' + s + '_' + ms; |
|
} |
|
else { |
|
heatmap_url = "./heatmap_data.js?" + 'heatmap_' + h + '_' + m + '_' + s + '_' + ms; |
|
} |
|
|
|
|
|
//console.log(heatmap_url); |
|
loadScript(heatmap_url, loadParse,null);//unixTimeSec() |
|
} |
|
else { |
|
var NowDate = new Date(pause_time); |
|
var h = NowDate.getHours(); |
|
var m = NowDate.getMinutes(); |
|
var s = NowDate.getSeconds(); |
|
var ms = NowDate.getMilliseconds(); |
|
var wday = NowDate.getDay() == 0 ? 7 : NowDate.getDay(); |
|
|
|
if (h == 0) { |
|
wday = wday - 1; |
|
if (wday <= 0) { |
|
wday = 7; |
|
} |
|
} |
|
|
|
var heatmap_url = "./heatmap_data_" + wday + ".js?" + 'heatmap_' + h + '_' + m + '_' + s + '_' + ms; |
|
|
|
//console.log(heatmap_url); |
|
loadScript(heatmap_url, loadParse,null);//unixTimeSec() |
|
} |
|
} |
|
|
|
function loadScript(url, callback, current_index_table){ |
|
var script = document.createElement("script") |
|
script.type = "text/javascript"; |
|
|
|
if (script.readyState){ //IE |
|
script.onreadystatechange = function(){ |
|
if (script.readyState == "loaded" || |
|
script.readyState == "complete"){ |
|
script.onreadystatechange = null; |
|
if (current_index_table != null) { |
|
callback(current_index_table); |
|
} |
|
else { |
|
callback(); |
|
} |
|
} |
|
}; |
|
} else { //Others |
|
script.onload = function () { |
|
if (current_index_table != null) { |
|
callback(current_index_table); |
|
} |
|
else { |
|
callback(); |
|
} |
|
}; |
|
} |
|
|
|
script.src = url; |
|
document.getElementsByTagName("head")[0].appendChild(script); |
|
} |
|
|
|
function set_width_HD(temp_width_HD) { |
|
width_HD = temp_width_HD; |
|
} |
|
|
|
function set_height_HD(temp_height_HD) { |
|
height_HD = temp_height_HD; |
|
} |
|
|
|
function set_play_video(temp_play_video) { |
|
play_video = temp_play_video; |
|
localStorage.setItem('play_video', play_video); |
|
} |
|
|
|
function set_pause_time(temp_pause_time) { |
|
pause_time = parseInt(temp_pause_time/1000)*1000; |
|
} |
|
|
|
function get_approaching_to_pause_time() { |
|
var approaching_to_pause_time = 0; |
|
var current_date = new Date(); |
|
if (g_playback_time_array != null) |
|
{ |
|
//console.log("pause_time:" + pause_time.toString()); |
|
for (var i = 0; i < g_playback_time_array.length; i++) { |
|
if (g_playback_time_array[i] <= pause_time && (Math.abs(g_playback_time_array[i] - pause_time) / 1000 / 60 / 60) <= 1) { |
|
var temp_date = new Date(pause_time); |
|
var temp_day = temp_date.getDay(); |
|
var temp_hours = temp_date.getHours(); |
|
|
|
if (seven_days_check_tables[temp_day * 24 + temp_hours] >= 1 && |
|
(current_date.getDay() != temp_day || (current_date.getDay() == temp_day && current_date.getDate() == temp_date.getDate()))) { |
|
approaching_to_pause_time = g_playback_time_array[i]; |
|
//console.log("hours:" + temp_date.getHours()); |
|
//console.log("mins:" + temp_date.getMinutes()); |
|
//console.log("seven_days_check_tables:" + seven_days_check_tables[temp_date.getDay() * 24 + temp_date.getHours()]); |
|
} |
|
} |
|
} |
|
} |
|
//console.log("ans:" + approaching_to_pause_time.toString()); |
|
return approaching_to_pause_time; |
|
} |
|
|
|
function get_num_if_existing_heatmap_data(current_index_table) { |
|
var current_date = new Date(); |
|
for (var i = current_index_table; i < current_index_table + 23; i++) { |
|
var num_data = 0; |
|
var wday = parseInt(i / 24); |
|
var whour = parseInt(i % 24); |
|
if (width_HD >= 1 && height_HD >= 1) { |
|
//console.log(mSdata_); |
|
var mSdata_ = mSdata; |
|
mSdata_ = mSdata_.replaceAll("\r", ""); |
|
var mA_ = mSdata_.split("\n"); |
|
var mArs_ = []; |
|
|
|
for (var ii = 0; ii < mA_.length; ii++) { |
|
if (mA_[ii].length >= 7 && mA_[ii].indexOf(",") >= 1) { |
|
var mAn_ = mA_[ii].split(","); |
|
if (mAn_[0] && mAn_[0].length && mAn_[1] && mAn_[1].length && mAn_[2] && mAn_[2].length && mAn_[3] && mAn_[3].length) { |
|
var myDate = new Date(parseInt(parseInt(mAn_[0], 10) / 1000) * 1000); |
|
if ((current_date.getDay() != myDate.getDay() || (current_date.getDay() == myDate.getDay() && current_date.getDate() == myDate.getDate())) |
|
&& myDate.getDay() == wday && myDate.getHours() < whour && myDate.getHours() >= whour - 1) { |
|
mArs_[mArs_.length] = { x: parseInt(mAn_[1] * width_HD / data_width), y: parseInt(mAn_[2] * height_HD / data_height), value: 1 }; |
|
} |
|
} |
|
} |
|
} |
|
//console.log(mArs_); |
|
num_data = mArs_.length; |
|
} |
|
seven_days_check_tables[wday * 24 + whour] = num_data; |
|
} |
|
} |
|
|
|
function get_num_if_existing_heatmap_data_zero(current_index_table) { |
|
var num_data = 0; |
|
var wday = parseInt(current_index_table / 24); |
|
wday = wday - 1; |
|
if (wday < 0) { |
|
wday = 6; |
|
} |
|
var whour = parseInt(current_index_table % 24); |
|
var current_date = new Date(); |
|
if (width_HD >= 1 && height_HD >= 1) { |
|
//console.log(mSdata_); |
|
var mSdata_ = mSdata; |
|
mSdata_ = mSdata_.replaceAll("\r", ""); |
|
var mA_ = mSdata_.split("\n"); |
|
var mArs_ = []; |
|
|
|
for (var ii = 0; ii < mA_.length; ii++) { |
|
if (mA_[ii].length >= 7 && mA_[ii].indexOf(",") >= 1) { |
|
var mAn_ = mA_[ii].split(","); |
|
if (mAn_[0] && mAn_[0].length && mAn_[1] && mAn_[1].length && mAn_[2] && mAn_[2].length && mAn_[3] && mAn_[3].length) { |
|
var myDate = new Date(parseInt(parseInt(mAn_[0], 10) / 1000) * 1000); |
|
if ((current_date.getDay() != myDate.getDay() || (current_date.getDay() == myDate.getDay() && current_date.getDate() == myDate.getDate())) |
|
&& myDate.getDay() == wday && myDate.getHours() >= 23) |
|
mArs_[mArs_.length] = { x: parseInt(mAn_[1] * width_HD / data_width), y: parseInt(mAn_[2] * height_HD / data_height), value: 1 }; |
|
} |
|
} |
|
} |
|
//console.log(mArs_); |
|
num_data = mArs_.length; |
|
} |
|
seven_days_check_tables[current_index_table] = num_data; |
|
} |
|
|
|
function loadParse() { |
|
if (width_HD >= 1 && height_HD >= 1) { |
|
//console.log(mSdata_); |
|
var mSdata_ = mSdata; |
|
mSdata_ = mSdata_.replaceAll("\r", ""); |
|
var mA_ = mSdata_.split("\n"); |
|
var mArs_ = []; |
|
var myDate_current = new Date().getTime(); |
|
//console.log("pause_time:" + pause_time.toString()); |
|
|
|
for (var ii = 0; ii < mA_.length; ii++) { |
|
if (mA_[ii].length >= 7 && mA_[ii].indexOf(",") >= 1) { |
|
var mAn_ = mA_[ii].split(","); |
|
if (mAn_[0] && mAn_[0].length && mAn_[1] && mAn_[1].length && mAn_[2] && mAn_[2].length && mAn_[3] && mAn_[3].length) { |
|
var myDate = new Date(parseInt(parseInt(mAn_[0], 10) / 1000) * 1000).getTime(); |
|
/* |
|
console.log("myDate"); |
|
console.log(myDate); |
|
console.log("myDate_current"); |
|
console.log(myDate_current); |
|
console.log("temp_approaching_to_pause_time"); |
|
console.log(temp_approaching_to_pause_time); |
|
console.log("Math.abs(temp_approaching_to_pause_time - myDate)"); |
|
console.log(Math.abs(temp_approaching_to_pause_time - myDate)); |
|
console.log("(Math.abs(temp_approaching_to_pause_time - myDate) / 1000 / 60 / 60)"); |
|
console.log((Math.abs(temp_approaching_to_pause_time - myDate) / 1000 / 60 / 60)); |
|
console.log("play_video"); |
|
console.log(play_video);*/ |
|
//console.log("myDate"); |
|
//console.log(myDate); |
|
//console.log("pause_time"); |
|
//console.log(pause_time); |
|
|
|
if (play_video == 1) { |
|
if (myDate <= myDate_current && (Math.abs(myDate_current - myDate) / 1000 / 60 / 60) <= 1) { |
|
|
|
mArs_[mArs_.length] = { x: parseInt(mAn_[1] * width_HD / data_width), y: parseInt(mAn_[2] * height_HD / data_height), value: 1 }; |
|
|
|
//console.log(mAn_[0]); |
|
|
|
//console.log(Math.abs(myDate_current - myDate) / 1000 / 60 / 60); |
|
|
|
//myDate.toGMTString() GMT時間 |
|
//myDate.toLocaleString() 當地時間 |
|
//console.log(myDate.toLocaleString()); |
|
//console.log("current:" + myDate_current.toLocaleString()); |
|
} |
|
} |
|
/* |
|
else if (play_video == 0 && (Math.abs(pause_time - myDate_current) / 1000 / 60 / 60) <= 1 && (Math.abs(pause_time - myDate) / 1000 / 60 / 60) <= 1) { |
|
mArs_[mArs_.length] = { x: parseInt(mAn_[1] * width_HD / data_width), y: parseInt(mAn_[2] * height_HD / data_height), value: 1 }; |
|
}*/ |
|
else if (play_video == 0 && myDate <= pause_time && (Math.abs(pause_time - myDate) / 1000 / 60 / 60) <= 1) { |
|
mArs_[mArs_.length] = { x: parseInt(mAn_[1] * width_HD / data_width), y: parseInt(mAn_[2] * height_HD / data_height), value: 1 }; |
|
} |
|
} |
|
} |
|
} |
|
//console.log(mArs_); |
|
|
|
if (mArs_.length >= 1) { |
|
heatmap.setData({ max: heatmap_max, min: 0, data: mArs_ }); |
|
} |
|
else { |
|
heatmap.setData({ max: heatmap_max, min: 0, data: { x: 0, y: 0, value: 0 } }); |
|
} |
|
|
|
//console.log("loaded data: " + mArs_.length); |
|
} |
|
} |
|
|
|
function hereDoc(f) { |
|
return f.toString(). |
|
replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, ""). |
|
replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, ""); |
|
} |
|
|
|
function unixTimeSec(){ |
|
return Math.round( (new Date()).getTime()/1000); |
|
} |
|
|
|
//------------------------------------------------------------------------------
|
|
|