faust-common 0.9.95~repack1-2 / usr / share / faust / webaudio / export-wrapper.html

<!-- Add FaustWeb Compilation service to Page -->
<div id="export" style="color:white; position: absolute; width:400px; padding:2px 2px 2px 2px; background-color:7F7F7F; visibility:hidden; ">

<div id="centerDiv" style="position:relative; margin-right:auto; margin-left:auto; text-align:center;">
<input id="exportUrl" style="color:white; border:0px; text-align:center; font-size:16px; background-color:transparent; outline: 0px solid transparent; position:relative; margin-left:auto; maring-right: auto; text-align:center;" contenteditable="true" value="http://faustservice.grame.fr" onkeyup="onEnterKey()"/>
</br>
</br>
</br>
  <div id="refreshButton" style="position:absolute; left:10px; top:46px;">
	<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
	 width="50.000000pt" height="50.000000pt" viewBox="0 0 50.000000 50.000000"
	 preserveAspectRatio="xMidYMid meet">
	<g transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)"
	fill="#000000" stroke="none">
	<path d="M186 309 c-37 -29 -37 -89 0 -118 28 -22 69 -27 93 -12 23 15 3 30
	-33 24 -29 -4 -37 -1 -51 21 -16 24 -16 28 -1 51 18 27 63 34 84 13 17 -17 15
	-31 -3 -24 -20 7 -19 1 6 -28 l22 -25 18 24 c20 25 25 40 9 30 -5 -3 -16 7
	-24 23 -25 47 -75 56 -120 21z"/>
	</g>
	</svg>
</div>
  <select id="Platform" style="width:250px;" onChange="changeArchs()">
  </select>
  </br>
    <select id="Architecture" style="width:250px;">
  </select>
  </br>
  </br>
  <input id="exportButton" type="button" value="Export" onclick="getFaustSource()" style="border: 2px solid white; border-radius:8px; color:white; font-size:16px;  background-color:transparent;"/>
	</br>
  </br>
  <div id="qrDiv">
  
  <div id="loader" style="visibility:hidden;">
  <svg width='50px' height='50px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring">
  <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
  <defs>
    <filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%">
      <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset>
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="white" filter="url(#uil-ring-shadow)">
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" dur="1.5s"></animateTransform>
  </path>
</svg>
</div>
  </div>
</div>
  </br>
</div>


<div id="plusImg" style="position: absolute; z-index=4; visibility:visible;">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="50.000000pt" height="51.000000pt" viewBox="0 0 50.000000 51.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#f9be0d" stroke="none">
<path d="M205 481 c-89 -22 -153 -85 -175 -174 -25 -96 28 -204 122 -251 84
-42 166 -31 239 33 126 107 95 315 -56 376 -43 18 -95 24 -130 16z m153 -54
c58 -38 97 -120 89 -188 -7 -60 -36 -109 -84 -146 -51 -39 -154 -45 -212 -12
-116 65 -137 235 -39 326 64 60 173 69 246 20z"/>
<path d="M190 373 l0 -53 -55 0 -55 0 0 -60 0 -60 55 0 55 0 0 -55 0 -55 60 0
60 0 0 55 0 55 53 0 53 0 0 60 -1 60 -52 0 -52 0 -3 52 -3 51 -58 1 -57 1 0
-52z m100 -18 l0 -55 50 0 50 0 0 -40 0 -40 -50 0 -50 0 0 -55 0 -55 -40 0
-40 0 0 55 0 55 -55 0 -55 0 0 40 0 40 55 0 55 0 0 55 0 55 40 0 40 0 0 -55z"/>
</g>
</svg>
</div>
<div id="moinsImg" style="position: absolute; z-index=4; visibility:hidden;">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="50.000000pt" height="51.000000pt" viewBox="0 0 50.000000 51.000000"
 preserveAspectRatio="xMidYMid meet" >
