Doors

Hva

Her fyller vi canvas-elementet med tekst, avhengig av hvilket språk vi velger.

Vi legger demoen i en iFrame for å forenkle koden. Du bør nok åpne den i et eget vindu for å få full oversiktt over koden:
doors3 https://borres.hiof.no/wep/js/ex/doors/doors3/doors3.html

Koden som handterer dørene er slik:

// measuring doors
var leftD=null;
var rightD=null;
var doorW=null;
var doorDelta=null;
var rightDoorLeft=null;
// parameters for dooranimation
var openWait=0;
var closeWait=0;
var steps=20;
var stepix=0;
// global flags 
var doorsAreOpen=false;
var doorsAreClosed=true;
function initDoors()
{
    leftD=document.getElementById("leftdoor");
    rightD=document.getElementById("rightdoor");
    doorW=parseInt(rightD.style.width);
    
    doorDelta=Math.round(doorW/20);
    rightDoorLeft=rightD.style.left;
    doorsAreClosed=true;
}
function measureSounds(){
    var op=document.getElementById("open");
    var cl=document.getElementById("close");
    openWait=op.duration*1000/steps;
    closeWait=cl.duration*700/steps; // corrected for silence
    console.log(op.duration,openWait,cl.duration,closeWait);
}
function startAnimation(){
    if(doorsAreClosed)
        openDoor();
    else
        closeDoor();
    measureSounds();
}
function openDoor()
{
    if(!doorsAreClosed)
        return;
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)+doorDelta+"px";
    
    doorsAreOpen=false;
    
    if(stepix==0)
    {
        playOpen();
        showTextInCanvas("glcanvas",textToSpeak);
    }
    
    stepix=stepix+1;
    if(stepix < steps)
        setTimeout(openDoor,openWait);
    else
    {
        doorsAreOpen=true;
        doorsAreClosed=false;
        meSpeak.speak(textToSpeak, { amplitude: 100, wordgap: 0, 
                                     pitch: pit, speed: 150, variant: sex,
                                     callback: tellStop})
    }
}
function closeDoor()
{
    leftD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.width=""+(doorW-(stepix*doorDelta))+"px";
    rightD.style.left=parseInt(rightD.style.left)-doorDelta+"px";
    
    if(stepix==steps)
        playClose();
        
    stepix=stepix-1;
    if(stepix > 0)
        setTimeout(closeDoor,closeWait);
    else
    {
        leftD.style.width=doorW+"px";
        rightD.style.width=doorW+"px";
        rightD.style.left=rightDoorLeft;
        doorsAreClosed=true;
    }
}
function playOpen()
{
     var elt=document.getElementById("open");
     elt.play();
}
function playClose()
{
     var elt=document.getElementById("close");
     elt.play();
}

Koden som tegner teksten i canvas:

// fill canvas with text
function wrapText(context, text, x, y, maxWidth, lineHeight) {
// as from: 
// http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
    var words = text.split(' ');
    var line = '';
    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
}
function showTextInCanvas(cid,T)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
         var dc = canvas.getContext('2d');
         dc.fillstyle="blue";
         dc.font = "bold 16px Arial";
         dc.clearRect(0, 0, canvas.width, canvas.height);
         wrapText(dc,T,50,20,100,20);
    } 
    else 
        alert('cannot do canvas');
}

Koden som handterer tale-lyden:

