cocorobolx/src/blockly/cocoblockly.js

redirect_based_lang((window.navigator.systemLanguage ? window.navigator.systemLanguage : window.navigator.language).toLowerCase());
// redirect_based_lang('zh-tw');
// -------- get translation & examples' map from 'data.json' -------- //


isgetmcnty = null;
var _uploadererror = [
    ["isn't defined", "error_pv"],
    ["PermissionError", "error_pp"],
    ["file “<stadin>” line", "error_tc"],
    ["Timeout", "error_tp"],
    ["EPERM", "EPERM"],
    ["ENOEN", "ENOEN"],
    ["ESRCH", "ESRCH"],
    ["EINTR", "EINTR"],
    ["EIO", "EIO"],
    ["ENXIO", "ENXIO"],
    ["E2BIG", "E2BIG"],
    ["ENOEX", "ENOEX"],
    ["EBADF", "EBADF"],
    ["ECHIL", "ECHIL"],
    ["EAGAI", "EAGAI"],
    ["ENOME", "ENOME"],
    ["EACCE", "EACCE"],
    ["EFAUL", "EFAUL"],
    ["ENOTB", "ENOTB"],
    ["EBUSY", "EBUSY"],
    ["EEXIS", "EEXIS"],
    ["EXDEV", "EXDEV"],
    ["ENODE", "ENODE"],
    ["ENOTD", "ENOTD"],
    ["EISDI", "EISDI"],
    ["EINVA", "EINVA"],
    ["ENFIL", "ENFIL"],
    ["EMFIL", "EMFIL"],
    ["ENOTT", "ENOTT"],
    ["ETXTB", "ETXTB"],
    ["EFBIG", "EFBIG"],
    ["ENOSP", "ENOSP"],
    ["ESPIP", "ESPIP"],
    ["EROFS", "EROFS"],
    ["EMLIN", "EMLIN"],
    ["EPIPE", "EPIPE"],
    ["EDOM ", "EDOM"],
    ["ERANG", "ERANG"],
    ["EAFNOSUPP", "EAFNOSUPP"],
    ["ECONNRES", "ECONNRES"],
    ["ETIMEDO", "ETIMEDO"],
    ["EINPROGRE", "EINPROGRE"]
];

const eproxy = new EventProxy();
const CCB = {
    lang: (() => {
        let lang = 'en';
        document.location.search.substring(1).split('&').forEach((item) => {
            if (item.split('=')[0] == 'lang') {
                lang = item.split('=')[1];
            }
        });
        return lang;
    })(),
    base_url: '//api.cocorobo.cn/',
    // base_url: '//staging.cocorobo.cn/api/', // staging
    CompileURL: "//compile-service.cocorobo.cn/compile", // production, new
    // CompileURL: "//compiler.cocorobo.cn/dispatcher/compile", // production, old
    // CompileURL: "//staging.cocorobo.cn/dispatcher/compile", // staging, old
    // CompileURL: "//localhost:3000/compile", //local test environment
    str_group: null,
    examplesMap: null,
    socket: null,
    ws_url: 'http://localhost',
    pluginVersion: null,
    status: 'idle',
    isOpen: false,
    iconTool: 'code',
    mode: true,
    reupload: false,
    boards: [],
    cloudFileList: [],
    userState: false,
    asIframe: false,
    ACCategory_index: 1
};

const USER = {
    api_key: null,
    evnets: null,
};

const progress = { toast_timer: null, xhr: null };

function changeLanguage(val) {

    let search = window.location.search.substring(1);
    let redirect = true;
    if (search.length == 0)
        search = `?lang=${val}`;
    else {
        if (search.indexOf('lang') >= 0) {
            let arr = search.split('&');
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].indexOf('lang') >= 0) {
                    arr[i].indexOf(val) >= 0 ? redirect = false : arr[i] = `lang=${val}`;
                    break;
                }
            }
            redirect ? search = `?${arr.join('&')}` : '';
        } else
            search = `?lang=${val}&${search}`;
    }
    redirect ? window.location.href = `//${window.location.host}${window.location.pathname}${search}` : null;
};

function getJsonData(filepath) {
    return new Promise(resolve => {
        $.getJSON(filepath, data => resolve(data));
    });
}

/**
 * Redirect web page base on the user's language.
 * @param {string} lang User's languge
 * @returns {void} void
 */
function redirect_based_lang(lang) {
    console.log('System language is: ' + window.navigator.language.toLowerCase());
    if (window.location !== window.parent.location) {
        console.log("In an iframe.");
        if (document.location.search.indexOf('lang') < 0) {
            if (lang === 'zh-cn' || lang === 'zh')
                changeLanguage('zh-hans');
            else if (lang === 'zh-tw' || lang === 'zh-hk')
                changeLanguage('zh-hant');
            else
                changeLanguage('en');
        }
    } else {
        console.log("Not in an iframe.");
        if (document.location.search.indexOf('lang') < 0) {
            if (lang === 'zh-cn' || lang === 'zh')
                changeLanguage('zh-hans');
            else if (lang === 'zh-tw' || lang === 'zh-hk')
                changeLanguage('zh-hant');
            else
                changeLanguage('en');
        }
    }
    return;
}

/**
 * Add a project button to the page & it's not finished yet.
 * @returns {void} void
 */
function add_project_btn() {
    var projectsBtn = $('<a></a>').html(CCB.str_group.project).click(function () { });
    projectsBtn.addClass('waves-effect waves-light btn resize disabled');
    $('.blocklyTreeRoot').after(projectsBtn);
}


/**
 * create a fragment of chrome& Opera for reload.
 * @returns {DOM} fragment
 */
function createChromeOperaFragment() {
    const fragment = document.createDocumentFragment();
    const container = document.createElement('div');
    const chromeLink = document.createElement('a');
    const chromeIcon = document.createElement('img');
    const operaLink = document.createElement('a');
    const operaIcon = document.createElement('img');
    chromeIcon.src = './icons/chrome_icon.png';
    chromeLink.href = 'https://www.google.com/chrome/';
    chromeLink.target = '_blank';
    operaIcon.src = './icons/opera_icon.png';
    operaLink.href = 'https://www.opera.com/download';
    operaLink.target = '_blank';
    container.id = 'browserLink';
    chromeLink.appendChild(chromeIcon);
    operaLink.appendChild(operaIcon);
    container.appendChild(chromeLink);
    container.appendChild(operaLink);
    fragment.appendChild(container);
    return fragment;
}

/**
 * Popout a warning modal.
 * @param {string} title Modal title
 * @param {string} body Modal main content
 * @param {boolean} confirm
 * @param {string} img Image's url
 * @param {DocumentFragment} fragment 
 * @param {function} callback 
 */
function popWarning(title, body, confirm, img, fragment, callback) {
    if (img)
        $('#gen_warn_image').attr('src', img);
    else
        $('#gen_warn_image').css('display', 'none');
    $('#gen_warn_title').text(title);
    const $modalBody = $('#gen_warn_body > span');
    $modalBody.text('');
    $modalBody.append(body);
    if (fragment)
        $('#gen_warn_others').append(fragment);
    else
        $('#gen_warn_others').empty();
    if (confirm == true) {
        $('#gen_warn_cancel_link').css({ 'display': 'inline-block' });
        if (callback)
            $('#gen_warn_ok_link').bind('click', callback);
    } else {
        $('#gen_warn_cancel_link').css({ 'display': 'none' });
        $('#gen_warn_ok_link').unbind('click');
    }
    $('#gen_warn').modal('open');
    window.location.hash = '';
};

/**
 * bind selector click handler with example name on map.
 * @param {DOM} selector DOM Node
 * @param {map} map the map contain eaxmples 
 */
function bind_open_example(selector, map) {
    let $group = $(selector);
    $group.on('click', (e) => {
        let node = e.target;
        while (node.id === "")
            node = node.parentNode;
        let id = node.id;
        if (/\.label/.test(id))
            id = id.replace(/\.label/, "");
        if (map[id]) {
            let fileName = '../examples/' + map[id] + '.xml';
            Ardublockly.loadServerXmlFile(fileName);
        }
    });
}

/**
 * copy the Arduino code onto clipboard 
 * @param  {object} data ardunio code
 */
function clipboard_copy(...data) {
    data.forEach(item => {
        let clip = new ClipboardJS(item);
        clip.on('success', (e) => {
            Materialize.toast(CCB.str_group.copy_success, 2000);
            e.clearSelection();
        });
    });
}

/**
 * bind tooltip from list 
 * get selector and content from list 
 */
function add_tooltips(tooltip_list) {
    tooltip_list.forEach((i) => {
        $(i.selector).tooltip({
            delay: i.delay,
            position: i.position,
            tooltip: i.tooltip
        });
    });
}

/**
 * check version of uploader 
 */
function ver_reminder(socket) {
    socket.on('version', version => {
        clearTimeout(timer);
        CCB.pluginVersion = version;
        eproxy.emit('ver', version);
    });
    let timer = setTimeout(() => {
        CCB.pluginVersion = "0.0.0";
        eproxy.emit('ver', "0.0.0");
    }, 2000);
}

/**
 * Function to remove elements 'disabled' class.
 * @param {Array} args Selectors of element
 * @returns {void} void
 */
function rm_disabled(...args) {
    for (let i = 0; i < args.length; i++)
        $(args[i]).removeClass('disabled');
}

/**
 * Function to add elements 'disabled' class.
 * @param {Array} args Selectors of element
 * @returns {void} void
 */
function add_disabled(...args) {
    for (let i = 0; i < args.length; i++)
        $(args[i]).addClass('disabled');
}

/**
 * create options when detecting ports of hardware devices via uploader
 * @param {String} text info of port
 * @param {String} value refer to the port
 */
function create_opts(text, value, disabled = false) {
    const option = document.createElement('option');
    option.textContent = text;
    option.value = value;
    disabled ? option.disabled = 'true' : null;
    return option;
}

/**
 * handle ports information received from uploader
 * change mode bewteen mainControl mode and wifi mode when detect ports
 * main control - manufacturer: Arduino
 * WiFi - manufacturer: Silicon
 *  @param {String} ports info of ports
 * @param {DOM} parent DOM the select append to
 */
function parse_ports(ports, parent) {
    let fragment = document.createDocumentFragment();
    let $select = $(parent);
    let alls = ports.boards.concat(ports.wifi);
    let maps = {},
        newboard = null,
        list = null;
    // detect if there are newboards connected
    for (let i = 0; i < CCB.boards.length; i++)
        maps[CCB.boards[i]] = true;
    for (let i = 0; i < alls.length; i++)
        !maps[alls[i].path || alls[i].comName] ? newboard = alls[i] : null;
    CCB.boards = [];
    for (let i = 0; i < alls.length; i++)
        CCB.boards.push(alls[i].path || alls[i].comName);

    // show all connected boards in select element depending on the mode
    list = alls;//  CCB.mode ? ports.boards : ports.wifi;

    if (list.length > 0) {
        for (let i = 0; i < list.length; i++)
            fragment.appendChild(create_opts(list[i].path || list[i].comName, list[i].path || list[i].comName));
        if (CCB.status === 'idle')
            rm_disabled('#compile-btn', '#upload-btn', '#comms-cnt');
        disableCompileUploadBtn();
    } else {
        fragment.appendChild(create_opts(CCB.str_group.no_port_option, null));
        add_disabled('#upload-btn', '#comms-cnt');
        if (CCB.isOpen) {
            $('#comms-cnt').css("display", "block");
            $('#comms-discnt').css("display", "none");
            add_disabled('#comms-send');
            CCB.isOpen = false;
        }
    }
    $select.empty().append(fragment).material_select();
    $('#ports-monitor')[0].children[1].textContent = $select.val() != "null" ? $select.val() : '';
    if (newboard !== null) {
        isgetmcnty = false;
        $("#gettype")[0].click();
        // if (newboard.manufacturer.indexOf("Arduino") > -1 && CCB.mode == false)
        //     $('#network-btn').click();
        // else if (newboard.manufacturer.indexOf("Silicon") > -1 && CCB.mode == true)
        //     $('#network-btn').click();
    }
}

function getmcnty() {
    $('#status_bar').replaceWith(`<span id="status_bar"><span id="status_txt">${Ardublockly.LOCALISED_TEXT.statuscontect}&nbsp&nbsp&nbsp&nbsp</span></span>`);
    //上传中的处理
    $.ajax(`${CCB.socket.io.uri}/getmcnty`, {
        method: 'POST',
        data: { comname: $("#ports")[0].value, sid: CCB.socket.id },//newboard.path
        complete: (data) => {
            if (data.responseText == "IoT") {
                $('#status_bar').replaceWith(`<span id="status_bar"><span id="status_txt">${Ardublockly.LOCALISED_TEXT.statusbar}&nbsp&nbsp&nbsp&nbsp</span></span>`);
                isgetmcnty = true;
                $('#ports').material_select();
                $("#mode")[0].selectedIndex = 0;
                $("#mode")[0].onchange();
                $('#progress').css("display", "block");
                $('.selectMode_input')[0].value = Ardublockly.LOCALISED_TEXT.iot_module;
                appearExample(1);
            } else if (data.responseText == "AI") {
                $('#status_bar').replaceWith(`<span id="status_bar"><span id="status_txt">${Ardublockly.LOCALISED_TEXT.statusbar}&nbsp&nbsp&nbsp&nbsp</span></span>`);
                isgetmcnty = true;
                $('#ports').material_select();
                $("#mode")[0].selectedIndex = 1;
                $("#mode")[0].onchange();
                $('#progress').css("display", "block");
                $('.selectMode_input')[0].value = Ardublockly.LOCALISED_TEXT.ai_module;
                appearExample(0);
            }
        },
        error: function (error) {
            getmcnty();
        }
    });
}

var _ndiv = [];
function repl(socket, res) {
    if ($("#repl_box")[0].className.indexOf("hidden") == -1) {
        const { code } = res;
        var _str = code.replace(/[\r\n]/g, function (str) {
            return "</div><div>";
        });
        _str = "<div>" + _str + "</div>";
        var _f = document.createDocumentFragment();
        var _div = $$("div", { "innerHTML": _str });
        for (var i = 0; i < _div.children.length; i++) {
            if (_div.children[i].innerText != "") {
                if (_div.children[i].innerText == ">>> ") {
                    $$("span", { "innerHTML": "&nbsp", "contentEditable": true }, _div.children[i])
                }
            }
            else {
                _div.removeChild(_div.children[i])
                i--;
            }
        }


        _ndiv = _ndiv.concat(Array.prototype.slice.call(_div.children));
        var _child = Array.prototype.slice.call($("#repl_box_content")[0].children).concat(Array.prototype.slice.call(_div.children)).slice(-200);
        for (var i = 0; i < _child.length; i++) {
            _f.appendChild(_child[i])
        }
        $("#repl_box_content")[0].innerHTML = "";
        $("#repl_box_content")[0].appendChild(_f);
        // console.log($("#repl_box_content").css("height").split("px")[0])
        $("#repl_box")[0].scrollTop = $("#repl_box")[0].scrollHeight;
        let arr = [];
        for (let i = 0; i < _ndiv.length; i++) {
            let data = _ndiv[i].innerText
            if (data == "OK" || data == ">") {

            } else {
                data.split(',').map((x, ind) => {
                    if (Number(x)) {
                        arr[ind] = (arr[ind] && arr[ind].length != 0) ? arr[ind].concat([x]) : [x]
                    } else {
                        x = 0
                        arr[ind] = (arr[ind] && arr[ind].length != 0) ? arr[ind].concat([x]) : [x]
                    }
                    return x;
                })
            }
        } if (arr.length > 10) {
            $('#echartsMainSpan').text(CCB.str_group.number_only);
            $('#echartsMains').css('display', 'block')
            $('#echartsMain').css('display', 'none')
        } else {
            $('#echartsMains').css('display', 'none')
            $('#echartsMain').css('display', 'block')
            const corlor = ['red', 'black', 'green', 'orange', "bule", "purple", "grey", "cyan", "pink", "yellow"]
            let arrs = arr.map((x, ind) => {
                if (x.length > 30) {
                    x = x.slice(x.length - 31, x.length)
                }
                return {
                    name: corlor[ind],
                    smooth: true,  //这句就是让曲线变平滑的 
                    type: 'line',
                    data: x,
                    itemStyle: {
                        normal: {
                            color: corlor[ind],
                            borderColor: 'rgba(0,136,212,0.2)',
                        }
                    },
                }
            })
            if (arrs.length > 0) {
                document.getElementById('echartsMain').lastChild.innerHTML = "";
                document.getElementById('echartsMain').lastChild.removeAttribute("class");
                options = {
                    animation: false,
                    tooltip: {
                    },
                    grid: {
                        top: 40,
                        left: 50,
                        right: 40,
                        bottom: 50
                    },
                    legend: {
                    },
                    xAxis: {
                        data: arrs[0].data.map((x, ind) => ind),
                        boundaryGap: false
                    },
                    yAxis: {

                    },
                    dataZoom: [{
                        show: true,
                    }],
                    series: arrs
                };
                myChart.setOption(options);
            }
        }
    }
}

