Linux

Somethings about Linux and Open Source

Ask Fedora UX Redesign Updates #2

So taking into consideration most of the suggestions I had obtained during the recent Design FAD at Red Hat, the initial slides of desktop version are also ready. Maybe these are enough to start off with a basic CSS template which we can build upon iteratively while we work on more mockups for other major pages in parallel. Here is the updated mockup:

home-desktopJust a reminder that the color palette used here is not standard and its indicative. The standard Fedora color palette will be used in the code. The next mockups to be done are for the views for individual question pages, contributor/people page, the ‘ask question’ page and maybe the registration page if required. Most of the other stuff I think would be best done directly in the code. I was anticipating a bigger challenge in streamlining the design but personally I think, as Askbot apes the StackOverflow and similar Q&A websites’ UX to a large extent, the users already are familiar with flow of AskFedora. In any case, later on we can have something like this : http://askubuntu.com/tour – an Ask Fedora Tour page for beginners/new users so that the initial user-inertia reduces.

Contributions and comments welcome.

Ask Fedora UX Redesign Updates #1

The recently concluded Fedora Design FAD 2015 at Red Hat’s Westford office turned out to be quite productive where my idea of redesigning AskFedora user interface gathered some momentum. I met so many faces I had just always known as IRC nicks and above of all, enjoyed Sirko complaining to everyone for not playing Champions of Regnum that well during the gaming nights we had :)

So coming down to the point, I was joined by Zack (sadin) and Sarup (banas) for the initial redesign efforts. With their suggestions, I completed some high-fidelity mockups for the mobile and desktop interface intended to be used for Ask Fedora. As suggested by Sarup, we started with Mobile mockups first to get a simplistic view of user requirements. It can then be “stretched” for a desktop interface later on. After some feedback from Sirko, Emily, Mairin, Marie et al. here is a first mockup slide.

home-mobileTo get a context of changes, you will have to visit the current AskFedora instance and observe the changes. Newer slides and the desktop views are on the way. Even though this takes time, its important to have an idea of how you want your interaction with the application to be and FAD gave me a change to do some mockups before we dive into code and CSS. Which reminds me, that Zack and I managed to setup an Openshift repo of an askbot instance one night and would be mostly using it for testing out our design. (I also learnt Openshift awesomeness that night). Most of real usable UI updates will be posted on this repo : https://github.com/fedoradesign/askbot-test

Your comments and suggestions are welcome. More updates on the way.

Some Cool Retro Watchfaces

These holidays, I was refraining from spending huge sums on stocking gadgets I don’t need. But (un)fortunately, I ended up buying a Nexus 5, a Moga Hero controller and a cheap smartwatch. So what do you do when you get an Android device? Exactly! Start hacking on it – root, custom ROMs, custom kernel, cool apps! So, my experimentation started with the SmartQ Z Smartwatch I had bought. For the price (CAD $91, including shipping from China) this was an irresistible piece of tiny Android to start tinkering around with. It packs a 1GHz Ingenic processor (MIPS) – JZ4775, 512MB DDR RAM and 4GB flash. All of this with a tiny 1.54 inch screen with a 240×240 resolution. The latest firmware supplied by the vendor is based on Android 4.4 with a custom launcher. It is a very hacker-friendly device and came with ‘su’ out of the box :) Though its a bit old (2013 launch) and the manufacturer seems to have abandoned the development on this, for the price, its a pretty impressive piece of tech on your hand.

I decided to make my own watchfaces with custom features and more inspiring UI than the watchfaces provided in the watch. Also, the hidden agenda was to check out the new Android Studio. As with everything Chinese, the SDK and docs for the Smartwatch were in Chinese! But fortunately, after surfing through XDA Developers forums, I found a link to the English docs on their website to refer to the weather APIs that I needed to use. With moderate efforts, I was able to make the following watch faces :

They are actually developed as widgets and the launcher apparently sees if the AppWidgetProvicer class you use starts with the string “WatchFace”. If this is the case, it simply puts that widget along with the custom watch faces in the menu.

If you own a similar watch/with similar screen dimensions, you can try installing the apps or use the source code for building your own cool watchfaces. I really wish I had an Android Wear watch rather than this so that I could develop on a more useful and up-to-date platform. Thanks for reading. Happy new year! Here is the source code and specs for these watch faces :

LCD Watch Face

Source : https://github.com/tuxology/LCDWatchFace

Download : lcdwatchface.apk

CRT Watch Face

Source : https://github.com/tuxology/CRTWatchFace

Download : crtwatchface.apk

