Skip to content

Commit

Permalink
added on-screen keyboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@KP1533TM2
KP1533TM2 committed Mar 8, 2016
1 parent 2abdd16 commit 76ea6f6
Show file tree
Hide file tree
Showing 13 changed files with 926 additions and 244 deletions.
139 changes: 139 additions & 0 deletions gui.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
svgNS = "http://www.w3.org/2000/svg";

function composeGUI() {
var root = createSVG(640,480,"background-color:gainsboro");

createButtonsOn(root);

return root;
}

function createSVG(w,h,style) {
var svg = document.createElementNS(svgNS, "svg");
svg.setAttributeNS(null,"width", w);
svg.setAttributeNS(null,"height", h);
svg.setAttributeNS(null,"style", style); // "background-color:gainsboro"
return svg;
}

function createKeyText(color, size, x, y, text) {
var txt = document.createElementNS(svgNS, "text");
txt.setAttributeNS(null,"x", x);
txt.setAttributeNS(null,"y", y);
txt.setAttributeNS(null,"fill", color);
txt.setAttributeNS(null,"font-family","Arial");
txt.setAttributeNS(null,"text-anchor","middle");
txt.setAttributeNS(null,"font-size",size);
var txtNode = document.createTextNode(text);
txt.setAttribute("unselectable", "on");
txt.setAttribute("class", "unselectable");
txt.appendChild(txtNode);
return txt;
}

function createButtonsOn(svg) {
for(var keyKey in faceKeys) {
var key = faceKeys[keyKey]; // no pun intended =)

var g = document.createElementNS(svgNS, "g");
g.setAttributeNS(null,"cursor","pointer");
g.setAttributeNS(null,"id", keyKey);
g.setAttributeNS(null,"class", "mk85btn");

switch(key.type) {
case 0: // small white thing with labels above
{
var rect = document.createElementNS(svgNS, "rect");
var blockType = blockTypes[key.type];

var x = blockType.off_x+blockType.mul_x*(key.posCode&0xf);
var y = blockType.off_y+blockType.mul_y*((key.posCode>>4)&0xf);

rect.setAttributeNS(null,"x",x);
rect.setAttributeNS(null,"y",y);
rect.setAttributeNS(null,"width", 25);
rect.setAttributeNS(null,"height", 15);
rect.setAttributeNS(null,"fill", "white");
rect.setAttributeNS(null,"stroke", "black");
svg.appendChild(rect);
var txt = document.createElementNS(svgNS, "text");

var colorOn = (typeof key.lblOnColor != 'undefined')?key.lblOnColor:"black";
var colorAbove = (typeof key.lblAboveColor != 'undefined')?key.lblAboveColor:"red";

g.appendChild(rect);

if(typeof key.lblOn != 'undefined')
g.appendChild(createKeyText(colorOn,11, x+25/2, y+12, key.lblOn));
if(typeof key.lblBelow != 'undefined')
svg.appendChild(createKeyText("blue",7, x+25/2, y+23, key.lblBelow));
if(typeof key.lblAbove != 'undefined')
svg.appendChild(createKeyText(colorAbove,7, x+25/2, y-3, key.lblAbove));
if(typeof key.lblRight != 'undefined')
svg.appendChild(createKeyText("black",7, x+30, y+10, key.lblRight));

break;
}
case 1: // numpad buttons
{
var rect = document.createElementNS(svgNS, "rect");
var blockType = blockTypes[key.type];

var x = blockType.off_x+blockType.mul_x*(key.posCode&0xf);
var y = blockType.off_y+blockType.mul_y*((key.posCode>>4)&0xf);

var width = 25;
if(typeof key.doubleWidth != 'undefined')
width += blockType.mul_x;

var color = 'gray';
if(typeof key.btnColor != 'undefined')
color = key.btnColor;

rect.setAttributeNS(null,"x",x);
rect.setAttributeNS(null,"y",y);
rect.setAttributeNS(null,"width", width);
rect.setAttributeNS(null,"height", 18);
rect.setAttributeNS(null,"fill", color);
rect.setAttributeNS(null,"stroke", "black");
rect.setAttributeNS(null,"id", keyKey);
svg.appendChild(rect);
var txt = document.createElementNS(svgNS, "text");

var colorOn = "white";
var colorAbove = (typeof key.lblAboveColor != 'undefined')?key.lblAboveColor:"red";

g.appendChild(rect);

if(typeof key.lblOn != 'undefined')
g.appendChild(createKeyText(colorOn,11, x+width/2, y+12, key.lblOn));
if(typeof key.lblBelow != 'undefined')
svg.appendChild(createKeyText("blue",7, x+25/2, y+23, key.lblBelow));
if(typeof key.lblAbove != 'undefined')
svg.appendChild(createKeyText(colorAbove,7, x+25/2, y-3, key.lblAbove));
if(typeof key.lblRight != 'undefined')
svg.appendChild(createKeyText("black",7, x+30, y+10, key.lblRight));

break;
}
default:
{
console.log("unsupported type");
break;
}
}
// bind functions
/* g.setAttributeNS(null,"onmouseup","keyRelease(event)");
g.setAttributeNS(null,"onmouseout","keyRelease(event)");
g.setAttributeNS(null,"onmousedown","keyPress(event)");*/

g.addEventListener("touchstart", GUIKeyPress, false);
g.addEventListener("touchend", GUIKeyRelease, false);

g.setAttributeNS(null,"onmouseup","GUIKeyRelease(event)");
g.setAttributeNS(null,"onmouseout","GUIKeyRelease(event)");
g.setAttributeNS(null,"onmousedown","GUIKeyPress(event)");

svg.appendChild(g);
}
}
56 changes: 56 additions & 0 deletions gui_events.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
var supportsVibrate = "vibrate" in navigator;

