Nanoparticle Project

Nanoparticle Synthesis Project is one of the NSF funded Nano-Technology related projects, in Binghamton University-SUNY / Mechanical Engineering Department.

This particular project is a joint project between Mechanical Engineering and Computer Science Departments.

This page is designed to be a Knowledge Transfer page for anyone interested in upgrading this project, or work on another project with similar requirements.

Introduction to NSS

Nanoparticle Synthesis Simulator (NSS) is designed to be educational tool about a particular experiment, namely synthesizing Silver Nanoparticles via redox reaction.

The chemicals used in the actual experiment are:

• Liquid medium/Solvent: Toulene
• Metal Salt: Silver Acetate
• Reducing Agent: Tetrabutylammonium Borohydride
• Surfactant/Capping agent: Dodecylamine

Where Nanoparticle size depends on temperature, concentration of reactants, time and the surfactant used in the experiment.

The simulation tries to mimic the real laboratory synthesis experiment, allowing the users to interact with the lab setting with virtual beakers, flasks, etc.

The target audience of the simulation is college freshmen and high school students.

Web Site of NSS

The URL for the website of NSS is the following: http://steflikk6.cs.binghamton.edu/~nano/nss/index.html

In addition to the simulation the website contains information about the project members, links, and project documents. The structure is as follows:

* Home
 * Simulator
 * Project Members
 * Project Documents
 * Links

Web Site Design

The website is designed in Adobe DreamWeaver and it consists of static HTML pages. A good html tutorial can be found here: http://www.w3schools.com/html/default.asp

Cascading Style Sheets (CSS)

The visual elements of the website are controlled using cascading style sheets. A good css tutorial can be found here: http://www.w3schools.com/css/default.asp

Macromedia Flash 8 w/ ActionScript 2.0 in NSS

Introduction to Flash

Adobe Flash (previously called Macromedia Flash) is a multimedia platform originally acquired by Macromedia and currently developed and distributed by Adobe Systems. Since its introduction in 1996, Flash has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, and various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications.

Flash can manipulate vector and raster graphics and supports bidirectional streaming of audio and video. It contains a scripting language called ActionScript. Several software products, systems, and devices are able to create or display Flash content, including Adobe Flash Player, which is available free for most common web browsers, some mobile phones and for other electronic devices (using Flash Lite). The Adobe Flash Professional multimedia authoring program is used to create content for the Adobe Engagement Platform, such as web applications, games and movies, and content for mobile phones and other embedded devices.

Files in the SWF format, traditionally called "ShockWave Flash" movies, "Flash movies" or "Flash games", usually have a .swf file extension and may be an object of a web page, strictly "played" in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash movie (with the .exe extension in Microsoft Windows or .hqx for Macintosh). Flash Video files[spec 1] have a .flv file extension and are either used from within .swf files or played through a flv aware player, such as (VLC), or QuickTime and Windows Media Player with external codecs added.

Working with Vectors

All of the graphical elements created in Flash are vector based elements. (The reader might be familiar with the same concept in .pdf files.) Therefore, everything drawn/created using flash can be zoomed in multiple times without any loss of image quality. (Try zooming in on a flash banner of a website.)

On the other hand, this only applies to graphics created with Flash. If a graphics with a common image format is imported to the flash, it will not have the same characteristics as a Flash graphics. It will lose it;s image quality if zoomed in.

This property of Flash make it very useful in certain cases, such as one can have items of vastly different sizes residing in the library. Once the items/symbols are dragged to the main scene their size can be change accordingly without any loss in image quality.

Library

Library panel on the right hand side of the Flash environment is very important during the development stage. It serves as the container of all the symbols used in the project.

Unlike other applications such as "Microsoft Visual Studio", Library in Flash is project/file specific. So the library contains only those symbols used in a particular Flash file.

In order to add something to the library one can do any of the following:

• draw an element on the main frame, select it and convert it to a symbol
• drag and drop a graphics from the outside (an image or a video file)

