ICEdit Technical Documentation
Contents
1. eeeeeeeeeee ee eeeeee esses eene nenne nhan nnn nhan nennen antenne nan aaran iaia aiia 14 5 1 mue LEE 14 b2 Demo webpage net tette t ebd ehe te re e aE Avatars 15 6 Enhanced functionality by WebService integration cesses eren nennen nnns 21 6 1 ICEdit and ICNativeWS hosted by a Tomcat servlet container ssssssssssseees 21 6 2 Service configuration esssssssssssssesssesenee ente enne AE A E EAA enne sensn nnns en rennen IAN nnns entren en 21 7T Customer Support e eiit alere eroe alicia curs hades seceded TA coed hada caries deen ey 22 ICEDIT JavaScript Technical Documentation 2 1 Preface This documentation gives a detailed technical description of IC EDIT JavaScript Here you can find information about e Changing the Layout of ICEDIT e Initialization of ICEDIT with a structure reaction e Programming interface Please note For the use of ICED T JavaScript please refer to the ICEDiT JavaScript user manual ICEdit JavaScriptEditor pdf Chapter 1 Preface ICEDIT JavaScript Technical Documentation 3 2 Configuration of ICeor It is recommended to use a separate configuration file instead of setting the parameters in the html file If your configuration file is called iceditjs config js you may embed it in your html page title ICEdit JavaScript Version lt title gt lt script type text javascript language javascript src iceditjs config js gt l2. ById rosdal value function copyRosdal var result ICEditJS getRosdal document getElementById rosdal value result function copyExpandedRosdal var result ICEditJS getExpandedRosdal document getElementById rosdal value result function getCanvasHeight return parseInt document getElementById heightCanvas value Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 16 function getPngBorder return parseInt document getElementById png border value function getPngWidth return parseInt document getElementById png width value function getPngHeight return parseInt document getElementById png height value function if When the Initialization button is pressed this webpage is called again window opener null and the calling window instance window opener is set In this case the init rosdal variable will be set with the Rosdal of the parent window init rosdal window opener document getElementById rosdal value function createImage try var imgSource ICEditJS createPngFromRosdal document getElementById rosdal value var imgSource window createPngFromRosdal document getElementById rosdal value var imgSource ICEditJS createPngFromRosdalWithBorder document getElementById rosdal value getPngBorder fimage attr src
3. I enr Technical Documentation Structure and Reaction Editor JavaScript Version 3 0 1 5 Spring 2014 ICEDIT JavaScript Technical Documentation 1 Table of Contents T Bretace mc a SS a Ue m m mE UR E 2 2 Configuration of ICEDIT 3 3 e paca ai inna eiii et darius ado 3 2 1 Parameter deseti tiO ieit R cnp et ilie n rt Petre aet PETRA bilge ohh eu E HE ert Deluge 4 3 Changing the Layout of ICEDIT e eeesisesessees esee eeee innen nnne mann than sitas anms natn nn sain assa asas aaia 5 3 1 Configuration of ICEDIT atom button bar 5 3 2 Width and height of the drawing area ssssssssssee enne nennen nnne nnns 7 3 2 1 Drawing area Width ci iride pide pne perii itl ieee I era te idu pre penes 7 3 2 2 Drawing area height 0 ione Ep I git idea I pergit ilii receta 8 3 9 Button images teeth etd e pe eee ette e eet bt aed die Pet etes 8 3 4 Button backgro rid cinere eH Rete EDU De E e ee ELE eb dn pde SIRE De dine 8 3 5 Button bar background coloanei niei rian iee eene nnne en nennen nnn enne 9 3 5 1 Background of the main button bar enne nnne 9 3 5 2 Background of the sub button bar nennen nennen 10 3 6 Add Remove shadow olette aen arik unn Ea a enne entente eren nennen nn nnt enne 10 3 Select Text Eont aae e oaa at eco a ddr Air Eb ee iade 11 SEMEN Ch N 11 z Eire CERE 13 5 Programming Interface
4. Path to the directory with button images var FunctionalityMode Mode 0 he Offers 3 different modes 0 Complete default 1 Some functionality is missing by disabling 2 Some functionality is missing by setting invisible In 1 and 2 some atom and bond properties are missing var ShowHydrogens set 3 Offers 4 different options to show hydrogens 0 Is 2 3 Off default Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 5 3 Changing the Layout of ICEDIT The layout of ICEDiT JavaScript can be modified The following layout items can be adapted according to your needs 1 Configuration of the atom button bar 2 Height and width of the drawing area 3 Button images 4 Button background 5 Button bar background color 6 Add Remove shadow effect 3 1 Configuration of ICEDIT atom button bar This brief description will show you how to arrange the atom buttons on the Atom button bar Figure 1 shows the standard atom button bar with its default atom buttons C N O and S The button on the right of the atom button bar currently showing the F atom is variable and shows the last selected atom from the periodic table of elements The atom buttons can be configured by changing the following JavaScript code which must be embedded in the HTML file containing the IC EDIT object Atoms toolbar configuration var Atoms 1s Button descri
5. al Documentation 22 7 Customer Support Please contact us to receive technical support or license information INFOCHEM GESELLSCHAFT F R CHEMISCHE INFORMATION MBH Landsbergerstrasse 408 V D 81241 M nchen Germany Phone 49 0 89 583002 Fax 49 0 89 5803839 Email iceditsupport infochem de For general information about InfoChem products see the InfoChem homepage at http www infochem de Chapter 6 Customer Support
6. behind the drawing area just delete the box shadow line mainPanel width 600px height 635px background color white color black border width 1px border style solid border color black margin left 10px pee i10px 10px 5px 4888888 Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 11 3 7 Select Text Font You can select a different text font for the window title dialog text and context menu entries by changing the icEditTextFont section of the ICEditJS css file icEditTextFont font family sans serif monospace font size 0 9em 3 8 Example By default the ICEDIT JavaScript has the following Look amp Feel ICEdit JavaScript Version 127003 5888 1CEdit S html ICEdit JavaScript Fig 3 ICEDIT default Look amp Feel Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 12 The changes listed below demonstrate how the Look amp Feel of ICEDIT can be modified see above for the required changes e Width has been increased from 600 to 800 pixels e Height has been decreased from 600 to 300 pixels e Main button bar background color has been set to purple e Sub button bar background color has been set to FF6CFF e The button color has been set to FFE3FF without color gradient e The shadow effect has been removed e Pencil button image has b
7. een replaced The modified Look amp Feel of ICEDIT ICEdit JavaScript Version 127003 5888 1CEdit S html ICEdit JavaScript a ojo 2 s e fol 4 E u seks ALDLOOJ AY a Blo a olo Fig 4 ICEDIT with modified Look amp Feel Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 13 4 Initialization If you want to open the ICED T JavaScript application with an initial structure reaction you can use the init rosdal variable When set the ICEDIT shows the structure reaction described by this variable Example In this example the webpage containing the ICED T object has defined an init rosdal variable which has been set to a benzene structure lt script type text javascript gt var init rosdal 1 X251 Y 106 2 X251 Y 136 3 X277 Y 151 4 X303 Y 136 5 X303 Y 106 6 X277 Y 91 122 01024 2 3 01024 324 01024 4 5 01024 526 01024 1 6 01024 EP x lt script gt The webpage shows an initial benzene structure when opened J ICEdit JavaScript Version amp 127 0 0 1 3888 1ceditS htm ICEdit JavaScript amp e 9G Jc u Zjej oOm jiejejo eo Fig 5 ICEDIT with an initial benzene structure Chapter 3 Initialization ICEDIT JavaScript Technical Documentation 14 5 Programming Interface 5 1 Functions ICEDIT JavaScript offers a programmi
8. ight value in the mainPanel section must be greater than the drawing area height because of the button panel In the example above the former value was 635 You cannot reduce the height of the drawing area to 0 but if you want to dynamically hide or show the ICEDIT you can use the interface functions hide and show Please refer to chapter 5 for further details 3 3 Button images The images for the buttons are png files which are located in the img iceditjs directory If you want to change one of these images just replace it with a 24x24 sized png image of your choice For example the image for the select button Sis saved in the img iceditjs select png file 3 4 Button background By default all ICED T buttons are 3d styled buttons with a grey color gradient If you want to turn them for example into plain yellow buttons then please make the following changes red text in the ICEditJS css file Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 9 gwt PushButton up gwt PushButton up hovering gwt PushButton up disabLed gwt PushButton down gwt PushButton down hovering gwt PushButton down disabled margin 6 text decoration none background yellow gwt ToggLeButton up gwt ToggLeButton up hovering gwt ToggLeButton up disabLed gwt ToggLeButton down gwt ToggLeButton down hovering gwt ToggLeButton down disabled margin 6 text decoration none backgro
9. imgSource catch e console log error e alert e return false S img button bind click function createImage function createImageToBox var imgSource ICEditJS createPngFromRosdalToBox document getElementById rosdal value getPngWidth getPngHeight S image box attr src imgSource return false 2 Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 17 S img button box bind click function createlmageToBox function createImageMany var start new Date getTime for var i 0 1i lt 1l000 i var imgSource ICEditJS createPngFromRosdal 1N 1 X257 Y 159 2 X257 Y 189 3N 3 X283 Y 204 4 X309 Y 189 5 X309 Y 159 6N 6 X283 Y 144 1 2 Q1024 2 3 Q1024 3 4 Q1024 4 5 Q1024 5 6 Q1024 1 6 Q1024 var imgSource window createPngFromRosdal document getElementById rosdal value S image many attr src imgSource var end new Date getTime alert end start ms return false fimg button many bind click function createImageMany J lt script gt lt head gt lt body gt lt RECOMMENDED if your web app will not function without JavaScript enabled gt lt table width 100 border 1 cellpadding 0 cellspacing 2 gt lt tr gt lt td valign top gt lt noscript gt lt div style width 22em position abs
10. ined atom button bar aa E ue wal O 3 2 Width and height of the drawing area 3 2 1 Drawing area width To change the width of the ICED T drawing area you need to change 3 values in the ICEditJS css file For example if you want to increase the width from 600 to 700 pixels then you should make the following changes subButtonPanel width 700px height 40px background color Lightgrey color Lightgrey canvasPaneL width 700px height 600px background color white color black mainPanel width 700px height 635px background color white color black border width 1px border style solid border color black margin left 10px box shadow 10px 10px 5px 888888 Please note You should not use a width 600 pixels because this space is needed for the button bar Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 8 3 2 2 Drawing area height Similar to the drawing area width you can change the height of ICEDIT but here you only have to change two values In the following example the height was increased from 600 to 800 pixels canvasPaneL width 600px height 800px background color white color black mainPanel width 600px height 835px background color white color black border width 1px border style solid border color black margin left 10px box shadow 10px 10px 5px 888888 Please note The he
11. ng interface with the methods listed below These methods can be accessed via the ICEditJS object e g ICEditJS getRosdal getRosdal The getRosdal function returns the corresponding rosdal to the structure reaction drawn in the ICEDIT drawing area setRosdal rosdal You can use the setRosdal function to draw a structure reaction on the IC EDIT drawing area The rosdal parameter is a string in rosdal format createPngFromRosdal rosdal The createPngFromRosdal function returns a png image as a data url of the type image png which contains the structure reaction represented by the rosdal parameter createPngFromRosdalWithBorder rosdal border Similar to createPngFromRosdal the createPngFromRosdalWithBorder function creates a png image of the Rosdal but additionally provides the possibility to add a border around the structure reaction The border parameter represents the width of the border in pixels createPngFromRosdalToBox rosdal width height border This function creates a png image with user defined width and height values The structure reaction described by the rosdal parameter will be scaled so that it fits into the given size defined by the parameters width and height In addition you can define a border around the structure reaction setCanvasHeight height You can dynamically change the height of the drawing area by calling the setCanvasHeight function with the height in
12. olute left 50 margin left llem color red background color white border 1px solid red padding 4px font family sans serif gt Your web browser must have JavaScript enabled in order for this application to display correctly div noscript h1 lt p align center gt ICEdit JavaScript lt p gt h1 div id canvasholder gt lt div gt br td td lt h2 gt lt p align center gt Interface Demo lt p gt lt h2 gt Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 18 lt p align center gt lt textarea id rosdal style width 500px height 80px gt lt textarea gt lt p gt lt table width 100 border 0 cellpadding 4 cellspacing 4 gt lt tr gt lt td gt lt p gt lt b gt 1 Create a test structure reaction lt b gt lt p gt lt p gt Please draw a structure reaction with lt i gt ICEdit JavaScript lt i gt which is needed for the steps below lt p gt lt td gt lt tr gt lt tr gt lt td gt lt p gt lt b gt 2 Display Rosdal lt b gt lt p gt lt p gt The getRosdal function provides you the corresponding Rosdal to the test structure reaction lt p gt lt input type button value get Rosdal onclick copyRosdal gt lt td gt lt tr gt lt tr gt lt td gt lt p gt lt b gt 3 Drawing a structure reaction lt b gt lt p gt lt p gt You can use the setRosdal function to draw a
13. pixels as parameter hide The hide function can be used to set the ICEDIT object to invisible show After setting the ICEDIT object to invisible you can set it to visible again with the show function Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 15 5 2 Demo webpage The listing below is a demo webpage to demonstrate the interface functions lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd html head meta http equiv content type content text html charset UTF 8 meta name viewport content width device width user scalable no meta http equiv Cache Control content no cache lt link type text css rel stylesheet href ICEditJS css lt title gt ICEdit JavaScript Version lt title gt lt script type text javascript language javascript src iceditjs iceditjs nocache js script lt script type text javascript language javascript src jquery js gt lt script gt script type text javascript var init rosdal 1 X264 Y 169 2 X264 Y 199 3 X290 Y 214 4 X316 Y 199 5 X316 Y 169 6 X290 Y 154 1 2 Q1024 2 3 Q1024 3 4 Q1024 4 5 Q1024 5 6 01024 1 6 01024 function windowOpen address var myWindow window open address ICEditJS width 600 height 600 scrollbars yes myWindow focus function getRosdal2 return document getElement
14. ptionl Draw carbon atoms symboll C i 2 Button description2 Draw nitrogen atoms symbol2 N 3 Button description3 Draw oxygen atoms symbol3 O Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 6 H 4 Button description4 symbol4 S Draw sulfur atoms If you want to add or change a button just add a new button section or change the appropriate button section in the atoms definition So for example if you want to have a P atom button instead of N and you want to have an additional Si button your atoms definition would look like this Atoms toolbar configuration var Atoms Please note 1 Button descriptionl symboll C 2 Button description2 symbol2 P i 3 Button description3 symbol3 O 4 Button description4 symbol4 S 5 Button descriptionb5 symbol5 Si Draw Draw Draw Draw Draw carbon atoms phosphor atoms oxygen atoms sulfur atoms silicon atoms The description definition will be used as a tool tip If you want to add a new atom button don t forget to increase the trailing number of the description and the symbol variable name After changing your ICEDIT HTML file your atom button bar will look like this Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation Q Fig 2 User def
15. structure reaction lt br gt In this example the Rosdal in the text area will be used to draw a structure Reaction in the ICEdit canvas lt p gt lt input type button value set Rosdal onclick ICEditJS setRosdal getRosdal2 gt lt td gt lt tr gt lt tr gt lt td gt lt p gt lt b gt 4 Creating png images lt b gt lt p gt lt p gt Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 19 The createPngFromRosdal createPngFromRosdalWithBorder functions create a png file with a rosdal rosdal border as parameters lt p gt lt button id img button gt create image lt button gt lt p gt Border lt p gt lt input type text id png border size 3 maxlength 3 value 10 gt lt img id image style border lpx solid steelblue gt lt td gt lt tr gt lt tr gt lt td gt lt p gt lt b gt 5 Creating scaled png images lt b gt lt p gt lt p gt Similar to createPngFromRosdal the createPngFromRosdalToBox function creates a png file with user defined width and height values lt p gt lt button id img button box gt create scaled image lt button gt lt p gt Width lt p gt lt input type text id png width size 3 maxlength 3 value 100 gt Height lt input type text id png height size 3 maxlength 3 value 100 gt lt img id image box style border lpx solid steelblue gt lt td gt lt tr gt l
16. t script gt lt script type text javascript language javascript src itceditjs iceditjs nocache js gt lt script gt Example of a configuration file iceditjs config js Application directory in format DIRECTORY for example app prt Controller command for ICNativeServiceWS e g ICNativeWS icedit default app icnative var ICNativeService path default is ICNativeWS icedit 5 Image directory var ImageDirectory path img iceditjs J fre Atom Modi 0 Complete default 1 Some functionality is removed by disabling 2 Some functionality is removed by setting invisible y var FunctionalityMode Mode 0 5 Off default On Hetero On Terminal 3 On All y var ShowHydrogens set 3 5 Atoms toolbar configuration var Atoms 1 Button description1 Draw carbon atoms imagel c atom png symboli C 2 Button description2 Draw nitrogen atoms image2 n atom png symbol2 N 3 Button description3 Draw oxygen atoms image3 o atom png symbol3 O 4 Button description4 Draw sulfur atoms image4 s atom png symbol4 S Alternatively you can set the parameters directly in your html page For missing parameters common defaults will be used Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 4 2 1 Parameter description var ImageDirectory path img iceditjs
17. t tr gt lt td gt lt p gt lt b gt 6 Performance test lt b gt lt p gt lt p gt By clicking the button below 1000 png files will be generated When the process has finished the time used to create the files will be displayed lt p gt lt button id img button many gt create many images lt button gt img id image many style border 1px solid steelblue gt lt td gt lt tr gt lt tr gt lt td gt Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 20 lt p gt lt b gt 7 Layout lt b gt lt p gt lt p gt You can change the height of ICEdit by calling the setCanvasHeight int height function with the height in pixels as parameter lt p gt lt input type button value set height onclick ICEditJS setCanvasHeight getCanvasHeight lt input type text id heightCanvas size 3 maxlength 3 value 300 gt lt p gt You can hide show the ICEdit component by calling the hide show function lt p gt lt input type button value hide onclick ICEditJS hide gt lt input type button value show onclick ICEditJS show lt td gt lt tr gt lt tr gt lt td gt lt p gt lt b gt 8 Initialization lt b gt lt p gt lt p gt An initial structure can be passed to the ICEdit by setting the init rosdal variable In case the ICEdit is opened in a new window the variable init rosdal should be set by the child window by setting the variable
18. und yellow Since there are two different kinds of buttons push and toggle buttons you have to make two changes in the css file 3 5 Button bar background color 3 5 1 Background of the main button bar The background of the main button bar can be set to an arbitrary color If you want to have a purple background for example you would have to make the following changes in the ICEditJS css file buttonBorder background color grey color white border width 2px border style solid border color purple fillMainButtonPanel height 33px width 4 px background color purple color white mainButtonPanel width px height 40px background color purple color white Chapter 2 Changing the Layout of ICEdit ICEDIT JavaScript Technical Documentation 10 mainPanel width 600px height 635px background color purple color black border width 1px border style solid border color black margin left 10px box shadow 10px 10px 5px 888888 3 5 2 Background of the sub button bar Similar to the main button bar you can change the background color of the sub button bar by making the following changes subButtonBorder background color grey color white border width 2px border style soLid border color purple subButtonPanel width 600px height 40px background color purpLe color Lightgrey 3 6 Add Remove shadow effect If you want to remove the shadow
19. with the value of a rosdal textarea of the parent window In this demo the textarea above set with step 2 is used to hand over the rosdal lt p gt lt input type button value open ICEdit with rosdal initialization onclick windowOpen document URL gt lt td gt lt tr gt lt table gt lt td gt lt tr gt lt table gt lt body gt lt html gt Chapter 4 Programming Interface ICEDIT JavaScript Technical Documentation 21 6 Enhanced functionality by WebService integration It is possible to extend ICEdit with some additional functionalities like full superatom support Therefore ICEdit needs a connection to Infochem s WebService ICNativeWS This connection must follow the Same Origin Policy SOP 6 1 ICEdit and ICNativeWS hosted by a Tomcat servlet container 1 Follow ICNativeWS Technical Documentation pdf to install ICNativeWS on a Tomcat servlet container Unpack ICEditDemo zip to SCATALINA HOME webapps directory Navigate your browser to http 127 0 0 1 8080 ICEditDemo ICEditJS html Draw a bond with COOH for one atom This atom should be expandable by the context menu 6 2 Service configuration If you are using a proxy you may have to configure the ICNativeService in your HTML file Native service configuration var ICNativeService path default is ICNativeWS icedit path ICNativeWS icedit path app icnative Chapter 6 Customer Support ICEDIT JavaScript Technic
Download Pdf Manuals
Related Search