Image Plotter – Simple Data Storage

So, working on this thing again. I keep banging on about this idea of making it a nice dynamic plugin/jQuery thing, but what about the data at the other end? How do we store it?

I’ve written the back end in a simple ASP.NET web application, since this is what I’m learning the most of at the moment. To actually store the data though, I’m not doing anything new. It’s a flat text file broken with lines and delimiters!

Here’s a snippet from the text file I’m storing my tag information in:

Tester 1|25|50
Tester 2|25|75
Wheel hub|68.9|21.6
Wing mirror|39.1|39.7

Breaking it up into tagsis the fun bit. First off, we need to get the text out of the file to play with it. There’s  a cool little method in the File Class in C#, ‘ReadAllLines’. This is great in this scenario because each line in my file represents a single tag. The method below returns a string array of all of my tags.

public string[] TagsArr()
string relFilePath = HttpContext.Current.Server.MapPath(tagsFilePath);
return System.IO.File.ReadAllLines(relFilePath);

Now I’ve got hold of the data, I need to get it in a nice simple format. My tags have 3 pieces of information attached to them, name, top position and left position. So, let’s make a class so I can store my tags as objects:

public class ImageTag
	public string TagText { get; set; }
	public string TopPosition {get; set; }
	public string LeftPosition { get; set; }

	public ImageTag() { }
	public ImageTag(string tagText, string topPosition, string leftPosition)
		TagText = tagText;
		TopPosition = topPosition;
		LeftPosition = leftPosition;

Now the object is done, I can go through my string array of data and create individual tag objects for each line. So we’re going to loop through the string array and for each string, split it by the pipe (|) symbol, this is the delimiter I’m using.

public List<ImageTag> ImageTags = new List<ImageTag>();

private void BuildTagsList(string[] tagsStringArr)
	foreach (string tag in tagsStringArr)
		string[] tagSplit = tag.Split('|');
		ImageTag imgtag = new ImageTag();

		imgtag.TagText = tagSplit[0];
		imgtag.TopPosition = tagSplit[1];
		imgtag.LeftPosition = tagSplit[2];


This works really well for me, as per usual I may have complicated this unnecessarily, but I like to future-proof things.

If I can crack the task of breaking the whole thing up to make it nice and dynamic, we could end up with a sweet little thing here!

Image Plotter – The Prototype

A working example, that’s what we like!

I’ve been working on this and fine tuning it a bit, it’s surprising how much tweaking I had to make to get the thing working properly. Initially I’ve just got one picture of a nice car, just for testing really.

Once I’ve gone through it and ironed out any issues, I can look at breaking the code up a bit and adding some settings to make it a little more dynamic. I like the idea of not tying it down to a specific language in the back end, if the JS could just be given a URL of a page that will accept it’s requests and respond with the right information, everyone’s happy.

So, here’s the little working example:

Please don’t put rubbish stuff in there!

Also, I did think about giving the ability to edit and delete tags. It sounds obvious really but for the amount of work it would take, it might make things much less simple!

Image tagger/plotter – The idea

So this is a little idea I’ve had, we’ve all seen that cool thing on Facebook where you can tag your friends’ faces. I decided I fancy giving this a go.

It can’t be that difficult to get something like this working, it’s just a case of knitting together some HTML, CSS, JavaScript and something on the back end (in this case, C#).

I don’t think it would be that difficult to make, so obviously I’m going to complicate it a bit. I like the idea of creating this in such a way that it’s easily re-usable.

At the end of the day you need a few things:

  • a path to return a list of tags (this could be a simple .txt path or some cool php/c#)
  • a page to handle post data containing new tags
  • something cool to join all of this together dependant on the image you’re displaying

Who knows, this could be a nice little tool/plugin!