Creating a Symbol

In order to have a new symbol one must follow these steps:

• Draw something on the scene using tools such as circle/rectangle/line/paint bucket.
• Hit F8 or from the menu choose >>"Modify">>"Convert to Symbol"
• Name it
• Select the appropriate need
• Convert it to a Symbol

After following these steps the symbol will appear in the Library and can be used as many times as needed.

• To change the look/properties of a converted symbol, simply choose it from the menu and change it accordingly.
• To use it on the flash file, drag&drop it on the desired scene. (If it will be used as an interactive object, I suggest you to name it in the properties window >> Instance Name.)

Common Libraries

Other than using created graphics one can also include default graphic symbols that are provided in the common libraries. To do that one should open the Common Libraries from the menu bar: >>Windows>>Common Libraries and >>Windows>>Components.

Here one can find several predesigned buttons, learning interactions and basic interface components. In order to include the desired component one should drag and drop it on the desired scene/frame. It will be added to the Library automatically.

ActionScript 2.0 as a Scripting Language

ActionScript is a scripting language based on ECMAScript. ActionScript is used primarily for the development of websites and software using the Adobe Flash Player platform (in the form of SWF files embedded into Web pages), but is also used in some database applications (such as Alpha Five), and in basic robotics, as with the Make Controller Kit. Originally developed by Macromedia, the language is now owned by Adobe (which acquired Macromedia in 2005). ActionScript was initially designed for controlling simple 2D vector animations made in Adobe Flash (formerly Macromedia Flash). Later versions added functionality allowing for the creation of Web-based games and rich Internet applications with streaming media (such as video and audio).

To add scripts to your Flash file:

• Select the object/frame that is associated with that action.
• Open the "Action" window and add the script.

Action window is also a bit counter intuitive in the sense that a flash animation will contain it's ActionScript code all over the animation instead of one sequential file with functions.

Data types

ActionScript primarily consists of "fundamental" or "simple" data types which are used to create other data types. These data types are very similar to Java data types. Since ActionScript 3 was a complete rewrite of ActionScript 2, the data types and their inheritances have changed.

ActionScript 2 top level data types

• String - A list of characters such as "Hello World"
• Number - Any Numeric value
• Boolean - A simple binary storage that can only be "true" or "false".
• Object - Object is the data type all complex data types inherit from. It allows for the grouping of methods, functions, parameters, and other objects.

ActionScript 2 complex data types

There are additional "complex" data types. These are more processor and memory intensive and consist of many "simple" data types. For AS2, some of these data types are:

• MovieClip - An ActionScript creation that allows easy usage of visible objects.
• TextField - A simple dynamic or input text field. Inherits the Movieclip type.
• Button - A simple button with 4 frames (states): Up, Over, Down and Hit. Inherits the MovieClip type.
• Date - Allows access to information about a specific point in time.
• Array - Allows linear storage of data.
• XML - An XML object
• XMLNode - An XML node
• LoadVars - A Load Variables object allows for the storing and send of HTTP POST and HTTP GET variables
• Sound
• NetStream
• NetConnection
• MovieClipLoader
• EventListener

Timeline Control

Common ActionScript 2.0 commands for timeline control include:

• gotoAndPlay(frameNumber);
• gotoAndStop(frameNumber);
• play();
• stop();

One can add one of these commands in a way to control the sequence of the frames. For example one can add Action on a Button symbol with the following code:

on (release) {
	gotoAndPlay(5);
}

Browser/Network Control

A very common browser control command is:

• getURL(URL,window,method);
• getURL(URL,window);

It allows the user to redirect to an URL using some form of interaction such as a button. The "window" parameter decides in which window the URL should be connected to. "0" lets the user redirect from the current page to the URL, whereas a "1" opens up the URL in another window/tab.

Another comment that might be useful is:

• loadVariablesNum(fileName, window,method);

