Stanković Vladimir

Publish/Subscribe design pattern in Javascript using EventBroker/Mediator

Vladimir Stanković — Mon, 13 Aug 2012 09:06:20 +0000

To follow me on Twitter click here.
Visit Sargarepa (My efforts to better understand Javascript patterns) on github. Caution Sargarepa is in early phase of development and serves as a learning resource.

Before we begin checkout working Pub/Sub tutorial from github or download complete source code as zip archive .
After obtaining the source, open “/Sargarepa/pubsub.html” in your browser.

Introduction

Publish / Subcribe design pattern is built around simple concept. Essentially, we need three different entities: Publishers, Subscribers and EventBroker / Mediator.

Subcribers can subscribe to one or multiple channels / topics, and receive messages from multiple sources without the knowledge about publishers.

Publisher can publish messages / topics, without any knowledge about subscribers.

EventBroker / Mediator provides decoupling of publishers and subscribers.

Publish / Subcribe design pattern in javascript

I am going to explain implementation from top to bottom, revealing implementation details as we go.

We want to create one publisher and two subscriber objects for this example. EventBroker has responsability to manage subcriber objects and route messages from publisher to subscribers.

window.pubSub = new PubSub(); // Mediator-EventBroker

var inputStream = new InputStream(""); // Publisher

var mailBox = new MailBox("online"); // Subcriber 1
var mobileInbox = new MailBox("mobile inbox"); // Subcriber 2

Please note that we have placed EventBroker on global namespace. You should attach EventBroker to your application namespace. What other options do we have?

1) We could inject EventBroker into every Publisher instance through setter / constructor.
2) Publisher object can extend EventBroker and inherit the publish method.

How to publish message to message bus / channel?

InputStream is object that will serve as Publisher. After InputStream receives message, it should be able to send message to message bus / channel. Event Broker will broadcast received message to all subscribers subscribed to that channel.

inputStream.receiveMessage("First message");

Let’s see how our Publisher object look.

var InputStream = function(message) {
this.message = message || "";
}

InputStream.prototype.receiveMessage = function(message) {
this.message = message;
}

We could alter [InputStream.prototype.receiveMessage] method in the following way:

InputStream.prototype.receiveMessage = function(message) {
this.message = message;
pubSub.publish('new message', { message: this.message });
}

This approach will work. But we don’t want to couple publish logic with Publisher source code. Nicer solution would be to mark arbitary Publisher method as “publishable” dynamically at runtime. Goal is to register callback function that will be called every time after execution of any “publishable” method, so we basically need to mimic AOP for javascript [PubSub.prototype.publishAfter].

PubSub.prototype.publishAfter = function(target, targetFn, fn) {
var temp = target[targetFn];
target[targetFn] = function() {
temp.apply(target, arguments);
fn.apply(target, arguments);
}
}

How to use [PubSub.prototype.publishAfter] method?

You need to pass following arguments to [PubSub.prototype.publishAfter] method:
1. target object/context – Object that contain publishable method.
2. targetFn – This is name of the function we want to call. This parameter is passed as string value.
3. callback – Function that will be called everytime after execution of publishable method.

window.pubSub = new PubSub(); // Mediator-EventBroker
var inputStream = new InputStream(""); // Publisher

pubSub.publishAfter(inputStream, "receiveMessage", function() {
pubSub.publish('new message', { message: this.message });
});

inputStream.receiveMessage("First message");
inputStream.receiveMessage("Second message");
inputStream.receiveMessage("Third message");

You can make publishable any method in global / application namespace. Just provide correct context.

At this point we have completed logic needed on Publisher side. Now we are going to add one Subcriber object.

Subcriber doesnt have any knowledge about Publisher. We are going to add subscribe method onto the EventBroker prototype.

window.pubSub = new PubSub(); // Mediator-EventBroker

var mailBox = new MailBox("online"); // Subscriber 1
var mobileInbox = new MailBox("mobile inbox"); // Subscriber 2

pubSub.subscribe('new message', mailBox.setInbox, mailBox);
pubSub.subscribe('new message', mobileInbox.setInbox, mobileInbox);

Method [PubSub.prototype.subscribe] receives three arguments:

1. topic/channel – First argument is channel name. Subscriber can subscribe to one or multiple topics.
2. callback – Subscriber register callback function that will be called when new message arrives to message bus / channel
3. target – Subscriber object

EventBroker(PubSub) maintain list of channels. Every channel has a name and an associated collection of subscribers.

// Event Broker
var PubSub = function() {
this.channels = {};
};

Most imporant part of EventBroker are publish and subscribe methods. In order to understand better the structure of Event broker let’s see what the collection of channels may look at runtime when it is populated with topics and subscribers.

this.channels = {
"new message": [{ callback: function test() {}, target: MailBox }, {callback: fnSubscriber, target: null}],
"channel-1": [...],
"channel-2": [...],
}

We can register method from global / application namespace or object method to be called on subscriber’s part.

PubSub.prototype.subscribe = function(topic, callback, target) {
if (!this.channels[topic]) {
this.channels[topic] = [];
}
this.channels[topic].push({ callback: callback, target: target || null });
}

Publish method traverses through subscriber collection and fires registered callbacks.

PubSub.prototype.publish = function(topic, data) {
for (var i = 0, len = this.channels[topic].length; i < len; i++) {
var obj = this.channels[topic][i];
if (obj.target) {
createDelegate(obj.callback, obj.target)(data);
} else {
obj.callback(data);
}
}
}

In order to bind context(this) to callback function we are going to create createDelegate factory function. Javascript doesn’t have built-in delegate objects that can have function and “this” parameter. This behavior is easy to emulate. We pass function and target object as arguments to our createDelegate function, and as a result new function that will call original function with correct context is returned.

function createDelegate(fn, target) {
return function() {
return fn.apply(target, arguments);
}
}

Subscriber can unsubscribe from any topic at any time by removing its callback from subscriber’s queue.

PubSub.prototype.unsubscribe = function(topic, callback, target) {
for (var i = 0, len = this.channels[topic].length; i < len; i++) {
var obj = this.channels[topic][i];

if (target && obj["target"] == target && obj["callback"] == callback) {
p('Removing delegate function');
this.channels[topic].splice(i, 1);
break;
} else if (obj["callback"] == callback) {
p('Removing regular function');
this.channels[topic].splice(i, 1);
break;
}
}
}

Download complete source code as zip archive or checkout source from github.
After you have obtained source, open “/Sargarepa/pubsub.html” in your browser.

Final notice:
Working implementation uses RequireJS in order to organize project in smaller modules. I strongly encourage you to use RequireJS for your javascript project.

Source code listing

EventBroker

"use strict"
define(['app/util'], function(Util) {
var PubSub = function() {
this.channels = {};
};

PubSub.prototype.subscribe = function(topic, callback, target) {
if (!this.channels[topic]) {
this.channels[topic] = [];
}
this.channels[topic].push({ callback: callback, target: target || null });
}

PubSub.prototype.publish = function(topic, data) {
for (var i = 0, len = this.channels[topic].length; i < len; i++) {
var obj = this.channels[topic][i];
if (obj.target) {
Util.createDelegate(obj.callback, obj.target)(data);
} else {
obj.callback(data);
}
}
}

PubSub.prototype.unsubscribe = function(topic, callback, target) {
for (var i = 0, len = this.channels[topic].length; i < len; i++) {
var obj = this.channels[topic][i];

if (target && obj["target"] == target && obj["callback"] == callback) {
p('Removing delegate function');
this.channels[topic].splice(i, 1);
break;
} else if (obj["callback"] == callback) {
p('Removing regular function');
this.channels[topic].splice(i, 1);
break;
}
}
}

PubSub.prototype.publishAfter = function(target, targetFn, fn) {
var temp = target[targetFn];
target[targetFn] = function() {
temp.apply(target, arguments);
fn.apply(target, arguments);
}
}
return (PubSub);
});

