<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<HTML>
<HEAD>
<!--IE-->
<!--IE8においてCSSの異常表示確認:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9">
-->
<!--IE8の互換性に対応-->
<meta http-equiv="x-ua-compatible" content="IE=11" >
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE11 >
<!--IEのプラグイン、google chrome frameがある場合使用して表示-->
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">

<!--IE-->
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Expires" content="0">
<META http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>自然災害の前兆モニタリング (桐原川)</TITLE>

<script type="text/javascript">
//mychange
num = 0;

//hoge
var dnow;
var dfile;
var ddiff;
var threshold = 70000;
var error_msg;

filename = 'lastsnap0.jpg'

//
// interval function
//
function mychange()
{
uniq = new Date();
uniq = "?"+uniq.getTime();

num++;
num %= 10;
document.slide_show.src="lastsnap"+ num + ".jpg"+uniq;
}

function hoge() {
	//現在の時間を取得
    dnow = new Date();

	//dfileに値を代入
    ts();
    
    //時間の差分の計算
	ddiff = dnow-dfile;
	
	//閾値とddiffの値を比べて、画像表示を変更する
    ChangePicToUM();
}


//
// browser check
//
if(window.XMLHttpRequest){
    var re=new XMLHttpRequest();
}else if(window.ActiveXOject){
    var re=new ActiveXObject('Microsoft.XMLHTTP');
}

//
// open file
//
function ts(){
    re.open('HEAD',filename,true);
    re.onreadystatechange=tsp;
    re.send(null);
}

//
// get Last-Modified from ResponseHeader
//
function tsp(){
    if(re.readyState==4&&re.status==200){
    dfile = new Date(re.getResponseHeader('Last-Modified'));
    }
}


//
//画像が正常に送られなくなった場合の表示変更
//
function ChangePicToUM(){
	if(ddiff > threshold){
		error_msg = "画像更新遅延中";
		document.getElementById("UnderMaintenance").innerHTML = error_msg;
		
		document.getElementById('umpic').style.visibility='visible';
	}else{
	//画像「現在画像の。。。」を隠した状態にしておく
	error_msg = "現在の様子（5秒更新)";
	document.getElementById("UnderMaintenance").innerHTML = error_msg;
	
    document.getElementById('umpic').style.visibility='hidden';
	}
}

</script>
<!--
<noscript>
<META HTTP-EQUIV=Refresh CONTENT="0; URL=index2.html">
</noscript>
-->
<link rel="stylesheet" type="text/css" href="index3.css" media="all">
<link rel="shortcut icon" href="HCU_CM_32.ico">

</HEAD>

<BODY onLoad="setInterval('mychange()',5000);setInterval('hoge()',5000)" bgcolor=lightyellow>
<center>
	<div id ="main">
		<div id="header">
			<h1>自然災害の前兆モニタリング (桐原川)</h1>
		</div>
			
		<div id="content1">
		<img src="../UnderMaintenancePicture/UnderMaintenancePic_ver2.png" width="640" height="480" style="position:absolute; top:200; left:10; visibility:hidden;" id="umpic">
		<img src="lastsnap0.jpg" name="slide_show" width="640" height="480" >
	
		<font size="5"><p id="UnderMaintenance"> 現在の様子（5秒更新)</p></font>


		<p>バッテリー残量</p>
		<img src="./battery_voltage/battery.png"  width="10%" height="10%" alt="バッテリ残量表示">
		<br>
		<br>
	

		</div>


                <table border="0" width="350" vspace="5" hspace="5" cellpadding="2" style="font-size:11pt">
                                  <tr>
				  <td align="center"><a href="index_1hour.html"><img src="latest/60min_before.jpg"height="128"></a> <p> 60分前 </td>
				  <td align="center"><a href="index_1hour.html"><img src="latest/50min_before.jpg"height="128"></a> <p> 50分前 </td>
				  <td align="center"><a href="index_1hour.html"><img src="latest/40min_before.jpg"height="128"></a> <p> 40分前 </td>
				  <td align="center"><a href="index_1hour.html"><img src="latest/30min_before.jpg"height="128"></a> <p> 30分前 </td>
				  <td align="center"><a href="index_1hour.html"><img src="latest/20min_before.jpg"height="128"></a> <p> 20分前 </td>
				  <td align="center"><a href="index_1hour.html"><img src="latest/10min_before.jpg"height="128"></a> <p> 10分前 </td>
				  </tr>

                </table>
                
		<table>
		<font size="6"><p> システム概要 </p></font>
		<img src="./togegawa_explanation_picture.png"  width="80%" height="80%" >
		<br>		
		<br>		
		<br>		
		</table>
                
	</div>
</center>

	<center>
			<font size="5">
				※注意<br>			
				　本ウェブサイトはInternet Explorerで閲覧する場合、正常に表示されない場合があります。<br>
				　従って、「Google Chrome」等のウェブブラウザによる閲覧を推奨します。<br>
				　ご理解の程、よろしくお願いいたします。<br>
			</font>
		<br>
		<font size="6">おしらせ</font>
			<div style="width:1000px;height:300px;border:#000000 solid 1px;">
				<font size="5">
					(令和元年7月12日更新)<br>
	<Div Align="left">現在，諸事情により画像アップロードができていません．<br>
	復旧までしばらくお待ちください．</Div>
					
				</font>
			</div>
	<br><br><br><br><br><br>
	</center>

</BODY>	
</HTML>