If you find any bugs, report them on Github. Also, if you want me to port them on Android Wear, let me know. I’ll try to do that in emulator.

Ease your kernel tracing struggle with LTTng Addons

If you are new to Linux tracing and/or LTTng, go no further. Head on to the new and awesome LTTng Docs to know what this stuff is all about. I wrote an article on basics of LTTng and then followed it up with some more stuff a few month back too.

Ok, so now for those who have been using LTTng for sometime and especially, the kernel tracer, I am pretty sure, you must have faced a moment when you would have asked yourself – what if I could just modify those default tracepoints provided by LTTng and maybe add some more functionality to them. As an example, here is an interesting use-case I recently encountered -

Consider the netif_receive_skb event. A tracepoint is present in a function of the same name in the kernel. This function notifies the kernel whenever the data is received in the socket buffer for any of the net devices and when this event in enabled, the tracepoint is hit and skbaddr, data length and device name are recorded by default. For more info on how this works, refer to the TRACE_EVENT macro in the kernel. There are a few articles on LWN explaining how this all works. The LTTng tracepoint definitions are no alien to this mechanism. They basically act as a probe to hook onto these tracepoints in the kernel and are provided in the form of kernel modules. Refer to the internals of lttng-modules package and do have a look at what LTTng Docs have to say about this. Coming back to our use-case, so now consider that I want to just record a netif_receive_skb event only when its a localhost device (skb->dev->name == "lo"). Hmm, interesting.

Now, instead of forcing you to understand the deep internals of how the LTTng’s macros were magically working behind the scenes, Francis Giraldeau did some little sorcery and churned out…*drum roll*… lttng-addons! Checkout the addons branch in the repo. Apart from a massive help in running research experiments rapidly, it can be used for some practical scenarios too. Do have a look at the current modules available in that. I have added a new netif_receive_skb_filter event (provided in addons/lttng-skb-recv.c) to explain the use-case which we were discussing about previously. It can also act as a mini template for adding your own addon modules. Basically the flow is – create your module C file, make entry in Makefile, add the custom TRACE_EVENT entry in instrumentation/events/lttng-module/addons.h for your module, build and install modules, modprobe your new module, fire lttng-sessiond as root and then enable your custom event. Such happiness, much wow!

Once you have built the modules and installed them, restart lttng-sessiond as root and try to see if your newly created events are available:

$ lttng-list -k | grep netif
netif_receive_skb (loglevel: TRACE_EMERG (0)) (type: tracepoint)
netif_rx (loglevel: TRACE_EMERG (0)) (type: tracepoint)
netif_receive_skb_filter (loglevel: TRACE_EMERG (0)) (type: tracepoint)

Do the usual stuff next and have a look at the trace:

$ lttng create
$ lttng enable-event -k netif_receive_skb_filter
$ lttng start
$ ping -c2 localhost
$ ping -c2 suchakra.in
$ lttng stop
$ lttng view
[22:51:28.120319188] (+?.?????????) isengard netif_receive_skb_filter: { cpu_id = 3 }, { skbaddr = 18446612135363067648, len = 84, name = "lo" }
[22:51:28.120347949] (+0.000028761) isengard netif_receive_skb_filter: { cpu_id = 3 }, { skbaddr = 18446612137085857024, len = 84, name = "lo" }
[22:51:29.120071966] (+0.999724017) isengard netif_receive_skb_filter: { cpu_id = 3 }, { skbaddr = 18446612137085856768, len = 84, name = "lo" }
[22:51:29.120102320] (+0.000030354) isengard netif_receive_skb_filter: { cpu_id = 3 }, { skbaddr = 18446612137085857280, len = 84, name = "lo" }

And there you have it, your first filtered kernel trace with your first custom addon module. Happy tracing!

Custom Kernel on Fedora 20

I recently stared experimenting with eBPF patches by Alexei Starovoitov which apparently are extending and restructuring the Berkeley Packet Filter infrastructure in the kernel. BPF is used for a lot of tasks like syscall filtering, packets filtering etc. and obviously deserves a separate and grand blog entry. Well, we’ll see what can be done about it later but for now, I’ll just explain how to do the trivial task of installing a custom kernel (possibly patched/upstream) on your Fedora machine. Its nothing grand, just those familiar textbook tasks. I am using the master from Alexei’s repo.

Build the kernel

git clone https://kernel.googlesource.com/pub/scm/linux/kernel/git/ast/bpf
cd bpf

I changed the EXTRAVERSION string in the Makefile just to differentiate it as I may have to use multiple versions while testing.

make menuconfig
make -j4

Set it up

