AGENDA

GOAL: NO Sleeping!

Agenda

A QUICK REVIEW

 OF X3DOM

A Quick Review of X3DOM

X3DOM is:

A Quicker review

 of jquery

What is jQuery?

jquery is:

$('#sphScaleUp').click(function() {

$('sphere.sphA').parent().parent().attr('scale','10 10 10');
});
 

What is jQuery?

(and why should you care)

robust, highly tested, interoperable, JavaScript framework to simplify your web development life

• very powerful selection mechanism (selecting elements of the DOM)
• jQuery utilizes CSS selection mechanism
• • $('#asphere') - select one particular sphere called 'asphere'
• • $('sphere') - select all of the elements of type <sphere>

What is jQuery? (more)

Selectorama

jQuery selectors lab

jQuery selectors

Selections

            radius='0.0125' 
            onclick="$('#dialog').dialog('open'); 
            $('#dialog').html('<p> You just selected the '+
                  $(this).parent().parent().attr('description') + 
                   ' landmark. </p>');
            $('#dialog')
                .dialog( {title: $(this)
                .parent()
                .parent()
                .attr('description') });
            

select (pseudo english)

for each element of the type (shape)

do something fn()

Method Chaining

 <transform id='lm0' description='Sellion'>
    <shape>
      <appearance>
        <material id='mat0' diffuseColor='0 0.9 0'></material>
      </appearance>
      <sphere id='asphere' radius='0.0125' ... 
      </sphere>
    </shape>
 </transform>
            

$('#asphere').parent().parent().attr('description');

similar to functional programming

take the output of one function and feed it to the input of the next function and so on...

similar to UNIX pipes: ls | fgrep "foo" | wc

PEEKING at an anthropometry application

AnthroGloss - Anthropometric Landmark Glossary from sandyr on Vimeo.

AnthroWeb3D

AnthroWeb Leverages:

4391 Bodies 

CAESAR 4391 from sandyr on Vimeo.

Types of data for Whole body

 laser scan

Data types

Putting lots of data into the dom

To DOM or Not to DOM

What is the DOM?

• DOM - Document Object Model
• The structure of everything needed to render a page..and more!
• Manipulating the DOM means you are manipulating page elements
• Selecting elements of the DOM means you are selecting those elements of the page you wish to manipulate.

DOM (HTML) Events

• Web programming is "real time" programming
• Actions are "event driven"
• just like games!!
• An event happens, you perform an action and (sometimes) you have a callback to maintain control, in an asyncronous manner
• type of events: mouse, keyboard,

putting lots of data into the DOM

Walking man example

Moving Beyond toyland

geometry compression

Dynamically generating geometry

defining a sphere template

 <sphere radius="0.0125" 
 onclick="$("#dialog").dialog("open"); 
      $(".timer").attr("cycleInterval","0");
      $("#clock1").attr("cycleInterval","2.0");
      $("#dialog").html("<p> You just selected the "+ $(this).parent().parent().attr("description") + " landmark. </p>");
      $("#dialog").dialog( {title: $(this).parent().parent().attr("description") });" 
 </sphere>


                

Dynamically generating geometry (2)

code to clone the landmark (sphere)

function cloneLandmarks(idstr, matstr) {
for (var index = 0; index < OrigLandmarks[0].length; index++) {
    $(".ball").each(function(index) {
         newNum = new Number(index + 1);
         newElem = $("#"+idstr+"0").clone().attr("id", "idstr" + newNum); 
         newElem.attr("description", 
            OrigLandmarks[0][index].description);
         newElem.attr("translation", 
            OrigLandmarks[0][index].translation);
         //2nd child of shape is sphere
         //replace clock1 with correct clock id
         tmpObj = newElem.children().children(":nth-child(2)");
         tmpClickStr = tmpObj.attr("onclick");
         ntmpClickStr = tmpClickStr.replace(/clock1/i,"clock"+newNum);
         newElem.children().children(":nth-child(2)").attr("onclick",ntmpClickStr);
         newElem.children() //replace mat1 with mat id
            .children().children()
            .attr("id",matstr+newNum);
        $("#"+idstr+"0").after(newElem);  // place the new transform
       }
};
          

Dynamically generating geometry (3)

Usage

               cloneLandmarks('lm','mat');
                

Let's Generate that Geometry

Responsive web design

 (integration with CSS)

integrating with css