<g transform="translate(0.000000,51.000000) scale(0.100000,-0.100000)"
fill="#f9be0d" stroke="none">
<path d="M187 466 c-92 -34 -157 -123 -157 -217 0 -100 79 -196 180 -218 143
-31 270 72 270 219 0 66 -16 107 -59 153 -57 62 -161 90 -234 63z m162 -36
c78 -39 118 -115 107 -204 -19 -167 -227 -236 -342 -114 -46 48 -57 76 -58
139 -1 74 39 142 103 176 56 29 136 31 190 3z"/>
<path d="M90 250 l0 -60 170 0 170 0 0 60 0 60 -170 0 -170 0 0 -60z m320 0
l0 -40 -150 0 -150 0 0 40 0 40 150 0 150 0 0 -40z"/>
</g>
</svg>
</div>

<script src="ExportLib.js"></script>
<script src="qrcode.js"></script>

<script >

function onEnterKey(e)
{
	if (!e) { var e = window.event; } 
	
	if (e.keyCode == 13) { 
		e.preventDefault(); 
		updateFWTargets();
	}
}

function openExport()
{
	document.getElementById("plusImg").style.visibility = "hidden";
	document.getElementById("moinsImg").style.visibility = "visible";
	document.getElementById("export").style.visibility = "visible";
}

function closeExport(event)
{
	if (!event) { event = window.event; } 

	var target = event.target
	while(target && target != document.getElementById("export") && target != document.getElementById("plusImg") )
		target= target.parentNode;

	if (!target) {
		document.getElementById("plusImg").style.visibility = "visible";
		document.getElementById("moinsImg").style.visibility = "hidden";
		document.getElementById("export").style.visibility = "hidden";	
	}
}

function updateQrCode(sha)
{
    // Empty Div before adding new qrcode
	var toEmpty = document.getElementById("qrDiv");

	document.getElementById("loader").style.visibility = "hidden";
	
	for (var i = toEmpty.children.length-1; i >= 0;  i--) {
		if (toEmpty.children[i].id != "loader") {
	    	toEmpty.removeChild(toEmpty.children[i]);
        }
	}
	
	var plateform = document.getElementById("Platform").options[document.getElementById("Platform").selectedIndex].value;
	var architecture = document.getElementById("Architecture").options[document.getElementById("Architecture").selectedIndex].value;
	var output = "binary.zip";
	
	if (plateform == "android") {
		output = "binary.apk";
    }
	
	var link = document.createElement('a');
	link.href = document.getElementById("exportUrl").value + "/" + sha + "/" + plateform + "/" + architecture + "/" + output;

	// 	Delete existing content if existing
	var qrcodeSpan = document.getElementById('qrcodeDiv');
	if (qrcodeSpan) {
		qrcodeSpan.parentNode.removeChild(qrcodeSpan);
    }
	
	var myWhiteDiv = getQrCode(document.getElementById("exportUrl").value, sha, plateform, architecture, output, 130);

	document.getElementById("qrDiv").appendChild(link);
	link.appendChild(myWhiteDiv);
}

function cancelLoader()
{
	document.getElementById("loader").style.visibility = "hidden";
}

function getFaustSource()
{
    document.getElementById("loader").style.visibility = "visible";
    
    if (dsp_code == null) {

        var url = window.location.href.split('.html').shift() + ".dsp";
        var filename = url.toString().split( '/' ).pop();
        filename = filename.toString().split('.').shift();
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
                var dsp_code = xmlhttp.responseText;
                getSHAKey(document.getElementById("exportUrl").value, filename, dsp_code, updateQrCode, cancelLoader);
            }
        }
        xmlhttp.open("GET", url, false );
        xmlhttp.send(); 
    } else {
        // Global 'dsp_code', so use it
        getSHAKey(document.getElementById("exportUrl").value, "FaustDSP", dsp_code, updateQrCode, cancelLoader);
    }
}

function cleanComboBox(id)
{
	while(document.getElementById(id).childNodes.length > 0) {
		document.getElementById(id).removeChild(document.getElementById(id).childNodes[0]);
	}
}

