Product – Page 4 – cuteprogramming

Dream – Build – Publish: My Experience in Microsoft Hackathon (2012 – 2014)

November 23, 2014December 1, 2014 by Chun Lin, posted in CSS, Event, Experience, HTML5, JavaScript, Product, Windows 8

I already forgot how I got to know about Microsoft hackathon back in 2012, few months after I entered my first job.

Dream Build Launch, Wowzapp~

The first hackathon that I took part in is Dream Build Launch. I worked together with my C# guru, Desmond, to build our first Windows 8 app (which was called Metro App back then). We successfully published the app to Windows Store after two rounds of Microsoft Premier Field Engineer (PFE) consultation sessions. We named our first Windows 8 app “EsplanadeGo!”, which has 51 downloads today.

HTML5 for Metro Apps talk given by Alex Goh. Photo Credits: Spiffy — HTML5 for Metro Apps talk given by Alex Goh during Dream Build Launch event. Photo Credits: Spiffy

In December 2012, I participated in another Microsoft hackathon, Wowzapp. That was the first time I won the first prize in Microsoft competition after I graduated from university. The app that I built was called Entertainment Connect, also a Windows 8 app. User can use it to connect to his/her Dropbox account to retrieve media files and then play them in the app.

Near the end of the Wowzapp hackathon, one of the judges from Microsoft Singapore, Eugene, suggested me to build another app which connected to SkyDrive (which was later renamed to OneDrive) because he would love to use such an app and SkyDrive API was still quite new back then.

Because of Eugene’s idea of the app, I challenged myself again in the hackathon organized by Microsoft Singapore in 2014, //publish/. I decided to make Eugene’s dream come true.

//publish/

The special thing about //publish/ was that participants were allowed to bring their own existing Windows 8/8.1 projects. The focus of the event was more about publishing app to Windows Store. Hence, I took the opportunity to complete my second personal Windows 8 app, Entertainment Connect.

//publish/ hackathon was actually a 2D1N event happening worldwide. Personally, I thought the one in Singapore was the most special one because Inori Aizawa was invited as special guest to the event as well! Participants got the chance to take photo with her and won cute prizes. Also, we had the chance to try out Xbox One, the device that people were willing to queue up at Funan DigitaLife Mall for a few hours just to buy one.

Inori Aizawa and Xbox One! Photo Credits: Microsoft Singapore — Where else can you see Inori Aizawa playing Xbox One? Photo Credits: Microsoft Singapore

//publish/ organized by Microsoft in Singapore. Photo Credits: Microsoft Singapore

The event took place at The Co., a very comfortable place just next to my office. So, I got to bring laptop external keyboard and mouse, which helped to improve my coding speed.

There were tech talks given in the first morning. One of them was about Push Notification with Microsoft Azure. This talk in fact helped me a lot in my work when our company decided to do a push notification to Android and iOS phone.

Tech talk about Cortana delivered by Chun Siong. Photo Credits: Microsoft Singapore

Meet People

One of the great things that I love about Microsoft hackathon is that I always can meet imba people here. By just having a chat with them, I get to learn more technologies out there, such as Arduino, Azure Media Services, iOS development, and so on.

Because of this event, I also had the opportunities to make friend with Microsoft Singapore engineers who help me a lot in my work.

Entertainment Connect

Entertainment Connect is my submission for //publish/ in 2014.

What’s so special about Entertainment Connect? Isn’t it just a media player that can play videos and songs? What else?

Firstly, yes, it is a media player. However, it is not a normal media player which can only play the local media files. It connects to your OneDrive account and retrieves available media files from there.

Secondly, I make it so that when you switch from one media file to another, the previous media file is paused and is hidden in the background. So, you can, let’s say, click on one video, play it halfway, then click on another song, then jump back to the same video again and continue from where you stop earlier. So this is actually similar to the “Parallel Video Downloading” feature that I introduced back then in YouTube Re-Player (Desktop) in 2009. The only difference is that now it does not limit the number of videos to be just 5.

Parallel Media Downloading from OneDrive to Entertainment Connect

Thirdly, it supports playing audio in the background. This means that even though the app is running in the background, users can still continue listening to the music and at the same time they can also control the media player.

Finally, it can loop songs and videos. Yup, re-playing is always the must-have feature in the media player programs that I build. =)

Wait, It Was 6 Months Ago!

Some of the readers by now should have realized that //publish/ actually happened 6 months ago. Why do I only blog about it now? Well, the answer is that I choose to blog about it after I successfully publish Entertainment Connect to Windows Store. So, why does it take so long for me to publish an app? This is because I have little time to work on it after the event.

I have learnt the key to finishing a personal project is to work on the project every day. However, I have a full-time work which requires me to OT always. Sleeping has thus become my top priority after work. However, I still try to at least work on the project by writing a few lines of code or just staring at Visual Studio for a few minutes. So, after 6 months of doing so, I am finally able to publish Entertainment Connect.

There is a saying, “Only do side projects you are absolutely crazy about.” Hence, I also installed Entertainment Connect on my laptop so I got to use it daily. The reason of doing so is to force me to remember about the project and to easily find out bugs in the app.

Today, I am happy that I successfully realize the dream of Eugene about a Windows 8 app that he can use to connect to play the media files stored in his OneDrive. In fact, I am very happy to have taken up this challenge and complete the app by myself even though the entire process is tiring.

Prize

I’d also like to take this chance to thank Microsoft Singapore team for giving me a special prize for Entertainment Connect during //publish/. It was a brand new Nokia Lumia 1520. Coincidentally, my Android phone stopped functioning few days before the event. So, I managed to get a new modern smart phone for free.

I should blog about the phone next time to show how good/bad Nokia Lumia 1520 is. =P

Downloads

Entertainment Connect is now available at Windows Store. You can visit the page http://apps.microsoft.com/windows/en-us/app/entertainment-connect/41d91a6b-6b56-4ae8-94b9-9b5f1053ca92 to download it now. It is free. =)

For developers who are interested to read the codes of app written in WinJS, please checkout the source code of Entertainment Connect on GitHub: https://github.com/goh-chunlin/EntertainmentConnect.

Entertainment Connect is now on GitHub! — Entertainment Connect is now on GitHub: https://github.com/goh-chunlin/EntertainmentConnect!

OneSimpleTablePaging 2.0: Now with Floating Table Header!

October 22, 2014November 23, 2014 by Chun Lin, posted in Experience, JavaScript, Product

It has been more than two years since I first published OneSimpleTablePaging, a simple JavaScript library which does HTML table paging on web pages. The purpose of working on this project is to provide an alternative by just doing all the table pagination in one JavaScript file without using any image.

Floating Table Header <thead>

I blogged about this two years ago. Since then, I have been receiving feedback from readers on how to make the library do more.

OneSimpleTablePaging.JS Demo Site at https://db.tt/6DUQxQzv.

One of the suggestions from trdunsworth is to implement a floating table header. This will help the header of the table to be fixed at the original position when readers scrolling the web page up and down. I like this idea very much.

Fortunately, there are many resources available online which shows how a floating table header can be done easily. A very simple solution that I first found is suggested by Andrew Whitaker on StackOverflow. He even nicely provided a demo on JSFiddle. However, his solution is too simple. It does not take into the consideration of, for example, hiding the floating header if the table has been scrolled too way up and is no longer visible. Another solution on CodePen thus gave me some ideas on how to improve the code further.

After spending one afternoon, I successfully implemented the feature and published a new version of OneSimpleTablePaging. I also did a simple demo page to show how the pagingnation and floating header work: https://db.tt/6DUQxQzv.

From Google Code to GitHub

I have been using Google Code since the time when I was studying in university. Recently, with the increasing popularity of GitHub, I decided to try it out. Hence, I have moved the project OneSimpleTablePaging to GitHub: https://github.com/goh-chunlin/one-simple-table-paging.

Yup, so now please visit the new homepage for OneSimpleTablePaging at GitHub! Thanks. =)

OneSimpleTablePaging is now on GitHub! — OneSimpleTablePaging is now on GitHub: https://github.com/goh-chunlin/one-simple-table-paging!

February Self-Learning: Let’s Take a Tour to Malaysia with HTML5

March 1, 2014March 13, 2014 by Chun Lin, posted in CSS, Experience, HTML5, JavaScript, Product, YouTube API

February is a short month so I have to plan my self-learning accordingly so that I can get myself more focused. Due to the fact that I can only spend on average one hour per day to work on my personal project and self-learning, I choose to learn not only something which is easier, faster to learn, but also a technology that is more interesting. So, the topic of February self-learning is HTML5! (Notice/Joke: ! is exclamation mark here. It doesn’t mean 5! which equals to 120).

Canvas

Canvas element is indeed an exciting addition to HTML5. Thanks to <canvas>, we can now draw graphics on the web page easily via, for example, JavaScript. I have seen many people trying to use CSS to do drawing. There are even people successfully using CSS to render Homer Simpson. Oh my tian. It’s a fun thing to draw stuff in CSS but it’s just a hack after all.

I do a firefly animation by using this new <canvas> element in a simple way. Firstly, I draw some fireflies on the canvas.

cxt.globalAlpha = 0.4;
cxt.beginPath();
cxt.arc(x, y, ((fireflyLightMaxDiameter - fireflyDiameter) * brightnessRatio) + fireflyDiameter, 0, Math.PI * 2, true);
cxt.closePath();
var grd = cxt.createRadialGradient(x, y, 1, x, y, 4);
grd.addColorStop(0, "#FFFFFF"); // white
grd.addColorStop(1, "#FFFF00"); // yellow
cxt.fillStyle = grd;
cxt.fill();
cxt.globalAlpha = brightnessRatio;
cxt.fillStyle = "#99FF00";
cxt.beginPath();
cxt.arc(x, y, fireflyDiameter, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();

Secondly, I will redraw the whole canvas for every 60 milliseconds. Then in each redraw function, I randomly assign flying speed and direction to every single firefly. Also, there is a counter set so that the firefly won’t change its direction too often.

dx = Math.floor(Math.random() * fireflyMaxSpeed);
dy = Math.floor(Math.random() * fireflyMaxSpeed);
firefliesDx[i] = dx;
firefliesDy[i] = dy;
x += dx * directionX[i];
y += dy * directionY[i];
if (callCounter % 40 == 0) { // Don't change the flying direction too often
    directionX[i] = ((Math.floor(Math.random() * 10) < 5) ? 1 : -1);
    directionY[i] = ((Math.floor(Math.random() * 10) < 5) ? 1 : -1);
}

Thirdly, I set a counter to do the brightness changing of each firefly.

brightness[i] += fireflyBrightnessSpeed * brightnessDirection[i];
if (brightness[i] > fireflyMaxBrightness) {
    brightnessDirection[i] = -1;
} else if (brightness[i] < 0) {
    brightnessDirection[i] = 1;
}

So, yup, that’s the basic idea on how I do firefly animation in <canvas>. Since this year is the tourism year in my country, I apply the firefly animation in a page about watching fireflies in Kuala Selangor, Malaysia. To get the source code, you can visit my page of this animation in the Mozilla Demo Studio. Don’t forget to click “Like It” button if you really like it. =P

Firefly HTML5 Animation: The page is to promote Kuala Selangor, the world’s biggest firefly colony

Popcorn.js: Integrating Video and the Web Content

However, promoting just one attraction in my country is not enough. So, I am thinking of building a page which will guide the viewer through different places in Malaysia.

I get a promotional video about Malaysia tourism from YouTube. In the video, it shows several famous tourist attractions in Malaysia. I want to build a web page showing a short introduction as well as a map (or even street view) about those places. I thus chose Popcorn.js.

Popcorn.js is an open-source HTML5 video framework which allows us to create time-based interactive media on the web. So, we can now bring content in a web page into a video easily. People watching a video on the website now can also read a web page content which is relevant to the video content. So, this JavaScript library basically allows to add value to a video.

The following screenshot shows how the page looks when the video is displaying a picture of Pulau Tenggol.

YouTube Plug-in Issue in Popcorn.js

There is a problem if we are using the YouTube plug-in offered in the Popcorn.js. After the video ends, the YouTube player will show a group of relevant videos. So it basically allows the viewer to change the content of the video player. Hence, to solve this problem, I added one value to the playerVars in popcorn.js.

playerVars = { wmode: "transparent", rel: 0 };

By default, rel is 1. The rel parameter in YouTube Player API indicated whether related videos should be shown in the player after the video finishes. So setting it to 0 fixes the problem.

CSS Animation

Although it’s not encouraged to use CSS to do complicated drawing on the web pages, thanks to the CSS3, we can now create animations with CSS by using @keyframes. For example, the following is part of my CSS which does the animation of the name of each attraction in the web page.

#footNote h1 {
    -webkit-animation:blurFadeIn 5s; 
    animation:blurFadeIn 5s; 
    font-family:KaiTi 隶书 Arial;
}
@-webkit-keyframes blurFadeIn{
    0%{
        opacity:0;
        text-shadow:0px 0px 40px #fff;
        -webkit-transform:scale(1.5);
    }
    100%{
        opacity:1;
        text-shadow:0px 0px 1px #fff;
        -webkit-transform:scale(1);
    }
}
@keyframes blurFadeIn{
    0%{
       opacity:0;
       text-shadow:0px 0px 40px #fff;
       transform:scale(1.5);
    }
    100%{
       opacity:1;
       text-shadow:0px 0px 1px #fff;
       transform:scale(1);
    }
}

What it does is basically just a simple fade-in animation of the text.

To view the finalized version of the web page, please visit to my page on Mozilla Demo Studio.

Visit Malaysia 2014

Both of the web pages mentioned above are all about Malaysia tourism. Why? This is because this year, Malaysians are having the nation’s largest tourism celebration. We had one back in 2007 when we were celebrating the 50th years anniversary of independent in Malaysia. Then Prime Minister, Abdullah Ahmad Badawi, even showed up in the Visit Malaysia 2007 promotional video.

So, if you haven’t visited Malaysia before, please bring your family and friends to this lovely country and join us in this grand tourism celebration. However, before that, kindly vote for my following two demos by clicking the “Like It” button. Thanks. =D

