Category Archives: JavaScript

OOPs! Inheritance for AngularJS redux…

So it turned out that what I thought was parasitic combination inheritance was just parasitic. The globalUtils.inheritPrototype() function was being called before the function/objects were being called, thus inheriting nothing.. I think that this is because Angular is calling the functions after the other JavaScript is called. Since (I think!) the code has to be structured in this decoupled way to allow flexible use of OO, I had to look again at how all the pieces fit together. It turns out that a properly configured function object that inherits from a base class looks like this:

function ChildFn3(globalService) {
    console.log("Start ChildFn3");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    console.log("Finish ChildFn3");
}

we can adjust inherited values such as arrays without ‘static’ behaviors as well:

function ChildFn4(globalService) {
    console.log("Start ChildFn4");
    ChildFn2.call(this, globalService);
    globalU.inheritPrototype(this, ChildFn2);
    this.colors.push('black');
    console.log("Finish ChildFn4");
}

Here’s the better, running example: http://philfeldman.com/inheritance/inherit3.html

OOP Inheritance for AngularJS

First, the caveat – I’ve just gotten this example to work. I will try using it in some larger code shortly, but I thought I’d document while everything seemed clear.

I’ve been working with Angular for a few months now, and am now doing reasonably complex things. As someone who has been coding for way too long, I like some of the things that Object Oriented programming gives you that Angular does not support (at least in a straightforward way). Primary among this is inheritance. I ran into this problem when I needed to make two mostly similar web pages that really didn’t lend themselves to multiple services/factories but could have been very cleanly built by extending a base class.

In Java/C++/Actionscript, etc, you have the capability to build base classes that can be extended. An example is setting up a particle base class that is extended to a moving particle class inherits from (Using Java here):

public class Particle{
    private vec3 position;
    public function setPosition(vec3 p){
        // code...
    }
    public function draw(){
        // code...
   }
}

To make the particle move, we need to add some kind of velocity and an update function that increments the position as a function of the velocity and time.

public class MovingParticle extends Particle{
    private vec3 velocity;
    public function setVelocity(vec3 p){
        // code...
    }
    public function update(double elapsed){
        // code...
   }
}

JavaScript has nothing like this and neither does Angular. YUI did, but that’s not supported any more. But through some contortions, JavaScript can handle inheritance. A pattern that I like is Parasitic Combination Inheritance, which I learned about in Professional JavaScript for Web Developers. I combined that with the Revealing Module Pattern, to get inheritance to work in a clean way. A fully working version of the code below is up at plunker. Some sections of the code below have been stripped out for clarity.

First, the base class:

var baseLogic = (function(window, undefined) {
    function ParentFn(globalsService) {
        this.myText = "Hello, World";
        this.myText2 = globalsService.getHello();
    }

    ParentFn.prototype.makeAlert = function() {
        alert(this.myText2);
    };

    return {
        parentPtr: ParentFn
    }
})(window);

Note that the baseLogic object is a function expression where the only accessible attribute is parentPtr, which points to the hidden function declaration ParentFn.

The child class uses a similar pattern. I pass in the baseLogic object just to keep things cleaner. Additionally, I pass in a globals object (created just like baseLogic) that contains a function that handles the mechanics of Parasitic Combination Inheritance.

var myLogic = (function(window, base, gbl, undefined) {
    //function ChildFn(){
    function ChildFn(globalsService) {
        var self = this;
        base.parentPtr.call(self, globalsService);
        self.myText = "Hello, World2";
        self.instanceAlert = function() {
            alert("instanceAlert = " + self.myText);
        }
    }

    gbl.inheritPrototype(ChildFn, base.parentPtr);

    ChildFn.prototype.makeAlert2 = function() {
        alert("ChildFn.prototype.makeAlert2");
    };

    return {
        childPtr: ChildFn,
    }

})(window, baseLogic, globals);

These can then be incorporated in Angular pretty trivially. The globalsService that is an argument in both the parent and child objects is created in the same way:

(function(angular, ml, undefined) {
    angular.module('globalsApp', [])
            .factory('GlobalsService', [ml.factoryPtr]);

    angular.module('inheritApp', ['globalsApp'])
            .controller('MainCtrl', ['GlobalsService', ml.childPtr]);
})(angular, myLogic);

The nice thing about this approach is that any component (controller, link functions in directives, factory, service) can all be built using OO techniques this way.

Here’s hoping it works on something more than my toy example

So here we are, several days later. Everything works like I hoped. Now all the angular code for a module is in one place, which looks nice and readable (example). And although it’s kind of messy (programming for school, rather than work), here’s the base class and the derived class that is used in the

.controller('MainCtrl', ['$http', '$timeout', '$document', 'PostService', postControllers.turkPostPtr])

call in the above example.

Woohoo!

Trigraphs and digraphs and milliseconds oh my!

I’ve been reading my papers on recognizing biometrics from keystroke info and it generally seems to either work from training neural nets or from examining the timing of certain letter patterns, particularly digraphs and trigraphs. I’m currently working on parsing the raw data into more manageable data that can be stored in a form specific table:

