ctd:slides:timematrix
Differences
This shows you the differences between two versions of the page.
| 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();">음성출력  </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)