DEV Community: Javier Escobar

My third Side Project was my BCompSc Thesis: Remote Operating Theater

Javier Escobar — Wed, 20 May 2020 02:45:07 +0000

Or, in spanish, "Sistema Quirófano Remoto".

Yes, my BCompSC thesis was my side project because I started a full-time remote job by the end of college and I only could be able to work on my thesis at night and on weekends. I had a tough yet very creative tutor and this was his idea:

"So, we have these analog video recording cards that we can attach to PCI ports and record the video signal of cameras and devices like laparoscopes during a surgical practice. I wonder if we can transmit it somewhere else with high quality so another surgeon could give advice or even teach remotely".

Yes, PCI, not even PCI Express. It was 2008 and there was no money for advanced hardware like that. By that year, commercial internet was also really slow in this corner of the world. 1 Mbps was considered extremely fast and there was no such thing as simultaneous HQ video with that speed.

"But, do you know what Internet 2 is? We have that type of Internet here and so other buildings in the city including the Urology Institute. With Internet 2 you can connect Valencia (Venezuela) and Valencia (Spain) with 56 Mbps and imperceptible delay".

Woohoo! I imagined a new world with that speed! But soon a realized that it isn't commercial so I wouldn't find YouTube on it. 😞

"So your duty, if you accept it, is to build some kind of software where you could transmit and let doctors assist, and review, remote surgeries letting them capture video signal from at least 4 cameras or equipment at the same time, hold video conferencing, and accessible through a web browser"

It took me exactly 12 months to complete what was proposed. Mainly because the lack of time, and also testing phase took longer than what was expected because surgeries can't be scheduled based on my free time so I had to quit my job by the end of the project if I was willing to get my BCompSc degree by 2010.

I also wrote a paper, with my tutor, about this awesome project and you can get it here.

Deciding The Stack

Backend

PostgreSQL: I wanted so bad to use MySQL, but public university encourage the use of PostgreSQL for reasons that nobody knew and nobody knows. NoSQL was also an option but I had 0 expertise on that field so I played it safe. A database was needed to store user and surgery information so can be acceded later to review a past procedure for teaching or reviewing purposes.
PHP: Also, playing safe. My job was about building Drupal apps. So, PHP was the smart choice.

Middleware

Media Server: Well, you just can't stream video without something in the middle that could let you watch live or resume a video stream. You need a media server and there were a few options.

The following benchmark exposes an assessment we made in order to select which media server will be used. The were some open source solutions like Red5 and Wowza but Wowza documentation was so poor we couldn't test it without failing on every attempt.

	Wowza	Red5	FMS
Multiplatform	Yes	Yes	Yes
Open Source	No	Yes	No
Performance	Limited	Limited	High
Codebase	Java	Java	C++
Documentation	Not available	Poor	Good
Has RTMP	Partial	Yes	Yes
Supported Video Codecs	FLV, H.264	FLV	FLV, H.264
Supported Audio Codecs	FLV, MP3, AAC	FLV, MP3	FLV, MP3, AAC
AMF0 and AMF3 Support	Partial	Partial	Yes
Clustering	Yes	Yes	Yes
Server Side Programming	JS and limited AS3	JS	AS3
Streaming	Yes	Yes	Yes
Shared Objects	Partial	Partial	Yes

Red5 worked pretty fine with low res videos but it couldn't handle 480p using OnVP6. On the other hand, we had Flash Media Server. Written in C++, it was fast and reliable even with resolutions like 720p (remember, 2008 and PIV computers). The free license of Flash Media Server only was able to handle up to 10 streams at the time and it was enough!

Also, streaming isn't the only thing it was able to handle, also Shared Objects so apps like realtime chat and real time whiteboards were possible to implement with such middleware.

AMFPHP: this middleware library was responsible for serializing AS3 objects so they could be transferred from and to the backend. It still exists on GitHub. But why am I mentioning Action Script here? Well, you'll find why in the frontend section.

Frontend

Analogous to the media server, we benchmarked 4 scenarios or technologies HTML & JS, Laszlo, Silverlight, and Flex. I won't show that table here, it is bigger than the other one and I don't want to annoy you (more...) 🙈

Before Angular, React or VueJS, there was something called Rich Internet Applications in a world where HTML5 & ECMAScript were not able to deliver desktop like solutions in your browser. Java Applets were already obsolete and Adobe and Microsoft decided to implement runtimes to fill this gap.

Adobe was saying that they Open Sourced an Object-Oriented framework (Adobe Flex) that would let you write amazing apps, using a language very similar to Java (Yes, Action Script 3) and style them using its API or CSS. Also, it would integrate flawlessly with Flash Media Server so we got a winner!

The following code shows how we use AMFPHP inside one of the classes of the project written in AS3. Follow the comments to understand it better.

