mini_cocopi/python/src/interface.html

<div>
    <div id='blockpy-content'>
        <div class="blockpy-editor">
            <div class="white blockpy-blocks blockpy-editor-menu"> <img class="fullscreenIcon"
                    src="./images/icon-fullscreen.svg"> <img class="fullscreenIcon hidden"
                    src="./images/icon-fullscreen-exit.svg">
                <div class='blockly-div' style="width:100%;height:100%;"></div>
            </div>
        </div>
        <div id='sss' style='display:block;overflow: auto;'>
            <div id="py-editor" class="blockpy-editor card-panel"
                style='height:calc(100% - 245px);display:block;overflow:auto'>
                <div class="card-header" style='position:relative;height: 60px;line-height: 60px;background: #f1f2f5;'>
                    <!--<span class="header-icon">&lt &gt</span>--> <span class="header-text translate-code
                    translatable_pythonSourceCode" style='font-weight: 800;font-size: 20px;margin-left: 25px;'>Python
                        Source Code</span> <a class="copy_code" style="position:absolute;top: 5px;right: 75px;"
                        data-clipboard-action="copy"> <img src="./images/icon-copy.png" style="width: 33px;margin-top:
                        7px;"> </a> <a class="blockpy-toolbar-download" style="position:absolute;top: 5px;right:
                    39px;"> <img src="./images/icon-downward.png" style="width: 33px;margin-top: 7px;"> </a><a
                        class="blockpy-toolbar-upload" style="position:absolute;top: 5px;right: 5px;"> <img
                            src="./images/upload.png" style="width: 33px;margin-top: 7px;"> </a> <img
                        class="fullscreenIcon hidden" src="./images/icon-fullscreen.svg"> <img class="fullscreenIcon
                    hidden" src="./images/icon-fullscreen-exit.svg"> </div>
                <div class="card-content" style="position:relative;height: calc(100% - 60px);overflow:auto;">
                    <div class="blockpy-toolbar">
                        <div class='blockpy-text blockpy-editor-menu'>
                            <div class='blockpy-text-sidebar'></div> <textarea readonly
                                class='codemirror-div language-python'></textarea>
                        </div>
                        <!-- <a class="copy_code" style="position:fixed;top:112px;right:25px;z-index:999;cursor:pointer;" data-clipboard-action="copy">                            <img src="./images/icon-copy.svg" width="24px">                        </a>                        <div class="blockpy-toolbar-download" style="position:fixed;top:113px;right:55px;z-index:999;cursor:pointer;">                            <img src="./images/icon-downward.svg" width="24px">                        </div>-->
                    </div>
                </div>
                <!-- <a class="copy_code" style="position:absolute;top:160px;right:70px;z-index:999;cursor:pointer;" data-clipboard-action="copy">                    <img src="./images/icon-copy.svg" width="24px">                </a>                <div class="blockpy-toolbar-download" style="position:absolute;top:160px;right:95px;z-index:999;cursor:pointer;">                    <img src="./images/icon-downward.svg" width="24px">                </div> -->
            </div>
            <div class='blockpy-content-left card-panel'
                style='display: block;background: #f8f8f8;min-height: 245px;position:relative;'>
                <div class="card-header" style='height: 60px;line-height: 60px;background: #f1f2f5;'>
                    <!-- http://help.cocorobo.cn/#/getting-started/info target="_blank"-->
                    <div style='float:right;'><a class="header-link upload_instruction" href="#"
                            data-tooltip-id="61c522fa-be27-2a3e-1f2d-cde212348740"><img src="./icons/instruction.png">
                        </a> <a id="plugin_download" download="" class="header-link" target="_blank" href="http://api.cocorobo.cn/releases/pythonuploaderv0.1/download/windows
                            data-tooltip-id=" 9e546554-688a-01c7-cde3-faaff99b557d"> <img
                                src="./icons/plugin_download.png"> <img
                                style="position:absolute;height:10px;right:45px;bottom:32px; display:none; "
                                src="./icons/icon_new.png"> </a> <label class="hidden"><input type="checkbox"
                                class="filled-in" /><span class="translatable_Adapter_fill_connected filled-in_nocheked"
                                style="color: #26a69a;font-size: 17px;font-weight: 600;">Adapter is
                                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">
                            <option class="select-connected translatable_select_connecteds" style="color: #000;">The
                                cable to upload</option>
                            <option style="color: #000;" class="aaaaa translatable_no_select_connecteds">Wireless cable
                                upload</option>
                        </select></div>
                    
                </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">
                        <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">
                        <div class="col s12">
                            <div class="progress" style="margin:7px 0;">
                                <div class="determinate blue" style="width:0%;"></div>
                            </div>
                        </div>
                    </div>
                    <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 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="" 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" style="position:absolute;bottom:15px;">
                        <div id="uploader-btns" class="col s12"><a onclick='sendfile();' class="waves-effect
                            waves-light btn blue" style="margin-right:0.5rem;"><span id="runCode">Run
                                    Code</span></a><a onclick="uploadfile()" class="waves-effect waves-light btn blue"
                                style="margin-right:0.5rem;"><span id="uploadFiles">Upload files</span></a><a onclick="sendstring('machine.reset()')" class="waves-effect
                                waves-light btn blue" style="margin-right:0.5rem;"><span id="resetDevice">Reset
                                        Device</span></a></div>
                    </div>
                </div>
                <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
                center;">
                    <div class="btn-toolbar-title">直接将代码上传到电子模块中<div></div>
                    </div>
                    <div class="btn-toolbar-inputbox"><input type="text" name="webrepl_url" id="url"
                            placeholder="Select a device"><input type="submit" id='button' value='Connect'
                            onclick='button_click(); return false'></div>
                    <div class="btn-toolbar-btnbox"></div>
                    <!--<button onclick='sendfile();' style='width: 80%;background: #6e83cc !important;margin-top: 15px;font-size: 16px;height:45px' class='waves-effect waves-light btn blue blockpy-run translate-execute'>上傳</button>-->
                    <!--<button class='waves-effect waves-light btn blue blockpy-run translate-execute'>UPLOAD</button>-->
                    <!-- <button href="#aiymodal" class='waves-effect waves-light btn blue modal-trigger'>run on aiy</button> -->
                    <!--<button id="resetAll" class='waves-effect waves-light btn blue translate-reset' style="float:right;">reset</button>                        <button id="clearOutput" class='waves-effect waves-light btn blue translate-clear' style="float:right;margin-right:5px;">clear</button>-->
                </div>
                <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
                center;">
                    <div class="btn-toolbar-title2">直接将代码上传到电子模块中 <div></div>
                    </div>
                    <div class="btn-toolbar-inputbox2"><select>
                            <option>检测不到连接端口</option>
                        </select></div>
                </div>
            </div>
            <div class="card plugin_options options_hide">
                <div class="card-content">
                    <div><a download="" href="http://api.cocorobo.cn/releases/pythonuploaderv0.1/download/mac"
                            target="_black"><img src="./icons/mac-icon.png">Mac </a> <a download=""
                            href="http://api.cocorobo.cn/releases/pythonuploaderv0.1/download/windows"
                            target="_black"><img src="./icons/windows-icon.png">Windows </a> </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class='modal blockpy-popup'>
    <div class='modal-content' id='modal-message'>
        <div class='modal-header'>
            <h4 class='modal-title'>Dynamic Content</h4>
        </div>
        <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;">
        <div class='modal-body' style='width:100%;min-height:200px;'> </div>
    </div>
    <div class='modal-footer'> <button
            class='waves-effect waves-light btn blue modal-close translate-close'>close</button>
    </div>
