Common WWW

Unity’s WWW class is quite powerful. Give it a URL and it will download that file in the background. Provide it with some form data and it will encode it properly and post it for you. It can even load files from inside your APK on Android.

As powerful as the WWW class is, there is really only one way to use it, in a coroutine. Start the download, yield until it finishes, and finally process the error or payload. I found that nearly all times I used the WWW class the coroutine followed this pattern. So instead of rewriting it again, I made a library of the pattern.

I present the WWWNetworking library. It implements the most common WWW use patterns so you can use callbacks instead of implementing coroutines. You can also queue up multiple downloads and control the amount of concurrent downloads. It even provides singleton access to a default instance.

using UnityEngine;
using WWWNetworking;
public class FloatingImage : MonoBehaviour {
  void Start() {
    NetworkingEngineSingleton.Instance.Download("http://images.earthcam.com/ec_metros/ourcams/fridays.jpg", www => {
      GetComponent<Renderer>().material.mainTexture = www.texture;
    });
  }
}

The core of the library is the NetworkingEngine component. It is essentially a queue of tasks to run. When there are fewer than the maximum amount of allowed concurrent tasks running it starts one from the queue. The maximum is user configurable so you can dynamically change the amount of resources to consume. There is also a singleton-like default instance available for when you don’t want to deal with adding components. The example above shows the singleton-like default instance.

SVG Attempt

Let’s start with a topic that has seen vast improvement in browsers lately.

SVG is relatively new compared to other web technologies. The first release of the language specification occurred in 2001. I was just starting high school. Less than ten years since then, support for the language is extensive, reaching even mobile devices.

My earliest attempts at SVG were reproducing GUI elements. They can be viewed by visiting my Interface Design course page. From there you can also view my homework assignments if you so desire. My final project is the topic of this post.

My partner (Adam) and I chose to make a color picker for our final project. The goal was to make a color picker which can be built into a larger application. That was the only requirement. Our first task was to research current solutions.

We looked at several color pickers in popular programs. Our color picker needed to fit in a small space and provide a wide range of colors. While swatches have a small footprint and are easy to use, they don’t provide enough choice to the user. But pickers which use a large area, like the default in Photoshop, are too large. This led us to sliders as the primary mechanism to adjust the color.

The next decision to be be made was which color model to show. We wanted one easy to understand and easy to use. RGB is the easiest to use with three variables each with 256 possible values making it our first choice. HSL and HSV are more accessible given that each presents the user with the hue which is how most people think of color. CMYK was ruled out because the color picker is intended for web use only. For the same reason, we included the hexadecimal value. In the end we included RGB and HSV sliders to gain the advantages of both.

This is when we ran into a problem. First RGB and HSV variables all have different domains. Second, the maximum value (360 hue) is greater than the amount of pixels available for the sliders. Good design dictates that sliders can reach all possible values in their domain. By shortening a slider some possible values are excluded either beyond the end or between pixels. We chose to make all sliders 200 pixels long but provide buttons to adjust the sliders in sub-pixels. This has the unfortunate side effect of destroying scale. One slider (hue) has the domain 0-359, and two (saturation and value) are 0-100, and three sliders (RGB) are 0-255; but every slider is 200 pixels long. We also added variable gradients to show how moving a particular slider will affect the color.

The end result can be thought of more like a prototype than a finished product. A major oversight was labels. The sliders from left to right are as follows: Red, Green, Blue, Hue, Saturation, and Value.

Color Picker

Be on the lookout for a post about the code.