Personal tools
You are here: Home → OSCAR Users → EMR and Case Management Resources → eForms → eForms for download → Graphical eForms → Surface Anatomy → SurfaceAnatomy.html
 

SurfaceAnatomy.html

SurfaceAnatomy.html — HTML, 17Kb

File contents

<html>
<Title>Surface Anatomy</title>
<head>


<!-- CSS Script that removes textarea and textbox borders when printing-->
<style type="text/css" media="print">
.DoNotPrint {
	display: none;
}

input.noborder {
	border: 0px;
	background: transparent;
}
textarea.noborder {
	background: transparent;
	overflow: hidden;
	border: 0px;
}
</style>


<!-- wz_jsgraphics.js -->
<script type="text/javascript" src="${oscar_image_path}jsgraphics.js">
</script>

<!-- mousefunction.js -->
<script type="text/javascript" src="${oscar_image_path}mouse.js">
</script>


<script type="text/javascript">
function Highlight(i){
	document.getElementById(i).style.border = "2px solid orange";
}
function RemoveHighlight(i){
	document.getElementById(i).style.borderStyle = "none";
}
</script>


</head>

<body  onload="init(); ReloadImage(); SetSwitchOn('Freehand');">

<div style="position: absolute; left: 10px; top: 30px; ">
	<img id="image" src="${oscar_image_path}SurfaceAnatomy.png" width="800">
</div>
<!-- You can remove ${oscar_image_path} as you develop the form, but make sure you put it back before 

uploading to OSCAR otherwise the image wouldn't show. -->
<!-- Also note: the image filename IS CASE SENSITIVE INCLUDING THE EXTENSION. It may work otherwise in 
Windows, but not in OSCAR because it's based on a Linux platform -->


<form method="post" action="" name="AnatomyForm" id="AnatomyForm">
<div style="position:absolute; top:5px;left:10px; font-family:arial;font-size:12px;font-weight:bold;">
	Name: <input name="PatientName" id="PatientName" class="noborder" style="font-family:arial;font-size:12px; width:320px;text-align:left;" type="text" oscarDB=patient_name>
	Birthdate: <input name="DOB" id="DOB" class="noborder" style="font-family:arial;font-size:12px;width100;text-align:left;" type="text" oscarDB=DOB>
	Date:<input name="Date" id="Date" class="noborder" style="font-family:arial;font-size:12px;width:180px;text-align:left;" type="text" oscarDB=today>
</div>
<!-- ----------------------------All textfields/checkboxes/textareas go here...------ -->


<!-- -----------------Hidden input for storing Image data---------------------------------- -->
<input type="hidden" name="TempData" id="TempData">
<input type="hidden" name="DrawData" id="DrawData">
<input type="hidden" name="SubmitData" id="SubmitData">


<!-- ---------------------The submit/print/reset buttons -------------------------------------->
<div class="DoNotPrint" style="position: absolute; top: 1100px; left: 41px;">
<table>
	<tr>
		<td>
			Subject: <input name="subject" size="40" type="text">
			<input value="Submit" name="SubmitButton" type="button" onclick="SubmitImage(); document.AnatomyForm.submit()">
			<input value="Reset" name="ResetButton" type="reset">
			<input value="Print"  name="PrintButton" onclick="window.print()" type="button">
		</td>
	</tr>
</table>
</div>
</form>
<!-- ------End of submit/print/reset buttons----------------------------------------------------->

<!--  Drawing code: start -->
<div id="preview" style="position:absolute; left: 10px; top:30px; width: 800px; height: 1018px;"></div>
<div id="myCanvas"
	style="position:absolute; left: 10px; top:30px; width: 800px; height: 1018px;"
	onmouseover="SetDrawOn();"
	onmouseout="SetDrawOff();" 	
	onmousedown="SetMouseDown();SetStart();" 
	onmouseup="SetMouseUp();  DrawMarker();" 
	onmousemove="DrawPreview();"> 
</div>


<br>
<div name="ToolSelectDiv" style="position:fixed; left:825px; top:30px" class="DoNotPrint">
<form name="ToolSelect">
<table>
<tr>
<td>
	<u>Drawing Tools:</u><br>
	<input id="Freehand" type="radio" name="DrawingTool" onclick="SetSwitchOn(this.id);" checked><b>Freehand:</b>
	<br>
	Line Thickness:<select id="Thickness" name="Thickness" style="width:50px;" onchange="SetThickness(this.value);">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3" selected>3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		</select>
	<br>
	<br>
	<input id="Text" type="radio"  Name="DrawingTool" onclick="SetSwitchOn(this.id);"><b>Text:</b>
	<br>
	Size:<select id="FontSize" name="FontSize" style="width:50px;" onchange="SetFontSize(this.value);">
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
		</select>
	<br>
	<input id="TextString" type="text" onchange="GetTxt();" style="width:200px">
	<br>
	<br>
	<input id="SymbolPattern" type="radio" Name="DrawingTool" onclick="SetSwitchOn(this.id);" ><b>Repeating Symbol:</b><br>
	<input id="Symbol" type="text" onchange="GetSymbol();" maxlength="1" style="width:30px;">
	Size:<select id="SymbolSize" name="SymbolSize" style="width:50px;" onchange="SetSymbolSize(this.value);">
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
		</select>