which allows the user to pass variables from the flash file to a server side scripting language. In NSS it is used to pass variables to a PHP file, which in turn sends out emails. It uses the following code:

loadVariablesNum("emailer.php", 0,"POST");

The "emailer.php" file in turn takes the variables and uses the following code to send out emails:

<?$subject  =  $_POST["subject"];
  $message  =  $_POST["message"];
  $header = "From: nssquizresults@gmail.com\n";
  $header .= "Reply-To: nssquizresults@gmail.com\n";
  $header .= "X-Mailer: PHP/" . phpversion() . "\n";
  $header .= "X-Priority: 1"; 
  mail("nanoparticlesynthesissimulator@gmail.com", $subject, $message, $header);?>

Timeline

Timeline is the single most important window in the flash environment no matter which version is used. Here one can manage all the frames of the current animation.

On the left hand side one can see and arrange the layers of the animation. As in other graphics processing softwares, the layered architecture helps ordering the graphic elements in the animation.

On the right hand side one can see the actual frames. By clicking them one can go to a desired frame. To add a frame into a specfic frame number right click and choose "Insert Frame" or "Insert Keyframe" (if new frame itself is going to contain actions bound to it.)

Additionally one can use the "Onion Skin" function right under the timeline to see more than one frame.One can also choose the "Edit Multiple Frames" function right next to "Onion Skin" to edit more than one frame. If these functions are selected their interval should be set by the curly braces in the timescale.

Basic Tools

Text Tool

The important fact regarding this tool is that it's type can be one of the following (Type is set on the properties window):

• Static Text
• Dynamic Text
• Input Text

Depending on the type it will act differently. A static text, as its name suggests, cannot be changed during the play of the flash animation. A dynamic text on the other hand can be manipulated by accessing its "text" property:

VariableName.text = "This is a text!";

An input text is used to get user input.

Drag/Drop Animation

Drag and Drop animation can be achieved with the following code template:

//instanceNameOfObject is place holder for the actual variable name of the object to be dragged and dropped
//instanceNameOfTarget is place holder for the actual variable name of the target object defining the correct area for a drop
//"_x" and "_y" are coordinate properties of the abject
//oldSpotX and oldSpotY are place holders for the objects old coordinates
onMouseMove = function () {
	updateAfterEvent();
};
instanceNameOfObject.onPress = function() {
	this.startDrag();
};
instanceNameOfObject.onRelease = function() {
	this.stopDrag();
	checkTarget(this);
};
instanceNameOfObject.onReleaseOutside = function() {
	this.stopDrag();
	checkTarget(this);
};
function checkTarget(drag) {
	if (drag.hitTest(instanceNameOfTarget)) {
		// do whatever you want i.e: gotoAndStop(2);
	} else {
		instanceNameOfObject._x = oldSpotX;
		instanceNameOfObject._y = oldSpotY;
	}
}

Importing Video Files to Flash

In order to import a ".mpg" or ".wmv" video file into the flash environment, one should follow the following steps:

• Go to File>>Import>>Import Video
• Select the video file you want to import, click "Next"
• Select the streaming option (I recommend the streaming options), click "Next"
• Encode by selecting the encoding option, click "Next"
• Choose the desired skin for your imported video, click "Next"
• click "Finish" in the final page

Also do not forget to add following files to the web server:

• Skin animation
• Encoded Video

Current Time

In order to get the current time in flash one can use the getTimer() mehtod. Following piece of code illustates the use as in a timer:

BeginningTime = getTimer() ;
EndTime = getTimer() ; 
TimerInSeconds  =  EndTime - BeginningTime ;
TimerInSeconds  =  Math.round( SimulationTime / 1000 ) ;

Embedding Flash Filese into HTML Pages

In order to embed the flash file into the HTML page one should follow the following steps:

• Go to File>>Publish (or Shift + F12)
• It will create an HTML file with the same name as the original animation file (different extension).
• Copy the HTML code between two <object> tags and paste it into the desired place

Additionally one can change the publishing settings in File>>Publish Settings