/**
 * handle upload process via socket
 * upload the binary result into device
 * @param {object} socket socket connected between browser and uplaoder
 * @param {string} res binary result
 */
function handle_upload(socket, res) {
    const { ProgrammerStatus, Error = '' } = res;
    if (ProgrammerStatus === 'Starting') {
        eproxy.emit('progress-start', 'upload');
    } else if (ProgrammerStatus === 'Break') {
        eproxy.emit('progress-break');
    } else {
        if (ProgrammerStatus === 'Done') {
            eproxy.emit('progress-response', 'upload-success');
        } else if (ProgrammerStatus === 'Error') {
            const { lang } = CCB;
            let language = lang.indexOf("-hant") ?
                "zhHant" : lang.indexOf("-hans") ? "zhHans" : "en";
            $('#error-btn').css('display', 'block');
            if (typeof (Error) === "string") {
                $('#err-msg').text(err);
            } else {
                var errormsg = Error.sol[language];
                for (var i = 0; i < _uploadererror.length; i++) {
                    if (Error.msg.indexOf(_uploadererror[i][0]) > -1) {
                        errormsg = Ardublockly.LOCALISED_TEXT[_uploadererror[i][1]]
                    }
                }
                $('#err-msg').text(`${CCB.str_group.errCode} ${Error.code}
                \n${CCB.str_group.errMsg} ${Error.msg}
                \n${CCB.str_group.errSol}\n${errormsg}`);
            }
            $('.card-reveal').css({ 'display': 'block', 'transform': 'translateY(-100%)', 'padding': '8px 13px' });
            eproxy.emit('progress-response', 'upload-error');
        }
        setTimeout(function () {
            socket.emit('command', { cmd: 'list' });
            // console.log('getting port, 1');
        }, 500);
        setTimeout(function () {
            socket.emit('command', { cmd: 'list' });
            // console.log('getting port, 2');
        }, 1000);
        setTimeout(function () {
            socket.emit('command', { cmd: 'list' });
            // console.log('getting port, 3');
        }, 1500);
    }
}

/*
make sure the compile and upload button is disabled when uploading procesdure is still in progress.
*/

function disableCompileUploadBtn() {
    var uploadingStatusDetected = document.getElementById('status_bar').innerHTML;

    if (uploadingStatusDetected.includes(CCB.str_group.uploading) == true) {
        $('#send_file').addClass("disabled");
        $('#uploadpy').addClass("disabled");
        console.log("Disabling Upload Button...");
    }
}

/**
 * Replace the prograss text on upload area during uploading program
 * depending on uploading status.
 * @param {string} msg Message about uploading status
 * @param {string} percent Percent of uploading prograss 
 * @returns {void} void
 */
function progress_text(msg, percent) {
    // percent != "0%" ?
    //     $('#status_bar').replaceWith(`<span id="status_bar"><span id="status_txt">${msg}&nbsp&nbsp&nbsp&nbsp</span><span>${percent}</span></span>`) :
    //     $('#status_bar').replaceWith(`<span id="status_bar"><span id="status_txt">${msg}&nbsp&nbsp&nbsp&nbsp</span><span></span></span>`);

    percent != "0%" ?
        $("#runSuccess").css("display", "block") :
        $("#runSuccess").css("display", "none");

    percent != "0%" ?
        $('#statusMsg').replaceWith(`<span id="statusMsg"><span id="statusMsg_txt">${msg}&nbsp&nbsp&nbsp&nbsp</span></span>`) :
        $('#statusMsg').replaceWith(`<span id="statusMsg"><span id="statusMsg_txt">${msg}&nbsp&nbsp&nbsp&nbsp</span><span></span></span>`);

    msg == CCB.str_group.upload_fail ?
        $("#runFail").css("display", "block") :
        $("#runFail").css("display", "none");

    $('.progress > .determinate').css('width', percent);

    disableCompileUploadBtn();
}

/**
 * Show the prograss bar animation during uploading program depending
 * on random numbers.
 * @returns {Array} An array store every setTimeout func's id.
 */
function progress_bar() {
    const timers = [];
    return function (state) {
        if (state) {
            let now = 0;
            for (let i = 1; i < 10; i++)
                timers.push(setTimeout(() => {
                    const rand = Math.random();
                    now += parseInt((rand < 0.5 ? rand + 0.5 : rand) * 12);
                    $('#status_txt + span').text(`${now}%`);
                    $('.progress > .determinate').css('width', `${now}%`);
                    timers[i - 1] = null;
                }, 15000 / i));
        } else {
            timers.forEach(timer => timer ? clearTimeout(timer) : '');
            timers.length = 0;
        }
    };
}

/**
 * Action that communicating with boards.
 * @param {Object} incomingMsg Received messages
 * @param {Boolean} incomingMsg.Open Whether communication open or not
 * @param {Boolean} incomingMsg.Close Whether communication closed or not
 * @returns {void} void
 */
function comm_boards(incomingMsg, isOpen) {
    if (incomingMsg.Open) {
        $('#comms-cnt').css("display", "none");
        $('#comms-discnt').css("display", "block");
        rm_disabled('#comms-send');
        Materialize.toast(CCB.str_group.success_openComm_monitor, 2000);
        CCB.isOpen = true
    } else if (incomingMsg.Open === false)
        Materialize.toast(CCB.str_group.fail_openComm_monitor, 2000);
    else if (incomingMsg.Close) {
        $('#comms-cnt').css("display", "block");
        $('#comms-discnt').css("display", "none");
        $('#comms-send').addClass('disabled');
        Materialize.toast(CCB.str_group.success_closeComm_monitor, 2000);
        CCB.isOpen = false;
    } else if (incomingMsg.Close === false)
        Materialize.toast(CCB.str_group.fail_closeComm_monitor, 2000);
    else if (data.updateBaud)
        Materialize.toast(CCB.str_group.success_setBaud_monitor, 2000);
    else if (data.updateBaud === false)
        Materialize.toast(CCB.str_group.fail_setBaud_monitor, 2000);
}

/**
 * Handle websocket disconnection.
 * @param {Object} socket Connected socket
 * @param {Function} empty Callback function to empty data list
 * @returns {void} void
 */
function ws_disconn(socket, empty) {
    let select = $('#ports');
    if (CCB.isOpen)
        socket.emit('command', { cmd: 'close' });
    add_disabled('#upload-btn', '#comms-cnt', '#uploader-relaunch-btn');
    $('#discnt_icon').css('display', 'inline-block');
    $("#progress").css('display', 'none');
    $('#cnt_icon').css('display', 'none');
    select.empty()
        .append(create_opts(CCB.str_group.no_port_option, null, true))
        .material_select();
    // remove an event handler
    $('#comms-cnt').off("click");
    $('#comms-discnt').off('click');
    $('#serial_baud').off("change");
    $('#comms-send').off("click");
    $('#comms-clear').off("click", empty);
    $('#upload-btn').off('click');
    $('#uploader-relaunch-btn').off('click');
    socket.close();
    CCB.socket = null;
    CCB.pluginVersion = null;
    socket = null;
    try {
        Materialize.Toast.removeAll();
    } catch (e) { }
    Materialize.toast(CCB.str_group.ws_connect_loss, 2500);
    eproxy.emit('wsreconn');
}

/**
 * Bind event's action to elements with socket.
 * @param {Object} socket Connected socket
 * @param {Array} list Incoming messages list
 * @param {Function} empty Callback function to empty data list
 * @returns {void} void
 */