CREATE TABLE IF NOT EXISTS `trigraph_table` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `session_id` varchar(255) NOT NULL,
  `word` varchar(255) NOT NULL,
  `milliseconds` int(11) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

I can point back to the session_table for all the associated data if there is not sufficient clustering with just the session_id. Speaking of the session_table, it’s getting downright scary:

CREATE TABLE IF NOT EXISTS `session_table` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`session_id` varchar(255) NOT NULL,
`type` int(11) NOT NULL,
`entry_time` datetime NOT NULL,
`ip_address` varchar(255) NOT NULL,
`browser` varchar(255) NOT NULL,
`referrer` varchar(255) NOT NULL,
`submitted_text` text NOT NULL,
`raw` MEDIUMTEXT NOT NULL,
`parent_session_id` varchar(255) DEFAULT NULL,
`veracity` int(11) NOT NULL,
`hostname` varchar(255) NOT NULL,
`city` varchar(255) NOT NULL,
`region` varchar(255) NOT NULL,
`country` varchar(255) NOT NULL,
`latlong` varchar(255) NOT NULL,
`service_provider` varchar(255) NOT NULL,
`postal` varchar(255) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The idea that we are anonymous is just silly, from the moment we connect to a server, we’re basically exposed. And I’m just getting started with gathering data. Imagine what experienced web developers can do, particularly once cookies are enabled. Minimising that damage to someone who posts to the site is probably on the list of things to look at. Maybe server hardening? Certainly no links from the page.

On a different note, I’ve been thinking a bit about how confident we need to be of a source before we can start determining information trustworthiness. It seems to me that if we can show that the information comes from a wide number of individuals, we get information as well, even if we can’t sufficiently distinguish one. That trips up the one individual reporting something unique scoop aspect though.

Another thing that’s kind of interesting is typos and spell check. Keeping track of typos is easy – just run everything through a dictionary. A different, also potentially useful thing is to look at the differences in words produced by keystrokes and the submitted text. Where those differ, some sort of spell correction was used, which doesn’t behave like a paste, or it would be trapped. Anyway, it’s another form of interesting data.

 

Plans coming together