Publisher

"use strict"
define(function() {
var InputStream = function(message) {
this.message = message || "";
}

InputStream.prototype.receiveMessage = function(message) {
this.message = message;
// pubSub.publish('new message', { message: this.message });
}

return (InputStream);
});

Subscriber

"use strict"
define(function() {
var MailBox = function(type) {
this.type = type;
this.inbox = [];
}

MailBox.prototype.getInbox = function() {
return this.inbox;
}

MailBox.prototype.setInbox = function(data) {
p('Hey I am updated: ');
p(data);
return this.inbox.push(data);
}

return (MailBox);
});

Util

"use strict"
define(function() {
function createDelegate(fn, target) {
return function() {
return fn.apply(target, arguments);
}
}

return {
createDelegate: createDelegate
}
});

Code for testing EventBroker, Publisher and Subscriber

require(['./common'], function (common) {

require(['app/pubsub', 'app/util', 'app/mailbox', 'app/inputstream'], function(
PubSub, Util, MailBox, InputStream) {

window.pubSub = new PubSub();

var inputStream = new InputStream("");

var mailBox = new MailBox("online");
var mobileInbox = new MailBox("mobile inbox");

pubSub.subscribe('new message', mailBox.setInbox, mailBox);
pubSub.subscribe('new message', mobileInbox.setInbox, mobileInbox);

pubSub.publishAfter(inputStream, "receiveMessage", function() {
pubSub.publish('new message', { message: this.message });
});

inputStream.receiveMessage("First message");

pubSub.unsubscribe('new message', mailBox.setInbox, mailBox);
pubSub.unsubscribe('new message', mobileInbox.setInbox, mobileInbox);

p(pubSub);

function fnSubscriber(data) {
p('Hey I have recieved that message too');
p(data);
};

// Test Global function as subscriber
pubSub.subscribe('new message', fnSubscriber);
inputStream.receiveMessage("Druga poruka");
// pubSub.unsubscribe('new message', fnSubscriber);

p(pubSub);

// Test aop on function on global namespace
window.fnPublisher = function (temp) {
this.message = temp;
p("I am publisher from namespace");
}

pubSub.publishAfter(this, "fnPublisher", function() {
pubSub.publish('new message', { message: this.message });
});

fnPublisher("aop on global namespace published message");

});
});

References

Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability
Patterns For Large-Scale JavaScript Application Architecture
Learning JavaScript Design Patterns

Require.js Optimization – part2

Vladimir Stanković — Mon, 02 Jul 2012 09:36:15 +0000

Follow me on Twitter click here
Jump to complete source code source code.
Visit Keleraba (Backbone, Require, Handlebars) boilerplate project on github. Caution Keleraba is in early phase of development and serves as a learning resource.

This is part2 tutorial in RequireJs series(part1, part2). Reading material about r.js and RequireJS is in references section of article.

Introduction

This is short article in which I will explain you how to build and optimize your javascript code with ReqireJS optimization tool r.js.

James Burke recommends using node.js for optimizing and building your code. Make sure you have node.js installed on your machine. You can download node.js from here.

Require.js optimizer

Create your build script file on following location [webapp/build/build.js]

Build your application with node.js and r.js executing following command

node r.js -o build.js

For demonstration purposes I have made 3 examples of building application with RequireJS.

Example 1: Optimize modules

Main module app.js has many dependencies and we want to bundle all that dependencies into single file. Mark modules for optimization in modules array of configuration object inside build.js. First example will contain only one module for optimization [webapp/js/app.js].

Paste following code to your build.js file.

{
baseUrl: "js/lib",
appDir: "..",
dir: "dist",

modules: [
{ name: "app" }
],

paths: {
app: '../app',
jquery: 'jquery'
}
}

appDir – Telling us where webapp root directory is located relative to build.js script.
dir – Output directory relative to build.js

Console output of build.js

Uglifying file: C:/vlada/practice/require/webapp/build/dist/build/r.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/app/category/category.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/app/category/item.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/app/category/specialItem.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/app.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/lib/jquery.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/lib/require.js
Uglifying file: C:/vlada/practice/require/webapp/build/dist/js/lib/text.js

js/app.js
----------------
js/lib/jquery.js
js/app/category/category.js
js/app/category/item.js
js/app/category/specialItem.js
js/app.js

All [webapp/js/app.js] dependencies are now minified with Uglify.js and concatenated into single file. But what happened with individual modules? Module [webapp/js/app/category/specialItem.js] has a dependency [webapp/js/app/category/Item.js]. Open your optimized [webapp/js/app/category/specialItem.js] and pass it to beatifier. As you can see from output [js/app/category/item.js] is not bundled with our [js/app/category/specialItem.js].

Optimized module:

define(["./item"], function (Item) {
var SpecialItem = function (itemName) {
this.color = "Default color", this.weigth = "Default weigth", Item.call(this, itemName)
};
return SpecialItem.prototype = new Item, SpecialItem.prototype.constructor = SpecialItem, SpecialItem
})

Example 2: Optimize additional modules

In this example we will add [webapp/js/app/category/specialItem.js] to modules array of build.js configuration object.

Paste following code to your build.js file.

{
baseUrl: "js/lib",
appDir: "..",
dir: "dist",

modules: [
{ name: "app" },
{ name: "app/category/specialItem" }
],

paths: {
app: '../app',
jquery: 'jquery'
}
}

Console output of build.js

Now [js/app/category/item.js] is bundled with [js/app/category/specialItem.js] module.

Optimized module:

define("app/category/item", [], function () {
var Item = function (itemName) {
this.name = itemName
};
return Item.prototype.getItemName = function () {
return this.name
}, Item
}), define("app/category/specialItem", ["./item"], function (Item) {
var SpecialItem = function (itemName) {
this.color = "Default color", this.weigth = "Default weigth", Item.call(this, itemName)
};
return SpecialItem.prototype = new Item, SpecialItem.prototype.constructor = SpecialItem, SpecialItem
})

Require.js optimizer compile dependencies to single file

Paste following code to your build.single.js file.

{
baseUrl: "../js/lib",
name: "../app",
out: "app-built.js",

paths: {
app: '../app',
jquery: 'jquery',
}
}

name – Location of module you want to export as a single file with all dependencies.
out – File “app-built.js” is created

Console output of build.single.js:

Tracing dependencies for: ../app
Uglifying file: C:/vlada/practice/require/webapp/build/app-built.js

C:/vlada/practice/require/webapp/build/app-built.js
----------------
C:/vlada/practice/require/webapp/js/lib/jquery.js
C:/vlada/practice/require/webapp/js/app/category/category.js
C:/vlada/practice/require/webapp/js/app/category/item.js
C:/vlada/practice/require/webapp/js/app/category/specialItem.js
C:/vlada/practice/require/webapp/js/lib/../app.js

All of our modules are now glued together into single [webapp/build/app-built.js] file.

Source code listing

build.js

{
baseUrl: "js/lib",
appDir: "..",
dir: "dist",

modules: [
{ name: "app" },
{ name: "app/category/specialItem" }
],

paths: {
app: '../app',
jquery: 'jquery'
}
}

build.single.js

{
baseUrl: "../js/lib",
name: "../app",
out: "app-built.js",

paths: {
app: '../app',
jquery: 'jquery'
}
}

In the RequireJS tutorial part 3 I will talk about RequireJS integration with Backbone, Handlebars and jQuery with Require.js. Stay tuned You can follow me on Twitter click here

References
http://requirejs.org/docs/optimization.html
example.build.js

Require.js Dependency management – part1