function bind_with_socket(socket, list, empty) {


    // $('#runCode')[0].onclick = async () => {
    //     $.ajax(`${CCB.socket.io.uri}/pythonupload`, {
    //         method: 'POST',
    //         data: { code: pythonnewcode, sid: socket.id },
    //         complete: (data) => {
    //         }
    //     });
    // };


    /*
    let print_timer = null;
    let $commsPanel = $('#commsBox');
    let panelHeight = $commsPanel.css("height").split("px")[0];
    $('#comms-cnt').on("click", () => {
        if ($('#ports').val() && CCB.isOpen !== true) {
            socket.emit('command', {
                cmd: 'open',
                option: { port: $('#ports').val(), baud: $('#serial_baud').val() }
            });
            print_timer = setInterval(() => {
                if (list.length > 0) {
                    $commsPanel.val($commsPanel.val() + list.shift());
                    if ($("#autoscroll")[0].checked)
                        $commsPanel[0].scrollTop = $commsPanel[0].scrollHeight - panelHeight;
                }
            }, 0);
        }
    });
    $('#comms-discnt').on('click', () => {
        if (CCB.isOpen) {
            socket.emit('command', { cmd: 'close' });
            clearInterval(print_timer);
            list.length = 0;
        }
    });
    $('#serial_baud').on("change", e => {
        if (CCB.isOpen)
            socket.emit('command', { cmd: 'updateBaud', option: { baud: e.target.value } });
    });
    $('#comms-send').on("click", () => {
        if (CCB.isOpen)
            socket.emit('command', {
                cmd: 'send',
                option: { msg: $("#comms-msg").val(), postfix: $('#serial_output_style').val() }
            });
        $('#comms-msg').val('');
    });
    $('#comms-clear').on("click", empty);
    $('#upload-btn').on('click', async () => {
        $('#error-btn').css('display') !== 'none' ? $('#error-btn').css('display', 'none') : null;
        let board = $('#network-btn').prop('checked') ? 'esp8266:esp8266:nodemcuv2' : 'arduino:avr:leonardo';
        let code = $('#content_arduino').text();
        let port = $('#ports').val();
        CCB.status = 'busy-upload';
        compile_request(board, code)
            .then(code => {
                $.ajax(`${CCB.socket.io.uri}/upload`, {
                    method: 'POST',
                    data: { board, port, code, sid: socket.id },
                    complete: () => CCB.status = 'idle',
                });
            })
            .fail(err => {
                console.warn(err);
                CCB.status = 'idle';
            });
    });
    $('#uploader-relaunch-btn').on('click', () => {
        socket.emit('command', { cmd: 'relaunch' });
        switch (CCB.status) {
            case 'busy-upload':
                eproxy.emit('progress-init');
                break;
            default:
                break;
        }

    });
    */
}

/**
 * Use Socket.io to connect with Uploader, and eventproxy to
 * control all async functions.
 * @returns {void} void
 */
function ws_connect() {
    const ports = [9991, 9992, 9993, 9994, 9995, 9996, 9997, 9998, 9999, 10000];
    const { ws_url } = CCB;
    let fail = 0;
    for (let i = 0; i < ports.length; i++) {
        let ws = io(`${ws_url}:${ports[i]}`);
        ws.on('connect', () => {
            CCB.socket = ws;
            eproxy.emit('wsconn', ws);
        });
        ws.on('connect_error', () => {
            ws = ws.close() ? null : null;
            ++fail === ports.length ? setTimeout(() => eproxy.emit('wsreconn'), 1000) : null;
        });
        ws.on('close', () => {
            ++fail === ports.length ? setTimeout(() => eproxy.emit('wsreconn'), 1000) : null;
        });
    }
    return;
}

/**
 * Do after websocket is connected.
 * @param {Object} socket Connected websocket
 * @returns {void} void
 */
function ws_conned(socket) {
    let dataList = [],
        lostTimer = null;
    const cb = () => dataList.length = 0;
    const { reupload, status } = CCB;
    const { ws_connect_success, upload_area_init } = CCB.str_group;
    // popout tips for users
    try {
        Materialize.Toast.removeAll();
    } catch (e) { }
    Materialize.toast(ws_connect_success, 2500);
    $('#discnt_icon').css('display', 'none');
    $('#cnt_icon').css('display', 'inline-block');
    $('#uploader-relaunch-btn').removeClass('disabled');
    bind_with_socket(socket, dataList, cb);
    ver_reminder(socket);
    // if upload process interupt before
    if (reupload) {
        if ($('#ports').val()) {
            $('#upload-btn').click();
        } else {
            CCB.status = 'idle';
            progress_text(upload_area_init, '0%');
        }
    }
    // emit when connected
    socket.emit('command', { cmd: 'list' });
    // sent and received probes
    socket.on('ping', () => lostTimer = setTimeout(() => {
        status === 'busy-upload' ?
            handle_upload(socket, { programmerStatus: 'Break' }) : '';
        socket.emit('command', { cmd: 'relaunch' });
    }, 200));

    socket.on('pong', () => clearTimeout(lostTimer));
    // add event listener
    socket.on('list', data => parse_ports(data.List, document.getElementById('ports')));
    socket.on('upload', data => { handle_upload(socket, data); });
    socket.on('communicate', data => comm_boards(data));
    socket.on('message', data => dataList.push(data));
    socket.on('disconnect', () => ws_disconn(socket, cb));
    socket.on('repl', data => { repl(socket, data); });
}

function export_data(data, postfix, is_firefox) {
    let url = new Blob([data], { type: 'text/plain' });
    let download_link = URL.createObjectURL(url);
    let a = document.createElement('a');
    a.style = "display:none";
    a.href = download_link;
    a.download = $("#sketch_name").val() + postfix;
    if (is_firefox) {
        document.body.appendChild(a);
        a.click();
        setTimeout(() => document.body.removeChild(a), 100);
    } else
        a.click();
    // URL.revokeObjectURL(download_link);
    // IE edge need a short delay before revoke virtual download link
    setTimeout(() => URL.revokeObjectURL(download_link), 100);
}

/**
 * Rise a request for compiling
 * @param {string} board board info
 * @param {string} code ardunio code
 * @returns {void} void
 */
function compile_request(board, code) {
    const defer = $.Deferred();
    let compile_path = `${CCB.CompileURL}/${board.indexOf('esp8266') > -1 ? 'w' : 'm'}`;
    progress.xhr = $.ajax(compile_path, {
        method: 'POST',
        xhrFields: { withCredentials: true },
        data: { sketch: code },
        beforeSend: () => eproxy.emit('progress-start', 'compile'),
        success: data => {
            let res = '';
            if (data.error) {
                res = 'compile-error';
                $('#error-btn').css('display', 'block');
                $('#err-msg').text(data.error);
                defer.reject(data.error);
            } else if (data.response) {
                res = 'compile-success';
                defer.resolve(data.response);
            } else {
                res = 'compile-timeout';
                defer.reject('compile timeout');
            }
            eproxy.emit('progress-response', res);
        },
        error: err => {
            eproxy.emit('progress-response', 'compile-offline');
            $('#error-btn').css('display', 'block');
            $('#err-msg').text(CCB.str_group.compile_offline_handle);
            defer.reject(err);
        },
        complete: () => progress.xhr = null,
    });
    return defer.promise();
}

/**
 * Handle selectors' "active" class.
 * @param {Array} selectors1 Selectors which are to remove 'active' class
 * @param {Array} selectors2 Selectors which are to add 'active' class
 * @returns {void} void
 */
function handle_active(selectors1, selectors2 = []) {
    selectors1.forEach(selector => $(selector).removeClass('active'));
    selectors2.forEach(selector => $(selector).addClass('active'));
}

/**
 * Resize workspace.
 * @returns {void} void
 */
function resize() {
    Ardublockly.resizeBlocklyWorkspace();
    Blockly.asyncSvgResize();
};

/**
 * Click function. Hanle changing icon tool mode & show the animaiton.
 * @param {string} val Icon tool's value
 * @returns {void} void
 */
