update

cocoblockly.css

@@ -1632,12 +1632,23 @@ nav ul li {
     font-family: "微软雅黑";
 }
 
+#local_help_ai span,#local_help_extends span,#local_help_error span {
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
 #plugin_download:hover span,#button_upgrade_firmware:hover span,#button_connection_type:hover span{
     background-color: #fff;
     color: #4A6AFF;
     font-family: "微软雅黑";
 }
 
+#local_help_ai:hover span,#local_help_extends:hover span,#local_help_error:hover span {
+    background-color: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
 .sketch_name::-webkit-input-placeholder{
     color:#CACACA;
 }

index.css

@@ -1126,7 +1126,11 @@ table td, th {
 
 .fileEnglish {
     width: 185px !important
- }
+}
+
+.helpEnglish {
+    width: 240px !important
+}
 
  .blue{
     background-color: #4A6AFF !important;
@@ -1135,4 +1139,68 @@ table td, th {
  .green {
     background-color: #24AF00 !important;
  }
+
+ #plugin_mac_or_windows,#connect_method,#local_help_ai_kit, #help_extends{
+    background-color: #fff;
+    margin: 0;
+    min-width: 137px;
+    max-height: 650px;
+    overflow-y: auto;
+    opacity: 0;
+    z-index: 999;
+ }
+
+ #plugin_mac_or_windows li,#connect_method li,#local_help_ai_kit li, #help_extends li{
+    clear: both;
+    color: rgba(0,0,0,0.87);
+    cursor: pointer;
+    min-height: 50px;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+}
+
+
+#plugin_mac_or_windows #Mac span, #plugin_mac_or_windows #Windows span, #connect_method #select_connecteds span, #connect_method #no_select_connecteds span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#local_help_ai_kit #ai_kit_0 span, #local_help_ai_kit #ai_kit_1 span, #local_help_ai_kit #ai_kit_2 span, #local_help_ai_kit #ai_kit_3 span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#help_extends #extends_0 span,#help_extends #extends_1 span,#help_extends #extends_2 span {
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#plugin_mac_or_windows #Mac:hover span, #plugin_mac_or_windows #Windows:hover span, 
+#connect_method #select_connecteds:hover span, #connect_method #no_select_connecteds:hover span {
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#local_help_ai_kit #ai_kit_0:hover span, #local_help_ai_kit #ai_kit_1:hover span, #local_help_ai_kit #ai_kit_2:hover span, #local_help_ai_kit #ai_kit_3:hover span{
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#help_extends #extends_0:hover span,#help_extends #extends_1:hover span,#help_extends #extends_2:hover span {
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#Mac img, #Windows img{
+    width: 25px;
+    height: 25px;
+    margin-right: 5px;
+    transform: translateY(5px);
+}
+
+
  

index.html

@@ -239,27 +239,82 @@
                         <ul id='local_connect_select' class='dropdown-content' style="top:62px">
                             <li id="plugin_download" href="javaScript:(0)">
                                 <span class="translatable_download_uploader">下载安装程序</span>
+                                <ul id="plugin_mac_or_windows" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 320px; top: 64px;">
+                                    <li id="Mac" href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.10.pkg"
+                                        target="_black">
+                                        <span><img src="./icons/mac-icon.png">Mac</span>
+                                    </li>
+                                    <li id="Windows"
+                                        href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
+                                        target="_black">
+                                        <span><img src="./icons/windows-icon.png">Windows</span>
+                                    </li>
+                                </ul>
                             </li>
                             <li id="button_upgrade_firmware">
                                 <span class="translatable_upgrade_firmware">固件升级</span>
                             </li>
                             <li id="button_connection_type">
                                 <span class="translatable_connect_method">连接方式</span>
+                                <ul id="connect_method" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 320px; top: 170px;">
+                                    <li id="select_connecteds" style="text-align: center;"
+                                        onclick="selectConnectMethods(0)">
+                                        <span id="Wired" class="translatable_select_connecteds">有线上传</span>
+                                    </li>
+                                    <li id="no_select_connecteds" style="text-align: center;"
+                                        onclick="selectConnectMethods(1)">
+                                        <span id="Wireless" class="translatable_no_select_connecteds">无线上传</span>
+                                    </li>
+                                </ul>
                             </li>
                         </ul>
                     </li>
 
-
                     <li style="display: block;">
-                        <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
+                        <a id="help" class='dropdown-button lang_resize' data-activates='local_help'
                             style="position:relative;padding: 0 25px;">
                             <span class="translatable_help_board">帮助</span>
-
                         </a>
-                        <!-- <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
-                            <span class="translatable_devices">Devices</span>
-                            <img class="left nav-icon" src="./icons/Devices.png">
-                        </a> -->
+                        <ul id='local_help' class='dropdown-content' style="top:62px">
+                            <li id="local_help_ai">
+                                <span class="translatable_ai_kit">AI Kit</span>
+                                <ul id="local_help_ai_kit" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 398px; top: 64px;">
+                                    <li id="ai_kit_0" href="//x-help.cocorobo.hk/#/aikit/AI_1" target="_black">
+                                        <span class="translatable_ai_kit_0">Mac</span>
+                                    </li>
+                                    <li id="ai_kit_1" href="//x-help.cocorobo.hk/#/aikit/AI_2" target="_black">
+                                        <span class="translatable_ai_kit_1">Windows</span>
+                                    </li>
+                                    <li id="ai_kit_2" href="//x-help.cocorobo.hk/#/aikit/AI_3" target="_black">
+                                        <span class="translatable_ai_kit_2">Windows</span>
+                                    </li>
+                                    <li id="ai_kit_3" href="//x-help.cocorobo.hk/#/aikit/AI_4" target="_black">
+                                        <span class="translatable_ai_kit_3">Windows</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="local_help_extends">
+                                <span class="translatable_extends">拓展转接模组</span>
+                                <ul id="help_extends" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 398px; top: 120px;">
+                                    <li id="extends_0" href="//x-help.cocorobo.hk/#/extension/EX_01" target="_black">
+                                        <span class="translatable_extends_0">Mac</span>
+                                    </li>
+                                    <li id="extends_1" href="//x-help.cocorobo.hk/#/extension/EX_02" target="_black">
+                                        <span class="translatable_extends_1">Windows</span>
+                                    </li>
+                                    <li id="extends_2" href="//x-help.cocorobo.hk/#/extension/EX_03" target="_black">
+                                        <span class="translatable_extends_2">Windows</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="local_help_error" href="//x-help.cocorobo.cn/#/aikit/A0">
+                                <span class="translatable_error">常见错误处理</span>
+                            </li>
+                        </ul>
                     </li>
 
 
@@ -269,7 +324,7 @@
                                 class="selectMode_input browser-default"
                                 style="font-size: 0.9rem;border: none;width: 130px;">
                             <i class="down" style="position: relative;top: -20px;float: right;"></i>
-                            <div class="downbox MouduleBox" id="downboxModule">
+                            <div class="downbox MouduleBox" id="downboxModule" style="top: 64px;">
                                 <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
                                         class="translatable_ai_module">A.I. Module</a></div>
                                 <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
@@ -913,7 +968,8 @@
                             </div>
                             <div class='blockpy-content-left card-panel card'
                                 style='display: block;background: #f8f8f8;min-height: 245px;position:relative;'>
-                                <div class="card-header" style='height: 60px;line-height: 60px;background: #f1f2f5;'>
+                                <div class="card-header"
+                                    style='height: 60px;line-height: 60px;background: #f1f2f5;text-align: center;'>
                                     <!-- http://help.cocorobo.cn/#/getting-started/info target="_blank"-->
                                     <div style='float:right;display: none;'>
                                         <a class="header-link upload_instruction" style="display: none;" href="#"
@@ -940,9 +996,9 @@
                                     </div>
                                     <!--<span class="header-icon"><img style="width: 30px;margin: 8px 8px 8px 20px;" src="./images/zhixing.png"> </span>-->
                                     <span class="header-text translate-code translatable_title_device"
-                                        style='font-weight: 800;font-size: 20px;margin-left: 25px;'>Device</span>
-                                    <div style="display: inline-block;margin-left: 20px;"><select
-                                            class="select-connected " id="select-connected">
+                                        style='font-weight: 800;font-size: 20px;margin-left: 25px;display: none;'>Device</span>
+                                    <div style="display: none;margin-left: 20px;"><select class="select-connected "
+                                            id="select-connected">
                                             <option class="select-connected translatable_select_connecteds"
                                                 style="color: #000;">The
                                                 cable to upload</option>
@@ -950,49 +1006,87 @@
                                                 Wireless cable
                                                 upload</option>
                                         </select></div>
-                                    <div id="discnt_icon" style="display:inline-block;">
+                                    <!-- <div id="discnt_icon" style="display:none;">
                                         <a href="#env_detect" class="modal-trigger"><img
                                                 style="height:17px;margin-left:8px;transform:translateY(2px);"
                                                 src="./icons/uploader_disconnect.png"></a>
                                     </div>
                                     <div id="cnt_icon" style="display:none;"><img
                                             style="height:17px;margin-left:8px;transform:translateY(2px);"
-                                            src="./icons/uploader_connect.png"></div>
+                                            src="./icons/uploader_connect.png"></div> -->
+
+                                    <span id="device_connect_status" class="translatable_device_no_connect"
+                                        style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;">硬件（未连接）</span>
 
                                     <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
-                                    waves-light blue  disabled" style="margin-right:0.5rem;background-color: #f1f2f5 !important;float: right;margin-top: 10px;">
-                                            <!-- <span id="resetDevice">Reset Device</span> -->
-                                        
-                                        <img id="refresh-disabled" src="./images/icon-refresh-disabled.svg" style="margin-top: 7px;display: block;">
-                                        <img id="refresh" src="./images/icon-refresh.svg" style="margin-top: 7px;display: none;">
-                                        <img id="refresh-press" src="./images/icon-refresh-press.svg" style="margin-top: 7px;display: none;">
+                                    waves-light blue  disabled"
+                                        style="margin-right:0.5rem;background-color: #f1f2f5 !important;float: right;margin-top: 10px;">
+                                        <!-- <span id="resetDevice">Reset Device</span> -->
+
+                                        <img id="refresh-disabled" src="./images/icon-refresh-disabled.svg"
+                                            style="margin-top: 7px;display: block;">
+                                        <img id="refresh" src="./images/icon-refresh.svg"
+                                            style="margin-top: 7px;display: none;">
+                                        <img id="refresh-press" src="./images/icon-refresh-press.svg"
+                                            style="margin-top: 7px;display: none;">
                                     </a>
                                 </div>
                                 <!--<div class="card-header">                    <span class="header-icon" style="line-height:40px;"><img style="height:30px;vertical-align:middle;" src="./images/icon-aspect.svg"></span>                    <span class="header-text translate-output">Output Area</span>                    <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">                </div>-->
                                 <!--<div class="card-content" style="display:block;grid-template-rows:1fr 50px;">                    <div style="border-bottom:1px solid #ddd;padding:8px;overflow:hidden;">                   <div style="height:100%;overflow:hidden;">                            <div class='blockpy-printer blockpy-printer-default' style="resize:none;height:98%;width:100%;border:1px solid #818181;">                            </div>                        </div>                   </div>-->
                                 <div class="card-content" style="padding:8px 10px;width:100%">
-                                    <div class="row" id="status">
+                                    <div class="row" id="status" style="display: none;">
                                         <div class="col s12"><img id="error-btn" class="activator"
                                                 src="./icons/error.png">
                                             <span id="status_bar" class="translatable_statusbar">直接将代码上传到电子模块中。</span>
                                         </div>
                                     </div>
-                                    <div class="row" id="progress">
-                                        <div class="col s12">
-                                            <div class="progress" style="margin:7px 0;">
-                                                <div class="determinate green" style="width:0%;"></div>
+
+                                    <div class="row" style="width: 100%;margin: 0;margin-top: 20px;">
+                                        <div id="uploader-btns" class="col s6">
+                                            <a onclick='sendfile();' id="send_file" class="waves-effect
+                                                    waves-light btn blue disabled"
+                                                style="margin-right:0.5rem;padding:0 0.5rem;">
+                                                <i style="cursor: pointer;" class="fa fa-play-circle"
+                                                    aria-hidden="true"></i>
+                                                <span id="runCode"></span>
+                                            </a>
+                                            <a onclick="uploadpyfile()" id="uploadpy" class="waves-effect
+                                            waves-light btn blue disabled" style="padding:0 0.5rem;">
+                                                <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i>
+                                                <span id="uploadFiles"></span>
+                                            </a>
+                                            <div style="float: right;">
+                                                <li style="display: none;">
+                                                    <ul id="localsssssaveOrOpen" class="dropdown-content active">
+                                                        <li style="padding: 14px 16px;" onclick="uploadfile(true)">
+                                                            <a>开机启动可视化菜单界面</a></li>
+                                                        <li style="padding: 14px 16px;" onclick="uploadfile(false)">
+                                                            <a>开机运行上次的程序</a></li>
+                                                    </ul>
+                                                    <a id="qiehuanbtn"
+                                                        class="qiehuanbtn btn dropdown-trigger blue lang_resize dropdown-button disabled"
+                                                        data-activates="localsssssaveOrOpen"><span
+                                                            id="runCuploadFilesode">更换启动模式</span><i
+                                                            class="material-icons right"
+                                                            style="margin-left: 0;">arrow_drop_down</i></a>
+                                                </li>
+                                                <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
+                                                    waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
+                                                        id="resetDevice">Reset Device</span></a> -->
                                             </div>
                                         </div>
