4月1日にどのようにショックを受けたか

今年の愚か者の日、同僚と私は単なる冗談以上のことをすることにしました。 私たちはオフィスからの放送でインタラクティブなフォーマットを考え出し、文字通りライブで小さな放電でボランティアをくすぐる機会を皆に与えました。







記事では、この問題の道徳的および倫理的な側面については触れませんが、すべての参加者はランクを受け取るふりをする機会があっただけで、実際にそれを使用した人はいませんでした。



ここでは、このイベントの技術的な部分がどのように機能したかについて説明します。



挑戦する



ページには3つのビデオストリームのスライダーがあり、それぞれの下にはFacebookやVKのボタンのようなものがあります。 それらのいずれかをクリックすると、対応するリレースライドが閉じます。



簡単な実装





Arduino、Qt、および素晴らしいQextSerialPortライブラリに感謝します。



実装more





青い電気テープはありませんでした。そのため、私は非正統派の黒い電気テープを使用しなければなりませんでした。



最初に、いいねをキャッチする方法を理解する必要がありました。 API VKとFacebookの発掘により、次のことが起こりました。

複数のボタンを挿入することはやや不快ですが、可能です

いいねをキャッチするのは簡単です。 それらを区別するのはもう少し難しいです。



いくつかのボタンを挿入して、いいねをキャッチしましょう。



ヴコンタクテ



マニュアルvk.com/dev/widget_likeを読み、3つのブロックを作成します。

<div class="vk vk1"><div id="vk1"></div></div> <div class="vk vk2"><div id="vk2"></div></div> <div class="vk vk3"><div id="vk3"></div></div>
      
      





そしてそれらを初期化します:

 <scrit> VK.Widgets.Like('vk1', {pageImage:'http://site.ru/i/vk.png', pageTitle:'  — *  !', pageUrl:'http://electro.eggo.ru/?1', width:80,type:'mini'}, 100); VK.Widgets.Like('vk2', {pageImage:'http://site.ru/i/vk.png', pageTitle:'  — *  !',pageUrl:'http://electro.eggo.ru/?2', width:80,type:'mini'}, 200); VK.Widgets.Like('vk3', {pageImage:'http://site.ru/i/vk.png', pageTitle:'  — *  !',pageUrl:'http://electro.eggo.ru/?3', width:80,type:'mini'}, 300); </scrit>
      
      





最後のパラメーターに注意する必要があります。残りのパラメーターのキャッシュに影響し、2番目のパラメーターを変更した後、3番目のパラメーターを変更する必要があります。 悲しいですが、本当です。



いいね! ドキュメントには、widgets.like.likedイベントにサブスクライブできることが記載されています。 しかし、ハンドラー関数のパラメーターは説明されておらず、どのボタンが押されたかを理解する方法はあまり明確ではありません。 デバッガーを介して2つのパラメーターaとbがあることがわかりましたが、文書化されていない機能の使用は困難です。 マーフィーの法則を思い出してください。 このために、グローバル変数「スライド番号」を設定します。これにより、どのリレーが動作するべきか(そして、星からの誰がショックを受けるか)についてデータをサーバーに送信します。 迅速かつ迅速にリーフスルーを好むマニアには、ダチョウアルゴリズムを適用します。つまり、何もしません。 したがって、jsは次の形式を取り始めます。

 /*  */ var current_slide = 1; function sendLike(type) { $.post('/sn/snh.php', {action:'like', socnet:type}, function(reply){}); } VK.Observer.subscribe("widgets.like.liked", function f(a, b) { sendLike(current_slide); });
      
      





current_slide変数を現在のフレームに対応する値に変更する関数をスライドリスト上で前後に配置します。



フェイスブック



今Facebookについて覚えています。 私はこのソーシャルネットワークが好きではありませんが、彼らが言うように、すべてのフェルトペンは味と色が異なります。 ドキュメント内

developers.facebook.com/docs/plugins/like-button

developers.facebook.com/docs/reference/javascript/FB.Event.subscribe

edge.createイベントをサブスクライブし、それを使用する機会を見つけます。

 $(window).load(function(){ FB.Event.subscribe('edge.create', function(targetUrl) { sendLike( current_slide ); }); });     : <fb:like href="site.ru/?1" layout="button_count" show_faces="false" width="160" height="40" action="like" colorscheme="light"></fb:like> ... <fb:like href="site.ru/?2" layout="button_count" show_faces="false" width="160" height="40" action="like" colorscheme="light"></fb:like> ... <fb:like href="site.ru/?3" layout="button_count" show_faces="false" width="160" height="40" action="like" colorscheme="light"></fb:like>
      
      





get-parameterは、ボタンの近くのカウンターが互いに独立して動作することを保証するためだけに役立ちます。

ページを保存してロードし、ボタンをテストします。 やっぱり、データはサーバーに送られます。 これまでのところ、どこにもありません。





写真では、データはすでに到着すべき場所に到着しており、ライトが点灯しています。



サーバー側



多くの時間の不足と少しの怠lazの存在のため、サーバー側は次の形式を取りました。

1. httpを介していいねに関するレポートを受信し、ソケットを介して、いいねの実行部分への未送信メッセージをすべて保存し、クライアントからの要求に応じてそれらを転送するデーモンプロセスに送信するajaxサーバー。

2.デーモンプロセス。ソケット上のサーバーであり、2種類の要求を認識します。「元に戻す」と「キューにいいねを追加する」です。



最初の段落は簡潔かつ明確に解決されます。

ajaxサーバー
 /sn/snh.php error_reporting(0); if ($_REQUEST['action'] == 'like' && intval($_REQUEST['socnet'])) { $address = "127.0.0.1"; $port = 13666; /* Create a TCP/IP socket. */ $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); if ($socket === false) { die(); } $result = socket_connect($socket, $address, $port); if ($result === false) { die(); } socket_write($socket, 'add '.trim(strval($_REQUEST['socnet']))."\n"); $_SESSION['count']++; //   echo $_SESSION['count']; socket_close($socket); }
      
      





「デーモン」はもう少し混乱しています。

 srv.php <?php error_reporting(E_ALL); echo "starting...\n"; $address = "0.0.0.0"; $port = 13666; $sock = socket_create(AF_INET, SOCK_STREAM, 0); echo "socket ok\n"; socket_set_option($sock, SOL_SOCKET, SO_REUSEADDR, 1); if(!socket_bind($sock, $address, $port)) { socket_close($client); die('Could not bind to address'); } echo "bind ok\n"; socket_listen($sock); echo "listen ok\n"; $events = array(); echo "accepting...\n"; socket_set_nonblock($sock); ini_set('log_errors', false); $notify_socket = array(); while (true) { if ($client = @socket_accept($sock)) { if (is_resource($client)) { echo "connected client\n"; $command = trim(socket_read($client, 32, PHP_NORMAL_READ)); if (strpos($command, "get") !==false) { echo "send events\n"; $n = -1; $str = ''; while (++$n < 5 && count($events) > 0) { $str .= array_shift($events); } echo "\nsend events:".$str."\n\n"; if (strlen($str) > 0) { socket_write($client, $str."\n"); } else { socket_write($client, "none\n"); } } else if (strpos($command, "add")===0) { $what = explode(" ", $command); if (intval($what[1])) { socket_write($client, "ok\n"); $events[]=(int)$what[1]; echo "n/c. events: [".implode(" ", $events)."]\n"; } } socket_shutdown($client); socket_close($client); echo "end of chat\n"; }//if valid connection }//if accepted }//while true; socket_shutdown($sock); socket_close($sock);
      
      





だから、今私たちは立ち上げています...

スクリーンphp -f srv.php



そして、Arduinoで動作する部分に進みます。 イーサネットシールドがない場合、サーバーとArduinoでデーモンインターフェイスモジュールとして機能するデスクトップアプリケーションを作成します。



私はLinuxoidであり、「クライアント」コンピューターはWindowsで動作するため、Qt + Qt Creatorを使用してこのモジュールを開発します。 彼はインターフェースを作ることができ、ネットワークで動作します。実際、それは優れたクロスプラットフォームです。 シリアルポートを操作するための標準ライブラリはありませんが、素晴らしいQextSerialPortプロジェクトがあります: code.google.com/p/qextserialportは、私自身の目的のために長い間使用しています。



Q-everythingを配置し、新しいプロジェクトを作成し、ネットワークモジュール、QextSerialPortファイルを追加し、シンプルなインターフェイスをリベットします。



押された類似ボタンに関する情報は、5つ以下のイベントのバッチでqt-clientに送信されることに注意してください。 考慮事項は簡単です。これは、受信側が何をすべきかを知ると同時に、実際に負担をかけないようにするのに十分であり、Arduinoのシリアルポートバッファが詰まる可能性があります。 加えて、人類に関するいくつかの考慮事項がありますが、それについては少し低くなっています。





拷問の主な道具。



Arduino



スケッチは非常に簡単です。 シリアルポートから数字を読み取り、対応するピンにHIGHを渡します。 そして、1200ms後に再びオフにします。



Arduinoコード
 #define LED_1 A0 #define LED_2 A1 #define LED_3 A2 void setup() { pinMode(LED_1, OUTPUT); pinMode(LED_2, OUTPUT); pinMode(LED_3, OUTPUT); Serial.begin(9600); } void LEDoff() { digitalWrite(LED_1, LOW); digitalWrite(LED_2, LOW); digitalWrite(LED_3, LOW); }//sub void loop() { if (Serial.available() > 0) { char ch; while (Serial.available()) { ch=Serial.read(); if (ch == '1') { digitalWrite(LED_1, HIGH); } else if(ch == '2') { digitalWrite(LED_2, HIGH); } else if (ch == '3') { digitalWrite(LED_3, HIGH); } }//while delay(1200); LEDoff(); }//if avail }//sub
      
      





サーバーポーリング(1〜2秒程度)の間に5つのコマンドが1人に衝撃を与えた場合、1回しか打撃を受けないことがコードから明らかです。 まず、より人道的です。 第二に、このような簡単な方法で、人々が猛烈なスピードでジャムに突入した場合、感電の分布が無限になる可能性があるという事実に関する問題を取り除きます。



1200ミリ秒のインクルージョンは経験的に選択されました。この値は、中国のストーブライターが火花を放つことを保証する「スイング」するのに十分でした。





同じ中国製ストーブライターはすでに分解されています。



Arduinoの鉄パーツ



Arduino Uno、プロトタイプシールド、3つのリレー、配線、ツイストペアトリム、3つの中国製電気ライター、および接続用のPLS-40 / PBS-40バーが必要です。 はんだごてが温まっている間に、シールドをArduinoに置き、15センチのツイストペアケーブルを切断し、コネクタのストリップを3〜3に切断しました。そしてソフト。 接続ワイヤをはんだ付けし、リレーをArduinoに接続し、リレーの配線を確認します。 クリッククリッククリック。 動作します。





バーがインストールされたArduino自体。



ライターを分解し、ライターのボタンで閉じられた接点にツイストペアの部分に沿ってはんだ付けします。 これらのワイヤのもう一方の端をリレーの制御された接点に挿入し、バッテリーをライターに接続して、試してみます。 肘で連絡先に触れた方法に気づかなかったため、私たちは喜んで誓います=)



Arduinoをコンピューターに貼り付け、スケッチを記入し、Qtクライアントを起動して、試してみます。 ライターからの火花の有毒な割れは、それが働いたことを示します。



親切な人々が実験対象を静かに「揚げる」ことができることを完全に理解し、フレームサイズDのバッテリーを単純に放電し、各リレーの制御接点と並行して、1K抵抗器を介して各モニターの長辺にあるLEDをオンにします。 ライターがほぼ1秒間「揺れる」ことを考えると、このアラームは、リレーがクリックしてライターから約0.5秒間スパークする前ですら消えます。





バッテリーは一日中持ちこたえることができました。



ビデオのセットアップ。



ビデオ放送は、 ライブイベントを使用してyoutubeで実装されました。 1つのチャンネルは一度に1つのブロードキャストしか送信できないため、確認済みの3つのチャンネルを作成する必要がありました。 さらに、Googleハングアウト拡張機能をブラウザに配置する必要があります。 それも別のものもそれほど時間はかかりません。

これで、ソフトウェア部分の準備が整い、カメラがインストールされました。 アーティストの3台のコンピューターでYouTubeアーティストを開き、3つのブロードキャストを開始します。 リンクをコピーして表示し、電子制御でページに貼り付けます。 主なことは、カメラとリレーを混同しないことです。 まあ、「このウィンドウを閉じないでください!」という魔法のフレーズを忘れないでください。

8時間での放送時間の制限は単にバイパスされました。これらの8時間後、古い放送は停止され、残りの1時間は新しい放送が開始されました(ショーは9時間続きました)。 そして、アーティストは5分間の休息を取りました。





開始の15分前。



バトルチェック



操作中に、好きなものを入れて、嫌いなものを押すなど、無限にできると推測するcなユーザーがいることがわかりました。



バグや機能を特定することはまだできませんでしたが、ユーザーや喜びと再投稿の泉からlulzを受け取ったため、この穴をわずかにカバーしました。 3つのストリームがあり、それぞれ2つのソーシャルネットワークのように設定できます。 「非臨床」サディストの場合、合計で最大6人。 プレイするための小さなマージンを与え、9の値で「Sadist」という碑文の写真を見せ始めます。 はい、私たちはさらにプレイする機会を残しています。





まとめ



このシステムは機能していると認識され、多くの喜びをもたらします。 ここでの説明が誰かのインスピレーションの源になることを願っており、ソーシャルメカニクスをオフラインで接続する他の例を見ることができます。



サイトのスクリーンショット、ライブの様子

タイツ






UPDビデオブロードキャスト。 イベントビデオレポートがマウントされています。

www.youtube.com/watch?v=G52Rfq6wrDk

www.youtube.com/watch?v=S4dwTEVqZIc

www.youtube.com/watch?v=p0ABXUK3tWo



All Articles