Connecting The Dots
아빠의 우주연구
사용자 도구
로그인
사이트 도구
도구
문서 보기
이전 판
백링크
최근 바뀜
미디어 관리자
사이트맵
로그인
최근 바뀜
미디어 관리자
사이트맵
추적:
ctd:slides:timematrix
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
<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 삽입 및 이벤트 연결 -------> <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 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 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> <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; } } /** * 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> </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}}
ctd/slides/timematrix.txt
· 마지막으로 수정됨: 2019/06/15 23:00 (바깥 편집)
문서 도구
문서 보기
이전 판
백링크
맨 위로