وقتی قرار میشه یه گیک ارایه بده

نوشته شده در : مهر ۱م, ۱۳۹۱ توسط فرود ۲۲ نظر

یکی از مشکلاتی که وقت ارایه ها دارم، کنترل اسلایدهاست. نشستن پشت کامپیوتر و زدن دکمه یا انجام دادن این توسط یه نفر دیگه :) روش معمولشه، ولی روش من نیست.
جدیدا با پیشرفت html5 و ابزارهایی مثل bartaz/impress.js بد نیست که به فکر بروزرها باشیم برای اینکار.
برای کنفرانس زنجان تصمیم گرفتم که اینکارو بکنم برای ارایه. البته من زمان کافی برای چنین ارایه مفصلی نداشتم و ارایه من تنها چند اسلاید پشت سرهم که با html درست شده بود، بود. اما باقی قضیه چی؟ بازم برای کنترل این اسلاید نیاز به دسترسی به کامپیوتره. محمد افاضاتی برای رفع این مشکل، از یک ماوس وایرلس استفاده کرد. راه بدی نبود، ولی بازم به فکر چیز دیگه ای بودم.
یکی از افزونه هایی که توی فایرفاکس من خیلی دوستش دارم MozRepl :: Add-ons for Firefox ـه. به شما اجازه میده که از طریق سوکت (مثلا از طریق telnet ) وارد صفحه بشید و بتونید جاوااسکریپت رو اجرا کنید.
خیلی ساده، نصبش کنید، از منوی Tools/MozRepl فعالش کنید و تمام. حالا میشه با هر ابزاری مثل telnet بهش وصل شد :

rlwrap telnet 127.0.0.1 4242

که البته rlwrap برای ویندوز لازم نیست، تو لینوکس هم لازم نیست ولی برای اینکه تو ترمینال راحت تر باشید توصیه میکنم که rlwrap رو نصب کنید که بتونید ازش استفاده کنید. اگر هر مشکلی بود خیلی راحت از اول دستور حذفش کنید.
خوب همین دیگه تمومه.
توی این ترمینال بعد از نصب یه نشونه دیده میشه repl> کافیه جلوش مثلا بزنید

alert('test')

و نتیجه رو توی فایرفاکس ببینید. راهنمای نسبتا کاملتری هم اینجا Tutorial · bard/mozrepl Wiki هست.

گام بعدی باید برید سراغ اسلایدهاتون. توی اسلایدهای html که دارید، دو تا تابع جاوااسکریپت بگذارید. مثلا next و back که کارشون هم حرکت توی اسلایدهاست. یکی برای اسلاید بعدی و اون یکی برای اسلاید قبلی. خیلی ساده. حالا اسلاید رو باز کنید و توی ترمینال mozrepl سعی کنید که توابعتون رو فراخوانی کنید، بله ممکن نیست :)
این مشکلی بود که بیشترین وقت من رو برای این اسلایدها گرفت. اینجا فایرفاکس یه کم حقه باز میشه :) ولی خوب بعد یادم اومد که تقریبا چنین مشکلی رو وقتی میخواستم یه افزونه برای فایرفاکس بنویسم داشتم، و بعد یادم اومد که توی فایرفاکس، window.content برای افزونه ها یه جورایی محدود شدست و توابع داخل صفحه رو شامل نمیشه :) به خودم کلی خندیدم.
برای اینکار باید از window._content استفاده بشه، به این صورت :

repl.enter(window._content)
back()
next()
whatever()

یعنی به جای فراخوانی توابع در کانتکست content باید در _content اونها رو فراخوانی کرد و این یک آندرلاین، تقریبا ۱۰ ساعت وقت منو گرفت :)))
اما خوب، اجرای تلنت توی گوشی و کانکت شدن به این، به چند دلیل ممکن نیست. یکی اینکه باز گذاشتن آی پی توسط mozrepl برای خارج هم ممکنه، (منوشو توی فایرفاکس ببینید) ولی اصلا امن نیست.
دوم اینکه آخه وقت ارایه بشینم تایپ کنم mozrepl.enter و فلان و بهمان؟ اصلا بیخیال همون میشینم پای کامپیوتر و سنتی ارایه میدم :) نه. راه ساده ای هم هست که توی php و html خلاصه میشه :)
کافیه که گوشی بتونه توی شبکه کامپیوتر باشه. توی کامپیوتر (همونجایی که فایرفاکس برای ارایه گوش به زنگه) یک وب سرور که برای اجرای php تنظیم شده اجرا میشه، یه اسکریپت ساده لازمه :

<?php

class SocketHelper
{
 
    private $address = "127.0.0.1";
    private $port    = "4242";
    private $socket  = null;
 
    public function connect()
    {
        $this->socket=socket_create(AF_INET,SOCK_STREAM,SOL_TCP);
        if(!$this->socket){
            socket_strerror($this->socket)."\n";
            return false;
        }
 
        $result=socket_connect($this->socket,$this->address,$this->port);
 
        if(!$result){
            socket_strerror($result)."\n";
            socket_close($this->socket);
            return false;
        }
 
        $this->read();
        return true;
    }
 
    /** Send a command to MozRepl */
    public function send_command($command){
        $command.="\n";
        socket_write($this->socket,$command);
        return $this->read();
    }
 
 
    /* 
        Read from the Socket until we get a "repl>" prompt, 
        or loop forever.
     */
    private function read(){
        $response = '';
        while(1){
            $chunk = socket_read($this->socket,65536,PHP_BINARY_READ);
            echo $chunk;
            if($chunk === false){
                echo "Error reading from socket\n";
                break;
            }
            if($chunk === "") break; //No more data
 
            if(preg_match('|^(.*)\s*repl\d*>\s*$|s',$chunk,$match)){
                $response .= $match[1];
                break;
            }
 
            $response .= $chunk;
        }
        return $response;
    }
}

– کد بالا از اینجا اومده. ولی تا جایی که یادمه یه تغییرات کوچیکی هم من دادم بهش یا ممکنه نداده باشم :)) الان این آدرس آفلاینه.

باقیش سادست! یه فایل php مثلا index.php که به اینصورته :

<?php 
	require "mozrepl.php";
	
	$moz = new SocketHelper();
	$moz->connect();
	if (isset($_GET["next"])) {
		$moz->send_command("repl.enter(window._content)");
		$moz->send_command("next()");
	} elseif ( isset($_GET["back"])) {
		$moz->send_command("repl.enter(window._content)");
		$moz->send_command("back()");
	}

?><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Gaming</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-rtl.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
        
        direction : rtl;
        font-family : "IranianSans";
      }
      
      .btn {
		  width: 300px;
		  height: 200px;
	  }
    </style>
    
  </head>

  <body>


    <div class="container">
		<a href="<?php echo $_SERVER['PHP_SELF']?>?back=1" class="btn btn-success">Back</a>
		<a href="<?php echo $_SERVER['PHP_SELF']?>?next=1" class="btn btn-success">Next</a>

    </div> <!-- /container -->
  </body>
</html>

و البته کاملا مشخصه که اسم فایل اولی mozrepl.php باشه :) حالا توی بروزر گوشی آدرس کامپیوتر رو میزنیم (که به راحتی میشه مثلا با نام کاربری و رمز محافظتش کرد) و دو تا دکمه میبینیم که back و next هستن :) توضیح بیشتری هم لازمه؟ خیلی وقته ننوشتم سخت شده برام :))