Announcing JS Space!

I am so excited to share this with you!

From the README:

JS-Space a tool/game that will generate a mostly-realistic galaxy from a seed, then let you navigate around it to view the various stars within the galaxy. It’s designed to work well on computers and mobile devices.

How to Use:

  • Use the arrow keys on screen, or on your keyboard to navigate about the galaxy.
  • Click/tap on a star to view it’s details.

Links:

Some Neato Features

  • It’s Open Source!
  • Only vanilla JS was used, no jQuery or anything else.
  • Alter the config.json to change the number of sectors that are generated, min distance between generated stars, etc.
  • The Sector View window is calibrated on page load, so on your phone try loading it in portrait vs landscape mode to see different layouts.
  • All the star details are mostly realistic main sequence type stars, with appropriate percent chance of existing. (Class M are much more common than class A, for example.)
  • You can pass in a seed via the URI. For example: https://js-space.graviton.systems/?seed=reverse_the_polarity . Otherwise it uses the default seed.
  • No images are used, itโ€™s all done via CSS and/or HTML Canvas elements
  • The entire payload of this is less than 25kb! (when accounting for gzip)

Here is how it looks on a mobile device:

js-space2

Why Did you build this?!

A great question. ๐Ÿ™‚ Initially I wanted to make a MMO 2D Space game. I still want to do that, but after working on this early prototype, I am convinced I don’t want to do it in JS. Still, I learned a lot from this and definitely upgraded my JS skills.

Do you plan on developing it any farther?

I am thinking about adding the System View, so after you click on a star, you can also view the system of planets surrounding the star, click to get their info, etc.

Gasworks, redux.

The majority of what I spent my time on this weekend was finishing up some outstanding contract work that desperately needed to be completed. The project in particular is called ‘Gasworks’, for Energy Operations Management (EOM). They are a privately-owned natural gas transmission line company. What this means is, let’s say you have some property that has natural gas deposits. You’ve drilled, and there is actually natural gas there. That’s great, but what do you do now? That is where EOM comes in. They build and manage pipelines from natural gas wells to the market, either by connecting to a utilities transmission line, or directly to a customer (Normally a power plant or refinery).

EOM has a SCADA system that monitors their real-time natural gas flow rates and pressures throughout all the pipelines they manage. Gasworks is a web application that ties into EOM’s SCADA system, and offers up that real-time data to EOM’s customers. I designed the original Gasworks back in 2005, and have been updating and revising it ever since. Most recently, they were due for a complete overhaul. They needed a better design, better mobile/tablet support, and a robust administration section, where their staff could add Locations and Data points to the system, as well as manage customer logins and permissions.

I utilized the CodeIgniter MVC Framework for the site, using their default css for the administration side, and using jQuery Mobile for the customer side. I made a significant change this time around. All the data a customer sees when they log in is pulled from XML (generated via CodeIgniter). The main page is generated with jQuery, based on the XML. It’s pretty fast, and lets customers refresh their page without a total page reload. It also added the capability to have customers pull their XML, and integrate it into their own SCADA systems.

On to the screenshots! I can’t really show the administration half, since the data is confidential.

The XML data that is generated via CodeIgniter
The main view the customer sees when they log in. Systems and locations are all dependent on user permissions.
Systems expand to show locations within. Notice how it relates to the generated XML
When user clicks on specific location, they see realtime charts. Layout different depending on device used. Mobile users will have charts vertical for spacing issues.

And for those who are interested, here is an example of some of the js I wrote. This is the js function I use to parse the XML and print out the main view of Gasworks.