var GUIKeysPressed = [];
var GUIKeysPressedMax = 2;

var KBKeysPressed = [];
var KBKeysPressedMax = 10;

window.addEventListener('keydown', KBKeyPress, true);
window.addEventListener('keyup', KBKeyRelease, true);

function keyByCode(keyCode) {
for (var key in keyboardMapping)
if(keyboardMapping[key] === keyCode) return key
return undefined;
}

function KBKeyPress(evt) {
evt.preventDefault();
var key = keyByCode(evt.keyCode);
if(typeof key == 'undefined') return;
// find the key in mapping
if((KBKeysPressed.indexOf(key) == -1)&&(KBKeysPressed.length < KBKeysPressedMax)) {
KBKeysPressed.push(key);
console.log(KBKeysPressed);
}
}

function KBKeyRelease(evt) {
evt.preventDefault();
var key = keyByCode(evt.keyCode);
if(typeof key == 'undefined') return;
if((KBKeysPressed.indexOf(key) != -1)&&(KBKeysPressed.length > 0)) {
KBKeysPressed.splice(key, 1);
console.log(KBKeysPressed);
}
}

function GUIKeyPress(evt) {
var key = evt.currentTarget.id;
evt.preventDefault();
if(supportsVibrate) window.navigator.vibrate(100);
if((GUIKeysPressed.indexOf(key) == -1)&&(GUIKeysPressed.length < GUIKeysPressedMax)) {
GUIKeysPressed.push(key);
}
console.log(GUIKeysPressed);
}

function GUIKeyRelease(evt) {
evt.preventDefault();
var key = evt.currentTarget.id;
if((GUIKeysPressed.indexOf(key) != -1)&&(GUIKeysPressed.length > 0)) {
GUIKeysPressed.splice(key, 1);
}
console.log(GUIKeysPressed);
}
75 changes: 75 additions & 0 deletions helper_functions.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
var loadCounter = 1;
function checkIfMemoryLoaded() {
if(loadCounter>0) {
loadCounter--;
} else {
// If everything is loaded then finish all the preparations and kick off
glueCPU();
LCD.timerCallback = function () {
if((KBKeysPressed.length>0)||(GUIKeysPressed.length>0))
{
console.log("clock on");
MK85CPU.cpuctrl |= 0x0400;
}
for(var steps = 0; steps < 150; steps++)
{
MK85CPU.step();
}
}
LCD.animate(10);

}
}

function loadBinary(urlBIN, callback) {
var oReq = new XMLHttpRequest();
oReq.open("GET", urlBIN, true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if (arrayBuffer) {
console.log(urlBIN, "loaded!");
if(typeof callback == 'function') callback(arrayBuffer);
};
};
oReq.send(null);
}

var PP = 0; // CPU parallel port for now

// Attach CPU to everything else
function glueCPU() {
MK85CPU.readCallback = function (addr) {
if((addr&0xfffe)==0x0100) return (keysRead(PP)>>((addr&1)?8:0))&0xff;
if(addr<0x8000) return ROM[addr&0x7FFF];
if((addr>=0x8000)&&(addr<0x8800)) return RAM[addr&0x7FFF];
// keyboard column regs
return 0;
};

MK85CPU.writeCallback = function (addr, byteVal) {
if((addr>0x7f)&&(addr<0xe0)) { // 0x80...0xDF is LCD contoller memory
LCD.videoMemory[addr&0x7f] = byteVal;
return;
}
if(addr==0xe0) { // 0xe0 - LCD cursor register
LCD.cursorReg = byteVal;
return;
}
if(addr==0x102) { // 0x102 - keyboard rows
PP &= 0xff00;
PP |= byteVal;
return;
}
if(addr==0x103) { // 0x102 - keyboard rows
PP &= 0x00ff;
PP |= byteVal<<8;
return;
}
if((addr>=0x8000)&&(addr<0x8800)) {
RAM[addr&0x7FFF] = byteVal;
return;
}
return;
};
}
Loading

0 comments on commit 76ea6f6

Please sign in to comment.