|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="Script/Ajax.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Desktop Viewer</title>
</head>
<script type="text/javascript">
var data = { Code: 0, Img: "", ZoomX: 5, ZoomY: 5 };
var refreshfreq = 500;
function NewServerMessage(response, action) {
if (response == "") return;
var message = eval('(' + response + ')');
switch (message.Code) {
case 0:
break;
case 1:
var img = document.getElementById("img");
img.setAttribute("src", message.Img);
var field = document.getElementById("zoomx");
field.innerHTML = data.ZoomX.toString();
field = document.getElementById("zoomy");
field.innerHTML = data.ZoomY.toString();
var t = setTimeout("req()", refreshfreq);
break;
}
}
function listen() {
var t = setTimeout(" req()", 1000);
}
function req() {
ajax.SendRequest(NewServerMessage, window.location.href + "?op=listen&set={'ZoomX':'" + data.ZoomX + "','ZoomY':'" + data.ZoomY + "'}", true);
}
function SumAreaWidth(val) {
var img = document.getElementById("img");
var width = img.getAttribute("width");
var newwidth = parseInt(width, 0) + val;
img.setAttribute("width", newwidth);
}
function SumAreaHeight(val) {
var img = document.getElementById("img");
var width = img.getAttribute("height");
var newwidth = parseInt(width, 0) + val;
img.setAttribute("height", newwidth);
}
function SumZoomXFactor(val) {
data.ZoomX += val;
if (data.ZoomX <= 0) data.ZoomX = 1;
}
function SumZoomYFactor(val) {
data.ZoomY += val;
if (data.ZoomY <= 0) data.ZoomY = 1;
}
function UpdateRefresh() {
var freq = parseInt(document.getElementById("freq").value);
if (freq > 0) {
refreshfreq = freq;
}
document.getElementById("freq").value = refreshfreq.toString();
}
</script>
<body style="background: url('background.jpg');">
<div style="width: 600px; margin-left: 10%; margin-right: auto; margin-top: 30px;">
<div id="viewer">
<h1>
Desktop Viewer:</h1>
<img width="500" height="300" id="img" />
</div>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Area width:
<input type="button" value="+" onclick="javascript:SumAreaWidth(+40);" />
<input type="button" value="-" onclick="javascript:SumAreaWidth(-40);" />
</td>
<td>
Zoom X:
<input type="button" value="+" onclick="javascript:SumZoomXFactor(+1);" />
<input type="button" value="-" onclick="javascript:SumZoomXFactor(-1);" />
<span id="zoomx"></span>
</td>
<td>
</td>
</tr>
<tr>
<td>
Area height:
<input type="button" value="+" onclick="javascript:SumAreaHeight(+40);" />
<input type="button" value="-" onclick="javascript:SumAreaHeight(-40);" />
</td>
<td>
Zoom Y:
<input type="button" value="+" onclick="javascript:SumZoomYFactor(+1);" />
<input type="button" value="-" onclick="javascript:SumZoomYFactor(-1);" />
<span id="zoomy"></span>
</td>
</tr>
<tr>
<td colspan="2">
Refresh Frequency (ms):
<input type="text" id="freq" value="500" /> (is not advisable to set under 100)
<input type="button" value="Update" onclick="javascript:UpdateRefresh(-1);" />
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
listen();
</script>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip