From 032093c1e3828d9a1d67d93c81ad481a2796e330 Mon Sep 17 00:00:00 2001
From: strawmanbobi <strawmanbobi@irext.net>
Date: Mon, 27 Mar 2017 19:15:51 +0800
Subject: [PATCH] sorted up javascript file related to console

---
 src/web_console/web/code/index.html           | 146 ++++-
 src/web_console/web/code/js/constants.js      |  26 +
 .../web/code/js/{code.js => manage.js}        |  92 +---
 src/web_console/web/code/js/operate.js        | 508 ++++++++++++++++++
 src/web_console/web/public_js/bower.json      |   1 +
 5 files changed, 679 insertions(+), 94 deletions(-)
 create mode 100644 src/web_console/web/code/js/constants.js
 rename src/web_console/web/code/js/{code.js => manage.js} (95%)
 create mode 100644 src/web_console/web/code/js/operate.js

diff --git a/src/web_console/web/code/index.html b/src/web_console/web/code/index.html
index fe8e227..506b3df 100644
--- a/src/web_console/web/code/index.html
+++ b/src/web_console/web/code/index.html
@@ -470,22 +470,151 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title">传输编码</h4>
                 </div>
                 <div class="modal-body">
-                    <div class="input-group" style="max-height: 25px;">
+                    <div id="transfer_select" class="input-group" style="max-height: 25px;">
                         <span class="input-group-addon">传输方式</span>
                         <select id="transfer_type" name="protocol_type" class="input-group-addon"
                                 onchange="onTransferTypeChanged();" style="width: 100%;">
-                            <option value="0" selected>COM</option>
-                            <option value="1">BLE</option>
+                            <option value="0" selected>Web COM</option>
+                            <!-- <option value="1">Web BLE</option> -->
                         </select>
-                </div>
+                    </div>
                     <br>
+                    <div class="progress">
+                        <div id="transfer_progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
+                             aria-valuemax="100">
+                            <span id="transfer_progress_desc">空闲</span>
+                        </div>
+                    </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="transferBin();">确定</button>
+                    <button type="button" class="btn btn-primary" onclick="prepareTransfer();">连接</button>
+                    <button type="button" class="btn btn-primary" onclick="startTransfer();">开始传输</button>
+                    <button type="button" class="btn btn-success" onclick="startDoB();">板载解码</button>
+                    <button type="button" class="btn btn-warning" onclick="cancelTransfer();">取消</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- decode on-board dialog -->
+    <div class="modal fade" id="dob_dialog" role="dialog" aria-labelledby="myModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">板载解码</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="dob panel">
+                        <div style="width: 100%;">
+                            <div style="width: 100%;">
+                                <textarea id="dob_ir_wave_value" rows="1" style="resize: none; width: 100%; overflow-x: scroll; white-space: nowrap;"></textarea>
+                            </div>
+                            <div class="row">
+                                <div class="col-lg-4" style="text-align: left;">
+                                    <hr>
+                                    <div id="key_press" style="height: 25px;"></div>
+                                    <hr>
+                                    <div id="ac_status_power" style="height: 25px;"></div>
+                                    <div id="ac_status_mode" style="height: 25px;"></div>
+                                    <div id="ac_status_temp" style="height: 25px;"></div>
+                                    <div id="ac_status_speed" style="height: 25px;"></div>
+                                    <div id="ac_status_swing" style="height: 25px;"></div>
+                                </div>
+                                <div class="col-lg-8" style="text-align: left;">
+                                    <div class="row" style="text-align: left;">
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_0" class="dob_cbtn btn btn-danger glyphicon glyphicon-off"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_8" class="dob_cbtn btn btn-info glyphicon glyphicon-home"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_9" class="dob_cbtn btn btn-info glyphicon glyphicon-chevron-left"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_10" class="dob_cbtn btn btn-info glyphicon glyphicon-list"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_6" class="dob_cbtn btn btn-primary glyphicon glyphicon-plus"></button>
+                                        </div>
+                                    </div>
+                                    <br>
+                                    <div class="row" style="text-align: center;">
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_1" class="dob_cbtn btn btn-warning glyphicon glyphicon-arrow-up"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                    </div>
+                                    <br>
+                                    <div class="row" style="text-align: center;">
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_3" class="dob_cbtn btn btn-warning glyphicon glyphicon-arrow-left"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_5" class="dob_cbtn btn btn-success glyphicon glyphicon-star"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_4" class="dob_cbtn btn btn-warning glyphicon glyphicon-arrow-right"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                    </div>
+                                    <br>
+                                    <div class="row" style="text-align: center;">
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_2" class="dob_cbtn btn btn-warning glyphicon glyphicon-arrow-down"></button>
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+
+                                        </div>
+                                        <div class="col-lg-2" style="text-align: center;">
+                                            <button id="dob_btn_7" class="dob_cbtn btn btn-primary glyphicon glyphicon-minus"></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-info" onclick="quitDob();">退出</button>
                 </div>
             </div>
         </div>
@@ -519,10 +648,11 @@
 <script src="../public_js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
 <script src="../public_js/bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
 <script src="../public_js/bower_components/select2/dist/js/select2.min.js"></script>
-<script src="../public_js/bower_components/socket.io-client/dist/socket.io.slim.min.js"></script>
 <script src="../public_js/utils/date_utils.js"></script>
 <script src="../public_js/utils/url_parser.js"></script>
 <script src="../public_js/chinese/await.js"></script>
 <script src="../public_js/chinese/chinese.js"></script>
-<script type="text/javascript" src="js/code.js"></script>
+<script type="text/javascript" src="js/constants.js"></script>
+<script type="text/javascript" src="js/manage.js"></script>
+<script type="text/javascript" src="js/operate.js"></script>
 </html>
\ No newline at end of file
diff --git a/src/web_console/web/code/js/constants.js b/src/web_console/web/code/js/constants.js
new file mode 100644
index 0000000..78f7f57
--- /dev/null
+++ b/src/web_console/web/code/js/constants.js
@@ -0,0 +1,26 @@
+/**
+ * Created by strawmanbobi
+ * 2017-03-27
+ */
+
+var LS_KEY_ID = 'user_name';
+var LS_KEY_TOKEN = 'token';
+
+var CATEGORY_AC = 1;
+var CATEGORY_TV = 2;
+var CATEGORY_STB = 3;
+var CATEGORY_NW = 4;
+var CATEGORY_IPTV = 5;
+var CATEGORY_DVD = 6;
+var CATEGORY_FAN = 7;
+var CATEGORY_PROJECTOR = 8;
+var CATEGORY_STEREO = 9;
+var CATEGORY_LIGHT_BULB = 10;
+var CATEGORY_BSTB = 11;
+var CATEGORY_CLEANING_ROBOT = 12;
+var CATEGORY_AIR_CLEANER = 13;
+
+var TRANSFER_STATE_NONE = 0;
+var TRANSFER_STATE_BIN_FETCHED = 1;
+var TRANSFER_STATE_BIN_ON_GOING = 2;
+var TRANSFER_STATE_BIN_DONE = 3;
\ No newline at end of file
diff --git a/src/web_console/web/code/js/code.js b/src/web_console/web/code/js/manage.js
similarity index 95%
rename from src/web_console/web/code/js/code.js
rename to src/web_console/web/code/js/manage.js
index d447517..9209d09 100644
--- a/src/web_console/web/code/js/code.js
+++ b/src/web_console/web/code/js/manage.js
@@ -1,31 +1,12 @@
 /**
  * Created by strawmanbobi
- * 2016-11-30
+ * 2017-03-27
  */
 
-var LS_KEY_ID = 'user_name';
-var LS_KEY_TOKEN = 'token';
 var id = "";
 var token = "";
 var client = null;
 
-var RADIO_TYPE_IRDA = 0;
-
-var CATEGORY_AC = 1;
-var CATEGORY_TV = 2;
-var CATEGORY_STB = 3;
-var CATEGORY_NW = 4;
-var CATEGORY_IPTV = 5;
-var CATEGORY_DVD = 6;
-var CATEGORY_FAN = 7;
-var CATEGORY_PROJECTOR = 8;
-var CATEGORY_STEREO = 9;
-var CATEGORY_LIGHT_BULB = 10;
-var CATEGORY_BSTB = 11;
-var CATEGORY_CLEANING_ROBOT = 12;
-var CATEGORY_AIR_CLEANER = 13;
-
-var currentRadioType = 0;
 var currentSubCate = 1;
 var currentProtocol = null;
 var currentProtocolType = 1;
@@ -102,10 +83,12 @@ $(document).ready(function() {
         $('#protocol_name_b').val(fileName);
     });
 
-    $('.cbtn').click(function() {
-        onControlClick(this.id);
+    $('.dob_cbtn').click(function() {
+        onDoBClick(this.id);
     });
 
+    updateTransferState(TRANSFER_STATE_NONE);
+
 });
 
 function initializeSelectors() {
@@ -1049,23 +1032,6 @@ function onProtocolChange() {
     };
 }
 
-function onRadioTypeChange() {
-    currentRadioType = $('#radio_type').val();
-
-    switch (parseInt(currentRadioType)) {
-        case RADIO_TYPE_IRDA:
-            showBleRemoteInfo(false);
-            switchCategory();
-            break;
-        case RADIO_TYPE_BLE_CENTRAL:
-            showBleRemoteInfo(true);
-            showProtocolSelector(false);
-            break;
-        default:
-            break;
-    }
-}
-
 function onSubCateChange() {
     currentSubCate = $('#sub_cate').val();
 }
@@ -1084,15 +1050,7 @@ function onCategoryChange() {
     var currentCategoryID = $('#category_id').val();
     currentCategory = getCategoryByID(currentCategoryID);
 
-    if (currentRadioType == RADIO_TYPE_IRDA) {
-        switchCategory();
-    } else if (currentRadioType == RADIO_TYPE_BLE_CENTRAL) {
-        if (currentCategoryID != CATEGORY_STB) {
-            showBrandSelector();
-        } else {
-            showCitySelector();
-        }
-    }
+    switchCategory();
 }
 
 function switchCategory() {
@@ -1433,36 +1391,6 @@ function getUnpublishedRemoteIndexes() {
     });
 }
 
-function downloadBin() {
-    var downloadURL = "";
-    if(null == selectedRemote) {
-        popUpHintDialog('请先选中一个索引');
-        return;
-    }
-    downloadURL = '/irext/int/download_remote_index?remote_index_id='+selectedRemote.id+'&admin_id='+id+'&token='+token;
-
-    if (null != client && client == 'console') {
-        // directly download binary to remote via serial port
-    } else {
-        window.open(
-            downloadURL,
-            '_blank'
-        );
-    }
-}
-
-function onTransferBin() {
-    if(null == selectedRemote) {
-        popUpHintDialog('请先选中一个索引');
-        return;
-    }
-    $('#binary_transfer_dialog').modal();
-}
-
-function transferBin() {
-
-}
-
 function showPublishDialog() {
     var hintText = '共有 <font color="#FF0000">' + brandsToPublish.length +
         '</font> 个新增品牌，以及 <font color="#FF0000">' + remoteIndexesToPublish.length +
@@ -1681,14 +1609,6 @@ function showProtocolSelector(show) {
     }
 }
 
-function showBleRemoteInfo(show) {
-    if (true == show) {
-        $('.ble_central_panel').show();
-    } else {
-        $('.ble_central_panel').hide();
-    }
-}
-
 function popUpHintDialog(hint) {
     $('#text_hint').empty();
     $('#text_hint').append(hint);
diff --git a/src/web_console/web/code/js/operate.js b/src/web_console/web/code/js/operate.js
new file mode 100644
index 0000000..77867d3
--- /dev/null
+++ b/src/web_console/web/code/js/operate.js
@@ -0,0 +1,508 @@
+/**
+ * Created by strawmanbobi
+ * 2017-03-27
+ */
+
+// web COM socket
+var ws = null;
+var transferSocketConnected = false;
+var serialPortConnected = false;
+
+// initialize transfer object
+var binToTransfer = {
+    category_id : 0,
+    content : null,
+    length : 0
+};
+
+var keyNames = [
+    "POWER", "UP", "DOWN", "LEFT", "RIGHT", "OK", "PLUS", "MINUS", "HOME", "BACK", "MENU"
+];
+
+var acPowers = ["ON", "OFF"];
+var acTempBegin = 16;
+var acModes = ["Cool", "Heat", "Auto", "Fan", "DEHUMID"];
+var acSpeed = ["Low", "Medium", "High", "Auto"];
+var acSwing = ["ON", "OFF"];
+var acStatus = {
+    power: 0,
+    temp: 8,
+    mode: 0,
+    wind_dir: 0,
+    wind_speed: 0
+};
+
+var decodedReceiverTimer = null;
+var decodedValue = [];
+var decodedReceiving = false;
+
+
+var transferState = TRANSFER_STATE_NONE;
+
+var BIN_TRANSFER_BYTE_MAX = 16;
+
+function downloadBin() {
+    var downloadURL = "";
+    if(null == selectedRemote) {
+        popUpHintDialog('请先选中一个索引');
+        return;
+    }
+    downloadURL = '/irext/int/download_remote_index?remote_index_id='+selectedRemote.id+'&admin_id='+id+'&token='+token;
+
+    if (null != client && client == 'console') {
+        // directly download binary to remote via serial port
+    } else {
+        window.open(
+            downloadURL,
+            '_blank'
+        );
+    }
+}
+
+// binary transfer to IR decode chip sets
+function onTransferBin() {
+    if(null == selectedRemote) {
+        popUpHintDialog('请先选中一个索引');
+        return;
+    }
+    $('#binary_transfer_dialog').modal({
+        backdrop: 'static',
+        keyboard: false
+    })
+}
+
+function onTransferTypeChanged() {
+    // TODO:
+}
+
+function prepareTransfer() {
+    if (false == transferSocketConnected) {
+        ws = new WebSocket('ws://localhost:8301/');
+        ws.binaryType = 'arraybuffer';
+
+        ws.addEventListener('error', function () {
+            onTransferSocketError();
+        });
+
+        ws.addEventListener('open', function () {
+            onTransferSocketOpened();
+        });
+
+        ws.addEventListener('close', function () {
+            onTransferSocketClosed();
+        });
+
+        ws.addEventListener('message', function (data) {
+            onTransferSocketData(data);
+        });
+        transferSocketConnected = true;
+    } else {
+        popUpHintDialog('连接已经建立');
+    }
+}
+
+function onTransferSocketError() {
+    popUpHintDialog('当前的环境不支持 Web COM，请参考 <a href="http://https://github.com/strawmanbobi/web-com">' +
+        'http://https://github.com/strawmanbobi/web-com</a> 获取更多信息');
+    updateTransferState(TRANSFER_STATE_NONE, 0, 100);
+}
+
+function onTransferSocketOpened() {
+    serialPortConnected = true;
+}
+
+function onTransferSocketClosed() {
+    transferSocketConnected = false;
+    popUpHintDialog("Web COM 已经关闭");
+    updateTransferState(TRANSFER_STATE_NONE, 0, 100);
+}
+
+function onTransferSocketData(e) {
+    // echo data from peer
+    if (TRANSFER_STATE_BIN_FETCHED == transferState ||
+        TRANSFER_STATE_BIN_ON_GOING == transferState) {
+        var array = new Uint8Array(e.data);
+        if (array[0] == 0x30) {
+            onTransferResponse(array.slice(1));
+        } else if (array[0] == 0x31) {
+            onCommandResponse(array.slice(1));
+        } else {
+            // might be decode result
+            console.log('error');
+        }
+    } else if (TRANSFER_STATE_BIN_DONE == transferState) {
+        var array = new Uint16Array(e.data);
+        // this is a part of the data chunk of the whole decoded values, concat this
+        onDecoded(array);
+    }
+}
+
+function onTransferResponse(data) {
+    if (TRANSFER_STATE_BIN_FETCHED == transferState ||
+        TRANSFER_STATE_BIN_ON_GOING == transferState) {
+        // verify if the expected byte index equals '0'
+
+        var index = parseInt(new TextDecoder("utf-8").decode(data));
+        updateTransferState(TRANSFER_STATE_BIN_ON_GOING, index, binToTransfer.length);
+        if (index >= binToTransfer.length) {
+            updateTransferState(TRANSFER_STATE_BIN_DONE,index, binToTransfer.length);
+        } else {
+            sendExpectedData(index);
+        }
+    } else {
+        console.log('invalid transfer state : ' + transferState);
+    }
+}
+
+function onCommandResponse(data) {
+
+}
+
+function onDecoded(array) {
+    if (decodedReceiverTimer) {
+        clearTimeout(decodedReceiverTimer);
+    }
+    if (false == decodedReceiving) {
+        // clear receiving buffer
+        decodedValue = new Uint16Array(array);
+    }
+    decodedReceiving = true;
+    // concat buffer
+    decodedValue = concatTypedArrays(decodedValue, array);
+    decodedReceiverTimer = setTimeout(function() {
+        decodedReceiving = false;
+        $('#dob_ir_wave_value').val(decodedValue);
+    }, 200);
+}
+
+function fetchBinary() {
+    var remoteToTransfer = selectedRemote;
+    remoteToTransfer.admin_id = id;
+    remoteToTransfer.token = token;
+    $.ajax({
+        url: '/irext/decode/prepare_transfering_remote_index',
+        type: 'POST',
+        dataType: 'json',
+        data: remoteToTransfer,
+        timeout: 20000,
+        success: function (response) {
+            if(response.status.code == 0) {
+                onTransferBinFetched(response.entity);
+            } else {
+                popUpHintDialog('获取二进制文件失败');
+            }
+        },
+        error: function () {
+            popUpHintDialog('获取二进制文件失败');
+        }
+    });
+}
+
+function startTransfer() {
+    if (!ws) {
+        console.log('invalid transfer socket');
+        return;
+    }
+
+    fetchBinary();
+}
+
+function startDoB() {
+    /*
+    if (TRANSFER_STATE_BIN_DONE != transferState) {
+        popUpHintDialog("需要先下载二进制码");
+        return;
+    }
+    */
+    $('#binary_transfer_dialog').modal('hide');
+    $('#dob_ir_wave_value').val('');
+    resetKeyPressInfo();
+    $('#dob_dialog').modal({
+        backdrop: 'static',
+        keyboard: false
+    });
+}
+
+function quitDob() {
+    $('#dob_dialog').modal('hide');
+}
+
+function sendExpectedData(index) {
+    if (index < 0) {
+        console.log('expected index error : ' + index + ', abort !!');
+        return;
+    }
+    if (!ws) {
+        console.log('invalid transfer socket');
+        return;
+    }
+    var leftLength = binToTransfer.length - index;
+    var lengthToSend = 0;
+    if (leftLength < BIN_TRANSFER_BYTE_MAX) {
+        lengthToSend = parseInt(leftLength);
+    } else {
+        lengthToSend = parseInt(BIN_TRANSFER_BYTE_MAX);
+    }
+    var arrayToSend = binToTransfer.content.slice(index, parseInt(index) + parseInt(lengthToSend));
+    var binToSend = buildBinaryPacket(arrayToSend);
+    ws.send(binToSend);
+}
+
+function cancelTransfer() {
+    // close serial port by closing transfer socket
+    if (ws) {
+        ws.close();
+    }
+    serialPortConnected = false;
+    updateTransferState(TRANSFER_STATE_NONE, 0, 100);
+    $('#binary_transfer_dialog').modal('hide');
+    binToTransfer = {
+        category_id : 0,
+        content : null,
+        length : 0
+    };
+}
+
+function onTransferBinFetched(btt) {
+    var bin = _base64ToArrayBuffer(btt.bin);
+    // prepare binary in RAM
+    binToTransfer = {
+        category_id : btt.category_id,
+        // encode binary content into typed array
+        content : new Uint8Array(bin),
+        length : bin.byteLength
+    };
+    updateTransferState(TRANSFER_STATE_BIN_FETCHED, 0, 100);
+    if (false == serialPortConnected) {
+        popUpHintDialog("连接尚未建立，请先建立连接");
+        return;
+    }
+
+    if (null == binToTransfer || null == binToTransfer.content || 0 == binToTransfer.length ||
+        0 == binToTransfer.category_id) {
+        popUpHintDialog("没有获取到有效的编码二进制文件，请重试");
+        return;
+    }
+
+    // after remote binary is fetch, start binary data transfer by clicking 'start' button
+    var binaryLengthData = buildBinaryLength(binToTransfer.length);
+    if (null == binaryLengthData) {
+        console.log('failed to parse binary length, abort !!');
+        return;
+    }
+    var transferType = binToTransfer.category_id == CATEGORY_AC ? '2' : '1';
+    var header = buildSummaryPacket(transferType + binaryLengthData);
+    ws.send(header);
+}
+
+function updateTransferState(newState, progress, total) {
+    var progressText = '';
+    transferState = newState;
+    switch (parseInt(newState)) {
+        case TRANSFER_STATE_NONE:
+            progressText = '空闲中';
+            break;
+        case TRANSFER_STATE_BIN_FETCHED:
+            progressText = '二进制文件获得';
+            break;
+        case TRANSFER_STATE_BIN_ON_GOING:
+            progressText = '发送中: ' + progress + '/' + total;
+            break;
+        case TRANSFER_STATE_BIN_DONE:
+            progressText = '发送完成';
+            break;
+        default:
+            console.log('transfer state error : ' + newState);
+            break;
+    }
+
+    updateProgress(progress, total);
+    $('#transfer_progress_desc').html(progressText);
+}
+
+function updateProgress(current, total) {
+    var progress = $("#transfer_progress");
+    progress.attr('aria-valuemax', total);
+    progress.attr('data-transitiongoal', current);
+    progress.progressbar();
+}
+
+function buildBinaryLength(lengthInfo) {
+    try {
+        var len = parseInt(lengthInfo);
+        if (len >= 10000) {
+            console.log('binary size exceeded');
+            return null;
+        } else if (len >= 1000 && len < 10000) {
+            return lengthInfo;
+        } else if (len >= 100 && len < 1000) {
+            return "0" + lengthInfo;
+        } else if (len >= 10 && len < 100) {
+            return "00" + lengthInfo;
+        } else if (len >= 0 && len < 10) {
+            return "000" + lengthInfo;
+        } else {
+            console.log('binary size exceeded');
+            return null;
+        }
+    } catch (err) {
+        console.log('error occurred : ' + err);
+        return null;
+    }
+}
+
+function buildSummaryPacket(data) {
+    if (isByteArray(data)) {
+        return concatTypedArrays(new Uint8Array([0x30]), data);
+    } else if (isString(data)) {
+        return '0' + data;
+    }
+}
+
+function buildBinaryPacket(data) {
+    if (isByteArray(data)) {
+        return concatTypedArrays(new Uint8Array([0x31]), data);
+    } else if (isString(data)) {
+        return '1' + data;
+    } else {
+        console.log('invalid type of bin to send : ' + typeof data + ', ' + data.constructor);
+    }
+}
+
+function buildCommand(data) {
+    if (isByteArray(data)) {
+        return concatTypedArrays(new Uint8Array([0x32]), data);
+    } else if (isString(data)) {
+        return '2' + data;
+    }
+}
+
+function onDoBClick(buttonID) {
+     if (TRANSFER_STATE_BIN_DONE != transferState) {
+     popUpHintDialog('需要先下载二进制码');
+     return;
+     }
+    currentControl.key_id = buttonID.substring(8);
+    updateKeyPressInfo(currentControl.key_id);
+    decodeOnBoard(currentControl);
+}
+
+function updateKeyPressInfo(buttonID) {
+    $('#key_press').html(keyNames[parseInt(buttonID)]);
+
+    if(1 == selectedRemote.category_id && binToTransfer.category_id == CATEGORY_AC) {
+        $('#ac_status_power').html('AC POWER:' + acPowers[acStatus.power]);
+        $('#ac_status_mode').html('AC MODE:' + acModes[acStatus.mode]);
+        $('#ac_status_temp').html('AC TEMP:' + (16 + parseInt(acStatus.temp)));
+        $('#ac_status_speed').html('WIND SPEED:' + acSpeed[acStatus.wind_speed]);
+        $('#ac_status_swing').html('SWING:' + acSwing[acStatus.wind_dir]);
+    } else if (2 == selectedRemote.category_id && binToTransfer.category_id != CATEGORY_AC) {
+        $('#ac_status_power').html('');
+        $('#ac_status_mode').html('');
+        $('#ac_status_temp').html('');
+        $('#ac_status_speed').html('');
+        $('#ac_status_swing').html('');
+    }
+}
+
+function resetKeyPressInfo() {
+    $('#key_press').html('');
+    $('#ac_status_power').html('');
+    $('#ac_status_mode').html('');
+    $('#ac_status_temp').html('');
+    $('#ac_status_speed').html('');
+    $('#ac_status_swing').html('');
+}
+
+function decodeOnBoard(control) {
+    var command = '';
+    if (!ws) {
+        console.log('invalid command socket');
+        return;
+    }
+
+    var transferType = binToTransfer.category_id == CATEGORY_AC ? '2' : '1';
+
+    if(1 == selectedRemote.category_id && binToTransfer.category_id == CATEGORY_AC) {
+        // decode as AC
+        acStatus = {
+            power: '0',
+            temp: '8',
+            mode: '0',
+            wind_dir: '0',
+            wind_speed: '0'
+        };
+        control.ac_status = acStatus;
+        var acFunction = '0';
+        switch(control.key_id) {
+            case '0':
+                // power key --> change power
+                acFunction = '1';
+                break;
+            case '1':
+                // up key --> change wind speed
+                acFunction = '5';
+                break;
+            case '2':
+                // down key --> change wind dir
+                acFunction = '6';
+                break;
+            case '4':
+                // right key --> change mode
+                acFunction = '2';
+                break;
+            case '5':
+                // center key --> fix wind dir
+                acFunction = '7';
+                break;
+            case '6':
+                // plus key --> temp up
+                acFunction = '3';
+                break;
+            case '7':
+                // minus key --> temp down
+                acFunction = '4';
+                break;
+
+            default:
+                return;
+        }
+        command = buildCommand(transferType + acFunction + control.ac_status.power +
+            control.ac_status.temp + control.ac_status.mode +
+            control.ac_status.wind_dir + control.ac_status.wind_speed);
+    } else {
+        // decode as TV
+        command = buildCommand(transferType + control.key_id);
+    }
+
+    ws.send(command);
+}
+
+function _base64ToArrayBuffer(base64) {
+    var binary_string =  window.atob(base64);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+        bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+
+function ab2hex(buffer) { // buffer is an ArrayBuffer
+    return Array.prototype.map.call(new Uint8Array(buffer), x => '0x' + ('00' + x.toString(16)).slice(-2)).join(',');
+}
+
+function concatTypedArrays(a, b) {
+    var c = new (a.constructor)(a.length + b.length);
+    c.set(a, 0);
+    c.set(b, a.length);
+    return c;
+}
+
+function isByteArray(obj) {
+    return (typeof obj == 'object') && obj.constructor == Uint8Array;
+}
+
+function isString(obj) {
+    return (typeof obj == 'string') && obj.constructor == String;
+}
\ No newline at end of file
diff --git a/src/web_console/web/public_js/bower.json b/src/web_console/web/public_js/bower.json
index 997a435..ffd3721 100644
--- a/src/web_console/web/public_js/bower.json
+++ b/src/web_console/web/public_js/bower.json
@@ -16,6 +16,7 @@
     "bootstrap-multiselect": "^0.9.13",
     "bootstrap-spinner": "^1.1.1",
     "bootstrap-table": "^1.11.0",
+    "bootstrap-progressbar": "^0.9.0",
     "highcharts": "^5.0.6",
     "jquery": "^2.2.4",
     "select2": "^4.0.3",