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/14 11:03] admin |
ctd:slides:timematrix [2019/06/15 23:00] (current) |
||
---|---|---|---|
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 55: | Line 52: | ||
</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();">음성출력</label> | + | <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 86: | 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 107: | Line 111: | ||
} | } | ||
} | } | ||
+ | | ||
+ | /** | ||
+ | * 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 ] | ||
+ | }), '*' ); | ||
+ | } ); | ||
| | ||
</script> | </script> | ||
Line 173: | Line 194: | ||
// output comment | // output comment | ||
var comment = getSlideComment(horz, vert); | var comment = getSlideComment(horz, vert); | ||
- | alert(horz+','+vert+','+comment); | + | //alert(horz+','+vert+','+comment); |
if (comment) { | if (comment) { | ||
commentPrint(comment); | commentPrint(comment); |