</td>
</tr>

<tr>
<td>
	<u>Color:</u><br>
	<table>
		<tr>
			<td>
				<div  id="black"  style="width:30px; height:20px;border: 2px solid orange; background-color: black; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="red" style="width:30px; height:20px;background-color: red; border:2px; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="lime" style="width:30px; height:20px;background-color: lime; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="blue"  style="width:30px; height:20px;background-color: blue; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
			</td>
			<td>
				<div  id="grey"  style="width:30px; height:20px; background-color: grey; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="magenta" style="width:30px; height:20px;background-color: magenta; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="yellow" style="width:30px; height:20px;background-color: yellow; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>
				<div  id="cyan" style="width:30px; height:20px;background-color: cyan; margin: 2px;" onmouseover="Highlight(this.id);" onmouseout="RemoveHighlight(this.id);Highlight(StrokeColor);" onclick="RemoveHighlight(StrokeColor);SetStrokeColor(this.id);"></div>

			</td>
		</tr>
	</table>
</td>
</tr>

<tr>
<td>
	<input id="UndoButton" type="button" value="Undo" onclick="Undo();" style="width:100px"><br>
	<input id="ClearButton" type="button"  value="Clear" onclick="Clear();" style="width:100px">
</td>
</tr>
</table>
</form>
</div>


<script type="text/javascript">

var cnv = document.getElementById("myCanvas"); 
var jg = new jsGraphics(cnv);
var cnvLeft = parseInt(document.getElementById('myCanvas').style.left); 
var cnvTop = parseInt(document.getElementById('myCanvas').style.top);

var pvcnv = document.getElementById("preview");
var pv = new jsGraphics(pvcnv);

var SubmitData = new Array();
var DrawData  = new Array();
var TempData = new Array();


jg.setPrintable(true);
var StrokeColor = "black";
var StrokeThickness = 3;
var x0 = 0;
var y0 = 0;
var txt = document.getElementById('TextString').value;
var sym = document.getElementById('Symbol').value;
var FontFamily = "sans-serif";		//sets font
var FontStyle = Font.PLAIN;		//Font.PLAIN, Font.BOLD, Font.ITALIC, Font.ITALIC_BOLD

function SetStrokeColor(c){
	StrokeColor = c;
}

var FontSize = 10;
function SetFontSize(n){
	FontSize = n;
}

var SymbolSize = 10
function SetSymbolSize(n){
	SymbolSize = n;
}

var MouseDown = false;
function SetMouseDown(){
	MouseDown = true;
}
function SetMouseUp(){
	MouseDown = false;
}

var DrawSwitch = false;
function SetDrawOn(){
	DrawSwitch = true;
}
function SetDrawOff(){
	DrawSwitch  = false;
}

function SetThickness(x){
	StrokeThickness = parseInt(x);
}

var TextSwitch = false;
var FreehandSwitch = false;
var SymbolPatternSwitch = false;

function SetSwitchesOff(){
	TextSwitch = false;
	FreehandSwitch = false;
	SymbolPatternSwitch = false;
}

var DrawTool = "Freehand";
function SetSwitchOn(n){	
	SetSwitchesOff();
	DrawTool = n;
	if(n=="Text"){
		TextSwitch = true;
	}else if(n=="Freehand"){
		FreehandSwitch=true;
	}else if(n=="SymbolPattern"){
		SymbolPatternSwitch = true;
	}
}

function SetStart(){
	x0 = mousex - cnvLeft;
	y0 = mousey - cnvTop;
	if(FreehandSwitch || SymbolPatternSwitch){
		Xposition.push(x0);
		Yposition.push(y0);
	}
}

function GetTxt(){
	txt = document.getElementById('TextString').value;
}

function GetSymbol(){
	sym = document.getElementById('Symbol').value;
}

function DrawText(canvas,x,y,txt,StrokeColor,FontSize){
	//draws a sting of text
	canvas.setColor(StrokeColor);
	var FontSizePx = FontSize + 'px';
	canvas.setFont(FontFamily,FontSizePx,FontStyle);
	var y1 = y - 10;

	if ((txt != null) && (txt != "")){
		canvas.drawString(txt, x, y1);
		canvas.paint();
		//store parameters in an array 
		if(canvas == jg){
			var Parameter = "Text" + "|" +  x + "|" + y + "|" + txt + "|" +  StrokeColor + "|" + FontSize;
			DrawData.push(Parameter);
			document.getElementById("DrawData").value = DrawData;
		}
	}
}
var Xposition = new Array();
var Yposition = new Array();

