Tag Archives: nitk surathkal

Multi user avatar chat based flash website for Incident 09

I was very inspired by the Red Interactive agency’s website which allowed the website visitors to talk to each other in realtime with an option to customize their avatars. So I wanted to use my skills and create something similar for my college website. The initial idea came up with was to model the entire college campus in 3D and allow the user to navigate around the campus along with them being able to go through the event details. I had also thought of having interactive elements in the 3D map which shows a miniaturized version of the cultural fest happening inside the 3D space. But as I was the only person who was working on it and also considering the average internet bandwidth available around that time in India, I decided not to plug in very heavy graphics onto the website. I started off by designing the main building of my college using Google sketch up and rendering it with a photorealistic plugin called vRay. The initial results were very impressive. With the crude rendering of the image, I started working on Flash CS3. Till then, I had only worked on Swishmax, which was a stripped down version of Flash. But Flash CS3 didnt prove too difficult given the fact that I never had to use much of drawing and keyframing tools present in flash and had to use only the actionscript features.
I started off testing the feasibiity with just a small ball as an avatar whose position can be moved through the keyboard arrows. The position of this ball was broadcasted using raw XML sockets to a PHP based server listening on port 8080. And every flash client connected to this PHP server received the coordinates of this ball. After doing a real run on NITK network, the concept proved successful. After this, I went on download some human characters for Poser 5 and exported frames which show the human characters to be walking. The simplicity of Poser in working with human models proved to be a blessing as I had the still frames oif the animation ready within a few days. Then these frames were imported onto Flash and separate swf files which showed the human model to be walking were kept separately and then imported onto the main flash movie and placed in front of the 3D background map.
After this, multiple human characters and multiple 3D background were done using the same method and all integrated into the main movie using some actionscript and the final movie was ready. A quick demo to some of my friends showed that the website would become an instant hit.
Along with the main flash site, I had to set up a way to add text content onto the website using a simple HTML admin page.
The final website was hosted on the local NITK student server and a WAN port 80 was mapped to LAN port 8080 on the local server so that no firewall can intrude in the communication between the client and the server. The final result was a major success and was one of the best websites made for a cultural fest in India.

Some stats :

15000 visitors out of which 10000 are absolute unique visitors, 22000 pageviews, 15 GB data transferred, 800 event registrations on the website

Later on , some additional features were integrated into the site like :

  • ALICE chat bot to give standard replies to questions asked during chat
  • Integration of phpbb login with the flash website so that user logged in on phpbb forum is logged in the flash site also
  • Integration of google SMS channels to send out bulk SMS, moderation of chat messages using Google talk
  • Some interesting things in the backend : (which you probably wouldnt know even if you used the website)
    The chat avatar character was assigned based on the IP. If the IP address was in the range for girls hostel , a female character was assigned, If it was from the boys hostel block, a male character was given. Otherwise it was totally random.
    The ALICE chat bot was trained to answer hundreds of questions like “What is Incident”, “When is Incident” etc and would respond to commands like shut up, keep quiet etc. It would also detect when someone would try to use abusive words and then ask them to kindly restrain from repeating it.
    Someone or the other person would always stay online to moderate the chat messages being broadcast and ban users who spread hatred on the group chat.
    To aid in modelling the 3D maps, I had to go around the campus clicking photographs on my phone from different angles for different buildings and then model them on sketchup. There were plans to model every building , but the plan never worked out due to lack of time.

    Some technical details :
    The flash client in the browser connects to the PHP based socket server running on port 80 on the NITK student server and communicates using raw XML sockets. The PHP server separated the users into different rooms(based on the map chosen) and forwarded the messages in realtime.  Running it on port 80 ensured that firewall intrusion was minimal. A chat bot (based on ALICE chat bot) was integrated into the map. Moderators could see the activity of any room by adding a jabber user ([email protected]) to their google talk list. The text content on the website was managed using a simple CMS like page.

    Click to view the demo of my work
    VN:F [1.9.22_1171]
    Rating: 8.8/10 (16 votes cast)

    (to be done)

    Incoming search terms:

    PHP based CMS with chat

    I developed a Web based CMS for my college which allows performing standard content management tasks.
    The entire CMS was coded from scratch using PHP-MySQL-Javascript. This was one of the first projects I had taken up. The project gave me insights into the challenges associated in centralized management of the content, themes, links and other information in a website. The CMS was later used in the Chemical engineering department and chemistry department of NITK Surathkal.

    The generic CMS could add/edit content, manage links, change themes, add users and manage each user profiles which are displayed publicly on the website. They could also upload files categorized under folders which have public access.

    Initially, the system was built as a generic CMS , but later on with the increasing demand, more features like student login, assignments upload and review, exam results upload, faculty profile management, student chat were added.

    More info:
    This system was designed to be run for the NITK main website , but it never made it up there as the faculty members were looking at someone who could merely use a ready made CMS like joomla with a custom template. Once the CMS was put up on the Chemical engineering department website, it helped the department in staying up to date with all the faculty profiles being maintained by themselves and all the other pages being maintained by one of the professors ( M.B. Saidutta ). Student scores/grades were published online which helped the students to know the grades well in advance. Assignments were uploaded bu the professors using the website and students could directly save the questions onto their system instead of circulating paper print outs.
    Some of the assignments which involved Matlab files has to be uploaded by the students themselves. So each student was given a login username with password for logging into system and uploading their matlab solutions. The professor incharge could then download all the solutions as a single zip file and then check their answers and post a comment about the solution back on the website. The professor could also specify a deadline for each assignment upload after which the system would disable uploads. This helped in easily managing all the assignments in one common platform and avoided a lot of manual work.
    The students could also chat with others who were logged in and also could host their own files on the website.

    Click to view the demo of my work. The actual magic happens behind the 'Faculty Login' block
    VN:F [1.9.22_1171]
    Rating: 6.7/10 (28 votes cast)

    Incoming search terms: