This shows you the differences between two versions of the page.
ctd:slides:test [2018/12/25 12:21] admin |
ctd:slides:test [2019/06/15 23:00] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | <color silver> **TimeMatrix Commentary** </color>\\ | ||
- | <color silver>(주의! 페이지를 넘기시면 자동으로 재생 됩니다. 음성은 이 홈페이지 안에서만 재생됩니다)</color> | ||
- | <html> <!------ 초기 변수 및 상수 등록 -------> | ||
- | <body> | ||
- | <!-- This function call needs to be in or after the body tag --> | ||
- | <script language="JavaScript" type="text/javascript" src="//vhss.oddcast.com/vocalware_embed_functions.php?acc=6793118&js=1"></script> | ||
- | <script language="JavaScript" type="text/javascript">AC_Vocalware_Embed(6793118,300, 400,'',1,1, 2625675, 0,1,0,'394017ca46a8f4f83d57e7a9f4753beb',9);</script> | ||
- | </body> | ||
- | <script type="text/javascript"> | ||
- | var hideList = true; // comment list view 숨기기 옵션 | ||
- | var initial = true; // initial event | ||
- | var isAdmin = false; | ||
- | var voiceEnabled = true; | ||
- | var comments = []; // comment container | ||
- | var splitComments; // splited comment array | ||
- | var mobileBrowser = false; | ||
- | // Timer variables | ||
- | var timerVar; | ||
- | var timerHorz; | ||
- | var timerVert; | ||
- | const TIMEOUT = 900; //ms | ||
- | // Vocal Ware setting | ||
- | var VOICE = 1; // Yumi:1 | ||
- | var LANG = 13; // Korean:13 | ||
- | var ENGINE = 3; // Engine: 3 | ||
- | var MAXCHAR = 150; // Maximum character count | ||
- | var SPLITCHAR = '^'; // Japanese-Chinese char limits 225, string split char | ||
- | setStatus(0,0); // Vocalware interrupt mode | ||
- | | ||
- | // https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery | ||
- | if (/Mobi|Android/i.test(navigator.userAgent)) { | ||
- | mobileBrowser = true; | ||
- | } | ||
- | </script> | ||
- | </html> | ||
- | <showif isadmin> | ||
- | {{page>dev:adminflag&nofooter}} | ||
- | </showif> | ||
- | |||
- | <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"> | ||
- | <option value="10" selected="selected">Jihun(남)</option> | ||
- | <option value="1">Yumi(여)</option> | ||
- | <option value="5">Jimin(여)</option> | ||
- | <option value="2">Junwoo(남)</option> | ||
- | <option value="4">Hyeryun(여)</option> | ||
- | <option value="6">Dayoung(여)</option> | ||
- | <option value="8">Hyuna(여)</option> | ||
- | <option value="9">Yura(여)</option> | ||
- | </select> | ||
- | <button class="playpause">Play Pause</button> | ||
- | <label><input type="checkbox" id="voiceEnabledCheckBox" name="voiceEnabledCheckBox" checked onclick="onVoiceCheckBoxChange();">음성출력 ​​​</label> | ||
- | <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" /> | ||
- | |||
- | <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 class="comment"></div> | ||
- | <!------ button onclick="full_screen()">Fullscreen</button --------> | ||
- | </div> | ||
- | |||
- | <script type="text/javascript"> <!------ 이벤트 Listner -------> | ||
- | window.addEventListener('message', function( event ) { | ||
- | var data = JSON.parse( event.data ); | ||
- | | ||
- | // Make sure we're talking to a presentation | ||
- | if( data.namespace === 'reveal' ) { | ||
- | | ||
- | // We only care about the slide changing. The 'ready' event | ||
- | // is sent in place of a 'slidechanged' for the very first | ||
- | // slide when the presentation loads. | ||
- | if( data.eventName === 'slidechanged' || data.eventName === 'ready' ) { | ||
- | // console.log(data); | ||
- | // Dig out the presentation state, key properties: | ||
- | // indexh: The index of the current horizontal slide | ||
- | // indexv: The index of the current vertical slide (if any) | ||
- | // indexf: The index of the current fragment (if any, 이벤트는 발생 안함 이유모름) | ||
- | if (initial) { | ||
- | initial = false; // avoid first load auto play | ||
- | timerHorz = data.state.indexh; | ||
- | timerVert = data.state.indexv; | ||
- | } else { | ||
- | 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( '.playpause' ).addEventListener( "click", function( event ) | ||
- | { | ||
- | freezeToggle(); | ||
- | } ); | ||
- | | ||
- | function onVoiceCheckBoxChange() | ||
- | { | ||
- | if (document.getElementById('voiceEnabledCheckBox').checked) | ||
- | { | ||
- | voiceEnabled = true; | ||
- | } else | ||
- | { | ||
- | stopSpeech(); | ||
- | voiceEnabled = false; | ||
- | } | ||
- | } | ||
- | | ||
- | </script> | ||
- | </html> | ||
- | |||
- | |||
- | |||
- | <html> <!------ Comment 출력 함수 -------> | ||
- | <script type="text/javascript"> | ||
- | | ||
- | function getSlideComment(horz, vert) { | ||
- | try { | ||
- | return comments[horz][vert]; | ||
- | } | ||
- | catch (e) { | ||
- | return undefined; | ||
- | } | ||
- | } | ||
- | | ||
- | function getVoiceSelected() | ||
- | { | ||
- | var e = document.getElementById("voice"); | ||
- | return strUser = e.options[e.selectedIndex].value; | ||
- | } | ||
- | | ||
- | function commentPrint(comment) { | ||
- | document.querySelector('.comment').innerHTML = comment; | ||
- | } | ||
- | | ||
- | function commentVoice(comment) { | ||
- | stopSpeech(); | ||
- | splitComment = comment.split(SPLITCHAR); | ||
- | | ||
- | //while (splitComment.length > 0) { | ||
- | if ((splitComment.length > 0)&&(voiceEnabled)) { | ||
- | sayText(splitComment.shift(), getVoiceSelected(), LANG, ENGINE); | ||
- | } | ||
- | } | ||
- | | ||
- | // called when audio out is ended | ||
- | function vw_audioEnded(){ | ||
- | if ((splitComment.length > 0)&&(voiceEnabled)) { | ||
- | sayText(splitComment.shift(), getVoiceSelected(), LANG, ENGINE); | ||
- | } | ||
- | //console.log('Audio Ended'); | ||
- | } | ||
- | |||
- | function slideChangedTimer(horz, vert) { | ||
- | if (typeof timerVar !== 'undefined') | ||
- | clearTimeout(timerVar); | ||
- | timerHorz = horz; | ||
- | timerVert = vert; | ||
- | // Mobile 에서는 user interaction 으로만 audio play 가능 timer event 에서 오디오 실행 안됨 | ||
- | if (mobileBrowser) { | ||
- | slideChangedEvent(); | ||
- | } else { | ||
- | timerVar = setTimeout(slideChangedEvent, TIMEOUT); | ||
- | } | ||
- | } | ||
- | |||
- | function slideChangedEvent() { | ||
- | var horz = timerHorz; | ||
- | var vert = timerVert; | ||
- | // output index | ||
- | //document.querySelector('.status').innerHTML = 'indexh: ' + horz + ' ' + 'indexv: ' + vert; | ||
- | // output comment | ||
- | var comment = getSlideComment(horz, vert); | ||
- | //alert(horz+','+vert+','+comment); | ||
- | if (comment) { | ||
- | commentPrint(comment); | ||
- | commentVoice(comment); | ||
- | } | ||
- | else { | ||
- | commentPrint('작업중...'); | ||
- | commentVoice(''); | ||
- | console.log('comment null!'); | ||
- | } | ||
- | } | ||
- | | ||
- | </script> | ||
- | </html> | ||
- | | ||
- | <html> <!------ fulscreen 함수 -------> | ||
- | <script type="text/javascript"> | ||
- | |||
- | function full_screen() { | ||
- | // check if user allows full screen of elements. This can be enabled or disabled in browser config. By default its enabled. | ||
- | //its also used to check if browser supports full screen api. | ||
- | if ("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document) { | ||
- | if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) { | ||
- | console.log("User allows fullscreen"); | ||
- | |||
- | var element = document.getElementById("slide"); | ||
- | //requestFullscreen is used to display an element in full screen mode. | ||
- | if ("requestFullscreen" in element) { | ||
- | element.requestFullscreen(); | ||
- | } | ||
- | else if ("webkitRequestFullscreen" in element) { | ||
- | element.webkitRequestFullscreen(); | ||
- | } | ||
- | else if ("mozRequestFullScreen" in element) { | ||
- | element.mozRequestFullScreen(); | ||
- | } | ||
- | else if ("msRequestFullscreen" in element) { | ||
- | element.msRequestFullscreen(); | ||
- | } | ||
- | |||
- | } | ||
- | } | ||
- | else { | ||
- | console.log("User doesn't allow full screen"); | ||
- | } | ||
- | } | ||
- | |||
- | function screen_change() { | ||
- | //fullscreenElement is assigned to html element if any element is in full screen mode. | ||
- | if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { | ||
- | console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) | ||
- | } | ||
- | else { | ||
- | // exitFullscreen us used to exit full screen manually | ||
- | if ("exitFullscreen" in document) { | ||
- | document.exitFullscreen(); | ||
- | } | ||
- | else if ("webkitExitFullscreen" in document) { | ||
- | document.webkitExitFullscreen(); | ||
- | } | ||
- | else if ("mozCancelFullScreen" in document) { | ||
- | document.mozCancelFullScreen(); | ||
- | } | ||
- | else if ("msExitFullscreen" in document) { | ||
- | document.msExitFullscreen(); | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | //called when an event goes full screen and vice-versa. | ||
- | document.addEventListener("fullscreenchange", screen_change); | ||
- | document.addEventListener("webkitfullscreenchange", screen_change); | ||
- | document.addEventListener("mozfullscreenchange", screen_change); | ||
- | document.addEventListener("MSFullscreenChange", screen_change); | ||
- | |||
- | //called when requestFullscreen(); fails. it may fail if iframe don't have allowfullscreen attribute enabled or for something else. | ||
- | document.addEventListener("fullscreenerror", function () { console.log("Full screen failed"); }); | ||
- | document.addEventListener("webkitfullscreenerror", function () { console.log("Full screen failed"); }); | ||
- | document.addEventListener("mozfullscreenerror", function () { console.log("Full screen failed"); }); | ||
- | document.addEventListener("MSFullscreenError", function () { console.log("Full screen failed"); }); | ||
- | </script> | ||
- | | ||
- | </html> | ||
- | |||
- | |||
- | {{page>ctd:slides:timematrix:01&nofooter}} | ||
- | {{page>ctd:slides:timematrix:02&nofooter}} | ||
- | {{page>ctd:slides:timematrix:03&nofooter}} | ||
- | {{page>ctd:slides:timematrix:04&nofooter}} | ||
- | {{page>ctd:slides:timematrix:05&nofooter}} | ||
- | {{page>ctd:slides:timematrix:06&nofooter}} | ||
- | {{page>ctd:slides:timematrix:07&nofooter}} | ||
- | {{page>ctd:slides:timematrix:08&nofooter}} | ||
- | {{page>ctd:slides:timematrix:09&nofooter}} | ||
- | {{page>ctd:slides:timematrix:10&nofooter}} | ||
- | {{page>ctd:slides:timematrix:11&nofooter}} | ||
- | {{page>ctd:slides:timematrix:12&nofooter}} |