-                                    </div>
-                                    <div class="row btn-network">
-                                        <div class="col s6" style="padding-right:1px;">
+                                        <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
+                                            style="display:none"><span id="gettype">Upload
+                                                files</span></a>
+
+                                        <div class="col s6 btn-network" style="padding-right:1px;">
                                             <div class="select-wrapper initialized"><span class="caret">▼</span><input
                                                     type="text" class="select-dropdown" id="select_dropdown"
                                                     readonly="true"
                                                     data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
                                                     value="检测不到连接端口">
                                                 <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
-                                                        select-dropdown ">
+                                                                select-dropdown ">
                                                     <li class="disabled "><span>检测不到连接端口</span></li>
                                                 </ul><select id="ports"
                                                     data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
@@ -1001,22 +1095,9 @@
                                                 </select>
                                             </div>
                                         </div>
-                                        <div class="col s6">
-                                            <div style="float: right;margin-top: 15px;">
-                                                <div style="display: inline-block;vertical-align: middle;">
-                                                    <img id="runSuccess" src="/images/success.png" style="display: none;"/>
-                                                    <img id="runFail" src="/images/fail.png" style="display: none;"/>
-                                                </div>
-                                                <div style="display: inline-block;">
-                                                    <span id="statusMsg"></span>
-                                                </div>
-                                                
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row btn-network hidden">
-                                        <div class="col cs6" style="padding-right:1px;width:100%">
-                                            <div class="select-wrapper initialized" style='float: left;width: 45%;'>
+
+                                        <div class="col cs6 btn-network hidden" style="padding-right:1px;width: 50%;">
+                                            <div class="select-wrapper initialized" style='width: 61%;float: left;'>
                                                 <input type="text" class="select-dropdown" data-activates=""
                                                     id='ipAddress' placeholder="请输入ip地址">
                                             </div>
@@ -1026,8 +1107,27 @@
                                                         </spanbutton_click></a></div>
                                         </div>
                                     </div>
-                                    <div class="row" style="position: absolute;bottom: 15px;width: 98%;margin: 0;">
-                                        <div id="uploader-btns" class="col s12">
+
+                                    <!-- <div class="row btn-network">
+                                        <div class="col s6" style="padding-right:1px;">
+                                            <div class="select-wrapper initialized"><span class="caret">▼</span><input
+                                                    type="text" class="select-dropdown" id="select_dropdown"
+                                                    readonly="true"
+                                                    data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
+                                                    value="检测不到连接端口">
+                                                <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
+                                                        select-dropdown ">
+                                                    <li class="disabled "><span>检测不到连接端口</span></li>
+                                                </ul><select id="ports"
+                                                    data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
+                                                    class="initialized">
+                                                    <option value="null" disabled="">检测不到连接端口</option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div> -->
+                                    <!-- <div class="row btn-network hidden">
+                                        <div id="uploader-btns" class="col s6">
                                             <a onclick='sendfile();' id="send_file" class="waves-effect
                                                     waves-light btn blue disabled"
                                                 style="margin-right:0.5rem;padding:0 0.5rem;">
@@ -1055,14 +1155,40 @@
                                                             class="material-icons right"
                                                             style="margin-left: 0;">arrow_drop_down</i></a>
                                                 </li>
-                                                <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
+                                                <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
                                                     waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
-                                                        id="resetDevice">Reset Device</span></a> -->
+                                                        id="resetDevice">Reset Device</span></a>
                                             </div>
                                         </div>
                                         <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
                                             style="display:none"><span id="gettype">Upload
                                                 files</span></a>
+
+                                        
+                                    </div> -->
+
+                                    <div class="row" id="progress" style="margin-top: 30px;">
+                                        <div class="col s12">
+                                            <div class="progress" style="margin:7px 0;">
+                                                <div class="determinate green" style="width:0%;"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col s6" style="float: right;">
+                                            <div style="float: right;margin-top: 15px;">
+                                                <div style="display: inline-block;vertical-align: middle;">
+                                                    <img id="runSuccess" src="/images/success.png"
+                                                        style="display: none;" />
+                                                    <img id="runFail" src="/images/fail.png" style="display: none;" />
+                                                </div>
+                                                <div style="display: inline-block;">
+                                                    <span id="statusMsg"></span>
+                                                </div>
+
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
@@ -1103,7 +1229,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="card plugin_options options_hide">
+                            <!-- <div class="card plugin_options options_hide">
                                 <div class="card-content">
                                     <div>
                                         <span id="downloadver" style="display:none">1.0.6</span>
@@ -1114,7 +1240,7 @@
                                             href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
                                             target="_black"><img src="./icons/windows-icon.png">Windows </a> </div>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </div>

index.js

@@ -281,6 +281,33 @@ $(window).one("load", () => {
 
   // 点击复制分享链接
   copyShare()
+
+  $("#local_connect_select li").bind({
+    mouseover: function () {
+      $(this).children("ul").toggle();
+      $("#plugin_mac_or_windows").css("opacity", "1");
+      $("#connect_method").css("opacity", "1");
+    },
+    mouseout: function () {
+      $(this).children("ul").toggle();
+      $("#plugin_mac_or_windows").css("opacity", "0");
+      $("#connect_method").css("opacity", "0");
+    }
+  });
+
+  $("#local_help li").bind({
+    mouseover: function () {
+      $(this).children("ul").toggle();
+      $("#local_help_ai_kit").css("opacity", "1");
+      $("#help_extends").css("opacity", "1");
+    },
+    mouseout: function () {
+      $(this).children("ul").toggle();
+      $("#local_help_ai_kit").css("opacity", "0");
+      $("#help_extends").css("opacity", "0");
+    }
+  });
+
 });
 
 
@@ -419,9 +446,38 @@ function styled() {
     $("#downboxModule").addClass("english");
     $("#local_saveOrOpen").addClass("fileEnglish");
     $("#local_connect_select").addClass("fileEnglish");
-    $("#Serial_Interaction").css("marginLeft","15px");
-    $("#Serial_Display").css("marginLeft","35px");
-    $("#iot_modules").css("width","180px");
+    $("#Serial_Interaction").css("marginLeft", "15px");
+    $("#Serial_Display").css("marginLeft", "35px");
+    $("#iot_modules").css("width", "180px");
+    $("#plugin_mac_or_windows").css("left", "390px");
+    $("#connect_method").css("left", "390px");
+    $("#local_help").addClass("helpEnglish");
+    $("#local_help_ai_kit").css("left", "528px");
+    $("#help_extends").css("left", "528px");
+  }
+}
+
+function selectConnectMethods(type) {
+  if ($('#runCode')[0].innerHTML == CCB.str_group.uploading) {
+    if (type == 0) {
+      $('.select-connected')[0].selectedIndex = 1;
+      return null;
+    }
+    else {
+      $('.select-connected')[0].selectedIndex = 0;
+      return null;
+    }
+  }
+  if (type == 0) {
+    $('.select-connected')[0].selectedIndex = 0;
+    $('.btn-network')[0].className = 'col cs6 btn-network';
+    $('.btn-network')[1].className = 'col cs6 btn-network hidden';
+  } else {
+    $('#runCode')[0].innerHTML = Ardublockly.LOCALISED_TEXT.runCode;
+    $('#uploadFiles')[0].innerHTML = Ardublockly.LOCALISED_TEXT.uploadFiles;
+    $('.select-connected')[0].selectedIndex = 1;
+    $('.btn-network')[1].className = 'col cs6 btn-network';
+    $('.btn-network')[0].className = 'col cs6 btn-network hidden';
   }
 }
 
@@ -637,11 +693,11 @@ function selectOnload() {
       }
     }
     if (a == 0) {
-      $('.btn-network')[0].className = 'row btn-network';
-      $('.btn-network')[1].className = 'row btn-network hidden';
+      $('.btn-network')[0].className = 'col s6 btn-network';
+      $('.btn-network')[1].className = 'col s6 btn-network hidden';
     } else {
-      $('.btn-network')[1].className = 'row btn-network';
-      $('.btn-network')[0].className = 'row btn-network hidden';
+      $('.btn-network')[1].className = 'col s6 btn-network';
+      $('.btn-network')[0].className = 'col s6 btn-network hidden';
     }
   }
   $('.selectMode_input')[0].onclick = function (e) {
@@ -998,18 +1054,18 @@ function switchCC(e) {
       repl_delete.style.display = "none";
       $('#switchSerial1').click();
       $(".blockpy-toolbar-edit").css({
-        "display":"none"
+        "display": "none"
       });
       $(".copy_code").css({
-        "display":"none"
+        "display": "none"
       });
       $(".blockpy-toolbar-download").css({
-        "display":"none"
+        "display": "none"
       });
       $(".blockpy-toolbar-upload").css({
-        "display":"none"
+        "display": "none"
       });
-      $("#repl_delete").css("display","block");
+      $("#repl_delete").css("display", "block");
     }
     else if (e.className.indexOf("switch_box2") != -1) {
       pythonbox.className = "card-content hidden"
@@ -1017,36 +1073,36 @@ function switchCC(e) {
       repl_delete.style.display = "none";
       $('#switchSerial2').click();
       $(".blockpy-toolbar-edit").css({
-        "display":"none"
+        "display": "none"
       });
       $(".copy_code").css({
-        "display":"none"
+        "display": "none"
       });
       $(".blockpy-toolbar-download").css({
-        "display":"none"
+        "display": "none"
       });
       $(".blockpy-toolbar-upload").css({
-        "display":"none"
+        "display": "none"
       });
-      $("#repl_delete").css("display","none");
+      $("#repl_delete").css("display", "none");
     }
     else {
       pythonbox.className = "card-content"
       replbox.className = "card-content hidden"
       repl_delete.style.display = "none";
       $(".blockpy-toolbar-edit").css({
-        "display":"block"
+        "display": "block"
       });
       $(".copy_code").css({
-        "display":"block"
+        "display": "block"
       });
       $(".blockpy-toolbar-download").css({
-        "display":"block"
+        "display": "block"
       });
       $(".blockpy-toolbar-upload").css({
-        "display":"block"
+        "display": "block"
       });
-      $("#repl_delete").css("display","none");
+      $("#repl_delete").css("display", "none");
     }
   }
 }

materialize/js/materialize.js

