first commit

2025-07-31 20:31:05 +00:00 · 2017-04-22 16:54:00 +03:00 · 2017-04-22 16:54:00 +03:00 · fa343db334
commit fa343db334
154 changed files with 18186 additions and 0 deletions
--- a/WEBFiles/$js.inc
+++ b/WEBFiles/$js.inc
@ -0,0 +1 @@
+var $ = function(id){return document.getElementById(id);}
--- a/WEBFiles/404.htm
+++ b/WEBFiles/404.htm
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>404 - Page not found</title>
+	<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+	<h3 class="top">RTL871X Built-in Web server <sup>&copy</sup></h3>
+	<div class="content">
+		<h2 class="error">404 - Page not found</h2>
+		<p>Sorry, the page you are requesting was not found on this server.</p>
+	</div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/adc.htm
+++ b/WEBFiles/adc.htm
@ -0,0 +1,10 @@
+~inc:grfx1.inc~
+<td width="50%">ADC: <span id="xdata" style="font-weight:bold">?</span></td>
+<script type="text/javascript">
+ var xmlfile = 'adc.xml';
+ var xmin = 24;
+ var xmax = 1000;
+ var millisPerPixel = 50;
+ var millisPerLine = 500;
+</script>
+~inc:grfx2.inc~
--- a/WEBFiles/disk_er1.htm
+++ b/WEBFiles/disk_er1.htm
@ -0,0 +1,5 @@
+~inc:timer.inc~
+<h2 class="error">Image Corrupt or Wrong Version!</h2>
+</div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/disk_er2.htm
+++ b/WEBFiles/disk_er2.htm
@ -0,0 +1,5 @@
+~inc:timer.inc~
+<h2 class="error">File to big in flash!</h2>
+</div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/disk_er3.htm
+++ b/WEBFiles/disk_er3.htm
@ -0,0 +1,5 @@
+~inc:timer.inc~
+<h2 class="error">Bad file!</h2>
+</div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/disk_ok.htm
+++ b/WEBFiles/disk_ok.htm
@ -0,0 +1,5 @@
+~inc:timer.inc~
+<h2 class="ok">Update Successful!</h2>
+</div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/favicon.ico
+++ b/WEBFiles/favicon.ico
--- a/WEBFiles/footer.inc
+++ b/WEBFiles/footer.inc
@ -0,0 +1,4 @@
+<div class="footer">
+	Version: ~sys_sysver~. WEB Connection: ~web_remote~<br>
+</div>
+<div class="copyright">(c) 2014..2017 by <a href='http://esp8266.ru/'>esp8266.ru</a></div>
--- a/WEBFiles/grf.js
+++ b/WEBFiles/grf.js
@ -0,0 +1,613 @@
+;
+(function(exports) {
+	var Util = {
+		extend : function() {
+			arguments[0] = arguments[0] || {};
+			for (var i = 1; i < arguments.length; i++) {
+				for ( var key in arguments[i]) {
+					if (arguments[i].hasOwnProperty(key)) {
+						if (typeof (arguments[i][key]) === 'object') {
+							if (arguments[i][key] instanceof Array) {
+								arguments[0][key] = arguments[i][key]
+							} else {
+								arguments[0][key] = Util.extend(
+										arguments[0][key], arguments[i][key])
+							}
+						} else {
+							arguments[0][key] = arguments[i][key]
+						}
+					}
+				}
+			}
+			return arguments[0]
+		}
+	};
+	function TimeSeries(options) {
+		this.options = Util.extend({}, TimeSeries.defaultOptions, options);
+		this.clear()
+	}
+	TimeSeries.defaultOptions = {
+		resetBoundsInterval : 3000,
+		resetBounds : true
+	};
+	TimeSeries.prototype.clear = function() {
+		this.data = [];
+		this.maxValue = Number.NaN;
+		this.minValue = Number.NaN
+	};
+	TimeSeries.prototype.resetBounds = function() {
+		if (this.data.length) {
+			this.maxValue = this.data[0][1];
+			this.minValue = this.data[0][1];
+			for (var i = 1; i < this.data.length; i++) {
+				var value = this.data[i][1];
+				if (value > this.maxValue) {
+					this.maxValue = value
+				}
+				if (value < this.minValue) {
+					this.minValue = value
+				}
+			}
+		} else {
+			this.maxValue = Number.NaN;
+			this.minValue = Number.NaN
+		}
+	};
+	TimeSeries.prototype.append = function(timestamp, value,
+			sumRepeatedTimeStampValues) {
+		var i = this.data.length - 1;
+		while (i >= 0 && this.data[i][0] > timestamp) {
+			i--
+		}
+		if (i === -1) {
+			this.data.splice(0, 0, [ timestamp, value ])
+		} else if (this.data.length > 0 && this.data[i][0] === timestamp) {
+			if (sumRepeatedTimeStampValues) {
+				this.data[i][1] += value;
+				value = this.data[i][1]
+			} else {
+				this.data[i][1] = value
+			}
+		} else if (i < this.data.length - 1) {
+			this.data.splice(i + 1, 0, [ timestamp, value ])
+		} else {
+			this.data.push([ timestamp, value ])
+		}
+		this.maxValue = isNaN(this.maxValue) ? value : Math.max(this.maxValue,
+				value);
+		this.minValue = isNaN(this.minValue) ? value : Math.min(this.minValue,
+				value)
+	};
+	TimeSeries.prototype.dropOldData = function(oldestValidTime,
+			maxDataSetLength) {
+		var removeCount = 0;
+		while (this.data.length - removeCount >= maxDataSetLength
+				&& this.data[removeCount + 1][0] < oldestValidTime) {
+			removeCount++
+		}
+		if (removeCount !== 0) {
+			this.data.splice(0, removeCount)
+		}
+	};
+	function SmoothieChart(options) {
+		this.options = Util.extend({}, SmoothieChart.defaultChartOptions,
+				options);
+		this.seriesSet = [];
+		this.currentValueRange = 1;
+		this.currentVisMinValue = 0;
+		this.lastRenderTimeMillis = 0
+	}
+	SmoothieChart.defaultChartOptions = {
+		millisPerPixel : 20,
+		enableDpiScaling : true,
+		yMinFormatter : function(min, precision) {
+			return parseFloat(min).toFixed(precision)
+		},
+		yMaxFormatter : function(max, precision) {
+			return parseFloat(max).toFixed(precision)
+		},
+		maxValueScale : 1,
+		interpolation : 'bezier',
+		scaleSmoothing : 0.125,
+		maxDataSetLength : 2,
+		grid : {
+			fillStyle : '#000000',
+			strokeStyle : '#777777',
+			lineWidth : 1,
+			sharpLines : false,
+			millisPerLine : 1000,
+			verticalSections : 2,
+			borderVisible : true
+		},
+		labels : {
+			fillStyle : '#ffffff',
+			disabled : false,
+			fontSize : 10,
+			fontFamily : 'monospace',
+			precision : 2
+		},
+		horizontalLines : []
+	};
+	SmoothieChart.AnimateCompatibility = (function() {
+		var requestAnimationFrame = function(callback, element) {
+			var requestAnimationFrame = window.requestAnimationFrame
+					|| window.webkitRequestAnimationFrame
+					|| window.mozRequestAnimationFrame
+					|| window.oRequestAnimationFrame
+					|| window.msRequestAnimationFrame || function(callback) {
+						return window.setTimeout(function() {
+							callback(new Date().getTime())
+						}, 16)
+					};
+			return requestAnimationFrame.call(window, callback, element)
+		}, cancelAnimationFrame = function(id) {
+			var cancelAnimationFrame = window.cancelAnimationFrame
+					|| function(id) {
+						clearTimeout(id)
+					};
+			return cancelAnimationFrame.call(window, id)
+		};
+		return {
+			requestAnimationFrame : requestAnimationFrame,
+			cancelAnimationFrame : cancelAnimationFrame
+		}
+	})();
+	SmoothieChart.defaultSeriesPresentationOptions = {
+		lineWidth : 1,
+		strokeStyle : '#ffffff'
+	};
+	SmoothieChart.prototype.addTimeSeries = function(timeSeries, options) {
+		this.seriesSet.push({
+			timeSeries : timeSeries,
+			options : Util.extend({},
+					SmoothieChart.defaultSeriesPresentationOptions, options)
+		});
+		if (timeSeries.options.resetBounds
+				&& timeSeries.options.resetBoundsInterval > 0) {
+			timeSeries.resetBoundsTimerId = setInterval(function() {
+				timeSeries.resetBounds()
+			}, timeSeries.options.resetBoundsInterval)
+		}
+	};
+	SmoothieChart.prototype.removeTimeSeries = function(timeSeries) {
+		var numSeries = this.seriesSet.length;
+		for (var i = 0; i < numSeries; i++) {
+			if (this.seriesSet[i].timeSeries === timeSeries) {
+				this.seriesSet.splice(i, 1);
+				break
+			}
+		}
+		if (timeSeries.resetBoundsTimerId) {
+			clearInterval(timeSeries.resetBoundsTimerId)
+		}
+	};
+	SmoothieChart.prototype.getTimeSeriesOptions = function(timeSeries) {
+		var numSeries = this.seriesSet.length;
+		for (var i = 0; i < numSeries; i++) {
+			if (this.seriesSet[i].timeSeries === timeSeries) {
+				return this.seriesSet[i].options
+			}
+		}
+	};
+	SmoothieChart.prototype.bringToFront = function(timeSeries) {
+		var numSeries = this.seriesSet.length;
+		for (var i = 0; i < numSeries; i++) {
+			if (this.seriesSet[i].timeSeries === timeSeries) {
+				var set = this.seriesSet.splice(i, 1);
+				this.seriesSet.push(set[0]);
+				break
+			}
+		}
+	};
+	SmoothieChart.prototype.streamTo = function(canvas, delayMillis) {
+		this.canvas = canvas;
+		this.delay = delayMillis;
+		this.start()
+	};
+	SmoothieChart.prototype.start = function() {
+		if (this.frame) {
+			return
+		}
+		if (this.options.enableDpiScaling && window
+				&& window.devicePixelRatio !== 1) {
+			var canvasWidth = this.canvas.getAttribute('width');
+			var canvasHeight = this.canvas.getAttribute('height');
+			this.canvas.setAttribute('width', canvasWidth
+					* window.devicePixelRatio);
+			this.canvas.setAttribute('height', canvasHeight
+					* window.devicePixelRatio);
+			this.canvas.style.width = canvasWidth + 'px';
+			this.canvas.style.height = canvasHeight + 'px';
+			this.canvas.getContext('2d').scale(window.devicePixelRatio,
+					window.devicePixelRatio)
+		}
+		var animate = function() {
+			this.frame = SmoothieChart.AnimateCompatibility
+					.requestAnimationFrame(function() {
+						this.render();
+						animate()
+					}.bind(this))
+		}.bind(this);
+		animate()
+	};
+	SmoothieChart.prototype.stop = function() {
+		if (this.frame) {
+			SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
+			delete this.frame
+		}
+	};
+	SmoothieChart.prototype.updateValueRange = function() {
+		var chartOptions = this.options, chartMaxValue = Number.NaN, chartMinValue = Number.NaN;
+		for (var d = 0; d < this.seriesSet.length; d++) {
+			var timeSeries = this.seriesSet[d].timeSeries;
+			if (!isNaN(timeSeries.maxValue)) {
+				chartMaxValue = !isNaN(chartMaxValue) ? Math.max(chartMaxValue,
+						timeSeries.maxValue) : timeSeries.maxValue
+			}
+			if (!isNaN(timeSeries.minValue)) {
+				chartMinValue = !isNaN(chartMinValue) ? Math.min(chartMinValue,
+						timeSeries.minValue) : timeSeries.minValue
+			}
+		}
+		if (chartOptions.maxValue != null) {
+			chartMaxValue = chartOptions.maxValue
+		} else {
+			chartMaxValue *= chartOptions.maxValueScale
+		}
+		if (chartOptions.minValue != null) {
+			chartMinValue = chartOptions.minValue
+		}
+		if (this.options.yRangeFunction) {
+			var range = this.options.yRangeFunction({
+				min : chartMinValue,
+				max : chartMaxValue
+			});
+			chartMinValue = range.min;
+			chartMaxValue = range.max
+		}
+		if (!isNaN(chartMaxValue) && !isNaN(chartMinValue)) {
+			var targetValueRange = chartMaxValue - chartMinValue;
+			var valueRangeDiff = (targetValueRange - this.currentValueRange);
+			var minValueDiff = (chartMinValue - this.currentVisMinValue);
+			this.isAnimatingScale = Math.abs(valueRangeDiff) > 0.1
+					|| Math.abs(minValueDiff) > 0.1;
+			this.currentValueRange += chartOptions.scaleSmoothing
+					* valueRangeDiff;
+			this.currentVisMinValue += chartOptions.scaleSmoothing
+					* minValueDiff
+		}
+		this.valueRange = {
+			min : chartMinValue,
+			max : chartMaxValue
+		}
+	};
+	SmoothieChart.prototype.render = function(canvas, time) {
+		var nowMillis = new Date().getTime();
+		if (!this.isAnimatingScale) {
+			var maxIdleMillis = Math.min(1000 / 6, this.options.millisPerPixel);
+			if (nowMillis - this.lastRenderTimeMillis < maxIdleMillis) {
+				return
+			}
+		}
+		this.lastRenderTimeMillis = nowMillis;
+		canvas = canvas || this.canvas;
+		time = time || nowMillis - (this.delay || 0);
+		time -= time % this.options.millisPerPixel;
+		var context = canvas.getContext('2d'), chartOptions = this.options, dimensions = {
+			top : 0,
+			left : 0,
+			width : canvas.clientWidth,
+			height : canvas.clientHeight
+		}, oldestValidTime = time
+				- (dimensions.width * chartOptions.millisPerPixel), valueToYPixel = function(
+				value) {
+			var offset = value - this.currentVisMinValue;
+			return this.currentValueRange === 0 ? dimensions.height
+					: dimensions.height
+							- (Math.round((offset / this.currentValueRange)
+									* dimensions.height))
+		}.bind(this), timeToXPixel = function(t) {
+			return Math.round(dimensions.width
+					- ((time - t) / chartOptions.millisPerPixel))
+		};
+		this.updateValueRange();
+		context.font = chartOptions.labels.fontSize + 'px '
+				+ chartOptions.labels.fontFamily;
+		context.save();
+		context.translate(dimensions.left, dimensions.top);
+		context.beginPath();
+		context.rect(0, 0, dimensions.width, dimensions.height);
+		context.clip();
+		context.save();
+		context.fillStyle = chartOptions.grid.fillStyle;
+		context.clearRect(0, 0, dimensions.width, dimensions.height);
+		context.fillRect(0, 0, dimensions.width, dimensions.height);
+		context.restore();
+		context.save();
+		context.lineWidth = chartOptions.grid.lineWidth;
+		context.strokeStyle = chartOptions.grid.strokeStyle;
+		if (chartOptions.grid.millisPerLine > 0) {
+			context.beginPath();
+			for (var t = time - (time % chartOptions.grid.millisPerLine); t >= oldestValidTime; t -= chartOptions.grid.millisPerLine) {
+				var gx = timeToXPixel(t);
+				if (chartOptions.grid.sharpLines) {
+					gx -= 0.5
+				}
+				context.moveTo(gx, 0);
+				context.lineTo(gx, dimensions.height)
+			}
+			context.stroke();
+			context.closePath()
+		}
+		for (var v = 1; v < chartOptions.grid.verticalSections; v++) {
+			var gy = Math.round(v * dimensions.height
+					/ chartOptions.grid.verticalSections);
+			if (chartOptions.grid.sharpLines) {
+				gy -= 0.5
+			}
+			context.beginPath();
+			context.moveTo(0, gy);
+			context.lineTo(dimensions.width, gy);
+			context.stroke();
+			context.closePath()
+		}
+		if (chartOptions.grid.borderVisible) {
+			context.beginPath();
+			context.strokeRect(0, 0, dimensions.width, dimensions.height);
+			context.closePath()
+		}
+		context.restore();
+		if (chartOptions.horizontalLines && chartOptions.horizontalLines.length) {
+			for (var hl = 0; hl < chartOptions.horizontalLines.length; hl++) {
+				var line = chartOptions.horizontalLines[hl], hly = Math
+						.round(valueToYPixel(line.value)) - 0.5;
+				context.strokeStyle = line.color || '#ffffff';
+				context.lineWidth = line.lineWidth || 1;
+				context.beginPath();
+				context.moveTo(0, hly);
+				context.lineTo(dimensions.width, hly);
+				context.stroke();
+				context.closePath()
+			}
+		}
+		for (var d = 0; d < this.seriesSet.length; d++) {
+			context.save();
+			var timeSeries = this.seriesSet[d].timeSeries, dataSet = timeSeries.data, seriesOptions = this.seriesSet[d].options;
+			timeSeries.dropOldData(oldestValidTime,
+					chartOptions.maxDataSetLength);
+			context.lineWidth = seriesOptions.lineWidth;
+			context.strokeStyle = seriesOptions.strokeStyle;
+			context.beginPath();
+			var firstX = 0, lastX = 0, lastY = 0;
+			for (var i = 0; i < dataSet.length && dataSet.length !== 1; i++) {
+				var x = timeToXPixel(dataSet[i][0]), y = valueToYPixel(dataSet[i][1]);
+				if (i === 0) {
+					firstX = x;
+					context.moveTo(x, y)
+				} else {
+					switch (chartOptions.interpolation) {
+					case "linear":
+					case "line": {
+						context.lineTo(x, y);
+						break
+					}
+					case "bezier":
+					default: {
+						context.bezierCurveTo(Math.round((lastX + x) / 2),
+								lastY, Math.round((lastX + x)) / 2, y, x, y);
+						break
+					}
+					case "step": {
+						context.lineTo(x, lastY);
+						context.lineTo(x, y);
+						break
+					}
+					}
+				}
+				lastX = x;
+				lastY = y
+			}
+			if (dataSet.length > 1) {
+				if (seriesOptions.fillStyle) {
+					context.lineTo(dimensions.width + seriesOptions.lineWidth
+							+ 1, lastY);
+					context.lineTo(dimensions.width + seriesOptions.lineWidth
+							+ 1, dimensions.height + seriesOptions.lineWidth
+							+ 1);
+					context.lineTo(firstX, dimensions.height
+							+ seriesOptions.lineWidth);
+					context.fillStyle = seriesOptions.fillStyle;
+					context.fill()
+				}
+				if (seriesOptions.strokeStyle
+						&& seriesOptions.strokeStyle !== 'none') {
+					context.stroke()
+				}
+				context.closePath()
+			}
+			context.restore()
+		}
+		if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min)
+				&& !isNaN(this.valueRange.max)) {
+			var maxValueString = chartOptions.yMaxFormatter(
+					this.valueRange.max, chartOptions.labels.precision), minValueString = chartOptions
+					.yMinFormatter(this.valueRange.min,
+							chartOptions.labels.precision);
+			context.fillStyle = chartOptions.labels.fillStyle;
+			context.fillText(maxValueString, dimensions.width
+					- context.measureText(maxValueString).width - 2,
+					chartOptions.labels.fontSize);
+			context.fillText(minValueString, dimensions.width
+					- context.measureText(minValueString).width - 2,
+					dimensions.height - 2)
+		}
+		if (chartOptions.timestampFormatter
+				&& chartOptions.grid.millisPerLine > 0) {
+			var textUntilX = dimensions.width
+					- context.measureText(minValueString).width + 4;
+			for (var t = time - (time % chartOptions.grid.millisPerLine); t >= oldestValidTime; t -= chartOptions.grid.millisPerLine) {
+				var gx = timeToXPixel(t);
+				if (gx < textUntilX) {
+					var tx = new Date(t), ts = chartOptions
+							.timestampFormatter(tx), tsWidth = context
+							.measureText(ts).width;
+					textUntilX = gx - tsWidth - 2;
+					context.fillStyle = chartOptions.labels.fillStyle;
+					context.fillText(ts, gx - tsWidth, dimensions.height - 2)
+				}
+			}
+		}
+		context.restore()
+	};
+	SmoothieChart.timeFormatter = function(date) {
+		function pad2(number) {
+			return (number < 10 ? '0' : '') + number
+		}
+		return pad2(date.getHours()) + ':' + pad2(date.getMinutes()) + ':'
+				+ pad2(date.getSeconds())
+	};
+	exports.TimeSeries = TimeSeries;
+	exports.SmoothieChart = SmoothieChart
+})(typeof exports === 'undefined' ? this : exports);
+var line1 = new TimeSeries();
+var newval = 0;
+function addpoint(xmlData) {
+	if (xmlData) {
+		newval = eval(getXMLValue(xmlData, 'value'));
+		line1.append(new Date().getTime(), newval);
+		document.getElementById('xdata').innerHTML = newval;
+		if (newval > xmax)
+			document.getElementById('xdata').style.color = '#0000A0';
+		else if (newval < xmin)
+			document.getElementById('xdata').style.color = '#A00000';
+		else
+			document.getElementById('xdata').style.color = '#00A000'
+	} else
+		line1.append(new Date().getTime(), newval)
+}
+var smoothie = new SmoothieChart({
+	interpolation : 'linear',
+	minValue : 0,
+	millisPerPixel : millisPerPixel,
+	grid : {
+		strokeStyle : 'rgb(100, 110, 150)',
+		fillStyle : 'rgb(50, 55, 75)',
+		lineWidth : 1,
+		millisPerLine : millisPerLine,
+		verticalSections : 6
+	},
+	labels : {
+		precision : 0
+	}
+});
+smoothie.addTimeSeries(line1, {
+	strokeStyle : 'rgb(255, 0, 200)',
+	fillStyle : 'rgba(255, 0, 200, 0.3)',
+	lineWidth : 3
+});
+smoothie.streamTo(document.getElementById("mycanvas"), nextimeout);
+setTimeout("newAJAXCommand(xmlfile, addpoint, true)", 100);
+function slider(elemId, sliderWidth, range1, range2, step) {
+	var knobWidth = 17;
+	var knobHeight = 21;
+	var sliderHeight = 21;
+	var offsX, tmp;
+	var d = document;
+	var isIE = d.all || window.opera;
+	var point = (sliderWidth - knobWidth - 3) / (range2 - range1);
+	var slider = d.createElement('DIV');
+	slider.id = elemId + '_slider';
+	slider.className = 'slider';
+	d.getElementById(elemId).appendChild(slider);
+	var knob = d.createElement('DIV');
+	knob.id = elemId + '_knob';
+	knob.className = 'knob';
+	slider.appendChild(knob);
+	knob.style.left = 0;
+	knob.style.width = knobWidth + 'px';
+	knob.style.height = knobHeight + 'px';
+	slider.style.width = sliderWidth + 'px';
+	slider.style.height = sliderHeight + 'px';
+	var sliderOffset = slider.offsetLeft;
+	tmp = slider.offsetParent;
+	while (tmp.tagName != 'BODY') {
+		sliderOffset += tmp.offsetLeft;
+		tmp = tmp.offsetParent
+	}
+	if (isIE) {
+		knob.onmousedown = startCoord;
+		slider.onclick = sliderClick;
+		knob.onmouseup = endCoord;
+		slider.onmouseup = endCoord
+	} else {
+		knob.addEventListener("mousedown", startCoord, true);
+		slider.addEventListener("click", sliderClick, true);
+		knob.addEventListener("mouseup", endCoord, true);
+		slider.addEventListener("mouseup", endCoord, true)
+	}
+	function setValue(x) {
+		if (x < 0)
+			knob.style.left = 0;
+		else if (x > sliderWidth - knobWidth - 3)
+			knob.style.left = (sliderWidth - 3 - knobWidth) + 'px';
+		else {
+			if (step == 0)
+				knob.style.left = x + 'px';
+			else
+				knob.style.left = Math.round(x / (step * point)) * step * point
+						+ 'px'
+		}
+		nextimeout = getValue();
+		d.getElementById('toutid').value = nextimeout;
+		document.getElementById('toutid').innerHTML = nextimeout
+	}
+	function setValue2(x) {
+		if (x < range1 || x > range2)
+			alert('Value is not included into a slider range!');
+		else
+			setValue((x - range1) * point);
+		nextimeout = getValue();
+		d.getElementById('toutid').value = nextimeout;
+		document.getElementById('toutid').innerHTML = nextimeout
+	}
+	function getValue() {
+		return Math.round(parseInt(knob.style.left) / point) + range1
+	}
+	function sliderClick(e) {
+		var x;
+		if (isIE) {
+			if (event.srcElement != slider)
+				return;
+			x = event.offsetX - Math.round(knobWidth / 2)
+		} else
+			x = e.pageX - sliderOffset - knobWidth / 2;
+		setValue(x)
+	}
+	function startCoord(e) {
+		if (isIE) {
+			offsX = event.clientX - parseInt(knob.style.left);
+			slider.onmousemove = mov
+		} else {
+			slider.addEventListener("mousemove", mov, true)
+		}
+	}
+	function mov(e) {
+		var x;
+		if (isIE)
+			x = event.clientX - offsX;
+		else
+			x = e.pageX - sliderOffset - knobWidth / 2;
+		setValue(x)
+	}
+	function endCoord() {
+		if (isIE)
+			slider.onmousemove = null;
+		else
+			slider.removeEventListener("mousemove", mov, true)
+	}
+	this.setValue = setValue2;
+	this.getValue = getValue
+}
+var mysl1 = new slider('sl', 333, 20, 10020, 0);
+mysl1.setValue(500);
+document.getElementById('toutid').innerHTML = mysl1.getValue();
--- a/WEBFiles/grfx1.inc
+++ b/WEBFiles/grfx1.inc
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X</title>
+	<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+~inc:menu.inc~
+<style>
+.slider {background-repeat: repeat-x; background-image: url(data:image/gif;base64,R0lGODlhAgAVALIBADg4OHh4eGtra0ZGRjU1NUJCQhcXFwAAACH5BAUAAAcALAAAAAACABUAAAMNeLoqHm4MQkoxhumtEwA7);}
+.knob {position: relative; background-image: url(data:image/gif;base64,R0lGODlhEwAVAPcAAAAXSwEWSwAZTAEYTAAaTQIZTQsiVAErcwEucgA3iQE4iBQ+igBDlABFkgFQmwFRmgFcowFfpRFusRNvshpysh1yszNUmyV6uyd7uyd8vCl9vSl+vip+vix9vjNxrjJ9tDJ/tT57tC5/wFF/oSyAvi+AvzuHuzyFuj2Euj+IvSuAwCyAwC6CwDOFwTeJxTiKxDqKxzmKyTqMyDqOzDuPzT2Pyz6OzUKIvEeJvVOBo0mPwkuPwEyOwEKRzEWRy0mRw06Sw0ySxU2Txk+TxEiX0Eub1kqc1kqb2kuc202e3VCRx1iXw1mYxFqZxFuaxV2axk+h3VCg3VCi3lSg2lWh21qo5luq5V2p412t6F6w7F+w8WKdx2KayWOdy2OeymSdyGWeyWafymieyn2Yw2mgyWihzHGy3Ha23GGz7Wm07WCx8GKy8Wq28G+89G+/9HC98XO/83O+9XPA9nXB83TC83XB9XbC9H3H9Iafx4Ku0YOw0YWw04Wy04ax04ay1Yaz1Iey1ILL9IPM9YPO9ofP9YbQ94fR9ojQ9ojS9YnS9ZLc95Pd9pTb95fd95Pd+Jff+Jje+Jfi95nh95jg+L/O46Xt+abs+Knv+6ru+6zu+qvx+63x+qzy+rL4+rX5/Lf4/LT8+7b8/Lr8+7/7/MHN48DP4sDP5MLO5MH7/MH7/cD8/MX7/cv9/M78+s/9/dD8+9v9/P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAALEALAAAAAATABUAAAj+AGMJHEiwoEGBBgQQGBAAQAEBBQoYOLhgDCVTpU6dMsWRFB4LBRF4yMPHz58+fQDt4dNHT4gDBBWA2EKmDJgvXsSA6RKGy4cEBBugYPLECZMmTpwgbbLkBAOCDkzw0AFkiA4lQn7sCAIkxQOCESpgIKHhwooNKlZ0EJGBAgSCEji4gFHDxowZNGjEkPGixQSCJXoQMYJEShIpUKQciVLEBwuCN6ZcwZIFjZo1WdRoqWKFCg6CI9i8eTPHDh05burAidMmTY6CZwYREpSoECFEhg4FumPmYCRFkx41kvTIESRGiw4KBMXJEqZKlzJt0qR84CpRnjp9CpWqOkFXqEYSqWrlvaArVq/KG4Slvr175QEBADs=);}
+</style>
+<div class="content"><table cellspacing="2" cellpadding="0" border="0" style="font-size:16pt"><tr>
--- a/WEBFiles/grfx2.inc
+++ b/WEBFiles/grfx2.inc
@ -0,0 +1,6 @@
+<td style="font-size:10pt">
+<div id="sl"></div>GET TimeOuts <span id="toutid" style="font-weight:bold">?</span> ms'</td></tr></table>
+<canvas id="mycanvas" width="620pt" height="200pt"></canvas></div>
+<script src="site.js" type="text/javascript"></script>
+<script src="grf.js" type="text/javascript"></script>
+~inc:footer.inc~</body></html>
--- a/WEBFiles/heap.htm
+++ b/WEBFiles/heap.htm
@ -0,0 +1,9 @@
+~inc:grfx1.inc~
+<td width="50%">Heap Size: <span id="xdata" style="font-weight:bold">?</span> bytes</td>
+<script type="text/javascript">
+ var xmlfile = 'heap.xml';
+ var xmin = 16384;
+ var xmax = 30000;
+ var millisPerPixel = 500;
+ var millisPerLine = 10000;
+</script>~inc:grfx2.inc~
--- a/WEBFiles/heap.xml
+++ b/WEBFiles/heap.xml
@ -0,0 +1 @@
+<response><name>Heap Size</name><value>~sys_heap~</value></response>
--- a/WEBFiles/index.htm
+++ b/WEBFiles/index.htm
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X</title>
+	<link rel="stylesheet" href="/style.css">
+</head><body>
+~inc:menu.inc~
+<div class="content">
+<h2 class="title">&#10031;<a href="/help/webvars.htm">Info</a>&#10031;</h2>
+<p class="center">
+Name: ~wifi_ap_ssid~ Password: ~wifi_ap_psw~<br>
+Web connect: ~web_remote~,<br>
+WEB ver: ~sys_webver~, SDK ver: ~sys_sdkver~.<br>
+ChipID: ~sys_cid~.<br><br>
+DevTime: <span id='sntptime'>SNTP disable</span><br>
+PowerStartTime: <span id='starttime'>?</span><br><br>
+</p></div>
+~inc:footer.inc~
+~inc:time.inc~
+</body></html>
--- a/WEBFiles/logo.gif
+++ b/WEBFiles/logo.gif
--- a/WEBFiles/menu.inc
+++ b/WEBFiles/menu.inc
@ -0,0 +1,26 @@
+<h3 class="top">RTL871x Built-in Web server <sup>&copy;</sup></h3>
+<div class="menu">
+	<div>
+		<a href="/index.htm">Main</a>
+		<a href="/websock.htm">WebSocket</a>
+		<a href="/protect/wifi.htm">WiFi settings</a>
+		<a href="/protect/scan.htm">WiFi Scan</a>
+		<a href="/protect/upload.htm">WebFS Upload</a>
+		<a href="/protect/setup.htm">System Setup</a>
+	</div>
+	<div>
+		<a href="/protect/gpio.htm">GPIO</a>
+		<a href="/protect/hexdmpb.htm">HexDump Bytes</a>
+		<a href="/protect/hexdmpd.htm">HexDump DWord</a>
+		<a href="/protect/tstfuncs.htm">Download Bin</a>
+		<a href="/protect/dsleep.htm">Deep Sleep</a>
+		<a href="/protect/debug.htm">Debug and Test</a>
+	</div>
+</div>
+<script type="text/javascript">
+for (var i = 0; i < document.links.length; i++) {
+    if (document.links[i].href == document.URL) {
+        document.links[i].className = 'active';
+    }
+}
+</script>
--- a/WEBFiles/protect/chiprams.xml
+++ b/WEBFiles/protect/chiprams.xml
@ -0,0 +1,4 @@
+<response>
+<ramaddr>~start~</ramaddr>
+<ramdata>~xml_ram~</ramdata>
+</response>
--- a/WEBFiles/protect/cookie.js
+++ b/WEBFiles/protect/cookie.js
@ -0,0 +1,70 @@
+function getCookie(name) {
+	var prefix = name + "=";
+	var cookieStartIndex = document.cookie.indexOf(prefix);
+	if (cookieStartIndex == -1)
+		return null;
+	var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex
+			+ prefix.length);
+	if (cookieEndIndex == -1)
+		cookieEndIndex = document.cookie.length;
+	return unescape(document.cookie.substring(cookieStartIndex + prefix.length,
+			cookieEndIndex));
+}
+function setCookie(name, value) {
+	document.cookie = name + "=" + escape(value) + "; path=/";
+}
+function setCookieElem(name, defv) {
+	var val = getCookie(name);
+	if (val == null || val.charAt(0) != '0' || val.charAt(1) != 'x') {
+		val = defv;
+		setCookie(name, val);
+	}
+	document.getElementById(name).value = val;
+}
+function NewCookie(add) {
+	var val = parseInt(document.getElementById('start').value, 16) & 0xFFFFFFF0;
+	if (val == NaN)
+		setCookieElem('start', '0x40000000');
+	else {
+		val += add;
+		setCookie('start', '0x' + val.toString(16));
+		var nval = val + 256;
+		setCookie('stop', '0x' + nval.toString(16));
+		document.getElementById('start').value = '0x' + val.toString(16);
+		document.getElementById('pmem').contentWindow.location.reload();
+	}
+}
+setCookieElem('start', '0x40000000');
+setCookieElem('set_ramaddr', '0x3FFF0000');
+setCookieElem('set_ramdata', '0x12345678');
+function UpTxt(xD, n, v) {
+	var x = getXMLValue(xD, n, v);
+	if (x == '?')
+		document.getElementById("id_" + n).style.color = "#833";
+	else
+		document.getElementById("id_" + n).style.color = "#333";
+	document.getElementById("id_" + n).innerHTML = x + v;
+}
+function UpdateValuesRam(xD) {
+	if (xD) {
+		UpTxt(xD, "ramaddr", "");
+		UpTxt(xD, "ramdata", "");
+	}
+}
+function SendRamVal(x) {
+	var addr = parseInt(document.getElementById('set_ramaddr').value, 16);
+	var val = parseInt(document.getElementById('set_ramdata').value, 16);
+	if (addr != NaN && val != NaN) {
+		document.getElementById('set_ramaddr').value = '0x' + addr.toString(16);
+		setCookie('set_ramaddr','0x' + addr.toString(16));
+		document.getElementById('set_ramdata').value = '0x' + val.toString(16);
+		setCookie('set_ramdata','0x' + val.toString(16));
+		if (x != 0)
+			newAJAXCommand('chiprams.xml?start=0x' + addr.toString(16),
+					UpdateValuesRam, 0);
+		else
+			newAJAXCommand('chiprams.xml?sys_ram0x' + addr.toString(16) + '=0x'
+					+ val.toString(16) + '&start=0x' + addr.toString(16),
+					UpdateValuesRam, 0);
+	}
+}
--- a/WEBFiles/protect/debug.htm
+++ b/WEBFiles/protect/debug.htm
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X Debug and Tests</title>
+	<link rel="stylesheet" href="/style.css">
+</head><body>
+~inc:menu.inc~
+<div class="content">
+<h2 class="title">Debug and Tests</h2>
+<p class="center">
+Chart <a href="/heap.htm">'heap'</a>, <a href="/tst.htm">ST-AP RSSI</a><br><br>
+<a href='/timeout.htm?sys_restart=12345'>System Restart</a><br><br>
+Counter erase the last flash sector config: ~sys_rdec0x980FE000~<br><br>
+</p>
+</div>
+<div class="content">
+<h2 class="title">System constants?</h2>
+<table class="form">
+</tr></form>
+</tr>
+</table>
+</div>
+~inc:footer.inc~
+</body>
+</html>
--- a/WEBFiles/protect/dsleep.htm
+++ b/WEBFiles/protect/dsleep.htm
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X</title>
+	<link rel="stylesheet" href="/style.css">
+	<script src="/site.js"></script>
+</head>
+<body onload="allowAJAX=true;" onunload="allowAJAX=false;">
+	~inc:menu.inc~
+	<div class="content">
+		<h2 class="title">Test DeepSleep</h2>
+		<table class="form">
+			</tr>
+				<td class="label">DeepSleep Time(ms):</td>
+				<td><input type="text" id="ds_time" size="12" maxlength="10" value="3000"></td>
+			</tr>
+			<tr>
+				<td class="label">DeepSleep Mode:</td>
+				<td class="left"><input type="button" onclick="DeepSleep()" value="Go" class="button"></td>
+			</tr>
+		  </form>
+		</table>
+		<p class="center">
+		Reset event = ~sys_res_event~ (1-power, 2-reset, 3-software, 4-wdt)<br>
+		</p>
+	</div>
+~inc:footer.inc~
+</body>
+</html>
+
--- a/WEBFiles/protect/fullflash.bin
+++ b/WEBFiles/protect/fullflash.bin
@ -0,0 +1 @@
+~bin_flash_all~
--- a/WEBFiles/protect/hexdmpb.htm
+++ b/WEBFiles/protect/hexdmpb.htm
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
+	<title>RTL871X HexDump Byte</title>
+	<link rel="stylesheet" href="../style.css">
+	<script src="/site.js"></script>
+</head><body onload="allowAJAX=true;" onlnload="allowAJAX=false;">
+	~inc:menu.inc~
+	<div class="content">
+   		<h2 class="title">HexDump Bytes</h2>
+		<table>
+			<tr>
+				<td>RAM Start addr</td>
+				<td><input type="text" id="start" size="12" maxlength="10" value="0x1FFF0000"></td>
+				<td><input type="button" onClick="NewCookie(-256)" value="-0x100" class="button"></td>
+				<td><input type="button" onClick="NewCookie(0)" value="Show" class="button"></td>
+				<td><input type="button" onClick="NewCookie(+256)" value="+0x100" class="button"></td>
+			</tr>
+		</table>
+		<iframe id='pmem' name='pmem' src="/protect/hexdmpb.txt" border="0" width="620" height="270"></iframe>
+		<table>
+			<tr>
+				<td>Write addr, value:</td>
+				<td><input type="text" id="set_ramaddr" size="12" maxlength="10" value="0x1FFF0000"></td>
+				<td><input type="text" id="set_ramdata" size="12" maxlength="10" value="0x12345678"></td>
+				<td><input type="button" onClick="SendRamVal(0)" value="Write" class="button"></td>
+			</tr>
+			<tr>
+				<td>Read addr, value:</td>
+				<td id="id_ramaddr">?</td>
+				<td id="id_ramdata">?</td>
+				<td><input type="button" onClick="SendRamVal(1)" value="Read" class="button"></td>
+			</tr>
+		</table>
+	</div>
+	<div class="footer">
+		Protected area: 0x9A000000..0xFFFFFFFF !<br>
+		<a href='/protect/hexdmpb.txt?start=0x98000000&stop=0x98100000'>HEX Dump Flash 1024k</a>
+	</div>
+	<script src="cookie.js"></script>
+</body></html>
--- a/WEBFiles/protect/hexdmpb.txt
+++ b/WEBFiles/protect/hexdmpb.txt
@ -0,0 +1 @@
+~hexdmpb~
--- a/WEBFiles/protect/hexdmpd.htm
+++ b/WEBFiles/protect/hexdmpd.htm
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
+	<title>RTL871X HexDump DWord</title>
+	<link rel="stylesheet" href="../style.css">
+	<script src="/site.js"></script>
+</head><body onload="allowAJAX=true;" onlnload="allowAJAX=false;">
+	~inc:menu.inc~
+	<div class="content">
+   		<h2 class="title">HexDump DWord</h2>
+		<table>
+			<tr>
+				<td>RAM Start addr&nbsp&nbsp&nbsp</td>
+				<td><input type="text" id="start" size="12" maxlength="10" value="0x1FFF0000"></td>
+				<td><input type=button onClick="NewCookie(-256)" value="-0x100" class="button"></td>
+				<td><input type=button onClick="NewCookie(0)" value="Show" class="button"></td>
+				<td><input type=button onClick="NewCookie(+256)" value="+0x100" class="button"></td>
+			</tr>
+		</table>
+		<iframe  id='pmem' name='pmem' src="/protect/hexdmpd.txt" border="0" width="620" height="270"></iframe>
+		<table>
+			<tr>
+				<td>Write addr, value:</td>
+				<td><input type="text" id="set_ramaddr" size="12" maxlength="10" value="0x1FFF0000"></td>
+				<td><input type="text" id="set_ramdata" size="12" maxlength="10" value="0x12345678"></td>
+				<td><input type="button" onClick="SendRamVal(0)" value="Write" class="button"></td>
+			</tr>
+			<tr>
+				<td>Read addr, value:</td>
+				<td id="id_ramaddr">?</td>
+				<td id="id_ramdata">?</td>
+				<td><input type="button" onClick="SendRamVal(1)" value="Read" class="button"></td>
+			</tr>
+		</table>
+	</div>
+	<div class="footer">
+		Protected area: 0x9A000000..0xFFFFFFFF !<br>
+		<a href='/protect/hexdmpd.txt?start=0x98000000&stop=0x98100000'>HEX Dump Flash 1024k</a>
+	</div>
+	<script src="cookie.js"></script>
+</body></html>
--- a/WEBFiles/protect/hexdmpd.txt
+++ b/WEBFiles/protect/hexdmpd.txt
@ -0,0 +1 @@
+~hexdmpd~
--- a/WEBFiles/protect/ram.bin
+++ b/WEBFiles/protect/ram.bin
@ -0,0 +1 @@
+~bin_ram~
--- a/WEBFiles/protect/scan.htm
+++ b/WEBFiles/protect/scan.htm
@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<title>WiFi Scan</title>
+<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+	~inc:menu.inc~
+	<div class="content">
+		<h2 class="title">
+			<div id="scanResult">Stations scanning...</div>
+		</h2>
+		<table id="aps" class="scan">
+			<tr><th>SSID</th><th>BSSID</th><th>Auth</th><th>Ch</th><th>RSSI</th><th>Hd</th></tr>
+		</table>
+		<form id="stform" style="display: none" method='post' action='/timeout.htm'>
+			<table class="form">
+				<tr>
+					<td class="label">Select or input SSID:<input type='hidden' name='wifi_rdcfg' value='0x1C00'></td>
+					<td><input name='wifi_st_ssid' maxlength='31' value='~wifi_st_ssid~' id='inputssid'></td>
+					<td class="label">Type password:</td>
+					<td><input name='wifi_st_psw' maxlength='63' value='~wifi_st_psw~'></td>
+				</tr>
+				<tr>
+					<td class="label">BSSID:</td>
+					<td><input name='wifi_st_bssid' maxlength='31' value='~wifi_st_bssid~' id='inputbsid'></td>
+					<td class="label">AutoConnect:</td>
+					<td><input type='hidden' name='wifi_st_aucn' value='0'>
+						<input type='checkbox' name='wifi_st_aucn' value='1'></td>
+				</tr>
+			</table>
+			<p class="center">
+				<input type='submit' value='Set Config' class="button">
+				<input type='hidden' name='wifi_newcfg' value='0x21C00'>
+			</p>
+		</form>
+		<div id="connection"></div>
+	</div>
+	~inc:footer.inc~
+</body>
+<script src="/site.js"></script>
+<script src="/scripts.js"></script>
+<script type="text/javascript">
+var AUTH = {
+0: "OPEN",
+1: "WEP",
+2: "WPA-PSK",
+3: "WPA2-PSK",
+4: "WPA-WPA2-PSK",
+5: "MAX"};
+var cfg = { wifi_st_aucn: "~wifi_st_aucn~" };
+setFormValues(document.forms[0], cfg);
+var startTime = new Date();
+newAJAXCommand('/web.cgi?wifi_scan=1');
+setTimeout("newAJAXCommand('scan.xml', updateScan)", 2500);
+function updateScan(xmlData) {
+	if(!xmlData) return;
+	var total = getXMLValue(xmlData, 'total');
+	if (total==0) {
+		if((new Date()-startTime)>10000) {
+			startTime = new Date();
+			$('scanResult').innerHTML="Scan failed. Try again.";
+			newAJAXCommand('/web.cgi?wifi_scan=1');
+		}
+		else newAJAXCommand('scan.xml', updateScan);
+		return;
+	}
+	$('scanResult').innerHTML="Scan completed. " + total + " station(s) found.";
+	for(i = 0; i < total; i++){
+		var ap=xmlData.getElementsByTagName('ap')[i];
+		var ch=getXMLValue(ap, 'ch');
+		var au=getXMLValue(ap, 'au');
+		var bsid=getXMLValue(ap, 'bs');
+		var ssid=getXMLValue(ap, 'ss');
+		var rs=getXMLValue(ap, 'rs');
+		var hd=getXMLValue(ap, 'hd');
+		r=document.all.aps.insertRow();
+		c=r.insertCell(0);c.innerHTML="<a href=# >"+ssid+"</a>";c.ssid=ssid;c.bsid=bsid;c.onclick=onApClick;
+		c=r.insertCell(1);c.innerHTML="<a href=# >"+bsid+"</a>";c.ssid=ssid;c.bsid=bsid;c.onclick=onApClick;c.ondblclick=onInfo;c.title='DoubleClick = MF info';
+		(r.insertCell(2)).innerHTML=AUTH[au];
+		(r.insertCell(3)).innerText=ch;
+		(r.insertCell(4)).innerText=rs;
+		(r.insertCell(5)).innerText=hd;
+	}
+	$('stform').style.display='';
+}
+function onApClick() {
+	$('inputssid').value=this.ssid;
+	$('inputbsid').value=this.bsid;
+}
+function onInfo() {
+	s = this.bsid;
+	s=s.substring(0,8);s=s.replace(':','');
+    document.location.href = "http://standards.ieee.org/cgi-bin/ouisearch?"+s.replace(':','');
+}
+</script>
+</html>
--- a/WEBFiles/protect/scan.xml
+++ b/WEBFiles/protect/scan.xml
@ -0,0 +1 @@
+<?xml version="1.0" encoding="windows-1251"?><response>~wifi_scan~</response>
--- a/WEBFiles/protect/setup.htm
+++ b/WEBFiles/protect/setup.htm
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X Setup</title>
+	<link rel="stylesheet" href="../style.css">
+	<script src="/scripts.js"></script>
+	<script src="/site.js"></script>
+</head><body>
+~inc:menu.inc~
+	<div class="content">
+		<h2 class="title">System Setup</h2>
+		<form method="post" action="">
+			<table class="form">
+				<tr>
+					<td class="label">WEB (HTTP) port:</td>
+					<td><input title='4..65535, 0 - close' name='cfg_web_port' maxlength='5' value='~cfg_web_port~'></td>
+				</tr>
+				<tr>
+					<td class="label">WEB recved timeout:</td>
+					<td><input title='1...65535 sec, 0 - not limited' name='cfg_web_twrec' maxlength='5' value='~cfg_web_twrec~'></td>
+				</tr>
+				<tr>
+					<td class="label">WEB close timeout:</td>
+					<td><input title='1...65535 sec, 0 - not limited' name='cfg_web_twcls' maxlength='5' value='~cfg_web_twcls~'></td>
+				</tr>
+				<tr>
+					<td class="label">LogUART Printf() enable:</td>
+					<td>
+						<input type="hidden" name='cfg_debug' value='0'>
+						<input title='rtl_printf enable. If Off - High speed upload (>1Mbytes/s).' type='checkbox' name='cfg_debug' value='1'>
+					</td>
+				</tr>
+				<tr>
+					<td class="label">Web pcb close enable:</td>
+					<td>
+						<input type="hidden" name='cfg_web_twd' value='0'>
+						<input title='(Proxy) Close web connection and deletes TIME_WAIT pcb' type='checkbox' name='cfg_web_twd' value='1'>
+					</td>
+				</tr>
+				<tr>
+					<td class="label">Checking pin WiFi cfg reset:</td>
+					<td>
+						<input type="hidden" name='cfg_pinclr' value='0'>
+						<input title='Checking reset configuration level on GPIO3 at startup (25 ms)' type='checkbox' name='cfg_pinclr' value='1'>
+					</td>
+				</tr>
+				<tr>
+					<td class="label">NetBIOS enable:</td>
+					<td>
+						<input type="hidden" name='cfg_netbios' value='0'>
+						<input title='NetBIOS AP name = "a~wifi_ap_ssid~", Station = "s~wifi_ap_ssid~"' type='checkbox' name='cfg_netbios' value='1'>
+					</td>
+				</tr>
+				<tr>
+					<td class="label">SNTP enable:</td>
+					<td>
+						<input type="hidden" name='cfg_sntp' value='0'>
+						<input title='SNTP: pool.ntp.org' type='checkbox' name='cfg_sntp' value='1'>
+					</td>
+				</tr>
+				<tr>
+					<td class="label">Captive Portal AP:</td>
+					<td>
+						<input type="hidden" name='cfg_cdns' value='0'>
+						<input type='checkbox' name='cfg_cdns' value='1'>
+					</td>
+				</tr>
+ 			</table>
+		<p class="center">
+			<input type='hidden' name='uart_save' value='2'>
+			<input type='hidden' name='cfg_save' value='1'>
+			<input type='submit' value='Set Config' class="button">
+		</p>
+ 		</form>
+	</div>
+~inc:footer.inc~
+<script type="text/javascript">
+var cfg = {
+	cfg_debug:"~cfg_debug~",
+	cfg_web_twd:"~cfg_web_twd~",
+	cfg_pinclr:"~cfg_pinclr~",
+	cfg_netbios:"~cfg_netbios~",
+	cfg_sntp:"~cfg_sntp~",
+	cfg_cdns:"~cfg_cdns~",
+	cfg_mdb_reop:"~cfg_mdb_reop~"
+}
+setFormValues(document.forms[0], cfg);
+</script>
+</body></html>
--- a/WEBFiles/protect/tstfuncs.htm
+++ b/WEBFiles/protect/tstfuncs.htm
@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X Download bin</title>
+	<link rel="stylesheet" href="../style.css">
+	<script src="/scripts.js"></script>
+</head><body>
+~inc:menu.inc~
+	<div class="content">
+   		<h2 class="title">Download bin</h2>
+		<form method="post"><table class="scan">
+			<tr>
+				<td>ROM-BIOS:</td>
+				<td><a href='ram.bin?start=0x00000000&stop=0x00080000'>0x00000000..0x00080000</a></td>
+				<td>512 kbytes</td>
+			</tr>
+			<tr>
+				<td>SRAM:</td>
+				<td><a href='ram.bin?start=0x10000000&stop=0x10070000'>0x10000000..0x10070000</a></td>
+				<td>448 kbytes</td>
+			</tr>
+			<tr>
+				<td>TCM-RAM:</td>
+				<td><a href='ram.bin?start=0x1FFF0000&stop=0x20000000'>0x1FFF0000..0x20000000</a></td>
+				<td>64 kbytes</td>
+			</tr>
+			<tr>
+				<td>SDRAM:</td>
+				<td><a href='ram.bin?start=0x30000000&stop=0x30200000'>0x30000000..0x30200000</a></td>
+				<td>2048 kbytes</td>
+			</tr>
+			<tr>
+				<td>FLASH Bus:</td>
+				<td><a href='ram.bin?start=0x98000000&stop=0x98100000'>0x98000000..0x98100000</a></td>
+				<td>1024 kbytes</td>
+			</tr>
+			<tr>
+				<td>I/O SoC:</td>
+				<td><a href='ram.bin?start=0x40000000&stop=0x40080000'>0x40000000..0x40080000</a></td>
+				<td>.. kbytes</td>
+			</tr>
+			<tr>
+				<td>ARM:</td>
+				<td><a href='ram.bin?start=0xEF000000&stop=0xEFFFFFFF'>0xEF000000..0xEFFFFFFF</a></td>
+				<td>.. kbytes</td>
+			</tr>
+		</table>
+
+		<table class="form">
+			<tr>
+				<td class="label">Start addr</td>
+				<td><input type="text" id="rams" size=12 maxlength=10 value="0x3FF00000"></td>
+			</tr>
+			<tr>
+				<td class="label">End addr</td>
+				<td><input type="text" id="rame" size=12 maxlength=10 value="0x40800000"></td>
+			</tr>
+		</table>
+		<p class="center"><input type="button" onClick="NewCookie()" value="Download ram.bin" class="button"></p>
+	</div>
+~inc:footer.inc~
+<script type="text/javascript">
+function getCookie(name){
+ var prefix = name + "=";
+ var cookieStartIndex = document.cookie.indexOf(prefix);
+ if (cookieStartIndex == -1) return null;
+ var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
+ if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
+ return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
+}
+function setCookie(name, value){
+ document.cookie = name + "=" + escape(value) + "; path=/";
+}
+function setCookieElem(name, defv){
+ var value = getCookie(name);
+ if(value == null) {
+  value = defv;
+  setCookie(name,value);
+ }
+ document.getElementById(name).value=value;
+}
+function NewCookie(){
+ setCookie('rams',document.getElementById('rams').value);
+ setCookie('raml',document.getElementById('rame').value);
+ window.location.href='ram.bin?start='+document.getElementById('rams').value+'&stop='+document.getElementById('rame').value;
+}
+setCookieElem('rams','0x10000000');
+setCookieElem('rame','0x10070000');
+</script>
+</body>
+</html>
--- a/WEBFiles/protect/upload.htm
+++ b/WEBFiles/protect/upload.htm
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X WebFS Image Upload</title>
+	<link rel="stylesheet" href="../style.css">
+</head><body>
+~inc:menu.inc~
+<form method='post' action='/fsupload' enctype='multipart/form-data' class="content">
+	<h2 class="title">WebFS Image Upload</h2>
+	<p class="center">
+	Select WEBFiles.bin file...<br><br>
+	<input type='file' name='file'><br><br>
+	<input type='submit' value='Upload' class="button">
+	</p>
+</form>
+<div class="content"><p class="center">
+Curent Disk has ~wfs_files~ files, Disk Size: ~wfs_size~ bytes.<br>
+Disk Addres: ~wfs_addr~, Max Disk Size: ~wfs_max_size~ bytes, Max 250 files.<br><br>
+Flash ID: ~sys_fid~, Size: ~sys_fsize~ bytes.<br>
+<a href='/protect/fullflash.bin'>Download fullflash.bin</a><br><br>
+</p></div>
+~inc:footer.inc~
+</body></html>
--- a/WEBFiles/protect/wifi.htm
+++ b/WEBFiles/protect/wifi.htm
@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
+	<title>RTL871X WiFi</title>
+	<link rel="stylesheet" href="/style.css">
+	<script src="/scripts.js"></script>
+</head><body>
+	~inc:menu.inc~
+	<div class="content">
+		<form method='post' action='/timeout.htm'>
+		<input type='hidden' name='wifi_rdcfg' value='0xffffffff'>
+		<table class="form">
+			<tr>
+				<td colspan="2"><h2 class="title">WiFi SoftAP</h2></td>
+				<td colspan="2"><h2 class="title">WiFi Station</h2></td>
+			</tr>
+			<tr>
+			   <td class="label">WiFi Mode:</td>
+				<td><select name='wifi_mode'>
+					<option value='1'>STATION_MODE</option>
+					<option value='2'>SOFTAP_MODE</option>
+					<option value='3'>STATIONAP_MODE</option>
+				</select></td>
+				<td class="label">SSID:</td>
+				<td><input name='wifi_st_ssid' maxlength='31' value='~wifi_st_ssid~'></td>
+			</tr>
+			<tr>
+				<td class="label">AP SSID:</td>
+				<td><input name='wifi_ap_ssid' maxlength='31' value='~wifi_ap_ssid~'></td>
+				<td class="label">Password:</td>
+				<td><input name='wifi_st_psw' maxlength='63' value='~wifi_st_psw~'></td>
+			</tr>
+			<tr>
+				<td class="label">Hidden SSID:</td>
+				<td>
+					<input type='hidden' name='wifi_ap_hssid' value='0'>
+					<input type='checkbox' name='wifi_ap_hssid' value='1'>
+				</td>
+				<td class="label">BSSID:</td>
+				<td><input name='wifi_st_bssid' maxlength='17' value='~wifi_st_bssid~'></td>
+			</tr>
+			<tr>
+				<td class="label">AP Password:</td>
+				<td><input name='wifi_ap_psw' maxlength='63' value='~wifi_ap_psw~'></td>
+				<td class="label">Use BSSID:</td>
+				<td>
+					<input type='hidden' name='wifi_st_sbss' value='0'>
+					<input type='checkbox' name='wifi_st_sbss' value='1'>
+				</td>
+ 			</tr>
+			<tr>
+				<td class="label">Channel:</td>
+				<td><select name='wifi_ap_chl'>
+					<option value='0'>auto</option>
+				</select></td>
+				<td class="label">Auth Mode:</td>
+				<td><select name='wifi_st_auth'>
+					<option value='0'>OPEN</option>
+					<option value='1'>WEP_PSK</option>
+					<option value='32769'>WEP_SHAREDK</option>
+					<option value='2097154'>WPA_TKIP_PSK</option>
+					<option value='2097156'>WPA_AES_PSK</option>
+					<option value='4194306'>WPA2_TKIP_PSK</option>
+					<option value='4194308'>WPA2_AES_PSK</option>
+					<option value='4194310'>WPA2_MIXED_PSK</option>
+					<option value='6291456'>WPA_WPA2_MIXED</option>
+					<option value='268435456'>WPS_OPEN</option>
+					<option value='268435460'>WPS_SECURE</option>
+					<option value='2147483647'>UNKNOWN</option>
+				</select></td>
+			</tr>
+			<tr>
+				<td class="label">IEEE PHY:</td>
+				<td><select name='wifi_phy'>
+					<option value='1'>802.11b</option>
+					<option value='3'>802.11g</option>
+					<option value='11'>802.11n</option>
+				</select></td>
+				<td class="label">IP:</td>
+				<td><input type='text' title='Static ip, if dhcp: off' name='wifi_st_ip' maxlength='31' value='~wifi_st_ip~'></td>
+			</tr>
+			<tr>
+				<td class="label">Auth Mode:</td>
+				<td><select name='wifi_ap_auth'>
+					<option value='0'>OPEN</option>
+					<option value='1'>WPA_WPA2_PSK</option>
+				</select></td>
+				<td class="label">Subnet Mask:</td>
+				<td><input name='wifi_st_msk' maxlength='31' value='~wifi_st_msk~'></td>
+			</tr>
+			<tr>
+				<td class="label">IP:</td>
+				<td><input name='wifi_ap_ip' maxlength='31' value='~wifi_ap_ip~'></td>
+				<td class="label">Gateway:</td>
+				<td><input name='wifi_st_gw' maxlength='31' value='~wifi_st_gw~'></td>
+			</tr>
+			<tr>
+				<td class="label">Subnet Mask:</td>
+				<td><input type='text' name='wifi_ap_msk' maxlength='31' value='~wifi_ap_msk~'></td>
+				<td class="label">AutoReConnect:</td>
+				<td><input name='wifi_st_arec' title='Reconnect Count 1..255.' maxlength='4' value='~wifi_st_arec~'></td>
+			</tr>
+			<tr>
+				<td class="label">Gateway:</td>
+				<td><input name='wifi_ap_gw' maxlength='31' value='~wifi_ap_gw~'></td>
+				<td class="label">ReConnectPause:</td>
+				<td><input name='wifi_st_rect' title='Reconnect pause 1..255 sec.' maxlength='4' value='~wifi_st_rect~'></td>
+			</tr>
+			<tr>
+				<td class="label">MAC:</td>
+				<td><input name='wifi_ap_mac' maxlength='17' value='~wifi_ap_mac~'></td>
+				<td class="label">MAC:</td>
+				<td><input name='wifi_st_mac' maxlength='17' value='~wifi_st_mac~'></td>
+			</tr>
+			<tr>
+				<td class="label">DHCP:</td>
+				<td>
+					<input type='hidden' name='wifi_ap_dhcp' value='0'>
+					<input type='checkbox' name='wifi_ap_dhcp' value='1'>
+				</td>
+				<td class="label">DHCP:</td>
+				<td><select name='wifi_st_dhcp'>
+					<option value='0'>DHCP Off</option>
+					<option value='1'>DHCP On</option>
+					<option value='2'>Static IP</option>
+					<option value='3'>Auto fix</option>
+				</select>
+				</td>
+			</tr>
+			<tr>
+				<td class="label">Country Code:</td>
+				<td><input name='wifi_country' maxlength='10' value='~wifi_country~'></td>
+				<td class="label">RSSI:</td>
+				<td>~wifi_st_rssi~ dB</td>
+			</tr>
+			<tr>
+   			<td class="label">RF Tx Power:</td>
+   			    <td><select name='wifi_txpow'>
+   				<option value='0'>100%</option>
+   				<option value='1'>75%</option>
+   				<option value='2'>50%</option>
+   				<option value='3'>25%</option>
+   				<option value='4'>12.5%</option>
+   			    </select></td>
+				<td class="label">Sleep Mode:</td>
+				<td><select name='wifi_sleep'>
+   				<option value='0'>Off</option>
+   				<option value='1'>On</option>
+   				</select></td>
+			</tr>
+			<tr>
+				<td class="label">Max connections:</td>
+				<td><input title='1..3, Default: 3.' name='wifi_ap_mcns' maxlength='1' value='~wifi_ap_mcns~'></td>
+				<td class="label">Beacon (ms):</td>
+				<td><input title='100...60000' name='wifi_ap_bint' maxlength='5' value='~wifi_ap_bint~'></td>
+			</tr>
+			<tr>
+				<td class="label">AP Host Name:</td>
+				<td><input title='DHCP, NetBIOS name' name='wifi_ap_hostname' maxlength='16' value='~wifi_ap_hostname~'></td>
+				<td class="label">ST Host Name:</td>
+				<td><input title='DHCP, NetBIOS name' name='wifi_st_hostname' maxlength='16' value='~wifi_st_hostname~'></td>
+			</tr>
+		</table>
+		<p class="center">
+			<input type='submit' value='Set Config' class="button">
+			<input type='hidden' name='wifi_newcfg' value='0xffff'>
+		</p>
+		</form>
+	</div>
+~inc:footer.inc~
+<script type="text/javascript">
+var chlnum = document.forms[0].wifi_ap_chl;
+for (var i=1; i < 14; i++) {
+	chlnum.options[i] = new Option(((i<10)?'0':'')+i,i);
+}
+var cfg = {
+	wifi_ap_chl:"~wifi_ap_chl~",
+	wifi_ap_auth:"~wifi_ap_auth~",
+	wifi_phy:"~wifi_bgn~",
+	wifi_mode:"~wifi_mode~",
+	wifi_sleep:"~wifi_sleep~",
+	wifi_st_autn:"~wifi_st_auth~",
+	wifi_st_sbss:"~wifi_st_sbss~",
+	wifi_ap_hssid:"~wifi_ap_hssid~",
+	wifi_ap_dhcp:"~wifi_ap_dhcp~",
+	wifi_txpow:"~wifi_txpow~",
+	wifi_st_dhcp:"~wifi_st_dhcp~"
+}
+setFormValues(document.forms[0], cfg);
+</script>
+</body>
+</html>
--- a/WEBFiles/rtl.gif
+++ b/WEBFiles/rtl.gif
--- a/WEBFiles/rtl1.gif
+++ b/WEBFiles/rtl1.gif
--- a/WEBFiles/scripts.js
+++ b/WEBFiles/scripts.js
@ -0,0 +1,33 @@
+var setFormValues = function(form, cfg) {
+	var name, field;
+	for (name in cfg){
+		if (form[name]) {
+			field = form[name];
+			if (field[1] && field[1].type === 'checkbox') {
+				field = field[1];
+			}
+			if (field.type === 'checkbox'){
+				field.checked = cfg[name] === '1' ? true : false;
+			} else {
+				field.value = cfg[name];
+			}
+		}
+	}
+}
+var $ = function(id) {
+	return document.getElementById(id);
+}
+var reloadTimer={
+	s:10,
+	reload:function(start) {
+		if(start) {
+			this.s = start;
+		}
+		$('timer').innerHTML = this.s < 10 ? '0' + this.s : this.s;
+		if (this.s == 0){
+			document.location.href = document.referrer != '' ? document.referrer : '/';
+		}
+		this.s--;
+		setTimeout('reloadTimer.reload()', 1000);
+	}
+}
--- a/WEBFiles/site.js
+++ b/WEBFiles/site.js
@ -0,0 +1,95 @@
+/* Java for WEB device */
+var ajaxList = new Array(); // Stores a queue of AJAX events to process
+var nextimeout = 500;
+function newAJAXCommand(url, container, repeat, data) {
+	// Set up our object
+	var newAjax = new Object();
+	var theTimer = new Date();
+	newAjax.url = url;
+	newAjax.container = container;
+	newAjax.repeat = repeat;
+	newAjax.ajaxReq = null;
+	// Create and send the request
+	if (window.XMLHttpRequest) {
+		newAjax.ajaxReq = new XMLHttpRequest();
+		newAjax.ajaxReq.open((data == null) ? "GET" : "POST", newAjax.url, true);
+		newAjax.ajaxReq.send(data);
+		// If we're using IE6 style (maybe 5.5 compatible too)
+	} else if (window.ActiveXObject) {
+		newAjax.ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
+		if (newAjax.ajaxReq) {
+			newAjax.ajaxReq.open((data == null) ? "GET" : "POST", newAjax.url, true);
+			newAjax.ajaxReq.send(data);
+		}
+	}
+	newAjax.lastCalled = theTimer.getTime();
+	// Store in our array
+	ajaxList.push(newAjax);
+}
+function pollAJAX() {
+	var curAjax = new Object();
+	var theTimer = new Date();
+	var elapsed;
+	// Read off the ajaxList objects one by one
+	for (i = ajaxList.length; i > 0; i--) {
+		curAjax = ajaxList.shift();
+		if (!curAjax)
+			continue;
+		elapsed = theTimer.getTime() - curAjax.lastCalled;
+		// If we suceeded
+		if (curAjax.ajaxReq.readyState == 4 && curAjax.ajaxReq.status == 200) {
+			// If it has a container, write the result
+			if (typeof (curAjax.container) == 'function')
+				curAjax.container(curAjax.ajaxReq.responseXML.documentElement);
+			else if (typeof (curAjax.container) == 'string')
+				document.getElementById(curAjax.container).innerHTML = curAjax.ajaxReq.responseText;
+			// (otherwise do nothing for null values)
+			curAjax.ajaxReq.abort();
+			curAjax.ajaxReq = null;
+			// If it's a repeatable request, then do so
+			if (curAjax.repeat) {
+				if (elapsed >= curAjax.repeat)
+					elapsed = 100;
+				else
+					elapsed = curAjax.repeat - elapsed;
+				setTimeout("newAJAXCommand('" + curAjax.url + "',"
+						+ curAjax.container + "," + curAjax.repeat + ")",
+						elapsed);
+			}
+			continue;
+		}
+		// If we've waited over 4 second, then we timed out
+		if ((curAjax.ajaxReq.readyState == 4 && curAjax.ajaxReq.status == 404)
+				|| (elapsed > 4000)) {
+			// Invoke the user function with null input
+			if (typeof (curAjax.container) == 'function')
+				curAjax.container(null);
+			else
+				// Alert the user
+				alert("Command failed.\nConnection to device was lost.");
+			curAjax.ajaxReq.abort();
+			curAjax.ajaxReq = null;
+			// If it's a repeatable request, then do so
+			if (curAjax.repeat)
+				setTimeout("newAJAXCommand('" + curAjax.url + "',"
+						+ curAjax.container + "," + curAjax.repeat + ")", 200);
+			continue;
+		}
+		// Otherwise, just keep waiting
+		ajaxList.push(curAjax);
+	}
+	// Call ourselves again in 10ms?
+	setTimeout("pollAJAX()", nextimeout);
+}// End pollAjax
+function getXMLValue(xmlData, field) {
+	try {
+		if (xmlData.getElementsByTagName(field)[0].firstChild.nodeValue)
+			return xmlData.getElementsByTagName(field)[0].firstChild.nodeValue;
+		else
+			return null;
+	} catch (err) {
+		return null;
+	}
+}
+//kick off the AJAX Updater
+setTimeout("pollAJAX()", nextimeout);
--- a/WEBFiles/slider.js
+++ b/WEBFiles/slider.js
@ -0,0 +1,97 @@
+function slider(elemId, sliderWidth, range1, range2, step) {
+	var knobWidth = 17;
+	var knobHeight = 21;
+	var sliderHeight = 21;
+	var offsX, tmp;
+	var d = document;
+	var isIE = d.all || window.opera;
+	var point = (sliderWidth - knobWidth - 3) / (range2 - range1);
+	var slider = d.createElement('DIV');
+	slider.id = elemId + '_slider';
+	slider.className = 'slider';
+	d.getElementById(elemId).appendChild(slider);
+	var knob = d.createElement('DIV');
+	knob.id = elemId + '_knob';
+	knob.className = 'knob';
+	slider.appendChild(knob);
+	knob.style.left = 0;
+	knob.style.width = knobWidth + 'px';
+	knob.style.height = knobHeight + 'px';
+	slider.style.width = sliderWidth + 'px';
+	slider.style.height = sliderHeight + 'px';
+	var sliderOffset = slider.offsetLeft;
+	tmp = slider.offsetParent;
+	while (tmp.tagName != 'BODY') {
+		sliderOffset += tmp.offsetLeft;
+		tmp = tmp.offsetParent
+	}
+	if (isIE) {
+		knob.onmousedown = startCoord;
+		slider.onclick = sliderClick;
+		knob.onmouseup = endCoord;
+		slider.onmouseup = endCoord
+	} else {
+		knob.addEventListener("mousedown", startCoord, true);
+		slider.addEventListener("click", sliderClick, true);
+		knob.addEventListener("mouseup", endCoord, true);
+		slider.addEventListener("mouseup", endCoord, true)
+	}
+	function setValue(x) {
+		if (x < 0)
+			knob.style.left = 0;
+		else if (x > sliderWidth - knobWidth - 3)
+			knob.style.left = (sliderWidth - 3 - knobWidth) + 'px';
+		else {
+			if (step == 0)
+				knob.style.left = x + 'px';
+			else
+				knob.style.left = Math.round(x / (step * point)) * step * point
+						+ 'px'
+		}
+		NewTimeScale(getValue())
+	}
+	function setValue2(x) {
+		if (x < range1 || x > range2)
+			alert('Value is not included into a slider range!');
+		else
+			setValue((x - range1) * point);
+		NewTimeScale(getValue())
+	}
+	function getValue() {
+		return Math.round(parseInt(knob.style.left) / point) + range1
+	}
+	function sliderClick(e) {
+		var x;
+		if (isIE) {
+			if (event.srcElement != slider)
+				return;
+			x = event.offsetX - Math.round(knobWidth / 2)
+		} else
+			x = e.pageX - sliderOffset - knobWidth / 2;
+		setValue(x)
+	}
+	function startCoord(e) {
+		if (isIE) {
+			offsX = event.clientX - parseInt(knob.style.left);
+			slider.onmousemove = mov
+		} else {
+			slider.addEventListener("mousemove", mov, true)
+		}
+	}
+	function mov(e) {
+		var x;
+		if (isIE)
+			x = event.clientX - offsX;
+		else
+			x = e.pageX - sliderOffset - knobWidth / 2;
+		setValue(x)
+	}
+	function endCoord() {
+		if (isIE)
+			slider.onmousemove = null;
+		else
+			slider.removeEventListener("mousemove", mov, true)
+	}
+	this.setValue = setValue2;
+	this.getValue = getValue
+}
--- a/WEBFiles/smoothie.js
+++ b/WEBFiles/smoothie.js
@ -0,0 +1,808 @@
+// MIT License:
+//
+// Copyright (c) 2010-2013, Joe Walnes
+//               2013-2014, Drew Noakes
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+/**
+ * Smoothie Charts - http://smoothiecharts.org/
+ * (c) 2010-2013, Joe Walnes
+ *     2013-2014, Drew Noakes
+ *
+ * v1.0: Main charting library, by Joe Walnes
+ * v1.1: Auto scaling of axis, by Neil Dunn
+ * v1.2: fps (frames per second) option, by Mathias Petterson
+ * v1.3: Fix for divide by zero, by Paul Nikitochkin
+ * v1.4: Set minimum, top-scale padding, remove timeseries, add optional timer to reset bounds, by Kelley Reynolds
+ * v1.5: Set default frames per second to 50... smoother.
+ *       .start(), .stop() methods for conserving CPU, by Dmitry Vyal
+ *       options.interpolation = 'bezier' or 'line', by Dmitry Vyal
+ *       options.maxValue to fix scale, by Dmitry Vyal
+ * v1.6: minValue/maxValue will always get converted to floats, by Przemek Matylla
+ * v1.7: options.grid.fillStyle may be a transparent color, by Dmitry A. Shashkin
+ *       Smooth rescaling, by Kostas Michalopoulos
+ * v1.8: Set max length to customize number of live points in the dataset with options.maxDataSetLength, by Krishna Narni
+ * v1.9: Display timestamps along the bottom, by Nick and Stev-io
+ *       (https://groups.google.com/forum/?fromgroups#!topic/smoothie-charts/-Ywse8FCpKI%5B1-25%5D)
+ *       Refactored by Krishna Narni, to support timestamp formatting function
+ * v1.10: Switch to requestAnimationFrame, removed the now obsoleted options.fps, by Gergely Imreh
+ * v1.11: options.grid.sharpLines option added, by @drewnoakes
+ *        Addressed warning seen in Firefox when seriesOption.fillStyle undefined, by @drewnoakes
+ * v1.12: Support for horizontalLines added, by @drewnoakes
+ *        Support for yRangeFunction callback added, by @drewnoakes
+ * v1.13: Fixed typo (#32), by @alnikitich
+ * v1.14: Timer cleared when last TimeSeries removed (#23), by @davidgaleano
+ *        Fixed diagonal line on chart at start/end of data stream, by @drewnoakes
+ * v1.15: Support for npm package (#18), by @dominictarr
+ *        Fixed broken removeTimeSeries function (#24) by @davidgaleano
+ *        Minor performance and tidying, by @drewnoakes
+ * v1.16: Bug fix introduced in v1.14 relating to timer creation/clearance (#23), by @drewnoakes
+ *        TimeSeries.append now deals with out-of-order timestamps, and can merge duplicates, by @zacwitte (#12)
+ *        Documentation and some local variable renaming for clarity, by @drewnoakes
+ * v1.17: Allow control over font size (#10), by @drewnoakes
+ *        Timestamp text won't overlap, by @drewnoakes
+ * v1.18: Allow control of max/min label precision, by @drewnoakes
+ *        Added 'borderVisible' chart option, by @drewnoakes
+ *        Allow drawing series with fill but no stroke (line), by @drewnoakes
+ * v1.19: Avoid unnecessary repaints, and fixed flicker in old browsers having multiple charts in document (#40), by @asbai
+ * v1.20: Add SmoothieChart.getTimeSeriesOptions and SmoothieChart.bringToFront functions, by @drewnoakes
+ * v1.21: Add 'step' interpolation mode, by @drewnoakes
+ * v1.22: Add support for different pixel ratios. Also add optional y limit formatters, by @copacetic
+ * v1.23: Fix bug introduced in v1.22 (#44), by @drewnoakes
+ * v1.24: Fix bug introduced in v1.23, re-adding parseFloat to y-axis formatter defaults, by @siggy_sf
+ * v1.25: Fix bug seen when adding a data point to TimeSeries which is older than the current data, by @Nking92
+ *        Draw time labels on top of series, by @comolosabia
+ *        Add TimeSeries.clear function, by @drewnoakes
+ * v1.26: Add support for resizing on high device pixel ratio screens, by @copacetic
+ * v1.27: Fix bug introduced in v1.26 for non whole number devicePixelRatio values, by @zmbush
+ * v1.28: Add 'minValueScale' option, by @megawac
+ */
+
+;(function(exports) {
+
+  var Util = {
+    extend: function() {
+      arguments[0] = arguments[0] || {};
+      for (var i = 1; i < arguments.length; i++)
+      {
+        for (var key in arguments[i])
+        {
+          if (arguments[i].hasOwnProperty(key))
+          {
+            if (typeof(arguments[i][key]) === 'object') {
+              if (arguments[i][key] instanceof Array) {
+                arguments[0][key] = arguments[i][key];
+              } else {
+                arguments[0][key] = Util.extend(arguments[0][key], arguments[i][key]);
+              }
+            } else {
+              arguments[0][key] = arguments[i][key];
+            }
+          }
+        }
+      }
+      return arguments[0];
+    }
+  };
+
+  /**
+   * Initialises a new <code>TimeSeries</code> with optional data options.
+   *
+   * Options are of the form (defaults shown):
+   *
+   * <pre>
+   * {
+   *   resetBounds: true,        // enables/disables automatic scaling of the y-axis
+   *   resetBoundsInterval: 3000 // the period between scaling calculations, in millis
+   * }
+   * </pre>
+   *
+   * Presentation options for TimeSeries are specified as an argument to <code>SmoothieChart.addTimeSeries</code>.
+   *
+   * @constructor
+   */
+  function TimeSeries(options) {
+    this.options = Util.extend({}, TimeSeries.defaultOptions, options);
+    this.clear();
+  }
+
+  TimeSeries.defaultOptions = {
+    resetBoundsInterval: 3000,
+    resetBounds: false // true
+  };
+
+  /**
+   * Clears all data and state from this TimeSeries object.
+   */
+  TimeSeries.prototype.clear = function() {
+    this.data = [];
+    this.maxValue = Number.NaN; // The maximum value ever seen in this TimeSeries.
+    this.minValue = Number.NaN; // The minimum value ever seen in this TimeSeries.
+  };
+
+  /**
+   * Recalculate the min/max values for this <code>TimeSeries</code> object.
+   *
+   * This causes the graph to scale itself in the y-axis.
+   */
+  TimeSeries.prototype.resetBounds = function() {
+    if (this.data.length) {
+      // Walk through all data points, finding the min/max value
+      this.maxValue = this.data[0][1];
+      this.minValue = this.data[0][1];
+      for (var i = 1; i < this.data.length; i++) {
+        var value = this.data[i][1];
+        if (value > this.maxValue) {
+          this.maxValue = value;
+        }
+        if (value < this.minValue) {
+          this.minValue = value;
+        }
+      }
+    } else {
+      // No data exists, so set min/max to NaN
+      this.maxValue = Number.NaN;
+      this.minValue = Number.NaN;
+    }
+  };
+
+  /**
+   * Adds a new data point to the <code>TimeSeries</code>, preserving chronological order.
+   *
+   * @param timestamp the position, in time, of this data point
+   * @param value the value of this data point
+   * @param sumRepeatedTimeStampValues if <code>timestamp</code> has an exact match in the series, this flag controls
+   * whether it is replaced, or the values summed (defaults to false.)
+   */
+  TimeSeries.prototype.append = function(timestamp, value, sumRepeatedTimeStampValues) {
+    // Rewind until we hit an older timestamp
+    var i = this.data.length - 1;
+    while (i >= 0 && this.data[i][0] > timestamp) {
+      i--;
+    }
+
+    if (i === -1) {
+      // This new item is the oldest data
+      this.data.splice(0, 0, [timestamp, value]);
+    } else if (this.data.length > 0 && this.data[i][0] === timestamp) {
+      // Update existing values in the array
+      if (sumRepeatedTimeStampValues) {
+        // Sum this value into the existing 'bucket'
+//        this.data[i][1] += value;
+//        value = this.data[i][1];
+        //
+        this.data[i][1] = (value + this.data[i][1])/2.0;
+        value = this.data[i];
+      } else {
+        // Replace the previous value
+        this.data[i][1] = value;
+      }
+    } else if (i < this.data.length - 1) {
+      // Splice into the correct position to keep timestamps in order
+      this.data.splice(i + 1, 0, [timestamp, value]);
+    } else {
+      // Add to the end of the array
+      this.data.push([timestamp, value]);
+    }
+
+    this.maxValue = isNaN(this.maxValue) ? value : Math.max(this.maxValue, value);
+    this.minValue = isNaN(this.minValue) ? value : Math.min(this.minValue, value);
+  };
+
+  TimeSeries.prototype.dropOldData = function(oldestValidTime, maxDataSetLength) {
+    // We must always keep one expired data point as we need this to draw the
+    // line that comes into the chart from the left, but any points prior to that can be removed.
+    var removeCount = 0;
+    while (this.data.length - removeCount >= maxDataSetLength && this.data[removeCount + 1][0] < oldestValidTime) {
+      removeCount++;
+    }
+    if (removeCount !== 0) {
+      this.data.splice(0, removeCount);
+    }
+  };
+
+  /**
+   * Initialises a new <code>SmoothieChart</code>.
+   *
+   * Options are optional, and should be of the form below. Just specify the values you
+   * need and the rest will be given sensible defaults as shown:
+   *
+   * <pre>
+   * {
+   *   minValue: undefined,                      // specify to clamp the lower y-axis to a given value
+   *   maxValue: undefined,                      // specify to clamp the upper y-axis to a given value
+   *   maxValueScale: 1,                         // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
+   *   minValueScale: 1,                         // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.
+   *   yRangeFunction: undefined,                // function({min: , max: }) { return {min: , max: }; }
+   *   scaleSmoothing: 0.125,                    // controls the rate at which y-value zoom animation occurs
+   *   millisPerPixel: 20,                       // sets the speed at which the chart pans by
+   *   enableDpiScaling: true,                   // support rendering at different DPI depending on the device
+   *   yMinFormatter: function(min, precision) { // callback function that formats the min y value label
+   *     return parseFloat(min).toFixed(precision);
+   *   },
+   *   yMaxFormatter: function(max, precision) { // callback function that formats the max y value label
+   *     return parseFloat(max).toFixed(precision);
+   *   },
+   *   maxDataSetLength: 2,
+   *   interpolation: 'bezier'                   // one of 'bezier', 'linear', or 'step'
+   *   timestampFormatter: null,                 // optional function to format time stamps for bottom of chart
+   *                                             // you may use SmoothieChart.timeFormatter, or your own: function(date) { return ''; }
+   *   scrollBackwards: false,                   // reverse the scroll direction of the chart
+   *   horizontalLines: [],                      // [ { value: 0, color: '#ffffff', lineWidth: 1 } ]
+   *   grid:
+   *   {
+   *     fillStyle: '#000000',                   // the background colour of the chart
+   *     lineWidth: 1,                           // the pixel width of grid lines
+   *     strokeStyle: '#777777',                 // colour of grid lines
+   *     millisPerLine: 1000,                    // distance between vertical grid lines
+   *     sharpLines: false,                      // controls whether grid lines are 1px sharp, or softened
+   *     verticalSections: 2,                    // number of vertical sections marked out by horizontal grid lines
+   *     borderVisible: true                     // whether the grid lines trace the border of the chart or not
+   *   },
+   *   labels
+   *   {
+   *     disabled: false,                        // enables/disables labels showing the min/max values
+   *     fillStyle: '#ffffff',                   // colour for text of labels,
+   *     fontSize: 15,
+   *     fontFamily: 'sans-serif',
+   *     precision: 2
+   *   }
+   * }
+   * </pre>
+   *
+   * @constructor
+   */
+  function SmoothieChart(options) {
+    this.options = Util.extend({}, SmoothieChart.defaultChartOptions, options);
+    this.seriesSet = [];
+    this.currentValueRange = 1;
+    this.currentVisMinValue = 0;
+    this.lastRenderTimeMillis = 0;
+  }
+
+  SmoothieChart.defaultChartOptions = {
+    millisPerPixel: 20,
+    enableDpiScaling: true,
+    yMinFormatter: function(min, precision) {
+      return parseFloat(min).toFixed(precision);
+    },
+    yMaxFormatter: function(max, precision) {
+      return parseFloat(max).toFixed(precision);
+    },
+    maxValueScale: 1,
+    minValueScale: 1,
+    interpolation: 'bezier',
+    scaleSmoothing: 0.125,
+    maxDataSetLength: 2,
+    scrollBackwards: false,
+    grid: {
+      fillStyle: '#000000',
+      strokeStyle: '#777777',
+      lineWidth: 1,
+      sharpLines: false,
+      millisPerLine: 1000,
+      verticalSections: 2,
+      borderVisible: true
+    },
+    labels: {
+      fillStyle: '#ffffff',
+      disabled: false,
+      fontSize: 10,
+      fontFamily: 'monospace',
+      precision: 2
+    },
+    horizontalLines: []
+  };
+
+  // Based on http://inspirit.github.com/jsfeat/js/compatibility.js
+  SmoothieChart.AnimateCompatibility = (function() {
+    var requestAnimationFrame = function(callback, element) {
+          var requestAnimationFrame =
+            window.requestAnimationFrame        ||
+            window.webkitRequestAnimationFrame  ||
+            window.mozRequestAnimationFrame     ||
+            window.oRequestAnimationFrame       ||
+            window.msRequestAnimationFrame      ||
+            function(callback) {
+              return window.setTimeout(function() {
+                callback(new Date().getTime());
+              }, 16);
+            };
+          return requestAnimationFrame.call(window, callback, element);
+        },
+        cancelAnimationFrame = function(id) {
+          var cancelAnimationFrame =
+            window.cancelAnimationFrame ||
+            function(id) {
+              clearTimeout(id);
+            };
+          return cancelAnimationFrame.call(window, id);
+        };
+
+    return {
+      requestAnimationFrame: requestAnimationFrame,
+      cancelAnimationFrame: cancelAnimationFrame
+    };
+  })();
+
+  SmoothieChart.defaultSeriesPresentationOptions = {
+    lineWidth: 1,
+    strokeStyle: '#ffffff'
+  };
+
+  /**
+   * Adds a <code>TimeSeries</code> to this chart, with optional presentation options.
+   *
+   * Presentation options should be of the form (defaults shown):
+   *
+   * <pre>
+   * {
+   *   lineWidth: 1,
+   *   strokeStyle: '#ffffff',
+   *   fillStyle: undefined
+   * }
+   * </pre>
+   */
+  SmoothieChart.prototype.addTimeSeries = function(timeSeries, options) {
+    this.seriesSet.push({timeSeries: timeSeries, options: Util.extend({}, SmoothieChart.defaultSeriesPresentationOptions, options)});
+    if (timeSeries.options.resetBounds && timeSeries.options.resetBoundsInterval > 0) {
+      timeSeries.resetBoundsTimerId = setInterval(
+        function() {
+          timeSeries.resetBounds();
+        },
+        timeSeries.options.resetBoundsInterval
+      );
+    }
+  };
+
+  /**
+   * Removes the specified <code>TimeSeries</code> from the chart.
+   */
+  SmoothieChart.prototype.removeTimeSeries = function(timeSeries) {
+    // Find the correct timeseries to remove, and remove it
+    var numSeries = this.seriesSet.length;
+    for (var i = 0; i < numSeries; i++) {
+      if (this.seriesSet[i].timeSeries === timeSeries) {
+        this.seriesSet.splice(i, 1);
+        break;
+      }
+    }
+    // If a timer was operating for that timeseries, remove it
+    if (timeSeries.resetBoundsTimerId) {
+      // Stop resetting the bounds, if we were
+      clearInterval(timeSeries.resetBoundsTimerId);
+    }
+  };
+
+  /**
+   * Gets render options for the specified <code>TimeSeries</code>.
+   *
+   * As you may use a single <code>TimeSeries</code> in multiple charts with different formatting in each usage,
+   * these settings are stored in the chart.
+   */
+  SmoothieChart.prototype.getTimeSeriesOptions = function(timeSeries) {
+    // Find the correct timeseries to remove, and remove it
+    var numSeries = this.seriesSet.length;
+    for (var i = 0; i < numSeries; i++) {
+      if (this.seriesSet[i].timeSeries === timeSeries) {
+        return this.seriesSet[i].options;
+      }
+    }
+  };
+
+  /**
+   * Brings the specified <code>TimeSeries</code> to the top of the chart. It will be rendered last.
+   */
+  SmoothieChart.prototype.bringToFront = function(timeSeries) {
+    // Find the correct timeseries to remove, and remove it
+    var numSeries = this.seriesSet.length;
+    for (var i = 0; i < numSeries; i++) {
+      if (this.seriesSet[i].timeSeries === timeSeries) {
+        var set = this.seriesSet.splice(i, 1);
+        this.seriesSet.push(set[0]);
+        break;
+      }
+    }
+  };
+
+  /**
+   * Instructs the <code>SmoothieChart</code> to start rendering to the provided canvas, with specified delay.
+   *
+   * @param canvas the target canvas element
+   * @param delayMillis an amount of time to wait before a data point is shown. This can prevent the end of the series
+   * from appearing on screen, with new values flashing into view, at the expense of some latency.
+   */
+  SmoothieChart.prototype.streamTo = function(canvas, delayMillis) {
+    this.canvas = canvas;
+    this.delay = delayMillis;
+    this.start();
+  };
+
+  /**
+   * Make sure the canvas has the optimal resolution for the device's pixel ratio.
+   */
+  SmoothieChart.prototype.resize = function() {
+    // TODO this function doesn't handle the value of enableDpiScaling changing during execution
+    if (!this.options.enableDpiScaling || !window || window.devicePixelRatio === 1)
+      return;
+
+    var dpr = window.devicePixelRatio;
+    var width = parseInt(this.canvas.getAttribute('width'));
+    var height = parseInt(this.canvas.getAttribute('height'));
+
+    if (!this.originalWidth || (Math.floor(this.originalWidth * dpr) !== width)) {
+      this.originalWidth = width;
+      this.canvas.setAttribute('width', (Math.floor(width * dpr)).toString());
+      this.canvas.style.width = width + 'px';
+      this.canvas.getContext('2d').scale(dpr, dpr);
+    }
+
+    if (!this.originalHeight || (Math.floor(this.originalHeight * dpr) !== height)) {
+      this.originalHeight = height;
+      this.canvas.setAttribute('height', (Math.floor(height * dpr)).toString());
+      this.canvas.style.height = height + 'px';
+      this.canvas.getContext('2d').scale(dpr, dpr);
+    }
+  };
+
+  /**
+   * Starts the animation of this chart.
+   */
+  SmoothieChart.prototype.start = function() {
+    if (this.frame) {
+      // We're already running, so just return
+      return;
+    }
+
+    // Renders a frame, and queues the next frame for later rendering
+    var animate = function() {
+      this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
+        this.render();
+        animate();
+      }.bind(this));
+    }.bind(this);
+
+    animate();
+  };
+
+  /**
+   * Stops the animation of this chart.
+   */
+  SmoothieChart.prototype.stop = function() {
+    if (this.frame) {
+      SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
+      delete this.frame;
+    }
+  };
+
+  SmoothieChart.prototype.updateValueRange = function() {
+    // Calculate the current scale of the chart, from all time series.
+    var chartOptions = this.options,
+        chartMaxValue = Number.NaN,
+        chartMinValue = Number.NaN;
+
+    for (var d = 0; d < this.seriesSet.length; d++) {
+      // TODO(ndunn): We could calculate / track these values as they stream in.
+      var timeSeries = this.seriesSet[d].timeSeries;
+      if (!isNaN(timeSeries.maxValue)) {
+        chartMaxValue = !isNaN(chartMaxValue) ? Math.max(chartMaxValue, timeSeries.maxValue) : timeSeries.maxValue;
+      }
+
+      if (!isNaN(timeSeries.minValue)) {
+        chartMinValue = !isNaN(chartMinValue) ? Math.min(chartMinValue, timeSeries.minValue) : timeSeries.minValue;
+      }
+    }
+
+    // Scale the chartMaxValue to add padding at the top if required
+    if (chartOptions.maxValue != null) {
+      chartMaxValue = chartOptions.maxValue;
+    } else {
+      chartMaxValue *= chartOptions.maxValueScale;
+    }
+
+    // Set the minimum if we've specified one
+    if (chartOptions.minValue != null) {
+      chartMinValue = chartOptions.minValue;
+    } else {
+      chartMinValue -= Math.abs(chartMinValue * chartOptions.minValueScale - chartMinValue);
+    }
+    
+    // If a custom range function is set, call it
+    if (this.options.yRangeFunction) {
+      var range = this.options.yRangeFunction({min: chartMinValue, max: chartMaxValue});
+      chartMinValue = range.min;
+      chartMaxValue = range.max;
+    }
+  
+    if (!isNaN(chartMaxValue) && !isNaN(chartMinValue)) {
+      var targetValueRange = chartMaxValue - chartMinValue;
+      var valueRangeDiff = (targetValueRange - this.currentValueRange);
+      var minValueDiff = (chartMinValue - this.currentVisMinValue);
+      this.isAnimatingScale = Math.abs(valueRangeDiff) > 0.01 || Math.abs(minValueDiff) > 0.01;
+      this.currentValueRange += chartOptions.scaleSmoothing * valueRangeDiff;
+      this.currentVisMinValue += chartOptions.scaleSmoothing * minValueDiff;
+    } 
+
+    this.valueRange = { min: chartMinValue, max: chartMaxValue };
+  };
+
+  SmoothieChart.prototype.render = function(canvas, time) {
+    var nowMillis = new Date().getTime();
+    
+    if (!this.isAnimatingScale) {
+      // We're not animating. We can use the last render time and the scroll speed to work out whether
+      // we actually need to paint anything yet. If not, we can return immediately.
+
+      // Render at least every 1/6th of a second. The canvas may be resized, which there is
+      // no reliable way to detect.
+      var maxIdleMillis = Math.min(1000/6, this.options.millisPerPixel);
+
+      if (nowMillis - this.lastRenderTimeMillis < maxIdleMillis) {
+        return;
+      }
+    }
+
+    this.resize();
+
+    this.lastRenderTimeMillis = nowMillis;
+
+    canvas = canvas || this.canvas;
+    time = time || nowMillis - (this.delay || 0);
+
+    // Round time down to pixel granularity, so motion appears smoother.
+    time -= time % this.options.millisPerPixel;
+
+    var context = canvas.getContext('2d'),
+        chartOptions = this.options,
+        dimensions = { top: 0, left: 0, width: canvas.clientWidth, height: canvas.clientHeight },
+        // Calculate the threshold time for the oldest data points.
+        oldestValidTime = time - (dimensions.width * chartOptions.millisPerPixel),
+        valueToYPixel = function(value) {
+          var offset = value - this.currentVisMinValue;
+          return this.currentValueRange === 0
+            ? dimensions.height
+            : dimensions.height - (Math.round((offset / this.currentValueRange) * dimensions.height));
+        }.bind(this),
+        timeToXPixel = function(t) {
+          if(chartOptions.scrollBackwards) {
+            return Math.round((time - t) / chartOptions.millisPerPixel);
+          }
+          return Math.round(dimensions.width - ((time - t) / chartOptions.millisPerPixel));
+        };
+
+    this.updateValueRange();
+
+    context.font = chartOptions.labels.fontSize + 'px ' + chartOptions.labels.fontFamily;
+
+    // Save the state of the canvas context, any transformations applied in this method
+    // will get removed from the stack at the end of this method when .restore() is called.
+    context.save();
+
+    // Move the origin.
+    context.translate(dimensions.left, dimensions.top);
+
+    // Create a clipped rectangle - anything we draw will be constrained to this rectangle.
+    // This prevents the occasional pixels from curves near the edges overrunning and creating
+    // screen cheese (that phrase should need no explanation).
+    context.beginPath();
+    context.rect(0, 0, dimensions.width, dimensions.height);
+    context.clip();
+
+    // Clear the working area.
+    context.save();
+    context.fillStyle = chartOptions.grid.fillStyle;
+    context.clearRect(0, 0, dimensions.width, dimensions.height);
+    context.fillRect(0, 0, dimensions.width, dimensions.height);
+    context.restore();
+
+    // Grid lines...
+    context.save();
+    context.lineWidth = chartOptions.grid.lineWidth;
+    context.strokeStyle = chartOptions.grid.strokeStyle;
+    // Vertical (time) dividers.
+    if (chartOptions.grid.millisPerLine > 0) {
+      context.beginPath();
+      for (var t = time - (time % chartOptions.grid.millisPerLine);
+           t >= oldestValidTime;
+           t -= chartOptions.grid.millisPerLine) {
+        var gx = timeToXPixel(t);
+        if (chartOptions.grid.sharpLines) {
+          gx -= 0.5;
+        }
+        context.moveTo(gx, 0);
+        context.lineTo(gx, dimensions.height);
+      }
+      context.stroke();
+      context.closePath();
+    }
+
+    // Horizontal (value) dividers.
+    for (var v = 1; v < chartOptions.grid.verticalSections; v++) {
+      var gy = Math.round(v * dimensions.height / chartOptions.grid.verticalSections);
+      if (chartOptions.grid.sharpLines) {
+        gy -= 0.5;
+      }
+      context.beginPath();
+      context.moveTo(0, gy);
+      context.lineTo(dimensions.width, gy);
+      context.stroke();
+      context.closePath();
+    }
+    // Bounding rectangle.
+    if (chartOptions.grid.borderVisible) {
+      context.beginPath();
+      context.strokeRect(0, 0, dimensions.width, dimensions.height);
+      context.closePath();
+    }
+    context.restore();
+
+    // Draw any horizontal lines...
+    if (chartOptions.horizontalLines && chartOptions.horizontalLines.length) {
+      for (var hl = 0; hl < chartOptions.horizontalLines.length; hl++) {
+        var line = chartOptions.horizontalLines[hl],
+            hly = Math.round(valueToYPixel(line.value)) - 0.5;
+        context.strokeStyle = line.color || '#ffffff';
+        context.lineWidth = line.lineWidth || 1;
+        context.beginPath();
+        context.moveTo(0, hly);
+        context.lineTo(dimensions.width, hly);
+        context.stroke();
+        context.closePath();
+      }
+    }
+
+    // For each data set...
+    for (var d = 0; d < this.seriesSet.length; d++) {
+      context.save();
+      var timeSeries = this.seriesSet[d].timeSeries,
+          dataSet = timeSeries.data,
+          seriesOptions = this.seriesSet[d].options;
+
+      // Delete old data that's moved off the left of the chart.
+      timeSeries.dropOldData(oldestValidTime, chartOptions.maxDataSetLength);
+
+      // Set style for this dataSet.
+      context.lineWidth = seriesOptions.lineWidth;
+      context.strokeStyle = seriesOptions.strokeStyle;
+      // Draw the line...
+      context.beginPath();
+      // Retain lastX, lastY for calculating the control points of bezier curves.
+      var firstX = 0, lastX = 0, lastY = 0;
+      for (var i = 0; i < dataSet.length && dataSet.length !== 1; i++) {
+        var x = timeToXPixel(dataSet[i][0]),
+            y = valueToYPixel(dataSet[i][1]);
+
+        if (i === 0) {
+          firstX = x;
+          context.moveTo(x, y);
+        } else {
+          switch (chartOptions.interpolation) {
+            case "linear":
+            case "line": {
+              context.lineTo(x,y);
+              break;
+            }
+            case "bezier":
+            default: {
+              // Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves
+              //
+              // Assuming A was the last point in the line plotted and B is the new point,
+              // we draw a curve with control points P and Q as below.
+              //
+              // A---P
+              //     |
+              //     |
+              //     |
+              //     Q---B
+              //
+              // Importantly, A and P are at the same y coordinate, as are B and Q. This is
+              // so adjacent curves appear to flow as one.
+              //
+              context.bezierCurveTo( // startPoint (A) is implicit from last iteration of loop
+                Math.round((lastX + x) / 2), lastY, // controlPoint1 (P)
+                Math.round((lastX + x)) / 2, y, // controlPoint2 (Q)
+                x, y); // endPoint (B)
+              break;
+            }
+            case "step": {
+              context.lineTo(x,lastY);
+              context.lineTo(x,y);
+              break;
+            }
+          }
+        }
+
+        lastX = x; lastY = y;
+      }
+
+      if (dataSet.length > 1) {
+        if (seriesOptions.fillStyle) {
+          // Close up the fill region.
+          context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, lastY);
+          context.lineTo(dimensions.width + seriesOptions.lineWidth + 1, dimensions.height + seriesOptions.lineWidth + 1);
+          context.lineTo(firstX, dimensions.height + seriesOptions.lineWidth);
+          context.fillStyle = seriesOptions.fillStyle;
+          context.fill();
+        }
+
+        if (seriesOptions.strokeStyle && seriesOptions.strokeStyle !== 'none') {
+          context.stroke();
+        }
+        context.closePath();
+      }
+      context.restore();
+    }
+
+    // Draw the axis values on the chart.
+    if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)) {
+      var maxValueString = chartOptions.yMaxFormatter(this.valueRange.max, chartOptions.labels.precision),
+          minValueString = chartOptions.yMinFormatter(this.valueRange.min, chartOptions.labels.precision),
+          labelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2;
+      context.fillStyle = chartOptions.labels.fillStyle;
+      context.fillText(maxValueString, labelPos, chartOptions.labels.fontSize);
+      context.fillText(minValueString, labelPos, dimensions.height - 2);
+    }
+
+    // Display timestamps along x-axis at the bottom of the chart.
+    if (chartOptions.timestampFormatter && chartOptions.grid.millisPerLine > 0) {
+      var textUntilX = chartOptions.scrollBackwards
+        ? context.measureText(minValueString).width
+        : dimensions.width - context.measureText(minValueString).width + 4;
+      for (var t = time - (time % chartOptions.grid.millisPerLine);
+           t >= oldestValidTime;
+           t -= chartOptions.grid.millisPerLine) {
+        var gx = timeToXPixel(t);
+        // Only draw the timestamp if it won't overlap with the previously drawn one.
+        if ((!chartOptions.scrollBackwards && gx < textUntilX) || (chartOptions.scrollBackwards && gx > textUntilX))  {
+          // Formats the timestamp based on user specified formatting function
+          // SmoothieChart.timeFormatter function above is one such formatting option
+          var tx = new Date(t),
+            ts = chartOptions.timestampFormatter(tx),
+            tsWidth = context.measureText(ts).width;
+
+          textUntilX = chartOptions.scrollBackwards
+            ? gx + tsWidth + 2
+            : gx - tsWidth - 2;
+
+          context.fillStyle = chartOptions.labels.fillStyle;
+          if(chartOptions.scrollBackwards) {
+            context.fillText(ts, gx, dimensions.height - 2);
+          } else {
+            context.fillText(ts, gx - tsWidth, dimensions.height - 2);
+          }
+        }
+      }
+    }
+
+    context.restore(); // See .save() above.
+  };
+/*  
+  // Sample timestamp formatting function
+  SmoothieChart.timeFormatter = function(date) {
+    function pad2(number) { return (number < 10 ? '0' : '') + number }
+    return pad2(date.getHours()) + ':' + pad2(date.getMinutes()) + ':' + pad2(date.getSeconds());
+  };
+*/  
+  exports.TimeSeries = TimeSeries;
+  exports.SmoothieChart = SmoothieChart;
+
+})(typeof exports === 'undefined' ? this : exports);
+
+
--- a/WEBFiles/style.css
+++ b/WEBFiles/style.css
@ -0,0 +1,235 @@
+body{
+margin:4px auto;
+width:640px;
+color:black;
+background:#fff;
+font-size:14px;
+font-family:"Lucida Grande", Tahoma, sans-serif;
+}
+img,table{
+border:0;
+}
+.top{
+color:#888;
+background:url(logo.gif) no-repeat 0 0;
+padding:3px 0 0 45px;
+margin:0 0 10px 0;
+}
+.top img{
+vertical-align:middle;
+}
+h2.error{
+color:red;
+}
+h2.ok{
+color:green;
+}
+h2.title{
+text-align:center;
+}
+.menu{
+border-top:#fab548 5px solid;
+background:#f1f1ed url(rtl.gif) no-repeat 10px 10px;
+padding:5px 5px 5px 120px;
+margin:0 0 10px 0;
+min-height:120px;
+border-radius:5px;
+}
+.menu div{
+width:220px;
+float:left;
+margin-right:10px;
+}
+.menu a,
+.menu a:link{
+display:block;
+font-weight:bold;
+text-decoration:none;
+color:#1486ba;
+padding:0 5px 1px 10px;
+font-size:13px;
+border-radius:5px;
+margin:0 0 1px 0;
+border-bottom:#d6d9da 1px solid;
+}
+.menu a:visited{
+color:#777;
+}
+.menu a.active{
+color:#777;
+background:#d6d9da;
+}
+.menu a:hover{
+color:#842;
+background:#d6d9da;
+}
+table.form select{
+width:143px;
+}
+table.form{
+width:100%;
+}
+table.form td{
+font-size:13px;
+padding:0;
+}
+table.form .label{
+width:45%;
+font-weight:bold;
+text-align:right;
+padding-right:10px;
+}
+table.form .left{
+width:45%;
+font-weight:bold;
+text-align:left;
+padding-left:10px;
+}
+table.scan{
+border-collapse:separate;
+border-spacing: 0;
+border:#aaa 2px solid;
+text-align:center;
+font-size:14px;
+width:100%;
+margin:0 0 10px 0;
+background:#fff;
+border-radius:5px;
+}
+table.scan th{
+color:#247;
+border:#aaa 1px solid;
+font-size:15px;
+padding:2px 2px;
+background:#fec;
+}
+table.scan td{
+border:#aaa 1px solid;
+padding:2px 2px;
+}
+table.scan td.s:hover{
+background:#eef;
+}
+table.scan a:link{
+display:block;
+font-weight:bold;
+text-decoration:none;
+color:#444;
+border-radius:5px;
+}
+table.scan a:visited{
+color:#444;
+}
+table.scan a.active,
+table.scan a:hover{
+color:#21e;
+background:#d6d9da;
+}
+table.mdbtab{
+border-collapse:separate;
+border-spacing: 0;
+border:#aaa 2px solid;
+text-align:center;
+font-size:12px;
+width:100%;
+margin:0 0 10px 0;
+background:#fff;
+border-radius:5px;
+}
+table.mdbtab th{
+color:#247;
+border:#aaa 1px solid;
+font-size:12px;
+padding:2px 2px;
+background:#fec;
+}
+table.mdbtab td{
+border:#aaa 1px solid;
+padding:2px 2px;
+}
+table.mdbtab td.s:hover{
+background:#eef;
+}
+table.mdbtab a:link{
+display:block;
+font-weight:bold;
+text-decoration:none;
+color:#444;
+border-radius:5px;
+}
+table.mdbtab a:visited{
+color:#444;
+}
+table.mdbtab a.active,
+table.mdbtab a:hover{
+color:#21e;
+background:#d6d9da;
+}
+.content{
+background:#f1f1ed;
+border-radius:5px;
+border-top:#1486ba 5px solid;
+padding:10px;
+margin:0 0 10px 0;
+}
+.footer{
+border-top:#75be45 5px solid;;
+background:#d6d9da;
+border-radius:5px;
+padding:10px;
+font-size:12px;
+margin:0 0 5px 0;
+}
+.copyright{
+font-size:11px;
+padding:0 0 0 10px;
+text-align:right;
+}
+.button:visited,
+.button{
+cursor:pointer;
+display:inline-block;
+font-weight:bold;
+text-align:center;
+text-decoration:none;
+white-space:nowrap;
+border-radius:5px;
+background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.05) 49%, rgba(0,0,0,.05) 51%, rgba(0,0,0,.1));
+background-color:#f0f0eb;
+color:#312c2a;
+border:1px solid #aaa;
+border-color: rgba(0,0,0,0.3);
+border-bottom-color: #777;
+border-bottom-color: rgba(0,0,0,0.5);
+box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.7), inset 0 0 0.08em rgba(255,255,255,0.5);
+text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+padding:3px 15px;
+}
+.button:focus,
+.button:hover{
+background-color:#ffffff;
+background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.05) 51%, rgba(0,0,0,0.15));
+}
+#timer{
+color:red;
+}
+.center{
+text-align:center;
+}
+hr{
+border:0;
+height:1px;
+background:#333;
+background-image:-webkit-linear-gradient(left, #ccc, #333, #ccc);
+background-image:-moz-linear-gradient(left, #ccc, #333, #ccc);
+background-image:-ms-linear-gradient(left, #ccc, #333, #ccc);
+background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+}
+select,
+input,
+iframe{
+border-collapse:separate;
+border-spacing: 0;
+background:#fff;
+border-radius:5px;
+}
--- a/WEBFiles/time.inc
+++ b/WEBFiles/time.inc
@ -0,0 +1,9 @@
+<script type="text/javascript">
+var x = ~sntp_time~*1000;
+if(x){
+var d = new Date(x);
+document.getElementById('sntptime').innerHTML= d.toLocaleDateString()+" "+d.toLocaleTimeString();
+}
+var d = new Date(new Date()-(~sys_mactime~/1000));
+document.getElementById('starttime').innerHTML= d.toLocaleDateString()+" "+d.toLocaleTimeString();
+</script>
--- a/WEBFiles/timeout.htm
+++ b/WEBFiles/timeout.htm
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X WIFI</title>
+	<link rel="stylesheet" href="style.css">
+	<script src="scripts.js"></script>
+</head><body onload="reloadTimer.reload(10)">
+	<h3 class="top">RTL871X Built-in Web server <sup>&copy;</sup></h3>
+	<div class="content">
+		<h3>Timeout <span id='timer'>?</span> sec...</h3>
+		* Redirect: <a href='http://~sys_url~/'>http://~sys_url~/</a> *<br><br>
+		<a href='index.htm'>Main</a>
+	</div>
+~inc:footer.inc~
+</body>
+</html>
--- a/WEBFiles/timer.inc
+++ b/WEBFiles/timer.inc
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html><head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>RTL871X WIFI</title>
+	<link rel="stylesheet" href="style.css">
+	<script src="/scripts.js"></script>
+</head><body onload="reloadTimer.reload(10)">
+	<h3 class="top">RTL871X Built-in Web server <sup>&copy;</sup></h3>
+	<div class="content">
+		<h3>Timeout <span id='timer'>?</span> sec...</h3>
+		Redirect: <a href='/index.htm'>Main</a>
+
--- a/WEBFiles/tst.htm
+++ b/WEBFiles/tst.htm
@ -0,0 +1,9 @@
+~inc:grfx1.inc~
+<td width="50%">Test: <span id="xdata" style="font-weight:bold">?</span></td>
+<script type="text/javascript">
+ var xmlfile = 'tst.xml';
+ var xmin = -380;
+ var xmax = -360;
+ var millisPerPixel = 200;
+ var millisPerLine = 5000;
+</script>~inc:grfx2.inc~
--- a/WEBFiles/tst.xml
+++ b/WEBFiles/tst.xml
@ -0,0 +1 @@
+<response><name>Test</name><value>~wifi_st_rssi~</value><measure>?</measure></response>
--- a/WEBFiles/websock.htm
+++ b/WEBFiles/websock.htm
@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="charset=windows-1251" />
+<link href="ws2.css" rel="stylesheet" type="text/css" />
+<title>WebSocket Test</title></head>
+<body><h2>WebSocket Test</h2>
+<form name="publish">
+	<input type="button" id="OpCl" value="Open">
+	<input type="text" name="message" value="hellomsg">
+	<input type="submit" id="SndM" value="Send" disabled="1"><br>
+</form>
+<div id="console-div">
+	Log messages
+	<div id="consoleLog"></div>
+	<button id="clear">Clear Log</button>
+</div></body>
+<script language="javascript" type="text/javascript">
+var $ = function(id){return document.getElementById(id);}
+var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
+var ws, wstt, wsopen = 0;
+$("OpCl").onclick =  function() {
+	if(wsopen) {
+		ws.close();
+		$("OpCl").value = "Open";
+	}
+	else {
+		ws = new WebSocket(wsUri);
+		log("CONNECT: " + ws.url);
+		ws.onopen = function(evt) {
+			$("OpCl").value = "Close";
+			$("SndM").disabled = false;
+            log("CONNECTED");
+			wstt = setTimeout(wsping, 2500);
+		};
+		ws.onclose = function(evt) {
+			log("CLOSED: ("+evt.code+") "+evt.reason);
+			clearTimeout(wstt);
+			wsopen = 0;
+			$("SndM").disabled = true;
+		};
+		ws.onerror = function(event) {
+			logError("ERROR (" + event.data +", "+ event.code +", "+ event.reason + ")");
+			wsopen = 0;
+			$("SndM").disabled = true;
+		};
+		// îáðàáîò÷èê âõîäÿùèõ ñîîáùåíèé
+		ws.onmessage = function(evt) {
+			var data = evt.data;
+			if (typeof(data) == "string") {
+				//text
+				if(data != "ws:pong") logResponse("RECEIVED TEXT: " + data);
+			}
+			else if (data.byteLength) {
+				//arraybuffer
+				var u = new Uint8Array(data);
+				var bytes = [];
+				for (var i=0; i<u.byteLength; i++) {
+					bytes.push(u[i]);
+				}
+				logResponse("RECEIVED ARRAY BUFFER: " + bytes);
+			}
+			else if (data.size) {
+				//blob
+				var cb = function(result) {
+					logResponse("RECEIVED BLOB: " + result);
+				};
+			}
+			else {
+				logResponse("RECEIVED UNKNOWN TYPE: " + data);
+			}
+			clearTimeout(wstt);
+			wstt = setTimeout(wsping, 2500);
+		}
+		wsopen = 1;
+	}
+}
+function wsping() {ws.send("ws:ping"); wstt = setTimeout(wsping, 2500);}
+var consoleLog = $("consoleLog");
+$("clear").onclick = function() {
+	while (consoleLog.childNodes.length > 0) {
+	consoleLog.removeChild(consoleLog.lastChild);
+	}
+}
+var log = function(message) {
+	var pre = document.createElement("pre");
+	pre.style.wordWrap = "break-word";
+	pre.innerHTML = message;
+	consoleLog.appendChild(pre);
+	consoleLog.scrollTop = consoleLog.scrollHeight;
+	while (consoleLog.childNodes.length > 25) {
+		consoleLog.removeChild(consoleLog.firstChild);
+	}
+}
+var logResponse = function(msg) {
+	log("<span style='color:blue'>"+msg+"</span>");
+}
+var logSend = function(msg) {
+	log("<span style='color:green'>"+msg+"</span>");
+}
+var logError = function(msg) {
+	log("<span style='color:red'>"+msg+"</span>");
+}
+document.forms.publish.onsubmit = function() {
+	clearTimeout(wstt);
+	try {
+		var text = this.message.value;
+		logSend("SEND TEXT: "+text);
+		ws.send(text);
+	} catch (e) {
+		logError("EXCEPTION: "+e);
+	}
+	wstt = setTimeout(wsping, 2500);
+	return false;
+}
+</script>
+</html>
--- a/WEBFiles/ws2.css
+++ b/WEBFiles/ws2.css
@ -0,0 +1,12 @@
+#consoleLog {
+  overflow-y: scroll;
+  width: 480px;
+  height: 800px;
+  border: solid 1px #aaaaaa;
+  background-color: #ffffff;
+  padding-left: 5px; }
+#consoleLog > pre {
+    margin-top: 0;
+    margin-bottom: 0; }
+#consoleLog > pre:nth-child(even) {
+    background-color: #fafafa; }
				`@ -0,0 +1 @@`
				`var $ = function(id){return document.getElementById(id);}`
				`@ -0,0 +1 @@`
				`<response><name>Heap Size</name><value>~sys_heap~</value></response>`
				`@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="windows-1251"?><response>~wifi_scan~</response>`
				`@ -0,0 +1 @@`
				`<response><name>Test</name><value>~wifi_st_rssi~</value><measure>?</measure></response>`