// mespeak stuff
meSpeak.loadConfig("mespeak_config.json");
meSpeak.loadVoice("voices/en/en.json");
var textToSpeak="Hello you, wherever you are. Have a nice day with lots of coding.";
var sex="m2";
var pit=100;
function loadVoice(id) {
  var fname="voices/"+id+".json";
  meSpeak.loadVoice(fname, voiceLoaded);
}
function voiceLoaded(success, message) {
  if (success) {
    console.log("Voice loaded: ",message+".");
  }
  else {
   alert("Failed to load a voice: "+message);
  }
}
// called when speaking ends 
function tellStop(res){
      console.log("stopped",res);
      closeDoor();
}
function doFrench(){
    textToSpeak="Bonjour, où que vous soyez. Passez une bonne journée avec plein de codage.";
    loadVoice("fr");
}
function doGerman(){
    textToSpeak="Hallo, wo immer Sie sind. Haben Sie einen schönen Tag mit viel Codierung.";
    loadVoice("de");
}
function doSwedish(){
    textToSpeak="Hej var du än är. Ha en trevlig dag med massor av kodning.";
    loadVoice("sv");
}
function doEnglish(){
    textToSpeak="Hello, wherever you are. Have a nice day with lots of coding.";
    loadVoice("en/en");
}
function doNorwegian(){
    textToSpeak="Hallo, hvor du enn er. Ha en fin dag med masse koding.";
    loadVoice("la");
}
function doFeMale(){
 sex="f2";
 pit=120;
}
function doMale(){
 sex="m5";
 pit=80;
}

Merk at norsk er forsøkt laget som latin !. mespeak har ikke egen norsk module.

HTML koden:

<!DOCTYPE HTML>
<title>What</title>
<head>
    <meta charset="UTF-8"/>
    
    <!-- speak -->
    <script src="../mespeak.js" type="text/javascript"> </script>
    <script src="meSpeakStuff.js" type="text/javascript"> </script>
    <!-- fill text in canvas -->
    <script src="canvasText.js" type="text/javascript"> </script>
    
    <!-- doors and speak init -->
    <script src="doors3.js" type="text/javascript"> </script>
    <style>
    .selected{border-style:solid}
    .unselected{border-style:none}
    </style>
</head>
<body style="background-color:#FFFFC0">
    <div id="doors" onclick="startAnimation();">
        <!-- doorleft -->
        <img id="leftdoor"  src="../leftdoor.gif" style="width:100px;height:340px;
             position:absolute; left:100px;top:20px; z-index:20;"/>
        <!-- doorright -->
        <img id="rightdoor"  src="../rightdoor.gif"  style="width:107px;height:340px;
             position:absolute; left:200px;top:20px; z-index:20;"/>
    </div>
  
    <!-- the canvas and the starter  -->
    <div onclick="startAnimation();" 
         style="position:absolute;left:100px;top:110px;z-index:10">        
            <canvas id="glcanvas" width="200" height="240" 
               style="border-style:solid;border-width:1px" >
            </canvas>
    </div>
    
    <audio id="open">
        <source src="../squeakOpen.mp3" type="audio/mp3"/>
        <source src="../squeakOpen.ogg" type="audio/ogg"/>
    </audio>
    
    <audio id="close">
        <source src="../squeakClose.mp3" type="audio/mp3"/>
        <source src="../squeakClose.ogg" type="audio/ogg"/>
    </audio>
    <!-- menu -->
    <script>
    // quick and dirty
    function update(id){
        document.getElementById("fr").className="unselected";
        document.getElementById("ge").className="unselected";
        document.getElementById("sv").className="unselected";
        document.getElementById("no").className="unselected";
        document.getElementById("en").className="unselected";
        document.getElementById(id).className="selected";
    }
    function updatesex(id){
        document.getElementById("male").className="unselected";
        document.getElementById("female").className="unselected";
        document.getElementById(id).className="selected";
    }
    </script>
    <img id="fr"  class="unselected" src="../fr.png" onclick="doFrench();update('fr')"/><br/>
    <img id="ge"  class="unselected" src="../ge.png" onclick="doGerman();update('ge')"/><br/>
    <img id="sv"  class="unselected" src="../sv.png" onclick="doSwedish();update('sv')"/><br/>
    <img id="no"  class="unselected" src="../no.png" onclick="doNorwegian();update('no')"/><br/>
    <img id="en"  class="unselected" src="../en.png" onclick="doEnglish();update('en')"/><br/><br/><br/>
    
    <img id="male"   class="unselected" src="../male.png" style="width:32px" 
         onclick="doMale();updatesex('male')"/><br/>
    <img id="female"   class="unselected" src="../female.png" style="width:32px"  
         onclick="doFeMale();updatesex('female')"/>
    
    
    <script>
        initDoors();
        // set meny
        update('en');
        updatesex('male');
    </script>
    
    </body>
    
</html>