function GetXY(x,y){
var s = StrokeThickness;
var l = Xposition.length - 1;	//l = last position
var x = parseInt(x);
var y = parseInt(y);

	if ( (Math.abs(Xposition[l] - x) > s) ||  (Math.abs(Yposition[l] - y) > s)){
		Xposition.push(x);
		Yposition.push(y);
	}
}

function GetXYSym(x,y){
var s2 = SymbolSize/2;
var l = Xposition.length - 1;	//l = last position
var x = parseInt(x);
var y = parseInt(y);

	if ( (Math.abs(Xposition[l] - x) > s2) || (Math.abs(Yposition[l] - y) > s2)){
		Xposition.push(x);
		Yposition.push(y);
	}
}

function ClearXY(){
	Xposition = [];
	Yposition = [];
}

function ArrToStr(Arr,s){
	//convert array values to string
	var Str = "";
	for (n = 0; (n < Arr.length); n++)
	 {
		if (n > 0) 
		{
			Str += s; // each set of data separated by s
		}
		Str += Arr[n]; 
	}
 	return Str;
}

function StrToArr(Str,s){
	//converts string to an array
	var Arr  = Str.split(s);
	for (n=0;n<Arr.length;n++){
		Arr[n] = parseInt(Arr[n]);
	}
	return Arr;
}

function DrawFreehand(canvas,X,Y,StrokeColor,StrokeThickness){
	if (canvas == pv){
		jg.setColor(StrokeColor);
		jg.setStroke(StrokeThickness);
		if (X.length<2){
			var x = X[0];
			var y = Y[0];
				jg.drawLine(x,y,x,y);	//to draw a dot with single click
				jg.paint();
		}
		else if (X.length>1){
			var a = X.length - 2;
			var b = a + 1;
			var x1 = parseInt(X[a]);
			var y1 = parseInt(Y[a]);
			var x2 = parseInt(X[b]);
			var y2 = parseInt(Y[b]);
			jg.drawLine(x1,y1,x2,y2);
			jg.paint();
		}
	} else if (canvas == jg){
		canvas.setColor(StrokeColor);
		canvas.setStroke(StrokeThickness);
		if(X.length > 1){
			canvas.drawPolyline(X,Y);
			canvas.paint();
		}

		//store parameters in an array
		var StrX = ArrToStr(X,':');
		var StrY = ArrToStr(Y,':');

		var Parameter = "Freehand" + "|" +  StrX + "|" + StrY + "|" + StrokeColor + "|" + StrokeThickness;
		DrawData.push(Parameter);
		document.getElementById("DrawData").value = DrawData;
	}
}

function DrawSymbolPattern(canvas,X,Y,sym,StrokeColor,SymbolSize){
	if (canvas == pv){
		jg.setColor(StrokeColor);
		var SymbolSizePx = SymbolSize + 'px';
		jg.setFont(FontFamily,SymbolSizePx,FontStyle);
		
		if ((sym != null) && (sym != "")){
			var l = X.length - 1;	// l = last position
			var x = parseInt(X[l]);
			var y = parseInt(Y[l])-10;
			jg.drawString(sym, x, y);
			jg.paint();
		}
	}
	else if (canvas == jg){
		jg.setColor(StrokeColor);
		var SymbolSizePx = SymbolSize + 'px';
		canvas.setFont(FontFamily,SymbolSizePx,FontStyle);
		if ((sym != null) && (sym != "")){
			for (j=0; (j<X.length); j++){
				var x = parseInt(X[j]);
				var y = parseInt(Y[j])-10;
				canvas.drawString(sym, x, y);
			}
				canvas.paint();
			
			//store parameters in an array
			var StrX = ArrToStr(X,':');
			var StrY = ArrToStr(Y,':');
	
			var Parameter = "SymbolPattern" + "|" +  StrX + "|" + StrY + "|" + sym + "|" + StrokeColor + "|" + SymbolSize;
			DrawData.push(Parameter);
			document.getElementById("DrawData").value = DrawData;
		}
	}
}

function DrawMarker(){
	if(DrawSwitch){
		var x = parseInt(mousex - cnvLeft);	
		var y = parseInt(mousey - cnvTop);
		if(TextSwitch){
			DrawText(jg,x,y,txt,StrokeColor,FontSize);
		}
		else if(FreehandSwitch){
			DrawFreehand(jg,Xposition,Yposition,StrokeColor,StrokeThickness);
			ClearXY();
		}
		else if(SymbolPatternSwitch){
			DrawSymbolPattern(jg,Xposition,Yposition,sym,StrokeColor,SymbolSize);
			ClearXY();
		}
	}
}
		