function changeSideCard(val) {
    let val_old = CCB.iconTool;
    CCB.iconTool = val;
    let icon_loc = (num) => `#icon-tool>li:nth-child(${num})`;
    // Height & opacity settings of element's animation
    let hei_opa_full = { height: '100%', opacity: 1 };
    let hei_opa_none = { height: 0, opacity: 0 };
    // Blockly resize
    resize();
    // Show different contents depending on input value
    if (val === 'code' && val_old === 'monitor') {
        handle_active([icon_loc(2)], [icon_loc(1)]);
        $('#Ardunio-main')
            .css('display', 'block')
            .animate(hei_opa_full, 300, "linear",
                () => $('#Serial-monitor').css('display', 'none').css('height', 0)
            );
        $('#Serial-monitor').animate({ opacity: 0 }, 80, "linear");
    } else if (val === 'monitor' && val_old === 'code') {
        handle_active([icon_loc(1)], [icon_loc(2)]);
        $('#Serial-monitor').css('display', 'block').css('height', '98.3%');
        $('#Ardunio-main').animate(hei_opa_none, 300, "linear",
            () => $('#Ardunio-main').css('display', 'none').css('height', 0)
        );
        $('#Serial-monitor').animate({ opacity: 1 }, 80, "linear");
    } else if (val === 'fullmode') {//&& val_old !== 'fullmode'
        // handle_active([icon_loc(1), icon_loc(2)], [icon_loc(3)]);
        // $('#sss').removeClass('l4').addClass('l0');
        // $('.blockpy-editor').removeClass('l8').addClass('l12');
        $('.white.blockpy-blocks.blockpy-editor-menu').toggleClass("fullscreen");
        $("#blockpy-content > .blockpy-editor img.fullscreenIcon").toggleClass("hidden");
        $("html").toggleClass("fullscreenMode");
        $('.blockpy-editor')[0].style.cssText = ''
        setTimeout(function () {
            Blockly.svgResize(blockpy.components.editor.blockly);
            Blockly.svgResize(Blockly.mainWorkspace);
        }, 100)
    } else if (val !== 'fullmode' && val_old === 'fullmode') {
        handle_active([icon_loc(3)]);
        // $('#sss').removeClass('l0').addClass('l4');
        // $('.blockpy-editor').removeClass('l12').addClass('l8');
        resize();
        if (val === 'code') {
            handle_active([], [icon_loc(1)]);
            if ($('#Ardunio-main').css('display') === 'none') {
                $('#Ardunio-main')
                    .css('display', 'block')
                    .animate(hei_opa_full, 300, "linear",
                        () => $('#Serial-monitor').css('display', 'none').css('height', 0)
                    );
                $('#Serial-monitor').animate({ opacity: 0 }, 80, "linear");
            }
        } else if (val === 'monitor') {
            handle_active([], [icon_loc(2)]);
            if ($('#Serial-monitor').css('display') === 'none') {
                $('#Serial-monitor').css('display', 'block').css('height', '98.3%');
                $('#Ardunio-main').animate(hei_opa_none, 300, "linear",
                    () => $('#Ardunio-main').css('display', 'none').css('height', 0)
                );
                $('#Serial-monitor').animate({ opacity: 1 }, 80, "linear");
            }
        }
    }
};

/**
 * Post request to server to delete copmiler's cache files.
 * @returns {void} void
 */
function deleteCompilerCache() {
    $.ajax(`${CCB.CompileURL}/del`, {
        type: 'POST',
        xhrFields: {
            withCredentials: true
        },
        data: '',
    });
}

/**
 * Swtich mode between wifi mode and main control mode & change 
 * background-color between blue and red at the same time.
 * @returns {void} void
 */
function PageModeSwitch() {
    let toolbox = blockpy.components.editor.blockly.toolbox_,
        temp = toolbox.tree_;
    let $toolboxDiv = $('.blocklyToolboxDiv');
    toolbox.flyout_.hide();
    toolbox.tree_ = toolbox.tree_old_;
    toolbox.tree_old_ = temp;
    if ($('#network-btn').prop('checked')) {
        Materialize.toast(CCB.str_group.wifi_mode, 1000);
        toolbox.HtmlDiv = $toolboxDiv[1];

        $('#wifi_mode_label').css('color', '#000');
        $toolboxDiv.first().css('display', 'none');
        $toolboxDiv.last().css('display', 'block');
        $("#icon-tool > li").addClass("color-red");
        $(".card-icon-area").css("border-left-color", "#e03021");
        $("#nav_").addClass("arduino_red");
        $("#footer_").addClass("arduino_red");

        saveLocalStorageBlocks("mc-mode-blocks-xml");
        blockpy.components.editor.blockly.clear();
        loadLocalStorageBlocks("wifi-mode-blocks-xml");
        CCB.mode = false;
    } else {
        Materialize.toast(CCB.str_group.maincontrol_mode, 1000);
        toolbox.HtmlDiv = $toolboxDiv[0];

        $('#main_mode_label').css('color', '#000');
        $toolboxDiv.first().css('display', 'block');
        $toolboxDiv.last().css('display', 'none');
        $("#icon-tool > li").removeClass("color-red");
        $(".card-icon-area").css("border-left-color", "#3258cd");
        $("#nav_").removeClass("arduino_red");
        $("#footer_").removeClass("arduino_red");

        saveLocalStorageBlocks("wifi-mode-blocks-xml");
        blockpy.components.editor.blockly.clear();
        loadLocalStorageBlocks("mc-mode-blocks-xml");
        CCB.mode = true;
    }
    CCB.socket && CCB.isOpen ? CCB.socket.emit('command', { cmd: 'close' }) : null;
    CCB.socket ? CCB.socket.emit('command', { cmd: 'list' }) : null;
    resize();
}

/**
 * Transform blocks in workspace to text.
 * @returns {String}
 */
function workspaceToText() {
    const xml = Blockly.Xml.workspaceToDom(blockpy.components.editor.blockly);
    const text = Blockly.Xml.domToText(xml);
    return text;
}

function textToWorkspace(text) {
    const xml = Blockly.Xml.textToDom(text);
    Blockly.Xml.domToWorkspace(xml, blockpy.components.editor.blockly);
    return;
}

function saveLocalStorageBlocks(name) {
    const text = workspaceToText();
    localStorage.setItem(name, text);
}

function loadLocalStorageBlocks(name) {
    // let text = localStorage.getItem(name);
    // text ? textToWorkspace(text) : '';
    // return text;
    var loadBlocks = localStorage.getItem(name);
    if (loadBlocks) {
        var xml = Blockly.Xml.textToDom(loadBlocks);
        blockpy.components.editor.setBlocksFromXml(xml);
    }
}

function getLocalStorage(name) {
    var text = localStorage.getItem(name);
    return text;
}

function saveLocalStorage(name, text) {
    localStorage.setItem(name, text);
}

/** 
 * switch section on APP Center
 * @param {Number} index section index
 */
function ACCategorySelect(index) {
    $("#center_categories >a:nth-child(" + CCB.ACCategory_index + ")").removeClass("active");
    $("#center_categories >a:nth-child(" + index + ")").addClass("active");
    var lastCate = $("#center_categories").children()[CCB.ACCategory_index - 1].name;
    var newCate = $("#center_categories").children()[index - 1].name;
    $("#" + lastCate).css("display", "none");
    $("#" + newCate).css("display", "block");
    CCB.ACCategory_index = index;

    // update tab indicator when switching between tabs

    jQuery(document).ready(function () {
        jQuery('.tabs').tabs();
    });

    window.addEventListener('orientationchange', function () {
        setTimeout(function () {
            jQuery('.tabs').tabs('updateTabIndicator');
        }, 500)
    });

    console.log("Tab updated.");
}

/** 
 * browser detect 
 */
function envDetect(e) {
    const { os, name, version } = e.data;
    $('#detect_result').css('display', 'none');
    $('#detect_before').css('display', 'block');
    $('#detect_preload').css('display', 'block');
    envDetectProcess(os, name, version)
        .then(() => {
            $('#detect_before').css('display', 'none');
            $('#detect_result').css('display', 'block');
        })
}

/** 
 * browser detect 
 * set support OS and Browser
 */
