This article is to demonstrate a human computer interaction system with a calculator example.
I am trying to reduce the GUI interface and make a human command mode to the system.Many of the researchers think that human speak recognition is the basic step of Human Computer Interaction (HCI). But I don't think so,because human speak recognition is a gigantic problem.
Because the pronunciation and volume variation of each persion is varying and the slang are also different.
But the easy way to give HCI commands to computer is by text medium.That is we can simply type the commands and execute the command.
Here you can see the example HCI calculator:-
This is a basic calculator with addition,subtraction,multiplication and division. But odd to regular calculators you can't see digit or operator buttons instead a 'Enter command' box and 'Calculate' button. When you write commands in the box and click calculate button the result will display in the result text box.
The command should have one operator and two operands.
My first command is ' add 4 7 ' . It mean find the sum of 4 and 7.
You can see the screenshot here:-
But the real beauty is where the command 4 add 7 also give the same result.
Then 4 7 add give the same result.
addition 4 7 and 4+7 has the same result
prod 4 3 give the result 12.
The clean , cls commands clear the results.
Yes, more flexible than GUI and it is more related to real life communication.
These are the commands I included in the calculators vocabulary.
You can see the code here:
Hope that you enjoy this code.More stuff on artificial intelligence and HCI is coming soon.Keep reading....
I am trying to reduce the GUI interface and make a human command mode to the system.Many of the researchers think that human speak recognition is the basic step of Human Computer Interaction (HCI). But I don't think so,because human speak recognition is a gigantic problem.
Because the pronunciation and volume variation of each persion is varying and the slang are also different.
But the easy way to give HCI commands to computer is by text medium.That is we can simply type the commands and execute the command.
Here you can see the example HCI calculator:-
HCI Calculator | |
| Enter command | |
| Result | |
This is a basic calculator with addition,subtraction,multiplication and division. But odd to regular calculators you can't see digit or operator buttons instead a 'Enter command' box and 'Calculate' button. When you write commands in the box and click calculate button the result will display in the result text box.
The command should have one operator and two operands.
My first command is ' add 4 7 ' . It mean find the sum of 4 and 7.
You can see the screenshot here:-
But the real beauty is where the command 4 add 7 also give the same result.
Then 4 7 add give the same result.
addition 4 7 and 4+7 has the same result
prod 4 3 give the result 12.
The clean , cls commands clear the results.
Yes, more flexible than GUI and it is more related to real life communication.
These are the commands I included in the calculators vocabulary.
| Sum | Difference | Product | Quoetient | Clear |
| add | difference | product | quotient | clear |
| addition | diff | prod | div | clean |
| plus | minus | multiply | division | empty |
| + | - | * | / | cls |
| clrscr |
You can see the code here:
calc.html
<html>
<body>
<table>
<tr><td colspan="2" align="center"><h3>HCI Calculator</h3></td></tr>
<tr>
<td valign="top">
Enter command
</td>
<td>
<textarea cols="50" rows="10" id="command"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td align="center">
<input type="button" value="Calculate" onclick="evaluateComm();"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
Result
</td>
<td>
<input type="text" id="result"/>
</td>
</tr>
</table>
<script type="text/javascript">
var verb=Array();
verb[0]=Array('sum','add','addition','plus','+');
verb[1]=Array('difference','diff','minus','-');
verb[2]=Array('product','prod','multiply','*');
verb[3]=Array('quotient','div','division','/');
verb[4]=Array('clear','clean','empty','cls','clrscr');
function evaluateComm()
{
var command=new String(document.getElementById('command').value);
if(command=='') return;
var comm=Array();
var i,flag=0,op_index=0;
command=command.replace('+',' plus ');
command=command.replace('-',' minus ');
command=command.replace('*',' prod ');
command=command.replace('/',' div ');
comm=command.trim().split(/\s+/);
for(i=0;i<comm.length;i++)
{
res=analyseOne(comm[i]);
if(res>=0)
{
flag=1;
op_index=i;
break;
}
}
if(flag==1)
{
if(res!=4&&comm.length<3)
{
alert('Two operands and one operator required!!!!');
return;
}
var op=getOtherOperand(op_index);
var output;
switch(res)
{
case 0:
output=Number(comm[op[0]])+Number(comm[op[1]]);
break;
case 1:
output=Number(comm[op[0]])-Number(comm[op[1]]);
break;
case 2:
output=Number(comm[op[0]])*Number(comm[op[1]]);
break;
case 3:
output=Number(comm[op[0]])/Number(comm[op[1]]);
break;
case 4:
document.getElementById('result').value='';
document.getElementById('command').value='';
return;
break;
}
document.getElementById('result').value=output;
}
else
{
alert('Command does not match my occabulary.Please check spellings');
return;
}
}
function getOtherOperand(res)
{
var arr=Array();
switch(res)
{
case 0:
arr=Array(1,2);
break;
case 1:
arr=Array(0,2);
break;
case 2:
arr=Array(0,1);
break;
}
return arr;
}
function analyseOne(str)
{
if(str=='') return -1;
var i,j,flag=0,fflag=0;
for(i=0;i<verb.length;i++)
{
for(j=0;j<verb[i].length;j++)
{
if(verb[i][j]==str.toLowerCase())
{
flag=1;
break;
}
}
if(flag==1){ fflag=1;break;}
}
if(fflag==1)
return i;
else
return -1;
}
</script>
</body>
</html>
<html>
<body>
<table>
<tr><td colspan="2" align="center"><h3>HCI Calculator</h3></td></tr>
<tr>
<td valign="top">
Enter command
</td>
<td>
<textarea cols="50" rows="10" id="command"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td align="center">
<input type="button" value="Calculate" onclick="evaluateComm();"/>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
Result
</td>
<td>
<input type="text" id="result"/>
</td>
</tr>
</table>
<script type="text/javascript">
var verb=Array();
verb[0]=Array('sum','add','addition','plus','+');
verb[1]=Array('difference','diff','minus','-');
verb[2]=Array('product','prod','multiply','*');
verb[3]=Array('quotient','div','division','/');
verb[4]=Array('clear','clean','empty','cls','clrscr');
function evaluateComm()
{
var command=new String(document.getElementById('command').value);
if(command=='') return;
var comm=Array();
var i,flag=0,op_index=0;
command=command.replace('+',' plus ');
command=command.replace('-',' minus ');
command=command.replace('*',' prod ');
command=command.replace('/',' div ');
comm=command.trim().split(/\s+/);
for(i=0;i<comm.length;i++)
{
res=analyseOne(comm[i]);
if(res>=0)
{
flag=1;
op_index=i;
break;
}
}
if(flag==1)
{
if(res!=4&&comm.length<3)
{
alert('Two operands and one operator required!!!!');
return;
}
var op=getOtherOperand(op_index);
var output;
switch(res)
{
case 0:
output=Number(comm[op[0]])+Number(comm[op[1]]);
break;
case 1:
output=Number(comm[op[0]])-Number(comm[op[1]]);
break;
case 2:
output=Number(comm[op[0]])*Number(comm[op[1]]);
break;
case 3:
output=Number(comm[op[0]])/Number(comm[op[1]]);
break;
case 4:
document.getElementById('result').value='';
document.getElementById('command').value='';
return;
break;
}
document.getElementById('result').value=output;
}
else
{
alert('Command does not match my occabulary.Please check spellings');
return;
}
}
function getOtherOperand(res)
{
var arr=Array();
switch(res)
{
case 0:
arr=Array(1,2);
break;
case 1:
arr=Array(0,2);
break;
case 2:
arr=Array(0,1);
break;
}
return arr;
}
function analyseOne(str)
{
if(str=='') return -1;
var i,j,flag=0,fflag=0;
for(i=0;i<verb.length;i++)
{
for(j=0;j<verb[i].length;j++)
{
if(verb[i][j]==str.toLowerCase())
{
flag=1;
break;
}
}
if(flag==1){ fflag=1;break;}
}
if(fflag==1)
return i;
else
return -1;
}
</script>
</body>
</html>
Hope that you enjoy this code.More stuff on artificial intelligence and HCI is coming soon.Keep reading....