package assets {
  import flash.events.*;
  import flash.net.NetConnection;
  import flash.net.Responder;

  public class PGDBConexion {
    //The file gateway.php has a class with a set of public methods prepared to receive an object
    private var gateway:String = "http://127.0.0.1/amfphp/gateway.php";
    private var conexion:NetConnection = new NetConnection();

    public function PGDBConexion() {         
      this.conexion.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
      this.conexion.connect(this.gateway);
    }

    private function netStatusHandler(event:NetStatusEvent):void {
      ...
    }

     public function call(funcion:String, responder:Responder):void {
       //The variable 'funcion' is the name of the method inside the php class in gateway.php
       //and responder is the callback function that will receive the response
       this.conexion.call(funcion, responder);
     }
  }
}

And when we need to call a particular endpoint or method we can do something like this

package assets {
  ...
  import flash.net.Responder;

  public class SelectorStream extends Panel {       
    ...     
    private var conexion:PGDBConexion = new PGDBConexion();
    private var responder:Responder;
    ...

    public function SelectorStream() {
      super();  
      ...       
      this.responder = new Responder(onResult, onFault);
      //This is were we invoke the getStreams method from gateway.php
      this.conexion.call("pgDB.getStreams", responder);
    }

    private function onResult(data:Object):void {
      //The object 'data' will contain the response already serialized to be used in AS3
      ...   
    }       

    private function onFault(fault:Object):void {
      ...
    }
  }
}

Formal Software Engineering

Let's remember this was a formal software engineering challenge so we had to documentate professionally everything so I'm sharing a few diagrams that describe the overall architecture of the solution. I used UML, of course. 🤓

Use Case Diagram

This is the Use Case diagram of one of the three possible roles that a user could have inside the system.

Entity-Relationship Diagram

Class Diagram

This is a small subset showing only two types of relationships and methods

Deployment Diagram

Final words

This Side Project was software engineering as its finest for me!

I did love this project, I researched, I tested, I delivered small increments using the MVP approach without knowing it was called that way.
I did something nobody has done before and that system is still running on a Sun Server at the Urology Institute here, in Valencia, Venezuela.

This was my last side project until 2020, where I started two new side projects. Now I have 10 additional years of experience and technology has changed. I'm willing to share more side projects with you guys!

Unlike the other ones, I do have the source code and binaries of this gem. 💎

Thanks for reading! And if you like it, then like it, clap it or share it! 😜

My second Side Project: Monopoly Game

Javier Escobar — Tue, 19 May 2020 01:07:35 +0000

This is the second post of a series that will tell a story of my evolution as a programmer. After Visual Basic, I coded in C no-stop for about two years.

It happened again, I could not find the code, screenshots or the binaries of these projects. ☹

I was freshmen in college when I was introduced to the C programming language, the one that was taught by the moment before learning C++ or Java in the advanced courses.

Learning C was not as straightforward as I though... I had a hard time dealing with malloc, calloc and pointers. But I got the trick eventually.

I also managed to be placed as 2nd in a programming marathon. The winners were from advanced courses.

At summer vacations, I wanted to challenge myself coding something cool and then I remembered my algorithm teacher told us we can do anything with C. Everything is C, our PlayStation games, Linux and Windows so if you get to learn C in depth, you could be able to do amazing stuffs.

A Monopoly Game

I build a console game. The famous Monopoly/Tourist game:

These were the features and challenges that this game supposed to me:

Game logic: I had to learn the basics of gaming. A game is usually an infinite loop asking for input, making random or programmed logic, and constantly giving a motivation to continue playing. A do-while loop and a bunch of stuff inside.
Choosing between console or 3D: At the time, I was experimenting with the Allegro gaming library. I tried every sample and tutorial and managed eventually to make a few scenes. I remember I got to render a Yu-Gi-Oh pyramid using textures and background sound. And I thought that maybe I could do a 3D version of the Monopoly game. But before that, I'd make the console version to learn and limit the basics and then port it to a 3D version. Challenge accepted!
The monopoly version: There must be hundreds of versions of the game so I implemented a customizable one. The properties, currency denomination, limits, prizes, cards, and everything else could be loaded from a configuration file. I built a common Caracas (Venezuela) edition of the game with Bolivares as its currency.
Real Artificial Intelligence: And by real AI, I meant making the game the less predictable and challenging possible with real random number generation for the dice 🎲 and cards. Also, I implemented some logic to try to make the game the most perpetual I could evaluate if a card could give a player far more advantage over the other players. So before flipping it, the game could try to flip another one less 'benevolent'. 🤭
Stunning graphics: Those were not that stunning, but they were great! I used the stdio.h from Borland C which had the ability to print colored text in the console so the dice, the player figurines, and the board would change among blue 💙, red ❤, green 💚 or yellow 💛 depending whose player is its turn. In order to provide the maximum resolution possible using only ASCII code, I managed to render only the portion of the board where the player was passing through.
The 3D version: I could not complete the 3D version. I manage to code the dice, the board and the moving figurines but I needed time to add the game logic and design the money and cards bitmaps. College started again, and I had to deal with a lot of math, statistics and course projects. I also got a boyfriend so when I was not studying, I was enjoying his company. 👨🏽‍🤝‍👨🏽🌈

