SVGAjaxAdapter

SVGAjaxAdapter is an adapter class creating a data bridge between SVG image and AJAX requests. The class has methods for both SVG basic shapes and AJAX response.

How it feeds "Instruction Stack"

Instruction stack is a javascript array in svgdreams-ajax.js file. Ajax responses which are in valid JSON format are sent to this array and used by functions in the svgdreams-canvas.js file. For more information, (see Instruction Stack).

SVGAjaxAdapter creates a valid JSON response for different actions like inserting a shape into the SVG canvas or updating any attribute. In ajax/clock.php, you can see an example of adding a circle and updating a text field.

Simple Example

In the example below, you can see a very simple game. Levels increase with the steps and the point to earn increases with the levels. Every click is sent to the ajax layer and ajax data sent back feeds the text fields. I'm aware that we actually don't need to send data to the ajax layer and this example can be coded with an easier javascript code. I just wanted to show how AJAX layer and SVG canvas talks with each other.

Creating a javascript function within SVG

SVGAjaxAdapter is capable to bind a javascript function to a user event. bindEvent method is responsible to relate a javascript function to an event. SVGAjaxAdapter also defines the javascript function to be fired in a user event.
There're some examples in the downloadable package, (see: ajax/clock.php).

$event: The name of the event (onclick, onmouseover etc) to bind the function
$jsFunctionName: Javascript function name to call when the event is fired.
$requestURL: The ajax request url. The javascript function will do an ajax call
$parameters: The parameters which will be sent to the requestURL.

For example, if you want to send the radius of a circle, you can call
eg: $svgAjaxAdapterObj->addAttribute("variable_name_too_send", "circle_id", "radius");
so the radius value of the circle will be sent to the ajax layer.

Methods responsible for creating instruction stack

public function insert($elementObj, $targetId)
Creates an instruction to insert a basic shape into the SVG group.
Parameters:
$elementObj: Basic shape object.
$targetId: Target group to add the shape. If target is not given, it sets to the default group "scene".
public function update($targetId, $attribute, $value)
Creates an instruction to update an attribute of a basic shape.
Parameters:
$targetId: Id of the basic shape.
$attribute: Attribute name
$value: New value of the attribute
public function addText($targetId, $text)
Creates an instruction to update the content of a text shape.
Parameters:
$targetId: Id of the text element in svg.
$text: Text to pass to the text tag.
public function insertAnimation($animationObj, $targetId)
Creates an instruction to insert an animation into a shape.
Parameters:
$animationObj: Animation object. Instance of classes Animate, AnimateMotion, AnimateColor or AnimateTransform.
$targetId: The id of the basic shape.
public function delete($targetId)
Creates an instruction to remove a shape from SVG canvas.
Parameters:
$targetId: The element id to remove
public function rotate($targetId, $angle)
Creates an instruction to rotate a shape by the given angle.
Parameters:
$targetId: Id of the basic shape in SVG image.
$angle: Angle to rotate the basic shape.
public function bindEvent($targetId, $event, $functionName)
Creates an instruction to bind an event to a basic shape.
Parameters:
$targetId: Id of the basic shape in SVG image.
$event: Event name (eg: onclick, onmouseover)
$functionName: The function which is responsible for the given event.
public function move($targetId, $x, $y)
Creates an instruction to move a basic shape by x and y pixels.
Parameters:
$targetId: The id of the basic shape.
$x: The x axis of the shape
public function ajaxResponse()
Returns the array of instructions packed in json format.

All rights reserved. See license