Take a tour to Malaysia with HTML5 here.

Entertainment Hub Version 1

December 28, 2013April 27, 2017 by Chun Lin, posted in Internet of Things (IoT), Product, Raspberry Pi

I received my first Raspberry Pi back in October, ten days after I ordered it online. After that I brought it back to my home in Kluang, Malaysia. The reason is that I would like to setup a home theatre with the help of Raspberry Pi. Hopefully in near future, I can have a complete entertainment hub setup for my family. Thus, I name this project, the Entertainment Hub.

Gunung Lambak, the highest point in Kluang.

Getting Raspberry Pi

Raspberry Pi is a credit-card-sized computer. According to the official website, it is designed to help the students to learn programming with lower cost. To understand more about Raspberry Pi, you can read its detailed FAQ. By saving S$1 per day, I easily got myself a new Raspberry Pi Model B (with 8GB SD card) after 2 months.

Entertainment Hub Project

Before the use of Raspberry Pi, I was using a Wireless 1080p Computer to HD Display Kit from IOGEAR to stream video from my laptop to the home TV. It requires a one-time installation of both the software and drivers on the laptop before I can use its wireless USB transmitter to connect between the PC and the wireless receiver which is connected to the TV with HDMI. Afer the installation, whenever I want to show the videos stored in external hard disk on the big screen, I always first need to switch on the receiver at TV side and then plug in the wireless USB transmitter on laptop. Now with the use of Raspberry Pi, I can easily browse the videos directly on the TV.

I only worked on the Entertainment Hub when I was at home. Also due to the fact that I only went back to home on Saturday and I would need to go back to Singapore on the following day, I didn’t really got much time to work on the project. Hence, I finally got video to show on the TV only after four times of travelling back to home.

Connecting External Hard Disk to Raspberry Pi

Before I started this project, I thought connecting an external hard disk directly to the Raspberry Pi would be enough. However, it turned out that it’s not the case. When I connected the external hard disk to the Raspberry Pi directly, the USB optical mouse, which was connected to another USB port of the Raspebrry Pi, lost its power. After doing some searches online, I found that it was most probably due to the fact that the Raspberry Pi didn’t have enough power to power up both the hard disk and the optical mouse at the same time.

The USB hard disk I have is 2.5” Portable HDD (Model: IM100-0500K) from Imation. After finding out that Raspebrry Pi had insufficient power for the portal hard disk, I chose to get a powered USB hub. Fortunately, there are nice people done a lot of tests on many, many USB hubs to find out which powered USB hubs are best to use together with Raspberry Pi. They posted a useful list of working powered USB hubs online for us to use as a guideline when choosing USB hub for Raspberry Pi. I bought the Hi-Speed USB 2.0 7-Port Hub by Belkin at Funan. Even though the model isn’t same as the one in the list, the USB hub works fine in my case.

To find out if Raspberry Pi can detect the portable hard disk or not, simply use the following command.

sudo blkid

If the external hard disk can be detected, then a similar results as follows should be printed.

/dev/sda1: LABEL=”HDD Name” UUID=”xxxxxxxxxxxxxxxxxx” TYPE=”ntfs”

Luckily my Raspberry Pi can auto detect the external hard disk and then can mount it automatically.

Enjoy Movies on Raspberry Pi

After successfully mounting the external hard disk on Raspberry Pi, I just need to browse to the folders on the hard disk to pick the video files and then play them using OMXPlayer, a video player pre-installed on Raspberry Pi. As I used HDMI cable to connect Raspberry Pi and TV, so by using the following command, both audio and video can be successfully transferred to the TV.

omxplayer -o hdmi -r video.flv

The reason of having -r here is to adjust video framerate and resolution. Without it, not only the video won’t be displayed in full screen on TV, but there also won’t be any audio from TV.

When I first used omxplayer, it showed a black screen after I closed the program. There are online documentation and solution about this issue as well. For me, after I rebooted the Raspberry Pi, the issue disappeared.

Watching Movie with Help of Raspberry Pi — Watching movie with the help of Raspberry Pi.

Dad’s Help in the Project

The case of my Raspberry Pi is designed and made by my Dad. I am very happy and thankful that my Dad helped making a case for my Raspberry Pi. Usually the case of Raspberry Pi is box-shaped. However, the case I have here is a cylinder. So my Raspberry Pi looks special. =)

Future Work

With this little success of having movies played on Raspberry Pi, the first part of the Entertainment Hub is done. Now, there are more things needed to be done in order to make it more user friendly and robust. First of all, there needs a playlist support. Secondly, the ability of replaying the videos. Thirdly, a better GUI to select videos, instead of just a command-line UI. All of these depend on how fast I learn to program an app in Raspberry Pi.

Let’s look forward to completion of this project.