@@ -4975,6 +4975,7 @@ if (Vel) {
           $("#refresh-disabled").css("display","block");
           $("#refresh").css("display","none");
           $("#refresh-press").css("display","none");
+          $('#device_connect_status').replaceWith(`<span id="device_connect_status" style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;"><span id="device_connect_status_txt">${Ardublockly.LOCALISED_TEXT.device_no_connect}&nbsp&nbsp&nbsp&nbsp</span></span>`);
         }
       } else {
         a1.className = a1.className.replace(a, "");
@@ -4984,6 +4985,7 @@ if (Vel) {
         $("#refresh-disabled").css("display","none");
         $("#refresh").css("display","block");
         $("#refresh-press").css("display","none");
+        $('#device_connect_status').replaceWith(`<span id="device_connect_status" style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;"><span id="device_connect_status_txt">${Ardublockly.LOCALISED_TEXT.device_connect}&nbsp&nbsp&nbsp&nbsp</span></span>`);
       }
       // Function that renders and appends the option taking into
       // account type and possible image icon.

msg/en.js

@@ -718,6 +718,21 @@ Ardublockly.LOCALISED_TEXT = {
     select_English: "Voice recognition in the cloud(English)",
     select_Cantonese: "Voice recognition in the cloud(Cantonese)",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "Get to know the CocoBlockly X programming environment",
+    ai_kit_1: "Get to know the screen module",
+    ai_kit_2: "Know the camera lens module",
+    ai_kit_3: "Recognize object recognition",
+
+    extends: "Expansion adapter module",
+    extends_0: "Basics",
+    extends_1: "Application",
+    extends_2: "Newsletter",
+    error: "Common error handling",
+
+    device_no_connect: "Hardware (Not Connected)",
+    device_connect: "Hardware (Normal Connection)",
+
     sketch_name: "Untitled",
     sketch_save: "Save",
     iot_module: "Hardware IOT Mode",

msg/zh-hans.js

@@ -773,6 +773,22 @@ Ardublockly.LOCALISED_TEXT = {
     error_tc: "代码错误或者未引入第三方库固件版本有问题",
     error_tp: "程序运行超时，请重新运行",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "认识CocoBlockly X编程环境",
+    ai_kit_1: "认识萤幕模组",
+    ai_kit_2: "认识摄影镜头模组",
+    ai_kit_3: "认识物体识别",
+
+    extends: "拓展转接模组",
+    extends_0: "基础篇",
+    extends_1: "应用篇",
+    extends_2: "通讯篇",
+    error: "常见错误处理",
+
+    device_no_connect: "硬件（未连接）",
+    device_connect: "硬件（正常连接）",
+
+
     "EPER": "不允许操作",
     "ENOEN": "没有这样的文件或目录",
     "ESRC": "没有这样的过程",

msg/zh-hant.js

@@ -763,6 +763,21 @@ Ardublockly.LOCALISED_TEXT = {
     error_tc: "程式碼錯誤或者未引入協力廠商庫固件版本有問題",
     error_tp: "程式運行超時，請重新運行",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "認識CocoBlockly X編程環境",
+    ai_kit_1: "認識螢幕模組",
+    ai_kit_2: "認識攝影鏡頭模組",
+    ai_kit_3: "認識物體識別",
+
+    extends: "拓展轉接模組",
+    extends_0: "基礎篇",
+    extends_1: "應用篇",
+    extends_2: "通訊篇",
+    error: "常見錯誤處理",
+
+    device_no_connect: "硬件（未連接）",
+    device_connect: "硬件（正常連接）",
+
     "EPER": "不允許操作",
     "ENOEN": "沒有這樣的文件或目錄",
     "ESRC": "沒有這樣的過程",

python/cocoblockly.css

@@ -781,7 +781,7 @@ footer.page-footer {
     background-color: #fff;
     margin: 0;
     display: none;
-    min-width: 120px;
+    min-width: 137px;
     max-height: 650px;
     overflow-y: auto;
     opacity: 0;
@@ -1632,12 +1632,23 @@ nav ul li {
     font-family: "微软雅黑";
 }
 
+#local_help_ai span,#local_help_extends span,#local_help_error span {
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
 #plugin_download:hover span,#button_upgrade_firmware:hover span,#button_connection_type:hover span{
     background-color: #fff;
     color: #4A6AFF;
     font-family: "微软雅黑";
 }
 
+#local_help_ai:hover span,#local_help_extends:hover span,#local_help_error:hover span {
+    background-color: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
 .sketch_name::-webkit-input-placeholder{
     color:#CACACA;
 }

python/index.css

@@ -1130,7 +1130,11 @@ table td, th {
  
 .fileEnglish {
      width: 185px !important
-  }
+}
+
+.helpEnglish {
+    width: 240px !important
+}
  
 .blue{
      background-color: #4A6AFF !important;
@@ -1139,4 +1143,68 @@ table td, th {
 .green {
      background-color: #24AF00 !important;
 }
+
+#plugin_mac_or_windows,#connect_method,#local_help_ai_kit, #help_extends{
+    background-color: #fff;
+    margin: 0;
+    min-width: 137px;
+    max-height: 650px;
+    overflow-y: auto;
+    opacity: 0;
+    z-index: 999;
+ }
+
+ #plugin_mac_or_windows li,#connect_method li,#local_help_ai_kit li, #help_extends li{
+    clear: both;
+    color: rgba(0,0,0,0.87);
+    cursor: pointer;
+    min-height: 50px;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+}
+
+
+#plugin_mac_or_windows #Mac span, #plugin_mac_or_windows #Windows span, #connect_method #select_connecteds span, #connect_method #no_select_connecteds span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#local_help_ai_kit #ai_kit_0 span, #local_help_ai_kit #ai_kit_1 span, #local_help_ai_kit #ai_kit_2 span, #local_help_ai_kit #ai_kit_3 span{
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#help_extends #extends_0 span,#help_extends #extends_1 span,#help_extends #extends_2 span {
+    color: #222222;
+    font-family: "微软雅黑";
+}
+
+#plugin_mac_or_windows #Mac:hover span, #plugin_mac_or_windows #Windows:hover span, 
+#connect_method #select_connecteds:hover span, #connect_method #no_select_connecteds:hover span {
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#local_help_ai_kit #ai_kit_0:hover span, #local_help_ai_kit #ai_kit_1:hover span, #local_help_ai_kit #ai_kit_2:hover span, #local_help_ai_kit #ai_kit_3:hover span{
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#help_extends #extends_0:hover span,#help_extends #extends_1:hover span,#help_extends #extends_2:hover span {
+    background: #fff;
+    color: #4A6AFF;
+    font-family: "微软雅黑";
+}
+
+#Mac img, #Windows img{
+    width: 25px;
+    height: 25px;
+    margin-right: 5px;
+    transform: translateY(5px);
+}
+
+
   

python/index.html

@@ -239,27 +239,84 @@
                         <ul id='local_connect_select' class='dropdown-content' style="top:62px">
                             <li id="plugin_download" href="javaScript:(0)">
                                 <span class="translatable_download_uploader">下载安装程序</span>
+                                <ul id="plugin_mac_or_windows" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 320px; top: 64px;">
+                                    <li id="Mac" href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.10.pkg"
+                                        target="_black">
+                                        <span><img src="./icons/mac-icon.png">Mac</span>
+                                    </li>
+                                    <li id="Windows"
+                                        href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
+                                        target="_black">
+                                        <span><img src="./icons/windows-icon.png">Windows</span>
+                                    </li>
+                                </ul>
                             </li>
                             <li id="button_upgrade_firmware">
                                 <span class="translatable_upgrade_firmware">固件升级</span>
                             </li>
                             <li id="button_connection_type">
                                 <span class="translatable_connect_method">连接方式</span>
+                                <ul id="connect_method" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 320px; top: 170px;">
+                                    <li id="select_connecteds" style="text-align: center;"
+                                        onclick="selectConnectMethods(0)">
+                                        <span id="Wired" class="translatable_select_connecteds">有线上传</span>
+                                    </li>
+                                    <li id="no_select_connecteds" style="text-align: center;"
+                                        onclick="selectConnectMethods(1)">
+                                        <span id="Wireless" class="translatable_no_select_connecteds">无线上传</span>
+                                    </li>
+                                </ul>
                             </li>
                         </ul>
                     </li>
 
 
                     <li style="display: block;">
-                        <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
+                        <a id="help" class='dropdown-button lang_resize' data-activates='local_help'
                             style="position:relative;padding: 0 25px;">
                             <span class="translatable_help_board">帮助</span>
 
                         </a>
-                        <!-- <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
-                            <span class="translatable_devices">Devices</span>
-                            <img class="left nav-icon" src="./icons/Devices.png">
-                        </a> -->
+                        <ul id='local_help' class='dropdown-content' style="top:62px">
+                            <li id="local_help_ai">
+                                <span class="translatable_ai_kit">AI Kit</span>
+                                <ul id="local_help_ai_kit" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 398px; top: 64px;">
+                                    <li id="ai_kit_0" href="//x-help.cocorobo.hk/#/aikit/AI_1" target="_black">
+                                        <span class="translatable_ai_kit_0">Mac</span>
+                                    </li>
+                                    <li id="ai_kit_1" href="//x-help.cocorobo.hk/#/aikit/AI_2" target="_black">
+                                        <span class="translatable_ai_kit_1">Windows</span>
+                                    </li>
+                                    <li id="ai_kit_2" href="//x-help.cocorobo.hk/#/aikit/AI_3" target="_black">
+                                        <span class="translatable_ai_kit_2">Windows</span>
+                                    </li>
+                                    <li id="ai_kit_3" href="//x-help.cocorobo.hk/#/aikit/AI_4" target="_black">
+                                        <span class="translatable_ai_kit_3">Windows</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="local_help_extends">
+                                <span class="translatable_extends">拓展转接模组</span>
+                                <ul id="help_extends" class='dropdown-content'
+                                    style="display:none; position: fixed; left: 398px; top: 120px;">
+                                    <li id="extends_0" href="//x-help.cocorobo.hk/#/extension/EX_01" target="_black">
+                                        <span class="translatable_extends_0">Mac</span>
+                                    </li>
+                                    <li id="extends_1" href="//x-help.cocorobo.hk/#/extension/EX_02" target="_black">
+                                        <span class="translatable_extends_1">Windows</span>
+                                    </li>
+                                    <li id="extends_2" href="//x-help.cocorobo.hk/#/extension/EX_03" target="_black">
+                                        <span class="translatable_extends_2">Windows</span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li id="local_help_error" href="//x-help.cocorobo.cn/#/aikit/A0">
+                                <span class="translatable_error">常见错误处理</span>
+                            </li>
+                        </ul>
                     </li>
 
 
@@ -269,7 +326,7 @@
                                 class="selectMode_input browser-default"
                                 style="font-size: 0.9rem;border: none;width: 130px;">
                             <i class="down" style="position: relative;top: -20px;float: right;"></i>
-                            <div class="downbox MouduleBox" id="downboxModule">
+                            <div class="downbox MouduleBox" id="downboxModule" style="top: 64px;">
                                 <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
                                         class="translatable_ai_module">A.I. Module</a></div>
                                 <div style="border: none;"><a href="javaScript:(0)" style="color: #424242 !important;"
@@ -900,7 +957,8 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="card-header" style='height: 60px;line-height: 60px;background: #f1f2f5;'>
+                                <div class="card-header"
+                                    style='height: 60px;line-height: 60px;background: #f1f2f5;text-align: center;'>
                                     <!-- http://help.cocorobo.cn/#/getting-started/info target="_blank"-->
                                     <div style='float:right;display: none;'>
                                         <a class="header-link upload_instruction" style="display: none;" href="#"
@@ -925,11 +983,12 @@
                                                 disconnected</span>
                                         </label>
                                     </div>
+
                                     <!--<span class="header-icon"><img style="width: 30px;margin: 8px 8px 8px 20px;" src="./images/zhixing.png"> </span>-->
                                     <span class="header-text translate-code translatable_title_device"
-                                        style='font-weight: 800;font-size: 20px;margin-left: 25px;'>Device</span>
-                                    <div style="display: inline-block;margin-left: 20px;"><select
-                                            class="select-connected " id="select-connected">
+                                        style='font-weight: 800;font-size: 20px;margin-left: 25px;display: none;'>Device</span>
+                                    <div style="display: none;margin-left: 20px;"><select class="select-connected "
+                                            id="select-connected">
                                             <option class="select-connected translatable_select_connecteds"
                                                 style="color: #000;">The
                                                 cable to upload</option>
@@ -937,17 +996,21 @@
                                                 Wireless cable
                                                 upload</option>
                                         </select></div>
-                                    <div id="discnt_icon" style="display:inline-block;">
+                                    <!-- <div id="discnt_icon" style="display:inline-block;">
                                         <a href="#env_detect" class="modal-trigger"><img
                                                 style="height:17px;margin-left:8px;transform:translateY(2px);"
                                                 src="./icons/uploader_disconnect.png"></a>
                                     </div>
                                     <div id="cnt_icon" style="display:none;"><img
                                             style="height:17px;margin-left:8px;transform:translateY(2px);"
-                                            src="./icons/uploader_connect.png"></div>
+                                            src="./icons/uploader_connect.png"></div> -->
+
+
+                                    <span id="device_connect_status" class="translatable_device_no_connect"
+                                        style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;">硬件（未连接）</span>
 
                                     <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
-                                            waves-light blue  disabled"
+                                    waves-light blue  disabled"
                                         style="margin-right:0.5rem;background-color: #f1f2f5 !important;float: right;margin-top: 10px;">
                                         <!-- <span id="resetDevice">Reset Device</span> -->
 
@@ -959,31 +1022,61 @@
                                             style="margin-top: 7px;display: none;">
                                     </a>
                                 </div>
-                                <!--<div class="card-header">                    <span class="header-icon" style="line-height:40px;"><img style="height:30px;vertical-align:middle;" src="./images/icon-aspect.svg"></span>                    <span class="header-text translate-output">Output Area</span>                    <img class="fullscreenIcon" src="./images/icon-fullscreen.svg">                    <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">                </div>-->
-                                <!--<div class="card-content" style="display:block;grid-template-rows:1fr 50px;">                    <div style="border-bottom:1px solid #ddd;padding:8px;overflow:hidden;">                   <div style="height:100%;overflow:hidden;">                            <div class='blockpy-printer blockpy-printer-default' style="resize:none;height:98%;width:100%;border:1px solid #818181;">                            </div>                        </div>                   </div>-->
+
                                 <div class="card-content" style="padding:8px 10px;width:100%">
-                                    <div class="row" id="status">
+                                    <div class="row" id="status" style="display: none;">
                                         <div class="col s12"><img id="error-btn" class="activator"
                                                 src="./icons/error.png">
                                             <span id="status_bar" class="translatable_statusbar">直接将代码上传到电子模块中。</span>
                                         </div>
                                     </div>
-                                    <div class="row" id="progress">
-                                        <div class="col s12">
-                                            <div class="progress" style="margin:7px 0;">
-                                                <div class="determinate green" style="width:0%;"></div>
+
+                                    <div class="row" style="width: 100%;margin: 0;margin-top: 20px;">
+                                        <div id="uploader-btns" class="col s6">
+                                            <a onclick='sendfile();' id="send_file" class="waves-effect
+                                                    waves-light btn blue disabled"
+                                                style="margin-right:0.5rem;padding:0 0.5rem;">
+                                                <i style="cursor: pointer;" class="fa fa-play-circle"
+                                                    aria-hidden="true"></i>
+                                                <span id="runCode"></span>
+                                            </a>
+                                            <a onclick="uploadpyfile()" id="uploadpy" class="waves-effect
+                                            waves-light btn blue disabled" style="padding:0 0.5rem;">
+                                                <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i>
+                                                <span id="uploadFiles"></span>
+                                            </a>
+                                            <div style="float: right;">
+                                                <li style="display: none;">
+                                                    <ul id="localsssssaveOrOpen" class="dropdown-content active">
+                                                        <li style="padding: 14px 16px;" onclick="uploadfile(true)">
+                                                            <a>开机启动可视化菜单界面</a></li>
+                                                        <li style="padding: 14px 16px;" onclick="uploadfile(false)">
+                                                            <a>开机运行上次的程序</a></li>
+                                                    </ul>
+                                                    <a id="qiehuanbtn"
+                                                        class="qiehuanbtn btn dropdown-trigger blue lang_resize dropdown-button disabled"
+                                                        data-activates="localsssssaveOrOpen"><span
+                                                            id="runCuploadFilesode">更换启动模式</span><i
+                                                            class="material-icons right"
+                                                            style="margin-left: 0;">arrow_drop_down</i></a>
+                                                </li>
+                                                <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
+                                                    waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
+                                                        id="resetDevice">Reset Device</span></a> -->
                                             </div>
                                         </div>
-                                    </div>
-                                    <div class="row btn-network">
-                                        <div class="col s6" style="padding-right:1px;">
+                                        <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
+                                            style="display:none"><span id="gettype">Upload
+                                                files</span></a>
+
+                                        <div class="col s6 btn-network" style="padding-right:1px;">
                                             <div class="select-wrapper initialized"><span class="caret">▼</span><input
                                                     type="text" class="select-dropdown" id="select_dropdown"
                                                     readonly="true"
                                                     data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
                                                     value="检测不到连接端口">
                                                 <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
-                                                        select-dropdown ">
+                                                                select-dropdown ">
                                                     <li class="disabled "><span>检测不到连接端口</span></li>
                                                 </ul><select id="ports"
                                                     data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
@@ -992,20 +1085,19 @@
                                                 </select>
                                             </div>
                                         </div>
-                                        <div class="col s6">
-                                            <div style="float: right;margin-top: 15px;">
-                                                <div style="display: inline-block;vertical-align: middle;">
-                                                    <img id="runSuccess" src="/images/success.png" style="display: none;"/>
-                                                    <img id="runFail" src="/images/fail.png" style="display: none;"/>
-                                                </div>
-                                                <div style="display: inline-block;">
-                                                    <span id="statusMsg"></span>
-                                                </div>
-                                                
+
+                                        <div class="col cs6 btn-network hidden" style="padding-right:1px;width: 50%;">
+                                            <div class="select-wrapper initialized" style='width: 61%;float: left;'>
+                                                <input type="text" class="select-dropdown" data-activates=""
+                                                    id='ipAddress' placeholder="请输入ip地址">
                                             </div>
+                                            <div style='display:inline-block'><a onclick='button_click();' class="waves-effect waves-light
+                                                        btn blue" style="margin-left: 0.5rem;margin-top: 4px;"><span
+                                                        id="ConnectBtn">Connect
+                                                        </spanbutton_click></a></div>
                                         </div>
                                     </div>
-                                    <div class="row btn-network hidden">
+                                    <!-- <div class="row btn-network hidden">
                                         <div class="col cs6" style="padding-right:1px;width:100%">
                                             <div class="select-wrapper initialized" style='float: left;width: 45%;'>
                                                 <input type="text" class="select-dropdown" data-activates=""
@@ -1046,16 +1138,40 @@
                                                             class="material-icons right"
                                                             style="margin-left: 0;">arrow_drop_down</i></a>
                                                 </li>
-                                                <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
+                                                <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
                                                     waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
                                                         id="resetDevice">Reset
-                                                        Device</span></a> -->
+                                                        Device</span></a>
                                             </div>
                                         </div>
                                         <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
                                             style="display:none"><span id="gettype">Upload
                                                 files</span></a>
+                                    </div> -->
+                                    <div class="row" id="progress" style="margin-top: 30px;">
+                                        <div class="col s12">
+                                            <div class="progress" style="margin:7px 0;">
+                                                <div class="determinate green" style="width:0%;"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="row">
+                                        <div class="col s6" style="float: right;">
+                                            <div style="float: right;margin-top: 15px;">
+                                                <div style="display: inline-block;vertical-align: middle;">
+                                                    <img id="runSuccess" src="/images/success.png"
+                                                        style="display: none;" />
+                                                    <img id="runFail" src="/images/fail.png" style="display: none;" />
+                                                </div>
+                                                <div style="display: inline-block;">
+                                                    <span id="statusMsg"></span>
+                                                </div>
+
+                                            </div>
+                                        </div>
                                     </div>
+
                                 </div>
                                 <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
                                         center;">
@@ -1095,7 +1211,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="card plugin_options options_hide">
+                            <!-- <div class="card plugin_options options_hide">
                                 <div class="card-content">
                                     <div>
                                         <span id="downloadver" style="display:none">1.0.6</span>
@@ -1106,7 +1222,7 @@
                                             href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
                                             target="_black"><img src="./icons/windows-icon.png">Windows </a> </div>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                     </div>
                 </div>

python/index.js

@@ -281,6 +281,33 @@ $(window).one("load", () => {
 
   // 点击复制分享链接
   copyShare()
+
+  $("#local_connect_select li").bind({
+    mouseover: function () {
+      $(this).children("ul").toggle();
+      $("#plugin_mac_or_windows").css("opacity", "1");
+      $("#connect_method").css("opacity", "1");
+    },
+    mouseout: function () {
+      $(this).children("ul").toggle();
+      $("#plugin_mac_or_windows").css("opacity", "0");
+      $("#connect_method").css("opacity", "0");
+    }
+  });
+
+  $("#local_help li").bind({
+    mouseover: function () {
+      $(this).children("ul").toggle();
+      $("#local_help_ai_kit").css("opacity", "1");
+      $("#help_extends").css("opacity", "1");
+    },
+    mouseout: function () {
+      $(this).children("ul").toggle();
+      $("#local_help_ai_kit").css("opacity", "0");
+      $("#help_extends").css("opacity", "0");
+    }
+  });
+
 });
 
 
@@ -419,9 +446,38 @@ function styled() {
     $("#downboxModule").addClass("english");
     $("#local_saveOrOpen").addClass("fileEnglish");
     $("#local_connect_select").addClass("fileEnglish");
-    $("#Serial_Interaction").css("marginLeft","15px");
-    $("#Serial_Display").css("marginLeft","35px");
-    $("#iot_modules").css("width","180px");
+    $("#Serial_Interaction").css("marginLeft", "15px");
+    $("#Serial_Display").css("marginLeft", "35px");
+    $("#iot_modules").css("width", "180px");
+    $("#plugin_mac_or_windows").css("left", "390px");
+    $("#connect_method").css("left", "390px");
+    $("#local_help").addClass("helpEnglish");
+    $("#local_help_ai_kit").css("left", "528px");
+    $("#help_extends").css("left", "528px");
+  }
+}
+
+function selectConnectMethods(type) {
+  if ($('#runCode')[0].innerHTML == CCB.str_group.uploading) {
+    if (type == 0) {
+      $('.select-connected')[0].selectedIndex = 1;
+      return null;
+    }
+    else {
+      $('.select-connected')[0].selectedIndex = 0;
+      return null;
+    }
+  }
+  if (type == 0) {
+    $('.select-connected')[0].selectedIndex = 0;
+    $('.btn-network')[0].className = 'col cs6 btn-network';
+    $('.btn-network')[1].className = 'col cs6 btn-network hidden';
+  } else {
+    $('#runCode')[0].innerHTML = Ardublockly.LOCALISED_TEXT.runCode;
+    $('#uploadFiles')[0].innerHTML = Ardublockly.LOCALISED_TEXT.uploadFiles;
+    $('.select-connected')[0].selectedIndex = 1;
+    $('.btn-network')[1].className = 'col cs6 btn-network';
+    $('.btn-network')[0].className = 'col cs6 btn-network hidden';
   }
 }
 
