Origramy guide.

Version: 1.13
The current guide is compatible with Origramy version 1.00 and upper.

Basic principals.
Origramy component is Flash-based (http://adobe.com) technology. Data comes from the XML file. Both component and XML file are placed on the web server-side. When user opens a webpage with a component, Origramy is being loaded with XML data attached. All the processing of data goes on browser (user) side, so no server CPU loading.

HTML embedding.
After placing of this code you get Origramy embedded on HTML page and ready to work with XML data.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="945" height="320" name="origramy" id="origramy" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="opldr.swf?mode=edit&xml=data.xml" /><param name="wmode" value="transparent" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <param name="scale" value="noscale" /><param name="salign" value="lt" /> <embed src=" opldr.swf?mode=edit&xml=data.xml" swliveconnect=true quality="high" bgcolor="#ffffff" wmode="transparent" scale="noscale" width="945" height="320" salign="lt" name="origramy" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

Here parameter mode sets the open mode for the component. If its absent view mode is loaded. If its edit component is loaded in edit mode instantly. Please note that origramy.swf can be used instead of opldr.swf. Using of opldr.swf adds a status bar loading indication of the main component. Please note that you can set any name/extension of data XML file. If there is no xml parameter set component will try to find data.xml file as default one.

XML structure.
The xml structure is based on XGMML standard with some additions and adoptions.

<?xml version="1.0" encoding="UTF-8"?> <graph scale="780,580"> <node type="text" y="20.5" x="45" id="2057" label=" Structure"> <graphic action="http://origramy.com" rotation="0" scale="188.65,17.5" textalign="center" textcolor="000000" textsize="13" /> </node> <node type="rectangle" y="80.5" x="574.85" id="691" label="Manager "> <graphic figureopacity="100" figure-color="e20000" shadowposition="none" shadowcolor="000000" textposition="Center" bordercolor="000000" border="1" rotation="0" scale="134,51" textalign="left" textcolor="ffffff" textsize="11" /> </node> <node y="57.5" x="349.55" id="1202" /> <edge width="1" color="000000" source="761" target="1202" /> <edge width="1" color="000000" source="1202" target="1203" /> </graph> Graph is a general XML wrapper tag. Scale attribute points to the whole component scene sizes. Node is a general graph object description tag. This tag has the following attributes: id unique identifier for every object on the scene; x,y coordinates on the scene; type sets type of the object. Available types: text, image, rectangle, circle. If no parameter is set its an arrows connection point object; label label of the object, optional. Graphic tag that describes the node object. Possible attributes: scale sets object width/height; textalign alignment of the text block. Available values: center, left, right; textcolor text color in RGB format: RRGGBB; textsize - text size in points; rotation rotation of the figure in degrees. From 0 to 360; figureopacity transparency of the object. From 0 to 100; figurecolor color of the figure in RGB; shadowposition position of the shadow if its necessary. Possible values: none, 0, 45, 135, 225, 315. Value numbers is a degree of the shadow; shadowcolor - shadow color in RGB; textposition text position. Possible values: none, center, top, bottom, left, right; bordercolor - color of the border in RGB; border border width; urlimage URL of the object image. action URL or JavaScript code. Called when clicking on the object in view mode. URL must start with http. Examples: alert(Hello World!). Edge is a tag for arrows that connect objects. The following attributes are necessary: width general width of the arrow; color color in RGB; source id of the object where arrow goes from; target id of the object where arrow goes to. direction direction of the line, possible values: none no arrows, both both directions, totarget one arrow leading to the target, fromtarget one arrow leading from the target. style style of the line. Possible values: solid, dashed, dotted.

Please note, that arrow can be broken via Node tags with no attribute type set. In this case (example above) the broken arrow consists of two arrows: first one goes to the empty node object and the second one goes out of it.

JavaScript interaction.
There are some JavaScript interface methods available in Origramy. Developer can set or get XML to/from the component via setXML()/getXML() methods. Here are JavaScript examples:
var flash = window["origramy "]?window["origramy "]:document["origramy"]; if (flash) { flash = flash.length?flash[1]:flash; document.forms[0].data.value = flash.getXML(); } var flash = window["origramy "]?window["origramy "]:document["origramy"]; if (flash) { if(flash.length) flash[1].setXML(document.forms[0].data.value); else flash.setXML(document.forms[0].data.value); }

SVG export support

Export in SVG XML format is supported via separate Javascript method: getSVG(). Use it like in the example below.
var flash = window["origramy "]?window["origramy "]:document["origramy"]; if (flash) { flash = flash.length?flash[1]:flash; document.forms[0].data.value = flash.getSVG(); }

Custom component settings (multilanguage, toolbar, background)

Starting from 1.10 version Origramy supports custom UI settings tuning via separate XML file. This settings file is added the way data does: Origramy.swf? data=data.xml&settings=german.xml. Custom settings XML file (german.xml in the example) lets developer/administrator to tune component interface labels and create its own custom toolbar on the left. The general structure looks like this:

 <?xml version="1.0" encoding="UTF-8"?> <uisettings> <options> <background-image type=resize>background.gif</background-image> <printbutton/> <actionspanel mode="off"></actionspanel> <imageupload path="uploadimage.php"></imageupload> <imagegeneration path="exportimage.php" frame="imagexframe"></imagegeneration> </options> <titles> <item name="btnLoad">Add Image URL</item> .. <messages> <item name="treeVertical">Switching operation</item> </messages> <properties> <item name="Border color">Border color</item> </properties> </titles> <tools> <tool type="text"/> </tools> </uisettings>

Options define different options for the component. Background-image: Its an image in .gif, .jpg, .png or .swf format. Type defines how background image would be located on the screen. If empty or normal then it just put at the coordinates 0:0. When resize the image is been stretched among the whole scene. Printbutton: enables Print button in the left tools menu. Actionspanel: if its presented in the way up the left tools actions menu is disabled. Imageupload: enables image uploading. Path where image data would be sent to. Read about this feature more here. Imagegeneration: will enable Save image button. With the help of 2 parameters will let generates images. Please find more information here. Titles define interface labels. Using this section Origramy interface can be translated to any language. As the starting point English.xml, german.xml, russian.xml can be taken. Please use UTF-8 encoding while editing settings XML file. Tools section define custom tools and properties. General syntax is the following: <tool type=text name="wall" url="wall.swf"/> properties </tool> If type attribute is set the tool becomes a standard tool. Standard tool types available: text, arrow,

square, circle, line. By this means standard tools can be switched on/off. Note: selection tool already stays on. If no type is set custom tool is created. Name describes the name of it. The name must be simple to be used in XML as attribute value. URL is an url of the custom tool. It can be an image:.jpg, .gif, .png or vector tool in Flash .swf format. We recommend you using .png and .swf tools. They give more control and visual style to your tools as they have transparency support + data-loss scalability for .swf. Property syntax: <property name="age" title="Age" type="text"/> Name sets the name of the property. Please keep it simple as it would be used in XML as attribute. Title sets label of the property in the right property box. Type sets the type of the property. Available types: text, color. There is possibility to assign default properties for the tool. There are predefined names for this case. For example: <property name="figureopacity" value="50"/> This expression brings standard predefined property for the object. The object would be semitransparent as value sets. The complete list of predefined properties names: Textsize, textcolor, textalign, textposition, border, bordercolor, shadowcolor, shadowposition, figurecolor, figureopacity, label, action, direction, style, width, color. Custom toolbar tuning examples you can see inside the download package: samples/myhouse*, samples/hockey*.

.Net component usage

Origramy can be used as .Net component. SWF is combined into DLL with delegated methods to work with XML data. Examples of SWF combination and test application that uses Origramy.Net you can find in the separate download package.

Exporting image data

You can export image by calling javascript function: flash.exportImage("exportimage.php", "imagexframe"); Where exportimage.php script that gets image data and converts it to the accessible format, imageframe the name of the window that will handle the request. It can be a hidden frame on the page to process the request. Or it can be _self to reload the current page. Script gets POST request with the following variables in it: Width = width of the generated picture; Height = height of the generated picture; pxROW = variable with pixels. ROW number of pixels row in the picture. 0 < ROW < Height

of the picture. Variable consists of Hex pixels divided by ,. You can find sample PHP script attached (exportimage.php).

Online uploading of files

The component supports online uploading of files by Flash means. To turn on online uploading just add new parameter to the .swf file:
opldr.swf?mode=edit&xml=data.xml&filesendpath=http://url

After adding this parameter images adding control

gets new look:

Now user can not only add images manually but upload images right to the server. Filesendpath parameter sets url of the uploading routine on the same server. Here is a general workflow of how parameter works.

Totally there are 2 requests to the server. 1st delivers file data under Filedata HTTP parameter. Also it brings uniquely generated image name with uniquename HTTP parameter. 2nd requests asks the server the URL where image would be accessible from with HTTP parameter takeimageurl set to on. Example of server return structure:
<?xml version=\"1.0\" encoding=\"UTF-8\"?> <file url="http://server.com:images/"> </file>

So in total the final image URL been loaded into the component would be available at address http://server.com:images + value of HTTP parameter uniquename generated by the component. Please note all 2 requests calls the same URL set by the filesendpath parameter. This method is tricky but lets bypass Flash problem with session based on cookies. Here is image upload processor example written on PHP4:
<? session_start(); if ($_FILES['Filedata']) { move_uploaded_file($_FILES['Filedata']['tmp_name'], "D:/www/htdocs/origramy/imagesupload/".$_REQUEST["uniquename"]); } else if ($_REQUEST["takeimageurl"] != null) { header("Content-Type: text/xml"); header("Expires: Mon, 1 Jul 1990 05:00:00 GMT"); print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?> <file url="http://server.com /images/"> </file><? } ?>