Flash and Javascript library for mathematics on web pages

API Communication and settings

Javascript communication with component

	// set the MathML to editor
	var editorSwf = getSWF('editorId');
	editorSwf.setMathML('<mrow>...</mrow>');
	
	...
	// get the MathML string from editor
	var mathML = editorSwf.getMathML();
	
	// set the LaTeX to editor
	var editorSwf = getSWF('editorId');
	editorSwf.setLaTeX('\\[x^2+2x+1\\]');
	
	...
	// get the LaTeX string from editor
	var latex = editorSwf.getLaTeX();
	
	...
	// get the width of formula
	var width = editorSwf.getWidth();
	
	...
	// get the height of formula
	var height = editorSwf.getHeight();

	...
	// generate the image on server side
	editorSwf.saveImageOnServer();
		//the editor will call the javascript method setFileNameFromServer 
		//with the complet path and name of the image.
		// The image will be generated with the default configuration from editor 
		//defaultImageType and defaultImageCompression 
	You need to have a server to generate the image. More info ...

	// view the image in browser
	editorSwf.viewImageInBrowser();
		// The image will be generated with the default configuration from editor 
		//defaultImageType and defaultImageCompression 
	You need to have a server to generate the image. More info ...
	
	// get jpg base64 image from component, the second parameter is compression
	var base64String = editorSwf.getBase64Image('JPG', 100);
	
	// get png base64 image from component
	var base64String = editorSwf.getBase64Image('PNG');

Settings using FlashVars


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
	width="100%" height="100%" id="editML" name="editML" align="middle">
	
	<param name=wmode value="transparent">
	<param name="allowScriptAccess" value="always"/>
	<param name="allowFullScreen" value="true"/>
	<param name="loop" value="false"/>
	<param name="quality" value="high" />
	<param name="flashVars" value="width=950&height=500&disableSave=true&disableOpen=true"/>
	<param name="movie" value="/mathml/MathMLEditor.swf" />
	<embed src="/mathml/MathMLEditor.swf" 
		wmode="transparent"
		flashVars="width=950&height=500&disableSave=true&disableOpen=true"
		loop="false"
		quality="high"
		width="100%"
		height="100%"
		id="editML"
		name="editML"
		align="middle"
		swliveconnect="true"                
		allowScriptAccess="always"
		allowFullScreen="true"
		type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

Settings using xml configuration file


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" 
	width="100%" height="100%" id="editML" name="editML" align="middle">
	
	<param name=wmode value="transparent">
	<param name="allowScriptAccess" value="always"/>
	<param name="allowFullScreen" value="true"/>
	<param name="loop" value="false"/>
	<param name="quality" value="high" />
	<param name="flashVars" value="configUrl=configMathMLEditor.xml"/>
	<param name="movie" value="/mathml/MathMLEditor.swf" />
	<embed src="/mathml/MathMLEditor.swf" 
		wmode="transparent"
		flashVars="configUrl=configMathMLEditor.xml"
		loop="false"
		quality="high"
		width="100%"
		height="100%"
		id="editML"
		name="editML"
		align="middle"
		swliveconnect="true"                
		allowScriptAccess="always"
		allowFullScreen="true"
		type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>		

configMathMLEditor.xml file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
	<properties>
		<property id="width">800</property>
		<property id="height">400</property>		
		<property id="disableSave">true</property>
		<property id="disableOpen">true</property>
		<property id="enableClose">true</property>
		<property id="defaultFont">fraktur</property>		
		<property id="defaultFontSize">30</property>		
		<property id="defaultBold">true</property>		
		<property id="defaultItalic">true</property>		
		<property id="defaultForegroundColor">#ff0000</property>		
		<property id="fontList">fraktur,script</property>
		
		<property id="urlGenerateImage">/capture/imageCapture.jsp</property>
		<property id="defaultImageType">JPG</property>
		<property id="defaultImageCompression">100</property>
		
		<property id="loadJapaneseFonts">true</property>
	</properties>
	<toolbars>
		<!--toolbar id="toolbar_top1" disabled="true"/>
		<toolbar id="toolbar_top2" disabled="true"/-->		
	</toolbars>
	<buttons>
		<!--button id="toolbar_Equation1" disabled="true"/>
		<button id="toolbar_Fraction1" disabled="true"/-->		
	</buttons>
	<lookandfeeldesigns>
		<design lookId="XP" translateCode="lookAndFeelXP"/>
		<design lookId="YUI" translateCode="lookAndFeelYui"/>
		<design lookId="CKE" translateCode="lookAndFeelCKE"/>				
		<design lookId="Tiny" translateCode="lookAndFeelTiny"/>		
	</lookandfeeldesigns>	
	<lookandfeelthemes>
		<theme lookId="XP" translateCode="lookAndFeelXpBlue" file="XpLookEditorBlue.xml" />
		<theme lookId="XP" translateCode="lookAndFeelXpRed" file="XpLookEditorRed.xml" />		
		<theme lookId="XP" translateCode="lookAndFeelXpGreen" file="XpLookEditorGreen.xml" />		
		<theme lookId="YUI" translateCode="lookAndFeelYuiBlack" file="YUILookEditorBlack.xml" />
		<theme lookId="YUI" translateCode="lookAndFeelXpBlue" file="YUILookEditorBlue.xml" />	
		<theme lookId="CKE" translateCode="lookAndFeelCKEBlue" file="CKELookEditorBlue.xml" />		
		<theme lookId="Tiny" translateCode="lookAndFeelTinyDefault" file="TinyLookEditorDefault.xml" />				
		<theme lookId="Tiny" translateCode="lookAndFeelTinyRed" file="TinyLookEditorRed.xml" />						
	</lookandfeelthemes>	
	<languages>
		<langue translateCode="languageEn" file="EditorTextEn.xml" />
		<langue translateCode="languageFr" file="EditorTextFr.xml" />
		<langue translateCode="languageRo" file="EditorTextRo.xml" />		
	</languages>	
</configuration>

Properties:

	width=900		// The width to draw the editor; Default is 800
	
	height=500		// The height to draw the editor; Default is 400
	
	disableSave=true	// If it is true, disable the Save button; Default is false;
	
	disableOpen=true	// If it is true, disable the Open button; Default is false;
	
	enableClose=true	// If it is true, draw the Close button; Default is false;
	
	loadOnInit=true		// If it is true, the editor will call the javascript method 
						getMathMLFromJavascript to load the mathml;
						 Default is false;
						 
	defaultFont=script	// The default font to be selected in editor. 
				// Must choose one from the list:
				// normal; double-struck; script; fraktur; sans-serif; monospace; circle;
				// or if fontList is set, must be one from the list

	defaultFontSize=30	// The default font size to be selected in editor. 
	
	fontSizes=20,24,28	// The list of font sizes selected in editor
	
	defaultBold=true	// If it is true, the bold is selected. Default is false;

	defaultItalic=true	// If it is true, the italic is selected. Default is false;

	defaultForegroundColor=#ff0000	// The color of font. Default is #000000 (black);
				// Can be also = "aqua", "black", "blue", "fuchsia", "gray", "green", 
				// "lime", "maroon", "navy", "olive", "purple", "red", "silver", 
				// "teal", "white", "yellow" 
	defaultBackcolor=#ff0000	// The color for backcolor for formula. Default is #ffffff (white);
				// Can be also = "aqua", "black", "blue", "fuchsia", "gray", "green", 
				// "lime", "maroon", "navy", "olive", "purple", "red", "silver", 
				// "teal", "white", "yellow" 

	fontList=script,fraktur	// The list of fonts selected in editor. 
				// You can include fonts from MathML standard:
				// normal; double-struck; script; fraktur; sans-serif; monospace; circle;
				// and also flash fonts: _serif, _sans, _typewriter;
				// and also a client font name like: Arial, Calibri, ... 
				
	disableGenerateImage=true	//only hide the icon used to generate image
	urlGenerateImage=http://yoursite/folder/generateImage.jsp?param1=value
				// this is the url used to generate the image. Can be absolut or relative.
				// default is /capture/imageCapture.jsp
	defaultImageType=JPG	// The image format (JPG or PNG). Default is JPG;
	defaultImageCompression=80	// The image compression for JPG (0 - 100). Default is 80;
	transparentBackground=true	// Make the background to be transparent;
	transparentColor=#ff0000	// This color will be transparent. Default is #ffffff (white);
				// Can be also = "aqua", "black", "blue", "fuchsia", "gray", "green", 
				// "lime", "maroon", "navy", "olive", "purple", "red", "silver", 
				// "teal", "white", "yellow" 
	
	hidePropertyPannel=true	//hide the property pannel to startup
	
	loadJapaneseFonts=true	//preload Japanese fonts at sturtup (IE bug)
				// preload Hiragana and Katakana fonts
				
	saveOption=""	 	// Define how the mathml is built:
				// "" (default) - do the conversion to names (if exist) for all chars  
						if not let the unicode
				//unicode - do the conversion to unicode 
				//char - put in the mathml the character (no unicode and no alias name)
	
	openMethod=javascriptMethod	// a javascript method to be called when click 
					// on open button. Default is getMathMLFromJavascript.
	saveMethod=javascriptMethod	// a javascript method to be called when click 
					// on save button. Default is saveMathMLToJavascript.
	closeMethod=javascriptMethod	// a javascript method to be called when click 
					// on close button. Default is closeEditorWithJavascript.
	loadOnInitMethod=javascriptMethod	// a javascript method to be called when the editor loads.
					// Default is getMathMLFromJavascript.
		
	designId=XP			// the "Look and Feel". XP or YUI or CKE or Tiny
	theme=XpLookEditorBlue.xml		// the configuration for design
	language=XpLookEditorTextEn.xml		// the language file
	
	defaultLinethickness=1	//Default value for linethickness (mfrac and menclose)

What methods are called from editor?

	Open button	//javascript method getMathMLFromJavascript()
			this method will return a mathml string
					
		function getMathMLFromJavascript(){
			return "<mrow><mtext>new value</mtext></mrow>";
		}
					
	Save button	//javascript method saveMathMLToJavascript(mathml)

		function saveMathMLToJavascript(mathML){
			alert(mathML);
		}
					
	Close button	//javascript method closeEditorWithJavascript()
			this method could be used to close/hide the editor
				 	
				 	
	Generate Image with method saveImageOnServer():	
		//call javascript method setFileNameFromServer(name). This method is called when 
		//the image is saved on the server side to give the full path of image

Enable/Disable toolbars and buttons

	Add in configuration file:

		<configuration>
			<properties>
				...
			</properties>
			<toolbars>
				<toolbar id="toolbar_top1" disabled="true"/>
			</toolbars>
			<buttons>
				<button id="toolbar_Equation1" disabled="true"/>
				<button id="toolbar_Fraction1" disabled="true"/>		
			</buttons>
		</configuration>

	This will disable the toolbar from top and first 2 buttons from left toolbar
	
	Toolbar ids:
		- toolbar_files
		- toolbar_edit		
		- toolbar_fonts
		- toolbar_fonts1
		- toolbar_left1		
		- toolbar_left2		
		- toolbar_bottom1
		- toolbar_bottom2
		- toolbar_bottom3
		- dynamic_toolbar

	The toolbars with files, copy/paste and font can not be disabled.
	
	Button ids for tolbars:
		- toolbar_files
			- menu_file_new
			- menu_file_open
			- menu_file_save
			- menu_file_xml		
			- menu_file_tex
			- menu_file_prop
			- menu_file_image
			- menu_style_zoom
			
		- toolbar_edit
			- menu_edit_cut
			- menu_edit_copy
			- menu_edit_paste
			- menu_edit_undo
			- menu_edit_redo
			
		- toolbar_fonts
			- menu_style_family
			- menu_style_size
			- menu_style_bold
			- menu_style_italic
			- menu_style_color
			- menu_style_bgcolor

		- toolbar_fonts1
			- toolbar_E1_0
			- toolbar_E1_1
			- toolbar_E1_2
			- toolbar_E1_3
			- toolbar_E1_4
			- toolbar_E1_5
			- toolbar_E1_6
			- toolbar_E1_7
			- toolbar_Unicode
	
		- toolbar_left1
			- toolbar_Equation1
			- toolbar_Fraction1
			- toolbar_Fence
			- toolbar_Sum
			- toolbar_Matrix
			- toolbar_space		
			
		- toolbar_left2			
			toolbar_wizard				
			toolbar_sample
			toolbar_trigo		
		
		- toolbar_bottom1
			- toolbar_E2_7
			- toolbar_E2_8		
			- toolbar_E2_9				
			- toolbar_E2_5
			- toolbar_E2_6
			- toolbar_E2_0
			- toolbar_E2_1
			- toolbar_E2_2
			- toolbar_E2_3
			- toolbar_E2_4		

		- toolbar_bottom2
			- toolbar_E4_1
			- toolbar_E4_2
			- toolbar_E4_3
			- toolbar_E4_4		
			- toolbar_E4_0				
	
		- toolbar_bottom3
			- toolbar_trigo_sin
			- toolbar_trigo_arcsin

Text translation files

<configuration>
	<translate>
		<text id="propComboLEFT">LEFT</text>
		<text id="propComboCENTER">CENTER</text>
		<text id="propComboRIGHT">RIGHT</text>
		<text id="propComboTOP">TOP</text>
		<text id="propComboBOTTOM">BOTTOM</text>
		<text id="propComboNONE">NONE</text>
		<text id="propComboSOLID">SOLID</text>
		<text id="propComboDASHED">DASHED</text>		
		<text id="propLabelText">Text:</text>
		<text id="propLabelHref">HRef:</text>
		<text id="propLabelBorder">Border:</text>
		<text id="propLabelBorderColor">Border color:</text>
		<text id="propLabelVariant">Font:</text>
		<text id="propLabelSize">Size:</text>
		<text id="propLabelColor">Color:</text>
		<text id="propLabelBackcolor">Backcolor:</text>
		<text id="propLabelShiftSup">Superscript shift:</text>
		<text id="propLabelShiftY">Shift Y:</text>
		<text id="propLabelShiftX">Shift X:</text>
		<text id="propLabelBevelled">Bevelled:</text>
		<text id="propLabelNumAlign">Numerator align:</text>
		<text id="propLabelDenumAlign">Denominator align:</text>
		<text id="propLabelThickness">Line thickness:</text>
		<text id="propLabelNumber">Number:</text>
		<text id="propLabelRowalign">Row align:</text>
		<text id="propLabelRowspan">Row span:</text>
		<text id="propLabelColumnalign">Column align:</text>
		<text id="propLabelColumnspan">Column span:</text>
		<text id="propLabelFrame">Frame:</text>
		<text id="propLabelFramespacing">Frame spacing:</text>
		<text id="propLabelRowlines">Row lines:</text>
		<text id="propLabelRowspacing">Row spacing:</text>
		<text id="propLabelColumnlines">Column lines:</text>
		<text id="propLabelColumnspacing">Column spacing:</text>
		<text id="propLabelOpen">Open:</text>
		<text id="propLabelClose">Close:</text>
		<text id="propLabelLongdiv">Longdiv:</text>		
		<text id="propLabelActuarial">Actuarial:</text>		
		<text id="propLabelRadical">Radical:</text>
		<text id="propLabelBox">Box:</text>
		<text id="propLabelRoundedbox">Rounded box:</text>
		<text id="propLabelCircle">Circle:</text>
		<text id="propLabelLeft">Left:</text>
		<text id="propLabelRight">Right:</text>
		<text id="propLabelTop">Top:</text>
		<text id="propLabelBottom">Bottom:</text>
		<text id="propLabelUpdiagonalstrike">Up diagonal:</text>
		<text id="propLabelDowndiagonalstrike">Down diagonal:</text>
		<text id="propLabelVerticalstrike">Vertical:</text>
		<text id="propLabelHorizontalstrike">Horizontal:</text>
		<text id="propLabelMadruwb">Madruwb:</text>
		<text id="propLabelWidth">Width:"</text>
		<text id="propLabelHeight">Height:"</text>
		<text id="propLabelBreak">Is break?"</text>
		<text id="propLabelLspace">Left space:</text>
		<text id="propLabelDepth">Depth:</text>
		<text id="propLabelStretchy">Is stretchy?</text>
		<text id="propLabelMaxsize">Max size:</text>
		<text id="propLabelMinsize">Min size:</text>
		<text id="propLabelShiftSub">Subscript shift:</text>
		<text id="propLabelNbPrescripts">Nb prescripts:</text>
		<text id="propLabelNbPostscripts">Nb postscripts:</text>
		<text id="propUpdateButton">Update</text>		
		<text id="mrowProperties">mrow properties</text>
		<text id="mathProperties">math properties</text>
		<text id="mactionProperties">maction properties</text>
		<text id="mencloseProperties">menclose properties</text>
		<text id="mfencedProperties">mfenced properties</text>
		<text id="mphantomProperties">mphantom properties</text>
		<text id="mpaddedProperties">mpadded properties</text>
		<text id="mspaceProperties">mspace properties</text>
		<text id="merrorProperties">merror properties</text>
		<text id="mfracProperties">mfrac properties</text>
		<text id="msqrtProperties">msqrt properties</text>
		<text id="mrootProperties">mroot properties</text>
		<text id="mmultiscriptsProperties">mmultiscripts properties</text>
		<text id="noneProperties">none properties</text>
		<text id="moverProperties">mover properties</text>
		<text id="msupProperties">msup properties</text>
		<text id="munderProperties">munder properties</text>
		<text id="msubProperties">msub properties</text>
		<text id="msubsupProperties">msubsup properties</text>
		<text id="munderoverProperties">munderover properties</text>
		<text id="miProperties">mi properties</text>
		<text id="mnProperties">mn properties</text>
		<text id="moProperties">mo properties</text>
		<text id="mtextProperties">mtext properties</text>
		<text id="msProperties">ms properties</text>
		<text id="mtableProperties">mtable properties</text>
		<text id="mtrProperties">mtr properties</text>
		<text id="mtdProperties">mtd properties</text>
		<text id="mstyleProperties">mstyle properties</text>
		<text id="mstackProperties">mstack properties</text>
		<text id="msrowProperties">msrow properties</text>
		<text id="mslineProperties">msline properties</text>
		<text id="mscarriesProperties">mscarries properties</text>
		<text id="mscarryProperties">mscarry properties</text>
		<text id="mlongdivProperties">mlongdiv properties</text>
		<text id="msgroupProperties">msgroup properties</text>
		
		<text id="commonProperties">common properties:</text>
		<text id="styleProperties">style properties:</text>
		<text id="fenceOpen">Open:</text>		
		<text id="fenceClose">Close:</text>
		<text id="matrixChoiceLines">Nb of lines:</text>
		<text id="matrixChoiceColumns">Nb of columns:</text>
		<text id="matrixChoiceButton">Create matrix</text>
		<text id="gradeChoiceLines">The grade:</text>		
		<text id="PolynomCreateButton">Create Polynome</text>
		<text id="EquationCreateButton">Create Equation</text>	
		
		<text id="font-normal">Serif</text>
		<text id="font-sans-serif">Sans Serif</text>
		<text id="font-script">Script</text>
		<text id="font-double-struck">Double Struck</text>
		<text id="font-fraktur">Fraktur</text>
		<text id="font-monospace">Monospace</text>
		<text id="font-circle">Circle</text>

		<text id="lookAndFeelXP">Xp Look</text>
		<text id="lookAndFeelXpBlue">Blue</text>		
		<text id="lookAndFeelXpRed">Red</text>		
		
		<text id="languageEn">English</text>		
		<text id="languageFr">French</text>		
		<text id="languageRo">Romanian</text>				
	</translate>
</configuration>