Vladimir Stanković — Fri, 29 Jun 2012 12:21:14 +0000

This is introductory RequireJS tutorial in RequireJs series(part1, part2). Reading material about AMD and RequireJS is in references section of article.

Introduction

Before or after reading this article I strongly recommend to read documentation on RequireJS website. James Burke did great job here.
RequireJS is a Javascript file and module loader which allows for asynchronous JavaScript loading and dependency management(can be used to load more than just Javascript files).

Require.js is a dependency management and asynchronous script loading tool(AMD library).
What that means? AMD stands for Asynchronous Module Definition.

RequireJS is asynchronous which means that you can do non-blocking and parallel fetch of your javascript files.

RequireJS is built around Module pattern. Modern web applications tend to have fairly complex front-ends. Module pattern should improve maintability of our bloated javascript code. Remmember those giant javascript files and svn merge conflict hell on your last project? Javascript code should consist of smaller components enforcing separation of concerns and avoiding globals since modules are wrapped by closures.

RequireJS is well defined and standardized. While we wait ES-Harmony to knock on our doors, libraries like RequireJS are giving us hint how we should structure our applications. Require.js works in current browsers.

Basic structure

STEP 1 – How to structure RequireJS project

This is our sample RequireJS project structure.

Build scripts and RequireJS optimization tool r.js are inside [build] directory.

Application code reside in [webapp/js/app] directory. This is place where you should place all of your /Model/View/Router/Template code.

Libraries like jQuery, Backbone, Handlebars and others are inside [webapp/js/lib] directory.

Application config and main entry point is [webapp/js/app.js]

STEP 2 – How to include RequireJS

Your [webapp/index.html] should look like this

<html>
<head>head>
<body>
<div id="test">Some sample contentdiv>
<script data-main="js/app.js" src="js/lib/require.js">
body>
html>

Attribute [data-main="js/app.js"] is entry point of our application. This means that RequireJS will first load [js/app.js] after initialization.

STEP 3 – How to configure RequireJS

Open your [webapp/js/app.js] file.

requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app',
jquery: 'jquery'
}

});

requirejs(['jquery'], function($) {
console.log($('#test'));
});

[baseUrl: 'js/lib'] – RequireJS loads code realative to directory specified in baseUrl. By default baseUrl is set to the same directory as data-main. If you dont specify data-main attribute and baseUrl property is not present in RequireJS config, than default path is directory that contains html page which include RequireJS library.
base url

Attribute [paths] – paths config

STEP 4 – How to use requre() and define() in RequireJS

require() and define() are most important concepts in RequireJS.

define() – Used for module definition.
Consists of module wrapper, dependency list and definition function.

define(['dependency1', ['dependency2', ['dependency3'], function(dependency1, dependency2, dependency3) {
var Module = function(value) {
this.property = value;
}
return (Module);
});

require() – Used for dependency loading
Consists of public api, dependency list, callback function

requirejs(['dependency1', ['dependency2', ['dependency3'], function(dependency1, dependency2, dependency3) {
// You can use your imported module here
var instance = dependency1;
var constructorFunction = new dependency2();
});

Prototypal inheritance and Require.js

Skip to complete source code.

With RequireJS you can organize your modules in separate files with ease.

Now we are going to add 3 object definitions to our project: Category, Item and Specialized Item.

With RequireJS you can provide function or object in return statement. We are going to use this feature to retrieve constructor functions for our object.

With RequireJS you can import and use external dependencies inside your module. We are going to use this feature to achieve prototypal inheritance in RequireJS.

[webapp/js/app/category/category.js]

Category is collection of our Items.

"use strict";

define(function() {

var Category = function() {
this.name = 'Default name';
this.category = 'Default category';
this.items = [];
}

Category.prototype.showItems = function() {
for (var i = 0, len = this.items.length; i < len; i++) {
console.log(this.items[i]);
}
}

Category.prototype.addItem = function(item) {
this.items.push(item);
}

return (Category);

});

[webapp/js/app/category/item.js]

Item is base object.

"use strict";

define(function() {

var Item = function(itemName) {
this.name = itemName;
}

Item.prototype.getItemName = function() {
return this.name;
}

return (Item);

});

[webapp/js/app/category/specialItem.js]

SpecialItem is object that extends Item. In order to extend Item object, we must import Item as a dependency['./item'].
Now Item object is available for use in our new SpecialItem module.

"use strict";

define(['./item'], function(Item) {

var SpecialItem = function(itemName) {
this.color = 'Default color';
this.weigth = 'Default weigth';
Item.call(this, itemName);
}

SpecialItem.prototype = new Item;
SpecialItem.prototype.constructor = SpecialItem;

return (SpecialItem);

});

Source code listing

[webapp/js/app.js]

requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app',
jquery: 'jquery'
}
});

requirejs(['jquery', 'app/category/category', 'app/category/item', 'app/category/specialItem'],
function($, Category, Item, SpecialItem) {
var c1 = new Category();
c1.items.push(new Item('RequireJS in Action'));
c1.items.push(new Item('Javascript Good parts'));
c1.items.push(new Item('Some book'));
c1.items.push(new SpecialItem('Special promotion book'));
c1.showItems();
console.log(c1);
});

[webapp/js/app/category/category.js]

[webapp/js/app/category/item.js]

"use strict";

define(function() {

var Item = function(itemName) {
this.name = itemName;
}

Item.prototype.getItemName = function() {
return this.name;
}

return (Item);

});

[webapp/js/app/category/specialItem.js]

In next part of Require.js series I will talk about r.js RequireJS optimization and build tool.

Follow me on Twitter click here

References:
http://addyosmani.com/writing-modular-js/
http://msdn.microsoft.com/en-us/magazine/hh227261.aspx
http://tomdale.net/2012/01/amd-is-not-the-answer/
http://tagneto.blogspot.com/2012/01/reply-to-tom-on-amd.html

How to get url parameters javascript

Vladimir Stanković — Fri, 15 Jun 2012 08:42:55 +0000

This is simple function for extraction of query string parameters. I think that code is self explanatory.

Result

Follow me on Twitter click here

Proxy Ajax requests, Curl and Symfony 2

Vladimir Stanković — Mon, 11 Jun 2012 19:23:15 +0000

In this article I will explain, how to make cross-domain requests through the proxy using Curl and Symfony 2.

Jump to #source-code and skip following errata on how to proxy Ajax requests.

Usual scenario looks like this
1. Client send ajax request to server
2. Your server forwards request to external/remote server
3. Waiting on response from remote server
4. Parse and process response from remote server
5. Send response back to client

First we shall check if client request is XmlHttpRequest using Symfony 2 built in method

$request->isXmlHttpRequest()

STEP 1: Client code

Client code is quite simple.

You need to craft Ajax request in following way.

1. Specify rest url on your server for handling cross-domain ajax requests.

url: "{{ path('_ajaxProxy') }}"

2. Wrap request data

We need some data in order to create curl request on server-side.
For this example you need to send object with following properties to your server.

{
restUrl: "external-api-url", // Your target url on remote server
method: "POST", // Type of request you want to issue to remote server
params: {
action: "getFriendsList" // Parameters you are sending to remote server
}
}

STEP2: Forward request to remote server

This step is bit tricky.

Client request is arrived to your server-side code. First you need to parse and validate request data.

To repeat once more … you need following data on server:

$restUrl = $request->request->get('restUrl'); // Your target url on remote server
$method = $request->request->get('method'); // Type of request you want to issue to remote server
$params = $request->request->get('params'); // Parameters you are sending to remote server
$contentType = $request->request->get('contentType'); // Content-type
?>

You need to create curl request and set parameters you have recieved from client.

// Initialize curl handle
$ch = curl_init();

// Set request url
curl_setopt($ch, CURLOPT_URL, $restUrl);

// TRUE to include the header in the output.
curl_setopt($ch, CURLOPT_HEADER, true);

// A custom request method to use instead of "GET" or "HEAD" when doing a HTTP request.
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
if ($params != null) {
// The full data to post in a HTTP "POST" operation.
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params));
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
?>

I strongly suggest to read php manual in order to get familiar with the curl configuration: http://php.net/manual/en/function.curl-setopt.php

You have enough data to send request to remote server. After executing curl handle, response from remote server is stored in $response variable.

$response = curl_exec($ch);
curl_close($ch);
?>

You have basic setup. Now we are going to add cookie support to our ajax proxy.

Why do we need cookies?

Recently I needed to integrate symfony 2 application with wordpress portal. Authentication is done on WordPress side, and symfony application is using wordpress cookies to authorize users for accessing protected featues.

In production both applications share same domain, but in test enviorment there is a lot of mess (different domains, ports etc).

Where is problem?

Application written in Symfony 2 need to consume some protected backend functionalities on WordPress side. There is a lot personalized data that is fetched via ajax calls, and this is reason why we need cookies.

How to get cookies from Symfony2 request and set mutplie cookies to Curl?

We need to extract multiple cookies from Symfony 2 request object and set them to curl handle.

// Get all cookies from Symfony request object
$requestCookies = $request->cookies->all();

// Prepare and set multiple cookies to curl handle
$cookieArray = array();
foreach ($requestCookies as $cookieName => $cookieValue) {
$cookieArray[] = "{$cookieName}={$cookieValue}";
}

// Be sure to set whitespace after '; ' when creating cookie string
$cookie_string = implode('; ', $cookieArray);
curl_setopt($ch, CURLOPT_COOKIE, $cookie_string);
?>

How to get cookies Curl response and set multiple cookies to Symfony response?

Remmember when we configured curl with CURLOPT_HEADER=true? Now we are going to parse cookies from curl http response.

// Get header and response data from curl response
list($headers, $response) = explode("\r\n\r\n",$response,2);
// We are using regex to parse cookies from curl response
preg_match_all('/Set-Cookie: (.*)\b/', $headers, $cookies);
// Store cookies
$cookies = $cookies[1];
?>

Raw cookies are parsed and stored in cookie array. Then each cookie need to be converted to Symfony Cookie object and injected to Symfony response headers.

foreach($cookies as $rawCookie) {
$cookie = \Symfony\Component\BrowserKit\Cookie::fromString($rawCookie);
$value = $cookie->getValue();
if (!empty($value)) {
$value = str_replace(' ', '+', $value);
}
$customCookie = new Cookie($cookie->getName(), $value, $cookie->getExpiresTime()==null?0:$cookie->getExpiresTime(), $cookie->getPath());
$response->headers->setCookie($customCookie);
}
?>

FINAL NOTICE:

Close and store session data before initializing curl handle or you can run into deadlock.

session_write_close();
$ch = curl_init();
?>

What could happen if you forgot to close session?

Here is one scenario:

PHP script S1 create/sends curl POST request to script S2 on same Apache server/PHP Enviorment. If page S1 and S2 share same session, script S2 will not start executing until end of script S1 lifetime. But script S1 is waiting on response from script S2. This is point where deadlock happen. The default session handler locks the session file for the duration of the page request.

Complete source code listing for ajax proxy
Client sample code

function sendAjaxRequest(){
$.ajax({
type: "POST",
dataType: 'json',
url: "{{ path('_ajaxProxy') }}",
data: {
restUrl : "/external-api-url/",
method: 'POST',
params: {
action: "getFriendList"
}
},
success: function(data, textStatus, jqXHR) {
...
}
});
}

Server proxy code

namespace Proxy\Bundle\ProxyBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Cookie;

class AjaxProxyController extends Controller {
/**
* @Route("/r/ajax/proxy", name="_ajaxProxy")
* @Template()
*/
public function proxyAction(Request $request)
{
// Forbid every request but jquery's XHR
if (!$request->isXmlHttpRequest()) {// isn't it an Ajax request?
return new Response('', 404,
array('Content-Type' => 'application/json'));
}

$restUrl = $request->request->get('restUrl');
$method = $request->request->get('method');
$params = $request->request->get('params');
$contentType = $request->request->get('contentType');

if ($contentType == null) {
$contentType = 'application/json';
}

if ($restUrl == null || $method == null ||
!in_array($method, array('GET', 'POST', 'DELETE'))) {
return new Response('', 404, array('Content-Type' => $contentType));
}

session_write_close();
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $restUrl);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
if ($params != null) {
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($params));
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

$requestCookies = $request->cookies->all();

$cookieArray = array();
foreach ($requestCookies as $cookieName => $cookieValue) {
$cookieArray[] = "{$cookieName}={$cookieValue}";
}
$cookie_string = implode('; ', $cookieArray);
curl_setopt($ch, CURLOPT_COOKIE, $cookie_string);

$response = curl_exec($ch);
curl_close($ch);

list($headers, $response) = explode("\r\n\r\n",$response,2);
preg_match_all('/Set-Cookie: (.*)\b/', $headers, $cookies);
$cookies = $cookies[1];

if ($response === false) {
return new Response('', 404, array('Content-Type' => $contentType));
} else {
$response = new Response($response, 200,
array('Content-Type' => $contentType));
foreach($cookies as $rawCookie) {
$cookie = \Symfony\Component\BrowserKit\Cookie::fromString($rawCookie);
$value = $cookie->getValue();
if (!empty($value)) {
$value = str_replace(' ', '+', $value);
}
$customCookie = new Cookie($cookie->getName(), $value, $cookie->getExpiresTime()==null?0:$cookie->getExpiresTime(), $cookie->getPath());
$response->headers->setCookie($customCookie);
}
return $response;
}
}
}

Read more about this topic:

http://developer.yahoo.com/javascript/howto-proxy.html

Follow me on Twitter click here

Segmentacija bazirana na teksturama

Vladimir Stanković — Sat, 12 Nov 2011 18:17:08 +0000

Slike iz prirodne okoline su najčešće jako kompleksne. Površine različitih objekata mogu biti prekrivene teksturama koje nemaju jasno izražene ivice. Uzmimo za primer koru drveta, keramičke pločice, ljudsku kožu, okean. Njihova struktura je ono što jasno karakteriše izgled površina koje zauzimaju. Poznat je veliki broj metoda za opisivanje i ekstrakciju tekstura, međutim ne postoji jedinstvena definicija teksture kao ni jedinstven matematički model koji bi proizveo teksturu. Kao još uvek potpuno neistražena analiza tekstura predstavlja zanimljivu oblast za naučnike i istraživače koji se bave kompjuterskom vizijom.
Uglavnom na slikama postoji više od jedne teksture. Glavni cilj je na neki način opisati teksturu na osnovu određenih matematičkih mera, izvršiti prepoznavanje a zatim je klasifikovati prema skupu unapred određenih vrednosti/mera u odgovarajuću klasu.

Ekstrakcija osobina tekstura pomoću GLC matrica

GLC matrica (Grey-Level Co-occurrence Matrix) je tabelerna predstava informacija koje se odnose na to koliko često se različite kombinacije osvetljenosti pojavljuju u slici. Primenom metoda GLC matrica moguće je izračunati različite osobine tekstura u određenom regionu slike, nezavisno od slike. Pre nego što krenemo u detaljnu diskusiju o načinu funkcionisanja GLC matrica treba napomenuti da postoje različite metode kojima je moguće izvući različite osobine tekstura. Postoje metodi prvog, drugog, trećeg i viših redova.

Metode prvog reda tekstura su statističke mere koje se mogu izračunati direktno iz slike, neuzimajući u obzir međusobne veze između piksela. Pogodne su za slike koje imaju slučajnu teksturu. Neke od vrednosti koje se mogu izračunati su varijansa, srednja vrednost, devijacija… Kompleksnije metode prvog reda, kao što su momenti, apsolutni momenti, centralni momenti ili entropija, moguće je izračunati preko histograma slike.
Metode drugog reda tekstura imaju svest od vezi u grupama od između dva najčešće susednih piksela.
Metode trećeg i viših redova tekstura (razmatrajući veze između tri i više piksela) su teorijski moguće, ali se ne sreću često u praksi zbog izuzetno velike vremenske zahtevnosti i težine interpretacije.

Nakon kraćeg osvrta na različite metode ekstrakcije tekstura iz slika nastavljamo se opisom funkcionisanja GLC matrica kao pripadnika metoda drugog reda. Svaki element koonkurense matrice predstavlja verovatnoću pojave para tačaka u određenom regionu slike. U daljem razmatranju piksel koji trenutno posmatramo definišemo kao referentni piksel a njegovog suseda kao susedni piksel. Radi lakšeg razumevanja GLC matrica jednostavnim primerom ilustrovaćemo funkcionisanje ovog metoda. Na slici ispod nalazi se primer jednog regiona u okviru slike.

Iteracijom kroz region slike sa leva na desno, svaki piksel u jednom trenutku postaje referentni piksel, počevši od piksela u gornjem levem uglu regiona. Pikseli koji se nalaze uz desnu ivicu nemaju svog suseda pa se ne uzimaju u razmatranje. U okviru ovog posta i prateće implementacije kao rastojanje između dva piksela koristi se korak od jednog piksela.

*U zaglavlju kolona priložene tabele nalaze se moguće vrednosti inteziteta susednog piksela. U zaglavlju redova se nalaze vrednosti referentnog piksela. U preseku reda i kolone nalazi se broj ponavljanja tranzicija između susednog i referentnog piksela

Tabela iznad je priložena radi lakšeg razumevanja sadržaja same GLC matrice. Ćelija sa koordinatama (0, 0) se popunjava sa brojem koji označava koliko puta u određenom regionu slike, referentni piksel sa intezitetom 0 ima desnog suseda sa intezitetom 0. Postoji četiri GLC matrice koje pokrivaju susede koji se nalaze pod različitim uglovima u odnosu na referentni.

Izračunavanje osobina tekstura zahteva simetričnu matricu. Sledeći korak je dovođenje matrice u simetričnu formu. Simetrična matrica znači da se iste vrednosti ponavalju na suprotnim stranama u odnosu na dijagonalu, primera radi sadržaj ćelije (1, 2) bi morao biti jednak sadržaju ćelije (2, 1).

Ukoliko bi računali vrednosti samo u jednom smeru, rezultat ne bi bio simetrična matrica. Primer vrednosti dobijenih računanjem ponavaljanja samo u smeru ka istoku

Ukoliko se brojanje ponavljanja vrši na ovaj način, samo u jednom pravcu, dobijena matrica neće biti simetrična. Vrednosti sa suprotnih strana nisu jednake. Simetrija može biti ostvarena ukoliko se svaki par piksela posmatra u oba pravca, kada je reč o horizonalnoj GLC matrici, levo i desno. Svaka pojava para X1 i X2 inkrementirala bi brojač u dva polja za 1, na lokacijama X1X2 i X2X1. Tako dobijena matrica može se smatrati simetričnom i naziva se horizontalna matrica.

Nakon izračunavanja četiri GLC matrice, po jedna za svaku orijentaciju 0̊, 45̊, 90̊ i 135̊ potrebno je izvršiti normalizaciju vrednosti u tabelama. Mere osobina tekstura zahtevaju da broj u ćeliji bude verovatnoća ponavaljanja a ne samo broj. Kako bi izračunali verovatnoću potrebno je vrednost svake ćelije podeliti sa brojem ukupnih ponavaljanja vrednosti tabele.

Opšti pojam verovatnoće može se definisati kao “broj ponavljanja nekog događaja, podeljen ukupnim brojem mogućih ishoda”.

Normalizaciju GLC tabele na osnovu prethodne definicije možemo predstaviti pomoću sledeće formule (gde i predstavlja red, a j kolonu)

Ukratko gore opisani koraci za dobijanje simetrične normalizovane GLC matrice se mogu opisati sledećim koracima

Kreirati GLC matrice po jedna za svaku orijentaciju 0̊, 45̊, 90̊ i 135̊
Dimenzije matrice jednake su broju nijansi sive u posmatranoj slici
U svaku ćeliju upisati broj ponavaljanja
Dobijenoj matrici sabrati sa svojom transponovanom verzijom kako bi se dobila simetrična matrica.
Normalizacija vrednosti u GLC matrice kako bi se generisale verovatnoće za svaki ishod

GLC matrice imaju isti broj redova i kolona kao kvantizacioni nivo slike. To znači da je za jednu 8bitnu grayscale sliku potrebna kvadratna matrica dimenzija 256×256, sa 65 536 ćelija. Ukoliko bi ulazna slika imala 16bitni podatak o nijansi sive, dimenzije GLC matrice bi iznosile 65 536×65 536 što bi ukupno dalo 429 496 720 ćelija. Primećuje se da veći nivo detalja slike uključuje znatno veći broj iteracija.

Određen broj aplikacija žrtvuje nivo detalja slike zarad manjeg procesorskog opterećenja, pa se 8 bitne slike često pretvaraju u 4 bitne (16×16 matrica sa 256 ćelija). Postoji još jedan razlog za degradaciju kvaliteta i kompresiju podatka o intezitetu slike. Ukoliko se koriste sve ćelije matrice dimenzija 256×256, veliki broj ćelija imao bi vrednost nula. GLC matrice posmatraju verovatnoće između dva piksela, pa bi veliki broj nula u tabeli doprineo lošoj aproksimaciji. Ukoliko je broj sivih nijansi u slici smanjen, smanjuje se i broj nultih vrednosti u tabeli, pa se i statistička validnost znatno poboljšava.

Nakon kreiranja i incijalizacije GLC matrica potrebno je izvući korisne informacije, statističke podatke o teksturama. Rezultat računanja pojedinačne osobine teksture je broj koji opisuje region slike. Osobine se mogu podeliti u tri grupe. Prva grupa sadrži metode bazirane na kontrastu, a to su : Kontrast, Homogenost i Raznolikost. Druga grupa predstavlja metode koje opisiju uređenost tekstura : energija i entropija. Metode ove grupe pokazuju koliko je neka tekstura regularna u okviru klizećeg prozora. Metode korelacije mere linearnu zavisnost sivih nivoa susednih piksela

Priložene su jednačine za ekstrakciju osobina tekstura :

Entropija
Entropija daje meru kompleksnosti slike. Kompleksne teksture uglavnom imaju veću entropiju.

Kontrast
Kontrast je mera kontrasta slike, preciznije količine lokalnih varijacija u intezitetu posmatrane slike.

Homogenost
Homogenost je osobina teksture suprotna kontrastu

Energija

Na kraju prilažem i implementaciju metode za ekstrakciju osobina tekstura.

