Category Archives: Web Development

Beatsense Music Service…

beatsense

If you’re a fan of music, you will like BeatSense.  The site became active in October 2015.  I have since created two rooms Chillstep and Full of Treble.  The perk in these rooms is that your playlist (sourced from YouTube videos) is shared.

That means as you listen to the songs you enjoy, other users may add to that playlist which helps in finding new music.   For my two rooms, the more modern music gets many more viewers than the classical music but it works well to have music that plays consistently that is of my interests while I work.

The site is active, has been positive in receiving feedback and is consistently under development and adding new features.  Give it a look and enjoy the sounds!

XFDL with PHP 2…

Recent progress with doing XFDL forms in PHP.  I put some time into this project recently figuring that this web based viewer would be the most applicable.  Think if AKO’s MyForms, a setup where you can pass forms from one user to the next to get it filled out and signed; if that program never needed to leave the web?  With doing XFDL forms in PHP, that is possible!  My code is a mess right now so I will put up the PHP, Javascript for the page on a later post.

For now, go to the old version to see what the forms should be like and go to the new version to see progress on the viewer.

Watch Out! Here comes a dart!!

It’s like if php and java met on a lonely night, dart would be the result.

Google Dart, a new language developed to be the ‘new javascript’ is soon to be available from Google.  Check out the webpage that’s set up to show you the language and give a nice tutorial.  It has an interpreter on the page so you can tinker and get a feel for it.  It seems to me, after playing with the language a bit, it’s like if php and java met on a lonely night, dart would be the result.  An advantage of this language, is unlike HTML5, you will not have to wait for a browser to be made to understand this language.  It can be cross-compiled to javascript on the server side until browsers catch up!  Unfortunately, this is not something I’ve been able to apply to a live server, yet.

XFDL in PHP…

Lately, I have started working on the OpenXFDL project again, concentrating efforts in making a C++ application with WX Widgets that can compile for Windows, Mac, and Linux.  Getting frustrated with libxml2 and wanting to learn more of xpath queries, I decided to make a XFDL reader in PHP.  This can be applied easily as browser/e-mail plugins to view XFDL forms without the need of an external viewer.  I’ve been bad about posting but I’ll work to add more to this blog soon.  For now, here is a sight to try it out with.  Unlike previous stuff, you can do a straight XFDL form instead of converting to XML first.  Try it out!

Disappointment with IE.

A pivotal question in development is whether to use new technology or not. HTML5 and CSS can make great pages but Internet Explorer, being a huge portion of the browsers used, does not handle these except in the most recent versions. A quick google search led me to this page which had a great script to work with this problem. The work around is to create new elements to match HTML5. The detailed analysis is located in the link above.

<!--[if IE]-->
	<script type="text/javascript">
		(function(){
			var html5elmeents = "address|article|aside|audio|canvas|command|datalist|
				details|dialog|figure|figcaption|footer|header|hgroup|
				keygen|mark|meter|menu|nav|progress|ruby|section|
				time|video".split('|');
			for(var i = 0; i < html5elmeents.length; i++){
			document.createElement(html5elmeents[i]);
			}
		}
	)();
	</script>
<!--[endif]-->

EDIT: Got the page looking like I want it in IE, Firefox and Chrome/Safari but found the above script was not needed.  I surrounded my HTML5 elements (<header>, <footer>, and <nav>) with <div> tags that include the desired HTML5 element.  This makes for an easy move to HTML5 when it’s more broadly implemented. Example:

<div class="footer">
	<!-- Include the same class name only if you want CSS styling specific to the footer -->
	<footer class="footer">This is my footer text.</footer>
</div>
.footer {
	position: absolute;
	background-color: black;
}

PHP’s chunk_split() in python…

The other day I posted some code with PHP method for compressing XFDL files. I was unfamiliar with PHP’s chunk_split function, so I googled it and came up with this reference.  I then wrote the appropriate code in Python which is a quick script like this:

#!/usr/bin/env python

#string chunk_split ( string body [, int $chunklen = 76 [, string $end = "\r\n" ]] )
def chunk_split(body,chunklen=76,end="\r\n"):
	data = ""
	for i in range(0,len(body),chunklen):
		data += body[i:min(i+chunklen,len(body))] + end
	return data

You can see this code in action through this output:

zds@CF55 ~/Desktop
$ python
Python 2.5.2 (r252:60911, Dec  2 2008, 09:26:14)
[GCC 3.4.4 (cygming special, gdc 0.12, using dmd 0.125)] on cygwin
Type "help", "copyright", "credits" or "license" for more information.
>>> from chunk import *
>>> test = """Hello, how are you today?  This is a test of my python interpreta
tion of the PHP function, chunk_split().  It should take this one line of writi
ng and split it by 76 characters and add a DOS compatible line end (e.g. \r\n)
by default.  I've done my best to have code as close as possible to the PHP fun
ction.  This was done in an attempt to work out a method of compression XFDL fi
les.  I've found this function to work but still need to figure out a way to ru
n a compatible gzip method to PHP's gzencode from Python."""
>>> chunk_split(test)
"Hello, how are you today?  This is a test of my python interpretation of the\r\
n PHP function, chunk_split().  It should take this one line of writing and s\r\
nplit it by 76 characters and add a DOS compatible line end (e.g. \r\n) by defa\
r\nult.  I've done my best to have code as close as possible to the PHP functio\
r\nn.  This was done in an attempt to work out a method of compression XFDL fil\
r\nes.  I've found this function to work but still need to figure out a way to \
r\nrun a compatible gzip method to PHP's gzencode from Python.\r\n"
>>>

It appears to work!  This still doesn’t fix my compression problems with the XFDL files though.  It would appear that gzencode does the correct compression, now I just need to find a way to do the same compression in Python.  The GZipFile methods do not output the same as gzenecode() in PHP.

XFDL Viewer Update…

As I dig through miles of XML, I realize I have not posted lately. I’ve been a bit busy meeting the May 15th deadline for my project. But here’s a quick update. First, don’t forget to view the update viewer. It’s not pretty, but it works to the point I’ve set it. I’ve changed from PHP to using Python CGI (a language I’m more comfortable with) and I’ve done what took two weeks in two days. Too bad this wasn’t thought of before!! Anyhow, I figured I’d pass along this bit of code from Neil Funk that shows a better method for decompression of an XFDL in Python:

#!/usr/bin/python
from base64 import *
import zlib

