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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>