I'm a web-loving, webapp maker kinda guy. Here are a few things I have created for my employers, my freelancing projects and my own personal projects

Archive for the ‘Graphics’ Category

My new Fitbit Ionic watchface

When Fitbit purchased Pebble in early 2017, I had a feeling it was to woo pebble developers to a potentially new Fitbit smartwatch. I worked with me. I bought the new smartwatch, Fitbit Ionic, on the first day of its retail release.

In my spare time, I play around with the Fitbit SDK to create apps and watchfaces for the Ionic. The Fitbit SDK is based on Javascript and SVG. Although there are some limitations to the hardware and SDK, it’s been fun to play around with creating new watchfaces. Above is one of the watchfaces I created.

Category:

CSS, Graphics, Javascript, smartwatch, SVG

Tagged with:

A Webscraping WordPress Plugin

I wanted to create a sports-related website with a custom-made WordPress plugin and show game schedules for my timezone.  So, I created Gamewinner.tv .  It is a fully automated sports streaming website showing live streaming games ranging from football games to soccer games to even Ultimate Frisbee games.

I coded the WordPress plugin used in the website to automatically scrape other websites for streaming links and game schedules. I also added Javascript code to dynamically display the correct game start times based on the end user’s timezone. 

What helps is there are niche sport leagues hoping to get more exposure through streaming their games live for free.  If you’re looking to watch athletes dive for a frisbee, this website is your you!

UPDATE (2017): planning to sell this site

Category:

Content Management System, CSS, Graphics, Javascript, PHP, Wordpress

Tagged with:

Cal Ranch Foods and their Walnuts

I created the CalRanchFood.com website.  I took the mockup from a design firm in Southern California and created the website in WordPress.  I then edited the images, PHP, and CSS to mimic the mock up.

One of the perks of this project was getting a box full of nuts and fruits.  They really do make the best walnuts you can eat.

 

Category:

CSS, Graphics, PHP, Wordpress

Tagged with:

Animated Live Wallpaper for your Android phone

Here’s a Live Wallpaper for your Android smartphone. It’s an animated video of the Bellagio water fountains in Las Vegas. The video runs in the background on your phone’s home screen.

The video used for the live wallpaper was taken by myself with my Canon DSLR. Then edited in Apple’s iMovie.

Get the wallpaper here,
https://play.google.com/store/apps/details?id=com.anthonyhoang.bellagiohotellasvegaslwp

Category:

Graphics, mobile/smartphone app, Video

Tagged with:

UI/UX Design of a Content Management System

GBIHelpScreen

In this month-long project, it was my task to come up with a new design to an existing website. The goal was the make the User Interface clear for users and the User Experience easier to use.

I conducted interviews of End Users to gather their pain points and requirements. The information from the interviews helped me to design a new UI for the website which I displayed in a comprehensive wireframe. I’m proud to say, my UI/UX designs were very well received by the end users.

Category:

Graphics

Tagged with:

My Toddler Can Learn Names

My Child Can Learn Names

.

VIEW DEMO (source code – Javascript DOM animations and movements)

I have been buying a lot of apps from the AppStore and Google Play Market for my young son. Then I thought, “Hey, why don’t I make my own app?!”

In my spare time, I developed an app to teach my 2-year old son the names of his family members and favorite cartoon characters.

There are apps to teach your toddler animal names, colors, shapes, vehicles… but what about apps to teach your toddler the names of friends and loved ones? This app can teach your toddler the names of his/her family and friends in a fun and easy to play game.

Download the game from Google Play or Play the game online

This educational game was created using HTML5, CSS3, jQuery, Javascript and a plugin to stretch images.

Category:

Game, Graphics, HTML, HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design

Tagged with:

My Phở app is now available for all mobile devices

Everything you need for the delicious Vietnamese noodle soup, Phở, is in this app.   Quickly get a list of all the Pho restaurants near you and plot them all on a map. Or enter in a city name to get all the Pho places in that city. Also included is a recipe to make your own Pho. View the photo gallery of all the Pho toppings you usually get in a restaurant – brisket, steak, fatty brisket, tai, chin, gau, pho ga, etc.  Finally, an app my parents would use.

For Google Android users, download the app in the Google Play store here and install for free,

https://play.google.com/store/apps/details?id=com.anthonyhoang.phoapp

For Apple iPhone users, use the Safari browser to access the web app here,

http://ahhdesig.w01.wh-2.com/PhoApp/

This app was developed using Sencha Touch 2.0.   Sencha Touch 2.0 is a javascript framework using HTML5/javascript technologies.  The data is taken from Yelp’s Webservice API.  I added Google’s geolocation APIs to plot the restaurants on the map.  The images for the Pho toppings were taken with my Canon t2i and photoshopped by me.

update: There are some pros and cons to using Sencha Touch over other mobile-specific frameworks like jQueryMobile.  I’m currently working on another smartphone app using jQuery Mobile and will have it available soon.

Category:

Graphics, HTML5, Javascript, mobile/smartphone app, Sencha Touch

Tagged with:

My app game works on my Android and iPad!!!

Find the Differences game for smartphone devices

I’m ecstatic to announce my mobile app game works on both my Android and my iPad!!! It’s a somewhat educational “Find the Differences” game.  Spot all the differences between the two photos before time runs out, in this case – before the crab bites the mermaid, and you’ll get a brief summary, fun facts and tourist information about the beach displayed.  This is the “Beaches” edition with photographs of various beaches over the United States.

I developed my game using Flash with Actionscript code. Using the exact same code, I’m able to make the same app work on both Google Android devices and iOS devices. To do this, there were some changes required to the dimension of the app and images but the Actionscript code remains the same. I snapped all the beach photos myself with a Canon t2i camera and used photoshop to created the differences in the images.

Free Download: https://play.google.com/store/apps/details?id=air.FindDifferencesBeaches

*update: As of Jul 2013, there has been 70,000+ downloads of my game from the Android Market.

Category:

Flash/actionscript, Game, Graphics, mobile/smartphone app

Tagged with:

My first smartphone app!

Android app using flash

Creating a smartphone app is exciting and rewarding. Not only do I get to be creative, I can also share it with people around the globe; put it right in their hands! Umm, if they own a smartphone, that is. haha  Anyway, I decided my first foray into the mobile app world would be an app with which I could display my photography.

This app was developed using the latest version Adobe Flash Professional v5.5. This version comes with the Android app packager as well as the iOS packager. Essentially, this means the same Flash app can be packaged as a native application for either the Google Android Market AND Apple’s AppStore. For my app, I implemented all the cool things a phone can do… swiping through each photo in the gallery, two-finger zoom in and out, saving the photos directly to your phone, watching videos, and using your phone’s email client to contact me.

Link to my app on the Android Market – (link to my app on the Apple AppStore coming soon)

*update: As of Dec 2011, there has been 5000+ downloads of my app! (without ever marketing it).

Category:

Flash/actionscript, Graphics, mobile/smartphone app

Tagged with:

Watch out! I can turn you into a cartoon character!

Creating cartoon characters isn’t as simple as some may think. I’ve recently been interested and picked up some skills in creating a cartoon image from a real photograph.  Let me tell you, it is very involved and time-consuming.  This is a cartoon image is one that involved a 25-step process which took 3 hours to complete. I crafted the image using Adobe Photoshop – shows how powerful Photoshop can be.

Category:

Graphics

Tagged with:

Photography and Grahics Design

So I’m not all about just charts, reports and data. Those things make-up the my useful side but do little for my creative streak… and new creative tools.  My new Canon t2i DSLR has allowed me to explore the world of photography and image editing.  After many hours spent editing and reworking photos, I now have a much better understanding of Adobe Photoshop and feel any image is possible.

I’ve acquired skills and techniques that are usually restricted to professional photographers.  For example. I’ve taken photos in HDR(High Dynamic Range) – where the colors are so vibrant it seems like a scene out of an animated movie;  Infrared – where trees and grass appear like snow; and even used Chroma Key Compositing (aka Greenscreen) – where a picture of you can be layered with another pic and make it seem like you are in a variety of  other settings and locations.  To visit some of my work, see slide show below.

This slideshow requires JavaScript.

Category:

Graphics

Tagged with:

Buy your handbags from Adelyn!

Adelyn's website

Looking for a beautiful hand-made handbag? Get it from Adelyn Designs! Choose from a variety of different designs and sizes and Adelyn will make your bag upon completion of your order.

This is a low-traffic, limited budget shopping website. It is limited to a webserver with no ASP hosting. The website was created using solely HTML. Paypal was the online payment transaction of choice.

Category:

eCommerce, Graphics, HTML, Javascript

Tagged with:

Baseball.net 2K2, multi-player online game, coded in Java!

Baseball.net 2K2

My love of sports motivated me to make the first multi-player online baseball game. It was an ambitious dream but a good way to learn and master Java. Although the user had to install a Java Applet Player, this game – in theory – could be played on any platform.

This game is a multi-threaded game with several panels on the main screen. The main screen has the game action; the pitcher vs batter. The game uses real MLB player names and statistics. The other panels includes real-time, play-by-play, current game stats of batters and pitchers. An additional panel for the chat session is available when playing online against another player.

A user has the option to play with game with the mouse or the keyboard. Two players can play at the same time using the same keyboard. However, playing against another player online was deemed difficult as the latency time to transfer the actions of one player to another player over an internet connection was too slow for a fast-paced action game. The most difficult aspect of coding this game was displaying the baseball’s projection (curves and bounces). A lot of math equations were used. 😉

Category:

Game, Graphics, Java

Tagged with:

My first e-Commerce site! Buy your Metabolife now!

my first e-Commerce and ASP site!

A high school buddy and I decided to dabble in eCommerce. He is somewhat a medical expert and I am somewhat a technical expert so I took on the task of creating an eCommerce website for us. Our website allows consumers to buy Metabolife and other supplements through an online store.

This was my first time using ASP to create an entire website. With ASP I was able to construct a shopping cart feature and use SQL to store our orders in a database. The orders are processed through a 3rd party merchant. 

We launched the website a couple weeks after my college graduation and called it SynergyCommerce.

*update: SynergyCommerce was short-lived but was great for my continuing self-education.

Category:

ASP Classic, Database, eCommerce, Graphics

Tagged with:

VSA@UCI First Website

Vietnamese Student Assocation website

The Vietnamese Student Association’s president asked members if any of us would like to volunteer to create a website for the club. Excited to show off my new HTML skills, I quickly volunteered.  I wanted to make the first ever VSA website at the University of California at Irvine! The specs were quite simple – make a website to let viewers see the calendar of events, the name list of club officers, and the club’s mission statement.

I created the website using HTML. Javascript was used for the awesome mouse-over effects on the links (edit: hey, it was very cool at the time). And I crafted the graphics using Adobe Photoshop.

VSAUCI.com
*update: The VSA-UCI website has seen many new students and changes since it’s original creation.

Category:

Graphics, HTML, Javascript

Tagged with: