DIR : /home/kozerus/public_html/ruffle/ko_builder.htm
/home/kozerus/public_html/ruffle
<!DOCTYPE html>
<html>
<head>
<title>/ruffle/ko_builder.html 20250713_0900 dropdown menus</title>
<!--
<title>/ruffle/wz_builder.html 20250711_2350</title>
<title>Audio Visualization</title>
-->
<style id=style_dropdown>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style id-stle_dropdown_end>
<script id=script_data>
bg="bg_elysim.jpg";
mesh="mesh1.jpg";
pad="pad1.jpg";
mp3="takemeou.mp3";
// alert( "BUGS_60 bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
bgs=`bg_elysim.jpg
bg_ancientfootprints.jpg
bg_angel.jpg
bg_artic.jpg
bg_background1.jpg
bg_bagpress2.jpg
bg_ball_field.jpg
bg_base3.jpg
bg_base4.jpg
bg_blackhole_collision.jpg
bg_blue_sky.jpg
bg_bottom.jpg
bg_busch.jpg
bg_coors.jpg
bg_corn.jpg
bg_defeatism.jpg
bg_fence.jpg
bg_flag_ralley.jpg
bg_flood_gutter.jpg
bg_footer1.jpg
bg_footer2.jpg
bg_footprints.jpg
bg_gathering_storm.jpg
bg_gold_bars.jpg
bg_gold_sunset.jpg
bg_goldenegg.jpg
bg_grass.jpg
bg_home2.jpg
bg_jetshock.jpg
bg_john.jpg
bg_money.jpg
bg_morning_after.jpg
bg_mt.jpg
bg_nytimesprop.jpg
bg_olympics.jpg
bg_red_sky.jpg
bg_sand.jpg
bg_snow_bridge.jpg
bg_snow_covered_bridge.jpg
bg_storm.jpg
bg_wrig.jpg
bg_yankee.jpg`.split("\n");
meshs=`mesh1.jpg
mesh1_380.jpg
mesh1_fmp.jpg
mesh1_ko.jpg
mesh2.jpg
mesh2_300.jpg
mesh2_fmp.jpg
mesh2_ko.jpg
mesh3.jpg
mesh3_fmp.jpg
mesh3_ko.jpg
mesh4.jpg
mesh4_fmp.jpg
mesh4_ko.jpg
mesh5.jpg
mesh5_fmp.jpg
mesh5_ko.jpg
mesh6.jpg
mesh6_fmp.jpg
mesh6_ko.jpg
mesh7.jpg
mesh7_fmp.jpg
mesh7_ko.jpg
mesh8.jpg
mesh8_fmp.jpg
mesh8_ko.jpg
mesh_mask.jpg`.split("\n");
pads=`pad1.jpg
pad2.jpg
pad3.jpg
pad4.jpg
pad5.jpg
pad6.jpg
pad7.jpg
pad8.jpg
pad9.jpg
pad_mask.jpg`.split("\n");
mp3s=`takemeou.mp3
alarm.mp3
bat_taps.mp3
bells.mp3
bubbles.mp3
busy.mp3
cashregister.mp3
catch.mp3
charge.mp3
charge_2.mp3
cheer.mp3
chord.mp3
clap_stomp.mp3
click2.mp3
cork.mp3
crowd.mp3
crumpling.mp3
cymbal.mp3
digging_in.mp3
dooropen.mp3
doorslam.mp3
dropped_bat.mp3
exclamation.mp3
fall.mp3
field_of.mp3
flipflop.mp3
gong.mp3
hit.mp3
lets_go.mp3
phaser.mp3
phone.mp3
ping.mp3
pitch_whoosh.mp3
slide.mp3
slip.mp3
whoosh.mp3`.split("\n");
// alert( "BUGS_180 len bgs="+bgs.length+" meshs="+meshs.length +" pads="+pads.length+" mp3s="+mp3s.length );
</script id=script_data_end>
<script id=script_dropdowns>
function dropdowns(bgs,meshs,pads,mp3s) {
// alert( "BUGS_190 dropdowns bgs_len="+bgs.length+" meshs_len="+meshs.length+ " pads_len="+pads.length+" mp3s_len="+mp3s.length );
htmout = "";
htmout += "<table id=table_dropdowns>\n";
htmout += " <tr>\n";
htmout += " <td width=100 >bg</td>\n";
htmout += " <td width=100 >mesh</td>\n";
htmout += " <td width=100 >pad</td>\n";
htmout += " <td width=100 >mp3</td>\n";
htmout += " <tr>\n";
htmout += " <tr>\n";
htmout += " <td>\n";
htmout += "<div class=\"dropdown\">\n";
htmout += " <select class=\"dropbtn\" id=\"select_bg\" onchange=\"ko_builder(this.value,'mesh','pad','mp3');\">\n";
htmout += "<div class=\"dropdown-content\">\n";
for( j=0; j< bgs.length; j++ ) {
htmout += " <option value=\""+bgs[j]+"\">"+bgs[j].replace('.jpg','')+"</option>\n";
}
htmout += " </div>\n";
htmout += " </select>\n";
htmout += " </div>\n";
htmout += " </td>\n";
htmout += " <td>\n";
htmout += "<div class=\"dropdown\">\n";
htmout += " <select class=\"dropbtn\" id=\"select_mesh\" onchange=\"ko_builder('bg',this.value,'pad','mp3');\">\n";
htmout += "<div class=\"dropdown-content\">\n";
for( j=0; j< meshs.length; j++ ) {
htmout += " <option value=\""+meshs[j]+"\">"+meshs[j].replace('.jpg','')+"</option>\n";
}
htmout += " </div>\n";
htmout += " </select>\n";
htmout += " </div>\n";
htmout += " </td>\n";
htmout += " <td>\n";
htmout += "<div class=\"dropdown\">\n";
htmout += " <select class=\"dropbtn\" id=\"select_pad\" onchange=\"ko_builder('bg','mesh',this.value,'pad','mp3');\">\n";
htmout += "<div class=\"dropdown-content\">\n";
for( j=0; j< pads.length; j++ ) {
htmout += " <option value=\""+pads[j]+"\">"+pads[j].replace('.jpg','')+"</option>\n";
}
htmout += " </div>\n";
htmout += " </select>\n";
htmout += " </div>\n";
htmout += " </td>\n";
htmout += " <td>\n";
htmout += "<div class=\"dropdown\">\n";
// htmout += " <select class=\"dropbtn\" id=\"select_mp3\" onchange=\"ko_builder('bg','mesh','pad',this.value);\">\n";
htmout += " <select class=\"dropbtn\" id=\"select_mp3\" onchange=\"audioplayer(this.value);\">\n";
htmout += "<div class=\"dropdown-content\">\n";
for( j=0; j< mp3s.length; j++ ) {
htmout += " <option value=\""+mp3s[j]+"\">"+mp3s[j].replace('.mp3','')+"</option>\n";
}
htmout += " </div>\n";
htmout += " </select>\n";
htmout += " </div>\n";
htmout += " </td>\n";
if( document.getElementById('table_dropdowns')) {
document.getElementById('table_dropdowns').innerHTML=htmout;
}
// alert( "BUGS_250 dropdowns htmout="+htmout );
return('');
}
</script id=script_dropdowns_end>
<script id=script_ko_builder_kludge>
function ko_builder_kludge(sel_bg,sel_mesh,sel_pad,sel_mp3) {
alert( "BUGS_260 ko_builder sel_bg="+sel_bg+" sel_mesh="+sel_mesh+" sel_pad="+sel_pad+" sel_mp3="+sel_mp3 );
if( sel_bg != "" ) && ( sel_bg != "bg" )) { bg=sel_bg; }
if( sel_mesh != "" ) && ( sel_mesh != "mesh" )) { mesh=sel_mesh; }
if( sel_pad != "" ) && ( sel_pad != "pad" )) { pad=sel_pad; }
if( sel_mp3 != "" ) && ( sel_mp3 != "mp3" )) { mp3=sel_mp3; }
// if(( sel_bg != 'bg' ) && ( sel_mesh == 'mesh' ) && ( sel_pad == 'pad' ) && ( sel_mp3 == 'mp3' )) {
// bg=sel_bg;
// alert( "BUGS_101 NEW BG bg="+bg );
// }
// if(( sel_bg == 'bg' ) && ( sel_mesh != 'mesh' ) && ( sel_pad == 'pad' ) && ( sel_mp3 == 'mp3' )) {
// mesh=sel_mesh;
// alert( "BUGS_102 NEW MESH mesh="+mesh );
// }
// if(( sel_bg == 'bg' ) && ( sel_mesh == 'mesh' ) && ( sel_pad != 'pad' ) && ( sel_mp3 == 'mp3' )) {
// pad=sel_pad;
// alert( "BUGS_103 NEW PAD pad="+pad );
// }
// if(( sel_bg == 'bg' ) && ( sel_mesh == 'mesh' ) && ( sel_pad == 'pad' ) && ( sel_mp3 != 'mp3' )) {
// mp3=sel_mp3;
// alert( "BUGS_104 NEW MP3 mp3="+mp3 );
// }
//
info( bg,mesh,pad,mp3);
// p_bg_mesh_pad_mp3 ="";
// p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
// if( document.getElementById('p_bg_mesh_pad_mp3')) {
// document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
// }
// alert( "BUGS_199 todo NOTFOUND item="+item );
return(item);
}
</script id=script_ko_builder_kludge_end>
<style id=style_canvas >
canvas { border: 5px solid black; }
</style id=style_canvas_end>
<!-- <link rel="stylesheet" type="text/css" href="/js/wz/wz.css"> -->
<link rel="stylesheet" type="text/css" href="../js/wz/wz.css">
<script id=script_random_int>
function random_int(max,min) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script id=script_random_int_end>
<p id=p_audiosource>chord</p>
<canvas id="myAudioCanvas" height=100 width=500></canvas>
<!-- <audio id="myAudio" src="./ko_builder/chord.mp3" controls autoplay="true" ></audio> -->
<audio id="myAudio" src="./ko_builder/chord.mp3" controls ></audio>
<script id=script_audioplayer>
function audioplayer(mp3) {
mp3root="./ko_builder/";
src_mp3=mp3root+mp3;
// document.getElementById('p_audiosource').innerHTML=src_mp3;
document.getElementById('p_audiosource').innerHTML=mp3.replace(".mp3","");
//// info(bg,mesh,pad,mp3);
// p_bg_mesh_pad_mp3 ="";
// p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","")+"</b> )";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
// if( document.getElementById('p_bg_mesh_pad_mp3')) {
// document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
// }
document.getElementById('myAudio').src=src_mp3;
const audio_mp3 = document.getElementById('myAudio');
audio_mp3.load();
audio_mp3.play();
const canvas = document.getElementById('myAudioCanvas');
const ctx_audio = canvas.getContext('2d');
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audio_mp3);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination); // Connect to speakers
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
draw();
}
</script id=script_audioplayer_end>
<script id=script_audio>
// alert( "BUGS_10 mp3s.length="+mp3s.length+" mp3s="+mp3s );
mp3root="./ko_builder/";
mp3_idx=random_int(mp3s.length,1);
mp3=mp3root+mp3s[mp3_idx];
// document.getElementById('p_audiosource').innerHTML=mp3s[mp3_idx];
document.getElementById('p_audiosource').innerHTML=mp3s[mp3_idx].replace(".mp3","");
// info( bg,mesh,pad,mp3);
p_bg_mesh_pad_mp3 ="";
p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
if( document.getElementById('p_bg_mesh_pad_mp3')) {
document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
}
// alert( "BUGS_400 audioplayer mp3="+mp3+" p_bg_mesh_pad_mp3="+p_bg_mesh_pad_mp3 );
document.getElementById('myAudio').src=mp3;
// alert( "BUGS_11 mp3_idx="+mp3_idx+" mp3="+mp3+" byid="+ document.getElementById('myAudio').srv );
// document.getElementById('myAudio').src="./ko_builder/charge_2.mp3";
// document.getElementById('myAudio').src=mp3;
const audio_mp3 = document.getElementById('myAudio');
// const audio_mp3 = new Audio("./ko_builder/chord.mp3");
audio_mp3.load();
audio_mp3.play();
const canvas = document.getElementById('myAudioCanvas');
const ctx_audio = canvas.getContext('2d');
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audio_mp3);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination); // Connect to speakers
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function draw() {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
ctx_audio.clearRect(0, 0, canvas.width, canvas.height);
ctx_audio.lineWidth = 2;
ctx_audio.strokeStyle = 'rgb(0, 0, 0)';
ctx_audio.beginPath();
const sliceWidth = canvas.width * 1.0 / bufferLength;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = v * canvas.height / 2;
if (i === 0) { ctx_audio.moveTo(x, y); }
else { ctx_audio.lineTo(x, y); }
x += sliceWidth;
}
ctx_audio.lineTo(canvas.width, canvas.height / 2);
ctx_audio.stroke();
}
draw();
</script id=script_audio_end>
<script id="script_ko_builder">
function ko_builder(sel_bg,sel_mesh,sel_pad,sel_mp3) {
imgroot="./ko_builder/";
if(( sel_bg != "" ) && ( sel_bg != "bg" )) {
bg=sel_bg; src_bg=imgroot+bg;
// alert( "BUGS_391 sel_bg="+sel_bg+" bg="+bg+" src_bg="+src_bg );
}
if(( sel_mesh != "" ) && ( sel_mesh != "mesh" )) {
mesh=sel_mesh; src_mesh=imgroot+mesh;
// alert( "BUGS_392 sel_mesh="+sel_mesh+" mesh="+mesh+" src_mesh="+src_mesh );
}
if(( sel_pad != "" ) && ( sel_pad != "pad" )) {
pad=sel_pad; src_pad=imgroot+pad;
// alert( "BUGS_393 sel_pad="+sel_pad+" pad="+pad+" src_pad="+src_pad );
}
if(( sel_mp3 != "" ) && ( sel_mp3 != "mp3" )) {
mp3=sel_mp3; src_mp3=imgroot+mp3;
// alert( "BUGS_394 sel_mp3="+sel_mp3+" mp3="+mp3+" src_mp3="+src_mp3 );
}
// bg_idx=2; mesh_ids=2; pad_idx=2; mp3_idx=3;
// bg="./ko_builder/elysim.jpg";
// mesh="./ko_builder/mesh1.jpg";
// pad="./ko_builder/pad1.jpg";
// mp3="./ko_builder/chord.mp3";
// mp3_idx=random_int(mp3s.length,1);
// mp3=mp3root+mp3s[mp3_idx];
// document.getElementById('p_audiosource').innerHTML=mp3s[mp3_idx];
// document.getElementById('myAudio').src=mp3;
// bg=""; mesh=""; pad=""; mp3="";
// bg=""; mesh="";
// bg_idx=random_int(bgs.length,1);
// mesh_idx=random_int(meshs.length,1);
// pad_idx=random_int(pads.length,1);
// mp3_idx=random_int(mp3s.length,1);
//
// if( bg == "" ) { bg=imgroot+bgs[bg_idx]; }
// if( mesh == "" ) { mesh=imgroot+meshs[mesh_idx]; }
// if( pad == "" ) { pad=imgroot+pads[pad_idx]; }
// if( mp3 == "" ) { mp3=imgroot+mp3s[mp3_ids]; }
// alert( "BUGS_151 bg_idx="+bg_idx+" imgroot="+imgroot+" bg="+bg );
// alert( "BUGS_152 mesh_idx="+mesh_idx+" imgroot="+imgroot+" mesh="+mesh );
// alert( "BUGS_161 bgs.length="+bgs.length+" bgs1="+bgs[1] );
// alert( "BUGS_162 meshs.length="+meshs.length+" meshs_1="+meshs[1] );
// alert( "BUGS_163 pads.length="+pads.length+" bgs_1="+pads[1] );
// alert( "BUGS_164 mp3s.length="+mp3s.length+" mp3s_1="+mp3s[1] );
// alert( "BUGS_170 ko_builder bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
// bg_mesh_pad="";
// bg_mesh_pad+=" bg=<b>"+bgs[bg_idx].replace(".jpg","")+"</b>";
// bg_mesh_pad+=" mesh=<b>"+meshs[mesh_idx].replace(".jpg","")+"</b>";
// bg_mesh_pad+=" pad=<b>"+pads[pad_idx].replace(".jpg","")+"</b>";
// document.getElementById('p_bgmeshpad').innerHTML=bg_mesh_pad;
if( document.getElementById('canvas_ko_builder')) {
var canvas = document.getElementById('canvas_ko_builder');
}
// dd.elements.div_wz_builder
dd.elements.img_bg.swapImage(src_bg);
dd.elements.img_mesh.swapImage(src_mesh);
dd.elements.img_pad.swapImage(src_pad);
img_bg_x=50; img_bg_y=650;
img_mesh_x=img_bg_x+550; img_mesh_y=img_bg_y+300;
img_pad_x=img_bg_x+550; img_pad_y=img_bg_y+280;
dd.elements.img_pad.moveTo(img_pad_x,img_pad_y);
dd.elements.img_mesh.moveTo(img_mesh_x,img_mesh_y);
dd.elements.img_bg.moveTo(img_bg_x,img_bg_y);
if(canvas.getContext == null) { return; }
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.moveTo(0,0);
ctx.lineTo(250,250);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("ko_builder",10,50);
// ctx.strokeText("ko_builder",10,250);
// var img_bg = document.getElementById("img_bg");
// var img_pad = document.getElementById("img_pad");
// var img_mesh = document.getElementById("img_mesh");
var img_bg = new Image();
var img_mesh = new Image();
var img_pad = new Image();
img_bg.src=src_bg;
img_mesh.src=src_mesh;
img_pad.src=src_pad;
// alert( "BUGS_201 img_bg.src="+img_bg.src+" bg="+bg );
// alert( "BUGS_202 img_mesh.src="+img_mesh.src+" mesh="+mesh );
// alert( "BUGS_203 img_pad.src="+img_pad.src+" pad="+pad );
img_bg.onload = () => { ctx.drawImage(img_bg,100,100); }
img_mesh.onload = () => { ctx.drawImage(img_mesh,200,410); }
img_pad.onload = () => { ctx.drawImage(img_pad,200,400); }
// alert( "BUGS_12 ko_builder ctx="+ctx );
// if( document.getElementById('audio_mp3')) {
// var audio = document.getElementById('audio_mp3');
// }
// Draw a simple rectangle on the canvas
// ctx.fillStyle = 'blue';
// ctx.fillRect(50, 50, 100, 100);
// canvas.addEventListener('click', function(event) {
// var rect = canvas.getBoundingClientRect();
// var x = event.clientX - rect.left;
// var y = event.clientY - rect.top;
// if (x >= 50 && x <= 150 && y >= 50 && y <= 150) {
// audio.play();
// }
// });
// var sound = new Audio("C.wav");
// var sound = new Audio(mp3);
// sound.preload = 'auto';
// sound.load();
// sound.play();
info( bg,mesh,pad,mp3);
// p_bg_mesh_pad_mp3 ="";
// p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","")+"</b> )";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
// if( document.getElementById('p_bg_mesh_pad_mp3')) {
// document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
// }
return(args);
}
</script>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let currentImage = new Image();
currentImage.src = "path/to/initial-image.jpg"; // Replace with your initial image path
currentImage.onload = () => {
ctx.drawImage(currentImage, 0, 0);
};
function swapImage() {
// Load a new image
const newImage = new Image();
newImage.src = "path/to/another-image.jpg"; // Replace with your new image path
newImage.onload = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.drawImage(newImage, 0, 0); // Draw the new image
};
}
</script>
<script id=script_playsound>
function playSound(volume) {
// C();
// var click = sound.cloneNode();
// click.volume = volume;
// click.play();
}
</script id=script_playsound>
<script id=script_bg_todo>
function bg_todo(filetext) {
alert( "BUGS_410 bg_todo filetext="+filetext );
return(filetext);
}
</script id=script_bg_todo_end>
<script id=script_mesh_todo>
function mesh_todo(filetext) {
alert( "BUGS_420 mesh_todo filetext="+filetext );
return(filetext);
}
</script id=script_mesh_todo_end>
<script id=script_pad_todo>
function pad_todo(filetext) {
alert( "BUGS_430 pad_todo filetext="+filetext );
return(filetext);
}
</script id=script_pad_todo_end>
<script id=script_mp3_todo>
function mp3_todo(filetext) {
alert( "BUGS_440 mp3_todo filetext="+filetext );
return(filetext);
}
</script id=script_mp3_todo_end>
<script id=script_loadfile>
function loadfile(filename, filetext) {
// alert( "BUGS_300 loadfile filename="+filename );
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
filetext=this.responseText.split("\n");
// alert( "BUGS_301 loadfile readyState=4 status=200 filename="+filename+" filetext="+filetext );
if( filename == "./ko_builder/bg.psv" ) {
// alert( "BUGS_311 filename="+filename );
htmout=bg(filetext);
// alert( "BUGS 312 BG filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/mesh.psv" ) {
// alert( "BUGS_321 filename="+filename );
htmout=mesh(filetext);
// alert( "BUGS 322 MESH filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/pad.psv" ) {
// alert( "BUGS_331 filename="+filename );
htmout=pad(filetext);
// alert( "BUGS 332 PAD filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
if( filename == "./ko_builder/mp3.psv" ) {
// alert( "BUGS_341 filename="+filename );
htmout=mp3(filetext);
// alert( "BUGS 342 MP3 filename="+filename+" filetext="+filetext+" htmout="+htmout );
}
}
}
// alert( "BUGS_350 loadfile filename="+filename );
xmlhttp.open("GET", filename, true );
xmlhttp.send();
return(filetext);
}
</script id=script_loadfile_end>
<script id=script_info>
function info(bg,mesh,pad,mp3) {
p_bg_mesh_pad_mp3 = "";
p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
// alert( "BUGS_700 startup p_bg_mesh_pad_mp3="+p_bg_mesh_pad_mp3 );
if( document.getElementById('p_bg_mesh_pad_mp3')) {
document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
}
return(p_bg_mesh_pad_mp3);
}
</script id=script_info_end>
<script id=script_startup>
function startup(args) {
// alert( "BUGS_600 startup args="+args );
response=""; filename="ko_builder.psv"; filetext="";
response_bg=""; filename_bg="./ko_builder/bgs.psv"; filetext_bg="";
response_mesh=""; filename_mesh="./ko_builder/meshs.psv"; filetext_mesh="";
response_pad=""; filename_pad="./ko_builder/pads.psv"; filetext_pad="";
response_mp3=""; filename_mp3="./ko_builder/mp3s.psv"; filetext_mp3="";
// response_bg=loadfile(filename_bg, filetext_bg );
// alert( "BUGS_111 response_bg="+response_bg+" filename_bg="+filename_bg );
// response_mesh=loadfile(filename_mesh, filetext_mesh );
// alert( "BUGS_112 response_mesh="+response_mesh+" filename_mesh="+filename_mesh );
// response_pad=loadfile(filename_pad, filetext_pad );
// alert( "BUGS_113 response_pad="+response_pad+" filename_pad="+filename_pad );
// response_mp3=loadfile(filename_mp3, filetext_mp3 );
// alert( "BUGS_114 response_mp3="+response_mp3+" filename_mp3="+filename_mp3 );
// alert( "BUGS_610 startup bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
info( bg,mesh,pad,mp3);
// p_bg_mesh_pad_mp3 ="";
// alert( "BUGS_611 startup p_bg_mesh_pad_mp3="+p_bg_mesh_pad_mp3 );
// p_bg_mesh_pad_mp3 +="( bg=<b>"+bg.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" mesh=<b>"+mesh.replace(".jpg","")+"</b>";
// p_bg_mesh_pad_mp3 +=" pad=<b>"+pad.replace(".jpg","")+"</b>";
//// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","")+"</b> )";
// p_bg_mesh_pad_mp3 +=" mp3=<b>"+mp3.replace(".mp3","").replace("./ko_builder/","")+"</b> )";
// alert( "BUGS_615 startup p_bg_mesh_pad_mp3="+p_bg_mesh_pad_mp3 );
// if( document.getElementById('p_bg_mesh_pad_mp3')) {
// document.getElementById('p_bg_mesh_pad_mp3').innerHTML=p_bg_mesh_pad_mp3;
// }
// alert( "BUGS_620 len bgs="+bgs.length+" meshs="+meshs.length +" pads="+pads.length+" mp3s="+mp3s.length );
dropdowns(bgs,meshs,pads,mp3s);
// alert( "BUGS_650 startup bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
bg_idx=random_int(bgs.length,1); bg=bgs[bg_idx];
mesh_idx=random_int(meshs.length,1); mesh=meshs[mesh_idx];
pad_idx=random_int(pads.length,1); pad=pads[pad_idx];
// mp3_idx=random_int(mp3s.length,1); mp3=mp3s[mp3_idx];
// alert( "BUGS_690 startup random bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
ko_builder(bg,mesh,pad,mp3);
// alert( "BUGS_660 startup bg="+bg+" mesh="+mesh+" pad="+pad+" mp3="+mp3 );
return(args);
}
</script id=script_startup_end>
</head>
<body bgcolor=linen onload="startup('onload'); return false;" >
<!-- <script type="text/javascript" src="/js/wz/wz_dragdrop.js"></script> -->
<script type="text/javascript" src="../js/wz/wz_dragdrop.js"></script>
<hr color=goldenrod>
<table id=table_dropdowns>
<tr>
<td width=50 >bg</td>
<td width=50 >mesh</td>
<td width=50 >pad</td>
<td width=50 >mp3</td>
<tr>
<tr>
<td>
<select id="select_bg" onchange="ko_builder(this.value,'mesh','pad','mp3');">
<option value="bg1">bg1</option>
<option value="bg2">bg2</option>
<option value="bg3">bg3</option>
<option value="bg4">bg4</option>
<option value="bg5">bg5</option>
<option value="bg6">bg6</option>
<option value="bg7">bg7</option>
<option value="bg8">bg8</option>
<option value="bg9">bg9</option>
<option value="bg10">bg10</option>
</select>
</td>
<td>
<select id="select_mesh" onchange="ko_builder('bg',this.value,'pad','mp3');">
<option value="mesh1">mesh1</option>
<option value="mesh2">mesh2</option>
<option value="mesh3">mesh3</option>
<option value="mesh4">mesh4</option>
<option value="mesh5">mesh5</option>
<option value="mesh6">mesh6</option>
<option value="mesh7">mesh7</option>
<option value="mesh8">mesh8</option>
<option value="mesh9">mesh9</option>
<option value="mesh10">mesh10</option>
</select>
</td>
<td>
<select id="select_bg" onchange="ko_builder('bg','mesh',this.value,'mp3');">
<option value="pad1">pad1</option>
<option value="pad2">pad2</option>
<option value="pad3">pad3</option>
<option value="pad4">pad4</option>
<option value="pad5">pad5</option>
<option value="pad6">pad6</option>
<option value="pad7">pad7</option>
<option value="pad8">pad8</option>
<option value="pad9">pad9</option>
<option value="pad10">pad10</option>
<option value="pad1">pad1</option>
<option value="pad1">pad1</option>
</select>
</td>
<td>
<select id="select_mp3" onchange="ko_builder('bg','mesh','pad',this.value);">
<option value="mp31">mp31</option>
<option value="mp32">mp32</option>
<option value="mp33">mp33</option>
<option value="mp34">mp34</option>
<option value="mp35">mp35</option>
<option value="mp36">mp36</option>
<option value="mp37">mp37</option>
<option value="mp38">mp38</option>
<option value="mp39">mp39</option>
<option value="mp310">mp310</option>
</select>
</td>
</tr>
</table>
<hr color=goldenrod>
<br>
<hr color=goldenrod>
<h1>bg mesh pad mp3</h1>
<p id=p_bg_mesh_pad_mp3>bg=bg mesh=mesh pad=pad mp3=mp3</p>
<hr color=goldenrod>
<div id=div_ko_builder>
<br>
<hr color=goldenrod>
<button onclick="window.location.reload();">refreshPage</button>
<hr color=goldenrod>
<!--
<a href=/ruffle/ko_builder1.jpg target=_blank>
<img src=/ruffle/tn_ko_builder1.png title=" ko_builder1" >
</a>
<br>
<h1>ko_builder</h1>
-->
<hr color=goldenrod>
<hr color=white>
<hr color=black>
<p id=p_bgmeshpad>bg mesh pad</p>
<canvas id=canvas_ko_builder width=1100 height=600 style="border:2px solid #000000'">
</canvas>
<hr color=black>
<hr color=white>
<hr color=goldenrod>
</div id=div_ko_builder_end>
<br>
<hr color=goldenrod>
<div id=div_wz_builder>
<img id="img_bg" name="img_bg" src="./ko_builder/bg_elysim.jpg" draggable="true" title=" img_bg_elysim" height=500 width=550>
<img id="img_mesh" name="img_mesh" src="./ko_builder/mesh1.jpg" draggable="true" title=" img_mesh1" height=200 width=500>
<img id="img_pad" name="img_pad" src="./ko_builder/pad1.jpg" draggable="true" title=" img_pad1" height=30 width=500>
</div id=div_wz_builder_end>
<!--
<audio id="audio_mp3" preload="auto">
<source src="./ko_builder/chord.mp3" type="audio/mpeg" >
<source src="./ko_builder/chord.ogg" type="audio/ogg" >
</audio>
-->
<hr color=goldenrod>
<!--
<img src=/imgs/btn/kob.png onclick="ko_builder('bg_elysim.jpg','','','') return false;" title=" bg=elysim.jpg" height=25 >bg_elysim
       
-->
<img src=/imgs/btn/kob.png onclick="ko_builder('','mesh1.jpg','',''); return false;" title=" mesh=mesh1.jpg" height=25 >mesh1
       
<img src=/imgs/btn/kob.png onclick="ko_builder('','','pad1.jpg',''); return false;" title=" pad=pad1.jpg" height=25 >pad1
<!--
       
<img src=/imgs/btn/kob.png onclick="ko_builder('','','','takemeou.mp3'); return false;" title=" mp3=chord.mp3" height=25 >takemeou.mp3
-->
<!--
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
-->
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, "img_bg"+TRANSPARENT+SCALABLE, "img_mesh"+TRANSPARENT+SCALABLE, "img_pad"+TRANSPARENT+SCALABLE, "div_wz_builder"+TRANSPARENT+SCALABLE);
//-->
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer