CSE Vision – Part 4

New Card Design

Thanks to the lockdown due to COVID-19, I managed to perform a much-needed upgrade to the CSE Vision application. I have now fully migrated the system to Python using the Django framework.

This should make it easier to add the newer features that I will hopefully be adding soon (integrating the app with data from ITS for one) as well as allowing for easier more streamlined project development. It’s of course always an advantage to just learn a new, relevant skill. You never know when it might give you access to great new opportunities.

The first major change I have made is the ability to search for a lecturer on the home page. This works using AJAX which thankfully was not too difficult to implement although it understandably took me longer to do than it would have in PHP (which is what I was using previously). The lecturer cards have also been completely redesigned. Take a look at it in action here:

You’ll notice the lecturer cards now also have two buttons added. One will send an email to the lecturer and the other will allow you to favourite a lecturer so that when you log in, you only see the lecturers that you care about. Oh and of course it is now fully responsive and should look good on most displays.

So yeah, in terms of general aesthetics I think it’s looking much better now. Now comes the hard work of integrating the app with all the user data.


CSE Vision – Part 4 – Time Table Integration


There has been no progress on CSE Vision for quite some time now but recently I have had a bit of time to work on it. I decided to work on trying to integrate the time table into the system. This would give everyone a good idea of where lecturers are in our department of CSE (Computer Systems Engineering) at TUT (Tshwane University of Technology) during the course of the day.

Our department is given a time table every semester in the form of an Excel workbook. It consists of every subject, lecturer, venue etc. in the FoICT (Faculty of Information and Communication Technology). I had to read all this data in from the workbook, sort through it and get any data about lecturers in our department from it. Most notably what time their classes start and end for all their subjects, and what venue they will be in during that time.

Once I had successfully managed to achieve that, I had to construct a database to store that information. Now that that is done, I can get to the “fun” bit!

Now every time a lecturer’s class starts, their availability status is automatically changed to “in class”. Yes, that is a new availability status. I decided that “in class” needed it’s own status because the “busy” status could also apply to when a lecturer is in their office and not just when they are physically in a class.

Here’s what the new status looks like at the kiosk in the lobby:

Lecturer in class

Lecturer In Class

Once the class passes its end time, the lecturer’s status reverts back to whatever it was before then.

I have also introduced yet another status. One for when I have no data about a lecturer’s status. i.e. They have not said yet what state they are in. To depict this they get a “beautiful” grey coloured card:


Lecturer Inactive

The system works well at the moment – I just need to cater for events such as public holidays and University holidays where the automatic updates should of course not occur.

This all needs to be done from the admin side which is still some way away from being completed!


CSE Vision – Part 2 (deployment and webcam feed)


Part 2 is now complete 🙂

Took a while due to nobody being here… Who needs holidays anyway? I mean really now. 😛

The website has been deployed to a local web server meaning that everyone can now access it from anywhere on any device:


Lecturers all have access to their accounts and are able to update their availability in real time:

Availability updater as seen from mobile

View from mobile phone

The PC in the lobby now starts up automatically after power failures and starts Chrome in full screen mode with the web page displayed.

Also, I have just installed a webcam and set up a live feed of the lobby. Useful for the secretary and for staff wanting to see who is waiting to see them. Have a peek below (it does not seem to update on Internet Explorer though – why would you be using IE anyway???):


Removed this firstly due to eyspyfx no longer existing and secondly due to privacy issues. The webcam feed is now only available on the local network and running at a much better frame rate.


When we get a USB extension cable we’ll move the camera to the corner of the room.

Up next:

Testing out the magnetic switches that will be attached to the doors. Yes they have arrived 🙂 :

Magnetic switch

I would also like to make my own web feed instead of using eyespyfx (will get a much better frame rate locally if I do that) but we’ll see if I get time for that.





CSE Vision – Part 1

First look at the project

Greetings earthlings,

This will be the first of multiple posts where I document the progress of CSE Vision.
CSE Vision is a project that myself and my colleague Jan Spies  at TUT – Computer Systems Engineering have been working on for a few days now.

CSE Vision

The idea for this project is to create a system that can be placed in the lobby of our offices to inform anyone who comes in of the following information regarding the lecturers in the department:

  • The status of our lecturers (we are going with AVAILABLE, BUSY and UNAVAILABLE for now)
  • Email address
  • Telephone extension
  • Office Number
  • Consultation times
  • Time table
  • A customizable message

The system should update in real time and allow the lecturers to modify all their information.

The end goal is to have magnetic switches installed on the lecturer doors that when activated or deactivated automatically change the status of the lecturers on the system.

Why CSE Vision?

This project aims to solve quite a few problems:

  • People (students and staff) are not aware of who is actually lecturing at our department
  • Trying to keep track of lectures can be a difficult task
  • Students entering the department looking for a certain lecturer and then asking every other lecturer they encounter if they know where said lecturer is (this gets pretty annoying)
  • Students knocking on lecturer’s doors when they are busy and cannot be interrupted (such as when setting up exam papers)
  • Our department offers great content but our physical location has nothing to set us apart in any way

Current Project Status

At the moment there is a login screen, an update page (where lecturers can update their status and information) and the actual lecturer viewer page. All info updates in real time as it is changed in the DB.

Technologies used:

  • A website made with PHP, HTML, Javascript, AJAX and the ever useful Bootstrap.
  • Database is MySQL

A screenshot of the project running on my low res laptop (click to see it enlarged – same as article’s featured image):

First look at the project

Initial setup

The different colours used for the 3 states are visible here. Names and emails that are too long to fit on the “cards” are made to scroll. The custom messages written by the lecturers also scroll.

We ended up displaying minimal information with an emphasis on the visibility of the photos and the status colour.

Deciding what to put on the cards as well as the actual design of the interface actually took longer than actually getting the functionality going… typical.


The idea is that users can click on the individual cards to get more information about the lecturers such as time tables etc.

The actual project will be running on an HD screen that will be able to display 5X5 rows of lecturers. This will be enough for the entire department.


What’s next?


We need to move the site from local to our web server.

We also of course still need to get the Arduino Ethernet boards running and install the switches on the doors.

Get a Fit PC 2 running that can display the website in the lobby.

We then also need to attach the screen to the glass portal.