Flash Tutorials

Here is a list of Flash tutorials that might be helpful:

• http://www.w3schools.com/Flash/default.asp
• http://www.entheosweb.com/Flash/default.asp
• http://www.tutorialized.com/tutorials/Flash/1

ProEngineer in NSS

3-D Animations using ProEngineer

Making each individual part of the nanoparticle or mechanism is the first step to making animations using ProEngineer Wildfire. Once this is done, then the parts must be put together in an assembly in ProE. When putting the parts together in the assembly it may be important to think about the end product in order to be able to specify the proper attachment when bringing a part into the assembly.

There are actually a couple of ways that were utilized to make video in ProE. The first and perhaps the easier way was to go to the mechanism application with the assembly and put a servo force or other desired outside parameter on the assembly and then run the simulation to get movement. Again, this is highly dependent that all of the proper joints were chosen to get the desired movements. It will take a good portion of time to adjust the parameters to achieve the desired results. Simply spinning the nanoparticle was the movement that this project used in this mode. The other way to animate is to actually take the assembly to the animation application in ProE. The animation menu item is located by clicking the applications choice on the main toolbar, the same method to get to the mechanism application. Using the animation application, the assembly can be manipulated and then a screenshot is taken in which that specific state of the assembly is saved. This can be done as many times to save as many views as desired. These views are like the stages of the animation that you want. The views are then specified at certain points in a timeline shown at the bottom of the screen, and ProE will automatically interpolate the movement of the parts of the assembly between the snapshots that were just specified on the timeline. Everything from the angle of the assembly to the position of the pieces can be adjusted to get the desired animation or video. Once the desired movements have been achieved, then a mpeg video can be exported to a local file folder or automatically into the working directory.

Flash and ProE are actually very similar in the manner that both use a timeline and set frames to interpolate motion automatically between. The main difference is that ProE is 3D whereas Flash is primarily 2D animation. Flash makes it easier to add sound and other media, which can usually be imported right into the animation or program that is being created. Flash will also interpolate the change of a shape from one shape to another in a smooth movement. Though Flash animations tend to produce a cartoon type appearance, they can be much more informative and fun to watch or interact with.

ProE outputs a mpeg that can be manipulated by windows movie maker or left as is. The movie can then be imported into flash by choosing import in the menu. We tried a few different approaches to get the results that we desired.

Matlab in NSS

Graphs using Matlab

After the experiment the user is able to see the graphs showing the particle growth (size of nanoparticles) versus time. The code for generating graphs is the following:

Code for Generating Diameter vs Time Graphs :

clc
clear all
c0=.05;
Te=273;
t=linspace(3,60,400);
for i=0:8
   figure(i+1)
   tc=c0/5+Te/6000;
   size=(.1*Te-26.3+c0*10)*(1-exp(-tc*(t-3)));
   set(0,'defaultAxesFontSize',20)
   set(0,'defaultAxesFontweight','bold')
   set(0,'defaultlinelinewidth',2)
   set(0,'defaultAxesLineWidth',2)
   plot(t,size,'b')
   axis([0,60,0,10])
   title('Spherical Size vs Time')
   ylabel('Diamter size (nm)')
   xlabel('Time (seconds)')
   set(gca,'YTick',0:.5:10)
   set(gca,'YTickLabel','0| |1| |2| |3| |4| |5| |6| |7| |8| |9| |10|')
   grid on
   Te=Te+10;
end

Modified Datatip Function:

function output_txt = myfunction(obj,event_obj)
% Display the position of the data cursor
% obj          Currently not used (empty)
% event_obj    Handle to event object
% output_txt   Data cursor text string (string or cell array of strings).
pos = get(event_obj,'Position');
output_txt = {...
   ['Max Size: ',num2str(pos(2),4)]};
% If there is a Z-coordinate in the position, display it as well
if length(pos) > 2
   output_txt{end+1} = ['Z: ',num2str(pos(3),4)];
end