Connecting The Dots

아빠의 우주연구

User Tools

Site Tools


ctd:slides:timematrix

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ctd:slides:timematrix [2018/12/13 16:19]
admin
ctd:slides:timematrix [2019/06/15 23:00] (current)
Line 1: Line 1:
-<color silver> **TimeMatrix Commentary** </​color>​ +<color silver> **TimeMatrix Commentary** </​color>​\\  
-<color silver>(음성은 이 홈페이지에서만 재생되며,"​Voice Enable"​ 을 누른후 ​페이지를 넘기시면 자동으로 재생됩니다.)</​color>​+<color silver>(주의! ​페이지를 넘기시면 자동으로 재생 됩니다. ​음성은 이 홈페이지 안에서만 재생됩니다)</​color>​
 <​html>​ <!------ 초기 변수 및 상수 등록 -------> <​html>​ <!------ 초기 변수 및 상수 등록 ------->
     <​body>​     <​body>​
Line 11: Line 11:
         var initial = true;  // initial event         var initial = true;  // initial event
         var isAdmin = false;         var isAdmin = false;
-        var voiceEnabled = false;+        var voiceEnabled = true;
         var comments = [];   // comment container         var comments = [];   // comment container
         var splitComments; ​  // splited comment array         var splitComments; ​  // splited comment array
Line 40: Line 40:
  
 <​html>​ <!------ Slide 페이지 iframe 삽입 및 이벤트 연결 -------> <​html>​ <!------ Slide 페이지 iframe 삽입 및 이벤트 연결 ------->
- 
-    <iframe id="​slide"​ src="//​slides.com/​ctd/​timematrix/​embed?​postMessageEvents=true"​ width="​576"​ height="​420"​ scrolling="​no"​ frameborder="​0"​ webkitallowfullscreen mozallowfullscreen allowfullscreen>​ 
-    </​iframe><​br>​ 
     ​     ​
     <select id="​voice">​     <select id="​voice">​
Line 54: Line 51:
         <option value="​9">​Yura(여)</​option>​         <option value="​9">​Yura(여)</​option>​
     </​select>​     </​select>​
-    <input type="​checkbox"​ class="​voiceCheckBox" ​value="0"> ​Voice Enable<br>+    ​<button class="​playpause">​Play Pause</​button>​ 
 +    <​label>​<input type="​checkbox" ​id="​voiceEnabledCheckBox"​ name="​voiceEnabledCheckBox"​ checked onclick="​onVoiceCheckBoxChange();">​음성출력&​nbsp;&​nbsp;</​label>​ 
 +    <button onclick="​full_screen()">​Fullscreen</​button>​ 
 +    <​button ​class="​goto">​Goto:</​button>​ 
 +    <input type="number" ​min="​1"​ max="​99"​ style="​width:​ 3em;" pattern="​\d*"​ id="​chapter"​ /> 
 +    ​<input type="​number"​ min="​1"​ max="​99"​ style="​width:​ 3em;" pattern="​\d*"​ id="​page"​ />
  
 +    <iframe id="​slide"​ src="//​slides.com/​ctd/​timematrix/​embed?​postMessageEvents=true"​ width="​576"​ height="​420"​ scrolling="​no"​ frameborder="​0"​ webkitallowfullscreen mozallowfullscreen allowfullscreen>​
 +    </​iframe>​
 +    ​
     <div class="​controls">​ <!------ 상태표시 ------->     <div class="​controls">​ <!------ 상태표시 ------->
         <div style="​padding:​ 0.7em 0.4em 0.2em 0.4em; border-bottom:​1px solid #99999a; width:100%; margin:0 auto;"><​b>​Commentary</​b></​div>​         <div style="​padding:​ 0.7em 0.4em 0.2em 0.4em; border-bottom:​1px solid #99999a; width:100%; margin:0 auto;"><​b>​Commentary</​b></​div>​
         <div class="​comment"></​div>​         <div class="​comment"></​div>​
-        <!------ button onclick="​full_screen()">​Fullscreen</​button -------->​ 
     </​div>​     </​div>​
  
Line 84: Line 88:
                 } else {                 } else {
                     slideChangedTimer(data.state.indexh,​ data.state.indexv);​                     slideChangedTimer(data.state.indexh,​ data.state.indexv);​
-                } +                } 
 +                document.getElementById("​chapter"​).value = data.state.indexh + 1; 
 +                document.getElementById("​page"​).value = data.state.indexv + 1;
             }             }
         }         }
     } );     } );
     ​     ​
-    document.querySelector( '.voiceCheckBox' ).addEventListener( "​click",​ function( event ) +    document.querySelector( '.playpause' ).addEventListener( "​click",​ function( event ) 
     {     {
         freezeToggle();​         freezeToggle();​
-        ​voiceEnabled = event.value;​+    } ); 
 +     
 +    function onVoiceCheckBoxChange() 
 +    { 
 +        if (document.getElementById('​voiceEnabledCheckBox'​).checked)  
 +        { 
 +            ​voiceEnabled = true; 
 +        } else  
 +        { 
 +            stopSpeech();​ 
 +            voiceEnabled = false; 
 +        } 
 +    } 
 +     
 +    /** 
 +     * Example of sending messages into the presentation frame. 
 +     * https://​github.com/​hakimel/​reveal.js#​api 
 +    */ 
 +    document.querySelector( '​.goto'​ ).addEventListener( '​click',​ function( ​event ) { 
 +        event.preventDefault();​ 
 +        // Find our presentation iframe 
 +        var frame = document.querySelector( '​iframe'​ ); 
 +        // Post a message into the frame 
 +        frame.contentWindow.postMessage( JSON.stringify( 
 +        { 
 +            method: '​slide',​ 
 +            args: [ document.getElementById("​chapter"​).value - 1, 
 +                    document.getElementById("​page"​).value ​- 1 ] 
 +        }), '​*'​ );
     } );     } );
     ​     ​
Line 118: Line 152:
     }     }
     ​     ​
-    function ​commentOut(comment) { +    function ​commentPrint(comment) {
-        stopSpeech();​+
         document.querySelector('​.comment'​).innerHTML = comment;         document.querySelector('​.comment'​).innerHTML = comment;
 +    }
 +    ​
 +    function commentVoice(comment) {
 +        stopSpeech();​
         splitComment = comment.split(SPLITCHAR);​         splitComment = comment.split(SPLITCHAR);​
         ​         ​
Line 157: Line 194:
         // output comment         // output comment
         var comment = getSlideComment(horz,​ vert);         var comment = getSlideComment(horz,​ vert);
 +        //​alert(horz+','​+vert+','​+comment);​
         if (comment) {            if (comment) {   
-            ​commentOut(comment);+            ​commentPrint(comment);​ 
 +            commentVoice(comment);
         }         }
         else {         else {
-            ​commentOut(''​);​+            ​commentPrint('​작업중...'​);​ 
 +            commentVoice(''​);​
             console.log('​comment null!'​);​             console.log('​comment null!'​);​
         }         }
ctd/slides/timematrix.1544685548.txt.gz · Last modified: 2019/06/15 22:59 (external edit)