const envDetectProcess = (function () {
    const check = '<i class="material-icons small" style="color:#00cf00;">check</i>';
    const warn = '<i class="material-icons small" style="color:#ffcf00;">priority_high</i>';
    let latest = null;
    return function (os, name, version) {
        const defer = $.Deferred();
        const isOsSupport = osSupportDetect(os.family, os.version);
        const isBrowserSupport = browserDetect(name, version);
        const {
            envDetectGood,
            osSuggest,
            browserSuggest,
            pluginNetwork,
            pluginConnect,
            plutginNotOpen,
            pluginDisconnect,
            pluginSuggest
        } = CCB.str_group;
        const { pluginVersion } = CCB;

        const pluginSupportSuggest = (support, suggest) => {
            $('#env_detect_plugin > div:nth-child(3)').html(support);
            $('#env_detect_plugin > div:nth-child(4)').html(suggest);
        }

        $('#env_detect_os > div:nth-child(2)').text(os.toString());
        $('#env_detect_os > div:nth-child(3)').html(isOsSupport ? check : warn);
        $('#env_detect_os > div:nth-child(4)').text(isOsSupport ? envDetectGood : osSuggest);

        $('#env_detect_browser > div:nth-child(2)').text(`${name} ${version}`);
        $('#env_detect_browser > div:nth-child(3)').html(isBrowserSupport ? check : warn);
        $('#env_detect_browser > div:nth-child(4)').html(isBrowserSupport ? envDetectGood : browserSuggest);

        pluginLatestVer()
            // .then(data => {
            //     latest = data.releases.version
            //     if (!pluginVersion) {
            //         pluginSupportSuggest(warn, pluginDisconnect);
            //         $('#env_detect_plugin > div:nth-child(2)').text(plutginNotOpen);
            //         return defer.resolve();
            //     }
            //     $('#env_detect_plugin > div:nth-child(2)').text(`v${pluginVersion}`);
            //     if (!latest)
            //         return pluginSupportSuggest('', pluginNetwork);
            //     if (pluginVersion < latest.substring(1))
            //         pluginSupportSuggest(warn, `${pluginConnect}<br />${pluginSuggest}`);
            //     else
            //         pluginSupportSuggest(check, pluginConnect);
            //     return defer.resolve();
            // })
            // .catch(e => {
            //     e.abort()
            //     if (!pluginVersion) {
            //         pluginSupportSuggest(warn, pluginDisconnect);
            //         $('#env_detect_plugin > div:nth-child(2)').text(plutginNotOpen);
            //         return defer.resolve();
            //     }
            //     $('#env_detect_plugin > div:nth-child(2)').text(`v${pluginVersion}`);
            //     if (!latest)
            //         return pluginSupportSuggest('', pluginNetwork);
            //     if (pluginVersion < latest.substring(1))
            //         pluginSupportSuggest(warn, `${pluginConnect}<br />${pluginSuggest}`);
            //     else
            //         pluginSupportSuggest(check, pluginConnect);
            //     return defer.resolve();
            // })
            .success(data => latest = data.releases.version)
            .error(e => e.abort())
            .complete(() => {
                if (!pluginVersion) {
                    pluginSupportSuggest(warn, pluginDisconnect);
                    $('#env_detect_plugin > div:nth-child(2)').text(plutginNotOpen);
                    return defer.resolve();
                }
                $('#env_detect_plugin > div:nth-child(2)').text(`v${pluginVersion}`);
                if (!latest)
                    return pluginSupportSuggest('', pluginNetwork);
                if (pluginVersion.toString().split(".")[0] < latest.substring(1).split(".")[0]) {
                    console.log(pluginVersion);
                    console.log(latest.substring(1));
                    pluginSupportSuggest(warn, `${pluginConnect}<br />${pluginSuggest}`);
                } else if (pluginVersion.toString().split(".")[0] == latest.substring(1).split(".")[0]) {
                    if (pluginVersion.toString().split(".")[1] < latest.substring(1).split(".")[1]) {
                        console.log(pluginVersion);
                        console.log(latest.substring(1));
                        pluginSupportSuggest(warn, `${pluginConnect}<br />${pluginSuggest}`);
                    } else if (pluginVersion.toString().split(".")[1] == latest.substring(1).split(".")[1]) {
                        if (pluginVersion.toString().split(".")[2] < latest.substring(1).split(".")[2]) {
                            console.log(pluginVersion);
                            console.log(latest.substring(1));
                            pluginSupportSuggest(warn, `${pluginConnect}<br />${pluginSuggest}`);
                        } else if (pluginVersion.toString().split(".")[2] == latest.substring(1).split(".")[2]) {
                            pluginSupportSuggest(check, pluginConnect);
                        }
                    }
                }
                return defer.resolve();
            });
        return defer.promise();
    }
})();

const osSupportDetect = (function () {
    const win = {
        '10': 10,
        '10 Technical Preview': 6.4,
        '8.1': 6.3,
        '8': 6.2,
        '7': 6.1,
        'Vista': 6,
        'XP 64-bit': 5.2,
        'XP': 5.1,
        '2000 SP1': 5.01,
        '2000': 5.0,
        'NT': 4.0,
        'ME': 4.90
    };
    const mac = { int: 10, float: 9 };
    return (family, version) => {
        let result = false;
        if (family.toLowerCase().indexOf("windows") > -1) {
            win[version] >= 5.1 ? result = true : "";
        } else if (family.toLowerCase().indexOf("os x") > -1) {
            const ver = version.split(".");
            if (ver[0] > mac.int || (parseInt(ver[0]) === mac.int &&
                ver[1] >= mac.float)) {
                result = true;
            }
        }
        return result;
    }
})();

function browserDetect(name, version) {
    let result = false;
    const versionParse = (sep, ver) => {
        const arr = version.split(sep);
        return arr[0] > ver;
    }
    if (name === "Chrome") {
        result = versionParse('.', 50);
    } else if (name === "Firefox") {
        result = versionParse('.', 50);
    } else if (name === "Opera") {
        result = versionParse('.', 43);
    } else if (name === 'Safari') {
        result = versionParse('.', 10);
    } else if (name === 'Maxthon') {
        result = versionParse('.', 4);
    }
    return result;
}

/** 
 * get latest version info of uploader from github
 */
function pluginLatestVer() {
    // $.ajax(`${CCB.base_url}releases/pythonuploaderv0.1`, {
    //     type: 'GET',
    //     xhrFields: { withCredentials: true }
    // }).then(res => {
    //     console.log(res, '1111111111')
    // }).catch(err => {
    //     console.log(err, '2222222222222')
    // })
    return $.ajax(`${CCB.base_url}releases/pythonuploaderv0.1`, {
        type: 'GET',
        xhrFields: { withCredentials: true }
    });
}

/**
 * possMessage listener
 */
window.addEventListener('message', e => {
    const data = e.data;
    if (typeof (data) === 'object' && data.id === "asIframe" && data.status) {
        CCB.asIframe = true;
        let { mcXml, wfXml } = data;
        mcXml ? localStorage.setItem('mc-mode-blocks-xml', mcXml) : '';
        wfXml ? localStorage.setItem('wifi-mode-blocks-xml', wfXml) : '';
    }
});


/**
 * bind eventListener when page load
 */
