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 17:30]
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>(음성은 이 홈페이지 안에서만 재생되며,​페이지를 넘기시면 자동으로 재생됩니다.)</​color>​+<color silver>(주의! ​페이지를 넘기시면 자동으로 재생 됩니다. ​음성은 이 홈페이지 안에서만 재생됩니다)</​color>​
 <​html>​ <!------ 초기 변수 및 상수 등록 -------> <​html>​ <!------ 초기 변수 및 상수 등록 ------->
     <​body>​     <​body>​
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>​
-    <button class="​playpause">​Play/Pause</​button>​+    <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;
             }             }
         }         }
Line 92: Line 98:
     {     {
         freezeToggle();​         freezeToggle();​
 +    } );
 +    ​
 +    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 117: 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 156: 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.1544689835.txt.gz · Last modified: 2019/06/15 22:59 (external edit)