Monday, March 13, 2017

esjj harshvir

How to copy and paste design in EJSS

How to copy and paste design in EJSS?

Setting Up

  1. open up 2 copies of EJSS latest  EjsS_5.2_161123.zipand
  2. notice you can copy and paste from one EJSS to another

Master Copy and Getting an Older ejss

  1. let's say kinematics.ejss is the current template for which is needed to be copied to all other simulation files .ejss, Open it in to enjoy all the latest features not public release yet.
  2. click on Launch Easy Java(script) Simulations to run another instance of the modeling tool
  3. by now, there should be 3 panels Left - Kinematics, Right - New, bottom - Console
  4. Let's say the old ejss is so click on the play button to see what is the URL which gives the code to the source code file name. vectorsum04
  5. download the source into your computer workspace and open it using the EJSS modeling tool
  6. alternatively, try to download and open via the Read from an EJSS Library 
  7.  click on the green button to compile the simulation 
  8. notice the browser launches and the simulation should work 
  9. the end goal is to transfer the current design features like upgrading all older ejss into the latest look and feel and features 


  1. the principle is keep only About , transfer all relevant info into the page on or comments 
  2.  after identifying the pages ForTeacher to be copied to login, edit, and copy paste 
  3. Header 3 for title 
  4. copy from EJSS into the webpage
  5. save webpage and check 
  6. remove tab on EJSS 
  7. software requirement remove, it is already a default on webpage
  8. intro page copy and paste in comments on EJSS, access via top corner icon
  9. save your work
  10. it should only something like this 
  11. run your simulation to check if it still run ok and click play to test


  1. navigate to HtmlView of both simulations side by side, 2 screens with be useful
  2. right click the panel and select move up to reposition panel etc
  3. run the new rearranged ejss and test if it run correctly, notice the panel of controls in above now as arranged in the HtmlView
  4. by means of comparison, try to make kinematics.ejss stuff work into the vectorsum04.ejss file
  5. remove feedback and htmlArea, run it to check it works still
  6. comboBox must be the name for all copied codes to work, else will need some intelligent debugging, so rename it, if it cannot be done, check through the other combobox to check if the name is taken already 
  7. compare side by side and decide how to copy intelligently, width is copy over but the OnChange need to go to find the codes inside vectorsum04.ejss initialization page
  8. (_isMobile)?"50":"" is a code that check if simulation is on mobile platform if true, it runs first statement which is "50" else "" do nothing 
  9. SelectedOptions is tricky to replace, search for the variable selecteds in the magnifying icon and see how many times it appears in the simulation
  10. _view.comboBox.getProperty("SelectedOptions") is the low level code to replace variable selecteds, find selecteds and replace it by _view.comboBox.getProperty("SelectedOptions")
  11. === is not well understood so change it to == too 
  12. with every small change, run it to test it is not broken
  13. search it again, all replacements is done, only variables is left 
  14. finally remove it from SelectedOptions
  15. On change, copy/cut the part of the codes that control the SelectedOptions out into 
  16. OnChange 
  17. test the dropdown menu

How to insert gradient

1. Open an EJSS of a sim that already has a gradient code eg. kinematics
2. Navigate to Model -> Initialization -> svgradial

4. Each paragraph from 'var container = document.createElement...' to 'document.body.appendChild(container);' contains the code for 1 gradient. You may vary the gradient colour/elements within the rgb parameters and the 'stop-opacity' value. 
5. To find the name of the gradient, look under '<radialGradient id="mygrandient" '. The name of the gradient is thus mygrandient.
6. You may then use this gradient as a fill colour for your shapes in htmlview. 

labels, sliders, 

field etc 

  1. the mobile design does not use this but teachers want they in the desktop, so copy this into a panel at the bottom