FMATH FORMULA - FREE solution to display equations or mathematical symbols weusing MathML, LaTeX or OMML (Microsoft Word) standards.
FMATH for FLASH/Flex - FREE components for AS3 applications to display and edit equations using MathML, LaTeX or OMML (Microsoft Word) standards.
FMATH is a FREE solution to display and edit equations on web pages, desktop app or mobile devices using MathML, LaTeX or OMML (Microsoft Word) standards.

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');

	// get png base64 image from component with transparent background (Only PNG type)
	var base64String = editorSwf.getBase64Image('PNG', 100, true, "#FFFFFF");

	// get url for image generation
	var urlString = editorSwf.getUrlGenerateImage();

	// set url for image generation. New url can be relative or absolute
	editorSwf.setUrlGenerateImage('newUrl');

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
<?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)
	
	absoluteUrlFonts=http://....	//Change the folder where the fonts are located. 
				Default: ./fontswf
				
	namespace=fmath|http://www.fmath.info	//Add namespace to MathML. 


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		



Translation file - EditorTextEn.xml
<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>		

`


www.learn-math.info | www.apprendre-math.info | www.aprender-mat.info | www.invata-mate.info
Designed by Diana Alexandru
free components MathML flex GWT LaTeX Editor Air plugin MathML flash math Mathematics Equation Widget Mobile flash LaTeX Mathematics FREE Apple iOS OMML Android iPad iPhone Microsoft Word Latex MathML OMML Free