// Author: Stankovic Vlada svlada@gmail.com
public class FeatureExtractorGLCM
{
private int dw;
private int dh;

private int nW;
private int nH;

private int height;
private int width;

public BufferedImage img;

public double [][] featureMatrix;
public double [][] glcm0, glcm45, glcm90, glcm135;

public FeatureExtractorGLCM(BufferedImage p_img, int p_dw, int p_dh)
{
img = p_img;
height = p_img.getHeight();
width = p_img.getWidth();

dw = p_dw;
dh = p_dh;

this.prepareImage(p_img);

// nW*nH Total number of feature vectors
// Every feature vector consists of six features
// rowMin, rowMax, colMin, colMax, Homogenity, Contrast
// featureMatrix = new double[nW*nH][20];
// glcm matrixes for all orientations of image
glcm0 = new double[256][256];
glcm45 = new double[256][256];
glcm90 = new double[256][256];
glcm135 = new double[256][256];
}
//16,8
public FeatureExtractorGLCM(BufferedImage p_img)
{
this(p_img, 50, 50);
}

public LinkedList glcmWindow()
{

return null;
}
/**
* Extend image size if there is need, if block size is unstandard
* @param p_img
* @return
*/
public BufferedImage prepareImage(BufferedImage p_img)
{
int newWidth = width;
int newHeight = height;

if ((newWidth % dw) != 0)
{
newWidth = width + (dw-(width%dw));
}

if ((newHeight % dh) != 0)
{
newHeight = height + (dh-(height%dh));
}

BufferedImage filteredImage = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);

for (int row = 0; row < height; row++)
{
for (int column = 0; column < width; column++)
{
int pixVal = ImgUtil.getRGBPixel(img, column, row);
ImgUtil.setRGBPixelByValue(filteredImage, column, row, pixVal);
}
}

height = newHeight;
width = newWidth;

nW = width/dw;
nH = height/dh;

featureMatrix = new double[nW*nH][20];

img = filteredImage;
return filteredImage;
}

public void calculateGLCM(int p_row, int p_col)
{
int offsetX = 0,
offsetY = 0;

int i2 = 0,
j2 = 0;

int pixCnt0 = 0,
pixCnt45 = 0,
pixCnt90 = 0,
pixCnt135 = 0;

for (int i = p_row; i < p_row+dh; i++)
{
for (int j = p_col; j < p_col+dw; j++)
{
// Generation of GLC, angle 0
offsetX = 1;
offsetY = 0;
// komsijski pixel
i2 = i + offsetX;
j2 = j + offsetY;

if (i2 < height && i2 > -1 && j2 > -1 && j2 < width )
{
int referencePix = ImgUtil.getRed(img, j, i);
int neiPix = ImgUtil.getRed(img, j2, i2);
glcm0[referencePix][neiPix]++;
glcm0[neiPix][referencePix]++;
pixCnt0+=2;
}

// Generation of GLC, angle 45
offsetX = 1;
offsetY = 1;
// Neighbourh pixel
i2 = i + offsetX;
j2 = j + offsetY;

if (i2 < height && i2 > -1 && j2 > -1 && j2 < width )
{
int referencePix = ImgUtil.getRed(img, j, i);
int neiPix = ImgUtil.getRed(img, j2, i2);
glcm45[referencePix][neiPix]++;
glcm45[neiPix][referencePix]++;
pixCnt45+=2;
}

// Generation of GLC, angle 90
offsetX = 0;
offsetY = 1;
// Neighbourh pixel
i2 = i + offsetX;
j2 = j + offsetY;

if (i2 < height && i2 > -1 && j2 > -1 && j2 < width )
{
int referencePix = ImgUtil.getRed(img, j, i);
int neiPix = ImgUtil.getRed(img, j2, i2);
glcm90[referencePix][neiPix]++;
glcm90[neiPix][referencePix]++;
pixCnt90+=2;
}

// Generation of GLC, angle 135
offsetX = 0;
offsetY = 1;
// Neighbourh pixel
i2 = i + offsetX;
j2 = j + offsetY;

if (i2 < height && i2 > -1 && j2 > -1 && j2 < width )
{
int referencePix = ImgUtil.getRed(img, j, i);
int neiPix = ImgUtil.getRed(img, j2, i2);
glcm135[referencePix][neiPix]++;
glcm135[neiPix][referencePix]++;
pixCnt135+=2;
}
}// end_for j
}//end_for i

// GLC Normalization
for (int i = 0; i < 256; i++)
{
for (int j = 0; j < 256; j++)
{
glcm0[i][j] /= pixCnt0;
glcm45[i][j] /= pixCnt45;
glcm90[i][j] /= pixCnt90;
glcm135[i][j] /= pixCnt135;
}
}
}

public void populateFeatureMatrix()
{
double mean = calculateMean(img);
double dev = calculateStandardDeviation(img, mean);
System.out.println("dev " + dev);
int cnt = 0;
double maxDev = 0;
for (int i = 0; i < height; i+=dh)
{
for (int j = 0; j < width; j+=dw)
{
this.calculateGLCM(i, j);

featureMatrix[cnt][0] = featureCalcMean(i, j);
featureMatrix[cnt][1] = featureCalcDeviation(i, j, mean);

if (featureMatrix[cnt][1] > maxDev) maxDev = featureMatrix[cnt][1];

double [] feat = featureCalcContrast();

featureMatrix[cnt][2] = feat[0];
featureMatrix[cnt][3] = feat[1];
featureMatrix[cnt][4] = feat[2];
featureMatrix[cnt][5] = feat[3];

feat = featureCalcHomogeneity();

featureMatrix[cnt][6] = feat[0];
featureMatrix[cnt][7] = feat[1];
featureMatrix[cnt][8] = feat[2];
featureMatrix[cnt][9] = feat[3];

feat = featureCalcEnergy();

featureMatrix[cnt][10] = feat[0];
featureMatrix[cnt][11] = feat[1];
featureMatrix[cnt][12] = feat[2];
featureMatrix[cnt][13] = feat[3];

if

(
// Homogenity
/*
featureMatrix[cnt][6] > 0.5 && featureMatrix[cnt][6] < 1 &&
featureMatrix[cnt][7] > 0.5 && featureMatrix[cnt][7] < 1 &&
featureMatrix[cnt][8] > 0.5 && featureMatrix[cnt][8] < 1 &&
featureMatrix[cnt][9] > 0.5 && featureMatrix[cnt][9] < 1 &&
featureMatrix[cnt][1] > maxDev/3

&&
featureMatrix[cnt][13] > 0.001 && featureMatrix[cnt][13] < 0.1
featureMatrix[cnt][11] > 0.001 && featureMatrix[cnt][11] < 0.1
&&
*/

featureMatrix[cnt][10] > 1 && featureMatrix[cnt][10] < 5 &&

featureMatrix[cnt][12] > 1 && featureMatrix[cnt][12] < 5

)
{
for (int y = i; y < i+dh; y++)
{
if (y < height && y > -1)
ImgUtil.setRGBPixelByRGB(img, 0xff, 255, 0, 0, j, y);
}
for (int y = i+dh-1; y < i+dh; y++)
{
if (y < height && y > -1)
ImgUtil.setRGBPixelByRGB(img, 0xff, 255, 0, 0, j, y);
}

for (int x = j; x < j+dw; x++)
{
if (x < width && x > -1)
ImgUtil.setRGBPixelByRGB(img, 0xff, 255, 0, 0, x, i);
}
for (int x = j+dw-1; x < j+dw; x++)
{
if (x < width && x > -1)
ImgUtil.setRGBPixelByRGB(img, 0xff, 255, 0, 0, x, i);
}

}
cnt++;
}
}
try
{
FSUtil.dumpToHtml(featureMatrix, "c:\\feature.html");
}
catch (IOException e) { e.printStackTrace();}
//FSUtil.dumpMatrixToTxt(featureMatrix, "Feature Matrix");
}

