[occt.git] / samples / webgl / occt-webgl-sample.html

<!DOCTYPE html>\r
<html lang=en-us>\r
<head>\r
<meta charset=utf-8><meta content="text/html; charset=utf-8" http-equiv=Content-Type>\r
<link rel="shortcut icon" href="lamp.ico" type="image/x-icon" />\r
<title>OCCT WebGL Viewer Sample</title>\r
</head>\r
<body>\r
\r
<h2>OCCT WebGL Viewer Sample</h2>\r
<div>\r
  <canvas id=canvas oncontextmenu=event.preventDefault() tabindex=-1 style="border:0 none;background-color:#000" width="409" height="409"></canvas>\r
  <img id=occlogo src="OCC_logo.png" style="position: absolute; left: 20px; top: 0px; z-index: 2;" />\r
</div>\r
\r
<div><label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep"></div>\r
<h4>Console output:</h4>\r
<p id="output"></p>\r
<script>\r
//! Resize canvas to fit into window.\r
function updateCanvasSize()\r
{\r
  // size of canvas in logical (density-independent) units\r
  var aSizeX = Math.min (window.innerWidth,  window.screen.availWidth);\r
  var aSizeY = Math.min (window.innerHeight, window.screen.availHeight);\r
  aSizeX = Math.max (300, aSizeX - 30);\r
  aSizeY = Math.max (300, aSizeY / 2);\r
  canvas.style.width  = aSizeX + "px";\r
  canvas.style.height = aSizeY + "px";\r
\r
  // drawing buffer size (aka backing store)\r
  var aDevicePixelRatio = window.devicePixelRatio || 1;\r
  canvas.width  = aSizeX * aDevicePixelRatio;\r
  canvas.height = aSizeY * aDevicePixelRatio;\r
\r
  occlogo.style.top = (aSizeY - 30) + "px";\r
}\r
window.onresize = updateCanvasSize;\r
updateCanvasSize();\r
\r
//! Check browser support.\r
function isWasmSupported()\r
{\r
  try {\r
    if (typeof WebAssembly === "object"\r
     && typeof WebAssembly.instantiate === "function") {\r
      const aDummyModule = new WebAssembly.Module (Uint8Array.of (0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));\r
      if (aDummyModule instanceof WebAssembly.Module)\r
      {\r
        return new WebAssembly.Instance(aDummyModule) instanceof WebAssembly.Instance;\r
      }\r
    }\r
  } catch (e) {}\r
  return false;\r
}\r
if (!isWasmSupported())\r
{\r
  var anElement = document.getElementById('output');\r
  anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>";\r
}\r
\r
//! Define OCCT WebGL Viewer module.\r
var Module =\r
{\r
  print: (function() {\r
    var anElement = document.getElementById('output');\r
    return function(theText) { anElement.innerHTML += theText + "<br>"; };\r
  })(),\r
  printErr: function(theText) {\r
    //var anElement = document.getElementById('output');\r
    //anElement.innerHTML += theText + "<br>";\r
    console.warn(theText);\r
  },\r
  canvas: (function() {\r
    var aCanvas = document.getElementById('canvas');\r
    return aCanvas;\r
  })()\r
};\r
\r
//! Handle file uploading.\r
fileInput.onchange = function()\r
{\r
  if (fileInput.files.length == 0) { return; }\r
  // Warning! Entire file is pre-loaded into memory.\r
  var aFile = fileInput.files[0];\r
  var aReader = new FileReader();\r
  aReader.onload = function()\r
  {\r
    var aNameLenBytes = lengthBytesUTF8(aFile.name) + 1;\r
    const aNameBuffer = Module._malloc(aNameLenBytes);\r
    stringToUTF8(aFile.name, aNameBuffer, aNameLenBytes);\r
\r
    var aDataArray = new Uint8Array (aReader.result);\r
    const aDataBuffer = Module._malloc(aDataArray.length);\r
    Module.HEAPU8.set(aDataArray, aDataBuffer);\r
    Module.ccall('onFileDataRead', null, ['number', 'number', 'number'], [aNameBuffer, aDataBuffer, aDataArray.length]);\r
    Module._free(aDataBuffer);\r
    Module._free(aNameBuffer);\r
    fileInput.value = '';\r
  };\r
  aReader.readAsArrayBuffer(aFile);\r
};\r
</script>\r
<script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>\r
</body>\r
</html>\r
Commit	Line	Data
565baee6	1	<!DOCTYPE html>\r
	2	<html lang=en-us>\r
	3	<head>\r
	4	<meta charset=utf-8><meta content="text/html; charset=utf-8" http-equiv=Content-Type>\r
	5	<link rel="shortcut icon" href="lamp.ico" type="image/x-icon" />\r
	6	<title>OCCT WebGL Viewer Sample</title>\r
	7	</head>\r
	8	<body>\r
	9	\r
	10	<h2>OCCT WebGL Viewer Sample</h2>\r
	11	<div>\r
	12	<canvas id=canvas oncontextmenu=event.preventDefault() tabindex=-1 style="border:0 none;background-color:#000" width="409" height="409"></canvas>\r
	13	<img id=occlogo src="OCC_logo.png" style="position: absolute; left: 20px; top: 0px; z-index: 2;" />\r
	14	</div>\r
	15	\r
	16	<div><label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep"></div>\r
	17	<h4>Console output:</h4>\r
	18	<p id="output"></p>\r
	19	<script>\r
	20	//! Resize canvas to fit into window.\r
	21	function updateCanvasSize()\r
	22	{\r
	23	// size of canvas in logical (density-independent) units\r
	24	var aSizeX = Math.min (window.innerWidth, window.screen.availWidth);\r
	25	var aSizeY = Math.min (window.innerHeight, window.screen.availHeight);\r
	26	aSizeX = Math.max (300, aSizeX - 30);\r
	27	aSizeY = Math.max (300, aSizeY / 2);\r
	28	canvas.style.width = aSizeX + "px";\r
	29	canvas.style.height = aSizeY + "px";\r
	30	\r
	31	// drawing buffer size (aka backing store)\r
	32	var aDevicePixelRatio = window.devicePixelRatio \|\| 1;\r
	33	canvas.width = aSizeX * aDevicePixelRatio;\r
	34	canvas.height = aSizeY * aDevicePixelRatio;\r
	35	\r
	36	occlogo.style.top = (aSizeY - 30) + "px";\r
	37	}\r
	38	window.onresize = updateCanvasSize;\r
	39	updateCanvasSize();\r
	40	\r
	41	//! Check browser support.\r
	42	function isWasmSupported()\r
	43	{\r
	44	try {\r
	45	if (typeof WebAssembly === "object"\r
	46	&& typeof WebAssembly.instantiate === "function") {\r
	47	const aDummyModule = new WebAssembly.Module (Uint8Array.of (0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));\r
	48	if (aDummyModule instanceof WebAssembly.Module)\r
	49	{\r
	50	return new WebAssembly.Instance(aDummyModule) instanceof WebAssembly.Instance;\r
	51	}\r
	52	}\r
	53	} catch (e) {}\r
	54	return false;\r
	55	}\r
	56	if (!isWasmSupported())\r
	57	{\r
	58	var anElement = document.getElementById('output');\r
	59	anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>";\r
	60	}\r
	61	\r
	62	//! Define OCCT WebGL Viewer module.\r
	63	var Module =\r
	64	{\r
65	print: (function() {\r
66	var anElement = document.getElementById('output');\r
67	return function(theText) { anElement.innerHTML += theText + "<br>"; };\r
68	})(),\r
69	printErr: function(theText) {\r
70	//var anElement = document.getElementById('output');\r
71	//anElement.innerHTML += theText + "<br>";\r
7465bfa6	72	console.warn(theText);\r
565baee6	73	},\r
	74	canvas: (function() {\r
	75	var aCanvas = document.getElementById('canvas');\r
	76	return aCanvas;\r
	77	})()\r
	78	};\r
	79	\r
	80	//! Handle file uploading.\r
	81	fileInput.onchange = function()\r
	82	{\r
	83	if (fileInput.files.length == 0) { return; }\r
	84	// Warning! Entire file is pre-loaded into memory.\r
	85	var aFile = fileInput.files[0];\r
	86	var aReader = new FileReader();\r
	87	aReader.onload = function()\r
	88	{\r
7465bfa6	89	var aNameLenBytes = lengthBytesUTF8(aFile.name) + 1;\r
	90	const aNameBuffer = Module._malloc(aNameLenBytes);\r
	91	stringToUTF8(aFile.name, aNameBuffer, aNameLenBytes);\r
	92	\r
565baee6	93	var aDataArray = new Uint8Array (aReader.result);\r
565baee6	94	const aDataBuffer = Module._malloc(aDataArray.length);\r
565baee6	95	Module.HEAPU8.set(aDataArray, aDataBuffer);\r
	96	Module.ccall('onFileDataRead', null, ['number', 'number', 'number'], [aNameBuffer, aDataBuffer, aDataArray.length]);\r
	97	Module._free(aDataBuffer);\r
	98	Module._free(aNameBuffer);\r
	99	fileInput.value = '';\r
	100	};\r
	101	aReader.readAsArrayBuffer(aFile);\r
	102	};\r
565baee6	103	</script>\r
	104	<script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>\r
	105	</body>\r
	106	</html>\r