Further works on LCD and Improving the Interface

For this week, I continued my work on the  LCD driver. There was much to be done to build it as similar to an actual model but I am making some progress. I will talk about the few enhancements which I have done.

Toggling of JointJS wires

This is done using the same concept as toggling the Gpio wires which I have done previously. Since the getBits() function I have used for Gpio is generic, I used it for the LCD as well. However, the SVG of LCD was modified a little because its ports were constructed in descending order, which result in a reversed array while using document.querySelectorAll to get the ports elements.

Cursor display

The cursor is created using SVG <rect>. It is used to indicate where the character will be created. To make the blinking effect of cursor, I planned to use querySelectorAll to change its opacity but then I stumbled on the jQuery toggle() method. Even obtaining the element is much easier using jQuery $(selectors). To make it blink, I just insert it in a setTimeout function that loops itself.

function cursorBlink(parent, ID){

var cursor = $(‘*[model-id=’+ID+’] .LCDCursor’);
parent.cursorTimeout = setTimeout(function(){
$(‘*[model-id=’+ID+’] .LCDCursor’).toggle();
cursorBlink(parent, ID);}
,500);

}

In the LCD object, I have created several properties, which include column and row position of the input character. This is used to determine the x and y position of the cursor. Some modifications were done to the code because now I am not simply displaying an input string but creating the character at the cursor position. When the cursor is moved to previous characters, the input should replace the existing character. This is achieved by slicing the string to two parts: before and after the replaced character and the input is sandwiched in between.

Improving the User Interface

Dr. Shawn stressed to me again and again how important is it to have an interface without buttons. The current one required me to press some buttons here and there, so my task was to end the buttons’ lives. I did some study on different events which can be used. There were CodeMirror events, jointJS events and also Javascript events. These were my ingredients to cook up a nice interface. This website provided some great insight in handling events which helped me a lot.

Playing with events were fun and I learned some useful things from it.

1.) Events can be stacked.

In my code, I have used events handlers to create another event handler. If not addressed, the code will be executed repeated times. I used .one() to create the handler which will only execute once, and occasionally .off() to remove events.

2.) setTimeout can be fun-ner

I find this code which was illustrated in the website really useful.

var textarea = document.querySelector(“textarea”);
var timeout;
textarea.addEventListener(“keydown”, function() {

clearTimeout(timeout);
timeout = setTimeout(function() {
console.log(“You stopped typing.”);
}, 500);

});

What this does is if the user stopped typing for half a second, the function in setTimeout will be triggered. This can be applied in my code where I wanted something to execute if the user is in idling mode, or if something was not changed for some time.

I will be putting this project on hold for some time as I am assigned to take over my colleague’s work starting from next week. Hopefully I can make it back in time to finish this beautiful LCD that I have come to love.