how to recreate EJSS models from EJS

how to recreate EJSS models from EJS.

this tutorial is made to help anyone figure out how to recreate EJSS models from EJS.
files required https://dl.dropboxusercontent.com/u/44365627/lookangEJSworkspace/export/ejss_src_ThinLenModel02.zip

1. Download the suitable candidate for re-creation the easy way as i have figure out recently. 
   
2. as part of reviewing lesson for the ICT information and communication technology Master-plan in Education http://ictconnection.moe.edu.sg/lesson-examples&func=view&rid=2931, this lesson uses an paid iPad app.
3. select a folder place to save the EJS ejs or xml file and agree to all request if any. 
4. here, there are 2 things needed, the old EJS and a re-create EJSS file of the same thing waiting for more edits.
1. select Yes, to view the old EJS file, keep it open for reference 
   
2. select No, to generate the EJSS file from the EJS for more edits 
   
5. there should be 2 EJS copies opened, Left EJS old (view is VIEW), and Right EJSS new (view is HTML)
   
6. First step is to save it as ejss. 
   
7. Discard the old EJS view by selecting No 
   
8. the EJS output will show something like this Skipping Java view from this JS file...File saved successfully users/sgeducation/lookang/ThinLenModel02.ejss
9. Debugging and making it able to be compile in the EJSS version.
10. When trying to  Run Simulation, error message says no HTML view, just go ahead to give it one 
    
11. Click to create a HTML page 
12. now, EJS output show a lot of errors, fix them one by one in no particular order, the principle is reduce the complexity of the old EJS and make it runnable first before adding views to it
13. scroll to initialization, remove codes that seems to give errors 
14. replace {} as [] in the variables declarations.
    
     
15. change mode to be array dimension [1] string
    
16. change codes for drop-down menu to from if(mode.equals("0.1 mm version 1")) to   if(mode[0]==="0.02 mm version 1")
    
17. replace (int) to parseInt, as advised by http://www.w3schools.com/jsref/jsref_parseint.asp 
    
18. replace int to var, Javascript local variable declaration 
    
19. drawing such as polygon need to be reassign in the following manner create a dummy new variable say xytail = [[xmax,0],[xmax,size/2],[xmax-size*2,size/2],[xmax-size*2,size],[-size*16,size],[-size*16,0]] dimensions [6][2] from the old xt = [xmax,xmax,xmax-size*2,xmax-size*2,-size*16,-size*16] and yt = [0,size/2,size/2,size,size,0]
    
20. sometimes need to draw dotted lines , add in Attributes { "stroke-dasharray":"8 8 8 8" } 
    
21. remove unnecessary codes in custom like chinese detection, decimal place display, play/pause label change etc in the custom usually. 
    
22. replace new java.awt.Color to function Custom rgb function rgb(r, g, b){
    return "rgb("+r+","+g+","+b+")";
    } as advised by http://www.compadre.org/osp/bulletinboard/TDetails.cfm?ViewType=2&TID=3380&CID=84198&#PID84199 
    
    
    
    
    
23. change the type of color from Object to String 
24. add values to variable declared
25. now test it by running the simulation, the browser should show a runnable view of the EJSS now.
    
26. now that the ejss runs, it is time to transfer as much drawables in HTML equivalent over. first the Drawing Panel 
    
27. test to see what is the effect of the changes in ejss 
    
28. adding object one per one, for example lens group
    
29. Open up another ejss file to transfer the layout design 
    
30. run it to see what you have done 
    
31.