cons0ul/tranformer.html

## tranformer.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#field { height:500px; border:1px solid black; position:relative; }
#field > video, #field > audio { position:absolute; left:0; top:0; box-shadow:0 0 10px black; }
#field > audio { display:block; width:200px; height:40px; background:yellow; }
</style>
<script src=../lib/mersenne.js></script>
<script src=../lib/ajax_logger.js></script>
<script src="../lib/property_database.js"></script>
</head>
<body>
<h3>An example of a simple spatialization effect</h3>
<p>Drag a media element horizontally for the spatial effect. Drag vertically to change volume.
<div id="field"></div>
<!--
<video id='vid'></video>
-->

<script>

var SERVER='/server.py'
var field = document.getElementById("field");
var dragTarget = null;
SEED = (new Date()).getTime() & 0xffffffff;
init_genrand(SEED);
log_at_server(SERVER,'SEED='+SEED);
var colors = ['yellow','pink','black','white','green','brown','gray','violet','blue','orange','white','red']

var DISPLAY = ['inline','block','none']
var PSEUDO = ['after','before']
var LIST_STYLES = ['asterisks', 'footnotes', 'katakana', 'decimal', 'none']
var STYLES = ["direction: rtl", "overflow: hidden", "-webkit-flex(0 0 100px)" ]

function updateMedia(v) {
      // put the center of the element in the right place
        var fieldRect = field.getBoundingClientRect();
          var vRect = v.getBoundingClientRect();
            var x = fieldRect.width*v.xp - vRect.width/2;
              var y = fieldRect.height*v.yp - vRect.height/2;
             // console.log(x+','+fieldRect.width+','+v.yp+','+vRect.height);

                var s = "translate(" + x + "px," + y + "px)";
                  v.out.style.MozTransform = s;
//                v.out.style.backgroud=R(COLOR);
                    // set volume based on vertical position --- higher -> louder
//                      v.port.volume = 1.0 - v.yp;
                        // consider the sounds to be ahead of the listener and to the left or right.
  //                        v.port.params = {x:(v.xp - 0.5), y:0.1};
}


function transform(v){


var x= Math.random() * 100000000;
var y= Math.random() * 100000000;

var s =  "translate(" + x + "px," + y +"px)";
v.out.style.MozTransform = s;

      switch(R(3)){
//          case 0: s = "translate(" + x + "px," + y + "px)";
          case 0: s = "rotate(" + R(360) + "deg" + ")"; break; // Rotate
          case 1: s = "scale(" + R(4) + "," + R(4) + ")"; break; // Scale
          case 2: s = "skew(" + R(360) + "deg" + "," + R(360) + "deg" + ")"; break;
        }


//console.log('foobar');v.out.style.MozTransform = s;
        switch(R(4))
        {
                case 0:
                        v.out.style.color = colors[R(colors.length)];
                        break;
                case 1:
                        v.out.style.display = DISPLAY[R(DISPLAY.length)];
                        break;
                case 2:
                        v.out.style.counter = "(c, "+ LIST_STYLES[R(LIST_STYLES.length)] + ")";
                        break;
                case 3:
                        v.out.style.direction = "rtl";
                        break;
        }

        index = gPropName[R(gPropName.length)];
        domval = gCSSProperties[index]['domProp']
        val1  = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)]
        val2  = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)]

        log_at_server(SERVER,'index:'+index);


        if(!!gCSSProperties[index]['prerequisites'])
        applyPrerequisites(v.out,gCSSProperties[index]['prerequisites']);


        switch(R(2))
        {
                case 0:
                eval('v.out.style.domval' + '='+'"'+val1+'"' );
                break;
                case 1:
                eval('v.out.style.domval' + '=' +'"'+val2+'"') ;
                break;

        }

setTimeout(transform,100,v);

}


function applyPrerequisites(v,dict){
i
        for(i in dict)
        {
                var val0 = gCSSProperties[i]['domProp'];
                try{eval('v.style.'+val0+ '='+ '"' + dict[i] +'"');}catch(e){}
        }
}