async function cocoblockly() {

    //$(".se-pre-con").fadeOut("slow");
    Ardublockly.init();

    //window.parent.postMessage({ id: 'windowLoad', status: 'onload' }, '*');

    let jsonData = await getJsonData('./data.json');
    CCB.str_group = jsonData.translation[CCB.lang];
    CCB.examplesMap = jsonData.examples;
    document.getElementById('ConnectBtn').innerHTML = CCB.str_group.connect;
    //document.getElementById('ConnectBtn').innerHTML = CCB.str_group.connect;
    // document.getElementById('resetDevice').innerText = CCB.str_group.reset_device;
    // document.getElementById('runCode').innerText = CCB.str_group.run_code;
    document.getElementById('ipAddress').placeholder = CCB.str_group.ipAddress;
    //document.getElementById('ipAddress').value = CCB.str_group.select_device;
    // document.getElementById('ipAddress').placeholder = CCB.str_group.select_device;
    document.getElementById('select-connected').children[0].innerHTML = CCB.str_group.select_connected_Wired;
    document.getElementById('select-connected').children[1].innerHTML = CCB.str_group.select_connected_Wireless;
    document.getElementById("Wired").innerHTML = CCB.str_group.select_connected_Wired;
    document.getElementById('Wireless').innerHTML = CCB.str_group.select_connected_Wireless;
    const progressAnimate = progress_bar();
    if (CCB.lang == 'en') {
        // for (var i = 0; i < $('.Hardware2').length - 1; i++) {
        //     $('.HarxA')[i].className = 'Hardware2 HarxA max'
        // }
        $("#python_SourceCode")[0].style.marginLeft = '0px';
        // $("#repl_delete")[0].style.left = '310px'
    } else {
        // for (var i = 0; i < $('.Hardware2').length - 1; i++) {
        //     $('.HarxA')[i].className = 'Hardware2 HarxA'
        // }
        $("#python_SourceCode")[0].style.marginLeft = '0px';
        // $("#repl_delete")[0].style.left = '260px'
    }
    // (function() {
    //     const { name } = platform;
    //     if (name === 'Firefox' || name === 'Chrome' || name === 'Opera') {
    //         CCB.ws_url = 'http://127.0.0.1';
    //     }
    // })();

    // $('#\\:0').on('touchstart', Ardublockly.bindTouchMove);
    // $('#\\:26').on('touchstart', Ardublockly.bindTouchMove);


    let hide_timer = null;
    let tooltips = [
        { selector: "#cnt_icon", delay: 50, position: "top", tooltip: CCB.str_group.connect_tooltip },
        { selector: "#discnt_icon", delay: 50, position: "top", tooltip: CCB.str_group.disconnect_tooltip },
        { selector: "#code-copy", delay: 500, position: "bottom", tooltip: CCB.str_group.code_copy_tooltip },
        { selector: '#code-download', delay: 500, position: 'bottom', tooltip: CCB.str_group.code_download_tooltip },
        // { selector: '#plugin_download', delay: 1000, position: 'right', tooltip: CCB.str_group.plugin_download_tooltip },
        { selector: '#uploader>.code-header>a.upload_instruction', delay: 500, position: 'top', tooltip: CCB.str_group.upload_instruction_tooltip },
        { selector: '#icon-tool > li:first-child', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_1 },
        { selector: '#icon-tool>li:nth-child(2)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_2 },
        { selector: '#icon-tool>li:nth-child(3)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_3 },
        { selector: '#icon-tool>li:nth-child(4)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_4 },
        { selector: '#icon-tool>li:nth-child(5)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_5 },
        { selector: '#icon-tool>li:nth-child(6)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_6 },
        { selector: '#icon-tool>li:nth-child(7)', delay: 1000, position: 'left', tooltip: CCB.str_group.icon_tool_7 },
        { selector: '#back_home', delay: 200, position: 'bottom', tooltip: CCB.str_group.back_home },
        { selector: '#nav_devices', delay: 200, position: 'bottom', tooltip: CCB.str_group.nav_devices },
        //{ selector: '#nav_journal', delay: 200, position: 'bottom', tooltip: CCB.str_group.nav_journal },
        // { selector: '#nav_language', delay: 200, position: 'bottom', tooltip: CCB.str_group.nav_language },
        // { selector: '#local_connect', delay: 200, position: 'bottom', tooltip: CCB.str_group.Connect },
        // { selector: '#local_storage', delay: 200, position: 'bottom', tooltip: CCB.str_group.local_storage },
        // { selector: '#help', delay: 200, position: 'bottom', tooltip: CCB.str_group.help },
        { selector: '#button_delete', delay: 200, position: 'bottom', tooltip: CCB.str_group.button_delete },
        { selector: '#workspace_screenshot', delay: 200, position: 'bottom', tooltip: CCB.str_group.workspace_screenshot },
        { selector: '#nav_account', delay: 200, position: 'bottom', tooltip: CCB.str_group.nav_account },
        { selector: '#update_Coevent', delay: 500, position: 'bottom', tooltip: CCB.str_group.update_Coevent_tooltip },
        { selector: '#apikey-copy', delay: 500, position: 'bottom', tooltip: CCB.str_group.apikey_copy_tooltip },
        { selector: '#uploader-relaunch-btn', delay: 500, position: 'top', tooltip: CCB.str_group.uploader_relaunch_tooltip },
        { selector: '.cloudBtn-open', delay: 500, position: 'top', tooltip: CCB.str_group.cloudFileOpenMsg },
        { selector: '.cloudBtn-update', delay: 500, position: 'top', tooltip: CCB.str_group.cloudFileSaveMsg },
        { selector: '.cloudBtn-rename', delay: 500, position: 'top', tooltip: CCB.str_group.cloudFileEditMsg },
        { selector: '.cloudBtn-delete', delay: 500, position: 'top', tooltip: CCB.str_group.cloudFileDeleteMsg },
        { selector: '#runCode', delay: 500, position: 'top', tooltip: CCB.str_group.runCode },
        { selector: '#uploadFiles', delay: 500, position: 'top', tooltip: CCB.str_group.uploadFiles },
        // { selector: '#editDiv', delay: 200, position: 'bottom', tooltip: CCB.str_group.close_editing },
        { selector: '#cloudBtn-shares', delay: 500, position: 'bottom', tooltip: CCB.str_group.cloudShares },
        { selector: '#fullscreenIcon', delay: 500, position: 'bottom', tooltip: CCB.str_group.fullscreen },
        { selector: '#fullscreenExitIcon', delay: 500, position: 'bottom', tooltip: CCB.str_group.fullscreenExit },
        { selector: '#edit-off', delay: 500, position: 'bottom', tooltip: CCB.str_group.editing },
        { selector: '#edit-on', delay: 500, position: 'bottom', tooltip: CCB.str_group.close_editing },
        { selector: '#copy_code_view', delay: 500, position: 'bottom', tooltip: CCB.str_group.copy_code },
        { selector: '#blockpy-toolbar-upload', delay: 500, position: 'bottom', tooltip: CCB.str_group.blockpy_toolbar_upload },
        { selector: '#blockpy-toolbar-download', delay: 500, position: 'bottom', tooltip: CCB.str_group.blockpy_toolbar_download },
        { selector: '#repl_delete', delay: 500, position: 'bottom', tooltip: CCB.str_group.repl_delete },
        { selector: '#refresh', delay: 500, position: 'bottom', tooltip: CCB.str_group.reset_device }
    ];
    // /* ************ ajax request - begin ************ */
    // // -------- get latest uploader version from release -------- //
    // $.ajax(`${CCB.base_url}releases/pythonuploaderv0.1`, {
    //     type: 'GET',
    //     xhrFields: { withCredentials: true },
    //     success: res => {
    //         eproxy.emit('latest_ver', res.releases.version.substring(1, res.releases.version.length));
    //     }
    // });
    /* ************ ajax request - end ************ */

    /* ************ set event proxy listeners - beigin ************ */
    eproxy.tail('download_opts', trig => {
        if (trig === true) {
            if (hide_timer) {
                clearTimeout(hide_timer);
                hide_timer = null;
            } else
                $('.plugin_options').addClass('options_active').removeClass('options_hide');
        } else
            hide_timer = setTimeout(() => {
                $('.plugin_options').addClass('options_hide').removeClass('options_active');
                hide_timer = null;
            }, 500);
    });
    eproxy.tail('wsreconn', () => ws_connect());
    eproxy.tail('wsconned', ws => ws_conned(ws));
    eproxy.tail('wsconn', data => eproxy.emit('wsconned', data));

    eproxy.tail('ver', (ver, latest) => {
        if (ver < latest) {
            if (ver == "0.0.0") {
                $('#uploader_currentVersion').html(CCB.str_group.out_date);
                document.getElementById('uploader_content_update').style = "display:none";
                document.getElementById('uploader_content_redownload').style = "display:block";
            }
            else {
                $('#uploader_currentVersion').html(ver);
                document.getElementById('uploader_content_update').style = "display:block";
                document.getElementById('uploader_content_redownload').style = "display:none";
            }
            $('#uploader_newVersion').html(latest);
            $('#uploader_reminder').modal('open');
        }
    });

    eproxy.tail('latest_ver', (ver, latest) => {
        if (ver < latest) {
            if (ver == "0.0.0") {
                $('#uploader_currentVersion').html(CCB.str_group.out_date);
                document.getElementById('uploader_content_update').style = "display:none";
                document.getElementById('uploader_content_redownload').style = "display:block";
            } else {
                $('#uploader_currentVersion').html(ver);
                document.getElementById('uploader_content_update').style = "display:block";
                document.getElementById('uploader_content_redownload').style = "display:none";
            }
            $('#uploader_newVersion').html(latest);
            $('#uploader_reminder').modal('open');
        }
    });

    eproxy.on('progress-start', type => {
        if (type === 'compile') {
            const { compiling, compile_slow } = CCB.str_group;
            progress_text(compiling, '0%');
            progress.toast_timer = setTimeout(
                () => Materialize.toast(compile_slow, 20000), 10000);
        } else if (type === 'upload') {
            progress_text(CCB.str_group.uploading, '0%');
        }
        add_disabled('#compile-btn', '#upload-btn', '#comms-cnt');
        progressAnimate(true);
    });
    eproxy.on('progress-response', type => {
        let percent = '0%',
            text = null;
        const { str_group } = CCB;
        const types = type.split('-');
        progressAnimate(false);
        try {
            Materialize.Toast.removeAll();
        } catch (e) { }
        $('#ports').val() != "null" ? rm_disabled('#compile-btn', '#upload-btn', '#comms-cnt') : rm_disabled('#compile-btn');
        disableCompileUploadBtn();
        if (types[0] === 'compile') {
            clearTimeout(progress.toast_timer);
            progress.toast_timer = null;
            if (types[1] === 'success') {
                percent = '100%';
                text = str_group.compile_success;
            } else if (types[1] === 'error') {
                text = str_group.compile_fail;
            } else if (types[1] === 'timeout') {
                text = str_group.compile_timeout;
            } else if (types[1] === 'offline') {
                text = str_group.compile_offline;
            }
        } else if (types[0] === 'upload') {
            if (types[1] === 'success') {
                percent = '100%';
                text = str_group.upload_success;
            }
            else if (types[1] === 'error') {
                text = str_group.upload_fail;
            }
        }
        CCB.status = 'idle';
        progress_text(text, percent);
    });
    eproxy.on('progress-break', () => {
        progress_text(CCB.str_group.auto_relaunch, '0%');
        CCB.reupload = true;
    });
    eproxy.on('progress-init', () => {
        const { xhr } = progress;
        xhr ? xhr.abort() : '';
        progressAnimate(false)
        progress_text(CCB.str_group.upload_area_init, '0%');
        $('#error-btn').css('display', 'none');
        $('#err-msg').text('');
    });
    /* ************ set event proxy listeners - end ************ */

    /* -------- set toolbox tree_ control from wifi's to main control's -------- */
    // let tree_temp = blockpy.components.editor.blockly.toolbox_.tree_;
    // blockpy.components.editor.blockly.toolbox_.tree_ = blockpy.components.editor.blockly.toolbox_.tree_old_;
    // blockpy.components.editor.blockly.toolbox_.tree_old_ = tree_temp;

    // setTimeout(() => {
    //     // load blocks from local storage
    //     loadLocalStorageBlocks("mc-mode-blocks-xml");
    //     if (!CCB.asIframe) {
    //         // switch mode based on mode-state in local storage
    //         let mode_storage = localStorage.getItem("blockly_mode_storage");
    //         (mode_storage && mode_storage == "false") ? $("#network-btn").click() : null;
    //     }

    // }, 1000);

    /* -------- init '#ports' select element -------- */
    $('#ports')
        .empty()
        .append(create_opts(CCB.str_group.no_port_option, null, true))
        .material_select();

    /* -------- show/hide plugin download options -------- */
    $('#plugin_download').hover(
        () => eproxy.emit('download_opts', true),
        () => eproxy.emit('download_opts', false)
    );
    $('.plugin_options').hover(
        () => eproxy.emit('download_opts', true),
        () => eproxy.emit('download_opts', false)
    );

    /* -------- show/hide side bar buttons & side languages selection -------- */
    $('#icon-tool > li:nth-child(4)').click(() => {
        if ($('#side-lang').css('display') === 'none') {
            $('#icon-tool > li:nth-child(4)').addClass('active');
            $('#side-lang-trigger').click();
            setTimeout(() => $(document).on('click', sideLangClose), 0);
        }
    });
    // 点击切换语言
    // $('#icon-tool > li:nth-child(4)').click(function (e) {
    //   $('#languages').addClass('active');
    //   $('#languages').css({ display: 'block', opacity: 1, position: 'absolute' })
    //   var ev = e || window.event;
    //   if (ev.stopPropagation) {	//阻止冒泡，否则会触发点击空白区域的事件
    //     ev.stopPropagation();
    //   } else if (window.event) {
    //     window.event.cancelBubble = true;//兼容IE
    //   }
    // })
    $('#icon-tool > li:nth-child(6)').click(() => {
        if ($('#side-storage').css('display') === 'none') {
            $('#icon-tool > li:nth-child(6)').addClass('active');
            $('#side-storage-trigger').click();
            setTimeout(() => $(document).on('click', sideStorageClose), 0);
        }
    });
    $('#icon-tool').hover(
        () => $('#icon-tool').addClass('hover'),
        () => $('#side-lang').css('display') === 'none' ? $('#icon-tool').removeClass('hover') : '',
        () => $('#side-storage').css('display') === 'none' ? $('#icon-tool').removeClass('hover') : ''
    );

    function sideLangClose(e) {
        $(document).off('click', sideLangClose);
        $('#icon-tool > li:nth-child(4)').removeClass('active');
        if (!(e.target.id === 'lang-tool' ||
            (e.target.parentNode && e.target.parentNode.id === 'lang-tool'))) {
            $('#icon-tool').removeClass('hover');
        }
    }

    function sideStorageClose(e) {
        $(document).off('click', sideStorageClose);
        $('#icon-tool > li:nth-child(6)').removeClass('active');
        if (!(e.target.id === 'bar_storage' ||
            (e.target.parentNode && e.target.parentNode.id === 'bar_storage'))) {
            $('#icon-tool').removeClass('hover');
        }
    }

    // -------- close reminder modal -------- //
    $('#reminder_close').on("click", () => $("#uploader_reminder").modal("close"));

    // -------- add plugin download link -------- //
    // if (platform.os.family.toLowerCase().indexOf('mac') > -1)
    //     $('#plugin_download').attr('href', 'http://api.cocorobo.cn/releases/pythonuploaderv0.1/download/mac');
    // else if (platform.os.family.toLowerCase().indexOf('windows') > -1)
    //     $('#plugin_download').attr('href', 'http://api.cocorobo.cn/releases/pythonuploaderv0.1/download/windows');


    // -------- download arduino source code  -------- //
    $('#code-download').on("click", () => export_data($("#content_arduino").text(), '.ino', platform.name.toLowerCase().indexOf('firefox') > -1));

    // -------- clear serial monitor's output  -------- //
    $('#comms-clear').on("click", () => $('#commsBox').val(''));

    // -------- call function of modal to export file-------- //
    $('#modal-export-confirm-btn').on('click', () => {
        let cdata = document.getElementById('commsBox').value;
        cdata = cdata.replace(/([^\r])\n/g, "$1\r\n");
        export_data(cdata, `.${document.getElementById('export-file-type').value}`, platform.name.toLowerCase().indexOf('firefox') > -1);
    });

    // -------- AJAX to call server's compile function -------- //
    $('#compile-btn').on('click', () => {
        $('#error-btn').css('display') !== 'none' ? $('#error-btn').css('display', 'none') : null;
        let board = $('#network-btn').prop('checked') ? 'esp8266:esp8266:nodemcuv2' : 'arduino:avr:leonardo';
        let code = $('#content_arduino').text();
        CCB.status = 'busy-compile';
        compile_request(board, code).always(() => CCB.status = 'idle');
    });

    // -------- bind functions to tourmode modal -------- //
    $('#tourmode > div.modal-footer > a').on('click', () => {
        blockpy.components.editor.blockly.toolbox_.tree_.collapseAll();
        document.getElementsByClassName('slick-track')[0].setAttribute("style", "opacity: 1; width: 95000px; transform: translate3d(-790px, 0px, 0px);");
        $('.slick-dots>li')[0].click();
        $('#tour_slider_modal').modal('open');
    });
    $('#tour_modal_close').on('click', () => $('#tour_slider_modal').modal('close'));

    $('#detect-btn').on('click', platform, envDetect);

    // add_project_btn();
    bind_open_example("#\\:l>div:last-child", CCB.examplesMap);
    bind_open_example("#\\:2o>div:last-child", CCB.examplesMap);
    clipboard_copy("#err-copy", "#apikey-copy", "#code-copy");
    add_tooltips(tooltips);
    ws_connect();

    getlxfiles(0,getFileList);
};


// $(window).one("beforeunload", () => {
//     localStorage.setItem("blockly_mode_storage", CCB.mode);
//     if (CCB.mode) {
//         saveLocalStorageBlocks("pythonmc-mode-blocks-xml");
//     } else {
//         saveLocalStorageBlocks("pythonai-mode-blocks-xml");
//         //restore network-btn to main_control mode before unload
//         document.getElementById("network-btn").click();
//     }
//     if (CCB.asIframe) {
//         window.parent.postMessage({
//             id: 'blocksSave',
//             mcXml: localStorage.getItem('mc-mode-blocks-xml'),
//             wfXml: localStorage.getItem('wifi-mode-blocks-xml')
//         }, '*');
//         localStorage.removeItem('mc-mode-blocks-xml');
//         localStorage.removeItem('wifi-mode-blocks-xml');
//     }
//     deleteCompilerCache();
// });