diff --git a/src/contexts/web/web.go b/src/contexts/web/web.go
index 975315ad..d7da92ad 100644
--- a/src/contexts/web/web.go
+++ b/src/contexts/web/web.go
@@ -248,18 +248,18 @@ func (web *WEB) Start(m *ctx.Message, arg ...string) bool { // {{{
 	web.Configs["logheaders"] = &ctx.Config{Name: "日志输出报文头(yes/no)", Value: "no", Help: "日志输出报文头"}
 	m.Capi("nserve", 1)
 
-	yac := m.Sess("tags", m.Sess("yac").Cmd("scan"))
-	yac.Cmd("train", "void", "void", "[\t ]+")
-	yac.Cmd("train", "other", "other", "[^\n]+")
-	yac.Cmd("train", "key", "key", "[A-Za-z_][A-Za-z_0-9]*")
-	yac.Cmd("train", "code", "struct", "struct", "key", "\\{")
-	yac.Cmd("train", "code", "struct", "\\}", "key", ";")
-	yac.Cmd("train", "code", "struct", "typedef", "struct", "key", "key", ";")
-	yac.Cmd("train", "code", "function", "key", "\\*", "key", "(", "other")
-	yac.Cmd("train", "code", "function", "key", "key", "(", "other")
-	yac.Cmd("train", "code", "variable", "struct", "key", "key", "other")
-	yac.Cmd("train", "code", "define", "#define", "key", "other")
-
+	// yac := m.Sess("tags", m.Sess("yac").Cmd("scan"))
+	// yac.Cmd("train", "void", "void", "[\t ]+")
+	// yac.Cmd("train", "other", "other", "[^\n]+")
+	// yac.Cmd("train", "key", "key", "[A-Za-z_][A-Za-z_0-9]*")
+	// yac.Cmd("train", "code", "struct", "struct", "key", "\\{")
+	// yac.Cmd("train", "code", "struct", "\\}", "key", ";")
+	// yac.Cmd("train", "code", "struct", "typedef", "struct", "key", "key", ";")
+	// yac.Cmd("train", "code", "function", "key", "\\*", "key", "(", "other")
+	// yac.Cmd("train", "code", "function", "key", "key", "(", "other")
+	// yac.Cmd("train", "code", "variable", "struct", "key", "key", "other")
+	// yac.Cmd("train", "code", "define", "#define", "key", "other")
+	//
 	if m.Cap("protocol") == "https" {
 		web.Caches["cert"] = &ctx.Cache{Name: "服务证书", Value: m.Conf("cert"), Help: "服务证书"}
 		web.Caches["key"] = &ctx.Cache{Name: "服务密钥", Value: m.Conf("key"), Help: "服务密钥"}
diff --git a/usr/wiki/html5.js b/usr/wiki/html5.js
index 808c16c0..57706088 100644
--- a/usr/wiki/html5.js
+++ b/usr/wiki/html5.js
@@ -75,35 +75,6 @@ var ctx3 = demo3.getContext("2d");
 demo3.onclick = draw3;
 draw3()
 
-var his = document.getElementById("draw_history");
-var item = document.getElementById("draw");
-var draw = item.getContext("2d");
-
-var control_map = {//{{{
-	s: "stroke",
-	f: "fill",
-
-	e: "heart",
-	c: "cycle",
-	r: "rect",
-	v: "line",
-	t: "text",
-
-	d: "delete",
-
-	b: "big",
-	m: "small",
-	a: "play",
-
-	Escape: "escape",
-}
-//}}}
-function control(event) {//{{{
-	if (event.type == "keyup") {
-		action(event, control_map[event.key]);
-	}
-}
-//}}}
 
 var current_ctx = {//{{{
 	big_scale: 1.25,
@@ -138,6 +109,8 @@ var current_ctx = {//{{{
 		scale: {label: "比例", value: 1, width: 40},
 		point: {label: "坐标", value: "0,0", width: 60},
 		begin: {label: "隐藏", value: 0, width: 40},
+		interval: {label: "间隔", value: 100, width: 40},
+		json: {label: "数据", value: "", width: 100},
 	},
 	command: {
 		cmd_shape: {
@@ -169,6 +142,17 @@ var current_ctx = {//{{{
 			blue: {text: "蓝色", key: "", conf:{"color": "blue"}},
 			white: {text: "白色", key: "", conf:{"color": "white"}},
 		},
+		control: {
+			big: {text: "放大", key: "b"},
+			small: {text: "缩小", key: "m"},
+			hide: {text: "隐藏"},
+			draw: {text: "恢复"},
+			play: {text: "播放", key: "a"},
+			delete: {text: "删除", key: "d"},
+			clear: {text: "清空", key: "q"},
+			export: {text: "导出"},
+			import: {text: "导入"},
+		}
 	},
 
 	list: {
@@ -178,6 +162,70 @@ var current_ctx = {//{{{
 	}
 }
 //}}}
+function init(configs, commands) {//{{{
+	for (var k in configs) {
+		var config = configs[k];
+		var cs = document.getElementsByClassName("config "+k);
+
+		for (var i = 0; i < cs.length; i++) {
+			if (config.list) {
+				cs[i].innerHTML = "";
+				for (var j in config.list) {
+					var item = config.list[j];
+					var option = cs[i].appendChild(document.createElement("option"));
+					option.value = item.value
+					option.text = item.text
+					if (config.value == item.value) {
+						cs[i].selectedIndex = j
+					}
+				}
+				(function() {
+					var key = k;
+					cs[i].onchange = function(event) {
+						conf('config', key, event);
+					}
+				})();
+			} else {
+				cs[i].value = config.value;
+				(function() {
+					var key = k;
+					if (config.label) {
+						var label = cs[i].parentElement.insertBefore(document.createElement("label"), cs[i]);
+						label.appendChild(document.createTextNode(config.label+": "));
+					}
+					if (config.width) {
+						cs[i].style.width = config.width+"px";
+					}
+					cs[i].onkeyup = cs[i].onblur = function(event) {
+						conf('config', key, event);
+					}
+					conf('config', key, config.value);
+				})();
+			}
+		}
+	}
+
+	for (var group in commands) {
+		for (var which in commands[group]) {
+			var command = commands[group][which];
+			var cs = document.getElementsByClassName(group+" "+which);
+			for (var i = 0; i < cs.length; i++) {
+				if (command.key) {
+					cs[i].innerText = command.text+"("+command.key+")";
+				} else {
+					cs[i].innerText = command.text
+				}
+				(function() {
+					var key = which;
+					var key1 = group;
+					cs[i].onclick = function(event) {
+						action(event, key, key1);
+					}
+				})();
+			}
+		}
+	}
+}//}}}
 function conf(group, which, value) {//{{{
 	if (value instanceof Event) {
 		var event = value;
@@ -225,83 +273,43 @@ function conf(group, which, value) {//{{{
 	}
 	return config.value
 }//}}}
-function init(configs, commands) {//{{{
-	for (var k in configs) {
-		var config = configs[k];
-		var cs = document.getElementsByClassName("config "+k);
-
-		for (var i = 0; i < cs.length; i++) {
-			if (config.list) {
-				cs[i].innerHTML = "";
-				for (var j in config.list) {
-					var item = config.list[j];
-					var option = cs[i].appendChild(document.createElement("option"));
-					option.value = item.value
-					option.text = item.text
-					if (config.value == item.value) {
-						cs[i].selectedIndex = j
-					}
-				}
-				(function() {
-					var key = k;
-					cs[i].onchange = function(event) {
-						conf('config', key, event);
-					}
-				})();
-			} else {
-				cs[i].value = config.value;
-				(function() {
-					var key = k;
-					if (config.label) {
-						var label = cs[i].parentElement.insertBefore(document.createElement("label"), cs[i]);
-						label.appendChild(document.createTextNode(config.label+" "));
-					}
-					if (config.width) {
-						cs[i].style.width = config.width+"px";
-					}
-					cs[i].onkeyup = cs[i].onblur = function(event) {
-						conf('config', key, event);
-					}
-				})();
-			}
-		}
-	}
-
-	for (var group in commands) {
-		for (var which in commands[group]) {
-			var command = commands[group][which];
-			var cs = document.getElementsByClassName(group+" "+which);
-			for (var i = 0; i < cs.length; i++) {
-				if (command.key) {
-					cs[i].innerText = command.text+"("+command.key+")";
-				} else {
-					cs[i].innerText = command.text
-				}
-				(function() {
-					var key = which;
-					var key1 = group;
-					cs[i].onclick = function(event) {
-						action(event, key, key1);
-					}
-				})();
-			}
-		}
-	}
-}//}}}
 init(current_ctx.config, current_ctx.command);
-action(null, "heart", "cmd_shape");
-action(null, "red", "cmd_color");
 
+var control_map = {//{{{
+	s: "stroke",
+	f: "fill",
+
+	e: "heart",
+	c: "cycle",
+	r: "rect",
+	v: "line",
+	t: "text",
+
+	d: "delete",
+
+	b: "big",
+	m: "small",
+	a: "play",
+
+	Escape: "escape",
+}
+//}}}
+function control(event) {//{{{
+	if (event.type == "keyup") {
+		action(event, control_map[event.key]);
+	}
+}
+//}}}
 function action(event, which, group) {//{{{
 	console.log(event);
 	switch (which) {
 		case "big":
-			conf("config", "scale", conf("config", "scale")*current_ctx.big_scale);
+			conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3));
 			draw.scale(current_ctx.big_scale, current_ctx.big_scale);
 			refresh();
 			break
 		case "small":
-			conf("config", "scale", conf("config", "scale")*current_ctx.small_scale);
+			conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3));
 			draw.scale(current_ctx.small_scale, current_ctx.small_scale);
 			refresh();
 			break
@@ -331,19 +339,29 @@ function action(event, which, group) {//{{{
 			break
 		case "play":
 			conf("config", "begin", 0);
-			refresh(500, 0);
+			refresh(conf("config", "interval"), 0);
+			break
+		case "export":
+			conf("config", "json", JSON.stringify(draw_history));
+			break
+		case "import":
+			draw_history = JSON.parse(conf("config", "json"));
+			refresh();
 			break
 
 		default:
-      var cs = document.getElementsByClassName(group);
-      for (var i = 0; i < cs.length; i++) {
-        cs[i].style.backgroundColor = "white";
-      }
+			if (!which || !group) {
+				break
+			}
+			var cs = document.getElementsByClassName(group);
+			for (var i = 0; i < cs.length; i++) {
+				cs[i].style.backgroundColor = "white";
+			}
 
-      var cs = document.getElementsByClassName(group+" "+which);
-      for (var i = 0; i < cs.length; i++) {
-        cs[i].style.backgroundColor = "lightblue";
-      }
+			var cs = document.getElementsByClassName(group+" "+which);
+			for (var i = 0; i < cs.length; i++) {
+				cs[i].style.backgroundColor = "lightblue";
+			}
 
 			var command = current_ctx.command[group][which];
 			for (var k in command.conf) {
@@ -355,164 +373,8 @@ function action(event, which, group) {//{{{
 	}
 }
 //}}}
-
-var draw_history = [];
-function modify(event, row, col) {//{{{
-	if (event.key != "Enter") {
-		return
-	}
-	console.log("modify");
-	console.log(event);
-	console.log();
-	var data = event.target.dataset;
-	var row = draw_history[data.row];
-	var value = event.target.value;
-	switch (data.col) {
-		case "x1":
-			row.begin_point.x = value;
-			break
-		case "y1":
-			row.begin_point.y = value;
-			break
-		case "x2":
-			row.end_point.x = value;
-			break
-		case "y2":
-			row.end_point.y = value;
-			break
-		default:
-			row[data.col] = value;
-	}
-
-	refresh();
-}
-//}}}
-function refresh(time, i) {//{{{
-	if (time) {
-		if (0 == i) {
-			draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
-		}
-
-		if (conf("config", "begin") <= i && i < draw_history.length) {
-			var h = draw_history[i];
-			draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point);
-			i++;
-			setTimeout(function(){
-				refresh(time, i);
-			}, time);
-		}
-		return
-	}
-
-	draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
-
-	for (var i in draw_history) {
-		if (i < conf("config", "begin")) {
-			continue
-		}
-		var h = draw_history[i];
-		draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point, h.text);
-	}
-}
-//}}}
-function draws(draw, style, stroke, shape, begin_point, end_point, text) {//{{{
-	draw.save();
-	begin_x = begin_point.x;
-	begin_y = begin_point.y;
-	end_x = end_point.x;
-	end_y = end_point.y;
-
-	if (current_ctx.index_point) {
-	draw.beginPath();
-	draw.arc(begin_x, begin_y, 5, 0, 2*Math.PI)
-	draw.fill()
-	}
-
-	if (current_ctx.index_point) {
-	draw.beginPath();
-	draw.arc(end_x, end_y, 5, 0, 2*Math.PI)
-	draw.fill()
-	}
-
-	switch (shape) {
-		case 'heart':
-			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
-			a = Math.atan((end_y-begin_y)/(end_x-begin_x))/Math.PI*180;
-			drawHeart(draw, begin_x, begin_y, r, a, style, stroke)
-			break
-		case 'cycle':
-			draw.beginPath();
-			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
-			draw.arc(begin_x, begin_y, r, 0, 2*Math.PI)
-			if (stroke == "stroke") {
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.stroke()
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fill()
-			}
-			break
-		case 'line':
-			draw.beginPath();
-			draw.moveTo(begin_x, begin_y);
-			draw.lineTo(end_x, end_y);
-			if (stroke == "stroke") {
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.stroke()
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fill()
-			}
-			break
-		case 'rect':
-			if (stroke == "stroke") {
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.strokeRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.fillRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
-			}
-			break
-		case 'text':
-			if (stroke == "stroke") {
-				if (style) {
-					draw.strokeStyle = style;
-				}
-				draw.font = current_ctx.font;
-				draw.strokeText(text, begin_x, begin_y, end_x-begin_x);
-			} else {
-				if (style) {
-					draw.fillStyle = style;
-				}
-				draw.font = current_ctx.font;
-				draw.fillText(text, begin_x, begin_y, end_x-begin_x);
-			}
-	}
-
-	draw.restore();
-}
-//}}}
-function show_debug(log, clear) {//{{{
-	var fuck = document.getElementById("fuck");
-	if (clear) {
-		fuck.innerHTML = "";
-	}
-	var div = fuck.appendChild(document.createElement("div"));
-	div.appendChild(document.createTextNode(log));
-}
-//}}}
+action(null, "heart", "cmd_shape");
+action(null, "red", "cmd_color");
 
 function trans(point) {//{{{
 	point.x /= conf("config", "scale");
@@ -520,11 +382,26 @@ function trans(point) {//{{{
 	return point;
 }
 //}}}
+function show_debug(log, clear) {//{{{
+	var fuck = document.getElementById("fuck");
+	// if (clear) {
+	// 	fuck.innerHTML = "";
+	// }
+	var div = fuck.appendChild(document.createElement("div"));
+	div.appendChild(document.createTextNode(log));
+}
+//}}}
 function draw_point(event) {//{{{
 	console.log("point");
 	console.log(event);
+	show_debug(event.type)
+	show_debug(event.clientX)
+	show_debug(event.clientY)
+	show_debug(JSON.stringify(event.touches[0]))
+	show_debug(JSON.stringify(event))
 
-	var point = trans({x:event.offsetX, y:event.offsetY});
+
+	var point = trans({x:event.offsetX||event.clientX, y:event.offsetY||event.clientY});
 
 	if (current_ctx.index_point) {
 		draw.beginPath();
@@ -619,3 +496,156 @@ function draw_move(event) {//{{{
 }
 //}}}
 
+var draw_history = [];
+var his = document.getElementById("draw_history");
+function modify(event, row, col) {//{{{
+	if (event.key != "Enter") {
+		return
+	}
+	console.log("modify");
+	console.log(event);
+	console.log();
+	var data = event.target.dataset;
+	var row = draw_history[data.row];
+	var value = event.target.value;
+	switch (data.col) {
+		case "x1":
+			row.begin_point.x = value;
+			break
+		case "y1":
+			row.begin_point.y = value;
+			break
+		case "x2":
+			row.end_point.x = value;
+			break
+		case "y2":
+			row.end_point.y = value;
+			break
+		default:
+			row[data.col] = value;
+	}
+
+	refresh();
+}
+//}}}
+function refresh(time, i) {//{{{
+	if (time) {
+		if (0 == i) {
+			draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
+		}
+
+		if (conf("config", "begin") <= i && i < draw_history.length) {
+			var h = draw_history[i];
+			draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point);
+			i++;
+			setTimeout(function(){
+				refresh(time, i);
+			}, time);
+		}
+		return
+	}
+
+	draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
+
+	for (var i in draw_history) {
+		if (i < conf("config", "begin")) {
+			continue
+		}
+		var h = draw_history[i];
+		draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point, h.text);
+	}
+}
+//}}}
+
+var item = document.getElementById("draw");
+var draw = item.getContext("2d");
+function draws(draw, style, stroke, shape, begin_point, end_point, text) {//{{{
+	draw.save();
+	begin_x = begin_point.x;
+	begin_y = begin_point.y;
+	end_x = end_point.x;
+	end_y = end_point.y;
+
+	if (current_ctx.index_point) {
+	draw.beginPath();
+	draw.arc(begin_x, begin_y, 5, 0, 2*Math.PI)
+	draw.fill()
+	}
+
+	if (current_ctx.index_point) {
+	draw.beginPath();
+	draw.arc(end_x, end_y, 5, 0, 2*Math.PI)
+	draw.fill()
+	}
+
+	switch (shape) {
+		case 'heart':
+			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
+			a = Math.atan((end_y-begin_y)/(end_x-begin_x))/Math.PI*180;
+			drawHeart(draw, begin_x, begin_y, r, a, style, stroke)
+			break
+		case 'cycle':
+			draw.beginPath();
+			r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
+			draw.arc(begin_x, begin_y, r, 0, 2*Math.PI)
+			if (stroke == "stroke") {
+				if (style) {
+					draw.strokeStyle = style;
+				}
+				draw.stroke()
+			} else {
+				if (style) {
+					draw.fillStyle = style;
+				}
+				draw.fill()
+			}
+			break
+		case 'line':
+			draw.beginPath();
+			draw.moveTo(begin_x, begin_y);
+			draw.lineTo(end_x, end_y);
+			if (stroke == "stroke") {
+				if (style) {
+					draw.strokeStyle = style;
+				}
+				draw.stroke()
+			} else {
+				if (style) {
+					draw.fillStyle = style;
+				}
+				draw.fill()
+			}
+			break
+		case 'rect':
+			if (stroke == "stroke") {
+				if (style) {
+					draw.strokeStyle = style;
+				}
+				draw.strokeRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
+			} else {
+				if (style) {
+					draw.fillStyle = style;
+				}
+				draw.fillRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y);
+			}
+			break
+		case 'text':
+			if (stroke == "stroke") {
+				if (style) {
+					draw.strokeStyle = style;
+				}
+				draw.font = current_ctx.font;
+				draw.strokeText(text, begin_x, begin_y, end_x-begin_x);
+			} else {
+				if (style) {
+					draw.fillStyle = style;
+				}
+				draw.font = current_ctx.font;
+				draw.fillText(text, begin_x, begin_y, end_x-begin_x);
+			}
+	}
+
+	draw.restore();
+}
+//}}}
+
diff --git a/usr/wiki/html5.md b/usr/wiki/html5.md
index 472b2333..5e38b526 100644
--- a/usr/wiki/html5.md
+++ b/usr/wiki/html5.md
@@ -26,33 +26,33 @@
 <canvas id="draw" width="400" height="400"
 onmousemove="draw_move(event)"
 onmouseup="draw_point(event)"
+onclick="draw_point(event)"
+ontouchstart="draw_point(event)"
+ontouchend="draw_point(event)"
 ></canvas>
 <br/>
 <select class="config shape"></select>
 <select class="config stroke"></select>
 <select class="config color"></select>
-<input class="config scale">
-<label class="config point">
-<label class="config begin">
+<label class="config scale"></label>
+<label class="config begin"></label>
+<label class="config point"></label>
 <br/>
-<button class="control b" onclick="action(event, 'big')">放大(b)</button>
-<button class="control m" onclick="action(event, 'small')">缩小(m)</button>
-<button class="control" onclick="action(event, 'move')">追踪</button>
-<button class="control" onclick="action(event, 'hide')">隐藏</button>
-<button class="control" onclick="action(event, 'draw')">恢复</button>
-<button class="control d" onclick="action(event, 'delete')">删除\(d\)</button>
-<button class="control" onclick="action(event, 'clear')">清空\(q\)</button>
-<button class="control a" onclick="action(event, 'play')">播放\(a\)</button>
+<button class="control big"></button>
+<button class="control small"></button>
+<button class="control hide"></button>
+<button class="control draw"></button>
+<button class="control play"></button>
+<input class="config interval"></label>
 <br/>
-<div id="fuck">
-</div>
-
-<input class="config scale">
-
-<div style="clear:both">
-</div>
+<button class="control delete"></button>
+<button class="control clear"></button>
+<button class="control export"></button>
+<button class="control import"></button>
+<input class="config json"></label>
 <br/>
-<div><table id="draw_history"></table></div>
+<div id="fuck"></div>
+<table id="draw_history"></table>
 
 ### canvas绘图
 <canvas id="demo0" class="demo" width="120" height="120"></canvas>