function moveTo(v, xp, yp) {
      v.xp = xp;
        v.yp = yp;
          updateMedia(v);
}

function startDragging(event) {
console.log('clicked');
      var v = event.target.base;
        v.lastX = Math.random() * 1000;
          v.lastY = Math.random() * 1000;
            dragTarget = v;
//      doDrag(v)
        transform(v);
//              event.preventDefault();
}
                                                                                                                                         document.body.onmouseup = function stopDragging(event) {
      if (dragTarget) {
              dragTarget = null;
                  event.preventDefault();
                    }
}

function doDrag(event) {
      if (!dragTarget)
              return;

                var v = dragTarget;
                  var deltaX = event.clientX - v.lastX;
                    var deltaY = event.clientY - v.lastY;
                      var fieldRect = field.getBoundingClientRect();
                        v.xp += deltaX/fieldRect.width;
                          v.yp += deltaY/fieldRect.height;
                            v.lastX = event.clientX;
                              v.lastY = event.clientY;
                                updateMedia(v);

}

function addMedia(type, url, xp, yp) {
      var v = document.createElement(type);
      //      var v = document.getElementById('vid');
        v.id="test";
        v.src = url;
        if(v.play)
        v.play();

        v.out=document.createElement(type);
        v.out.src=url;
        v.out.base=v;

        if (typeof v.out.loop == 'boolean') { // loop supported
          v.out.loop = true;
        } else { // loop property not supported
          v.out.addEventListener('ended', function () {
            this.currentTime = 0;
            this.play();
          }, false);
        }


        if(v.out.play)
        v.out.play();

          v.out.onclick = startDragging;
            field.appendChild(v.out);
            moveTo(v,xp,yp)
        v.out.click();
//      setTimeout(addMedia,1000,'video','video.webm','0.8','0.4');
}


getPropName();

//for(i=0;i<4;i++)
//{
addMedia('video','video.webm', 0.8, 0.4);
addMedia('audio','audio.ogg',0.3,0.5);
//addMedia('canvas','http://mail.google.com/mail',0.2, 0.7);
//}


function addElement(type,attributes,xp,yp){

        var v = document.createElement(type);
        for(i in attributes){ v.setAttribute(i,attributes[i]); }

                                v.out = document.createElement(type);
        for(i in attributes){ v.out.setAttribute(i,attributes[i]); }
        v.out.base=v;
        v.out.onclick = startDragging;
        field.appendChild(v.out);
        moveTo(v,xp,yp)
        v.out.click();
}


function addTextElement(type,attribute,xp,yp){

        var v = document.createElement(type);
        asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog');
        v.appendChild(asc_txt);

        for(i in attribute){ v.setAttribute(i,attribute[i]); }

        v.out = document.createElement(type);
        asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog')
        v.out.appendChild(asc_txt);

        for(i in attribute){ v.setAttribute(i,attribute[i]);}

        v.out.base = v;
        v.out.onclick = startDragging;
        field.appendChild(v.out);
        moveTo(v,xp,yp);
        v.out.click();


}

imgattr = {'src':'image.jpg','height':'600','width':'400','id':'im'}
iframeattr = {'src':'container.svg','height':'600','width':'400','id':'ifr'}

//addElement('img',imgattr, 0.1, 0.9);
//addElement('iframe',iframeattr, 0.6, 0.6);
addElement('textarea',{'id':'tarea'},0,0);
addElement('object',{'id':'obj','src':'container.svg'});
addElement('div',{'id':'di'},0,0);

addTextElement('p',{'id':'dp'},0.6,0.5);
addTextElement('code',{'id':'dp'},0.7,0.8);
addTextElement('h1',null,0.4,0.4);
addTextElement('label',null,0.3,0.3);
addTextElement('h3',null,0.5,0.5);
addTextElement('static',null,0.6,0.4);