sudo make modules_install
sudo cp arch/x86_64/boot/bzImage "/boot/vmlinuz-"`make kernelrelease`
sudo cp System.map "/boot/System.map-"`make kernelrelease`
sudo dracut "" `make kernelrelease`
sudo grub2-mkconfig -o /boot/grub2/grub.cfg

Restart your machine and enjoy the new kernel. Once you are done with the experiments, boot into the old kernel and remove the initrd, kernel image, and the custom system map. Then update the grub config once more. Thats it! I’ll post more about my experiments with eBPF soon.

 References

[1] http://fedoraproject.org/wiki/BuildingUpstreamKernel
[2] http://broken.build/2012/02/12/custom-kernel-on-fedora

Sad State of Sarkari Sites

I still remember the day when I first accessed internet in India. It was a hot Delhi summer day in August 1995 and I was in my dad’s lab. VSNL had rolled out internet first in government research labs I assume. My dad had brought me specially to office on saturday to show me this wonder. I fired up Netscape Navigator (many of you may remember it as the precursor to Mozilla’s web technology) and an IT assistant told me to type http://www.yahoo.com in the browser. Some lights blinked and approximately 10 seconds later some images appeared from a far off land with the help of some tired electrons that made this journey to my screen. I typed “Australlia” – yes with the typo in the search bar and half an hour later I knew a lot about Aborigines, Uluru, their art, culture, destinations to visit and such. I never had an encyclopedia at home and this was magic for my tiny brain. Soon, Indian government started making their web presence known and developed websites for their departments, ministries etc. They called them portals (not the one which Valve makes). It was all amazing. Such a giant leap for us.

Except for that fact that those portals with their ancient technologies have pretty much remained same till now. Duh.

To give you a glimpse, here is the website of Indian Meteorological Department (IMD). I urge you to go at http://imd.gov.in and explore the ancient wisdom of golden era engineers in their full glory.

Screenshot from 2014-07-26 19:27:07

IMD website. Such beauty, much wow!

Here are some more screenshots of famous websites that people visit :

Screenshot from 2014-07-26 19:30:16

Indian Railways website – Best viewed on Internet Explorer 1024×768. Wow!

Screenshot from 2014-07-26 19:31:00

CBSE website – Teaching future generations HTML 1.0 tech

Screenshot from 2014-07-26 19:43:57

University of Mumbai – A flood of NEW

Screenshot from 2014-07-27 13:42:01

MTNL Delhi – We provide 4G services and online bill payment – but have the worst website on planet

Screenshot from 2014-07-27 13:42:12

Ministry of RT and Highways – I’ll let you know who built all this stuff

Oh yes, that is a marquee and those tiny “NEW” things are so fabulous. Its like web fashion from 1990s returning never changed since 1996. Wait don’t go. Here is a list of websites I urge you to try :

http://mtnldelhi.in/

http://www.indianrail.gov.in/

http://cbse.nic.in/welcome.htm

https://negp.gov.in/index.php   <– security certificate expired

http://www.mu.ac.in/

http://www.isro.org/

EDIT:

http://www.nift.ac.in/ <– This is a design school. I know, borderline technical, but still its a design school!

There are numerous others with suffixes as  .gov.in or .ac.in represented by Government of India in some form or other but absolutely unusable by general public. I don’t think babus ever visit the websites or I wonder if someone actually ever cares about the websites from the sense of UX/UI perspective.

I have categorized some observations and here goes the actual rant..

The “New” GIF Syndrome

You may start crying that there is no uniformity in .gov.in domains or any government website. Well, you are wrong. Most of them suffer from this syndrome which make the UI puke-worthy.  Its the “New” gif. A remnant from the dinosaur era, these small gifs were created by web enthusiasts when gif was cool (the first time). It was an amazing feature of that era (no jokes) but its (really)^infinity annoying in the age of HTML5 and CSS. All government websites have made it a point to annoy people while making announcements by putting these tiny devilish GIFs. People may see it as just a blinking “New”. But here is what it actually looks like to me :

1386272038724160_animate

The Marquee Dance

Remember the <marquee> tag? Oh this wonderful tool to have fun with in the 90s. There is no shortage of this piece of archaic technology in these websites too.  I think its the worst tag ever designed. I don’t know how others see it, but its just so annoying to wait for 2 minutes just for the relevant announcement to scroll like a snail on the screen and then trying to catch it using the mouse as if a cat is chasing a mouse.

Those “Notice” PDF Links