@@ -636,11 +692,11 @@ function selectOnload() {
       }
     }
     if (a == 0) {
-      $('.btn-network')[0].className = 'row btn-network';
-      $('.btn-network')[1].className = 'row btn-network hidden';
+      $('.btn-network')[0].className = 'col s6 btn-network';
+      $('.btn-network')[1].className = 'col s6 btn-network hidden';
     } else {
-      $('.btn-network')[1].className = 'row btn-network';
-      $('.btn-network')[0].className = 'row btn-network hidden';
+      $('.btn-network')[1].className = 'col s6 btn-network';
+      $('.btn-network')[0].className = 'col s6 btn-network hidden';
     }
   }
   $('.selectMode_input')[0].onclick = function (e) {

python/materialize/js/materialize.js

@@ -4975,6 +4975,7 @@ if (Vel) {
           $("#refresh-disabled").css("display","block");
           $("#refresh").css("display","none");
           $("#refresh-press").css("display","none");
+          $('#device_connect_status').replaceWith(`<span id="device_connect_status" style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;"><span id="device_connect_status_txt">${Ardublockly.LOCALISED_TEXT.device_no_connect}&nbsp&nbsp&nbsp&nbsp</span></span>`);
         }
       } else {
         a1.className = a1.className.replace(a, "");
@@ -4984,6 +4985,7 @@ if (Vel) {
         $("#refresh-disabled").css("display","none");
         $("#refresh").css("display","block");
         $("#refresh-press").css("display","none");
+        $('#device_connect_status').replaceWith(`<span id="device_connect_status" style="color: #222222;font-family: '微软雅黑';font-size: 16px;font-weight: bold;"><span id="device_connect_status_txt">${Ardublockly.LOCALISED_TEXT.device_connect}&nbsp&nbsp&nbsp&nbsp</span></span>`);
       }
       // Function that renders and appends the option taking into
       // account type and possible image icon.

python/msg/en.js

@@ -720,6 +720,21 @@ Ardublockly.LOCALISED_TEXT = {
     select_English: "Voice recognition in the cloud(English)",
     select_Cantonese: "Voice recognition in the cloud(Cantonese)",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "Get to know the CocoBlockly X programming environment",
+    ai_kit_1: "Get to know the screen module",
+    ai_kit_2: "Know the camera lens module",
+    ai_kit_3: "Recognize object recognition",
+
+    extends: "Expansion adapter module",
+    extends_0: "Basics",
+    extends_1: "Application",
+    extends_2: "Newsletter",
+    error: "Common error handling",
+
+    device_no_connect: "Hardware (Not Connected)",
+    device_connect: "Hardware (Normal Connection)",
+
     sketch_name: "Untitled",
     sketch_save: "Save",
     iot_module: "Hardware IOT Mode",

python/msg/zh-hans.js

@@ -775,6 +775,21 @@ Ardublockly.LOCALISED_TEXT = {
     error_tc: "代码错误或者未引入第三方库固件版本有问题",
     error_tp: "程序运行超时，请重新运行",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "认识CocoBlockly X编程环境",
+    ai_kit_1: "认识萤幕模组",
+    ai_kit_2: "认识摄影镜头模组",
+    ai_kit_3: "认识物体识别",
+
+    extends: "拓展转接模组",
+    extends_0: "基础篇",
+    extends_1: "应用篇",
+    extends_2: "通讯篇",
+    error: "常见错误处理",
+
+    device_no_connect: "硬件（未连接）",
+    device_connect: "硬件（正常连接）",
+
     "EPER": "不允许操作",
     "ENOEN": "没有这样的文件或目录",
     "ESRC": "没有这样的过程",

python/msg/zh-hant.js

@@ -765,6 +765,21 @@ Ardublockly.LOCALISED_TEXT = {
     error_tc: "程式碼錯誤或者未引入協力廠商庫固件版本有問題",
     error_tp: "程式運行超時，請重新運行",
 
+    ai_kit:"AI Kit",
+    ai_kit_0: "認識CocoBlockly X編程環境",
+    ai_kit_1: "認識螢幕模組",
+    ai_kit_2: "認識攝影鏡頭模組",
+    ai_kit_3: "認識物體識別",
+
+    extends: "拓展轉接模組",
+    extends_0: "基礎篇",
+    extends_1: "應用篇",
+    extends_2: "通訊篇",
+    error: "常見錯誤處理",
+
+    device_no_connect: "硬件（未連接）",
+    device_connect: "硬件（正常連接）",
+
     "EPER": "不允許操作",
     "ENOEN": "沒有這樣的文件或目錄",
     "ESRC": "沒有這樣的過程",

python/src/blockly/cocoblockly.js

@@ -1368,6 +1368,8 @@ async function cocoblockly() {
     // 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++) {

src/blockly/cocoblockly.js

@@ -1368,6 +1368,8 @@ async function cocoblockly() {
     // 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++) {