By the time I was very happy with C. I thought it was pretty awesome and that I could build better apps than I could with Visual Basic. I felt like I were coding the Matrix! 🤣

I knew the existence of C++ and got some ideas of what OOP actually was but I knew I would learn it in the next courses so I took my time to master C properly before that.

Thanks for reading! I may update this post later with references and images of what I was talking about.

My first Side Project: Windows Desktop Assistant

Javier Escobar — Mon, 18 May 2020 00:00:35 +0000

This is the first post of a series that will tell a story of my evolution as a programmer through all the side projects I've made since I started coding when I was 13, 20 years ago, in Basic.

I spent hours trying to find code, binaries, or screenshots of the older ones but they were lost maybe once when I cleaned my email or on those old desktops PCs which died without backups. Hopefully, I'll transmit my passion and images through my words. Even when I am not a native English speaker.

WinQSpeaker

My first side project was a desktop assistant. I named it WinQSpeaker because it was a Windows App, which let you quickly perform common and repetitive tasks, and it could talk! Or at least, speak a few words 🤣

I was in 10th grade when I asked my father if he could buy me a programming book. I saw one in the library called "Building Solutions with Visual Basic .Net". At that time, I was learning Visual Basic 6.0 at school. That was the first time I coded something bigger than a Hello World or 2 + 2.

The teacher did not teach us what is Object Oriented Programming, neither the book. But I learnt about variables, functions and methods, and because of that it is why my code usually was everything in one file, a unique class for the whole project.

At vacations, I managed to read the entire book without coding anything and I was really anxious to program everything but I didn't have a Windows Computer nor Internet.

Then, my dad with hard work was able to bough me a computer, an AMD Athlon, but he could not afford a Visual Studio .Net License. I was talking to my teacher about that and he told me "take this, it is not Visual Studio .Net, but it is the standard version of Visual Studio 6.0. You can use the license; it is legal for teaching purpose"

With my new computer, basic knowledge of Visual Basic, and the dial up internet account of my neighbor, I read and try so many tutorials and one day I discovered the Microsoft Text To Speech API which was used by MS Agent API. Do you remember Clippo and Merlin?

So, these were the features this app had:

System tray icon. The app was placed in the system tray to save space in the task bar. With contextual menu, you could launch it to the windowed version.
Always on top and transparency. As an assistant, it should not interrupt what you are doing but some functions only could be accessed by the main window so you could activate always on top with transparency.
Music Player and smart Playlist. The first function I added to the app was to locate music anywhere on my PC, index it, and analyze which song I like the most based on replays. It used Music Player API and the playlist algorithm was implemented by me.
Cartoonish. I edited every single element of the window version, and icons, with paint. So the progress bar of the music player, the slider of the bar, the buttons, everything was images edited pixel by pixel by me. I wanted to incorporate skin functionality like WinAmp used to but I remembered I could not finish that feature.
Speech recognition and text to speech (TTS) using MS APIs at the moment. It was a hidden feature embedded in Windows 98 SE, ME and XP. Voice recognition was there at least in English and worked pretty fine. I used the text to speech API through MS Agent so an animated character responds with phrases like "Ok", and ask "What do you want to do?". A modern version of the TTS API can be found here.
Command Library. Any command that you could execute through Win + R. This library let you organize your favorite commands and named it, or associate a phrase to launch them. At that moment, it was hard for me to implement an smart voice recognition system to understand natural speech to choose which action execute. The most advanced configuration I did was to index the music songs every time it finds a new one so you could say "Play Baby One More Time" and it would understand. But if you say "I want to listen Baby One More Time" it could not do anything. A modern version of the Microsoft Speech recognition API can be found here.

What did I learn

I can't believe that I did all that without knowing OOP, I only followed tutorials and I realized that after assigning something with the word "new" to a variable, that variable would show me a universe of options after placing the dot "." immediately after typing it. I didn't know it was the IDE helping me. Didn't know also what was an IDE 🤣.

I remember I implemented the bubble-sort algorithm without knowing it was called bubble-sort when I tried to order alphabetically the items of the playlist.

And also, it was the first time I started to think in optimizing stuffs because of redundant processes that I did not need to run constantly. Or freeing memory after it is no longer needed through emptying the auxiliary arrays.

I worked in this side project for about two years, then I went to college and learnt C, C++, Java and PHP, so I was formally introduced to OOP.

I haven't use VB again since then but I remember it with some nostalgia.

Thanks for reading! I may update this post later with references and images of what I was talking about.