Many times on such websites, from time to time, some links right from the home page (which for example says “Bus Schedule”) will point you to a shabbily scanned 10 page incomprehensible document of a schedule with all the official signatures, and rubber stamps still intact. There would even be a chai stain  or staple-pin mark somewhere or other if looked closely. I mean seriously guys? Make a schedule in Excel -> print it -> get it approved by 3 people -> page crumbles -> scan it -> convert to pdf using a shitty free PDF converter -> put it up as hyperlink on a govt website?? Even Jackie Chan’s logic would get screwed here. This is the worst form of information delivery. But at least its better than no information. When will the process get streamlined?

The Babu photu effect

Madame, ismyle pleej!“. Many websites also have images of ministers right in the headers. Refer to the images above. This is not so common, but not so uncommon too. Remember the fiasco over @PMOIndia twitter handle when it was gonna be archived? Well, ministers will not take any chance here.

The tiny multi-coloured serif fonts

This is another annoying thing. Minuscule serif fonts all scattered over with their red green and blue colors – creating an information overload. Along with the marquee and the NEW GIF (my soul cracks once each time I imagine that) the effect is amplified 100 times. The person just gets lost. Into the bottom of the ocean. Sometimes I feel they design the websites like this knowingly – just to hide some incompetency they may have.

The low-res myopic vision

So many aspiring photographers with their flashy DSLRs on Facebook and not a single one clicking professional photos for Government websites? It seems they have to do their best with 340×480 images, blow them up and plaster on their websites :( Look at the glory of those pixels. Such beauty in pixelated images. (/me weeps again). And those horrible logos. Probably done in MS paint 20 years ago and stretched using <img> tag all these years again and again and again with wrong aspect ratio. Even if there is a logo change, its still in MS Paint I think. Such dedication you see.

Unquestionably, India is a global IT leader. They do amazing things. There is no dearth of good web engineers and designers for sure. The websites of TCS, Wipro, Infosys are all well done. All private entities have wonderful websites – Airtel, Tata, Birla, ICICI, Even PSUs like ONGC etc. BUT WHY NOT GOVT WEBSITES? Why not even websites of central or regional academic institutions? Just look at website of any government engineering college in any state. The things which general public needs most is in the worst state. People would argue that internet penetration is not good and hardy anyone uses it. Well, you are wrong folks. Don’t judge a book by its cover.  Just see the amount of bookings done on IRCTC website each day. The indigeneous technology which CRIS has put up is commendable. Thousands of students use CBSE websites to search for study material and see results. Remarkable too, is the work done by organizations such as ISRO – they may have not launched a beautiful and informative website but they have launched a spacecraft to Mars :-) If you dig deeper in the IMD website, there are hourly images from Kalpana satellite and quite accurate doppler radar maps of weater in major cities. Just that nobody knows and ever uses it because its hidden beneath layers of obscurity and bad UI. This is the department that prevented a recent catastrophe in AP. We have engineers who can do this : http://railradar.railyatri.in/ A flightradar like app for Indian Railways (I don’t think many railways in the world – except DB provide such APIs to get moderately accurate running info on the web). But we don’t have engineers to design an efficient Indian Railways website? There are 3 separate websites related to Indian Railways – all confusing. I cry in the nights silently seeing these websites, tears rolling while booking railway tickets, looking at election results, so on and so forth. The pain is unbearable. Even if I want to help, maybe I won’t be allowed to as I am not in a sarkari job as the awesome guys there. They are very good and highly apt – but in UI/UX technologies of the 90s i think.