</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	#field { height:500px; border:1px solid black; position:relative; }
	#field > video, #field > audio { position:absolute; left:0; top:0; box-shadow:0 0 10px black; }
	#field > audio { display:block; width:200px; height:40px; background:yellow; }
	</style>
	<script src=../lib/mersenne.js></script>
	<script src=../lib/ajax_logger.js></script>
	<script src="../lib/property_database.js"></script>
	</head>
	<body>
	<h3>An example of a simple spatialization effect</h3>
	<p>Drag a media element horizontally for the spatial effect. Drag vertically to change volume.
	<div id="field"></div>
	<!--
	<video id='vid'></video>
	-->

	<script>

	var SERVER='/server.py'
	var field = document.getElementById("field");
	var dragTarget = null;
	SEED = (new Date()).getTime() & 0xffffffff;
	init_genrand(SEED);
	log_at_server(SERVER,'SEED='+SEED);
	var colors = ['yellow','pink','black','white','green','brown','gray','violet','blue','orange','white','red']

	var DISPLAY = ['inline','block','none']
	var PSEUDO = ['after','before']
	var LIST_STYLES = ['asterisks', 'footnotes', 'katakana', 'decimal', 'none']
	var STYLES = ["direction: rtl", "overflow: hidden", "-webkit-flex(0 0 100px)" ]

	function updateMedia(v) {
	// put the center of the element in the right place
	var fieldRect = field.getBoundingClientRect();
	var vRect = v.getBoundingClientRect();
	var x = fieldRect.width*v.xp - vRect.width/2;
	var y = fieldRect.height*v.yp - vRect.height/2;
	// console.log(x+','+fieldRect.width+','+v.yp+','+vRect.height);

	var s = "translate(" + x + "px," + y + "px)";
	v.out.style.MozTransform = s;
	// v.out.style.backgroud=R(COLOR);
	// set volume based on vertical position --- higher -> louder
	// v.port.volume = 1.0 - v.yp;
	// consider the sounds to be ahead of the listener and to the left or right.
	// v.port.params = {x:(v.xp - 0.5), y:0.1};
	}


	function transform(v){


	var x= Math.random() * 100000000;
	var y= Math.random() * 100000000;

	var s = "translate(" + x + "px," + y +"px)";
	v.out.style.MozTransform = s;

	switch(R(3)){
	// case 0: s = "translate(" + x + "px," + y + "px)";
	case 0: s = "rotate(" + R(360) + "deg" + ")"; break; // Rotate
	case 1: s = "scale(" + R(4) + "," + R(4) + ")"; break; // Scale
	case 2: s = "skew(" + R(360) + "deg" + "," + R(360) + "deg" + ")"; break;
	}


	//console.log('foobar');v.out.style.MozTransform = s;
	switch(R(4))
	{
	case 0:
	v.out.style.color = colors[R(colors.length)];
	break;
	case 1:
	v.out.style.display = DISPLAY[R(DISPLAY.length)];
	break;
	case 2:
	v.out.style.counter = "(c, "+ LIST_STYLES[R(LIST_STYLES.length)] + ")";
	break;
	case 3:
	v.out.style.direction = "rtl";
	break;
	}

	index = gPropName[R(gPropName.length)];
	domval = gCSSProperties[index]['domProp']
	val1 = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)]
	val2 = gCSSProperties[index]['initial_values'][R(gCSSProperties[index]['initial_values'].length)]

	log_at_server(SERVER,'index:'+index);


	if(!!gCSSProperties[index]['prerequisites'])
	applyPrerequisites(v.out,gCSSProperties[index]['prerequisites']);


	switch(R(2))
	{
	case 0:
	eval('v.out.style.domval' + '='+'"'+val1+'"' );
	break;
	case 1:
	eval('v.out.style.domval' + '=' +'"'+val2+'"') ;
	break;

	}

	setTimeout(transform,100,v);

	}


	function applyPrerequisites(v,dict){
	i
	for(i in dict)
	{
	var val0 = gCSSProperties[i]['domProp'];
	try{eval('v.style.'+val0+ '='+ '"' + dict[i] +'"');}catch(e){}
	}
	}


	function moveTo(v, xp, yp) {
	v.xp = xp;
	v.yp = yp;
	updateMedia(v);
	}

	function startDragging(event) {
	console.log('clicked');
	var v = event.target.base;
	v.lastX = Math.random() * 1000;
	v.lastY = Math.random() * 1000;
	dragTarget = v;
	// doDrag(v)
	transform(v);
	// event.preventDefault();
	}
	document.body.onmouseup = function stopDragging(event) {
	if (dragTarget) {
	dragTarget = null;
	event.preventDefault();
	}
	}

	function doDrag(event) {
	if (!dragTarget)
	return;

	var v = dragTarget;
	var deltaX = event.clientX - v.lastX;
	var deltaY = event.clientY - v.lastY;
	var fieldRect = field.getBoundingClientRect();
	v.xp += deltaX/fieldRect.width;
	v.yp += deltaY/fieldRect.height;
	v.lastX = event.clientX;
	v.lastY = event.clientY;
	updateMedia(v);

	}

	function addMedia(type, url, xp, yp) {
	var v = document.createElement(type);
	// var v = document.getElementById('vid');
	v.id="test";
	v.src = url;
	if(v.play)
	v.play();

	v.out=document.createElement(type);
	v.out.src=url;
	v.out.base=v;

	if (typeof v.out.loop == 'boolean') { // loop supported
	v.out.loop = true;
	} else { // loop property not supported
	v.out.addEventListener('ended', function () {
	this.currentTime = 0;
	this.play();
	}, false);
	}


	if(v.out.play)
	v.out.play();

	v.out.onclick = startDragging;
	field.appendChild(v.out);
	moveTo(v,xp,yp)
	v.out.click();
	// setTimeout(addMedia,1000,'video','video.webm','0.8','0.4');
	}


	getPropName();

	//for(i=0;i<4;i++)
	//{
	addMedia('video','video.webm', 0.8, 0.4);
	addMedia('audio','audio.ogg',0.3,0.5);
	//addMedia('canvas','http://mail.google.com/mail',0.2, 0.7);
	//}


	function addElement(type,attributes,xp,yp){

	var v = document.createElement(type);
	for(i in attributes){ v.setAttribute(i,attributes[i]); }

	v.out = document.createElement(type);
	for(i in attributes){ v.out.setAttribute(i,attributes[i]); }
	v.out.base=v;
	v.out.onclick = startDragging;
	field.appendChild(v.out);
	moveTo(v,xp,yp)
	v.out.click();
	}


	function addTextElement(type,attribute,xp,yp){

	var v = document.createElement(type);
	asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog');
	v.appendChild(asc_txt);

	for(i in attribute){ v.setAttribute(i,attribute[i]); }

	v.out = document.createElement(type);
	asc_txt = document.createTextNode('Quick brown fox jumps over the lazy dog')
	v.out.appendChild(asc_txt);

	for(i in attribute){ v.setAttribute(i,attribute[i]);}

	v.out.base = v;
	v.out.onclick = startDragging;
	field.appendChild(v.out);
	moveTo(v,xp,yp);
	v.out.click();


	}

	imgattr = {'src':'image.jpg','height':'600','width':'400','id':'im'}
	iframeattr = {'src':'container.svg','height':'600','width':'400','id':'ifr'}

	//addElement('img',imgattr, 0.1, 0.9);
	//addElement('iframe',iframeattr, 0.6, 0.6);
	addElement('textarea',{'id':'tarea'},0,0);
	addElement('object',{'id':'obj','src':'container.svg'});
	addElement('div',{'id':'di'},0,0);

	addTextElement('p',{'id':'dp'},0.6,0.5);
	addTextElement('code',{'id':'dp'},0.7,0.8);
	addTextElement('h1',null,0.4,0.4);
	addTextElement('label',null,0.3,0.3);
	addTextElement('h3',null,0.5,0.5);
	addTextElement('static',null,0.6,0.4);



	</script>
	</body>
	</html>