function parseXml(xml)
{
	var html='\n';
	html+='\t<div data-role="collapsible-set" data-theme="a" data-content-theme="a">\n';
 
	$(xml).find("system").each(function() {
		html+='\t<div data-role="collapsible">\n';
		html+='\t\t<h3>'+$(this).attr('name')+'</h3>\n\n';			
 
		html+='\t\t<ul data-role="listview" data-inset="true">\n';
		$(this).children('location').each(function() {
			var location_html='';
			var latest_poll=new Date('January 1, 2000'););
			var a_or_b=true;
			$(this).children('tag').each(function() {
 
				if($(this).attr('date'))
				{
					date_string = $(this).attr('date');
					var this_date = new Date(date_string.replace(/-/g,'/'));
					if(latest_poll<this_date) latest_poll=this_date;
				}
 
				if(a_or_b)
				{
					location_html+='\t\t\t<li data-icon="false">\n\t\t\t<div class="ui-grid-a">\n\t\t\t\t<div class="ui-block-a">';
					if($(this).attr('label')=='none') location_html+=$(this).attr('value')+' '+$(this).attr('type');
					else location_html+=$(this).attr('label')+' ';
					location_html+='</div>\n';
					a_or_b=false;						
				}
				else
				{
					location_html+='\t\t\t\t<div class="ui-block-b">';
					if($(this).attr('label')=='none') location_html+=$(this).attr('value')+' '+$(this).attr('type');
					else location_html+=$(this).attr('label')+' '+$(this).attr('value')+' '+$(this).attr('type');
					location_html+='</div></div>\n\t\t\t</li>\n';
					a_or_b=true;
				}									
 
			});
			if(!a_or_b) location_html+='\t\t\t\t<div class="ui-block-b"></div></div>\n\t\t\t</li>\n';
			if(latest_poll.getMinutes()<10) var minutes='0'+latest_poll.getMinutes();
			else var minutes=latest_poll.getMinutes();
 
			var the_time=latest_poll.getHours()+':'+minutes+' '+(latest_poll.getMonth()+1)+'/'+latest_poll.getDate();
 
			html+="\t\t\t<li data-theme=\"b\"><a href=\"http://gasworks.gasbiz.com/bambino/index.php/main/location/"+$(this).attr('id')+"\">"+$(this).attr('name')+'<span class="ui-li-count">'+the_time+'</span></a></li>\n';
			html+=location_html;
 
		});
		html+='\t\t</ul> <!-- end location -->\n';
 
		html+='\t</div> <!-- end system -->\n';
 
	});
	html+='\t</div> <!-- end collapsible-set -->\n';
 
	$('#loading').hide();
	$('#accordion_content').text('');
	$('#accordion_content').append(html).trigger('create');
 
	$('#accordion_content').show();
}

I’m proud of how this came out. It helped me become very familiar with the jQuerymobile framework, and definitely leveled up my XML manipulation skills.

Announcing ICLS

Adding an entry to ICLS

What whaat?

That’s right, I actually finished a side project. I worked on this on my lunch breaks occasionally for 2-3 months. Behold!

ICLS (Inconceivably Complex Logging System)

On Github: https://github.com/timbotron/ICLS

Summary

ICLS is a command-line, python-based logging system that supports tagging, searches, reports, etc. It stores this data in Amazon’s SimpleDB, (in your account of course). Specifically, it’s designed for a contract worker to be logging what they are doing at that time, bugs they figured out, etc. However, there are many other potential uses, such as having all your servers sending their log messages to one location.

The Name

Why call it ‘Inconceivably Complex’? Because, in one sense, it’s rediculous. You need to write a log? Write to a flat file. Writing to a cloud-based NoSQL data system is completely overkill. OR IS IT; I THINK NOT.

Notable features include

  • Dead-simple to add an entry (icls “entry text here”)
  • Tons of options (Default tag, search by term, tag, date range, etc. see documentation)
  • icls.conf config file
  • entry retrieval and deletion
A report using a date range.

Requirements

  • Python
  • Account with Amazon Web Services
  • Boto, a Python package, I didn’t want to use any packages, but using boto makes the auth, etc much easier. And at the end of day, I want to get this working, not take forever re-inventing the wheel on HMAC signature generation.

Reason for Building

ICLS is a side project. I wanted a log I can throw all my little random posts into, without feeling weird about compromising the ‘professionalism’ of my identi.ca/twitter account. Also, I wanted to try working with Amazon’s SimpleDB, and continue to strengthen my Python skills. And it totally worked for that, I feel more confident in my abilities.

Example of a search by tag

License

Copyright 2012 (c) Tim Habersack.

ICLS is licensed under a GNU General Public License (GPL) v3.

JPEF Magic!

Links to the code first!

Github: http://github.com/timbotron/JPEF-Magic

What is JPEF Magic, you ask?

JPEF (Javascript, PHP, Email Form) Magic is a package which handles email forms in an elegant and simple manner. Essentially, it lets you add email forms to your site and deploy addition email forms down the road much quicker then creating each one from scratch.

Notable features..

  • Consolidation; instead of validation and post-processing on each form page, handled with one file
  • Email generated has full text from questions on form
  • Settings for email processing (Email Subject, From, etc) are handled in hidden inputs on form
  • After success, passes all the email body to the ‘on success’ page you’ve set up
  • Allows you to have one “Form submitted successfully” page, with the users info displayed.

Why did I make it?

I come across this need all the time. I always think, “Oh I’ll just throw a form together.” but after you take care of the php to mail it, error checking, it does take time. Couple that with the fact I hate using the name value in emails as the question. I wanted a way to just have the exact language of the question on the form be what was included in the email, with minimal duplication by me. Hence, JPEF Magic was born.

Check out the demo at: http://lab.citracode.com/jpef_magic/