/**
Returns a measure of the intensity contrast between a pixel and its neighbor over the whole image.
Range = [0 (size(GLCM,1)-1)^2]
Contrast is 0 for a constant image.
*/
public double[] featureCalcContrast()
{
double retVal0 = 0,
retVal45 = 0,
retVal90 = 0,
retVal135 = 0;

for (int i = 0; i < glcm0.length; i++)
{
for (int j = 0; j < glcm0[0].length; j++)
{
retVal0 += Math.abs(i - j)*Math.abs(i - j) * glcm0[i][j];
retVal45 += Math.abs(i - j)*Math.abs(i - j) * glcm45[i][j];
retVal90 += Math.abs(i - j)*Math.abs(i - j) * glcm90[i][j];
retVal135 += Math.abs(i - j)*Math.abs(i - j)* glcm135[i][j];
}
}
return new double[] {retVal0, retVal45, retVal90, retVal135};
}

/**
*
Returns a value that measures the closeness of the distribution of elements in the GLCM to the GLCM diagonal.
Range = [0 1]
Homogeneity is 1 for a diagonal GLCM.
**/
public double[] featureCalcHomogeneity()
{
double retVal0 = 0,
retVal45 = 0,
retVal90 = 0,
retVal135 = 0;

for (int i = 0; i < glcm0.length; i++)
{
for (int j = 0; j < glcm0[0].length; j++)
{
retVal0 += glcm0[i][j] / (1 + Math.abs(i - j));
retVal45 += glcm45[i][j] / (1 + Math.abs(i - j));
retVal90 += glcm90[i][j] / (1 + Math.abs(i - j));
retVal135 += glcm135[i][j] / (1 + Math.abs(i - j));
}
}
return new double[] {retVal0, retVal45, retVal90, retVal135};
}

/**
Returns the sum of squared elements in the GLCM.
Range = [0 1]
Energy is 1 for a constant image.
*/
public double[] featureCalcEnergy()
{
double retVal0 = 0,
retVal45 = 0,
retVal90 = 0,
retVal135 = 0;

for (int i = 0; i < glcm0.length; i++)
{
for (int j = 0; j < glcm0[0].length; j++)
{
retVal0 += Math.pow(glcm0[i][j], 2);
retVal45 += Math.pow(glcm45[i][j], 2);
retVal90 += Math.pow(glcm90[i][j], 2);
retVal135 += Math.pow(glcm135[i][j], 2);
}
}

return new double[]{retVal0, retVal45, retVal90, retVal135};
}

public double featureCalcMean(int p_row, int p_col)
{
double retVal = 0;
for (int y = p_row; y < p_row+dh; y++)
{
for (int x = p_col; x < p_col+dw; x++)
{
retVal+=ImgUtil.getRed(img, x, y);
}
}
retVal = retVal/(height*width);
return retVal;
}

public double featureCalcDeviation(int p_row, int p_col, double p_mean)
{
double retVal = 0;
for (int y = p_row; y < p_row+dh; y++)
{
for (int x = p_col; x < p_col+dw; x++)
{
int pixel = ImgUtil.getRed(img, x, y);
retVal += Math.abs((int)p_mean - pixel);
}
}
retVal = retVal/(height*width);
return retVal;
}

// Mean
public static double calculateMean(BufferedImage p_img)
{
double retVal = 0;
int height = p_img.getHeight();
int width = p_img.getWidth();

for (int row = 0; row < height; row++)
{
for (int column = 0; column < width; column++)
{
retVal+=ImgUtil.getRed(p_img, column, row);
}
}
retVal = retVal/(height*width);
return retVal;
}
// Standard deviation
public static double calculateStandardDeviation(BufferedImage p_img, double p_mean)
{
double retVal = 0;
int height = p_img.getHeight();
int width = p_img.getWidth();

for (int row = 0; row < height; row++)
{
for (int column = 0; column < width; column++)
{
int pixel = ImgUtil.getRed(p_img, column, row);
retVal += Math.abs((int)p_mean - pixel);
}
}
retVal = retVal/((height*width));
return (double) retVal;
}

public void printMatrix(double [][] p_Matrix)
{
for (int i = 0; i < p_Matrix.length; i++)
{
for (int j = 0; j < p_Matrix[0].length; j++)
{
System.out.print(" | " + p_Matrix[i][j]);
}
System.out.println();
}
}
}

Follow me on Twitter click here

Maven – unable to update index for central

Vladimir Stanković — Thu, 22 Sep 2011 18:52:58 +0000

Recently I wanted to refresh my maven repos, but the following problem have occured

Unable to update index for central|http://repo1.maven.org/maven2

If you experience this problem, try to delete contents in the following directory

workspace_location\.metadata\.plugins\org.maven.ide.eclipse\nexus

Before directory deletion ensure that your Eclipse instance is not running.

After you deleted directory go to Window->Preferences->Maven and enable checkbox named “Download repository index updates on startup”.
Press OK and restart Eclipse.

Next time you start Eclipse Nexus indexer will update repository indexes.

Follow me on Twitter click here

WSH Javascript remove duplicates from array

Vladimir Stanković — Thu, 15 Sep 2011 16:49:03 +0000

How to remove duplicates from array in Javascript?
First, let’s see what the problem is. We have an unsorted array with integer numbers.

20, 10, 9, 4, 9, 30, 20, 4, 9

We expect our algorithm to output sorted array without any duplicates.

Step 1 – Sort array

The first step is to sort array of numbers. Sorting an array alphabetically can be achieved by calling following function

array.sort();

But what if you want to sort numbers? When executed without any parameters, javascript built-in sort() function produces the following result:

10, 20, 20, 30, 4, 4, 9, 9, 9

Array.sort() accepts optional parameter in the form of function pointer. The only thing you need to do is to provide the method that defines sort order(compares two numbers).

array.sort(function (a,b) { return a - b });

Less than 0: Sort “a” to be a lower index than “b”
Zero: “a” and “b” should be considered equal, and no sorting performed.
Greater than 0: Sort “b” to be a lower index than “a”.

You can always implement some custom sort function. In this example insertion sort implementation is provided as alternative to built-in javascript sort function.

Step 2 – Remove duplicates

Loop through array starting with the second element. If the current and the previous elements in the array are the same, delete current element. At the end you will have sorted array without duplicates.

for (var i = 1; i < array.length;) {
(array[i - 1] == array[i]) ? array.splice(i, 1) : i++;
}

Complete source code listing

//@author Stankovic Vlada [svlada@gmail.com]

var testArrays = {
sorted: [1, 2, 2, 3, 4, 5, 5, 5, 6, 6, 7],
unsorted: [20, 10, 9, 4, 9, 30, 20, 4, 9]
}

removeDuplicates(testArrays.sorted);
printArray(testArrays.sorted);

removeDuplicates(testArrays.unsorted);
printArray(testArrays.unsorted);

function removeDuplicates(array) {
array.sort(function (a,b) { return a - b });
// insertionSort(array);
printArray(array);
for (var i = 1; i < array.length;) {
(array[i - 1] == array[i]) ? array.splice(i, 1) : i++;
}
return array;
}

function printArray(array) {
WScript.echo(array);
}

function insertionSort(list) {
for (var j = 1; j < list.length; j++) {
var key = list[j];
var i = j - 1;
while (i >= 0 && key < list[i]) {
list[i+1] = list[i];
i = i - 1;
}
list[i+1] = key;
}
}

Follow me on Twitter click here

How to evaluate Xpath when DOCTYPE present in XML declaration

Vladimir Stanković — Wed, 14 Sep 2011 17:45:27 +0000

At the end of the article, the complete source code, compiled in one place, is available.

I had problem when loading and evaluating Xml document with declaration. Parsing breaks when you try to parse Xml document with a declaration on top.

The first idea was to remove the declaration from Xml until we finish manipulating DOM Nodes.
You can just preprocess your xml as following way:

var rexCleanDoctype = //gm;
content = content.replace(rexCleanDoctype, "");
XmlDocument.loadXML(content);

Now you can evaluate XPath expression and everything works like a charm.