Ok, things are getting close. I have all the code pieces talking in a single application (http://philfeldman.com/irev1.html). After playing around with the ways that the key down/up events can be trapped, I decided to do as little processing as possible and simply record the keycode, time and status (up/down). The main reason for this is that things like the shift key are pressed while other keys are typed and then released. This way it’s easier to see that happen.

I also needed to prevent pasting, since that makes everything more complex (recognizing paste events, working around them, etc). It turns out that YUI dosn’t seem to handle the paste event, so you have to get it from the document directly:

var pasteTrap = document.getElementById('submittedTextInput');
pasteTrap.onpaste = function(e){
    alert("Paste is not allowed");
    return false;
}

As usual, we have the fine contributors to StackOverflow to point the way to do this

Amazingly, it even works in all browsers.

Next is cleanup, putting all the pieces into modules where they belong and doing some better css. I think something like secret might be pretty easy to put together. Colored backgrounds before coding up picture loading. But along those lines.

Last thing for the day is to finish the next pass at the IRB submission.

Safe(er) Data and Nonexistent Functions

If you want to reduce the likelihood of a SQL injection attack, use, precompiled queries. Nice in theory, tougher in practice. The nub of the problem appears to be the way that PHP binds data to execute the insert or the pull. With a nice, vulnerable query you can use string manipulation functions and as such make nice, general functions. However, if you’re mean, you can add something like “;DROP TABLE students; and poof, the table students is gone. Now, there should be a nice call that returns everything as an associative array, but that doesn’t seem to be reliable across PHP installations, so we need to work with the much more restrictive fetch();

Things to remember:

  • Everything has to happen when the statement is available, between prepare() and close().
  • Use bind_params(String datatypes…) to send data and bind_results for returning data. bind_params is less picky – you can access elements of an array directly. For bind_results you have to have individual variables declared.
  • When things go wrong in the PHP mysql code, it is likely that an HTML table will be returned. That will need to be handled.
  • Stringify and parse of objects into and out of JSON may or may not handle hierarchies. Watch what goes on in the debugger.

Anyway that just about doubled the line count in the middleware and bound the PHP code much more tightly to the form of the database. That being said, this is intended to have some production values in it anyway, so that may be a good thing. The new and improved results are in the same old place, namely io2.html. Next comes the integration of all that DB work, the recognizer part, and the panel part.

Basic Chores

Not much to write about, but some good work got squeezed in today. First, I was able to transition over to mysqli, which turned out to be nearly painless. I’ve been working on a thin layer that’s admittedly got some security holes, but that’s not what I’m trying to work through and the data’s junk anyway.

So to get use out of all this stuff, I need to have everything run on a server. I use Dreamhost, who I like a lot and have been with for years, and they give you PHP and mysql out of the box. So today was the day to try and take all the pieces that I have gotten working on my dev machine and migrate them to a place that people can access.  It did mean getting familiar with SSH and PuTTY all over again though.

The first step was creating a database. Since I’m on a shared server, that’s not as simple as when you own the instance, but Dreamhost has a dashboard that makes this pretty reasonable. It does take time though for everything to trickle through though. Once it was up and running I created a new copy of the same old table I’ve been using for my tests and populated it with the same old data.

Once that was done I fired up WinSCP and copied the files over, changed the config file and tried running the php script on the command line. Imagine my surprise when everything ran right the first time. And then compound that again when the web page worked as well. And both of those files had no changes. Repeat after me:

“Configuration files are wonderful”

“Relative addressing is also”

Anyway, here it is in all its glory: io2.html.

The next part is handling the submission of data to the db, which is making me a bit nervous about sql injection. I may just use the YUI Escape object to modify the string so it isn’t dangerous. Nope, that won’t work, but we can use blobs. Here’s how (from here):

/**
 * update the files table with the new blob from the file specified
 * by the filepath
 * @param int $id
 * @param string $filePath
 * @param string $mime
 * @return boolean
 */
function updateBlob($id,$filePath,$mime) {
$blob = fopen($filePath,'rb');

$sql = "UPDATE files
SET mime = :mime,
data = :data
WHERE id = :id";

$stmt = $this->conn->prepare($sql);

$stmt->bindParam(':mime',$mime);
$stmt->bindParam(':data',$blob,PDO::PARAM_LOB);
$stmt->bindParam(':id',$id);

return $stmt->execute();

}

On a related note, I wonder how many of our actions can be stereotyped in a way that can be detected in the browser?

Integration by parts

It’s vacation so I must be coding. Today it’s outside with a lovely view of the rolling hills surrounding Deep Creek Lake.

I’m working on getting all the pieces for the first version of the Recognizer working. The goal is to have a webapp that allows for original  “posts” or “comments” that pertain to a post. I’m thinking that both of these can be handled in the same table:

CREATE TABLE IF NOT EXISTS `session_table` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`session_id` varchar(255) NOT NULL,
`type` int(11) NOT NULL,
`entry_time` datetime NOT NULL,
`ip_address` varchar(255) NOT NULL,
`browser` varchar(255) NOT NULL,
`referrer` varchar(255) NOT NULL,
`submitted_text` text NOT NULL,
`raw` text NOT NULL,
`parent_session_id` varchar(255) DEFAULT NULL,
`veracity` int(11) NOT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

There is extra data being stored here (browser, ip, etc) simply because it will make correlations potentially easier at this state when I have little idea what works. I’m also storing the raw data along with the post so it can all be processed later, in multiple ways. At this point, the intent is to save the raw data as key/value pairs in JSON, mostly because it’s easy to make that conversion using Y.JSON.stringify.

The other thing that I’ll need to organize the posts/comments is a topic table. I think that for the time being, it can be taken from the title of the first post. Comments can then point to the topic, and that allows for filtering of what to see. Additional filleting at this level can be keywords, trustworthiness, location, etc.

Multichannel sound

It was looking like Java3D only handled Mono and stereo, but I just found com.sun.j3d.audioengines.javasound .JavaSoundMixer, It also uses javax.media.j3d.PhysicalEnvironment, which looks like it has built-in head tracking.

Darn it – got my hopes up too soon: “While the sound image created for final output to the playback system is either only mono or stereo, most device driver implementations will mix the left and right image signals generated for each rendered sound source before outputting the final playback image. Each sound source will use N input channels of this internal mixer. Each implemented Java3D audio device driver will have its own limitations and driver-specific characteristics. These include channel availability and usage (during rendering). Methods for querying these device-driver specific characteristics are provided.” (from javax.media.j3d.AudioDevice)

OK, I’m not ready to give up on Java yet. According to this bug report, multichannel support has been working for a while. My two options at this point are OpenAl through the LWJGL folks, and the javax.sound.sampled library.

Because I’d like to show graphically where the sounds are coming from, I’m going to try the LWJGL approach first.

Looks like multichannel support is in OpenAl, but will require care: “The multi-channel extension provides a mechanism to play multi-channel data via OpenAL. A variety of formats are supported. Multi-channel buffers can be attached or queued on a source. Note that when using the “Generic Software” device, the multi-channel buffers are mixed down to a stereo output. On a hardware device (such as the “Generic Hardware” device or a native device), each channel of a buffer requires a hardware voice. So, for example playing a buffer using the AL_FORMAT_51CHN16 format will require 6 free hardware voices. If the hardware resources are unavailable, the call to alSourceQueueBuffers or alSourcei will fail.”


And then there’s Javascript….

It turns out that there is a good deal of work going on in bringing multichannel audio to your browser. Since this *is* the future, it’s not a thing that I want to overlook, but I don’t want to put all that much time into it right now either. So here are some links: