Week 5 & 6: Inkscape mockups and implementing the UI

It has been a bit too long since my last post! My last post was about some updates on the user stories and the wireframes.

I had been using Pencil to make most of my wireframes. More often than not,I would end up having to search for a lot of other wireframing tools since not all elements in the wireframes could be achieved with Pencil itself. So,if Pencil did not fulfill my requirements,I would move to Chrome extension of Balsalmiq and a lot more other extensions which I did not use more than once. This was frustrating and I finally decided to learn to use Inkscape for creating better high-fidelity mockups. Before starting to use the application directly to create mockups, I read Máirín Duffy’s tutorial on creating mockups. This is a great starting place to learn the basics . But the more you use Inkscape, the more you learn.

In the following iterations,we also moved from a tabbed layout to putting the two features parallel to each other to the current layout. The current iteration has the “Access Port” feature on the top and the “Traffic log” at the bottom. Here is a snippet of the mockup iterations:

A) This is more like a wireframe than a mockup and was made using Pencil.



B)Second Iteration: Parallel layout of features. This mockup has a lot of inconsistencies .I was still learning to create objects and move them,but Inkscape’s “Cusp to the corner” feature would frustrate me especially because I still hadn’t realised that I could simply use the arrow keys to move around the objects. Silly,right?! add_port

C)Third iteration:  This is the most current mockup and I have been able to modify lots of small (but important)details in this iteration. The error states for the “Traffic Log” needs some more work to include cases where the data present is large. ti

Meanwhile,I had also started implementing the UI to get a feel of the mockups in Cockpit. While it was comparatively easy to implement tables and insert content using HTML,it was a bit difficult for me to get the dialog box for “Add port” running. This week I finally (FINALLY!) got it running and that made me super happy 😀 One more lesson I learnt while trying to get the code working is that the best way to learn to code ( faster and better) is to read ,understand and play around with codes of existing applications ( definitely in your fork of the application’s repo 😛 )

More to come in the next week!



Week 2: Studying similar firewall applications and their patterns.

As I discussed in my previous post,the task for me to complete was to find patterns in the existing firewall applications that are widely used. Although I enlisted eight similar applications,I focussed only on four of the eight firewall applications. Below,you will find the features of each firewall along with images of their applications. All the images belong to the blogs/websites linked.


2.) OPNSense



Terminologies used:

1)GeoIP Blocking: Blocks visitors by countries.

2)NAT (Network Address Translation) : Network address translation involves converting one IP address into another while the data packets are in transition across routing devices.

3.) Protocol controlling: Information exchanged between devices or networks follow certain protocols. Each protocol is specific to the work assigned. For example:email routing is done by Simple Mail Transfer Protocol(SMTP),Post Office Protocol(POP3) or Internet Message Access Protocol(IMAP). Each of these have their ports assigned which is used by the protocols. SMTP uses Port 25,POP3 uses Port 110 and IMAP uses Port 143.

4) IDS( Intrusion detection system): IDS is a device or a software application that can detect malicious activities within a network. While a firewall monitors attacks on the system from other devices/networks,IDS alerts the system if there is any malicious activity that the firewall could not prevent or has been originated in the system itself.

5) VPN( virtual private networks): A VPN is a network technology that can create a secure network connection over a public network ( such as the internet). OpenVPN is an open source application that executes VPN methods.

6)Traffic Shaper: Traffic shaping is done to delay some or all datagram packets over a network.

7) Port Forwarding : Port forwarding is an application of network address translation(NAT) often used to connect to a specific computer or service within a private local network.

Now,let’s move on to the firewall applications and their features:

1.) IPFire:


  • Default firewall rules
  • GeoIP blocking
  • NAT
  • Group based firewall rules
  • Firewall logs
  • Protocol controlling
  • Configure rules ( add/delete ports,create group restricted rules ,port forwarding etc)
  • IDS
  • OpenVPN
  • This slideshow requires JavaScript.

2.) OPNSense


  • Default firewall rules ( category based)
  • Configuration
  • Alerts
  • Schedules
  • Protocol control
  • NAT
  • Queues
  • Traffic Shaper
  • Aliases
  • IDS
  • Virtual IP
  • OpenVPN
  • This slideshow requires JavaScript.




  • IP-Block
  • Timed-access ( scheduling)
  • Configure firewall rules
  • IDS
  • Logs
  • Port Forward
  • This slideshow requires JavaScript.

    4.) Untangle

  • Configure firewall rules
  • Current rules
  • Reports
  • NAT

    This slideshow requires JavaScript.



Comparison of features of selected firewalls:



My research methods,initially,were wrong. After finding similar firewall applications,I would have installed each and every firewall to study it if not for my mentors. As hilarious as it may sound,I forgot that I could always Google for tutorials related to these firewalls. I have linked all the blogs and websites that I referred to along with the images used.

Now that the similar features have been listed,it is clear that including some features like default firewall rules,configuration ,port control,protocol controls,port forwarding, NAT and logs is necessary. The inclusion of other features differs from the requirements of users of each firewall. Although it would be nice to have all the features in a single firewall application,this requires to list the requirements and user stories. Hopefully,that should be completed by next Tuesday.