Node = XmlDocument.selectSingleNode("//docroot/dir");

This is not a very clean and proper solution. So let’s get down to business and see what is happening inside. The first thing to remember is: “Always check for parsing errors”! They can give you a clue of what is happening. The following function will report whether there have been parsing errors.

function printParseError(xmlDoc) {
if (xmlDoc.parseError.errorCode != 0) {
var myErr = xmlDoc.parseError;
WScript.Echo("Xml parse error: " + myErr.reason);
}
}

Now when we try to load Xml file with declaration, we get the following error message:

Xml parse error: DTD is prohibited

What to do now?

After few more hours of reading documentation I have found out were the problem lays.

The problem occurs when ProhibitDTD property is set to true. Microsoft changed default version of ProhibitDTD property to true in MSXML 6.0.
Earlier versions of MSXML(3.0, 4.0 and 5.0) had this property set to false by default. This can lead to various security implications, such as denial of service attack. There is great article on MSDN Magazine site on this subject “XML Denial of Service Attacks and Defenses”.

If you want to read more about security issues regarding ProhibitDTD property, fine reading material is found on the two following urls: ProhibitDTD Property, MSXML Security Overview.

It is essential for you to set ProhibitDTD property to false.

XmlDocument.setProperty('ProhibitDTD', false);

There are two more important properties – resolveExternals and validateOnParse.

If you want to validate against DTD then set XmlDocument properties like this

XmlDocument.setProperty('ProhibitDTD', false);
XmlDocument.resolveExternals = true;
XmlDocument.validateOnParse = true;

Otherwise, if you just want to parse well formed Xml and skip validation ignoring declaration

XmlDocument.setProperty('ProhibitDTD', false);
XmlDocument.resolveExternals = false;
XmlDocument.validateOnParse = false;

There is one more case. If resolveExternals is accidently set to false and validateOnParse to true following error occurs:

The element docroot is used but not declared in the DTD/Schema

Complete source code listing

//@author Stankovic Vlada [svlada@gmail.com]
var fs = new ActiveXObject("Scripting.FileSystemObject");
var inputFilePath = "c:\\js\\test.xml";
var stream = fs.openTextFile(inputFilePath, 1);
var content = stream.readAll();
stream.close();
// var rexCleanDoctype = //gm;
// content = content.replace(rexCleanDoctype, "");
var XmlDocument;
try {
XmlDocument = new ActiveXObject("msxml2.DOMDocument.6.0");
XmlDocument.async = false;
// Allow DTD
XmlDocument.setProperty('ProhibitDTD', false);
XmlDocument.resolveExternals = false;
XmlDocument.validateOnParse = false;
} catch(e) {
WScript.echo("Error while creating DOM Object: " + e.description);
}
// Load an XML file into the DOM instance
try {
// To load from file path call function XmlDocument.load(inputFilePath);
XmlDocument.loadXML(content);
printParseError(XmlDocument);
} catch(e) {
WScript.echo("Error while loading XML from String: "
+ e.description);
}
var Node;
try {
Node = XmlDocument.selectSingleNode("//docroot/dir");
printParseError(XmlDocument);
} catch(e) {
WScript.echo("Error resolving Node value from XPath: "
+ e.description);
}
if (Node != null) {
WScript.echo(Node.text);
}

function printParseError(xmlDoc) {
if (xmlDoc.parseError.errorCode != 0) {
var myErr = xmlDoc.parseError;
WScript.Echo("Xml parse error: " + myErr.reason);
}
}

test.xml

version="1.0" encoding="UTF-8"?>

>
>/springapp/index.jsp>
>link>
>

test.dtd

(dir,url)>
(#PCDATA)>
(#PCDATA)>

Useful references:

XmlDocument.validateOnParse
http://msdn.microsoft.com/en-us/library/ms762791(VS.85).aspx

XmlDocument.resolveExternals
http://msdn.microsoft.com/en-us/library/ms761375(v=vs.85).aspx

Windows Script Host(WSH) Javascript Create directory from path

Vladimir Stanković — Mon, 01 Aug 2011 19:57:33 +0000

The Microsoft Windows Script Host (WSH) is an automation technology for Microsoft Windows operating systems that provides scripting capabilities comparable to batch files, but with a greater range of supported features. It was originally called Windows Scripting Host, but was renamed for the second release. WSH (VBS) is a very useful tool that allows you to run JScript, VBScript, and XML scripts natively within the OS.

You can read more about Windows Script Host(WSH) on Microsoft official site http://msdn.microsoft.com/en-us/library/shzd7dy4%28v=vs.85%29.aspx

Back to the subject. How to create directories and subdirectories from String path using JScript and Windows Script Host? Process is quite simple and still there is no support for this simple functionality out of box in WSH.

First we must tokenize input and extract each directory name as separate String. We can achieve this using Regular Expressions. I have following pattern:

var pattern = /(.*?)\\/gm;

The results after evaluating regex for tokenizing String can be seen on image below

Regex used to tokenize String input

The final step is to create folders, starting with the root folder to the last one.

Additionaly you can add check wheter Directory exists before trying to create one. Check if Directory exists in Windows Script Host can be achieved calling method object.FolderExists(folder).

More specific information about this method can be found on msdn http://msdn.microsoft.com/en-us/library/5xc78d8d%28v=VS.85%29.aspx

// author: Stankovic Vlada (svlada@gmail.com)

var debug = true;
var pattern = /(.*?)\\/gm;
var path = "c:\\test\\test1\\test2\\test3\\";
var fileSystemOut = new ActiveXObject("Scripting.FileSystemObject");
createDirectoryFromPath(fileSystemOut, path, pattern);

// Java Script function that creates folder tree from input String
// @param fileSystemOut
// File System Object (FSO) Provides access to a computer's file system.
// @param path - Full path that represents directory tree
// (for example var path = "c:\\test\\test1\\test2\\test3\\")
// @param pattern - Regex pattern that tokenize path
// String to individual directories
function createDirectoryFromPath(fileSystemOut, path, pattern) {
var tmpFileLoc = "";
while (result = pattern.exec(path)) {
tmpFileLoc = tmpFileLoc.concat(result[0]);
if(debug == true)
WScript.echo("Creating dir - >" + tmpFileLoc);
try {
fileSystemOut.CreateFolder(tmpFileLoc);
} catch(e) {
if(debug == true)
WScript.echo("***ERROR while creating Folder: "
+ e.description);
}
}
}

File System Object (FSO) – @link

Stanković Vladimir

Publish/Subscribe design pattern in Javascript using EventBroker/Mediator

Table of contents:

Introduction

Publish / Subcribe design pattern in javascript

Source code listing

References

Require.js Optimization – part2

Table of contents:

Introduction

Require.js optimizer

Example 1: Optimize modules

Example 2: Optimize additional modules

Require.js optimizer compile dependencies to single file

Source code listing

Require.js Dependency management – part1

Table of contents:

Introduction

Basic structure

STEP 1 – How to structure RequireJS project

STEP 2 – How to include RequireJS

STEP 3 – How to configure RequireJS

STEP 4 – How to use requre() and define() in RequireJS

Prototypal inheritance and Require.js

Source code listing

How to get url parameters javascript

Proxy Ajax requests, Curl and Symfony 2

STEP 1: Client code

STEP2: Forward request to remote server

How to get cookies from Symfony2 request and set mutplie cookies to Curl?

How to get cookies Curl response and set multiple cookies to Symfony response?

Segmentacija bazirana na teksturama

Ekstrakcija osobina tekstura pomoću GLC matrica

Maven – unable to update index for central

WSH Javascript remove duplicates from array

How to evaluate Xpath when DOCTYPE present in XML declaration

Windows Script Host(WSH) Javascript Create directory from path