# OPEN FILES
inp = open('example.xfdl','rb').read()
out = open('example.xml,'wb')

# TAKE OUT THE MIME DATA
magic = inp.splitlines()[0]
data   = inp.split(magic)

# THE TRICKY PART -- Look to the python manual for explanation.
wbits = 15+32
newData = zlib.decompress(b64decode(data),wbits)

out.write(newData)
out.close()

And drumroll please, for Chris Hutton contributed this PHP code for recompressing an XFDL from XML.  I’m working to translate this to Python, but for the time being, an XML with an XFDL extension works.

// Export XML, gzip, and base64 encode. Append XFDL header information and output to user.
// XML is the raw data to be saved.
$newxml = $xml->asXML();
// chunk_split is new to me!
$output = chunk_split(base64_encode(gzencode($newxml)));
// Add the header!
$output = "application/vnd.xfdl;content-encoding=\"base64-gzip\"\n". $output;

header("Content-disposition: attachment; filename=\"{$filename}\"");
header("Content-type: application/vnd.xfdl");

echo $output;

So thank you all for your contributions!  I’ll try to keep this blog more up-to-date.

XFDL Viewer – Good and Bad.

I used to think of myself as a decent coder, but this XFDL project is a monster.  Particularly with the parsing schemes.  Let alone the May 15th suspense on the project!!  Oh well, if it doesn’t get done, I’m still working on it…  So I broke apart the XML and just to give a taste of the parsing for this, here’s my notes:

Mind you, I’m skipping the globals but here what needs to be parsed from there:

  • Title
  • Version
  • Fontinfo
  • Bgcolor
  • Print Settings
  • Bindings

This first block is the “field” form.  This is the main part to parse because this is where all values except checks and signatures will go.

<field sid="TO"> --> sid == div id
	<itemlocation>
		<ae>
			<ae>absolute</ae> -- style='position:absolute'
			<ae>y</ae>
			<ae>x</ae>
		</ae>
		<ae>
			<ae>extent</ae> -- dimensions
			<ae>l</ae>
			<ae>w</ae>
		</ae>
		<value>THIS IS WHAT NEEDS EDITTING!</value> - input, no border
		<broderwidth>0</broderwidth> --> style
		<fontinfo> --> style
			<ae>type</ae>
			<ae>size</ae>
			<ae>attribute</ae>
		</fontinfo>
		<justify>center</justify> --> style
		<scrollhoriz>wordwrap</scrollhoriz>
		<scrollvert>fixed</scrollvert>
		<next>TO</next> -> form taborder
		<previous>DATE_A</previous> -> form taborder
		<acclabel>lorum ipsum</acclabel>
		<format>
			<ae>string</ae> --> set form input type
			<ae>optional</ae> --> validation check
			<length>
				<ae>0</ae> vert
				<ae>18</ae> horiz
			</length>
		</format>
	</itemlocation>
</field>

Next part, check boxes.  Nothing too scary here.  Much the same as above.

<check sid=""> same
	<itemlocation></itemlocation> same
	<value>on|off</value>
	<fontinfo></fontinfo> same
	<next></next> same
	<previous></previous> same
	<acclabel></acclabel> same
</check>

Here we get complicated.  Nothing bad about the labels, except there form uses labels for definitions at the end and you’ll see it later where it is reused for a new purpose.  This could pose a good challenge!

<label sid=""> same
	<itemlocation></itemlocation> same
	<value>TEXT</value>
	<linespacing>1</linespacing> OPITONAL
	<fontinfo></fontinfo> same
	<fontcolor>black</fontcolor>
	<format></format> same
</label>

Lines, not too bad… will just be a simple parsing the xml to putting them on the page.

<line sid=""> same
	<itemlocation></itemlocation>same
</line>

Buttons!  These would be easy but they will associate with signatures.

<button sid=""> same
	<itemlocation></itemlocation> same
	<value compute="">FROM CERT</value>
	<type>signature|</type>
	<vfd_signmode>custom</vfd_signmode>
	<printvisible compute="">on|off</printvisible>
	<signformat>???WTF???</signformat>
	<signature>FOR BINDINGS</signature>
	<signer>FROM CERT</signer>
	<custom:onClick>function</custom:onClick>
	<signoptions>
		<ae>omit</ae>
		<ae>triggeritem</ae>
		<ae>coordinates</ae>
		<ae>ufv_settings</ae>
	</signoptions>
	<vfd_group>??</vfd_group>
	<format></format> same
	<previous></previous> same
	<next></next> same
	<image>FROM CERT?</image>
	<signatureimage>FROM CERT?</signatureimage>
	<signitemrefs>
		<ae>LOCK BINDS</ae> -- USE FOR VALIDATION
	</signitemrefs>
</button>

Not even touching signatures until I get the parsing scheme in place!

<signature>
	WILL DO LATER
</signature>

Data will be easy enough, just needs to be decoded and displayed.  Whew… may need to save the files to the server to display but I think HTML can handle an image from data.

<data sid=""> relates to signatures & images
	<filename></filename> -- image (optional)
	<mimedata encoding="base64-gzip"></mimedata>
</data>

Do I really need the toolbar if I’m not using it’s functions?

<toolbar sid="TOOLBAR">
	<bgcolor>
		<ae>gray60</ae>
	</bgcolor>
</toolbar>

Is IBM so dense they can’t find a new name for the toolbar tags instead of reusing label?

<label sid="TOP">
	<itemlocation>
		<ae>
			<ae>within</ae>
			<ae>TOOLBAR</ae>
		</ae>
		<ae>
			<ae>absolute</ae>
			<ae>0</ae>
			<ae>0</ae>
		</ae>
	</itemlocation>
	<image>PAGE1.ArmyLogoTop</image>
	<imagemode>clip</imagemode> -- style
	<active>off</active>
</label>

I won’t complain about this one!  Seems pretty simple, just like lines…

<spacer sid=""> same
	<itemlocation></itemlocation> same
</spacer>

So keep watching the blog… I’ll post more when I figure out how to handle all this data.  And this all needs to be cycled per page to output to the browser… yuck.

XFDL Viewer

The scope of the “Apps 4 the Army” competition that I am making my XFDL Viewer for is to use web apps.  So I did a quick change to PHP and read up and got a framework setup.  The idea is to be able to import the XFDL file and then parse the resulting XML to input values, either on a single form or by batch through an uploaded database.

The framework is complete and I’m pretty happy with the results as I’ve done much more application programming than web development, but PHP isn’t too bad.  After getting the frame work together, I started to work on parsing.  I mistakenly uploaded a XFDL file rather than the decompressed XML and I found something remarkable.  PHP’s SimpleXML apparently can decompress the XFDL file!! This takes out a very complicated step of my project!!!  I’m still working to figure out why the recompression does not produce the same output but that may not be a problem with the web interface.  Stay tuned for more updates.

Custom Brush for SyntaxHighlighter Evolved

Okay, before I get started let me just say that I realize there are several already set-up plugins for the WordPress Plugin, SyntaxHighlighter Evolved to include a brush for the *.batch language.  Also, there is a great article by the Plugin’s author that will guide you through developing a brush.  The reason I am posting mine is to pass a long a few things that went unsaid for the less experienced WordPress Plugin developer, but let me just say that this was much easier both in the plugin development and brush development than I thought it would be.  The reason I made my own brush, it’s just more fun to make my own!

Now, that being said, here we go!   My post for “Violating IT Policy” included a batch script for Cygwin to be portable.  since there was no brush in SyntaxHighlighter Evolved To develop a brush, you will need to set-up a new plugin for word press.  The plugin will be adopted by SyntaxHighlighter Evolved as you will see in a moment.  The structure for this plugin will be:

<root folder>/wp-content/plugins/
                        /plugins/<javascript brush>.js
                        /plugins/<php plugin>.php

For the javascript brush, this does have some tricky elements. but I’ve commented what I’m doing below.

/** shBrushBatch.js **/
/* Declare a new brush with SyntaxHighlighter.brushes.<your name for the brush> */
SyntaxHighlighter.brushes.Batch = function()
{
	/* Declare words that you need highlighted */
	var variable = 'clear cls goto set';
	var constants = 'if or';

	/* This is the heart of your brush, you can use the *.
	/* SyntaxHighlighter.regexLib.* brushes when applicapble. */
	this.regexList = [
		/* You may notice that my comments are looking for a css that does not match. */
		/* I'll explain below the script. */
		// comments
		{ regex: /(^::|rem).*$/gmi,                             css: 'string'},
		// stings
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'comments'},
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'comments'},
		{ regex: /echo.*$/gmi,                                  css: 'keyword'},
		// variables
		{ regex: /%w+\1/gmi,                                    css: 'keyword'},
		{ regex: /%\*|%%?~?[fdpnxsatz]*[0-9a-z]\b/gmi,          css: 'keyword'},
		// clear cls keywords
		{ regex: new RegExp(this.getKeywords(variable), 'gmi'), css: 'variable'},
		// if and key words
		{ regex: new RegExp(this.getKeywords(constants), 'gmi'),css: 'constants'},
		// labels
		{ regex: /^:.+$/gmi,                                    css: 'script'}
	];
};

/* Create the highlighter object. */
SyntaxHighlighter.brushes.Batch.prototype = new SyntaxHighlighter.Highlighter();
/* Set the Aliases */
SyntaxHighlighter.brushes.Batch.aliases = ['bat','batch'];

So the reason that my css does not match the actual of what it is would be because the theme does not match my preference.  I perfer comments to be green, so since the string for the RDark format is green, I had to assing my comments to the string.  This was pretty confusing but the way I figured out my color scheme was simple enough.  In <root>/wp-content/plugins/syntaxhighlighter/styles/ you will find all of the css files to coordinate with the theme.  Half way down, you will see “Actual Syntax Highlighter Colors” and it is at this point that you will want to see what all of your options are.  Rather than converting #5CE63B to green, I went and made a sample script once my plugin was complete, I then went and set up a color tester like this, in place of my normal brush file:

/** shBrushBatch.js  - color test version **/
SyntaxHighlighter.brushes.Batch = function()
{
	/* 	set your wordpress to:
			1
			string
			comments
			... continue until the last keyword ...
			color3
			1 I dropped the correct closing in the example for formatting. */
	var string = 'string';
	var comments = 'comments';
	// ... continue to the last keyword ...
	var keyword = 'color3';

	this.regexList = [
		{ regex: new RegExp(this.getKeywords(string), 'gmi'), 	 css: 'string'},
		{ regex: new RegExp(this.getKeywords(comments), 'gmi'),  css: 'comments'},
		// ... continue to the last keyword ...
		{ regex: new RegExp(this.getKeywords(color3), 'gmi'), 	 css: 'color3'}
	];
};

SyntaxHighlighter.brushes.Batch.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Batch.aliases = ['bat','batch'];

After doing this and seeing the colors, I could then associate which color I wanted for which sets of syntax.

Now, onto making the plugin work.  Obviously, you’ll need both of these files to have any results.  What this does is when you activate this plugin (yes, it does show in your plugins) then SyntaxHighlighter adopts it.  This script is pretty standard from what I saw online and is almost exactly out of the author’s blog post.  The comments at the front are what will appear in your WordPress under Plugins.  I’ve kept the comments mostly the same as the author, as he is describing it better than I could.

<?php
/*
Plugin Name: Batch Brush - SyntaxHighlighter Evolved
Descriptionn:  Adds support for the Batch language to SyntaxHighlighter Evolved.
Author: Zachary D. Skelton
Version: 1.0.2
Author URI: http://www.skeltonnetworks.com/
*/

// SyntaxHighlighter doesn't do anything until early in the "init" hook.
add_action('init','syntaxhighlighter_batch_regscript');

// Tell SyntaxHighlighter about this new brush.
add_filter('syntaxhighlighter_brushes','syntaxhighlighter_batch_addlang');

// Register the brush with WordPress.
function syntaxhighlighter_batch_regscript() {
	wp_register_script('syntaxhighlighter-brush-batch',
		plugins_url('shBrushBatch.js',__FILE__),
		array('syntaxhighlighter-core'),'1.0.2');
	}
// Add alternative names for your brush.
function syntaxhighlighter_batch_addlang($brushes) {
	$brushes['batch'] = 'batch';
	$brushes['bat'] = 'batch';

	return $brushes;
	}
?>

At this point you should be able to load your page.  If it cannot find the brush (you’ll get a dialog to let you know), you could replace plugins_url() in line 19 with a string of a direct path to the file, but there should be no need for it.  The most common reason for this is an error in your javascript brush, so make sure to check that before going to insane.  After this is all done, you may have problems seeing the results.  It took me 5 loads of the correct format before I saw the change, in that case, deactivate the plugin, clear the cache, change the plugin version number in line 6 and re-activate the plugin.  Should not need all of that but some browsers are fussy, and that takes care of any problem with the cache. As I said before, this is well documented and relatively easy to make.  You can see that I made my plugin only apply to my script but it would be easy to add more things to it.  I used a lot of my regex directly from this plugin because that is a skill I’m still working on.  But this was surprisingly simple, and you can find lots of good information on making plugins of your own.  It is surprisingly not too tough!

Moodling!

Moodle Logo
Moodle

Last year, I built a framework for a training site for my company in an effort to save some money.  This framework was highly restrictive because I was keeping it on the company network.  Still, I was able to build a training site on the local intranet that embedded flash classes, wrote to a database and was something that could be adapted with time all with html, javascript and using Microsoft Access as a database.

I found a much better and more practical solution, with the thought I will not be there to write the test in html and maintain the database forever.  Along comes moodle, an open source course management system.  This is much better than anything I’d dreamt of doing with html and javascript and it’s really amazing in it’s ability to adapt to several situations.  I’m sure with this application, there will not be any problem handing off the on-line training for the company.