Axis orientation Orienters

rotateX(186.9deg) rotateY(129.9deg) rotateZ(-166.5deg)
rotateX(136.7deg) rotateY(0deg) rotateZ(0deg)
rotateX(-34deg) rotateY(30.5deg) rotateZ(0deg)
rotateX(178deg) rotateY(113.1deg) rotateZ(195.7deg)
rotateX(-52.1deg) rotateY(24.6deg) rotateZ(12.8deg)
rotateX(0deg) rotateY(0deg) rotateZ(90deg)
rotateX(0deg) rotateY(0deg) rotateZ(-90deg)
rotateX(0deg) rotateY(-40deg) rotateZ(90deg)
rotateX(-32deg) rotateY(148deg) rotateZ(0deg)
rotateX(122deg) rotateY(12deg) rotateZ(75deg)
rotateX(113deg) rotateY(1deg) rotateZ(71deg)
rotateX(-338deg) rotateY(-40deg) rotateZ(-187deg)

here is a question:


Here we build on the theme of sliders setting values within well defining containing divs that then use the text, as saved within some sub-span of the div, as a value-set parameter as text into a style attribute field. In this case we use the transfrom attribute and the sliders set the angle value for the x, y, and z axes of a transform. Using this same concept we can do the same thing for the x,y,z translation.

s

here is a question:

given this as input data:

rotateX(-197.7deg) rotateY(154.4deg) rotateZ(-164.3deg)
rotateX(90deg) rotateY(0deg) rotateZ(0deg)
rotateX(-90deg) rotateY(0deg) rotateZ(0deg)
rotateX(0deg) rotateY(90deg) rotateZ(0deg)
rotateX(178deg) rotateY(113.1deg) rotateZ(195.7deg)
rotateX(-52.1deg) rotateY(24.6deg) rotateZ(12.8deg)
rotateX(48.2deg) rotateY(136.7deg) rotateZ(-87.5deg)
rotateX(-152.5deg) rotateY(-223.3deg) rotateZ(60deg)
rotateX(90deg) rotateY(90deg) rotateZ(0deg)
rotateX(-158.4deg) rotateY(180deg) rotateZ(-185.9deg)
rotateX(172.1deg) rotateY(-105.2deg) rotateZ(160.3deg)
rotateX(48.2deg) rotateY(0deg) rotateZ(-90deg)

how would one intialize the array of controls to ithese at the intial values. Assume the controls are numbered (which they are).

The input data can be encased in implied numbered wrappers if that is a necessary part of the transform of this data as input into the array as presented.

The actual way that hte data is formatted within the html is as follows:

<div class="transformPane">rotateX(<span class="ami_slider_value_display" ami_uc="x_angle_val">186.9</span>deg) rotateY(<span class="ami_slider_value_display" ami_uc="y_angle_val">129.9</span>deg) rotateZ(<span class="ami_slider_value_display" ami_uc="z_angle_val">-166.5</span>deg)</div>

The easiest what that is quick to do is to just put the data that is needed to be intialization data and then intialize the control with it in the same way that the data is updated during the modification of the data within that div transformPane.

Automating the same process is left as an exercise for modivated students of the subject of html transforms

Home

here is some aditional intialization locations for the twelve div.XYZ_axis_orientator_slider elements

rotateX(186.9deg) rotateY(129.9deg) rotateZ(-166.5deg)
rotateX(-4.9deg) rotateY(140.5deg) rotateZ(36.4deg)
rotateX(37.9deg) rotateY(29.8deg) rotateZ(166.2deg)
rotateX(178deg) rotateY(113.1deg) rotateZ(195.7deg)
rotateX(-52.1deg) rotateY(24.6deg) rotateZ(12.8deg)
rotateX(0deg) rotateY(0deg) rotateZ(90deg)
rotateX(0deg) rotateY(0deg) rotateZ(-90deg)
rotateX(0deg) rotateY(130.8deg) rotateZ(-10.8deg)
rotateX(130.8deg) rotateY(-10.8deg) rotateZ(-123deg)
rotateX(-40.3deg) rotateY(-58deg) rotateZ(136.7deg)
rotateX(24.6deg) rotateY(-164.3deg) rotateZ(90deg)
rotateX(-16.7deg) rotateY(-52.1deg) rotateZ(-90deg)

here are some addtional areas to explore or study: how would you hook these controls to other elements to put the transformations on those elements? How can you save the orientations and restore them on startup?

Stylistically these controls are still toys in that they are not properly namespaced.

The initialization of these can do more: the element can be just a div and the init function could fill in the proper information. Having the elements already existant on startup gives one the advantage of being able to save a dom fragment at any given time and use it as an intialization state for the objects. It is still not difficult to do it with another idiom, one just needs a shim to put the data in the correct formats

contact3.php
Amillia Publishing Company Advertisement  ©