function DrawPreview(){
	pv.clear();
	var x = parseInt(mousex-cnvLeft);
	var y = parseInt(mousey-cnvTop);
	if (MouseDown){
		if(TextSwitch){
			DrawText(pv,x,y,txt,StrokeColor,FontSize);
		}
		else if(FreehandSwitch){
			GetXY(x,y);
			DrawFreehand(pv,Xposition,Yposition,StrokeColor,StrokeThickness);
		}
		else if(SymbolPatternSwitch){
			GetXYSym(x,y);
			DrawSymbolPattern(pv,Xposition,Yposition,sym,StrokeColor,SymbolSize);
		}
	}
}


function RedrawImage(RedrawParameter){
		var DrawingType = RedrawParameter[0];
		if(DrawingType == "Text"){
			var x = parseInt(RedrawParameter[1]);
			var y = parseInt(RedrawParameter[2]);
			var txt = RedrawParameter[3];
			StrokeColor = RedrawParameter[4];
			FontSize = RedrawParameter[5];
			DrawText(jg,x,y,txt,StrokeColor,FontSize);
		}
		else if(DrawingType == "Freehand"){
			var X = StrToArr(RedrawParameter[1],':');
			var Y = StrToArr(RedrawParameter[2],':');
			StrokeColor = RedrawParameter[3];
			StrokeThickness = RedrawParameter[4];
			DrawFreehand(jg,X,Y,StrokeColor,StrokeThickness);
		}
		else if (DrawingType == "SymbolPattern"){
			var X = StrToArr(RedrawParameter[1],':');
			var Y = StrToArr(RedrawParameter[2],':');
			var sym = RedrawParameter[3];
			StrokeColor = RedrawParameter[4];
			SymbolSize = parseInt(RedrawParameter[5]);
			DrawSymbolPattern(jg,X,Y,sym,StrokeColor,SymbolSize);
		}
}


function Undo(){
	jg.clear();
	TempData = DrawData;
	DrawData = [];
	document.getElementById("DrawData").value = "";

	for (i=0; (i < (TempData.length - 1) ); i++){
		var Parameters = TempData[i].split("|");
		RedrawImage(Parameters);
	}
}

function RecallImage(){
	for (i=0; (i < TempData.length);i++){
		var Parameters = [];
		Parameters =  TempData[i].split("|");
		RedrawImage(Parameters);
	}
}

function Clear(){
	jg.clear();
	TempData = [];
	DrawData = [];
	SubmitData = [];
	document.getElementById("TempData").value = "";
	document.getElementById("DrawData").value = "";
	document.getElementById("SubmitData").value = "";
	Xposition = [];
	Yposition = [];
	txt = document.getElementById('TextString').value;
	sym = document.getElementById('Symbol').value;
}

function ClearExceptSubmit(){
	jg.clear();
	TempData = [];
	DrawData = [];
	document.getElementById("TempData").value = "";
	document.getElementById("DrawData").value = "";
	Xposition = [];
	Yposition = [];
	txt = document.getElementById('TextSymbol').value;
	sym = document.getElementById('Symbol').value;
}

function SubmitImage(){
	EncodeData();
}

function EncodeData(){
	var packed = "";  // Initialize packed or we get the word 'undefined'
	//Converting image data in array into a string
	for (i = 0; (i < DrawData.length); i++)
	 {
		if (i > 0) 
		{
			packed += ","; // each set of data separated by comma
		}
		packed += escape(DrawData[i]); 	//'escape' encodes dataset into unicode
	}
	document.getElementById("SubmitData").value = packed;  //stores image data into hidden form field
}

function DecodeData(){
	var query = document.getElementById("SubmitData").value;
	var data = query.split(',');
	for (i = 0; (i < data.length); i++)
	{
		data[i] = unescape(data[i]);
	}
	TempData = data;
	DrawData = [];
	document.getElementById("DrawData").value = document.getElementById("SubmitData").value;
	document.getElementById("SubmitData").value = "";
}

function ReloadImage(){
	DecodeData();
	RecallImage();
}

</script>
<!-- Drawing Code: End -->

</body></html>
Document Actions
Help us support OSCAR!

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

Demo Button

SEE OSCAR EMR IN ACTION


Subscribe Button

SUBSCRIBE TO DISCUSSION LIST

 (SEE ALL LISTS)

 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

 Join OCUS Button

 BECOME A MEMBER OF THE
OSCAR CANADA USERS SOCIETY
(OUR MISSION)

 

Help button

ACCESS THE ONLINE MANUALS
(OLD MANUALS)
(PAID SUPPORT)

 

Contact Us

Oscar Canada Users Society

#425 - 1917 West 4th Avenue

Vancouver  BC  V6J 1M7

OscarCanadaUserSociety@gmail.com