CSE Vision – Part 4

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

Sawubona!

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

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 3 (Desktop Application)

Aloha,

The system has been in use for a few weeks now and it turns out it’s pretty inconvenient for the staff to use.
Even I didn’t feel like logging into the site every time I wanted to change my status.

Solution (well at least before we get the magnetic switches installed):

Make a desktop app that can be set to run at start-up and remembers your username and password so that you don’t have to log in all the time.

Here’s what it looks like:

Video of it in action:

So to use it you simply enter your username and password and then click one of the three coloured buttons to change your status.
You can also change the message displayed to the students directly from the app by entering it into the text box and then clicking the “Update” button.

It was surprisingly easy to do. I did it in Visual Studio 2013 in C#.

Below is some of the code used:

     url = "http://ictcms.tut.ac.za/censored.php?message=0&&status="+state.ToString()+"&&staffNo=" + username.Text + "&&pwd=" + password.Text;

                HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
                WebResponse response = request.GetResponse();
                StreamReader reader = new StreamReader(response.GetResponseStream());
                string responseText = reader.ReadToEnd();
                infoLabel.Text = responseText;
                string passText = password.Text;
                //encrypt pwd

So essentially C# can perform a WebRequest with a specified URL to which I append the variables that I need to send over to the web page.
I then get a response from the page which is streamed into the StreamReader and displayed onto a label on the form.
Thereafter I encrypt the password before storing it along with the username.

I simply store this into a file. This file is then read from when the form is loaded and its contents then populates the username and password fields.

Here is a nice tutorial on basic file handling in C#:
https://msdn.microsoft.com/en-us/library/8bh11f1k.aspx

The WebRequest used above relies of course on you having a php file that can get the data from that URL and store it into the database.

That is simply done as seen here (the GET part):

$staffNo = $_GET['staffNo'];
$status = $_GET['status'];
$pwd = $_GET['pwd'];
$message = $_GET['message'];

CSE Vision – Part 2 (deployment and webcam feed)

Aloha,

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:

http://ictcms.tut.ac.za/csevision/view.php

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???):

EDIT(2016):

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 🙂 :

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

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):

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.

Random Draw

First experimental type thing complete!

–Click To See Random Draw–

I decided to mess around with the random function in Processing and see just how random it is and if it is “equally” random (you’ll see what I mean just now).

User Interaction

I wanted to make it slightly more interesting by allowing the user to affect the graphical output without affecting the purpose of the sketch.
Users can use the mouse scroll wheel to dynamically change the size of the circles that are drawn to screen.
They can also click on the “Change Mode” button to change how the circles are drawn to the screen.
In one mode they are drawn uniformly to the screen in rows, in another they are drawn to random x,y co-ordinates and in yet another they are drawn at the location of the mouse cursor.

Once the user is done messing around with it they can click the “Submit” button which stops the process and sends all the data to the database.

What It Does

So what this sketch does is it generates circles in random colours and then draws them onto the screen in a variety of ways.
Each colour consists of Red, Green and Blue (RGB) components. Now these individual R, G and B values are generated by Processing’s random() function. Each component randomed individually for every circle.
The program then checks to see which colour component of the circle was the largest (R,G or B) and increments the appropriate counter.
e.g.
A circle is drawn with R(200), G(164) and B(234). Blue has the highest value so the blue counter is incremented.
There are counters for Red, Green, Blue, Shades of grey, Black and white.
Shades of grey are colours where all 3 RGB values are equal but not equal to 0 or 255.
When they are all 0 it means a black circle will be drawn and the black counter is incremented and when they are all 255 a white circle is drawn and the white counter is incremented.

It is interesting to note how rarely the pure black and pure white colours are generated.
So far the R, G and B counters seem to always be relatively equal which of course should be the case statistically.

Stonium