From 679a34d178685030bf585b599a25acf12986c3e9 Mon Sep 17 00:00:00 2001
From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Sat, 25 Jan 2014 12:54:19 +0900
Subject: [PATCH] =?utf8?q?webcpu=E3=81=AE=E9=AB=98=E9=80=9F=E5=8C=96?=
 =?utf8?q?=E3=81=A8=E6=8F=8F=E7=94=BB=E5=87=A6=E7=90=86=E3=81=AE=E5=AE=9F?=
 =?utf8?q?=E8=A3=85=E5=A4=89=E6=9B=B4=EF=BC=88=E7=9B=B4=E6=8E=A5bmp?=
 =?utf8?q?=E3=81=AB=E6=8F=8F=E7=94=BB=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?utf8?q?=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=9F=E3=80=82=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 webcpu/api.js      | 168 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 webcpu/index.html  |   8 ++-
 webcpu/instrbas.js |   6 +-
 webcpu/readme.txt  |  37 ++++++++++++
 webcpu/webcpu.js   |  22 ++++---
 5 files changed, 218 insertions(+), 23 deletions(-)
 create mode 100644 webcpu/readme.txt

diff --git a/webcpu/api.js b/webcpu/api.js
index e1f1a6c..8510adb 100644
--- a/webcpu/api.js
+++ b/webcpu/api.js
@@ -1,12 +1,144 @@
+function BitmapCanvas(){
+	this.canvasDOMObject = null;
+	this.canvasContext = null;
+	this.bufferImageData = null;
+	this.bmp = null;
+	this.width = undefined;
+	this.height = undefined;
+}
+BitmapCanvas.prototype = {
+	setCanvas: function(canvasDOMObject){
+		this.canvasDOMObject = canvasDOMObject;
+		if(canvasDOMObject){
+			this.canvasContext = this.canvasDOMObject.getContext("2d");
+			this.width = this.canvasDOMObject.width;
+			this.height = this.canvasDOMObject.height;
+			this.bufferImageData = this.canvasContext.getImageData(0, 0, this.width, this.height);
+			this.bmp = this.bufferImageData.data;
+			console.log(this.bufferImageData);
+			//
+			/*
+			for(var i = 0; i < 100; i += 2){
+				this.drawLine(0, i, 100, i, 0xffffff, 0);
+			}
+			var x0 = 10;
+			var y0 = 10;
+			var x1 = 60;
+			var y1 = 11;
+			this.drawLine(x0, y0, x1, y1, 0xff0000, 0);
+			this.drawLine(x1, y1, x0, y0, 0x00ff00, 1);
+			*/
+			this.flush();
+		} else{
+			this.bmp = null;
+			this.canvasContext = null;
+			this.bufferImageData = null;
+			this.width = undefined;
+			this.height = undefined;
+		}
+	},
+	drawPoint: function(x, y, color, mode){
+		if(this.bmp){
+			if(mode === undefined){
+				mode = 0;
+			} else{
+				mode &= 0x03;
+			}
+			x += 0.5;
+			x |= 0;
+			y += 0.5;
+			y |= 0;
+			//RGBARGBA...
+			if(mode == 0){
+				//PSET
+				this.bmp[4 * (y * this.width + x) + 0] = (color >> 16) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 1] = (color >> 8) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 2] = color & 0xFF;
+			} else if(mode == 1){
+				//OR
+				this.bmp[4 * (y * this.width + x) + 0] |= (color >> 16) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 1] |= (color >> 8) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 2] |= color & 0xFF;
+			} else if(mode == 2){
+				//XOR
+				this.bmp[4 * (y * this.width + x) + 0] ^= (color >> 16) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 1] ^= (color >> 8) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 2] ^= color & 0xFF;
+			} else if(mode == 3){
+				//AND
+				this.bmp[4 * (y * this.width + x) + 0] &= (color >> 16) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 1] &= (color >> 8) & 0xFF;
+				this.bmp[4 * (y * this.width + x) + 2] &= color & 0xFF;
+			}
+		}
+	},
+	drawLine: function(x0, y0, x1, y1, color, mode){
+		//整数座標のみ対応。
+		x0 |= 0;
+		y0 |= 0;
+		x1 |= 0;
+		y1 |= 0;
+		var dx = x1 - x0;
+		var dy = y1 - y0;
+		var dxa = dx;
+		var dya = dy;
+		var l;
+		
+		if(dxa < 0){
+			dxa = -dxa;
+		}
+		if(dya < 0){
+			dya = -dya;
+		}
+		
+		if(dxa > dya){
+			//x軸基準
+			l = dxa + 1;
+			if(x0 > x1){
+				dx = -1;
+			} else{
+				dx = 1;
+			}
+			dy /= l;
+		} else{
+			//y軸基準
+			l = dya + 1;
+			if(y0 > y1){
+				dy = -1;
+			} else{
+				dy = 1;
+			}
+			dx /= l;
+		}
+		
+		for(var i = 0; i < l; i++){
+			this.drawPoint(x0 + dx * i, y0 + dy * i, color, mode);
+		}
+	},
+	fillRect: function(xSize, ySize, x0, y0, col, mode){
+	
+	},
+	fillOval: function(xSize, ySize, x0, y0, col, mode){
+	
+	},
+	flush: function(){
+		if(this.bufferImageData){
+			this.canvasContext.putImageData(this.bufferImageData, 0, 0);
+		}
+	},
+}
+
 function WebCPU_API(){
 	this.mainWindowCanvas = null;
 	this.mainWindowContext = null;
-	this.mainWindowBufferCanvas = document.createElement('canvas');
-	this.mainWindowBufferContext = this.mainWindowBufferCanvas.getContext("2d");
+	//this.mainWindowBufferCanvas = document.createElement('canvas');
+	//this.mainWindowBufferContext = this.mainWindowBufferCanvas.getContext("2d");
+	//
+	this.bitmapCanvas = new BitmapCanvas();
 	//
-	this.mainWindowBufferCanvas.width = 640;
-	this.mainWindowBufferCanvas.height = 480;
-	this.initCanvas(this.mainWindowBufferCanvas);
+	//this.mainWindowBufferCanvas.width = 640;
+	//this.mainWindowBufferCanvas.height = 480;
+	//this.initCanvas(this.mainWindowBufferCanvas);
 }
 WebCPU_API.prototype = {
 	executeAPI: function(env){
@@ -57,6 +189,8 @@ WebCPU_API.prototype = {
 		if(this.mainWindowCanvas){
 			this.mainWindowContext = this.mainWindowCanvas.getContext('2d')
 			this.initCanvas(this.mainWindowCanvas);
+			//
+			this.bitmapCanvas.setCanvas(this.mainWindowCanvas);
 		} else{
 			this.mainWindowContext = null;
 		}
@@ -74,20 +208,24 @@ WebCPU_API.prototype = {
 		env.message("junkApi_openWin();\n", 20);
 		this.mainWindowCanvas.width = xSize;
 		this.mainWindowCanvas.height = ySize;
-		this.mainWindowBufferCanvas.width = xSize;
-		this.mainWindowBufferCanvas.height = ySize;
+		//this.mainWindowBufferCanvas.width = xSize;
+		//this.mainWindowBufferCanvas.height = ySize;
+		this.initCanvas(this.mainWindowCanvas);
+		this.bitmapCanvas.setCanvas(this.mainWindowCanvas);
 	},
 	API_flushWin: function(env, xSize, ySize, x0, y0){
 		env.message("junkApi_flushWin();\n", 20);
-		this.mainWindowContext.drawImage(this.mainWindowBufferCanvas, x0, y0, xSize, ySize, 0, 0, xSize, ySize);
+		//this.mainWindowContext.drawImage(this.mainWindowBufferCanvas, x0, y0, xSize, ySize, 0, 0, xSize, ySize);
+		this.bitmapCanvas.flush();
 	},
 	API_drawPoint: function(env, mode, x, y, col){
 		env.message("junkApi_drawPoint();\n", 20);
 		if((mode & 0x04) != 0){
 			col = this.colorTable[col];
 		}
-		this.mainWindowBufferContext.fillStyle = "#" + ("000000" + col.toString(16)).slice(-6).toUpperCase();
-		this.mainWindowBufferContext.fillRect(x, y, 1, 1);
+		//this.mainWindowBufferContext.fillStyle = "#" + ("000000" + col.toString(16)).slice(-6).toUpperCase();
+		//this.mainWindowBufferContext.fillRect(x, y, 1, 1);
+		this.bitmapCanvas.drawPoint(x, y, col, mode);
 	},
 	API_drawLine: function(env, mode, x0, y0, x1, y1, col){
 		env.message("junkApi_drawLine();\n", 20);
@@ -95,13 +233,15 @@ WebCPU_API.prototype = {
 		if((mode & 0x04) != 0){
 			col = this.colorTable[col];
 		}
-		
+		/*
 		this.mainWindowBufferContext.strokeStyle = "#" + ("000000" + col.toString(16)).slice(-6).toUpperCase();
 		this.mainWindowBufferContext.beginPath();
 		this.mainWindowBufferContext.moveTo(x0, y0);
 		this.mainWindowBufferContext.lineTo(x1, y1);
 		this.mainWindowBufferContext.closePath();
 		this.mainWindowBufferContext.stroke();
+		*/
+		this.bitmapCanvas.drawLine(x0, y0, x1, y1, col, mode);
 	},
 	API_fillRect: function(env, mode, xSize, ySize, x0, y0, col){
 		env.message("junkApi_fillRect();\n", 20);
@@ -109,9 +249,10 @@ WebCPU_API.prototype = {
 		if((mode & 0x04) != 0){
 			col = this.colorTable[col];
 		}
-		
+		/*
 		this.mainWindowBufferContext.fillStyle = "#" + ("000000" + col.toString(16)).slice(-6).toUpperCase();
 		this.mainWindowBufferContext.fillRect(x0, y0, xSize, ySize);
+		*/
 	},
 	API_fillOval: function(env, mode, xSize, ySize, x0, y0, col){
 		env.message("junkApi_fillRect();\n", 20);
@@ -119,8 +260,9 @@ WebCPU_API.prototype = {
 		if((mode & 0x04) != 0){
 			col = this.colorTable[col];
 		}
-		
+		/*
 		this.mainWindowBufferContext.fillStyle = "#" + ("000000" + col.toString(16)).slice(-6).toUpperCase();
 		this.mainWindowBufferContext.fillEllipse(x0, y0, xSize, ySize);
+		*/
 	},
 }
diff --git a/webcpu/index.html b/webcpu/index.html
index 0970880..2a28cfc 100755
--- a/webcpu/index.html
+++ b/webcpu/index.html
@@ -67,14 +67,20 @@ function disableDebugMode(){
 }
 
 var stepInTimer = null;
+var autoStepInCount = 0;
 
 function stepInMs(){
 	stepInTimer = window.setInterval(stepInMs_Tick, 1);
 }
 
 function stepInMs_Tick(){
-	if(mainCPU.executeStepIn() != 0){
+	if(mainCPU.executeStepIn_Internal(false) != 0){
 		window.clearTimeout(stepInTimer);
+	} else{
+		autoStepInCount++;
+		if((autoStepInCount & 0xff) == 0){
+			mainCPU.API.API_flushWin(mainCPU, mainCPU.API.mainWindowCanvas.width, mainCPU.API.mainWindowCanvas.height, 0, 0);
+		}
 	}
 }
 
diff --git a/webcpu/instrbas.js b/webcpu/instrbas.js
index ccd51c2..ebf62f6 100644
--- a/webcpu/instrbas.js
+++ b/webcpu/instrbas.js
@@ -19,11 +19,11 @@ WebCPU_Instruction.prototype = {
 	},
 	execute: function(env){
 		//printXXXはデバッグ用
-		if(this.printSourceRegister){
+		if(this.isEnabledPrintSourceRegister && this.printSourceRegister){
 			this.printSourceRegister(env);
 		}
 		this.instruction(env);
-		if(this.printDestinationRegister){
+		if(this.isEnabledPrintDestinationRegister && this.printDestinationRegister){
 			this.printDestinationRegister(env);
 		}
 	},
@@ -72,6 +72,8 @@ WebCPU_Instruction.prototype = {
 		return parseSignedInt32(argBinStr.substr(baseIndex + offset * 2, bytes * 2), 16);
 	},
 	//
+	isEnabledPrintSourceRegister: true,
+	isEnabledPrintDestinationRegister: true,
 	printSourceRegister: null,
 	printDestinationRegister: null,
 }
diff --git a/webcpu/readme.txt b/webcpu/readme.txt
new file mode 100644
index 0000000..a23a2cd
--- /dev/null
+++ b/webcpu/readme.txt
@@ -0,0 +1,37 @@
+*WebCPU-VM
+By hikarupsp 2013-2014 for OSECPU-VM
+
+**これは何？
+OSECPU-VMのJavaScript実装です。
+JavaScriptは、ほとんどの場合ウェブブラウザさえあれば実行できる言語なので、より多くの環境でOSECPUコードを実行させることができます。
+また、HTML5技術(Canvas)と連携することで、ウェブページに直接OSECPUコードを埋め込むこともできるようになるでしょう。
+これは、テキストを直接転送しているHTMLにとって、データの転送量を削減することにもつながります。
+
+**動作環境
+動作を確認している環境は以下の通りです。(app0023フロントエンドコードテキストのStepInMs実行にて確認。)
+-Chrome (Mac OSX, Windows)
+-Safari (Mac OSX, iOS)
+-Browser (Android)
+-InternetExplorer9 (Windows)
+
+**現在の状況は？
+-アプリケーションバイナリのフロントエンドコードHex文字列を実行し、その結果を表示することができます。
+-実行バイナリをドラッグ&ドロップで直接読み込ませ、実行させることができます（HTML5FileAPI対応ブラウザに限ります）。
+-バックエンド命令はほとんどが実装されていますが、APIおよびメモリ関連の一部の命令は未実装です。
+
+**使い方は？
+組み込んで使用する方は、index.htmlのサンプルコードを見ていただければ、だいたいはわかると思います。
+***テストページの操作方法
++binaryCodeのところに、バイナリをHex文字列化したものを打ち込む
+--もしくは実行バイナリファイルを直接読み込ませることもできます。
++コードをLoadする
+Loadボタンを押すことで、バイナリコードが解釈されてWebCPUで実行可能な状態になります。フロントエンドコードの場合、環境によってはデコードに少し時間がかかるかもしれません。
++実行する
+実行するときにはいくつかの方法があります。
+++StepIn:ステップ実行します。
+++StepInMs:1ミリ秒ごとに区切って実行します。デバッグ表示をしている間は最速で実行する方法です。
+++StepIn100:100ステップ実行します。
+++Execute:最速で実行します（デバッグモード有効時は使用しない方がよいです）
+-デバッグモードについて
+デバッグモード時は、実行中のレジスタ情報と現在実行中の命令について詳細を確認しながら実行できます。
+負荷のかかるアプリケーションを実行する際は、デバッグモードを無効にするのがよいでしょう。
diff --git a/webcpu/webcpu.js b/webcpu/webcpu.js
index 45f0b6e..ed3d54a 100755
--- a/webcpu/webcpu.js
+++ b/webcpu/webcpu.js
@@ -1,3 +1,5 @@
+//WebCPUは、このディレクトリにあるファイルで完結している。
+
 function WebCPU_Exception(errno, infoArray){
 	this.errno = errno;
 	this.infoArray = infoArray;
@@ -265,27 +267,29 @@ WebCPU.prototype = {
 	executeStepIn: function(){
 		//ステップ実行する。
 		//一回実行するたびに再描画する。
-		var retv = this.executeStepIn_Internal();
-		this.API.API_flushWin(this, this.API.mainWindowBufferCanvas.width, this.API.mainWindowBufferCanvas.height, 0, 0);
+		var retv = this.executeStepIn_Internal(true);
+		this.API.API_flushWin(this, this.API.mainWindowCanvas.width, this.API.mainWindowCanvas.height, 0, 0);
 		return retv;
 	},
-	executeStepIn_Internal: function(){
+	executeStepIn_Internal: function(isManualStepIn){
 		//ステップ実行の内部部分。
 		//終端到達時は1を、まだ後続命令がある場合は0を返す。
 		//終了時にのみ再描画を行う
 		if(this.stopFlag){
 			this.message(">stepIn:Break.\n", 2);
 			this.stopFlag = false;
-			this.API.API_flushWin(this, this.API.mainWindowBufferCanvas.width, this.API.mainWindowBufferCanvas.height, 0, 0);
+			this.API.API_flushWin(this, this.API.mainWindowCanvas.width, this.API.mainWindowCanvas.height, 0, 0);
 			return 2;
 		}
 		var instr = this.fetchMemoryNext();
 		if(instr === undefined){
 			this.message(">stepIn:control reached end of binary.\n", 2);
-			this.API.API_flushWin(this, this.API.mainWindowBufferCanvas.width, this.API.mainWindowBufferCanvas.height, 0, 0);
+			this.API.API_flushWin(this, this.API.mainWindowCanvas.width, this.API.mainWindowCanvas.height, 0, 0);
 			return 1;
 		}
-		this.message(">stepIn:" + this.memoryPageCounter + "-" + (this.memoryInstructionCounter - 1) + ":" + instr.toString() + "\n", 20);
+		if(isManualStepIn){
+			this.message(">stepIn:" + this.memoryPageCounter + "-" + (this.memoryInstructionCounter - 1) + ":" + instr.toString() + "\n", 20);
+		}
 		instr.execute(this);
 		//これ以降this.memoryInstructionCounterが今実行した命令を指すとは限らない。（JMP系命令のため）
 		/*
@@ -300,7 +304,7 @@ WebCPU.prototype = {
 	execute: function(){
 		//最速で実行する
 		for(;;){
-			if(this.executeStepIn_Internal() != 0){
+			if(this.executeStepIn_Internal(false) != 0){
 				return;
 			}
 		}
@@ -356,10 +360,14 @@ WebCPU.prototype = {
 			//すべて無効だったらタイマーの動作自体を止める
 			window.clearTimeout(this.messageTimer);
 			this.messageTimer = null;
+			WebCPU_Instruction.prototype.isEnabledPrintSourceRegister = false;
+			WebCPU_Instruction.prototype.isEnabledPrintDestinationRegister = false;
 		} else if(!this.messageTimer){
 			//どれかが有効でかつタイマーが止まっていたらスタートさせる
 			var that = this;
 			this.messageTimer = window.setInterval(function(){that.debugShowTick();}, 50);
+			WebCPU_Instruction.prototype.isEnabledPrintSourceRegister = true;
+			WebCPU_Instruction.prototype.isEnabledPrintDestinationRegister = true;
 		}
 	},
 	debugShowTick: function(){
-- 
2.11.0