</div>
<div id="aiymodal" class="modal">
    <div class="modal-content" height="50%">
        <h4>Run on AIY</h4>
        <p>This feature gives you the ability to run your AIY python code directly to the AIY Vision Kit
            or Voice Kit, follow the instruction below:</p>
        <div style="margin-top:30px;"> <b style="background-color:#fff; border-radius:25px;padding:
                                10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 1</b> </div>
        <div style="margin-top:30px;"> Run the <b data-position="bottom" data-tooltip="I am a
                                tooltip" class="tooltipped">AIY Helper</b>, <a id="AIYdownload"
                style="cursor:pointer;">Download</a> the python code to local, <br />make sure you are
            in the same network with the Google AIY Vision Kit. </div>
        <div style="margin-top:30px;"> <b style="background-color:#fff; border-radius:25px;padding:
                                10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 2</b> </div>
        <div class="input-field col s9" style="margin-top:0px;"> Enter the IP Address of your Google
            AIY Kit: <div class="input-field inline"> <input id="aiyip_input" class="validate">
            </div> <a id="aiyModalRun" onclick="functionSSH();" style="margin-left:10px;"
                class="waves-effect blue waves-light btn">Run</a> <a id="aiyModalStop" onclick="functionSSHstop();"
                style="margin-left:10px;" class="waves-effect blue
                                waves-light btn">Stop</a>
            <!-- <a id="aiyModalRun"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Run</a> -->
            <!-- <a id="aiyModalStop"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Stop</a> -->
        </div>
        <div id="modal_preload" style="display:none">
            <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0
                                auto;">
                <div class="preloader-wrapper big active" style="top:0;left:0">
                    <div class="spinner-layer spinner-blue-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div>
                        <div class="gap-patch">
                            <div class="circle"></div>
                        </div>
                        <div class="circle-clipper right">
                            <div class="circle" style="border-width: 8px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="margin-top:-20px;"> <a href="#!" class="modal-close
                            waves-effect waves-green btn-flat">Close</a> </div>
    <div class="card-reveal grey darken-3 white-text" style="padding:8px 13px;">
        <div class="card-title" style="height:18%;margin-bottom:2px;">
            <span class="translatable_errmsg" style="font-weight:normal;">Error Message</span>
            <a id="err-copy" style="display:inline-block;margin-left:26px;" data-clipboard-action="copy"
                data-clipboard-target="#err-msg">
                <i class="material-icons right" style="color:#fff;font-size:18px;cursor:pointer;">content_copy</i>
            </a>
            <i class="material-icons right" style="cursor:pointer;">close</i>
        </div>
        <div style="width:100%;height:78%;">
            <textarea readonly id="err-msg"
                style="overflow:visible;font-family:consolas;font-size:14px;height:100%;resize:none;border:none;"></textarea>
        </div>
    </div>
</div>