All this does not absolve the government from the leniency and giving arguably the worst UX experience provided on the web. There is no uniformity in the government websites and no way to actually get the head and tail of anything that goes inside. National Informatics Center (NIC) which I presume handles these major websites has at least redone its website (http://www.nic.in) so its not an eyesore anymore. (Thanks a lot guys) Same is the case of recently launched Mygov website (http://mygov.nic.in/), http://www.data.gov.in and Department of Electronics and IT website. I think they even tried to organize a hackathon! Good job. I just hope all the Govt websites start getting a facelift like these ones soon. I don’t know if its gonna be effective or not.

I showed the miserable websites to my friends here and we all enjoyed a few laughs. Then I saw beautiful govt websites of many countries. How can I explain to them that there is a high chance that some of these websites may have been designed by Indians but the Indian Government itself is incompetent to utilize their own engineers to give better service to its citizens. How and what kind of people do they hire in institutions like NIC? Is an entrance exam enough to show aptitude in design and development? Is there some in house training being delivered to engineers to bring them up to date? Foreign investors visit these websites for sure to see infrastructure support. Imagine what they will think when the visit Ministry of Highways website and see the badly “Photoshopped” fake looking images. Sigh.

Lastly, an open request to some randomly web surfing government IT officials and policy makers who may have reached here. Contact me folks, I will do designs for free. Trust me. For FREE! I will take out time from my research, sit in a foreign land and do it for free, just for you India – only if you keep your egos aside and invite the open world to help you. Start a major UX/UI redesign project for web and open source it. You will be surprised how many talented young minds will help you out.

Over and out. Spread the word.

EDIT :

I’ll just record some exceptions to the above here :

http://gectcr.ac.in/ <– This should be the example for all Govt academic institutions. They took the initiative. Kudos!

Government has a web design policy and guidelines doc. Saved for reading later : http://web.guidelines.gov.in/

Raspberry Pi with HDMI – VGA converter

I have an early 2012 version of Raspberry Pi (generous gift from the Fedora Project) which sometimes tends to give some problem when a lot of current is being sourced from the USB. In addition to current issues with USB as well as HDMI, I faced a basic display problem when I used my HDMI-VGA converter for display which is not powered externally.

First things first, the converter won’t work directly and its almost sure that you will have to make changes to the config.txt (which holds the boot time specifications and is the key file to tell the Pi during boot time about any configurations that it should take care of) Here is what my config.txt looks like

arm_freq=800
force_turbo=1
gpu_mem=128
disable_overscan=1
start_file=start_x.elf
fixup_file=fixup_x.dat
hdmi_force_hotplug=1
hdmi_group=2
hdmi_mode=47
hdmi_drive=2

The values will obviously be different for you according to your Pi and display configuration. Have a look at http://elinux.org/RPiconfig for a very detailed explaination. Some things of interest to us here are hdmi_force_hotplug=1 just pretends that a HDMI device is always attached. The hdmi_group specifies the HDMI type whether its a DMT type output (mostly used in computer monitors) or if its CEA (which is used for TV monitors). The value 2 is for DMT.  The next is hdmi_mode which is very monitor specific. For example 47 corresponds to a monitor supporting a resolution of 1440X900 at 60Hz. You can check the wiki and find the mode for your monitor.  The hdmi_drive just chooses between HDMI and DVI output modes. You can save this as config.txt in your boot partition and ho! the converter works.

But hold on! As expected, it  the other devices connected also draw some amount of current from the USB ports which because of the infamous polyfuses between the USB supply line and ports limit the current to around 140mA. This is annoying as I don’t even know the specifications of my converter (its a cheap one from Amazon which did not come with absolutely any documentation.) The only way is to open it and measure the current draw myself. Being too lazy for that, I found a lot of solutions on the web to get my power supply of pi straightened out and amazingly the simplest one worked for me (/me says ‘he he he!’ with an evil grin) Here’s what you can try (in order) -

  • Try a better power supply – Use the ones which have ratings for 1A and above The usually are faithful. Some phone chargers will work and mostly the USB supply from laptops is not sufficient. I use my Samsung phone’s charger which has a rating of 5V, 850mA It works until I use more devices like Wi-Fi/Bluetooth dongle etc.
  • Buy the externally powered USB hub – If the simple thing above doesn’t work (usually when you are connecting more than two heavy devices – like a non-powered HDMI-VGA converter and a HDD) you need to find an externally powered USB hub. This is the safest bet (recommended) and usually not exciting if you are of the hacker kind. There is a list of good ones on http://elinux.org/RPi_VerifiedPeripherals#Powered_USB_Hubs
  • But this is pretty overkill for daily mundane tasks like a Wi-Fi dongle + some other USB peripheral. So the more interesting way is to short the polyfuses. I have heard that they no longer exist on the Model B rev 2.0 which seems good, but the main power still has polyfuses (shorting them is a bad idea I think) So for older models, you can get most of peripherals working when you short the polyfuses.
  • If you are more adventurous kind, you can get your Pi powered from an external ATX power supply which you can scavenge from some old PC (as I did) I am pretty much planning to power everything including the pi and a small fan from a Pentium 2 processor (slot package) from my ATX supply and I hope it will work.

I managed to get mpd running on my Pi and have setup my ownCloud on it so that I can use it as a small storage cloud. The mpd combined with my Droid MPD client on an Android phone has essentially made it my remote music station. I am waiting for my relay board to come so that I can maybe tweet-a-lightbulb at home sometime :) I shall keep posting updated about small hacks and things I learned with the Pi.

Here’s an old post which I found interesting on polyfuses on Pi and from where I learnt some stuff about it – http://theiopage.blogspot.ca/2012/06/increasing-raspberry-pis-usb-host.html