27 June 2014
PDF (269 KB)
 

Viswanath Rao

GBS SME, Telecom Billing, IBM

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

To aid rapid application development, Bluemix provides boilerplate for various types of applications, including Node.js web apps. I'll show you how to use the Node.js boilerplate with Dojo technology to animate a sequence of graphics in a web page by rotating them. You'll customize the boilerplate code on IBM DevOps Services and deploy the modified app to Bluemix from there.

What you need to get started

 

Step 1. Create a Node.js Web Starter app on Bluemix

 
  1. Log into Bluemix.
  2. Click Catalog.
  3. In the Bluemix catalog, under Boilerplates, click the NODE JS WEB STARTER card.
  4. Click Create application.
  5. Enter a name for your application in the Name text box. (All Bluemix apps currently share the same namespace, so your app's name must be unique.)

Step 2. Download the boilerplate code

 
  1. Click anywhere in the white background of the card for your newly created app.
  2. In the app dashboard, click the VIEW GUIDE button.
  3. In the guide that opens on the right, click 2. Download the starter application package.
  4. Save the ZIP file on your local system, but do not extract the contents.

Step 3. Import the boilerplate code into DevOps Services

 
  1. Log into DevOps Services with your IBM ID.
  2. Click CREATE PROJECT.
  3. Give the project the same name as the Bluemix app you created in Step 1 and choose Use Jazz SCM for the code location. Optionally, select the Private radio button if you don't want your project to be public.
  4. Select the Deploy to Bluemix radio button so you can later push your updated code back to Bluemix.
  5. Click CREATE.
  6. In your newly created project, click EDIT CODE.
  7. Use File > Import to import and expand the boilerplate ZIP file into your project: Screenshot of importing a local code ZIP file into a DevOps Services project

    Click to see larger image

  8. Expand the project tree on left side of the page and click the index.ejs file to open it for editing.

READ:Developing Bluemix applications in Node.js with the DevOps Services Web IDE

Step 4. Customize index.ejs for your animation

 

Any HTML-related changes can be directly customized in index.ejs and are reflected immediately in the application's landing page.

The index.ejs file is a JavaScript template — the starting point for your web application. This file runs first when you open the application in a browser. Any HTML-related changes can be directly customized in index.ejs and are reflected immediately in the application's landing page.

In index.ejs, you'll incorporate Dojo technology to animate images of your own choosing. Locate several images in any format (JPG, PNG, etc.) that can be accessed via URLs (for example, this one).

Delete all of the existing code in index.ejs; you don't need it. Take a look at the index.ejs file in my completed ImageRotator project. Following are the key pieces.

Include the Dojo APIs by adding the this script tag:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
			djconfig="parseOnLoad: true">
    </script>

Dojo accesses this HTML tag via the createSurface API to display the initial image:

<body>
     <div id="shape">
     </div>
  </body>
surface = dojox.gfx.createSurface("shape", 300, 300);

Create a timer to rotate the image at defined intervals.

	t = new dojox.timing.Timer(300);
	t.onTick = function() {
             alterAndDraw ();
      }
	t.onStop = function ()  {
      }
      t.start();

Whenever the timer expires, the image position changes. Reverse the direction when the image reaches end of the rotation area.

rad = rad + radDx;
			cirX = cirX - cirDx;

				if (rad == 120) {

					radDx = -radDx;
					cirDx = -cirDx;

				} else if (rad == 10)	{

			             radDx = -radDx;
					cirDx = -cirDx;

			             getImage ();  // bring next image
				} 

		        draw ();
		        drawn=true;

Step 5. Deploy and run the app

 

After you finish modifying your index.ejs file, you're ready to push your app to the Bluemix environment, where it will overwrite the existing boilerplate version that you created in Step 1.

  1. In your DevOps Services project, click manifest.yml in the project code tree.
  2. Click the DEPLOY button at the top of the page.
  3. Enter and submit your Bluemix credentials: Screenshot of the dialog in DevOps Services where you enter Bluemix credentials for deployment

    Click to see larger image

  4. When deployment is complete, open the application URL from DevOps Services and watch your images rotate in sequence. Alternatively, you can click the application URL displayed in the Bluemix UI.

Conclusion

 

Bluemix boilerplate can help to jumpstart Node.js web app development. All the application scaffolding was created for you; the only file you needed to change was index.ejs. Be sure to check out the other boilerplate apps that Bluemix offers to facilitate web and mobile development.

Screenshot of the selection of available boilerplates in Bluemix

RELATED TOPICS:Node.jsJavaScriptDojo Toolkit

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing, Web development
ArticleID=973066
ArticleTitle=Animate images in a Node.js web app
publish-date=06272014