Time really flies working in Aeste, every day brings a new learning experience for me. You can say life is never dull in Aeste, because Dr. Shawn is going to bring us for movie again this coming Thursday, yay!

Moving to my work, as I have hinted last week, I was to implement JointJS with GPIO operations. All this would be to create graphics that the user can see, which brings to better user experience. For example, a digitalWrite(0, HIGH) would light up the first wire connected to the Gpio module. So, luckily for me, there is a jointJS example which closely relates to my task, which is the Logic Circuit Example. Even then, I fumbled on how the example really works due to the unfamiliar API used. But always remember, there is a console which you can play around to tinker with the demo.

For someone interested, I will briefly explain how the example works:

The INPUT is always emitting a positive signal.

_.each(graph.getElements(), function(element) {
// broadcast a new signal from every input in the graph
(element instanceof joint.shapes.logic.Input) broadcastSignal(element, signal);

the gates would then broadcast the signal to the output. The function responsible for the circuit lighting up would be

graph.on(‘change:signal’, function(wire, signal)

When you search the API for change:signal, you won’t find anything. The “signal” was manually set using

_.invoke(graph.getLinks(), ‘set’, ‘signal’, 0);

“change:signal” would return the ID of the wire and also its Signal value. Finally, the styling of the output is changed by a “toggleClass” function.

After understanding this, implementing it in my task was simple. I added a callback function in my “save” method in Gpio model. The purpose is to trigger an “emit()” each time a value is stored in the Gpio registers. As the user connects the wire in the schematic, the links can be obtained with

var obj = graph.getLinks()

which returns the object of the connected links in an array. Since “signal” is not included in the links, we have to set it manually as one of the properties. *Note that this is not the class attribute of the link but a special property, similar to or . The code would be :


Finally, we add a graph.on(‘change:signal’) to toggle the class of the wire.

Gpio signals


Further into jointJS
For my next task, I would need to integrate jointJS with the LCD module. This is where things get complicated. Instead of simply toggling the class, I would need to broadcast the signals from the ports and use those signals to generate a pattern on screen, which again uses jointJS. Apart frmo creating the LCD C++ library, I would also require a Javascript model to handle the instructions from the processor. Previously, I have created a simple Gpio model with “save” and “load” methods. LCD model would be more complex reason being it needs to execute the task correctly taking into consideration its previous state. Challenging as it is, I look forward to this task and also the movie 🙂


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.