function changeArchs()
{
    // CLEAN COMBOBOX BEFORE ADDING NEW OPTIONS
	cleanComboBox("Architecture");

	var plat = document.getElementById("Platform").options[document.getElementById("Platform").selectedIndex].value;
	var archs = getArchitectures(window.json, plat);
		
	for (var j = 0; j < archs.length; j++) {
        var a = document.createElement('option');
		a.text = archs[j];
		document.getElementById("Architecture").options.add(a);
	}
}

function updateFWTargets()
{
    // CLEAN COMBOBOX BEFORE ADDING NEW OPTIONS
	cleanComboBox("Platform");
	cleanComboBox("Architecture");

	getTargets(document.getElementById("exportUrl").value, function(json) {
	
		window.json = json;
		var plats = getPlatforms(json);	
	
		for (var i = 0; i < plats.length; i++) {
			var o=document.createElement('option');
			o.text=plats[i];
			document.getElementById("Platform").options.add(o);
		}
		
        changeArchs();
	}, function(){});
}

function changeOrientation(orientation)
{
	if (orientation == "topright") {
		document.getElementById("plusImg").style.top = "0px";
		document.getElementById("plusImg").style.right = "0px";		
		document.getElementById("moinsImg").style.top = "0px";
		document.getElementById("moinsImg").style.right = "0px";		
		
		document.getElementById("export").style.top = "0%";
		document.getElementById("export").style.right = "0%";
		document.getElementById("export").style.boxShadow ="0px 2px 2px 0px white";
		document.getElementById("export").style.borderRadius ="0px 0px 0px 25px";
		document.getElementById("export").style.borderBottom = "3px solid white";
		document.getElementById("export").style.borderLeft ="3px solid white";
	} else if(orientation == "bottomright") {
	
		document.getElementById("plusImg").style.bottom = "0px";
		document.getElementById("plusImg").style.right = "0px";			
		document.getElementById("moinsImg").style.bottom = "0px";
		document.getElementById("moinsImg").style.right = "0px";			
		
		document.getElementById("export").style.bottom = "0%";
		document.getElementById("export").style.right = "0%";
		document.getElementById("export").style.boxShadow ="2px 2px 0px px white";
		document.getElementById("export").style.borderRadius ="25px 0px 0px 0px";
		document.getElementById("export").style.borderTop = "3px solid white";
		document.getElementById("export").style.borderLeft ="3px solid white";
	} else if(orientation == "bottomleft") {
		document.getElementById("plusImg").style.bottom = "0px";
		document.getElementById("plusImg").style.left = "0px";		
		document.getElementById("moinsImg").style.bottom = "0px";
		document.getElementById("moinsImg").style.left = "0px";
		
		document.getElementById("export").style.bottom = "0%";
		document.getElementById("export").style.left = "0%";
		document.getElementById("export").style.boxShadow ="2px 0px 2px 0px white";
		document.getElementById("export").style.borderRadius ="0px 25px 0px 0px";
		document.getElementById("export").style.borderTop = "3px solid white";
		document.getElementById("export").style.borderRight ="3px solid white";		
	} else if(orientation == "topleft") {
		document.getElementById("plusImg").style.top = "0px";
		document.getElementById("plusImg").style.left = "0px";		
		document.getElementById("moinsImg").style.top = "0px";
		document.getElementById("moinsImg").style.left = "0px";

		document.getElementById("export").style.top = "0%";
		document.getElementById("export").style.left = "0%";
		document.getElementById("export").style.boxShadow ="0px 0px 2px 2px white";
		document.getElementById("export").style.borderRadius ="0px 0px 25px 0px";
		document.getElementById("export").style.borderBottom = "3px solid white";
		document.getElementById("export").style.borderRight ="3px solid white";		
	}
}

changeOrientation("topright");
// changeOrientation("bottomright");
// changeOrientation("bottomleft");
// changeOrientation("topleft");

updateFWTargets();

document.getElementById("refreshButton").onclick=updateFWTargets;
document.getElementById("plusImg").onclick=openExport;
document.getElementById("moinsImg").onclick=closeExport;
document.body.addEventListener("click", closeExport, false);
</script>

<!-- End FaustWeb Compilation Service -->