{"id":1238,"date":"2013-12-15T20:04:07","date_gmt":"2013-12-15T11:04:07","guid":{"rendered":"http:\/\/ba.sozo.ac.jp\/myama\/home\/?page_id=1238"},"modified":"2013-12-16T16:08:57","modified_gmt":"2013-12-16T07:08:57","slug":"jsttyplay","status":"publish","type":"page","link":"https:\/\/ba.sozo.ac.jp\/myama\/home\/develop\/jsttyplay","title":{"rendered":"WP Jsttyplay &#8211; jsttyplay plugin for WordPress"},"content":{"rendered":"<h4>Description<\/h4>\n<div style=\"margin-bottom:40px;\">\n\/**<br \/>\n * Plugin Name: WP Jsttyplay<br \/>\n * Plugin URI: https:\/\/ba.sozo.ac.jp\/myama\/home\/develop\/jsttyplay\/<br \/>\n * Description: jsttyplay plugin for WordPress<br \/>\n * Version: 0.1<br \/>\n * Author: Michiru Yamaguchi<br \/>\n * Author URI: https:\/\/ba.sozo.ac.jp\/myama\/<br \/>\n *<br \/>\n * Copyright (c) 2013 Michiru Yamaguchi<br \/>\n *<br \/>\n * As permitted by the BSD License, this work has been retrieved<br \/>\n * from https:\/\/github.com\/encryptio\/jsttyplay and republished here.<br \/>\n *<br \/>\n * WITHOUT ANY WARRANTY<br \/>\n *<br \/>\n * shortcode usage: &#091;jsttyplay url=&#8221;tty_file_path&#8221;&#093;<br \/>\n *  url : required<br \/>\n *<br \/>\n *\/\n<\/div>\n<h4>Download<\/h4>\n<div style=\"margin-bottom:40px;\">\n<a href=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/uploads\/2013\/12\/jsttyplay.zip\">jsttyplay.zip<\/a> &#8211; v0.1, 2013\/12\/15 20:30 +0900 (JST)<br \/>\n3,973,863 bytes<br \/>\n69a80f88beb8cdca2640f4abe21c6039  md5sum\n<\/div>\n<h4>Options<\/h4>\n<div style=\"margin-bottom:40px;\">\n<ul>\n<li>font (Default: fixed-7&#215;13)<\/li>\n<\/ul>\n<\/div>\n<h4>Test<\/h4>\n<div style=\"margin-bottom:40px;\">\n<ul>\n<li>WordPress 3.6.1<\/li>\n<\/ul>\n<\/div>\n<h4>Notice<\/h4>\n<div style=\"margin-bottom:40px;\">\n<ul>\n<li>Only one player (i.e. one shortcode) is available in one post\/page. The canvas id is embedded. See jsttyplay.php.<\/li>\n<li>File extension .tty is added to &#8216;upload_mimes&#8217; as follows in jsttyplay.php:\n<pre>function allow_upload_tty( $mimes ) {\r\n\t$mimes['tty'] = 'image\/x-ttyplay'; \r\n\treturn $mimes;\r\n}\r\nadd_filter( 'upload_mimes', 'allow_upload_tty' );<\/pre>\n<\/li>\n<li>js\/vt\/font.js:11 &#8211; Font path is embedded, dedicated to WordPress plugin.<br \/>var base = &#8220;..\/wp-content\/plugins\/jsttyplay\/fonts\/&#8221;;<\/li>\n<li>&#8220;PlayPause&#8221; button is disabled(hidden).<\/li>\n<\/ul>\n<\/div>\n<h4>ToDo<\/h4>\n<div style=\"margin-bottom:40px;\">\n<ul>\n<li>Load .js files through wp_enqueue_script()<\/li>\n<li>Github?<\/li>\n<li>Playback speed configuration<\/li>\n<\/ul>\n<\/div>\n<h4>Demo<\/h4>\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/vt\/parse.js\"><\/script>\r\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/vt\/emulate.js\"><\/script>\r\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/ttyrec-browser.js\"><\/script>\r\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/binary-read.js\"><\/script>\r\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/vt\/font.js\"><\/script>\r\n<script src=\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/plugins\/jsttyplay\/js\/vt\/canvasview.js\"><\/script>\r\n<script>\r\n\tvar tty_data;\r\n\tvar nextFrameIdx = 0;\r\n\r\n\tvar accurateTimeInterval = 1000\/60; \/\/ max 60fps\r\n\tvar frameJumpMax = 20;\r\n\r\n\tvar viewReady = false;\r\n\tvar playReady = false;\r\n\r\n\tvar initialState;\r\n\tvar vtview;\r\n\tsetTimeout(function(){\r\n\t\tvtview = new VTCanvasView(document.getElementById('canvas'), {\r\n\t\t\tonReady: function () {\r\n\t\t\t\tviewReady = true;\r\n\t\t\t\treadyCheck();\r\n\t\t\t},\r\n\t\t\t\/\/fontName: 'fixed-9x15'\r\n\t\t\tfontName: 'fixed-7x14'\r\n\t\t});\r\n\t\tinitialState = { vtview: vtview.freeze(), nextFrameIdx: 0 };\r\n\t}, 20);\r\n\r\n\tget_binary_data_async(\"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-content\/uploads\/2013\/12\/hello.tty\", function (data, err) {\r\n\t\tif ( err ) throw err;\r\n\t\t\ttty_data = TTYRecParse(data);\r\n\r\n\t\tplayReady = true;\r\n\t\treadyCheck();\r\n\t});\r\n\r\n\tfunction readyCheck() {\r\n\t\tif ( viewReady && playReady )\r\n\t\t\tgo();\r\n\t}\r\n\r\n\tvar time_diff;\r\n\r\n\tfunction go() {\r\n\t\tvar now = (new Date()).getTime()\/1000;\r\n\t\ttime_diff = now - tty_data[nextFrameIdx].time;\r\n\r\n\t\tnextFrame();\r\n\t}\r\n\r\n\tvar nextFrameTimeout;\r\n\tfunction nextFrame() {\r\n\t\tvar now = (new Date()).getTime()\/1000;\r\n\t\tvar framesCounted = 0;\r\n\t\twhile ( framesCounted < frameJumpMax && nextFrameIdx < tty_data.length && tty_data[nextFrameIdx].time + time_diff - now < 0 ) {\r\n\t\t\trecord = tty_data[nextFrameIdx++];\r\n\t\t\tvtview.parseData(record.data);\r\n\t\t\tframesCounted++;\r\n\t\t}\r\n\r\n\t\tvtview.draw();\r\n\r\n\t\tif ( nextFrameIdx < tty_data.length )\r\n\t\t\tnextFrameTimeout = setTimeout(nextFrame, (tty_data[0].time + time_diff - (new Date()).getTime()\/1000) * 1000 + accurateTimeInterval);\r\n\t}\r\n\r\n\tsetTimeout(function () {\r\n\t\tvar freezeData;\r\n\r\n\t\tdocument.getElementById(\"pause\").addEventListener('click', function (evt) {\r\n\t\t\tif ( nextFrameTimeout ) {\r\n\t\t\t\tclearTimeout(nextFrameTimeout);\r\n\t\t\t\tnextFrameTimeout = null;\r\n\t\t\t}\r\n\t\t\tevt.preventDefault();\r\n\t\t}, false);\r\n\t\tdocument.getElementById(\"play\").addEventListener('click', function (evt) {\r\n\t\t\tif ( !nextFrameTimeout )\r\n\t\t\t\tgo();\r\n\t\t\tevt.preventDefault();\r\n\t\t}, false);\r\n\/*\r\n\t\tdocument.getElementById(\"playpause\").addEventListener('click', function (evt) {\r\n\t\t\tevt.preventDefault();\r\n\t\t}, false);\r\n*\/\r\n\t\tdocument.getElementById(\"freeze\").addEventListener('click', function (evt) {\r\n\t\t\tfreezeData = { vtview: vtview.freeze(), nextFrameIdx: nextFrameIdx };\r\n\t\t\tevt.preventDefault();\r\n\t\t}, false);\r\n\t\tdocument.getElementById(\"thaw\").addEventListener('click', function (evt) {\r\n\t\t\tevt.preventDefault();\r\n\t\t\tvar wasplaying = false;\r\n\t\t\tif ( freezeData ) {\r\n\t\t\t\tif ( nextFrameTimeout ) {\r\n\t\t\t\t\twasplaying = true;\r\n\t\t\t\t\tclearTimeout(nextFrameTimeout);\r\n\t\t\t\t\tnextFrameTimeout = null;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tnextFrameIdx = freezeData.nextFrameIdx;\r\n\t\t\t\tvtview.thaw( freezeData.vtview );\r\n\t\t\t\tvtview.draw();\r\n\t\t\t\tif ( wasplaying )\r\n\t\t\t\t\tgo();\r\n\t\t\t}\r\n\t\t}, false);\r\n\t\tdocument.getElementById(\"rewind\").addEventListener('click', function (evt) {\r\n\t\t\tevt.preventDefault();\r\n\t\t\tvar wasplaying = false;\r\n\t\t\t\/\/if ( freezeData ) {\r\n\t\t\t\tif ( nextFrameTimeout ) {\r\n\t\t\t\t\twasplaying = true;\r\n\t\t\t\t\tclearTimeout(nextFrameTimeout);\r\n\t\t\t\t\tnextFrameTimeout = null;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tnextFrameIdx = initialState.nextFrameIdx;\r\n\t\t\t\tvtview.thaw( initialState.vtview );\r\n\t\t\t\tvtview.draw();\r\n\t\t\t\tif ( wasplaying )\r\n\t\t\t\t\tgo();\r\n\t\t\t\/\/}\r\n\t\t}, false);\r\n\t}, 100);\r\n<\/script>\r\n\r\n\t<canvas id=\"canvas\" width=80 height=24>No canvas support!<\/canvas>\r\n\t<form>\r\n\t\t<input type=\"submit\" value=\"Play\" id=\"play\">\r\n\t\t<input type=\"submit\" value=\"Pause\" id=\"pause\">\r\n\t\t<!-- <input type=\"submit\" value=\"PlayPause\" id=\"playpause\"> -->\r\n\t\t<input type=\"submit\" value=\"Freeze\" id=\"freeze\">\r\n\t\t<input type=\"submit\" value=\"Thaw\" id=\"thaw\">\r\n\t\t<input type=\"submit\" value=\"Rewind\" id=\"rewind\">\r\n\t<\/form>\n","protected":false},"excerpt":{"rendered":"<p>Description \/** * Plugin Name: WP Jsttyplay * Plugin URI: https:\/\/ba.sozo.ac.jp\/myama\/home\/develop\/j&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1236,"menu_order":0,"comment_status":"open","ping_status":"open","template":"full-width-page.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1238","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/pages\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/comments?post=1238"}],"version-history":[{"count":0,"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/pages\/1238\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/pages\/1236"}],"wp:attachment":[{"href":"https:\/\/ba.sozo.ac.jp\/myama\/home\/wp-json\/wp\/v2\/media?parent=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}