Home Verkennen Help
Inloggen
jack
/
cocorobolx
1
0
Vork 0
Bestanden Issues 0 Wiki
Aftakking: master
Aftakkingen Labels
cocorobolx
/
index.html

index.html 205 KB
Permalink Geschiedenis Ruwe

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. 

  4. <head>
    5. 

  5.     <meta charset="utf-8" />
    6. 

  6.     <!-- <title>CocoBlockly X – CocoRobo AI & IoT Module</title> -->
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <meta http-equiv="Content-Type" content="text/html; scharset=UTF-8">
    9. 

  9.     <meta name="theme-color" content="#2C4FCD">
    10. 

  10.     <link type="text/css" rel="stylesheet" href="libs/materialize.min.css" media="screen,projection">
    11. 

  11.     <link rel="stylesheet" href="libs/codemirror/codemirror.css" />
    12. 

  12.     <link rel="stylesheet" href="libs/font-awesome.min.css" />
    13. 

  13.     <link rel="stylesheet" href="libs/summernote/summernote.css" />
    14. 

  14.     <link rel="stylesheet" href="libs/multi-select.css" />
    15. 

  15.     <link rel="stylesheet" href="src/blockpy.css" />
    16. 

  16.     <link rel="stylesheet" href="index.css" />
    17. 

  17.     <link rel="stylesheet" href="cocoblockly.css" />
    18. 

  18.     <!-- JQuery, D3, Math.js, Bootstrap -->
    19. 

  19.     <!-- <script type="text/javascript" src="libs/jquery.js"></script> -->
    20. 

  20.     <script type="text/javascript" src="uform.js"></script>
    21. 

  21.     <script type="text/javascript" src="js_libs/jquery-2.1.3.min.js"></script>
    22. 

  22.     <script type="text/javascript" src="libs/jquery-ui.min.js"></script>
    23. 

  23.     <script type="text/javascript" src="libs/jquery.hotkeys.js"></script>
    24. 

  24.     <script type="text/javascript" src="libs/jquery.multi-select.js"></script>
    25. 

  25.     <!-- <script type="text/javascript" src="libs/materialize.min.js"></script> -->
    26. 

  26.     <!-- <script src="materialize/js/materialize.js"></script> -->
    27. 

  27.     <script type="text/javascript" src="libs/d3.min.js"></script>
    28. 

  28.     <script type="text/javascript" src="libs/math.0.19.0.min.js"></script>
    29. 

  29.     <!-- <script type="text/javascript" src="libs/bootstrap.min.js"></script>
    30. 

  30.     <script type="text/javascript" src="libs/bootstrap-wysiwyg.js"></script> -->
    31. 

  31.     <script type="text/javascript" src="libs/mindmup-editabletable.js"></script>
    32. 

  32.     <script type="text/javascript" src="libs/codemirror/codemirror.js"></script>
    33. 

  33.     <script type="text/javascript" src="libs/codemirror/python.js"></script>
    34. 

  34.     <script type="text/javascript" src="libs/codemirror/htmlmixed.js"></script>
    35. 

  35.     <script type="text/javascript" src="libs/codemirror/xml.js"></script>
    36. 

  36.     <script type="text/javascript" src="libs/knockout-3.4.0.js"></script>
    37. 

  37.     <script type="text/javascript" src="libs/stringify.js"></script>
    38. 

  38.     <!-- Summernote, a rich text editor -->
    39. 

  39.     <script type="text/javascript" src="libs/summernote/summernote.min.js"></script>
    40. 

  40.     <script type="text/javascript" src="libs/summernote/summernote-ext-hint.js"></script>
    41. 

  41.     <script type="text/javascript" src="libs/summernote/summernote-ext-video.js"></script>
    42. 

  42.     <!-- Blockly -->
    43. 

  43.     <!-- <script type="text/javascript" src="blockly/blockly_uncompressed.js"></script> -->
    44. 

  44.     <!-- <script type="text/javascript" src="blockly/blockly_compressed.js"></script>
    45. 

  45.     <script type="text/javascript" src="src/imported.js"></script>
    46. 

  46.     <script type="text/javascript" src="blockly/blocks_compressed.js"></script>
    47. 

  47.     <script type="text/javascript" src="src/python_to_blockly.js"></script>
    48. 

  48.     <script type="text/javascript" src="blockly/python_compressed.js"></script> -->
    49. 

  49.     <script type="text/javascript" src="blockly/blocks/python/head.js"></script>
    50. 

  50.     <script type="text/javascript" src="blockly/blocks/python/citys.js"></script>
    51. 

  51.     <script type="text/javascript" src="blockly/blocks/python/define_colors.js"></script>
    52. 

  52.     <script type="text/javascript" src="blockly/blocks/python/blockly_compressed.js"></script>
    53. 

  53.     <script type="text/javascript" src="blockly/blocks/python/blocks_compressed.js"></script>
    54. 

  54.     <script type="text/javascript" src="blockly/blocks/python/python_compressed.js"></script>
    55. 

  55.     <script type="text/javascript" src="blockly/blocks/python/blocks_microbit.min.js"></script>
    56. 

  56.     <script type="text/javascript" src="blockly/blocks/python/blocks_mpython.min.js"></script>
    57. 

  57.     <script type="text/javascript" src="blockly/blocks/python/python_microbit.min.js"></script>
    58. 

  58.     <script type="text/javascript" src="blockly/blocks/python/python_mpython.min.js"></script>
    59. 

  59.     <script type="text/javascript" src="src/imported.js"></script>
    60. 

  60.     <script type="text/javascript" src="src/python_to_blockly.js"></script>
    61. 

  61.     <script type="text/javascript" src="blockly/blocks/python/ai.js"></script>
    62. 

  62.     <script type="text/javascript" src="blockly/blocks/python/iot.js"></script>
    63. 

  63.     <script type="text/javascript" src="blockly/blocks/python/esp32.js"></script>
    64. 

  64.     <script type="text/javascript" src="blockly/blocks/python/extension_module.js"></script>
    65. 

  65.     <script type="text/javascript" src="blockly/blocks/python/mainwifi.js"></script>
    66. 

  66.     <script type="text/javascript" src="blockly/blocks/text.js"></script>
    67. 

  67.     <script type="text/javascript" src="blockly/blocks/utility.js"></script>
    68. 

  68.     <!-- <script type="text/javascript" src="blockly/generators/utility.js"></script> -->
    69. 

  69.     <!--
    70. 

  70.     <script type="text/javascript" src="blockly/blocks/math.js"></script>
    71. 

  71.     <script type="text/javascript" src="blockly/generators/python/math.js"></script>-->
    72. 

  72.     <script type="text/javascript" src="blockly/generators/python.js"></script>
    73. 

  73.     <script type="text/javascript" src="blockly/blocks/python/time.js"></script>
    74. 

  74.     <script type="text/javascript" src="blockly/generators/python/time.js"></script>
    75. 

  75.     <script type="text/javascript" src="blockly/blocks/python/mainwifi.js"></script>
    76. 

  76.     <script type="text/javascript" src="blockly/generators/python/mainwifi.js"></script>
    77. 

  77.     <script type="text/javascript" src="blockly/blocks/python/screen.js"></script>
    78. 

  78.     <script type="text/javascript" src="blockly/generators/python/screen.js"></script>
    79. 

  79.     <script type="text/javascript" src="blockly/msg/index.js"></script>
    80. 

  80.     <script type="text/javascript" src="src/blockly/FileSaver.js"></script>
    81. 

  81.     <script type="text/javascript" src="src/blockly/term.js"></script>
    82. 

  82.     <script type="text/javascript" src="src/blockly/web.js"></script>
    83. 

  83.     <script type="text/javascript" src="src/blockly/load.js"></script>
    84. 

  84.     <script type="text/javascript" src="src/blockly/Devices.js"></script>
    85. 

  85.     <!-- Skulpt -->
    86. 

  86.     <script type="text/javascript" src="skulpt/dist/skulpt.min.js"></script>
    87. 

  87.     <script type="text/javascript" src="skulpt/dist/skulpt-stdlib.js"></script>
    88. 

  88.     <!-- Source Code -->
    89. 

  89.     <script type="text/javascript" src="src/utilities.js"></script>
    90. 

  90.     <script type="text/javascript" src="src/python_errors.js"></script>
    91. 

  91.     <script type="text/javascript" src="src/ast_node_visitor.js"></script>
    92. 

  92.     <script type="text/javascript" src="src/abstract_interpreter.js"></script>
    93. 

  93.     <script type="text/javascript" src="src/pytifa.js"></script>
    94. 

  94.     <script type="text/javascript" src="src/abstract_interpreter_definitions.js"></script>
    95. 

  95.     <script type="text/javascript" src="src/dialog.js"></script>
    96. 

  96.     <script type="text/javascript" src="src/storage.js"></script>
    97. 

  97.     <script type="text/javascript" src="src/printer.js"></script>
    98. 

  98.     <script type="text/javascript" src="src/interface.js"></script>
    99. 

  99.     <script type="text/javascript" src="src/server.js"></script>
    100. 

  100.     <script type="text/javascript" src="src/english.js"></script>
    101. 

  101.     <script type="text/javascript" src="src/corgis.js"></script>
    102. 

  102.     <script type="text/javascript" src="src/history.js"></script>
    103. 

  103.     <script type="text/javascript" src="src/presentation.js"></script>
    104. 

  104.     <script type="text/javascript" src="src/editor.js"></script>
    105. 

  105.     <script type="text/javascript" src="src/feedback.js"></script>
    106. 

  106.     <script type="text/javascript" src="src/toolbar.js"></script>
    107. 

  107.     <script type="text/javascript" src="src/sk_mod_instructor_extended.js"></script>
    108. 

  108.     <script type="text/javascript" src="src/sk_mod_instructor.js"></script>
    109. 

  109.     <script type="text/javascript" src="src/engine.js"></script>
    110. 

  110.     <script type="text/javascript" src="src/main.js"></script>
    111. 

  111.     <!-- FileSaver JS -->
    112. 

  112.     <script src="src/js_libs/FileSaver.min.js"></script>
    113. 

  113.     <!-- JS Diff -->
    114. 

  114.     <script src="src/js_libs/diff.js"></script>
    115. 

  115.     <!-- Prettify JS -->
    116. 

  116.     <script src="src/prettify/prettify.js"></script>
    117. 

  117.     <!-- Lazyload JS -->
    118. 

  118.     <script src="src/lazysize/lazysizes.min.js"></script>
    119. 

  119.     <!-- Socket.io -->
    120. 

  120.     <script src="src/socket.io-client/dist/socket.io.js"></script>
    121. 

  121.     <!-- clipboard -->
    122. 

  122.     <script src="src/clipboard/dist/clipboard.js"></script>
    123. 

  123.     <!-- Event Proxy -->
    124. 

  124.     <script type="text/javascript" src="src/blockly/eventproxy.js"></script>
    125. 

  125.     <!-- jQuery and Materialize JS -->
    126. 

  126.     <!-- <script src="js_libs/jquery-2.1.3.min.js"></script> -->
    127. 

  127.     <script src="materialize/js/materialize.js"></script>
    128. 

  128.     <!-- echarts -->
    129. 

  129.     <script src="./js_libs/echarts.min.js"></script>
    130. 

  130.     <!-- platform.js -->
    131. 

  131.     <!-- Desktop version of Ardublockly JS, needs to be loaded first. -->
    132. 

  132.     <!-- <script src="ardublockly_desktop.js"></script> -->
    133. 

  133.     <script type="text/javascript" src="src/webcam.min.js"></script>
    134. 

  134.     <script src="src/platformjs/platform.js"></script>
    135. 

  135.     <script src="ardublockly_lang.js"></script>
    136. 

  136.     <script src="ardublockly_toolbox.js"></script>
    137. 

  137.     <!--  <script src="ardublockly_blockly.js"></script> -->
    138. 

  138.     <script src="ardublocklyserver_ajax.js"></script>
    139. 

  139.     <script type="text/javascript" src="src/blockly/ardublockly_desktop.js"></script>
    140. 

  140.     <script type="text/javascript" src="src/blockly/ardublockly_design.js"></script>
    141. 

  141.     <script type="text/javascript" src="src/blockly/ardublockly_blockly.js"></script>
    142. 

  142.     <script type="text/javascript" src="src/blockly/ardublockly.js"></script>
    143. 

  143.     <script type="text/javascript" src="src/blockly/cocoblockly.js"></script>
    144. 

  144.     <script src="src/blockly/account.js"></script>
    145. 

  145.     <script src="src/blockly/socket.js"></script>
    146. 

  146.     <script src="src/blockly/machine.js"></script>
    147. 

  147.     <script type="text/javascript" src="./libs/clipboard.min.js"></script>
    148. 

  148.     <script type="text/javascript" src="./index.js"></script>
    149. 

  149. </head>
    150. 

  150. 

  151. <body>
    152. 

  152.     <div id="white-box">
    153. 

  153.         <div id="preloader">
    154. 

  154.             <img src="./images/preloader.gif">
    155. 

  155.             <h4 style="margin:0;">Loading...</h4>
    156. 

  156.         </div>
    157. 

  157.     </div>
    158. 

  158.     <!-- modal -->
    159. 

  159.     <!-- <div class="modals">
    160. 

  160.         <span></span>
    161. 

  161.     </div> -->
    162. 

  162.     <div id="container">
    163. 

  163.         <!-- Horizontal Navigation bar -->
    164. 

  164.         <nav id="nav_" class="nav-fixed arduino_teal" style="overflow:hidden;background-color: #3454D2;">
    165. 

  165.             <div id="nav_shadow" class="shadowbox" style="display:none;"></div>
    166. 

  166.             <div class="nav-wrapper"
    167. 

  167.                 style="min-width: 1200px;  font-family: '微软雅黑'; padding:0px 10px;display: flex;justify-content: space-between;position:static;">
    168. 

  168.                 <a id="logo-container" class="brand-logo" style="display: none;">
    169. 

  169.                     <span style="font-size:28px;font-family:'GT Walsheim Pro Trial Bold';"
    170. 

  170.                         class="app_title translatable_title">CocoBlockly X</span>
    171. 

  171.                     <!-- Sketch name editable text field -->
    172. 

  172.                     <span class="sketch_name_wrapper" style="position:relative">
    173. 

  173.                         <!-- <a id="button_delete" class="lang_resize" style="position:relative">
    174. 

  174.                         <img style="height:28px;margin-top:20px" src="./icons/trash.png"> -->
    175. 

  175.                 </a>
    176. 

  176.                 <ul id="nav-mobile" class="hide-on-med-and-down" style="display: inline-block;">
    177. 

  177.                     <!-- <li>
    178. 

  178.                         <img style="height: 40px;margin-top: 10px;" class="left nav-icon" src="./icons/logo.png">
    179. 

  179.                     </li> -->
    180. 

  180. 

  181.                     <li style="display: block;">
    182. 

  182.                         <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages'
    183. 

  183.                             style="position:relative;padding: 0 25px;">
    184. 

  184.                             <span class="translatable_language" style="display: none;">Language</span>
    185. 

  185.                             <img class="left" src="./images/language.svg" style="width: 30px;height: 50px;margin: 7px 0 0 0;">
    186. 

  186.                             <i class="down" style="position: relative;top: 30px;left: 2px;float: right;"></i>
    187. 

  187.                         </a>
    188. 

  188.                         <ul id='languages' class='dropdown-content active'>
    189. 

  189.                             <li id="EN" onclick="changeLanguage('en')">
    190. 

  190.                                 <span>English</span>
    191. 

  191.                             </li>
    192. 

  192.                             <li id="TC" onclick="changeLanguage('zh-hant')">
    193. 

  193.                                 <span>繁体中文</span>
    194. 

  194.                             </li>
    195. 

  195.                             <li id="CN" onclick="changeLanguage('zh-hans')">
    196. 

  196.                                 <span>简体中文</span>
    197. 

  197.                             </li>
    198. 

  198.                         </ul>
    199. 

  199.                     </li>
    200. 

  200. 

  201.                     <!-- <li>
    202. 

  202.                         <span class="vertical-separator"></span>
    203. 

  203.                     </li> -->
    204. 

  204.                     <li style="display: block;">
    205. 

  205.                         <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
    206. 

  206.                             style="position:relative;padding: 0 25px;">
    207. 

  207.                             <span class="translatable_files">文件</span>
    208. 

  208.                             <!-- <img class="left nav-icon" src="./icons/local_storage.png"> -->
    209. 

  209.                         </a>
    210. 

  210.                         <ul id='local_saveOrOpen' class='dropdown-content' style="top:62px">
    211. 

  211.                             <li id="button_load">
    212. 

  212.                                 <span class="translatable_import_local_file">导入本地文件</span>
    213. 

  213.                             </li>
    214. 

  214.                             <li id="button_import_cloud" class='modal-trigger'
    215. 

  215.                                 onclick='openUrl("//demo-lecode.smartedu.lenovo.com/zhangyu/store#/_st=blockpy")'>
    216. 

  216.                                 <span class="translatable_import_cloud_file">导入云端文件</span>
    217. 

  217.                             </li>
    218. 

  218.                             <li id="button_save" class='modal-trigger' href="#donload_file_cocorobo">
    219. 

  219.                                 <span class="translatable_export_local_file">保存到本地</span>
    220. 

  220.                             </li>
    221. 

  221.                             <li id="button_save_cloud" class='modal-trigger' href="#cloud_storage_name_modal">
    222. 

  222.                                 <span class="translatable_export_cloud_file">保存到云端</span>
    223. 

  223.                             </li>
    224. 

  224.                         </ul>
    225. 

  225.                         <div id="fileImport" class="btn" style="display:none;">
    226. 

  226.                             <input type="file" accept=".py">
    227. 

  227.                         </div>
    228. 

  228.                         <div id="xmlFileImport" class="btn" style="display:none;">
    229. 

  229.                             <input type="file" accept=".xml">
    230. 

  230.                         </div>
    231. 

  231.                         <div id="pyFileImport" class="btn" style="display:none;">
    232. 

  232.                             <input type="file" accept=".py">
    233. 

  233.                         </div>
    234. 

  234.                     </li>
    235. 

  235.                     <li style="display: block;">
    236. 

  236.                         <a id="local_connect" class='dropdown-button lang_resize' data-activates='local_connect_select'
    237. 

  237.                             style="position:relative;padding: 0 25px;">
    238. 

  238.                             <span class="translatable_connect">连接</span>
    239. 

  239.                         </a>
    240. 

  240.                         <ul id='local_connect_select' class='dropdown-content' style="top:62px;overflow: visible;">
    241. 

  241.                             <li id="plugin_download" href="javaScript:(0)">
    242. 

  242.                                 <span class="translatable_download_uploader">下载安装程序</span>
    243. 

  243.                                 <ul id="plugin_mac_or_windows" class='dropdown-content'
    244. 

  244.                                     style="display:none; position: absolute; left:139px; top: 0px;">
    245. 

  245.                                     <li id="Mac" onclick="openUrl('./LenovoBlockpy.pkg')">
    246. 

  246.                                         <span><img src="./icons/mac-icon.png">Mac</span>
    247. 

  247.                                     </li>
    248. 

  248.                                     <li id="Windows" onclick="openUrl('./LenovoBlockpy.exe')">
    249. 

  249.                                         <span><img src="./icons/windows-icon.png">Windows</span>
    250. 

  250.                                     </li>
    251. 

  251.                                 </ul>
    252. 

  252.                             </li>
    253. 

  253.                             <li id="button_upgrade_firmware" class="modal-trigger" href="#firmware_upgrade_modal">
    254. 

  254.                                 <span class="translatable_upgrade_firmware">固件升级</span>
    255. 

  255.                             </li>
    256. 

  256.                             <li id="button_connection_type" style="display: none;">
    257. 

  257.                                 <span class="translatable_connect_method">连接方式</span>
    258. 

  258.                                 <ul id="connect_method" class='dropdown-content'
    259. 

  259.                                     style="display:none; position: absolute; left: 139px; top: 100px;">
    260. 

  260.                                     <li id="select_connecteds" style="text-align: center;"
    261. 

  261.                                         onclick="selectConnectMethods(0)">
    262. 

  262.                                         <span id="Wired" class="translatable_select_connecteds">有线上传</span>
    263. 

  263.                                     </li>
    264. 

  264.                                     <li id="no_select_connecteds" style="text-align: center;"
    265. 

  265.                                         onclick="selectConnectMethods(1)">
    266. 

  266.                                         <span id="Wireless" class="translatable_no_select_connecteds">无线上传</span>
    267. 

  267.                                     </li>
    268. 

  268.                                 </ul>
    269. 

  269.                             </li>
    270. 

  270.                         </ul>
    271. 

  271.                     </li>
    272. 

  272. 

  273.                     <li style="display: block;">
    274. 

  274.                         <a id="help" class='dropdown-button lang_resize' data-activates='local_help'
    275. 

  275.                             style="position:relative;padding: 0 25px;">
    276. 

  276.                             <span class="translatable_help_board">帮助</span>
    277. 

  277.                         </a>
    278. 

  278.                         <ul id='local_help' class='dropdown-content' style="top:62px; overflow: visible;">
    279. 

  279.                             <li id="local_help_ai">
    280. 

  280.                                 <span class="translatable_ai_kit">AI Kit</span>
    281. 

  281.                                 <ul id="local_help_ai_kit" class='dropdown-content'
    282. 

  282.                                     style="display:none; position: absolute; left: 139px; top: 0px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">
    283. 

  283.                                     <li id="ai_kit_0" onclick="openUrl('./hans/#/aikit/AI_1')">
    284. 

  284.                                         <span class="translatable_ai_kit_0">Mac</span>
    285. 

  285.                                     </li>
    286. 

  286.                                     <li id="ai_kit_1" onclick="openUrl('./hans/#/aikit/AI_2')">
    287. 

  287.                                         <span class="translatable_ai_kit_1">Windows</span>
    288. 

  288.                                     </li>
    289. 

  289.                                     <li id="ai_kit_2" onclick="openUrl('./hans/#/aikit/AI_3')">
    290. 

  290.                                         <span class="translatable_ai_kit_2">Windows</span>
    291. 

  291.                                     </li>
    292. 

  292.                                     <li id="ai_kit_3" onclick="openUrl('./hans/#/aikit/AI_4')">
    293. 

  293.                                         <span class="translatable_ai_kit_3">Windows</span>
    294. 

  294.                                     </li>
    295. 

  295.                                 </ul>
    296. 

  296.                             </li>
    297. 

  297.                             <li id="local_help_extends">
    298. 

  298.                                 <span class="translatable_extends">拓展转接模组</span>
    299. 

  299.                                 <ul id="help_extends" class='dropdown-content'
    300. 

  300.                                     style="display:none; position:absolute; left: 139px; top: 50px;">
    301. 

  301.                                     <li id="extends_0" onclick="openUrl('./hans/#/extension/EX_01')">
    302. 

  302.                                         <span class="translatable_extends_0">Mac</span>
    303. 

  303.                                     </li>
    304. 

  304.                                     <li id="extends_1" onclick="openUrl('./hans/#/extension/EX_02')">
    305. 

  305.                                         <span class="translatable_extends_1">Windows</span>
    306. 

  306.                                     </li>
    307. 

  307.                                     <li id="extends_2" onclick="openUrl('./hans/#/extension/EX_03')">
    308. 

  308.                                         <span class="translatable_extends_2">Windows</span>
    309. 

  309.                                     </li>
    310. 

  310.                                 </ul>
    311. 

  311.                             </li>
    312. 

  312.                             <li id="local_help_error" onclick="openUrl('./hans/#/aikit/A0')">
    313. 

  313.                                 <span class="translatable_error">常见错误处理</span>
    314. 

  314.                             </li>
    315. 

  315.                         </ul>
    316. 

  316.                     </li>
    317. 

  317. 

  318. 

  319.                     <li>
    320. 

  320.                         <div style="margin: 0px 20px 0px 0px;">
    321. 

  321.                             <input type="text" value="A.I. Module" id="iot_modules" readonly
    322. 

  322.                                 class="selectMode_input browser-default"
    323. 

  323.                                 style="font-size:14px;border: none;width: 120px;">
    324. 

  324.                             <i id="down" class="down"
    325. 

  325.                                 style="position: relative;top: -20px;float: right;right: 9px;"></i>
    326. 

  326.                             <div class="downbox MouduleBox" id="downboxModule" style="top: 64px;">
    327. 

  327.                                 <div style="border: none;"><a href="javaScript:(0)" class="translatable_ai_module">A.I.
    328. 

  328.                                         Module</a></div>
    329. 

  329.                                 <div style="border: none;"><a href="javaScript:(0)" class="translatable_iot_module">IoT
    330. 

  330.                                         Module
    331. 

  331.                                         Mode</a></div>
    332. 

  332. 

  333.                                 <div style="border: none;"><a id="python_full_screen"
    334. 

  334.                                         class="translatable_python_full_screen_mode">Cloud
    335. 

  335.                                         Mode</a></div>
    336. 

  336.                             </div>
    337. 

  337.                         </div>
    338. 

  338.                     </li>
    339. 

  339. 

  340. 

  341.                     <li class="Mode_select_box">
    342. 

  342.                         <div class="ModeSelectBox">
    343. 

  343.                             <div class="ModeSelect">
    344. 

  344.                                 <div style="font-size: 14px;">样例 </div>
    345. 

  345.                                 <i class="down" style="position: relative;top: -34px;left: 20px;float: right;"></i>
    346. 

  346.                                 <div class="downbox ModeBox downbox-style">
    347. 

  347.                                     <div style="display: block;">
    348. 

  348.                                         <div>人工智能教材程序</div>
    349. 

  349.                                         <i class="downboxdown"></i>
    350. 

  350.                                         <div class="Hardware2 HarxA" style="height:auto;top:-35px">
    351. 

  351.                                             <div class="Hardware9">
    352. 

  352.                                                 <div>三年级</div>
    353. 

  353.                                                 <i class="downboxdown"></i>
    354. 

  354.                                                 <ul class="Hardware4 HarxA">
    355. 

  355.                                                     <li>录制语音指令</li>
    356. 

  356.                                                     <li>语音识别台灯</li>
    357. 

  357.                                                     <!-- <li>人脸识别防盗门</li> -->
    358. 

  358.                                                 </ul>
    359. 

  359.                                             </div>
    360. 

  360.                                             <div class="Hardware5">
    361. 

  361.                                                 <div>五年级</div>
    362. 

  362.                                                 <i class="downboxdown"></i>
    363. 

  363.                                                 <ul class="Hardware4 HarxA">
    364. 

  364.                                                     <li>录制语音指令</li>
    365. 

  365.                                                     <li>智能窗帘</li>
    366. 

  366.                                                     <li>水果采摘机器人</li>
    367. 

  367.                                                     <!-- <li>智能质检机器人</li> -->
    368. 

  368.                                                 </ul>
    369. 

  369.                                             </div>
    370. 

  370.                                             <div class="Hardware6">
    371. 

  371.                                                 <div>六年级</div>
    372. 

  372.                                                 <i class="downboxdown"></i>
    373. 

  373.                                                 <ul class="Hardware4 HarxA">
    374. 

  374.                                                     <!-- <li>无人驾驶循环小车</li> -->
    375. 

  375.                                                     <li>智能交通信号灯</li>
    376. 

  376.                                                     <li>导盲项链</li>
    377. 

  377.                                                     <!-- <li>二维码包裹分拣机器人</li> -->
    378. 

  378.                                                 </ul>
    379. 

  379.                                             </div>
    380. 

  380.                                             <div class="Hardware7">
    381. 

  381.                                                 <div>七年级</div>
    382. 

  382.                                                 <i class="downboxdown"></i>
    383. 

  383.                                                 <ul class="Hardware4 HarxA">
    384. 

  384.                                                     <li>人脸辨识电子警察</li>
    385. 

  385.                                                 </ul>
    386. 

  386.                                             </div>
    387. 

  387.                                             <div class="Hardware8">
    388. 

  388.                                                 <div>八年级</div>
    389. 

  389.                                                 <i class="downboxdown"></i>
    390. 

  390.                                                 <ul class="Hardware4 HarxA">
    391. 

  391.                                                     <li>支付台</li>
    392. 

  392.                                                 </ul>
    393. 

  393.                                             </div>
    394. 

  394.                                         </div>
    395. 

  395.                                     </div>
    396. 

  396.                                     <div style="display: none;">
    397. 

  397.                                         <div>IoT 模块基础案例</div>
    398. 

  398.                                         <i class="downboxdown"></i>
    399. 

  399.                                         <ul class="Hardware2 HarxA">
    400. 

  400.                                             <li>侧边按键控制蜂鸣器</li>
    401. 

  401.                                             <li> 侧边按键控制开关 LED</li>
    402. 

  402.                                             <li> 触摸区域控制 LED</li>
    403. 

  403.                                             <li> 蜂鸣器警报</li>
    404. 

  404.                                             <li> 黑暗环境感应光照灯</li>
    405. 

  405.                                             <li> 倾斜方向感应 LED</li>
    406. 

  406.                                             <li> 湿度报警器</li>
    407. 

  407.                                             <li> 摇晃感应 LED</li>
    408. 

  408.                                             <li> LED 显示光线强度值</li>
    409. 

  409.                                         </ul>
    410. 

  410.                                     </div>
    411. 

  411.                                     <div style="display: none;">
    412. 

  412.                                         <div>IoT 模块扩展功能案例</div>
    413. 

  413.                                         <i class="downboxdown"></i>
    414. 

  414.                                         <ul class="Hardware2 HarxA">
    415. 

  415.                                             <li>使用 LED 灯屏</li>
    416. 

  416.                                             <li>使用电机驱动模块</li>
    417. 

  417.                                             <li>使用游戏手柄 + LED 灯屏</li>
    418. 

  418.                                             <li>使用游戏手柄 + 屏幕模块</li>
    419. 

  419.                                             <li>在扩展模块上控制舵机</li>
    420. 

  420.                                             <li>屏幕显示Hello World</li>
    421. 

  421.                                             <li>屏幕绘制线条动画</li>
    422. 

  422.                                             <li>按键控制屏幕直线转动</li>
    423. 

  423.                                             <li>按键控制颜色切换</li>
    424. 

  424.                                             <li>计步器</li>
    425. 

  425.                                         </ul>
    426. 

  426.                                     </div>
    427. 

  427.                                     <div style="display: none;">
    428. 

  428.                                         <div>IoT 模块联网案例</div>
    429. 

  429.                                         <i class="downboxdown"></i>
    430. 

  430.                                         <ul class="Hardware2 HarxA">
    431. 

  431.                                             <li>按键发送光照数据至 CocoCloud</li>
    432. 

  432.                                             <li>按键发送环境数据至 IFTTT</li>
    433. 

  433.                                             <li>按键获取光照数据并根据条件亮灯</li>
    434. 

  434.                                             <li>定时发送环境数据至 CocoCloud</li>
    435. 

  435.                                             <li>定时接收环境数据并根据条件亮灯</li>
    436. 

  436.                                             <li>建立 WiFi 热点并显示连接设备数量</li>
    437. 

  437.                                             <li>局域网环境数据存储 - 服务器端</li>
    438. 

  438.                                             <li>局域网环境数据获取 - 客户端</li>
    439. 

  439.                                             <li>连接 WiFi 网络</li>
    440. 

  440.                                             <li>模块间按钮状态存储 - 服务端</li>
    441. 

  441.                                             <li>模块间按钮状态接收 - 客户端</li>
    442. 

  442.                                             <li>模块间进行 WebSocket 实时通信 - 发送端</li>
    443. 

  443.                                             <li>模块间进行 WebSocket 实时通信 - 接收端</li>
    444. 

  444.                                             <li>同步网络时间</li>
    445. 

  445.                                             <li>数字手表显示实时时间</li>
    446. 

  446.                                         </ul>
    447. 

  447.                                     </div>
    448. 

  448.                                     <div style="display: none;">
    449. 

  449.                                         <div>IoT工作坊上</div>
    450. 

  450.                                         <i class="downboxdown"></i>
    451. 

  451.                                         <ul class="Hardware2 HarxA">
    452. 

  452.                                             <li>01 点亮正中间的LED灯</li>
    453. 

  453.                                             <li>02 点亮所有LED灯</li>
    454. 

  454.                                             <li>03 流水灯</li>
    455. 

  455.                                             <li>04 蜂鸣器警报</li>
    456. 

  456.                                             <li>05 8-bit音乐</li>
    457. 

  457.                                             <li>06 串口通讯：按钮开关</li>
    458. 

  458.                                             <li>07 串口通讯：触摸开关</li>
    459. 

  459.                                             <li>08 按钮开关蜂鸣器</li>
    460. 

  460.                                             <li>09 触摸开关灯</li>
    461. 

  461.                                             <li>10 补光装置</li>
    462. 

  462.                                             <li>11 湿度报警器</li>
    463. 

  463. 

  464.                                         </ul>
    465. 

  465.                                     </div>
    466. 

  466.                                     <div style="display: none;">
    467. 

  467.                                         <div>IoT工作坊下</div>
    468. 

  468.                                         <i class="downboxdown"></i>
    469. 

  469.                                         <ul class="Hardware2 HarxA">
    470. 

  470.                                             <li>12 晃晃灯</li>
    471. 

  471.                                             <!-- <li>13 连接Wi-Fi</li> -->
    472. 

  472.                                             <li>14 连接Wi-Fi并显示连接状态</li>
    473. 

  473.                                             <li>15 建立热点并显示已连接的设备数</li>
    474. 

  474.                                             <li>16 亮度数据上传与下载</li>
    475. 

  475.                                             <li>17 舵机来回摆动</li>
    476. 

  476.                                             <li>19 舵机定时摆动</li>
    477. 

  477.                                             <li>20 按键控制舵机</li>
    478. 

  478.                                             <li>18 门（人脸识别）</li>
    479. 

  479.                                             <li>体验 iot-机械车（语音控制）</li>
    480. 

  480.                                             <li>体验 iot-机械人（陀螺仪）</li>
    481. 

  481.                                             <li>体验 iot-机械人（姿态识别）</li>
    482. 

  482.                                             <li>体验 iot-台灯（语音控制）</li>
    483. 

  483.                                         </ul>
    484. 

  484.                                     </div>
    485. 

  485.                                     <div style="display: block;">
    486. 

  486.                                         <div>AI 模块机器学习案例</div>
    487. 

  487.                                         <i class="downboxdown"></i>
    488. 

  488.                                         <ul class="Hardware2 HarxA">
    489. 

  489.                                             <li>垃圾分类识别（香港版）</li>
    490. 

  490.                                             <li>人脸检测</li>
    491. 

  491.                                             <li>物体识别</li>
    492. 

  492.                                             <li>人脸检测</li>
    493. 

  493.                                             <li>物体识别</li>
    494. 

  494.                                             <li>语音录制</li>
    495. 

  495.                                             <li>语音识别</li>
    496. 

  496.                                             <li>MNIST 手写数字识别</li>
    497. 

  497.                                         </ul>
    498. 

  498.                                     </div>
    499. 

  499.                                     <div style="display: block;">
    500. 

  500.                                         <div>AI 模块基础案例</div>
    501. 

  501.                                         <i class="downboxdown"></i>
    502. 

  502.                                         <ul class="Hardware2 HarxA">
    503. 

  503.                                             <li>按键控制屏幕时针转动</li>
    504. 

  504.                                             <li style="display:none">按键控制图片改变颜色制式</li>
    505. 

  505.                                             <li style="display:none">按键控制图片进行反色变化</li>
    506. 

  506.                                             <li>按键控制颜色切换</li>
    507. 

  507.                                             <li>迷你相机</li>
    508. 

  508.                                             <li>屏幕方向旋转</li>
    509. 

  509.                                             <li>屏幕绘制线条动画</li>
    510. 

  510.                                         </ul>
    511. 

  511.                                     </div>
    512. 

  512.                                     <div style="display: block;">
    513. 

  513.                                         <div>AI 模块扩展功能案例</div>
    514. 

  514.                                         <i class="downboxdown"></i>
    515. 

  515.                                         <ul class="Hardware2 HarxA">
    516. 

  516.                                             <li>使用 LED 灯屏</li>
    517. 

  517.                                             <li>使用电机驱动模块</li>
    518. 

  518.                                             <li>使用游戏手柄 + 屏幕模块</li>
    519. 

  519.                                             <li>在扩展模块上控制舵机</li>
    520. 

  520.                                             <li>贪吃蛇</li>
    521. 

  521.                                         </ul>
    522. 

  522.                                     </div>
    523. 

  523.                                     <div style="display: block;">
    524. 

  524.                                         <div>AI AI 模块视觉案例</div>
    525. 

  525.                                         <i class="downboxdown"></i>
    526. 

  526.                                         <ul class="Hardware2 HarxA">
    527. 

  527.                                             <li>按键改变相机图像的亮度</li>
    528. 

  528.                                             <li>区域颜色分析</li>
    529. 

  529.                                             <li>识别 QR 二维码</li>
    530. 

  530.                                             <li>寻线（黑线）</li>
    531. 

  531.                                             <li>寻找绿色的圆形</li>
    532. 

  532.                                             <li>寻找绿色区域并进行追踪</li>
    533. 

  533.                                         </ul>
    534. 

  534.                                     </div>
    535. 

  535.                                     <div style="display: block;">
    536. 

  536.                                         <div>AI AI 模块影音案例</div>
    537. 

  537.                                         <i class="downboxdown"></i>
    538. 

  538.                                         <ul class="Hardware2 HarxA">
    539. 

  539.                                             <li style="display:none">播放录制的视频档案</li>
    540. 

  540.                                             <li>播放音乐</li>
    541. 

  541.                                             <li style="display:none">录制摄像头画面并保存</li>
    542. 

  542.                                             <li>麦克风声音频谱分析</li>
    543. 

  543.                                         </ul>
    544. 

  544.                                     </div>
    545. 

  545.                                     <div style="display: block;">
    546. 

  546.                                         <div>AI基础篇案例上</div>
    547. 

  547.                                         <i class="downboxdown"></i>
    548. 

  548.                                         <ul class="Hardware2 HarxA">
    549. 

  549.                                             <li>Hello World</li>
    550. 

  550.                                             <li>螢幕顯示 Hello World</li>
    551. 

  551.                                             <li>畫布應用</li>
    552. 

  552.                                             <li>迷你相機</li>
    553. 

  553.                                             <li>簡易物體識別</li>
    554. 

  554.                                         </ul>
    555. 

  555.                                     </div>
    556. 

  556.                                     <div style="display: block;">
    557. 

  557.                                         <div>AI 基础篇案例下</div>
    558. 

  558.                                         <i class="downboxdown"></i>
    559. 

  559.                                         <ul class="Hardware2 HarxA">
    560. 

  560.                                             <li>物體識別進階</li>
    561. 

  561.                                             <li>人臉檢測</li>
    562. 

  562.                                             <li>顏色識別</li>
    563. 

  563.                                             <li>形狀識別（圓形）</li>
    564. 

  564.                                             <li>形狀識別（矩形）</li>
    565. 

  565.                                             <li>音頻分析</li>
    566. 

  566.                                         </ul>
    567. 

  567.                                     </div>
    568. 

  568.                                     <div style="display: block;">
    569. 

  569.                                         <div>AI 扩展使用案例</div>
    570. 

  570.                                         <i class="downboxdown"></i>
    571. 

  571.                                         <ul class="Hardware2 HarxA">
    572. 

  572.                                             <li>私服马达</li>
    573. 

  573.                                             <li>超声波感测器</li>
    574. 

  574.                                             <!-- <li>测距仪</li> -->
    575. 

  575.                                             <li>灯带</li>
    576. 

  576.                                             <li id="AI_Workshop_III_ex5_Microbit">Microbit</li>
    577. 

  577.                                             <li id="AI_Workshop_III_ex6_MicrobitFace">人脸检测</li>
    578. 

  578.                                             <li>电动门</li>
    579. 

  579.                                         </ul>
    580. 

  580.                                     </div>
    581. 

  581.                                     <div style="display: block;">
    582. 

  582.                                         <div>AI 垃圾分类</div>
    583. 

  583.                                         <i class="downboxdown"></i>
    584. 

  584.                                         <ul class="Hardware2 HarxA">
    585. 

  585.                                             <li>私服马达</li>
    586. 

  586.                                             <li>超声波感测器</li>
    587. 

  587.                                             <li>电动门</li>
    588. 

  588.                                         </ul>
    589. 

  589.                                     </div>
    590. 

  590.                                     <div style="display: block;">
    591. 

  591.                                         <div>AI 自动驾驶</div>
    592. 

  592.                                         <i class="downboxdown"></i>
    593. 

  593.                                         <ul class="Hardware2 HarxA">
    594. 

  594.                                             <li>第一場-路標識別(香港標識)</li>
    595. 

  595.                                             <li>第二場-巡線（雙線）</li>
    596. 

  596.                                             <li>第二場-巡線（單線-靠左行駛）)</li>
    597. 

  597.                                             <li>第一場-路標識別(香港標識)</li>
    598. 

  598.                                         </ul>
    599. 

  599.                                     </div>
    600. 

  600. 

  601.                                 </div>
    602. 

  602.                             </div>
    603. 

  603.                         </div>
    604. 

  604.                     </li>
    605. 

  605. 

  606.                     <!-- help button -->
    607. 

  607. 

  608.                     <!-- <li id="cloudBtn-shares">
    609. 

  609.                         <i class="material-icons" style="margin-left:5px;cursor: pointer;">share</i>
    610. 

  610.                     </li>
    611. 

  611.                     <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
    612. 

  612.                         style="margin-left:5px;cursor: pointer;">photo_camera</i>
    613. 

  613.                     <i id="button_delete" class="material-icons sketch_name_icon right"
    614. 

  614.                         style="margin-left:5px;cursor: pointer;">delete</i> -->
    615. 

  615.                 </ul>
    616. 

  616.                 <!-- <i id="workspace_screenshot" class="material-icons sketch_name_icon right"
    617. 

  617.                     style="margin-left:5px;cursor: pointer;">photo_camera</i> -->
    618. 

  618.                 <!-- <i class="material-icons sketch_name_icon right">create</i> -->
    619. 

  619.                 <!-- <input id="sketch_name" class="sketch_name" type="text"> -->
    620. 

  620.                 <input id="sketch_name_w" class="sketch_name" type="text" name="wifi" style="display:none">
    621. 

  621.                 </span>
    622. 

  622.                 <!-- </a> -->
    623. 

  623.                 <!-- Horizontal Navbar links only shown on large resolutions -->
    624. 

  624.                 <ul id="nav-mobile" class="right hide-on-med-and-down nav-mobile-right" style="display: flex;">
    625. 

  625.                     <!-- AI Demo -->
    626. 

  626.                     <!-- <li>
    627. 

  627.                     <a id="AI_experience" class='dropdown-button lang_resize' data-activates='AI_experience_dropdown' style="position:relative">
    628. 

  628.                         <span class="translatable_AI_experience">AI</span>
    629. 

  629.                         <img class="left nav-icon" src="./icons/nav-ai-experience.png">
    630. 

  630.                     </a>
    631. 

  631.                     <ul id='AI_experience_dropdown' class='dropdown-content' style="top:62px">
    632. 

  632.                         <li id="webcam" class='modal-trigger' href="#webcam_capture_modal">
    633. 

  633.                             <span class="translatable_AI_emotion">Emotion Recognotion</span>
    634. 

  634.                         </li>
    635. 

  635.                         <li class="divider"></li>
    636. 

  636.                         <li id="voice-input" class='modal-trigger' href="#voice_input_modal">
    637. 

  637.                             <span class="translatable_AI_speech">Speech Recognotion</span>
    638. 

  638.                         </li>
    639. 

  639.                     </ul>
    640. 

  640.                 </li> -->
    641. 

  641.                     <!-- help button -->
    642. 

  642.                     <li style="display: none;">
    643. 

  643.                         <a id="help" style="display:none" class='dropdown-button lang_resize'
    644. 

  644.                             data-activates="help_board" style="position:relative">
    645. 

  645.                             <!-- <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i> -->
    646. 

  646.                             <span class="translatable_help_board">Help</span>
    647. 

  647.                             <img class="left nav-icon" src="./icons/nav_help.png">
    648. 

  648.                         </a>
    649. 

  649.                         <ul id='help_board' class='dropdown-content' style="top:62px">
    650. 

  650.                             <li id="">
    651. 

  651.                                 <a href="http://help.cocorobo.cn/" target="_blank">
    652. 

  652.                                     <span class="translatable_tutorial">Tutorial</span>
    653. 

  653.                                 </a>
    654. 

  654.                             </li>
    655. 

  655.                             <!-- <li class="divider"></li>
    656. 

  656.                         <li>
    657. 

  657.                             <a href="#tourmode" class="modal-trigger">
    658. 

  658.                                 <span class="translatable_tour">Start Tour</span>
    659. 

  659.                             </a>
    660. 

  660.                         </li> -->
    661. 

  661.                             <li class="divider"></li>
    662. 

  662.                             <!-- <li>
    663. 

  663.                                 <a href="#env_detect" class="modal-trigger">
    664. 

  664.                                     <span class="translatable_env_detect">Environment Detect</span>
    665. 

  665.                                 </a>
    666. 

  666.                             </li> -->
    667. 

  667.                             <li class="divider"></li>
    668. 

  668.                             <li>
    669. 

  669.                                 <a href="http://help.cocorobo.cn/#/changelog" target="_blank">
    670. 

  670.                                     <span class="translatable_changelog">Change Log</span>
    671. 

  671.                                 </a>
    672. 

  672.                             </li>
    673. 

  673.                         </ul>
    674. 

  674.                     </li>
    675. 

  675.                     <li style="display:none;">
    676. 

  676.                         <select onchange="selectmode(this)" id="mode"
    677. 

  677.                             style="outline:0;position:relative;color: #fff;font-weight: 500;width: 175px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 15px 35px 0px 0px;display: block;">
    678. 

  678.                             <option value="" style="color: #000;">AI Mode</option>
    679. 

  679.                             <option value="" style="color: #000;">Main Mode</option>
    680. 

  680.                         </select>
    681. 

  681.                     </li>
    682. 

  682. 

  683. 

  684.                     <li id="cloudBtn-shares">
    685. 

  685.                         <i class="material-icons" style="margin-left:5px;cursor: pointer;display: none;">share</i>
    686. 

  686.                     </li>
    687. 

  687.                     <i id="workspace_screenshot"
    688. 

  688.                         style="margin-left:5px;cursor: pointer;position: absolute;right: 350px;">
    689. 

  689.                         <img src="./images/screenshot.svg" style="width: 40px;height: 35px;margin:15px 0 0 0;" />
    690. 

  690.                     </i>
    691. 

  691.                     <i id="button_delete" class="material-icons sketch_name_icon right"
    692. 

  692.                         style="margin-left:5px;cursor: pointer;display: none;">delete</i>
    693. 

  693. 

  694.                     <li id="sketch_name-li" style="position: absolute;right: 135px;">
    695. 

  695.                         <input id="sketch_name" placeholder="请输入作品名称" class="sketch_name"
    696. 

  696.                             style="background: #fff;padding: 4px 10px 4px 7px;color:#222222;width:200px;font-style: initial;line-height: 30px; font-size: 14px;"
    697. 

  697.                             type="text">
    698. 

  698.                     </li>
    699. 

  699. 

  700.                     <li id="downloadbutton-li" style="position: absolute;right: 68px;">
    701. 

  701.                         <button id="downloadbutton" class="translatable_sketch_save"
    702. 

  702.                             style="color: #fff;font-weight: 700;background: #4A6AFF;border: none;font-size: 14px;padding:13px 20px 9px 20px;cursor: pointer;margin-top: 13px;">保存</button>
    703. 

  703.                     </li>
    704. 

  704. 

  705.                     <!-- App Center demo -->
    706. 

  706.                     <!-- <li>
    707. 

  707.                         <a id="app_center_title" href="#app_center_modal" class="modal-trigger lang_resize"
    708. 

  708.                             style="position:relative">
    709. 

  709.                             <span id="app_center_title_demo">
    710. 

  710.                                 <span class="translatable_labscenter">Labs</span>
    711. 

  711.                                 <img class="left nav-icon" src="./icons/cocoblockly-navbar_labs-icon.png">
    712. 

  712.                             </span>
    713. 

  713.                         </a>
    714. 

  714.                     </li> -->
    715. 

  715.                     <!-- <li>
    716. 

  716.                         <a id="nav_learn" class='dropdown-button lang_resize' data-activates="learn_board"
    717. 

  717.                             style="position:relative">
    718. 

  718.                             <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
    719. 

  719.                             <span class="translatable_learn_board">Files</span>
    720. 

  720.                             <img class="left nav-icon" src="./icons/learn_nav_icon.png">
    721. 

  721.                         </a>
    722. 

  722.                         <ul id='learn_board' class='dropdown-content'>
    723. 

  723.                             <li>
    724. 

  724.                                 <a href="//edu.cocorobo.cn/" target="_blank">
    725. 

  725.                                     <span class="translatable_cocoedu">Education Platform</span>
    726. 

  726.                                 </a>
    727. 

  727.                             </li>
    728. 

  728.                             <li class="divider"></li>
    729. 

  729.                             <li>
    730. 

  730.                                 <a href="//aihub.cocorobo.cn" target="_blank">
    731. 

  731.                                     <span class="translatable_learn_principle">Learn AI: Theory</span>
    732. 

  732.                                 </a>
    733. 

  733.                             </li>
    734. 

  734.                             <li class="divider"></li>
    735. 

  735.                             <li>
    736. 

  736.                                 <a href="//aihub.cocorobo.cn/vision" target="_blank">
    737. 

  737.                                     <span class="translatable_learn_vision">Learn AI: Vision</span>
    738. 

  738.                                 </a>
    739. 

  739.                             </li>
    740. 

  740.                             <li class="divider"></li>
    741. 

  741.                             <li>
    742. 

  742.                                 <a href="//aihub.cocorobo.cn/speech" target="_blank">
    743. 

  743.                                     <span class="translatable_learn_speech">Learn AI: Speech</span>
    744. 

  744.                                 </a>
    745. 

  745.                             </li>
    746. 

  746.                             <li class="divider"></li>
    747. 

  747.                             <li>
    748. 

  748.                                 <a href="//aihub.cocorobo.cn/text" target="_blank">
    749. 

  749.                                     <span class="translatable_learn_text">Learn AI: Text</span>
    750. 

  750.                                 </a>
    751. 

  751.                             </li>
    752. 

  752.                             <li class="divider"></li>
    753. 

  753.                             <li>
    754. 

  754.                                 <a href="//beta.aihub.cocorobo.cn/art" target="_blank">
    755. 

  755.                                     <span class="translatable_learn_art">Learn AI: Art</span>
    756. 

  756.                                 </a>
    757. 

  757.                             </li>
    758. 

  758.                         </ul>
    759. 

  759.                     </li> -->
    760. 

  760.                     <!-- <li>
    761. 

  761.                         target="_blank"
    762. 

  762.                         <a id="help" style="display: none;" class='dropdown-button lang_resize'
    763. 

  763.                             href="//x.help.cocorobo.cn" style="position:relative">
    764. 

  764.                             <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
    765. 

  765.                             <span class="translatable_help_board">Help</span>
    766. 

  766.                             <img class="left nav-icon" src="./icons/nav_help.png">
    767. 

  767.                         </a>
    768. 

  768.                     </li> -->
    769. 

  769.                     <!-- <li>
    770. 

  770.                         <a target="_blank" id="nav_journal" class='dropdown-button lang_resize' href="/md.html"
    771. 

  771.                             style="position:relative">
    772. 

  772.                             <span class="translatable_journal">日志</span>
    773. 

  773.                             <img class="left nav-icon" src="./icons/news.png">
    774. 

  774.                         </a>
    775. 

  775.                     </li> -->
    776. 

  776.                     <!-- <li>
    777. 

  777. 

  778.                         <a id="help" class='dropdown-button lang_resize' target="_blank" href="//x-help.cocorobo.cn"
    779. 

  779.                             style="position:relative">
    780. 

  780.                             <i class="material-icons left" style="margin-right: 5px;font-size: 34px;">help_outline</i>
    781. 

  781.                             <span class="translatable_help_board">Help</span>
    782. 

  782.                             <img class="left nav-icon" src="./icons/nav_help.png">
    783. 

  783.                         </a>
    784. 

  784.                         <a id="nav_devices" class='dropdown-button lang_resize' style="position:relative">
    785. 

  785.                             <span class="translatable_devices">Devices</span>
    786. 

  786.                             <img class="left nav-icon" src="./icons/Devices.png">
    787. 

  787.                         </a>
    788. 

  788.                     </li> -->
    789. 

  789.                     <!-- <li style="display: block;">
    790. 

  790.                         <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen'
    791. 

  791.                             style="position:relative">
    792. 

  792.                             <span class="translatable_storage">Files</span>
    793. 

  793.                             <img class="left nav-icon" src="./icons/local_storage.png">
    794. 

  794.                         </a>
    795. 

  795.                         <ul id='local_saveOrOpen' class='dropdown-content' style="top:62px">
    796. 

  796.                             <li id="button_cloud" class='modal-trigger' href="#cloud_storage_modal">
    797. 

  797.                                 <span class="translatable_cloud_storage">Cloud</span>
    798. 

  798.                             </li>
    799. 

  799.                             <li class="divider"></li>
    800. 

  800.                             <li id="button_load">
    801. 

  801.                                 <span class="translatable_import">Import</span>
    802. 

  802.                             </li>
    803. 

  803.                             <li class="divider"></li>
    804. 

  804.                             <li id="button_save">
    805. 

  805.                                 <span class="translatable_export">Export</span>
    806. 

  806.                             </li>
    807. 

  807.                         </ul>
    808. 

  808.                         <div id="fileImport" class="btn" style="display:none;">
    809. 

  809.                             <input type="file" accept=".py">
    810. 

  810.                         </div>
    811. 

  811.                         <div id="xmlFileImport" class="btn" style="display:none;">
    812. 

  812.                             <input type="file" accept=".xml">
    813. 

  813.                         </div>
    814. 

  814.                         <div id="pyFileImport" class="btn" style="display:none;">
    815. 

  815.                             <input type="file" accept=".py">
    816. 

  816.                         </div>
    817. 

  817.                     </li> -->
    818. 

  818.                     <!-- <li>
    819. 

  819.                         <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages'
    820. 

  820.                             style="position:relative">
    821. 

  821.                             <span class="translatable_language">Language</span>
    822. 

  822.                             <img class="left nav-icon" src="./icons/language2.png">
    823. 

  823.                         </a>
    824. 

  824.                         <ul id='languages' class='dropdown-content active'>
    825. 

  825.                             <li onclick="changeLanguage('en')">
    826. 

  826.                                 <a>English</a>
    827. 

  827.                             </li>
    828. 

  828.                             <li class="divider"></li>
    829. 

  829.                             <li onclick="changeLanguage('zh-hant')">
    830. 

  830.                                 <a>繁体中文</a>
    831. 

  831.                             </li>
    832. 

  832.                             <li class="divider"></li>
    833. 

  833.                             <li onclick="changeLanguage('zh-hans')">
    834. 

  834.                                 <a>简体中文</a>
    835. 

  835.                             </li>
    836. 

  836.                         </ul>
    837. 

  837.                     </li> -->
    838. 

  838.                     <!-- <li>
    839. 

  839.                         <span class="vertical-separator"></span>
    840. 

  840.                     </li> -->
    841. 

  841.                     <!-- <li>
    842. 

  842.                         <a id="nav_account" href="#login_modal" class="modal-trigger lang_resize"
    843. 

  843.                             style="position:relative"
    844. 

  844.                             onclick="$('#api-key').html(''); $('#api-key').html($('#cloud_events').val()); document.getElementById('api-key').value = $('#cloud_events').val();">
    845. 

  845.                             <span id="account_alias"></span>
    846. 

  846.                             <button id="account_loginTitle" class="translatable_login_title"
    847. 

  847.                                 style="color: #fff;font-weight: 500;width: 80px;height: 35px;border-radius: 30px;background: #fff0;border: 2px solid #fff;margin: 0 0 0 15px;">Login</button>
    848. 

  848.                             <span id="account_loginTitle" class="translatable_login_title">Login</span>
    849. 

  849.                             <img class="nav-icon2 left" src="./icons/user.png">
    850. 

  850.                         </a>
    851. 

  851.                     </li> -->
    852. 

  852.                     <!--<li>
    853. 

  853.                         <a id="back_home" class="lang_resize" target="_blank" href="//cocorobo.cn/online/"
    854. 

  854.                             style="position:relative">
    855. 

  855.                             <img class="nav-icon2" src="./icons/home_icon.png">
    856. 

  856.                         </a>
    857. 

  857.                     </li> -->
    858. 

  858.                 </ul>
    859. 

  859.             </div>
    860. 

  860.         </nav>
    861. 

  861.         <!-- shadow -->
    862. 

  862.         <div id="main_shadow" class="shadowbox" style="display:none;">
    863. 

  863.             <div id="shadow_content" class="shadow_container">
    864. 

  864.                 <div class="shadow_top">
    865. 

  865.                     <img src="./images/drag_import.png" style="width:200px">
    866. 

  866.                     <p class="translatable_drag_import">Drag and drop your file to here</p>
    867. 

  867.                 </div>
    868. 

  868.             </div>
    869. 

  869.         </div>
    870. 

  870.         <!-- Content -->
    871. 

  871.         <div id="main_content" style=" width:100%;">
    872. 

  872.             <div id="term" style=" width:100%; height:70%;display:none">
    873. 

  873.             </div>
    874. 

  874.             <div style="height:100%;" id="blockpy-div">
    875. 

  875.                 <div>
    876. 

  876.                     <div id='blockpy-content'>
    877. 

  877.                         <div class="blockpy-editor">
    878. 

  878.                             <div class="white blockpy-blocks blockpy-editor-menu"> <img id="fullscreenIcon"
    879. 

  879.                                     class="fullscreenIcon" src="./images/icon-fullscreen.svg"> <img
    880. 

  880.                                     id="fullscreenExitIcon" class="fullscreenIcon hidden"
    881. 

  881.                                     src="./images/icon-fullscreen-exit.svg">
    882. 

  882.                                 <div class='blockly-div' style="width:100%;height:100%;"></div>
    883. 

  883.                             </div>
    884. 

  884.                         </div>
    885. 

  885.                         <div id='sss' style='display:block;overflow: auto;'>
    886. 

  886.                             <div id="py-editor" class="blockpy-editor card-panel"
    887. 

  887.                                 style='height:calc(100% - 243px);display:block;overflow:auto'>
    888. 

  888.                                 <div class="card-header"
    889. 

  889.                                     style='position:relative;height: 45px;line-height: 45px;background: #E6F1FF;border-bottom: unset;'>
    890. 

  890.                                     <span id="python_SourceCode" class="header-text translate-code
    891. 

  891.                                             translatable_pythonSourceCode switch_box switch_select"
    892. 

  892.                                         style='margin-left: 0px;'>Python
    893. 

  893.                                         Source Code</span>
    894. 

  894.                                     <span id="Serial_Interaction"
    895. 

  895.                                         class="header-text translatable_serial_plotter switch_box1">串口数据显示</span>
    896. 

  896.                                     <span id="Serial_Display"
    897. 

  897.                                         class="header-text translatable_serial_visualization switch_box2">串口数据可视化</span>
    898. 

  898. 

  899.                                 </div>
    900. 

  900.                                 <div style="position: relative;">
    901. 

  901.                                     <a class="blockpy-toolbar-edit" style="position:absolute;top: 5px;right:
    902. 

  902.                                     130px;"> <img id="edit-off" src="./images/icon-edit.svg"
    903. 

  903.                                             style="margin-top: 7px;display: block;">
    904. 

  904.                                         <img id="edit-on" src="./images/icon-edit-on.svg"
    905. 

  905.                                             style="margin-top: 7px;display: none;">
    906. 

  906.                                     </a>
    907. 

  907.                                     <a class="copy_code" style="position:absolute;top: 5px;right: 95px;"
    908. 

  908.                                         data-clipboard-action="copy">
    909. 

  909.                                         <img id="copy_code_view" src="./images/icon-view.svg" style="margin-top:7px;">
    910. 

  910.                                     </a>
    911. 

  911.                                     <a class="blockpy-toolbar-download" class='modal-trigger'
    912. 

  912.                                         href="#donload_file_cocorobo" style="position:absolute;top: 5px;right:
    913. 

  913.                                     59px;"> <img id="blockpy-toolbar-download" src="./images/icon-download.svg"
    914. 

  914.                                             style="margin-top: 7px;">
    915. 

  915.                                     </a>
    916. 

  916.                                     <a class="blockpy-toolbar-upload" style="position:absolute;top: 5px;right: 25px;">
    917. 

  917.                                         <img id="blockpy-toolbar-upload" class="modal-trigger"
    918. 

  918.                                             href="#cloud_storage_name_modal" src="./images/icon-upload.svg"
    919. 

  919.                                             style="margin-top: 7px;"> </a>
    920. 

  920.                                     <img class="fullscreenIcon hidden" src="./images/icon-fullscreen.svg">
    921. 

  921.                                     <img class="fullscreenIcon hidden" src="./images/icon-fullscreen-exit.svg">
    922. 

  922. 

  923.                                     <!-- <i id="repl_delete" class="material-icons sketch_name_icon right"
    924. 

  924.                                         style="margin-left: 20px;cursor: pointer;position: absolute;top: 12px;right: 0px;display:none;">delete</i> -->
    925. 

  925.                                         <a  id="repl_delete" class="waves-effect waves-light btn" style="
    926. 

  926.                                         padding:0 0.5rem;border-radius: 3px;height: 36px;
    927. 

  927.                                         margin:0 20px;cursor: pointer;position: absolute;top: 12px;right: 0px;display:none;background-color: #ADADAD !important;
    928. 

  928.                                         ">
    929. 

  929.                                             <span style="font-size: 14px;color: #FFFFFF;letter-spacing: 0;" class="translatable_Clear_data">清除数据</span>
    930. 

  930.                                         </a>
    931. 

  931.                                 </div>
    932. 

  932.                                 <div class="card-content"
    933. 

  933.                                     style="position:relative;height: calc(100% - 90px);overflow:auto;margin-top: 45px;"
    934. 

  934.                                     id="python_box">
    935. 

  935. 

  936.                                     <div class="editDiv" id="editDiv" style="top: 0;width: 100%;left: 0;padding: 0;z-index: 0;
    937. 

  937.                                         right: 0;">
    938. 

  938.                                         <!-- <span class="translatable_editing">Enable Editing</span>
    939. 

  939.                                         <span style="display: none;" class="translatable_close_editing">Close
    940. 

  940.                                             Editing</span> -->
    941. 

  941.                                         <input type="checkbox" id="toggle-button" style="display: none;">
    942. 

  942.                                         <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
    943. 

  943.                                         <label for="toggle-button" class="button-label" style="display: none;">
    944. 

  944.                                             <span class="circle"></span>
    945. 

  945.                                             <span class="text on"></span>
    946. 

  946.                                             <span class="text off"></span>
    947. 

  947.                                         </label>
    948. 

  948. 

  949.                                     </div>
    950. 

  950. 

  951. 

  952.                                     <div class="blockpy-toolbar" style="position: absolute;top: 0;width: 100%;">
    953. 

  953.                                         <div class='blockpy-text blockpy-editor-menu'>
    954. 

  954.                                             <div class='blockpy-text-sidebar'></div>
    955. 

  955.                                             <textarea readonly class='codemirror-div language-python'></textarea>
    956. 

  956.                                         </div>
    957. 

  957.                                         <div class="edit" id="edit"></div>
    958. 

  958.                                         <!-- <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>-->
    959. 

  959.                                     </div>
    960. 

  960.                                 </div>
    961. 

  961.                                 <div class="card-content hidden"
    962. 

  962.                                     style="position:relative;height: calc(100% - 90px);overflow:auto;padding:5px 10px;background-color: #fff; color: #000;margin-top: 45px;"
    963. 

  963.                                     id="repl_box">
    964. 

  964.                                     <div class="editDiv" id="editDiv" style="width: 100%;left: -10px;padding: 0;">
    965. 

  965.                                         <span class="translatable_serial_plotter serial-active" id="switchSerial1"
    966. 

  966.                                             onclick="switchSerial('1')" style="display: none;">The
    967. 

  967.                                             data to print</span>
    968. 

  968.                                         <span class="translatable_serial_visualization" id="switchSerial2"
    969. 

  969.                                             onclick="switchSerial('2')" style="display: none;">Visual
    970. 

  970.                                             display</span>
    971. 

  971.                                     </div>
    972. 

  972.                                     <div class="blockpy-toolbar" id="repl_box_content"
    973. 

  973.                                         style="display:block;padding-top:35px;">
    974. 

  974.                                     </div>
    975. 

  975.                                     <div style="width: 100%;height: calc(100% - 50px);display: none;margin: 35px 0 10px 0;position: relative;"
    976. 

  976.                                         id="echartsShow">
    977. 

  977.                                         <div id="echartsMain" class="echartsMain"></div>
    978. 

  978.                                         <div id="echartsMains" style="display: none;">
    979. 

  979.                                             <span id="echartsMainSpan"></span>
    980. 

  980.                                         </div>
    981. 

  981.                                     </div>
    982. 

  982.                                 </div>
    983. 

  983.                                 <!-- <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> -->
    984. 

  984.                             </div>
    985. 

  985.                             <div class='blockpy-content-left card-panel card'
    986. 

  986.                                 style='display: block;background: #f8f8f8;min-height: 243px;position:relative;'>
    987. 

  987.                                 <div class="card-header"
    988. 

  988.                                     style='height: 60px;line-height: 60px;background: #E6F1FF;text-align: center;'>
    989. 

  989.                                     <!-- http://help.cocorobo.cn/#/getting-started/info target="_blank"-->
    990. 

  990.                                     <div style='float:right;display: none;'>
    991. 

  991.                                         <a class="header-link upload_instruction" style="display: none;" href="#"
    992. 

  992.                                             data-tooltip-id="61c522fa-be27-2a3e-1f2d-cde212348740">
    993. 

  993.                                             <img src="./icons/instruction.png">
    994. 

  994.                                         </a>
    995. 

  995.                                         <a id="plugin_download" class="header-link" href="javaScript:(0)"
    996. 

  996.                                             data-tooltip-id="9e546554-688a-01c7-cde3-faaff99b557d"> <img
    997. 

  997.                                                 src="./icons/plugin_download.png">
    998. 

  998.                                             <img style="position:absolute;height:10px;right:45px;bottom:32px; display:none; "
    999. 

  999.                                                 src="./icons/icon_new.png">
    1000. 

  1000.                                         </a>
    1001. 

  1001.                                         <a href="#iframe" class="modal-trigger header-link" id="showIframe">
    1002. 

  1002.                                             <img src="./icons/firmware.png">
    1003. 

  1003.                                         </a>
    1004. 

  1004.                                         <!-- <a href="#updatePy" class="modal-trigger header-link">
    1005. 

  1005.                                             <img src="./icons/加载.png">
    1006. 

  1006.                                         </a> -->
    1007. 

  1007.                                         <label class="hidden"><input type="checkbox" class="filled-in" />
    1008. 

  1008.                                             <span class="translatable_Adapter_fill_connected filled-in_nocheked"
    1009. 

  1009.                                                 style="color: #26a69a;font-size: 17px;font-weight: 600;">Adapter is
    1010. 

  1010.                                                 disconnected</span>
    1011. 

  1011.                                         </label>
    1012. 

  1012.                                     </div>
    1013. 

  1013.                                     <!--<span class="header-icon"><img style="width: 30px;margin: 8px 8px 8px 20px;" src="./images/zhixing.png"> </span>-->
    1014. 

  1014.                                     <span class="header-text translate-code translatable_title_device"
    1015. 

  1015.                                         style='font-weight: 800;font-size: 20px;margin-left: 25px;display: none;'>Device</span>
    1016. 

  1016.                                     <div style="display: none;margin-left: 20px;"><select class="select-connected "
    1017. 

  1017.                                             id="select-connected">
    1018. 

  1018.                                             <option class="select-connected translatable_select_connecteds"
    1019. 

  1019.                                                 style="color: #000;">The
    1020. 

  1020.                                                 cable to upload</option>
    1021. 

  1021.                                             <option style="color: #000;" class="translatable_no_select_connecteds">
    1022. 

  1022.                                                 Wireless cable
    1023. 

  1023.                                                 upload</option>
    1024. 

  1024.                                         </select></div>
    1025. 

  1025.                                     <!-- <div id="discnt_icon" style="float: left;">
    1026. 

  1026.                                         <a href="#env_detect" class="modal-trigger"><img
    1027. 

  1027.                                                 style="height:17px;margin-left:8px;transform:translateY(2px);"
    1028. 

  1028.                                                 src="./icons/uploader_disconnect.png"></a>
    1029. 

  1029.                                     </div>
    1030. 

  1030.                                     <div id="cnt_icon" style="display:none;float: left;"><img
    1031. 

  1031.                                             style="height:17px;margin-left:8px;transform:translateY(2px);"
    1032. 

  1032.                                             src="./icons/uploader_connect.png"></div> -->
    1033. 

  1033. 

  1034.                                     <span id="device_connect_status" class="translatable_device_no_connect"
    1035. 

  1035.                                         style="color: #2D2F33;font-size: 16px;font-weight: bold;">硬件（未连接）</span>
    1036. 

  1036. 

  1037.                                     <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
    1038. 

  1038.                                     waves-light blue  disabled"
    1039. 

  1039.                                         style="margin-right:0.5rem;background-color: #E6F1FF !important;float: right;margin-top: 10px;">
    1040. 

  1040.                                         <!-- <span id="resetDevice">Reset Device</span> -->
    1041. 

  1041. 

  1042.                                         <!-- <img id="refresh-disabled" src="./images/icon-refresh-disabled.svg"
    1043. 

  1043.                                             style="margin-top: 7px;display: block;"> -->
    1044. 

  1044.                                         <img id="refresh" src="./images/icon-refresh.svg"
    1045. 

  1045.                                             style="margin-top: 7px;display: block;">
    1046. 

  1046.                                         <img id="refresh-press" src="./images/icon-refresh-press.svg"
    1047. 

  1047.                                             style="margin-top: 7px;display: none;">
    1048. 

  1048.                                     </a>
    1049. 

  1049.                                 </div>
    1050. 

  1050.                                 <!--<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>-->
    1051. 

  1051.                                 <!--<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>-->
    1052. 

  1052.                                 <div class="card-content"
    1053. 

  1053.                                     style="padding:0 10px;width:100%;height: 183px;background: #FFFFFF;">
    1054. 

  1054.                                     <div class="row" id="status" style="display: none;">
    1055. 

  1055.                                         <div class="col s12"><img id="error-btn" class="activator"
    1056. 

  1056.                                                 src="./icons/error.png">
    1057. 

  1057.                                             <span id="status_bar" class="translatable_statusbar">直接将代码上传到电子模块中。</span>
    1058. 

  1058.                                         </div>
    1059. 

  1059.                                     </div>
    1060. 

  1060. 

  1061.                                     <div class="row" style="width: 100%;margin: 0;margin-top: 20px;">
    1062. 

  1062.                                         <div id="uploader-btns" class="col s7">
    1063. 

  1063.                                             <a onclick='sendfile();' id="send_file" class="waves-effect
    1064. 

  1064.                                                     waves-light btn blue disabled" style="padding:0 0.5rem;border-radius: 3px;
    1065. 

  1065.                                                 width: 88px;height: 36px;">
    1066. 

  1066.                                                 <!-- <i style="cursor: pointer;" class="fa fa-play-circle"
    1067. 

  1067.                                                     aria-hidden="true"></i> -->
    1068. 

  1068.                                                 <img src="./images/run.svg"
    1069. 

  1069.                                                     style="vertical-align: middle;cursor: pointer;margin-right: 5px;">
    1070. 

  1070.                                                 <span id="runCode"
    1071. 

  1071.                                                     style="font-size: 14px;color: #FFFFFF;letter-spacing: 0;"></span>
    1072. 

  1072.                                             </a>
    1073. 

  1073.                                             <a onclick="uploadpyfile()" id="uploadpy" class="waves-effect
    1074. 

  1074.                                             waves-light btn blue disabled" style="padding:0 0.5rem;border-radius: 3px;
    1075. 

  1075.                                             width: 88px;height: 36px;margin: 0px 0px 0 25px;">
    1076. 

  1076.                                                 <!-- <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i> -->
    1077. 

  1077.                                                 <img src="./images/uploadCode.svg"
    1078. 

  1078.                                                     style="vertical-align: middle;cursor: pointer;margin-right: 5px;">
    1079. 

  1079.                                                 <span id="uploadFiles"
    1080. 

  1080.                                                     style="font-size: 14px;color: #FFFFFF;letter-spacing: 0;"></span>
    1081. 

  1081.                                             </a>
    1082. 

  1082.                                             <div style="float: right;">
    1083. 

  1083.                                                 <li style="display: none;">
    1084. 

  1084.                                                     <ul id="localsssssaveOrOpen" class="dropdown-content active">
    1085. 

  1085.                                                         <li style="padding: 14px 16px;" onclick="uploadfile(true)">
    1086. 

  1086.                                                             <a>开机启动可视化菜单界面</a></li>
    1087. 

  1087.                                                         <li style="padding: 14px 16px;" onclick="uploadfile(false)">
    1088. 

  1088.                                                             <a>开机运行上次的程序</a></li>
    1089. 

  1089.                                                     </ul>
    1090. 

  1090.                                                     <a id="qiehuanbtn"
    1091. 

  1091.                                                         class="qiehuanbtn btn dropdown-trigger blue lang_resize dropdown-button disabled"
    1092. 

  1092.                                                         data-activates="localsssssaveOrOpen"><span
    1093. 

  1093.                                                             id="runCuploadFilesode">更换启动模式</span><i
    1094. 

  1094.                                                             class="material-icons right"
    1095. 

  1095.                                                             style="margin-left: 0;">arrow_drop_down</i></a>
    1096. 

  1096.                                                 </li>
    1097. 

  1097.                                                 <!-- <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
    1098. 

  1098.                                                     waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
    1099. 

  1099.                                                         id="resetDevice">Reset Device</span></a> -->
    1100. 

  1100.                                             </div>
    1101. 

  1101.                                         </div>
    1102. 

  1102.                                         <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
    1103. 

  1103.                                             style="display:none"><span id="gettype">Upload
    1104. 

  1104.                                                 files</span></a>
    1105. 

  1105. 

  1106.                                         <div class="col s5 btn-network" style="padding-right:1px;">
    1107. 

  1107.                                             <div class="select-wrapper initialized">
    1108. 

  1108.                                                 <!-- <span class="caret">▼</span> -->
    1109. 

  1109.                                                 <i class="down"style="position: relative;top: 25px;left: 0px;float: right;border-width: 6px;border-color: #ccc transparent transparent transparent;z-index: 99;"></i>
    1110. 

  1110.                                                 <input type="text" class="select-dropdown" id="select_dropdown"
    1111. 

  1111.                                                     readonly="true"
    1112. 

  1112.                                                     data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
    1113. 

  1113.                                                     value="">
    1114. 

  1114.                                                 <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
    1115. 

  1115.                                                                 select-dropdown ">
    1116. 

  1116.                                                     <li class="disabled "><span></span></li>
    1117. 

  1117.                                                 </ul><select id="ports"
    1118. 

  1118.                                                     data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
    1119. 

  1119.                                                     class="initialized">
    1120. 

  1120.                                                     <option value="null" disabled=""></option>
    1121. 

  1121.                                                 </select>
    1122. 

  1122.                                             </div>
    1123. 

  1123.                                         </div>
    1124. 

  1124. 

  1125.                                         <div class="col s5 btn-network hidden" style="padding-right:1px;width: 50%;">
    1126. 

  1126.                                             <div class="select-wrapper initialized" style='width: 61%;float: left;'>
    1127. 

  1127.                                                 <input type="text" class="select-dropdown" data-activates=""
    1128. 

  1128.                                                     id='ipAddress' placeholder="请输入ip地址">
    1129. 

  1129.                                             </div>
    1130. 

  1130.                                             <div style='display:inline-block'><a onclick='button_click();' class="waves-effect waves-light
    1131. 

  1131.                                                         btn blue" style="margin-left: 0.5rem;margin-top: 4px;"><span
    1132. 

  1132.                                                         id="ConnectBtn">Connect
    1133. 

  1133.                                                         </spanbutton_click></a></div>
    1134. 

  1134.                                         </div>
    1135. 

  1135.                                     </div>
    1136. 

  1136. 

  1137.                                     <!-- <div class="row btn-network">
    1138. 

  1138.                                         <div class="col s6" style="padding-right:1px;">
    1139. 

  1139.                                             <div class="select-wrapper initialized"><span class="caret">▼</span><input
    1140. 

  1140.                                                     type="text" class="select-dropdown" id="select_dropdown"
    1141. 

  1141.                                                     readonly="true"
    1142. 

  1142.                                                     data-activates="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698"
    1143. 

  1143.                                                     value="检测不到连接端口">
    1144. 

  1144.                                                 <ul id="select-options-eca84f35-6884-7dc4-9d8b-c14115abe698" class="dropdown-content
    1145. 

  1145.                                                         select-dropdown ">
    1146. 

  1146.                                                     <li class="disabled "><span>检测不到连接端口</span></li>
    1147. 

  1147.                                                 </ul><select id="ports"
    1148. 

  1148.                                                     data-select-id="eca84f35-6884-7dc4-9d8b-c14115abe698"
    1149. 

  1149.                                                     class="initialized">
    1150. 

  1150.                                                     <option value="null" disabled="">检测不到连接端口</option>
    1151. 

  1151.                                                 </select>
    1152. 

  1152.                                             </div>
    1153. 

  1153.                                         </div>
    1154. 

  1154.                                     </div> -->
    1155. 

  1155.                                     <!-- <div class="row btn-network hidden">
    1156. 

  1156.                                         <div id="uploader-btns" class="col s6">
    1157. 

  1157.                                             <a onclick='sendfile();' id="send_file" class="waves-effect
    1158. 

  1158.                                                     waves-light btn blue disabled"
    1159. 

  1159.                                                 style="margin-right:0.5rem;padding:0 0.5rem;">
    1160. 

  1160.                                                 <i style="cursor: pointer;" class="fa fa-play-circle"
    1161. 

  1161.                                                     aria-hidden="true"></i>
    1162. 

  1162.                                                 <span id="runCode"></span>
    1163. 

  1163.                                             </a>
    1164. 

  1164.                                             <a onclick="uploadpyfile()" id="uploadpy" class="waves-effect
    1165. 

  1165.                                             waves-light btn blue disabled" style="padding:0 0.5rem;">
    1166. 

  1166.                                                 <i style="cursor: pointer;" class="fa fa-upload" aria-hidden="true"></i>
    1167. 

  1167.                                                 <span id="uploadFiles"></span>
    1168. 

  1168.                                             </a>
    1169. 

  1169.                                             <div style="float: right;">
    1170. 

  1170.                                                 <li style="display: none;">
    1171. 

  1171.                                                     <ul id="localsssssaveOrOpen" class="dropdown-content active">
    1172. 

  1172.                                                         <li style="padding: 14px 16px;" onclick="uploadfile(true)">
    1173. 

  1173.                                                             <a>开机启动可视化菜单界面</a></li>
    1174. 

  1174.                                                         <li style="padding: 14px 16px;" onclick="uploadfile(false)">
    1175. 

  1175.                                                             <a>开机运行上次的程序</a></li>
    1176. 

  1176.                                                     </ul>
    1177. 

  1177.                                                     <a id="qiehuanbtn"
    1178. 

  1178.                                                         class="qiehuanbtn btn dropdown-trigger blue lang_resize dropdown-button disabled"
    1179. 

  1179.                                                         data-activates="localsssssaveOrOpen"><span
    1180. 

  1180.                                                             id="runCuploadFilesode">更换启动模式</span><i
    1181. 

  1181.                                                             class="material-icons right"
    1182. 

  1182.                                                             style="margin-left: 0;">arrow_drop_down</i></a>
    1183. 

  1183.                                                 </li>
    1184. 

  1184.                                                 <a id="send_string" onclick="sendstring('machine.reset()')" class="waves-effect
    1185. 

  1185.                                                     waves-light btn blue  disabled" style="margin-right:0.5rem;"><span
    1186. 

  1186.                                                         id="resetDevice">Reset Device</span></a>
    1187. 

  1187.                                             </div>
    1188. 

  1188.                                         </div>
    1189. 

  1189.                                         <a onclick="getmcnty()" class="waves-effect waves-light btn blue"
    1190. 

  1190.                                             style="display:none"><span id="gettype">Upload
    1191. 

  1191.                                                 files</span></a>
    1192. 

  1192. 

  1193.                                         
    1194. 

  1194.                                     </div> -->
    1195. 

  1195. 

  1196.                                     <div class="row" id="uploader_connect_status"
    1197. 

  1197.                                         style="margin-top: 16px;display: block;">
    1198. 

  1198.                                         <div class="col s12">
    1199. 

  1199.                                             <div style="margin:7px 0;">
    1200. 

  1200.                                                 <span class="translatable_uploader_connect_status"
    1201. 

  1201.                                                     style="font-size: 16px;color: #3D3D3D;letter-spacing: 0;">请到"连接"下载安装程序并连接硬件。</span>
    1202. 

  1202.                                             </div>
    1203. 

  1203.                                         </div>
    1204. 

  1204.                                     </div>
    1205. 

  1205. 

  1206.                                     <div class="row" id="progress" style="margin-top: 16px;display: none;">
    1207. 

  1207.                                         <div class="col s12">
    1208. 

  1208.                                             <div class="progress" style="margin:7px 0;">
    1209. 

  1209.                                                 <div class="determinate green" style="width:0%;"></div>
    1210. 

  1210.                                             </div>
    1211. 

  1211.                                         </div>
    1212. 

  1212.                                     </div>
    1213. 

  1213. 

  1214.                                     <div class="row">
    1215. 

  1215.                                         <div class="col s6" style="float: right;">
    1216. 

  1216.                                             <div style="float: right;">
    1217. 

  1217.                                                 <div style="display: inline-block;vertical-align: middle;">
    1218. 

  1218.                                                     <img id="runSuccess" src="./images/success.svg"
    1219. 

  1219.                                                         style="display: none;" />
    1220. 

  1220.                                                     <img id="runFail" src="./images/fail.svg" style="display: none;" />
    1221. 

  1221.                                                 </div>
    1222. 

  1222.                                                 <div style="display: inline-block;">
    1223. 

  1223.                                                     <span id="statusMsg" style="display: none;"></span>
    1224. 

  1224.                                                 </div>
    1225. 

  1225. 

  1226.                                             </div>
    1227. 

  1227.                                         </div>
    1228. 

  1228.                                     </div>
    1229. 

  1229.                                 </div>
    1230. 

  1230.                                 <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
    1231. 

  1231.                                         center;">
    1232. 

  1232.                                     <div class="btn-toolbar-title">直接将代码上传到电子模块中<div></div>
    1233. 

  1233.                                     </div>
    1234. 

  1234.                                     <div class="btn-toolbar-inputbox"><input type="text" name="webrepl_url" id="url"
    1235. 

  1235.                                             placeholder="Select a device"><input type="submit" id='button'
    1236. 

  1236.                                             value='Connect' onclick='button_click(); return false'></div>
    1237. 

  1237.                                     <div class="btn-toolbar-btnbox"></div>
    1238. 

  1238.                                     <!--<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>-->
    1239. 

  1239.                                     <!--<button class='waves-effect waves-light btn blue blockpy-run translate-execute'>UPLOAD</button>-->
    1240. 

  1240.                                     <!-- <button href="#aiymodal" class='waves-effect waves-light btn blue modal-trigger'>run on aiy</button> -->
    1241. 

  1241.                                     <!--<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>-->
    1242. 

  1242.                                 </div>
    1243. 

  1243.                                 <div class="blockpy-toolbar btn-toolbar hidden" style="align-self:center;margin: 20px 8px 0;text-align:
    1244. 

  1244.                                         center;">
    1245. 

  1245.                                     <div class="btn-toolbar-title2">直接将代码上传到电子模块中 <div></div>
    1246. 

  1246.                                     </div>
    1247. 

  1247.                                     <div class="btn-toolbar-inputbox2"><select>
    1248. 

  1248.                                             <option></option>
    1249. 

  1249.                                         </select></div>
    1250. 

  1250.                                 </div>
    1251. 

  1251.                                 <div class="card-reveal grey darken-3 white-text" style="padding:8px 13px;">
    1252. 

  1252.                                     <div class="card-title" style="height:18%;margin-bottom:2px;">
    1253. 

  1253.                                         <span class="translatable_errmsg" style="font-weight:normal;">Error
    1254. 

  1254.                                             Message</span>
    1255. 

  1255.                                         <a id="err-copy" style="display:inline-block;margin-left:26px;"
    1256. 

  1256.                                             data-clipboard-action="copy" data-clipboard-target="#err-msg">
    1257. 

  1257.                                             <i class="material-icons right"
    1258. 

  1258.                                                 style="color:#fff;font-size:18px;cursor:pointer;">content_copy</i>
    1259. 

  1259.                                         </a>
    1260. 

  1260.                                         <i class="material-icons right" style="cursor:pointer;">close</i>
    1261. 

  1261.                                     </div>
    1262. 

  1262.                                     <div style="width:100%;height:78%;">
    1263. 

  1263.                                         <textarea readonly id="err-msg"
    1264. 

  1264.                                             style="color:#fff;overflow:visible;font-size:14px;height:100%;resize:none;border:none;"></textarea>
    1265. 

  1265.                                     </div>
    1266. 

  1266.                                 </div>
    1267. 

  1267.                             </div>
    1268. 

  1268.                             <!-- <div class="card plugin_options options_hide">
    1269. 

  1269.                                 <div class="card-content">
    1270. 

  1270.                                     <div>
    1271. 

  1271.                                         <span id="downloadver" style="display:none">1.0.6</span>
    1272. 

  1272.                                         <a download=""
    1273. 

  1273.                                             href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.10.pkg"
    1274. 

  1274.                                             target="_black"><img src="./icons/mac-icon.png">Mac </a>
    1275. 

  1275.                                         <a download=""
    1276. 

  1276.                                             href="//cocorobo.cn/downloads/CocoBlocklyXUploaderInstallerv1.0.11.exe"
    1277. 

  1277.                                             target="_black"><img src="./icons/windows-icon.png">Windows </a> </div>
    1278. 

  1278.                                 </div>
    1279. 

  1279.                             </div> -->
    1280. 

  1280.                         </div>
    1281. 

  1281.                     </div>
    1282. 

  1282.                 </div>
    1283. 

  1283.                 <div class='modal blockpy-popup'>
    1284. 

  1284.                     <div class='modal-content' id='modal-message'>
    1285. 

  1285.                         <div class='modal-header'>
    1286. 

  1286.                             <h4 class='modal-title'>Dynamic Content</h4>
    1287. 

  1287.                         </div>
    1288. 

  1288.                         <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;">
    1289. 

  1289.                         <div class='modal-body' style='width:100%;min-height:200px;'> </div>
    1290. 

  1290.                     </div>
    1291. 

  1291.                     <div class='modal-footer'> <button
    1292. 

  1292.                             class='waves-effect waves-light btn blue modal-close translate-close'>close</button>
    1293. 

  1293.                     </div>
    1294. 

  1294.                 </div>
    1295. 

  1295.                 <div id="aiymodal" class="modal">
    1296. 

  1296.                     <div class="modal-content" height="50%">
    1297. 

  1297.                         <h4>Run on AIY</h4>
    1298. 

  1298.                         <p>This feature gives you the ability to run your AIY python code directly to the AIY Vision Kit
    1299. 

  1299.                             or Voice Kit, follow the instruction below:</p>
    1300. 

  1300.                         <div style="margin-top:30px;"> <b
    1301. 

  1301.                                 style="background-color:#fff; border-radius:25px;padding:
    1302. 

  1302.                                                         10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 1</b> </div>
    1303. 

  1303.                         <div style="margin-top:30px;"> Run the <b data-position="bottom" data-tooltip="I am a
    1304. 

  1304.                                                         tooltip" class="tooltipped">AIY Helper</b>, <a id="AIYdownload"
    1305. 

  1305.                                 style="cursor:pointer;">Download</a> the python code to local, <br />make sure you are
    1306. 

  1306.                             in the same network with the Google AIY Vision Kit. </div>
    1307. 

  1307.                         <div style="margin-top:30px;"> <b
    1308. 

  1308.                                 style="background-color:#fff; border-radius:25px;padding:
    1309. 

  1309.                                                         10px 20px; box-shadow: 1px 5px 23px -10px rgba(0,0,0,0.59);">Step 2</b> </div>
    1310. 

  1310.                         <div class="input-field col s9" style="margin-top:0px;"> Enter the IP Address of your Google
    1311. 

  1311.                             AIY Kit: <div class="input-field inline"> <input id="aiyip_input" class="validate">
    1312. 

  1312.                             </div> <a id="aiyModalRun" onclick="functionSSH();" style="margin-left:10px;"
    1313. 

  1313.                                 class="waves-effect blue waves-light btn">Run</a> <a id="aiyModalStop"
    1314. 

  1314.                                 onclick="functionSSHstop();" style="margin-left:10px;" class="waves-effect blue
    1315. 

  1315.                                                         waves-light btn">Stop</a>
    1316. 

  1316.                             <!-- <a id="aiyModalRun"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Run</a> -->
    1317. 

  1317.                             <!-- <a id="aiyModalStop"  style="margin-left:10px;" class="waves-effect blue waves-light btn">Stop</a> -->
    1318. 

  1318.                         </div>
    1319. 

  1319.                         <div id="modal_preload" style="display:none">
    1320. 

  1320.                             <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0
    1321. 

  1321.                                                         auto;">
    1322. 

  1322.                                 <div class="preloader-wrapper big active" style="top:0;left:0">
    1323. 

  1323.                                     <div class="spinner-layer spinner-blue-only">
    1324. 

  1324.                                         <div class="circle-clipper left">
    1325. 

  1325.                                             <div class="circle"></div>
    1326. 

  1326.                                         </div>
    1327. 

  1327.                                         <div class="gap-patch">
    1328. 

  1328.                                             <div class="circle"></div>
    1329. 

  1329.                                         </div>
    1330. 

  1330.                                         <div class="circle-clipper right">
    1331. 

  1331.                                             <div class="circle" style="border-width: 8px;"></div>
    1332. 

  1332.                                         </div>
    1333. 

  1333.                                     </div>
    1334. 

  1334.                                 </div>
    1335. 

  1335.                             </div>
    1336. 

  1336.                         </div>
    1337. 

  1337.                     </div>
    1338. 

  1338.                     <div class="modal-footer" style="margin-top:-20px;"> <a href="#!" class="modal-close
    1339. 

  1339.                                                     waves-effect waves-green btn-flat">Close</a> </div>
    1340. 

  1340.                 </div>
    1341. 

  1341.             </div>
    1342. 

  1342.             <!-- <ul id="icon-tool">
    1343. 

  1343.                 <li class="card-icon active" onclick="">
    1344. 

  1344.                     <i class="material-icons media">build</i>
    1345. 

  1345.                 </li>
    1346. 

  1346.                 <li id="file-tool" class="card-icon">
    1347. 

  1347.                     <i class="material-icons media">folder</i>
    1348. 

  1348.                 </li>
    1349. 

  1349.                 <li id="lang-tool" class="card-icon">
    1350. 

  1350.                     <i class="material-icons media">translate</i>
    1351. 

  1351.                 </li>
    1352. 

  1352.             </ul> -->
    1353. 

  1353.             <ul id="icon-tool" class="card-icon-area" style="display: none;">
    1354. 

  1354.                 <li class="card-icon active hidden" onclick="changeSideCard('code')">
    1355. 

  1355.                     <i class="material-icons media">build</i>
    1356. 

  1356.                 </li>
    1357. 

  1357.                 <li class="card-icon hidden" onclick="changeSideCard('monitor')">
    1358. 

  1358.                     <i class="material-icons ">search</i>
    1359. 

  1359.                 </li>
    1360. 

  1360.                 <!-- <li class="card-icon" onclick="changeSideCard('fullmode')">
    1361. 

  1361.                     <i class="material-icons ">crop_free</i>
    1362. 

  1362.                 </li> -->
    1363. 

  1363.                 <li id="bar_python" class="card-icon">
    1364. 

  1364.                     <a href="/python" target="_blank">
    1365. 

  1365.                         <img class="bar-icon" src="./icons/python_icon.png" style="height: 30px;">
    1366. 

  1366.                     </a>
    1367. 

  1367.                 </li>
    1368. 

  1368.                 <li id="lang-tool" class="card-icon">
    1369. 

  1369.                     <i class="material-icons">translate</i>
    1370. 

  1370.                 </li>
    1371. 

  1371.                 <li id="apps_center" class="card-icon modal-trigger" href="#app_center_modal" style="display:none;">
    1372. 

  1372.                     <img class="bar-icon Img-filter" src="./icons/cocoblockly-navbar_labs-icon.png">
    1373. 

  1373.                 </li>
    1374. 

  1374.                 <li id="bar_storage" class="card-icon">
    1375. 

  1375.                     <img class="bar-icon" src="./icons/storage_icon-blockly-widget.png">
    1376. 

  1376.                 </li>
    1377. 

  1377.                 <!-- http://help.cocorobo.cn/  target="_blank"-->
    1378. 

  1378.                 <li id="bar_help" class="card-icon">
    1379. 

  1379.                     <a href="//x-help.cocorobo.cn" target="_blank">
    1380. 

  1380.                         <img class="bar-icon" src="./icons/help_icon-blockly-widget.png">
    1381. 

  1381.                     </a>
    1382. 

  1382.                 </li>
    1383. 

  1383.                 <li id="bar_ai" class="card-icon" onclick="$('.MouduleBox')[1].style.display = 'block';">
    1384. 

  1384.                     <a href="#">
    1385. 

  1385.                         <img class="bar-icon" src="./icons/AIicon.png">
    1386. 

  1386.                     </a>
    1387. 

  1387.                 </li>
    1388. 

  1388.                 <li id="bar_t" class="card-icon modal-trigger" onclick="$('#ai_tt')[0].style.display = 'block';">
    1389. 

  1389.                     <a href="#">
    1390. 

  1390.                         <img class="bar-icon" src="./icons/l.png">
    1391. 

  1391.                     </a>
    1392. 

  1392.                 </li>
    1393. 

  1393.             </ul>
    1394. 

  1394.             <a id='side-lang-trigger' class='dropdown-button' data-activates='side-lang'></a>
    1395. 

  1395.             <!-- <div id='side-lang-trigger'>
    1396. 

  1396.                 <a class='dropdown-trigger' data-target='side-lang'></a>
    1397. 

  1397.             </div> -->
    1398. 

  1398.             <ul id="side-lang" class='dropdown-content'>
    1399. 

  1399.                 <li onclick="changeLanguage('en')">
    1400. 

  1400.                     <a>English</a>
    1401. 

  1401.                 </li>
    1402. 

  1402.                 <li class="divider"></li>
    1403. 

  1403.                 <li onclick="changeLanguage('zh-hant')">
    1404. 

  1404.                     <a>繁体中文</a>
    1405. 

  1405.                 </li>
    1406. 

  1406.                 <li class="divider"></li>
    1407. 

  1407.                 <li onclick="changeLanguage('zh-hans')">
    1408. 

  1408.                     <a>简体中文</a>
    1409. 

  1409.                 </li>
    1410. 

  1410.             </ul>
    1411. 

  1411.             <a id='side-storage-trigger' class='dropdown-button' data-activates='side-storage'></a>
    1412. 

  1412.             <ul id='side-storage' class='dropdown-content'>
    1413. 

  1413.                 <li class='modal-trigger' style="display:none;">
    1414. 

  1414.                     <span class="translatable_cloud_storage">Cloud</span>
    1415. 

  1415.                 </li>
    1416. 

  1416.                 <li class="divider"></li>
    1417. 

  1417.                 <li class='modal-trigger' href="#Storage_import_modal">
    1418. 

  1418.                     <span class="translatable_localimport">Import</span>
    1419. 

  1419.                 </li>
    1420. 

  1420.                 <li class="divider"></li>
    1421. 

  1421.                 <li class='modal-trigger' href="#Storage_export_modal">
    1422. 

  1422.                     <span class="translatable_localexport">Export</span>
    1423. 

  1423.                 </li>
    1424. 

  1424.             </ul>
    1425. 

  1425.             <div id='side-file-trigger'>
    1426. 

  1426.                 <a class='dropdown-trigger' data-target="side-file"></a>
    1427. 

  1427.             </div>
    1428. 

  1428.             <ul id='side-file' class='dropdown-content blockpy-toolbar'>
    1429. 

  1429.                 <li id="side_button_load">
    1430. 

  1430.                     <span class="translate_import">Import</span>
    1431. 

  1431.                 </li>
    1432. 

  1432.                 <li class="divider"></li>
    1433. 

  1433.                 <li id="side_button_save">
    1434. 

  1434.                     <span class="translate_export">Export</span>
    1435. 

  1435.                 </li>
    1436. 

  1436.             </ul>
    1437. 

  1437.         </div>
    1438. 

  1438.         <footer id="footer" style="display:none">
    1439. 

  1439.             <div style="padding:0 1.5rem">
    1440. 

  1440.                 <div><span class="translatable_copyright" style="color:#fff;">CocoRobo LTD © 2020 Copyright</span></div>
    1441. 

  1441.                 <div><span>CocoBlockly X</span></div>
    1442. 

  1442.             </div>
    1443. 

  1443.         </footer>
    1444. 

  1444.         <!-- app center modal -->
    1445. 

  1445.         <div id="app_center_modal" class="modal modal_closes">
    1446. 

  1446.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1447. 

  1447.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1448. 

  1448.             <div id="TM_login"></div>
    1449. 

  1449.             <div class="modal-content" style="padding: 20px;">
    1450. 

  1450.                 <span class="modal_close" style="padding: 15px;">
    1451. 

  1451.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    1452. 

  1452.                 </span>
    1453. 

  1453.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly X Labs</h4>
    1454. 

  1454.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    1455. 

  1455.                 <div class="row" style="text-align:left;">
    1456. 

  1456.                     <div style="float:center;" class="col s3">
    1457. 

  1457.                         <p class="translatable_app_center_all_categories" style="padding-bottom:0px;font-weight: bold">
    1458. 

  1458.                             All
    1459. 

  1459.                             Categories:</p>
    1460. 

  1460.                         <div id="center_categories" class="collection ">
    1461. 

  1461.                             <a name="center_ai"
    1462. 

  1462.                                 class="collection-item grey-text text-darken-4 active translatable_app_center_ai"
    1463. 

  1463.                                 onclick="ACCategorySelect(1)">Artificial Intelligence</a>
    1464. 

  1464.                             <a name="center_iot"
    1465. 

  1465.                                 class="collection-item grey-text text-darken-4 translatable_app_center_iot"
    1466. 

  1466.                                 onclick="ACCategorySelect(2)">Internet of Things</a>
    1467. 

  1467.                             <a name="center_robot"
    1468. 

  1468.                                 class="collection-item grey-text text-darken-4 translatable_app_center_robot"
    1469. 

  1469.                                 onclick="ACCategorySelect(3)">Robot Controller</a>
    1470. 

  1470.                             <a name="center_science"
    1471. 

  1471.                                 class="collection-item grey-text text-darken-4 translatable_app_center_science"
    1472. 

  1472.                                 onclick="ACCategorySelect(4)">Science Experiements</a>
    1473. 

  1473.                             <a name="center_game"
    1474. 

  1474.                                 class="collection-item grey-text text-darken-4 translatable_app_center_games"
    1475. 

  1475.                                 onclick="ACCategorySelect(5)">Games</a>
    1476. 

  1476.                             <a name="center_arvr"
    1477. 

  1477.                                 class="collection-item grey-text text-darken-4 translatable_app_center_arvr"
    1478. 

  1478.                                 onclick="ACCategorySelect(6)">AR/VR</a>
    1479. 

  1479.                         </div>
    1480. 

  1480.                     </div>
    1481. 

  1481.                     <div style="float:center;padding-top:5px; overflow-y:auto;max-height:400px" class="col s9">
    1482. 

  1482.                         <div id="center_ai" class=" col s12">
    1483. 

  1483.                             <h5 class="translatable_app_center_ai">Artificial Intelligence</h5>
    1484. 

  1484.                             <ul class="tabs">
    1485. 

  1485.                                 <li class="tab col s2"><a href="#center_ai_vision"
    1486. 

  1486.                                         class="translatable_app_center_tab_vision active">Vision</a></li>
    1487. 

  1487.                                 <li class="tab col s2"><a href="#center_ai_speech"
    1488. 

  1488.                                         class="translatable_app_center_tab_speech">Speech</a></li>
    1489. 

  1489.                                 <li class="tab col s2"><a href="#center_ai_text"
    1490. 

  1490.                                         class="translatable_app_center_tab_text">Text</a></li>
    1491. 

  1491.                             </ul>
    1492. 

  1492.                             <div id="center_ai_vision" class="col s12">
    1493. 

  1493.                                 <div class="row">
    1494. 

  1494.                                     <div style="float:left;" class="col s6">
    1495. 

  1495.                                         <div class="card">
    1496. 

  1496.                                             <div class="card-image waves-effect waves-block waves-light">
    1497. 

  1497.                                                 <img class="" src="icons/AppCenter_ai_teachableMachine.jpg"
    1498. 

  1498.                                                     style="border: solid 1.2px lightgray;">
    1499. 

  1499.                                             </div>
    1500. 

  1500.                                             <div class="card-content">
    1501. 

  1501.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1502. 

  1502.                                                 <span id="ac-card-title"
    1503. 

  1503.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine">Teachable
    1504. 

  1504.                                                     Machine</span>
    1505. 

  1505.                                                 <p class="">
    1506. 

  1506.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1507. 

  1507.                                                         href="#setting_teacher">Enter</a>
    1508. 

  1508.                                                 </p>
    1509. 

  1509.                                             </div>
    1510. 

  1510.                                         </div>
    1511. 

  1511.                                     </div>
    1512. 

  1512.                                     <div style="float:left;" class="col s6">
    1513. 

  1513.                                         <div class="card">
    1514. 

  1514.                                             <div class="card-image waves-effect waves-block waves-light">
    1515. 

  1515.                                                 <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
    1516. 

  1516.                                                 <img class="" src="icons/AppCenter_ai_emotion.jpg">
    1517. 

  1517.                                             </div>
    1518. 

  1518.                                             <div class="card-content">
    1519. 

  1519.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1520. 

  1520.                                                 <span id="ac-card-title emotion_recognition_enter_button"
    1521. 

  1521.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_emotion_recognition">Emotion
    1522. 

  1522.                                                     Recognition</span>
    1523. 

  1523.                                                 <p class="">
    1524. 

  1524.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1525. 

  1525.                                                         href="#setting_webcam_capture_modal">Enter</a>
    1526. 

  1526.                                                 </p>
    1527. 

  1527.                                             </div>
    1528. 

  1528.                                         </div>
    1529. 

  1529.                                     </div>
    1530. 

  1530.                                 </div>
    1531. 

  1531.                                 <div class="row">
    1532. 

  1532.                                     <div style="float:left;" class="col s6">
    1533. 

  1533.                                         <div class="card">
    1534. 

  1534.                                             <div class="card-image waves-effect waves-block waves-light">
    1535. 

  1535.                                                 <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
    1536. 

  1536.                                                 <img class="" src="icons/AppCenter_ai_gesture_recognition.jpg">
    1537. 

  1537.                                             </div>
    1538. 

  1538.                                             <div class="card-content">
    1539. 

  1539.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1540. 

  1540.                                                 <span id="ac-card-title emotion_recognition_enter_button"
    1541. 

  1541.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_gesture_recognition translatable_gesturesTitle">Gesture
    1542. 

  1542.                                                     Recognition</span>
    1543. 

  1543.                                                 <p class="">
    1544. 

  1544.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1545. 

  1545.                                                         href="#setting_gesture_recog_modal">Enter</a>
    1546. 

  1546.                                                 </p>
    1547. 

  1547.                                             </div>
    1548. 

  1548.                                         </div>
    1549. 

  1549.                                     </div>
    1550. 

  1550.                                     <div style="float:left;" class="col s6">
    1551. 

  1551.                                         <div class="card">
    1552. 

  1552.                                             <div class="card-image waves-effect waves-block waves-light">
    1553. 

  1553.                                                 <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
    1554. 

  1554.                                                 <img class="" src="icons/object_recognition_header.jpg">
    1555. 

  1555.                                             </div>
    1556. 

  1556.                                             <div class="card-content">
    1557. 

  1557.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1558. 

  1558.                                                 <span id="ac-card-title emotion_recognition_enter_button"
    1559. 

  1559.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_object_recognition translatable_objectRecognition">Object
    1560. 

  1560.                                                     Recognition</span>
    1561. 

  1561.                                                 <p class="">
    1562. 

  1562.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1563. 

  1563.                                                         href="#setting_objectRecog">Enter</a>
    1564. 

  1564.                                                 </p>
    1565. 

  1565.                                             </div>
    1566. 

  1566.                                         </div>
    1567. 

  1567.                                     </div>
    1568. 

  1568.                                     <div style="float:left;" class="col s6">
    1569. 

  1569.                                         <div class="card">
    1570. 

  1570.                                             <div class="card-image waves-effect waves-block waves-light">
    1571. 

  1571.                                                 <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
    1572. 

  1572.                                                 <img class="" src="icons/posenet_recogition.png">
    1573. 

  1573.                                             </div>
    1574. 

  1574.                                             <div class="card-content">
    1575. 

  1575.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1576. 

  1576.                                                 <span id="ac-card-title emotion_recognition_enter_button"
    1577. 

  1577.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_object_recognition translatable_posenetRecognition">Posenet
    1578. 

  1578.                                                     Recognition</span>
    1579. 

  1579.                                                 <p class="">
    1580. 

  1580.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1581. 

  1581.                                                         href="#setting_posenetRecog">Enter</a>
    1582. 

  1582.                                                 </p>
    1583. 

  1583.                                             </div>
    1584. 

  1584.                                         </div>
    1585. 

  1585.                                     </div>
    1586. 

  1586. 

  1587.                                     <div style="float:left;" class="col s6">
    1588. 

  1588.                                         <div class="card">
    1589. 

  1589.                                             <div class="card-image waves-effect waves-block waves-light">
    1590. 

  1590.                                                 <img class="" src="images/tm_with_pose.jpg"
    1591. 

  1591.                                                     style="border: solid 1.2px lightgray;">
    1592. 

  1592.                                             </div>
    1593. 

  1593.                                             <div class="card-content">
    1594. 

  1594.                                                 <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1595. 

  1595.                                                 <span id="ac-card-title"
    1596. 

  1596.                                                     class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine_posenet">Teachable
    1597. 

  1597.                                                     Machine (with Pose Recognition)</span>
    1598. 

  1598.                                                 <p class="">
    1599. 

  1599.                                                     <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1600. 

  1600.                                                         href="#setting_teacher_ponsenet">Enter</a>
    1601. 

  1601.                                                 </p>
    1602. 

  1602.                                             </div>
    1603. 

  1603.                                         </div>
    1604. 

  1604.                                     </div>
    1605. 

  1605. 

  1606.                                 </div>
    1607. 

  1607.                             </div>
    1608. 

  1608.                             <div id="center_ai_speech" class="col s12">
    1609. 

  1609.                                 <div style="float:center;" class="col s6">
    1610. 

  1610.                                     <div class="card">
    1611. 

  1611.                                         <div class="card-image waves-effect waves-block waves-light">
    1612. 

  1612.                                             <img class="" src="icons/AppCenter_ai_speech.jpg">
    1613. 

  1613.                                         </div>
    1614. 

  1614.                                         <div class="card-content">
    1615. 

  1615.                                             <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    1616. 

  1616.                                             <span id="ac-card-title"
    1617. 

  1617.                                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_speech_recognition">Speech
    1618. 

  1618.                                                 Recognition</span>
    1619. 

  1619.                                             <p class="">
    1620. 

  1620.                                                 <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1621. 

  1621.                                                     href="#voice_input_modal">Enter</a>
    1622. 

  1622.                                             </p>
    1623. 

  1623.                                         </div>
    1624. 

  1624.                                     </div>
    1625. 

  1625.                                 </div>
    1626. 

  1626.                             </div>
    1627. 

  1627.                             <div id="center_ai_text" class="col s12">
    1628. 

  1628.                                 <div style="float:center;" class="col s6">
    1629. 

  1629.                                     <div class="card">
    1630. 

  1630.                                         <div class="card-image waves-effect waves-block waves-light">
    1631. 

  1631.                                             <img class="" src="./icons/AppCenter_comingSoon.jpg">
    1632. 

  1632.                                         </div>
    1633. 

  1633.                                         <div class="card-content">
    1634. 

  1634.                                             <span id="ac-card-title"
    1635. 

  1635.                                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
    1636. 

  1636.                                                 soon</span>
    1637. 

  1637.                                             <p class="">
    1638. 

  1638.                                                 <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    1639. 

  1639.                                             </p>
    1640. 

  1640.                                         </div>
    1641. 

  1641.                                     </div>
    1642. 

  1642.                                 </div>
    1643. 

  1643.                             </div>
    1644. 

  1644.                         </div>
    1645. 

  1645.                         <div id="center_iot" class=" col s12" style="display:none">
    1646. 

  1646.                             <h5 class="translatable_app_center_iot">Internet of Things</h5>
    1647. 

  1647.                             <div style="float:center;" class="col s6">
    1648. 

  1648.                                 <div class="card">
    1649. 

  1649.                                     <div class="card-image waves-effect waves-block waves-light">
    1650. 

  1650.                                         <img class="" src="icons/AppCenter_iot_thingspeak.jpg">
    1651. 

  1651.                                     </div>
    1652. 

  1652.                                     <div class="card-content">
    1653. 

  1653.                                         <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    1654. 

  1654.                                         <span id="ac-card-title"
    1655. 

  1655.                                             class="ac-card-title card-title activator grey-text text-darken-4 ">ThingSpeak</span>
    1656. 

  1656.                                         <p class="">
    1657. 

  1657.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1658. 

  1658.                                                 href="https://thingspeak.com" target="_blank">Enter</a>
    1659. 

  1659.                                         </p>
    1660. 

  1660.                                     </div>
    1661. 

  1661.                                 </div>
    1662. 

  1662.                             </div>
    1663. 

  1663.                             <div style="float:center;" class="col s6">
    1664. 

  1664.                                 <div class="card">
    1665. 

  1665.                                     <div class="card-image waves-effect waves-block waves-light">
    1666. 

  1666.                                         <img class="" src="icons/AppCenter_iot_ifttt.jpg">
    1667. 

  1667.                                     </div>
    1668. 

  1668.                                     <div class="card-content">
    1669. 

  1669.                                         <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    1670. 

  1670.                                         <span id="ac-card-title"
    1671. 

  1671.                                             class="ac-card-title card-title activator grey-text text-darken-4 ">IFTTT</span>
    1672. 

  1672.                                         <p class="">
    1673. 

  1673.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1674. 

  1674.                                                 href="https://ifttt.com/maker_webhooks" target="_blank">Enter</a>
    1675. 

  1675.                                         </p>
    1676. 

  1676.                                     </div>
    1677. 

  1677.                                 </div>
    1678. 

  1678.                             </div>
    1679. 

  1679.                         </div>
    1680. 

  1680.                         <div id="center_robot" class=" col s12" style="display:none">
    1681. 

  1681.                             <h5 class="translatable_app_center_robot">Robot Controller</h5>
    1682. 

  1682.                             <div style="float:center;" class="col s6">
    1683. 

  1683.                                 <div class="card">
    1684. 

  1684.                                     <div class="card-image waves-effect waves-block waves-light">
    1685. 

  1685.                                         <img class="" src="./icons/AppCenter_comingSoon.jpg">
    1686. 

  1686.                                     </div>
    1687. 

  1687.                                     <div class="card-content">
    1688. 

  1688.                                         <span id="ac-card-title"
    1689. 

  1689.                                             class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
    1690. 

  1690.                                             soon</span>
    1691. 

  1691.                                         <p class="">
    1692. 

  1692.                                             <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    1693. 

  1693.                                         </p>
    1694. 

  1694.                                     </div>
    1695. 

  1695.                                 </div>
    1696. 

  1696.                             </div>
    1697. 

  1697.                         </div>
    1698. 

  1698.                         <div id="center_science" class="col s12" style="display:none">
    1699. 

  1699.                             <h5 class="translatable_app_center_science">Science Experiements</h5>
    1700. 

  1700.                             <div style="float:center;" class="col s6">
    1701. 

  1701.                                 <div class="card">
    1702. 

  1702.                                     <div class="card-image waves-effect waves-block waves-light">
    1703. 

  1703.                                         <img class="" src="./icons/AppCenter_comingSoon.jpg">
    1704. 

  1704.                                     </div>
    1705. 

  1705.                                     <div class="card-content">
    1706. 

  1706.                                         <span id="ac-card-title"
    1707. 

  1707.                                             class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
    1708. 

  1708.                                             soon</span>
    1709. 

  1709.                                         <p class="">
    1710. 

  1710.                                             <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    1711. 

  1711.                                         </p>
    1712. 

  1712.                                     </div>
    1713. 

  1713.                                 </div>
    1714. 

  1714.                             </div>
    1715. 

  1715.                         </div>
    1716. 

  1716.                         <div id="center_game" class=" col s12" style="display:none">
    1717. 

  1717.                             <h5 class="translatable_app_center_games">Interactive Games</h5>
    1718. 

  1718.                             <div style="float:center;" class="col s6">
    1719. 

  1719.                                 <div class="card">
    1720. 

  1720.                                     <div class="card-image waves-effect waves-block waves-light">
    1721. 

  1721.                                         <img class="" src="./icons/AppCenter_game_floppy-bird.jpg">
    1722. 

  1722.                                     </div>
    1723. 

  1723.                                     <div class="card-content">
    1724. 

  1724.                                         <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    1725. 

  1725.                                         <span id="ac-card-title"
    1726. 

  1726.                                             class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_flappy">Floppy
    1727. 

  1727.                                             bird</span>
    1728. 

  1728.                                         <p class="">
    1729. 

  1729.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button "
    1730. 

  1730.                                                 href="https://cocorobo.cn/demo/floppybird/" target="_blank">Enter</a>
    1731. 

  1731.                                         </p>
    1732. 

  1732.                                     </div>
    1733. 

  1733.                                 </div>
    1734. 

  1734.                             </div>
    1735. 

  1735.                             <div style="float:center;" class="col s6">
    1736. 

  1736.                                 <div class="card">
    1737. 

  1737.                                     <div class="card-image waves-effect waves-block waves-light">
    1738. 

  1738.                                         <img class="" src="icons/AppCenter_game_space_lamb.jpg">
    1739. 

  1739.                                     </div>
    1740. 

  1740.                                     <div class="card-content">
    1741. 

  1741.                                         <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    1742. 

  1742.                                         <span id="ac-card-title"
    1743. 

  1743.                                             class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_space_lamb">Space
    1744. 

  1744.                                             Lamb</span>
    1745. 

  1745.                                         <p class="">
    1746. 

  1746.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button "
    1747. 

  1747.                                                 href="https://spacelamb.12wave.com" target="_blank">Enter</a>
    1748. 

  1748.                                         </p>
    1749. 

  1749.                                     </div>
    1750. 

  1750.                                 </div>
    1751. 

  1751.                             </div>
    1752. 

  1752.                         </div>
    1753. 

  1753.                         <div id="center_arvr" class=" col s12" style="display:none">
    1754. 

  1754.                             <h5 class="translatable_app_center_arvr">AR/VR</h5>
    1755. 

  1755.                             <div style="float:center;" class="col s6">
    1756. 

  1756.                                 <div class="card">
    1757. 

  1757.                                     <div class="card-image waves-effect waves-block waves-light">
    1758. 

  1758.                                         <!-- <img class="activator" src="icons/app-center_ai_speech.jpg"> -->
    1759. 

  1759.                                         <img class="" src="icons/AppCenter_comingSoon.jpg">
    1760. 

  1760.                                     </div>
    1761. 

  1761.                                     <div class="card-content">
    1762. 

  1762.                                         <span id="ac-card-title"
    1763. 

  1763.                                             class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming
    1764. 

  1764.                                             soon</span>
    1765. 

  1765.                                         <p class="">
    1766. 

  1766.                                             <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    1767. 

  1767.                                         </p>
    1768. 

  1768.                                     </div>
    1769. 

  1769.                                 </div>
    1770. 

  1770.                             </div>
    1771. 

  1771.                         </div>
    1772. 

  1772.                     </div>
    1773. 

  1773.                 </div>
    1774. 

  1774.             </div>
    1775. 

  1775.         </div>
    1776. 

  1776.         <!-- 显示Teachable Machine modal配置弹框 -->
    1777. 

  1777.         <div id="setting_teacher" class="modal modal_closes">
    1778. 

  1778.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1779. 

  1779.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1780. 

  1780.             <div class="modal-content" style="padding: 20px;">
    1781. 

  1781.                 <span class="modal_close" style="padding: 15px;">
    1782. 

  1782.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    1783. 

  1783.                 </span>
    1784. 

  1784.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    1785. 

  1785.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    1786. 

  1786.                 <div style="display:flex;justify-content:space-around;">
    1787. 

  1787.                     <div class="modal_setting_teacher_left setting_left_all">
    1788. 

  1788.                         <div class="card-image waves-effect waves-block waves-light">
    1789. 

  1789.                             <img class="" src="icons/AppCenter_ai_teachableMachine.jpg"
    1790. 

  1790.                                 style="border: solid 1.2px lightgray;width: 100%;">
    1791. 

  1791.                         </div>
    1792. 

  1792.                         <div>
    1793. 

  1793.                             <span id="ac-card-title"
    1794. 

  1794.                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine"
    1795. 

  1795.                                 style="font-size: 30px;">Teachable
    1796. 

  1796.                                 Machine</span>
    1797. 

  1797.                             <p class="translatable_Teachabel_Machin_content">The trend of robot development is
    1798. 

  1798.                                 artificial
    1799. 

  1799.                                 intelligence. Deep learning is the frontier technology of intelligent robot and a new
    1800. 

  1800.                                 topic
    1801. 

  1801.                                 in the field of machine learning.Deep learning technology is widely used in agriculture,
    1802. 

  1802.                                 industry, military, aviation and other fields, and the organic combination with machines
    1803. 

  1803.                                 can
    1804. 

  1804.                                 design intelligent robots with high working efficiency, high real-time and high
    1805. 

  1805.                                 accuracy.
    1806. 

  1806.                             </p>
    1807. 

  1807.                         </div>
    1808. 

  1808.                     </div>
    1809. 

  1809.                     <div class="modal_setting_teacher_right setting_right_all">
    1810. 

  1810.                         <div class="translatable_computer_configuration"
    1811. 

  1811.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    1812. 

  1812.                             <span>Computer Configuration Requirements</span>
    1813. 

  1813.                         </div>
    1814. 

  1814.                         <div class="setting_border">
    1815. 

  1815.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    1816. 

  1816.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    1817. 

  1817.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    1818. 

  1818.                                     Supported</span>：1440*768
    1819. 

  1819.                             </p>
    1820. 

  1820.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    1821. 

  1821.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    1822. 

  1822.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    1823. 

  1823.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    1824. 

  1824.                                     class="translatable_need">OK</span></p>
    1825. 

  1825.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    1826. 

  1826.                                     class="translatable_no_need">NO</span></p>
    1827. 

  1827.                         </div>
    1828. 

  1828.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1829. 

  1829.                             href="#Teachable_Machine" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    1830. 

  1830.                     </div>
    1831. 

  1831.                 </div>
    1832. 

  1832.             </div>
    1833. 

  1833.         </div>
    1834. 

  1834.         <!--Teachable Machine modal-->
    1835. 

  1835.         <div id="Teachable_Machine" class="modal TM_class modal_closes">
    1836. 

  1836.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1837. 

  1837.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1838. 

  1838.             <div id="TM_login" style="margin-top:10px;top:10%;position:relative"></div>
    1839. 

  1839.             <div id="TM_iframe" style="height:100%; width:100%; display:none"></div>
    1840. 

  1840.             <div id="teachable_modal" class="object_modal">
    1841. 

  1841.                 <img src="./gif/loading.gif"
    1842. 

  1842.                     style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
    1843. 

  1843.             </div>
    1844. 

  1844.         </div>
    1845. 

  1845. 

  1846.         <!-- 显示Teachable Machine modal配置弹框 -->
    1847. 

  1847.         <div id="setting_teacher_ponsenet" class="modal modal_closes">
    1848. 

  1848.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1849. 

  1849.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1850. 

  1850.             <div class="modal-content" style="padding: 20px;">
    1851. 

  1851.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    1852. 

  1852.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    1853. 

  1853.                 <div style="display:flex;justify-content:space-around;">
    1854. 

  1854.                     <div class="modal_setting_teacher_left setting_left_all">
    1855. 

  1855.                         <div class="card-image waves-effect waves-block waves-light">
    1856. 

  1856.                             <img class="" src="images/tm_with_pose.jpg"
    1857. 

  1857.                                 style="border: solid 1.2px lightgray;width: 100%;">
    1858. 

  1858.                         </div>
    1859. 

  1859.                         <div>
    1860. 

  1860.                             <span id="ac-card-title"
    1861. 

  1861.                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine_posenet"
    1862. 

  1862.                                 style="font-size: 30px;">Teachable
    1863. 

  1863.                                 Machine</span>
    1864. 

  1864.                             <p class="translatable_Teachabel_Machin_content">The trend of robot development is
    1865. 

  1865.                                 artificial
    1866. 

  1866.                                 intelligence. Deep learning is the frontier technology of intelligent robot and a new
    1867. 

  1867.                                 topic
    1868. 

  1868.                                 in the field of machine learning.Deep learning technology is widely used in agriculture,
    1869. 

  1869.                                 industry, military, aviation and other fields, and the organic combination with machines
    1870. 

  1870.                                 can
    1871. 

  1871.                                 design intelligent robots with high working efficiency, high real-time and high
    1872. 

  1872.                                 accuracy.
    1873. 

  1873.                             </p>
    1874. 

  1874.                         </div>
    1875. 

  1875.                     </div>
    1876. 

  1876.                     <div class="modal_setting_teacher_right setting_right_all">
    1877. 

  1877.                         <div class="translatable_computer_configuration"
    1878. 

  1878.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    1879. 

  1879.                             <span>Computer Configuration Requirements</span>
    1880. 

  1880.                         </div>
    1881. 

  1881.                         <div class="setting_border">
    1882. 

  1882.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    1883. 

  1883.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    1884. 

  1884.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    1885. 

  1885.                                     Supported</span>：1440*768
    1886. 

  1886.                             </p>
    1887. 

  1887. 

  1888.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    1889. 

  1889. 

  1890.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    1891. 

  1891.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    1892. 

  1892. 

  1893.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    1894. 

  1894.                                     class="translatable_need">OK</span></p>
    1895. 

  1895.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    1896. 

  1896.                                     class="translatable_no_need">NO</span></p>
    1897. 

  1897.                         </div>
    1898. 

  1898.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1899. 

  1899.                             href="#Teachable_Machine_ponsenet"
    1900. 

  1900.                             style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    1901. 

  1901.                     </div>
    1902. 

  1902.                 </div>
    1903. 

  1903.             </div>
    1904. 

  1904.         </div>
    1905. 

  1905.         <!--Teachable Machine modal-->
    1906. 

  1906.         <div id="Teachable_Machine_ponsenet" class="modal TM_class modal_closes" style="position:relative">
    1907. 

  1907.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1908. 

  1908.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1909. 

  1909.             <div id="TM_posenet_login" style="margin-top:10px;top:10%;position:relative"></div>
    1910. 

  1910.             <div id="TM_posenet_iframe" style="height:100%; width:100%;"></div>
    1911. 

  1911.             <div id="teachable_posenet_modal" class="object_modal">
    1912. 

  1912.                 <img src="./gif/loading.gif"
    1913. 

  1913.                     style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
    1914. 

  1914.             </div>
    1915. 

  1915.         </div>
    1916. 

  1916. 

  1917.         <!-- 显示Object Recog_modal modal配置弹框-->
    1918. 

  1918.         <div id="setting_objectRecog" class="modal modal_closes">
    1919. 

  1919.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1920. 

  1920.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1921. 

  1921.             <div class="modal-content" style="padding: 20px;">
    1922. 

  1922.                 <span class="modal_close" style="padding: 15px;">
    1923. 

  1923.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    1924. 

  1924.                 </span>
    1925. 

  1925.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    1926. 

  1926.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    1927. 

  1927.                 <div style="display: flex;justify-content:space-around;">
    1928. 

  1928.                     <div class="modal_setting_objectRecog_left setting_left_all">
    1929. 

  1929.                         <div class="card-image waves-effect waves-block waves-light">
    1930. 

  1930.                             <img class="" src="icons/object_recognition_header.jpg"
    1931. 

  1931.                                 style="border: solid 1.2px lightgray;width: 100%;">
    1932. 

  1932.                         </div>
    1933. 

  1933.                         <div>
    1934. 

  1934.                             <span id="ac-card-title emotion_recognition_enter_button" class="ac-card-title card-title activator grey-text text-darken-4
    1935. 

  1935.                         translatable_app_center_object_recognition translatable_objectRecognition"
    1936. 

  1936.                                 style="font-size: 30px;">Object
    1937. 

  1937.                                 Recognition</span>
    1938. 

  1938.                             <p class="translatable_objectRecognition_content">The development trend of object
    1939. 

  1939.                                 recognition is
    1940. 

  1940.                                 artificial intelligence. Object recognition is the frontier technology of intelligent
    1941. 

  1941.                                 recognition and a new subject in the field of recognition.Object recognition technology
    1942. 

  1942.                                 is
    1943. 

  1943.                                 widely used in agriculture, industry, military, aviation and other fields.
    1944. 

  1944.                             </p>
    1945. 

  1945.                         </div>
    1946. 

  1946.                     </div>
    1947. 

  1947.                     <div class="modal_setting_objectRecog_right setting_right_all" style="width: 48%;">
    1948. 

  1948.                         <div class="translatable_computer_configuration"
    1949. 

  1949.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    1950. 

  1950.                             <span>Computer Configuration Requirements</span>
    1951. 

  1951.                         </div>
    1952. 

  1952.                         <div class="setting_border">
    1953. 

  1953.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    1954. 

  1954.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    1955. 

  1955.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    1956. 

  1956.                                     Supported</span>：1440*768
    1957. 

  1957.                             </p>
    1958. 

  1958.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    1959. 

  1959.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    1960. 

  1960.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    1961. 

  1961.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    1962. 

  1962.                                     class="translatable_need">OK</span></p>
    1963. 

  1963.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    1964. 

  1964.                                     class="translatable_no_need">NO</span></p>
    1965. 

  1965.                         </div>
    1966. 

  1966.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    1967. 

  1967.                             href="#Object_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    1968. 

  1968.                     </div>
    1969. 

  1969.                 </div>
    1970. 

  1970.             </div>
    1971. 

  1971.         </div>
    1972. 

  1972.         <!--Object Recog_modal modal-->
    1973. 

  1973.         <div id="Object_recog_modal" class="modal TM_class modal_closes" style="position:relative">
    1974. 

  1974.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1975. 

  1975.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1976. 

  1976.             <div id="TM_login_object" style="margin-top:10px;top:10%;position:relative"></div>
    1977. 

  1977.             <div id="TM_iframe_object" style="height:100%; width:100%; display:none"></div>
    1978. 

  1978.             <div id="object_modal" class="object_modal">
    1979. 

  1979.                 <img src="./gif/loading.gif"
    1980. 

  1980.                     style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
    1981. 

  1981.             </div>
    1982. 

  1982.         </div>
    1983. 

  1983.         <!-- 显示posenet Recog_modal modal配置弹框 -->
    1984. 

  1984.         <div id="setting_posenetRecog" class="modal modal_closes">
    1985. 

  1985.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    1986. 

  1986.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    1987. 

  1987.             <div class="modal-content" style="padding: 20px;">
    1988. 

  1988.                 <span class="modal_close" style="padding: 15px;">
    1989. 

  1989.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    1990. 

  1990.                 </span>
    1991. 

  1991.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    1992. 

  1992.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    1993. 

  1993.                 <div style="display: flex;justify-content:space-around;">
    1994. 

  1994.                     <div class="modal_setting_objectRecog_left setting_left_all">
    1995. 

  1995.                         <div class="card-image waves-effect waves-block waves-light">
    1996. 

  1996.                             <img class="" src="icons/posenet_recogition.png"
    1997. 

  1997.                                 style="border: solid 1.2px lightgray;width: 100%;">
    1998. 

  1998.                         </div>
    1999. 

  1999.                         <div>
    2000. 

  2000.                             <span id="ac-card-title emotion_recognition_enter_button" class="ac-card-title card-title activator grey-text text-darken-4
    2001. 

  2001.                         translatable_app_center_object_recognition translatable_posenetRecognition"
    2002. 

  2002.                                 style="font-size: 30px;">Posenet
    2003. 

  2003.                                 Recognition</span>
    2004. 

  2004.                             <p class="translatable_posenetRecognition_content">The development trend of object
    2005. 

  2005.                                 recognition
    2006. 

  2006.                                 is
    2007. 

  2007.                                 artificial intelligence. Object recognition is the frontier technology of intelligent
    2008. 

  2008.                                 recognition and a new subject in the field of recognition.Object recognition technology
    2009. 

  2009.                                 is
    2010. 

  2010.                                 widely used in agriculture, industry, military, aviation and other fields.
    2011. 

  2011.                             </p>
    2012. 

  2012.                         </div>
    2013. 

  2013.                     </div>
    2014. 

  2014.                     <div class="modal_setting_objectRecog_right setting_right_all" style="width: 48%;">
    2015. 

  2015.                         <div class="translatable_computer_configuration"
    2016. 

  2016.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    2017. 

  2017.                             <span>Computer Configuration Requirements</span>
    2018. 

  2018.                         </div>
    2019. 

  2019.                         <div class="setting_border">
    2020. 

  2020.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    2021. 

  2021.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    2022. 

  2022.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    2023. 

  2023.                                     Supported</span>：1440*768
    2024. 

  2024.                             </p>
    2025. 

  2025.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    2026. 

  2026.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    2027. 

  2027.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    2028. 

  2028.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    2029. 

  2029.                                     class="translatable_need">OK</span></p>
    2030. 

  2030.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    2031. 

  2031.                                     class="translatable_no_need">NO</span></p>
    2032. 

  2032.                         </div>
    2033. 

  2033.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    2034. 

  2034.                             href="#Posent_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    2035. 

  2035.                     </div>
    2036. 

  2036.                 </div>
    2037. 

  2037.             </div>
    2038. 

  2038.         </div>
    2039. 

  2039.         <!--Object Recog_modal modal-->
    2040. 

  2040.         <div id="Posent_recog_modal" class="modal TM_class modal_closes" style="position:relative">
    2041. 

  2041.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    2042. 

  2042.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    2043. 

  2043.             <div id="TM_login_posenet" style="margin-top:10px;top:10%;position:relative"></div>
    2044. 

  2044.             <div id="TM_iframe_posenet" style="height:100%; width:100%; display:none"></div>
    2045. 

  2045.             <div id="posenet_modal" class="object_modal">
    2046. 

  2046.                 <img src="./gif/loading.gif"
    2047. 

  2047.                     style="position: absolute;top: calc(50% - 140px);width: 500px;left: calc(50% - 250px);" />
    2048. 

  2048.             </div>
    2049. 

  2049.         </div>
    2050. 

  2050.         <!-- 显示webcam input modal配置弹框 -->
    2051. 

  2051.         <div id="setting_webcam_capture_modal" class="modal modal_closes">
    2052. 

  2052.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    2053. 

  2053.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    2054. 

  2054.             <div class="modal-content" style="padding: 20px;">
    2055. 

  2055.                 <span class="modal_close" style="padding: 15px;">
    2056. 

  2056.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2057. 

  2057.                 </span>
    2058. 

  2058.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    2059. 

  2059.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    2060. 

  2060.                 <div style="display:flex;justify-content:space-around;">
    2061. 

  2061.                     <div class="modal_setting_teacher_left setting_left_all">
    2062. 

  2062.                         <div class="card-image waves-effect waves-block waves-light">
    2063. 

  2063.                             <img class="" src="icons/AppCenter_ai_emotion.jpg"
    2064. 

  2064.                                 style="border: solid 1.2px lightgray;width: 100%;">
    2065. 

  2065.                         </div>
    2066. 

  2066.                         <div>
    2067. 

  2067.                             <span id="ac-card-title emotion_recognition_enter_button"
    2068. 

  2068.                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_emotion_recognition"
    2069. 

  2069.                                 style="font-size: 30px;">Emotion
    2070. 

  2070.                                 Recognition</span>
    2071. 

  2071.                             <p class="translatable_webcam_capture_content">The trend of robot development is artificial
    2072. 

  2072.                                 intelligence. Deep learning is the frontier technology of intelligent robot and a new
    2073. 

  2073.                                 topic
    2074. 

  2074.                                 in the field of machine learning.Deep learning technology is widely used in agriculture,
    2075. 

  2075.                                 industry, military, aviation and other fields, and the organic combination with machines
    2076. 

  2076.                                 can
    2077. 

  2077.                                 design intelligent robots with high working efficiency, high real-time and high
    2078. 

  2078.                                 accuracy.
    2079. 

  2079.                             </p>
    2080. 

  2080.                         </div>
    2081. 

  2081.                     </div>
    2082. 

  2082.                     <div class="modal_setting_teacher_right setting_right_all">
    2083. 

  2083.                         <div class="translatable_computer_configuration"
    2084. 

  2084.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    2085. 

  2085.                             <span>Computer Configuration Requirements</span>
    2086. 

  2086.                         </div>
    2087. 

  2087.                         <div class="setting_border">
    2088. 

  2088.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    2089. 

  2089.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    2090. 

  2090.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    2091. 

  2091.                                     Supported</span>：1440*768
    2092. 

  2092.                             </p>
    2093. 

  2093.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    2094. 

  2094.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    2095. 

  2095.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    2096. 

  2096.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    2097. 

  2097.                                     class="translatable_need">Ok</span></p>
    2098. 

  2098.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    2099. 

  2099.                                     class="translatable_no_need">NO</span></p>
    2100. 

  2100.                         </div>
    2101. 

  2101.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    2102. 

  2102.                             href="#webcam_capture_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    2103. 

  2103.                     </div>
    2104. 

  2104.                 </div>
    2105. 

  2105.             </div>
    2106. 

  2106.         </div>
    2107. 

  2107.         <!-- webcam input modal -->
    2108. 

  2108.         <div id="webcam_capture_modal" class="modal">
    2109. 

  2109.             <div id="emotionRecognitionTitle" class="modal-content">
    2110. 

  2110.                 <div style="margin-bottom:-10px;margin-top:10px;" class="row">
    2111. 

  2111.                     <div class="col s8">
    2112. 

  2112.                         <h4 class="translatable_webcamDemoTitle">Emotion Recognition</h4>
    2113. 

  2113.                     </div>
    2114. 

  2114.                     <div style="text-align:right;" class="col s4">
    2115. 

  2115.                         <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
    2116. 

  2116.                             id="emotion_recognition_close" class="modal-action modal-close">
    2117. 

  2117.                             <h4><i class="small material-icons">close</i></h4>
    2118. 

  2118.                         </a>
    2119. 

  2119.                     </div>
    2120. 

  2120.                 </div>
    2121. 

  2121.                 <!--<div> <span class="translatable_cloudFileTooltip" sytle="margin-left:10px">Type project's name and click save</span></div>-->
    2122. 

  2122.                 <div class="row">
    2123. 

  2123.                     <div class="col s12">
    2124. 

  2124.                         <div class="switch" style="margin-bottom:20px;">
    2125. 

  2125.                             <label>
    2126. 

  2126.                                 <span class="translatable_emotion_camera_off">Camera Off</span>
    2127. 

  2127.                                 <input id="camera_switch" type="checkbox" onclick="cameraSwitch()">
    2128. 

  2128.                                 <span class="lever "></span><span class="translatable_emotion_camera_on">On</span>
    2129. 

  2129.                             </label>
    2130. 

  2130.                         </div>
    2131. 

  2131.                     </div>
    2132. 

  2132.                 </div>
    2133. 

  2133.                 <div class="row" style="text-align:left;">
    2134. 

  2134.                     <div style="float:center;" class="col s6">
    2135. 

  2135.                         <p class="translatable_face_webcam" style="margin-top:-20px;">Webcam:</p>
    2136. 

  2136.                         <div id="webCamera"></div>
    2137. 

  2137.                         <div class="translatable_emotion_camera_turnon_text" id="webCamPlaceholder">Turn on the Camera
    2138. 

  2138.                             first
    2139. 

  2139.                         </div>
    2140. 

  2140.                     </div>
    2141. 

  2141.                     <div style="float:center;" class="col s6">
    2142. 

  2142.                         <p class="translatable_face_latest_snapshot" style="margin-top:-20px;">Last snapshot:</p>
    2143. 

  2143.                         <div id="emotionResults"></div>
    2144. 

  2144.                         <div class="translatable_emotion_snapshot_text" id="SnapshotPlaceholder">Your snapshot will be
    2145. 

  2145.                             here
    2146. 

  2146.                         </div>
    2147. 

  2147.                     </div>
    2148. 

  2148.                 </div>
    2149. 

  2149.                 <div class="row">
    2150. 

  2150.                     <div class="col s12">
    2151. 

  2151.                         <a id="emotionRequestStatus"
    2152. 

  2152.                             class="disabled waves-effect waves-light btn blue translatable_face_analyze"
    2153. 

  2153.                             onclick="processImage()">Analyze</a>
    2154. 

  2154.                         <span id="azureRequestStatusText" style="padding-left:20px;"> </span>
    2155. 

  2155.                     </div>
    2156. 

  2156.                 </div>
    2157. 

  2157.                 <div class="row" style="text-align:left;">
    2158. 

  2158.                     <div id="emotionResultsAll" class="col s12">
    2159. 

  2159.                         <span class="translatable_emotion_result_title" id="facialanalysistitle"
    2160. 

  2160.                             style="font-weight:200;">Facial Analysis:</span>
    2161. 

  2161.                         <div style="display: flex;flex-wrap: wrap;margin-top: 10px;">
    2162. 

  2162.                             <p id="emotionResultsAll_property" style="width: 50%;">
    2163. 

  2163.                                 <b class="translatable_emotion_result_age_title">Age:</b>
    2164. 

  2164.                                 <span id="emotionResults_age"
    2165. 

  2165.                                     class="emotionResultsAll_single translatable_emotion_result_default">Nothing
    2166. 

  2166.                                     detected.</span>
    2167. 

  2167.                             </p>
    2168. 

  2168.                             <p id="emotionResultsAll_property" style="width: 50%;">
    2169. 

  2169.                                 <b class="translatable_emotion_result_emotion_title">Emotion:</b>
    2170. 

  2170.                                 <span id="emotionResults_emotion"
    2171. 

  2171.                                     class="emotionResultsAll_single translatable_emotion_result_default">Nothing
    2172. 

  2172.                                     detected.</span>
    2173. 

  2173.                             </p>
    2174. 

  2174.                             <p id="emotionResultsAll_property" style="width: 50%;">
    2175. 

  2175.                                 <b class="translatable_emotion_result_gender_title">Gender:</b>
    2176. 

  2176.                                 <span id="emotionResults_gender"
    2177. 

  2177.                                     class="emotionResultsAll_single translatable_emotion_result_default">Nothing
    2178. 

  2178.                                     detected.</span>
    2179. 

  2179.                             </p>
    2180. 

  2180.                             <p id="emotionResultsAll_property" style="width: 50%;">
    2181. 

  2181.                                 <b class="translatable_emotion_result_glasses_title">Glasses:</b>
    2182. 

  2182.                                 <span id="emotionResults_glasses"
    2183. 

  2183.                                     class="emotionResultsAll_single translatable_emotion_result_default">Nothing
    2184. 

  2184.                                     detected.</span>
    2185. 

  2185.                             </p>
    2186. 

  2186.                             <!-- <p id="emotionResultsAll_property" style="width: 50%;">
    2187. 

  2187.                                 <b class="translatable_emotion_result_appearance_title">Appearance:</b>
    2188. 

  2188.                                 <span id="emotionResults_appearance"
    2189. 

  2189.                                     class="emotionResultsAll_single translatable_emotion_result_default">Nothing
    2190. 

  2190.                                     detected.</span>
    2191. 

  2191.                             </p> -->
    2192. 

  2192.                             <p id="emotionResultsAll_property" style="width: 50%;">
    2193. 

  2193.                                 <b class="translatable_emotion_result_expression_title">Expression:</b>
    2194. 

  2194.                                 <span id="emotionResults_expression" class="emotionResultsAll_single">Nothing
    2195. 

  2195.                                     detected.</span>
    2196. 

  2196.                             </p>
    2197. 

  2197.                             <p id="emotionResultsAll_property"
    2198. 

  2198.                                 style="width: 100%;border-top: 1px solid #ccc;margin-top: 10px;padding-top: 10px;">
    2199. 

  2199.                                 <b class="translatable_emotion_result_expression_title">Emotion:</b>
    2200. 

  2200.                                 <span class="emotionResultsAll_single">smile、laugh、none</span>
    2201. 

  2201.                             </p>
    2202. 

  2202.                             <p id="emotionResultsAll_property" style="width: 100%;">
    2203. 

  2203.                                 <b class="translatable_emotion_result_emotion_title">Expression:</b>
    2204. 

  2204.                                 <span
    2205. 

  2205.                                     class="emotionResultsAll_single">angry、disgust、fear、happy、sad、surprise、neutral、pouty、grimace</span>
    2206. 

  2206.                             </p>
    2207. 

  2207.                         </div>
    2208. 

  2208.                     </div>
    2209. 

  2209.                     <div class="col s12 select_send_way" style="position: relative; margin:12px 0;padding: 0;">
    2210. 

  2210.                         <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
    2211. 

  2211.                         <!-- <span class="translatable_send_module">Send Module</span> -->
    2212. 

  2212.                     </div>
    2213. 

  2213.                 </div>
    2214. 

  2214.                 <div class="row">
    2215. 

  2215.                     <div class="col s12 send_cloud" style="position: relative">
    2216. 

  2216.                         <div id="cloudRequestStatus" class="col s12">
    2217. 

  2217.                         </div>
    2218. 

  2218.                         <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will
    2219. 

  2219.                             directly send to there</div>
    2220. 

  2220.                         <div style="width:100%;margin-top: 15px;">
    2221. 

  2221.                             <select class="browser-default" id="AI_webcam_events">
    2222. 

  2222.                                 <option class="translatable_noEvent" value=null disabled>No event here. Login first
    2223. 

  2223.                                 </option>
    2224. 

  2224.                             </select>
    2225. 

  2225.                         </div>
    2226. 

  2226.                         <span style="float:right;top: -45px;position: relative;margin-top: -38px;">
    2227. 

  2227.                             <i id="update_Coevent_web" class="material-icons">autorenew</i>
    2228. 

  2228.                         </span>
    2229. 

  2229.                     </div>
    2230. 

  2230.                     <div class="col s12 send_module" style="position: relative;display: none;height: 100px;">
    2231. 

  2231.                         <div class="translatable_send_module">Send Module</div>
    2232. 

  2232.                         <div class="col s6" style="margin-top:2px;padding: 0;">
    2233. 

  2233.                             <span class="translatable_send_result">Send Result:</span>
    2234. 

  2234.                             <select class="browser-default" id="select_send_capture"
    2235. 

  2235.                                 style="width: 120px;display: inline-block;height: 35px;">
    2236. 

  2236.                                 <option value="emotionResults_age" class="translatable_emotion_result_age_title">Age
    2237. 

  2237.                                 </option>
    2238. 

  2238.                                 <option value="emotionResults_emotion"
    2239. 

  2239.                                     class="translatable_emotion_result_emotion_title">
    2240. 

  2240.                                     Emotion</option>
    2241. 

  2241.                                 <option value="emotionResults_gender" class="translatable_emotion_result_gender_title">
    2242. 

  2242.                                     Sex
    2243. 

  2243.                                 </option>
    2244. 

  2244.                                 <option value="emotionResults_glasses"
    2245. 

  2245.                                     class="translatable_emotion_result_glasses_title">
    2246. 

  2246.                                     Glasses</option>
    2247. 

  2247.                                 <option value="emotionResults_expression"
    2248. 

  2248.                                     class="translatable_emotion_result_expression_title">Expression</option>
    2249. 

  2249.                             </select>
    2250. 

  2250.                             <span class="translatable_port">Port:</span>
    2251. 

  2251.                             <span class="port" style="padding-left:10px;"></span>
    2252. 

  2252.                         </div>
    2253. 

  2253.                         <div class="col s6" style="margin-top:2px;">
    2254. 

  2254.                             <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtn translatable_connectBtns disabled"
    2255. 

  2255.                                 style="float:right;margin-right:5px">connect</a>
    2256. 

  2256.                             <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn translatable_disconnectBtns "
    2257. 

  2257.                                 style="float:right;margin-right:5px;display:none">disconnect</a>
    2258. 

  2258.                         </div>
    2259. 

  2259.                     </div>
    2260. 

  2260.                 </div>
    2261. 

  2261.             </div>
    2262. 

  2262.         </div>
    2263. 

  2263.         <!-- 显示gesture recognition modal配置弹框 -->
    2264. 

  2264.         <div id="setting_gesture_recog_modal" class="modal modal_closes">
    2265. 

  2265.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    2266. 

  2266.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    2267. 

  2267.             <div class="modal-content" style="padding: 20px;">
    2268. 

  2268.                 <span class="modal_close" style="padding: 15px;">
    2269. 

  2269.                     <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2270. 

  2270.                 </span>
    2271. 

  2271.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    2272. 

  2272.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    2273. 

  2273.                 <div style="display:flex;justify-content:space-around;">
    2274. 

  2274.                     <div class="modal_setting_teacher_left setting_left_all">
    2275. 

  2275.                         <div class="card-image waves-effect waves-block waves-light">
    2276. 

  2276.                             <img class="" src="icons/AppCenter_ai_gesture_recognition.jpg"
    2277. 

  2277.                                 style="border: solid 1.2px lightgray;width: 100%;">
    2278. 

  2278.                         </div>
    2279. 

  2279.                         <div>
    2280. 

  2280.                             <span id="ac-card-title emotion_recognition_enter_button"
    2281. 

  2281.                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_gesture_recognition translatable_gesturesTitle"
    2282. 

  2282.                                 style="font-size: 30px;">Gesture
    2283. 

  2283.                                 Recognition</span>
    2284. 

  2284.                             <p class="translatable_gesture_recog_content">The trend of robot development is artificial
    2285. 

  2285.                                 intelligence. Deep learning is the frontier technology of intelligent robot and a new
    2286. 

  2286.                                 topic
    2287. 

  2287.                                 in the field of machine learning.Deep learning technology is widely used in agriculture,
    2288. 

  2288.                                 industry, military, aviation and other fields, and the organic combination with machines
    2289. 

  2289.                                 can
    2290. 

  2290.                                 design intelligent robots with high working efficiency, high real-time and high
    2291. 

  2291.                                 accuracy.
    2292. 

  2292.                             </p>
    2293. 

  2293.                         </div>
    2294. 

  2294.                     </div>
    2295. 

  2295.                     <div class="modal_setting_teacher_right setting_right_all">
    2296. 

  2296.                         <div class="translatable_computer_configuration"
    2297. 

  2297.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    2298. 

  2298.                             <span>Computer Configuration Requirements</span>
    2299. 

  2299.                         </div>
    2300. 

  2300.                         <div class="setting_border">
    2301. 

  2301.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    2302. 

  2302.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    2303. 

  2303.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    2304. 

  2304.                                     Supported</span>：1440*768
    2305. 

  2305.                             </p>
    2306. 

  2306.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    2307. 

  2307.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    2308. 

  2308.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    2309. 

  2309.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    2310. 

  2310.                                     class="translatable_need">Ok</span></p>
    2311. 

  2311.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    2312. 

  2312.                                     class="translatable_no_need">NO</span></p>
    2313. 

  2313.                         </div>
    2314. 

  2314.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    2315. 

  2315.                             href="#gesture_recog_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    2316. 

  2316.                     </div>
    2317. 

  2317.                 </div>
    2318. 

  2318.             </div>
    2319. 

  2319.         </div>
    2320. 

  2320.         <!-- gesture recognition modal -->
    2321. 

  2321.         <div id="gesture_recog_modal" class="modal">
    2322. 

  2322.             <div id="gestureRecognitionTitle" class="modal-content">
    2323. 

  2323.                 <div style="margin-bottom:-10px;margin-top:10px;" class="row">
    2324. 

  2324.                     <div class="col s10">
    2325. 

  2325.                         <h4 class="translatable_gesturesTitle">Gesture Recognition</h4>
    2326. 

  2326.                     </div>
    2327. 

  2327.                     <div style="text-align:right;" class="col s2">
    2328. 

  2328.                         <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);"
    2329. 

  2329.                             id="gesture_recognition_close" class="modal-action modal-close">
    2330. 

  2330.                             <h4><i class="small material-icons">close</i></h4>
    2331. 

  2331.                         </a>
    2332. 

  2332.                     </div>
    2333. 

  2333.                 </div>
    2334. 

  2334.                 <div class="row">
    2335. 

  2335.                     <div class="col s12">
    2336. 

  2336.                         <div class="switch" style="margin-bottom:20px;">
    2337. 

  2337.                             <label>
    2338. 

  2338.                                 <span class="translatable_emotion_camera_off">Camera Off</span>
    2339. 

  2339.                                 <input id="camera_switch_gesture" type="checkbox" onclick="cameraSwitchGesture();">
    2340. 

  2340.                                 <span class="lever "></span><span class="translatable_emotion_camera_on">On</span>
    2341. 

  2341.                             </label>
    2342. 

  2342.                         </div>
    2343. 

  2343.                     </div>
    2344. 

  2344.                 </div>
    2345. 

  2345.                 <div style="margin-bottom:10px;" class="row">
    2346. 

  2346.                     <div style="float:center;" class="col s5">
    2347. 

  2347.                         <p class="translatable_gesture_webcam" style="margin-top:-20px;">Webcam:</p>
    2348. 

  2348.                         <div id="webCameraGestureFrame">
    2349. 

  2349.                             <div id="webCameraGesture"></div>
    2350. 

  2350.                         </div>
    2351. 

  2351.                         <div class="translatable_emotion_camera_turnon_text" id="gesture_webCamPlaceholder">Turn on the
    2352. 

  2352.                             Camera first
    2353. 

  2353.                         </div>
    2354. 

  2354.                     </div>
    2355. 

  2355.                     <div style="float:center;" class="col s7">
    2356. 

  2356.                         <a id="gestureAnalyzeButton"
    2357. 

  2357.                             class="disabled waves-effect waves-light btn blue translatable_gesture_recognition"
    2358. 

  2358.                             onclick="gestureRecognize();">Recognize</a>
    2359. 

  2359.                         <div id="gestureResultAreaFrame">
    2360. 

  2360.                             <h4 class="gestureResultAreaTitle translatable_gesture_recognition_result">Recognition
    2361. 

  2361.                                 Result:
    2362. 

  2362.                             </h4>
    2363. 

  2363.                             <div id="gestureResultAreaContent" class="translatable_gesture_result">
    2364. 

  2364.                                 No result yet.
    2365. 

  2365.                             </div>
    2366. 

  2366.                         </div>
    2367. 

  2367.                         <div class="col s12 select_send_way" style="position: relative; margin:12px 0;padding: 0;">
    2368. 

  2368.                             <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
    2369. 

  2369.                             <!-- <span class="translatable_send_module">Send Module</span> -->
    2370. 

  2370.                         </div>
    2371. 

  2371.                         <div class="s12" style="position: relative;margin-top: 45px;">
    2372. 

  2372.                             <div class="send_cloud">
    2373. 

  2373.                                 <div id="cloudRequestStatuss" class="s12">
    2374. 

  2374.                                 </div>
    2375. 

  2375.                                 <div class="translatable_selectEvent" style="padding-right: 0.75rem;">Choose a CocoCloud
    2376. 

  2376.                                     event
    2377. 

  2377.                                     here, the analyzed result will
    2378. 

  2378.                                     directly send to there</div>
    2379. 

  2379.                                 <div style="width:100%;margin-top: 15px;">
    2380. 

  2380.                                     <select class="browser-default" id="AI_gesture_events">
    2381. 

  2381.                                         <option class="translatable_noEvent" value=null disabled>No event here. Login
    2382. 

  2382.                                             first
    2383. 

  2383.                                         </option>
    2384. 

  2384.                                     </select>
    2385. 

  2385.                                 </div>
    2386. 

  2386.                                 <span style="float:right;top: -45px;position: relative;margin-top: -38px;">
    2387. 

  2387.                                     <i id="update_Coevent_web" class="material-icons">autorenew</i>
    2388. 

  2388.                                 </span>
    2389. 

  2389.                             </div>
    2390. 

  2390.                             <div class="col s12 send_module"
    2391. 

  2391.                                 style="position: relative;display: none;height: 100px;padding: 0;">
    2392. 

  2392.                                 <div class="translatable_send_module">Send Module</div>
    2393. 

  2393.                                 <div class="input-field col s6" style="margin-top:2px;padding: 0;">
    2394. 

  2394.                                     <span class="translatable_port">Port:</span>
    2395. 

  2395.                                     <span class="port" style="padding-left:10px;"></span>
    2396. 

  2396.                                 </div>
    2397. 

  2397.                                 <div class="col s6" style="margin-top:2px;">
    2398. 

  2398.                                     <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtns translatable_connectBtn disabled"
    2399. 

  2399.                                         style="float:right;margin-right:5px">connect</a>
    2400. 

  2400.                                     <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtns translatable_disconnectBtn"
    2401. 

  2401.                                         style="float:right;margin-right:5px;display:none">disconnect</a>
    2402. 

  2402.                                 </div>
    2403. 

  2403.                             </div>
    2404. 

  2404.                         </div>
    2405. 

  2405.                     </div>
    2406. 

  2406.                 </div>
    2407. 

  2407.                 <!-- <div class="row">
    2408. 

  2408.                     <div class="col s12">
    2409. 

  2409.                         <hr style="margin-top: 20px; border-top: 0.5px solid rgba(0,0,0,.1);" />
    2410. 

  2410.                     </div>
    2411. 

  2411.                 </div> -->
    2412. 

  2412.             </div>
    2413. 

  2413.         </div>
    2414. 

  2414.         <!-- 显示voice speech modal配置弹框 -->
    2415. 

  2415.         <div id="setting_voice_input_modal" class="modal modal_closes">
    2416. 

  2416.             <span class="modal_close" style="padding: 15px;position: absolute;right: 0;cursor: pointer;"><i
    2417. 

  2417.                     class="small material-icons" style="font-size: 1.5rem;">close</i></span>
    2418. 

  2418.             <div class="modal-content" style="padding: 20px;">
    2419. 

  2419.                 <h4 class="translatable_labs_center_modal_title">CocoBlockly Labs</h4>
    2420. 

  2420.                 <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    2421. 

  2421.                 <div style="display:flex;justify-content:space-around;">
    2422. 

  2422.                     <div class="modal_setting_teacher_left setting_left_all">
    2423. 

  2423.                         <div class="card-image waves-effect waves-block waves-light">
    2424. 

  2424.                             <img class="" src="icons/AppCenter_ai_speech.jpg"
    2425. 

  2425.                                 style="border: solid 1.2px lightgray;width: 100%;">
    2426. 

  2426.                         </div>
    2427. 

  2427.                         <div>
    2428. 

  2428.                             <span id="ac-card-title"
    2429. 

  2429.                                 class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_speech_recognition"
    2430. 

  2430.                                 style="font-size: 30px;">Speech
    2431. 

  2431.                                 Recognition</span>
    2432. 

  2432.                             <p class="translatable_voice_input_content">The trend of robot development is artificial
    2433. 

  2433.                                 intelligence. Deep learning is the frontier technology of intelligent robot and a new
    2434. 

  2434.                                 topic
    2435. 

  2435.                                 in the field of machine learning.Deep learning technology is widely used in agriculture,
    2436. 

  2436.                                 industry, military, aviation and other fields, and the organic combination with machines
    2437. 

  2437.                                 can
    2438. 

  2438.                                 design intelligent robots with high working efficiency, high real-time and high
    2439. 

  2439.                                 accuracy.
    2440. 

  2440.                             </p>
    2441. 

  2441.                         </div>
    2442. 

  2442.                     </div>
    2443. 

  2443.                     <div class="modal_setting_teacher_right setting_right_all">
    2444. 

  2444.                         <div class="translatable_computer_configuration"
    2445. 

  2445.                             style="background: rgb(33, 150, 243);padding: 5px 10px;color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    2446. 

  2446.                             <span>Computer Configuration Requirements</span>
    2447. 

  2447.                         </div>
    2448. 

  2448.                         <div class="setting_border">
    2449. 

  2449.                             <p><span class="translatable_the_operating_system">Minimum Opearting System
    2450. 

  2450.                                     version</span>：Windows (>Windows7), macOS (>10.11)</p>
    2451. 

  2451.                             <p><span class="translatable_resolution_of_the">Suggested Resolution
    2452. 

  2452.                                     Supported</span>：1440*768
    2453. 

  2453.                             </p>
    2454. 

  2454.                             <p><span class="translatable_memory_capacity">Memory Capacity</span>：8GB-16GB</p>
    2455. 

  2455.                             <p><span class="translatable_the_hard_disk">The Hard Disk</span>：256GB-512Gb</p>
    2456. 

  2456.                             <p><span class="translatable_the_graphics_card">The Graphics Card</span>：650M</p>
    2457. 

  2457.                             <p><span class="translatable_is_need_camera">Do you need a camera</span>：<span
    2458. 

  2458.                                     class="translatable_no_need">NO</span></p>
    2459. 

  2459.                             <p><span class="translatable_is_need_microphone">Do you need a microphone</span>：<span
    2460. 

  2460.                                     class="translatable_need">OK</span></p>
    2461. 

  2461.                         </div>
    2462. 

  2462.                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger"
    2463. 

  2463.                             href="#voice_input_modal" style="width: 94%;position: absolute;bottom: 5px;">Enter</a>
    2464. 

  2464.                     </div>
    2465. 

  2465.                 </div>
    2466. 

  2466.             </div>
    2467. 

  2467.         </div>
    2468. 

  2468.         <!-- voice speech modal -->
    2469. 

  2469.         <div id="voice_input_modal" class="modal voice-modal-trigger">
    2470. 

  2470.             <div class="modal-content">
    2471. 

  2471.                 <div style="margin-top:10px;" class="row">
    2472. 

  2472.                     <div class="col s8">
    2473. 

  2473.                         <h4 class="translatable_speechDemoTitle">Speech Recognition</h4>
    2474. 

  2474.                     </div>
    2475. 

  2475.                     <div style="text-align:right;" class="col s4">
    2476. 

  2476.                         <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);" id="voice_input_close"
    2477. 

  2477.                             class="modal-action modal-close">
    2478. 

  2478.                             <h4><i class="small material-icons">close</i></h4>
    2479. 

  2479.                         </a>
    2480. 

  2480.                     </div>
    2481. 

  2481.                 </div>
    2482. 

  2482.                 <div style="margin-bottom:10px;margin-top:-20px;" class="row">
    2483. 

  2483.                     <div class="col s12">
    2484. 

  2484.                         <p class="translatable_speechTip" style="font-size:15px;font-weight:200;">Voice recognition for
    2485. 

  2485.                             English, Cantonese & Mandarin.</p>
    2486. 

  2486.                         <hr
    2487. 

  2487.                             style="position:relative;top:-2px;margin-bottom:15px;border-color:rgba(0,0,0,.1); border-width: 1px;">
    2488. 

  2488.                     </div>
    2489. 

  2489.                 </div>
    2490. 

  2490.                 <div class="row" style="margin-top:-15px;margin-bottom:10px">
    2491. 

  2491.                     <div class="col s4">
    2492. 

  2492.                         <p class="translatable_speech_language_select">Select a language to recognize:</p>
    2493. 

  2493.                     </div>
    2494. 

  2494.                     <div style="margin-left:-20px;" class="col s2 speech_language" style="position:relative;top:3px">
    2495. 

  2495.                         <select id="speech_language_selection" class="browser-default" style="max-width:200px">
    2496. 

  2496.                             <option value="english" class="translatable_speech_language_English">English</option>
    2497. 

  2497.                             <option value="cantonese" class="translatable_speech_language_Cantonese">Cantonese</option>
    2498. 

  2498.                             <option value="mandarin" class="translatable_speech_language_Mandarin">Mandarin</option>
    2499. 

  2499.                         </select>
    2500. 

  2500.                     </div>
    2501. 

  2501.                     <div class="col" style="position:relative;top:5px">
    2502. 

  2502.                         <a id="speech_button" class="waves-effect waves-light btn blue translatable_speech_recognition"
    2503. 

  2503.                             style="padding:0 8px" onclick="processSpeech()/*startSpeech()*/">Start Recording</a>
    2504. 

  2504.                     </div>
    2505. 

  2505.                     <div class="col s3" style="position:relative;top:15px;">
    2506. 

  2506.                         <span style="font-weight:200;margin-left:-5px;" id="speech_process_title"
    2507. 

  2507.                             style="position:relative;top:-6px;"></span>
    2508. 

  2508.                     </div>
    2509. 

  2509.                 </div>
    2510. 

  2510.                 <div class="row">
    2511. 

  2511.                     <textarea id="speech_textarea" row="3" class="disabled translatable_speech_textarea_title"
    2512. 

  2512.                         style="width:772px;height:130px;resize:none;border-radius:5px;padding:10px;color:rgba(0,0,0,.4);"
    2513. 

  2513.                         readonly> Click on the mic button to start dictating...</textarea>
    2514. 

  2514.                 </div>
    2515. 

  2515.                 <div style="margin-top:5px;" class="row">
    2516. 

  2516.                     <div class="col s12 select_send_way" style="position: relative; margin-bottom:12px;">
    2517. 

  2517.                         <span class="select_send_way_color translatable_send_cloud">Send Cloud</span>
    2518. 

  2518.                         <!-- <span class="translatable_send_module">Send Module</span> -->
    2519. 

  2519.                     </div>
    2520. 

  2520.                     <div class="col s12 send_cloud" style="position: relative">
    2521. 

  2521.                         <div class="col s12">
    2522. 

  2522.                             <span id="speechDemoCloudRequest" style="font-weight:200;"></span>
    2523. 

  2523.                         </div>
    2524. 

  2524.                         <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will
    2525. 

  2525.                             directly send to there</div>
    2526. 

  2526.                         <div style="width:95%">
    2527. 

  2527.                             <select style="margin-top:10px;" class="browser-default" id="AI_voice_events">
    2528. 

  2528.                                 <option class="translatable_noEvent" value=null disabled>No event here. Login first
    2529. 

  2529.                                 </option>
    2530. 

  2530.                             </select>
    2531. 

  2531.                         </div>
    2532. 

  2532.                         <span style="float:right;top: -45px;position: relative;">
    2533. 

  2533.                             <i id="update_Coevent_voice" class="material-icons">autorenew</i>
    2534. 

  2534.                         </span>
    2535. 

  2535.                     </div>
    2536. 

  2536.                     <div class="col s12 send_module" style="position: relative;display: none;height: 100px;">
    2537. 

  2537.                         <div class="translatable_send_module">Send Module</div>
    2538. 

  2538.                         <div class="input-field col s6" style="margin-top:2px;">
    2539. 

  2539.                             <span class="translatable_port">Port:</span>
    2540. 

  2540.                             <span class="port" style="padding-left:10px;"></span>
    2541. 

  2541.                         </div>
    2542. 

  2542.                         <div class="col s6" style="margin-top:2px;">
    2543. 

  2543.                             <a class="waves-effect waves-light blue lighten-2 btn translatable_connectBtns translatable_connectBtn disabled"
    2544. 

  2544.                                 style="float:right;margin-right:5px">connect</a>
    2545. 

  2545.                             <a class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn translatable_disconnectBtns "
    2546. 

  2546.                                 style="float:right;margin-right:5px;display:none">disconnect</a>
    2547. 

  2547.                         </div>
    2548. 

  2548.                     </div>
    2549. 

  2549.                 </div>
    2550. 

  2550.             </div>
    2551. 

  2551.         </div>
    2552. 

  2552.     </div>
    2553. 

  2553.     </div>
    2554. 

  2554.     </div>
    2555. 

  2555.     <!-- iframe -->
    2556. 

  2556.     <div id="iframe" class="modal modal_closes" style="width: 70%;">
    2557. 

  2557.         <span class="modal_close" style="padding: 15px;right: 12px;">
    2558. 

  2558.             <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2559. 

  2559.         </span>
    2560. 

  2560.         <!-- <iframe frameborder="0" style="width: 100%;height: 50vh;"></iframe> -->
    2561. 

  2561.     </div>
    2562. 

  2562.     <div id="updatePy" class="modal">
    2563. 

  2563.         <!-- <i id="updatePy_icon" class="material-icons right" style="cursor:pointer;">close</i> -->
    2564. 

  2564.         <div style="padding: 20px;">
    2565. 

  2565.             <h2 style="font-size: 30px;margin-bottom: 0;" class="translatable_update_file">更新文件</h2>
    2566. 

  2566.             <p>选择文件夹</p>
    2567. 

  2567.             <div id="select_folder" class="select_folder" style="height: 300px;">
    2568. 

  2568. 

  2569.             </div>
    2570. 

  2570.             <!-- <div class="folder_name">
    2571. 

  2571.                 <span>文件名：</span>
    2572. 

  2572.                 <input class="folder_name_inpit" type="text">
    2573. 

  2573.             </div> -->
    2574. 

  2574.             <div class="update_bottom">
    2575. 

  2575.                 <button class="cancle">取消</button>
    2576. 

  2576.                 <button class="confim">确定</button>
    2577. 

  2577.             </div>
    2578. 

  2578.         </div>
    2579. 

  2579.     </div>
    2580. 

  2580.     <!-- Custom Alert: Content is loaded using JavaScript to display alerts -->
    2581. 

  2581.     <div id="cus_alert" class="modale modal_small modal_custom">
    2582. 

  2582.         <div class="modal-content">
    2583. 

  2583.             <h5 id="cus_alert_title">Empty Alert</h5>
    2584. 

  2584.             <p><span id="cus_alert_body">Empty alert text</span></p>
    2585. 

  2585.         </div>
    2586. 

  2586.         <div class="modal-footer">
    2587. 

  2587.             <a id="cus_alert_button" class="waves-effect btn-flat modal-close blue"><span id="cus_alert_button_content"
    2588. 

  2588.                     style="color:#fff"></span></a>
    2589. 

  2589.             <a id="cus_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay"
    2590. 

  2590.                     style="color:#fff">Okay</span></a>
    2591. 

  2591.         </div>
    2592. 

  2592.     </div>
    2593. 

  2593.     <!-- Env Detect Modal -->
    2594. 

  2594.     <div id="env_detect" class="modal modal_closes">
    2595. 

  2595.         <div class="modal-content">
    2596. 

  2596.             <span class="modal_close" style="padding: 15px;">
    2597. 

  2597.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2598. 

  2598.             </span>
    2599. 

  2599.             <h4 class="translatable_env_detect" style="margin-bottom:2.5rem;">Environment Detect</h4>
    2600. 

  2600.             <div id="detect_before" style="position:relative;">
    2601. 

  2601.                 <div>
    2602. 

  2602.                     <img src="./icons/device-detect.svg" />
    2603. 

  2603.                 </div>
    2604. 

  2604.                 <div id="detect_preload" style="display:none;">
    2605. 

  2605.                     <div
    2606. 

  2606.                         style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
    2607. 

  2607.                         <div class="preloader-wrapper big active">
    2608. 

  2608.                             <div class="spinner-layer spinner-blue-only">
    2609. 

  2609.                                 <div class="circle-clipper left">
    2610. 

  2610.                                     <div class="circle"></div>
    2611. 

  2611.                                 </div>
    2612. 

  2612.                                 <div class="gap-patch">
    2613. 

  2613.                                     <div class="circle"></div>
    2614. 

  2614.                                 </div>
    2615. 

  2615.                                 <div class="circle-clipper right">
    2616. 

  2616.                                     <div class="circle"></div>
    2617. 

  2617.                                 </div>
    2618. 

  2618.                             </div>
    2619. 

  2619.                         </div>
    2620. 

  2620.                     </div>
    2621. 

  2621.                 </div>
    2622. 

  2622.             </div>
    2623. 

  2623.             <div id="detect_result" style="display:none;">
    2624. 

  2624.                 <div style="border-bottom:2.5px #0057ff6e solid;padding:0.25rem 0;">
    2625. 

  2625.                     <h5 class="translatable_title_device">Device</h5>
    2626. 

  2626.                     <h5 class="translatable_title_result">Result</h5>
    2627. 

  2627.                     <h5 class="translatable_title_support">Support</h5>
    2628. 

  2628.                     <h5 class="translatable_title_suggest">Suggest</h5>
    2629. 

  2629.                 </div>
    2630. 

  2630.                 <div id="env_detect_os" style="margin-top:0.5rem;">
    2631. 

  2631.                     <div class="translatable_os">System</div>
    2632. 

  2632.                     <div></div>
    2633. 

  2633.                     <div class="detect-icons"></div>
    2634. 

  2634.                     <div></div>
    2635. 

  2635.                 </div>
    2636. 

  2636.                 <div id="env_detect_browser">
    2637. 

  2637.                     <div class="translatable_browser">Browser</div>
    2638. 

  2638.                     <div></div>
    2639. 

  2639.                     <div class="detect-icons"></div>
    2640. 

  2640.                     <div></div>
    2641. 

  2641.                 </div>
    2642. 

  2642.                 <div id="env_detect_plugin" style="margin-bottom:0.5rem;">
    2643. 

  2643.                     <div>Uploader</div>
    2644. 

  2644.                     <div></div>
    2645. 

  2645.                     <div class="detect-icons"></div>
    2646. 

  2646.                     <div></div>
    2647. 

  2647.                 </div>
    2648. 

  2648.             </div>
    2649. 

  2649.         </div>
    2650. 

  2650.         <div class="modal-footer">
    2651. 

  2651.             <a id="detect-btn" class="waves-effect waves-light btn-large blue">
    2652. 

  2652.                 <span class="translatable_detect">Detect</span>
    2653. 

  2653.             </a>
    2654. 

  2654.         </div>
    2655. 

  2655.     </div>
    2656. 

  2656.     <!-- Serial Monitor   -->
    2657. 

  2657.     <div id="Serial-monitor" class="card card-serialMonitor" style="display:none;height:0;opacity:0;">
    2658. 

  2658.         <div class="code-header">
    2659. 

  2659.             <span class="code-header-logo"><i class="material-icons" style="padding-top:10px">search</i></span>
    2660. 

  2660.             <span class="card-title translatable_serialMonitor">Serial Monitor</span>
    2661. 

  2661.         </div>
    2662. 

  2662.         <div class="card-content" style="padding:8px 10px;">
    2663. 

  2663.             <div class="row">
    2664. 

  2664.                 <div class="input-field col s6" style="margin-top:2px;">
    2665. 

  2665.                     <p id="ports-monitor" style="font-size:16px"><span class="translatable_port">Port:</span><span
    2666. 

  2666.                             style="padding-left:10px;"></span>
    2667. 

  2667.                     </p>
    2668. 

  2668.                 </div>
    2669. 

  2669.                 <div class="col s6" style="margin-top:2px;">
    2670. 

  2670.                     <a id="comms-cnt"
    2671. 

  2671.                         class="waves-effect waves-light blue lighten-2 btn translatable_connectBtn disabled"
    2672. 

  2672.                         style="float:right;margin-right:5px">connect</a>
    2673. 

  2673.                     <a id="comms-discnt" class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn "
    2674. 

  2674.                         style="float:right;margin-right:5px;display:none">disconnect</a>
    2675. 

  2675.                 </div>
    2676. 

  2676.             </div>
    2677. 

  2677.             <div class="row">
    2678. 

  2678.                 <div class="input-field col s5">
    2679. 

  2679.                     <select id="serial_output_style" style="font-size:16px">
    2680. 

  2680.                         <option value="" selected class="translatable_no_line_ending">No line ending
    2681. 

  2681.                         </option>
    2682. 

  2682.                         <option value="nl" class="translatable_newline">Newline</option>
    2683. 

  2683.                         <option value="cr" class="translatable_CR">Carriage return</option>
    2684. 

  2684.                         <option value="blc" class="translatable_NL_CR">Both NL &amp; CR</option>
    2685. 

  2685.                     </select>
    2686. 

  2686.                 </div>
    2687. 

  2687.                 <div class="input-field col s5">
    2688. 

  2688.                     <select id="serial_baud" style="font-size:16px">
    2689. 

  2689.                         <option value="300">300 <span class="translatable_baud">baud</span></option>
    2690. 

  2690.                         <option value="1200">1200 <span class="translatable_baud">baud</span></option>
    2691. 

  2691.                         <option value="2400">2400 <span class="translatable_baud">baud</span></option>
    2692. 

  2692.                         <option value="4800">4800 <span class="translatable_baud">baud</span></option>
    2693. 

  2693.                         <option value="9600" selected>9600 <span class="translatable_baud">baud</span>
    2694. 

  2694.                         </option>
    2695. 

  2695.                         <option value="19200">19200 <span class="translatable_baud">baud</span></option>
    2696. 

  2696.                         <option value="38400">38400 <span class="translatable_baud">baud</span></option>
    2697. 

  2697.                         <option value="57600">57600 <span class="translatable_baud">baud</span></option>
    2698. 

  2698.                         <option value="115200">115200 <span class="translatable_baud">baud</span></option>
    2699. 

  2699.                     </select>
    2700. 

  2700.                 </div>
    2701. 

  2701.             </div>
    2702. 

  2702.             <div class="row">
    2703. 

  2703.                 <div class="input-field col s10">
    2704. 

  2704.                     <input id="comms-msg" type="text" style="margin:0">
    2705. 

  2705.                     <label for="Sending_Messages" class="translatable_sendMsg" style="font-size:16px">Sending
    2706. 

  2706.                         Messages</label>
    2707. 

  2707.                 </div>
    2708. 

  2708.                 <div class="input-field col s2">
    2709. 

  2709.                     <a id="comms-send" class="waves-effect waves-light blue lighten-2 btn translatable_sendBtn disabled"
    2710. 

  2710.                         style="float:right;padding-right:5px">SEND</a>
    2711. 

  2711.                 </div>
    2712. 

  2712.             </div>
    2713. 

  2713.             <div class="row">
    2714. 

  2714.                 <div class="col s12">
    2715. 

  2715.                     <textarea id="commsBox" label="readonly" readonly></textarea>
    2716. 

  2716.                 </div>
    2717. 

  2717.             </div>
    2718. 

  2718.             <div class="row" style="margin-bottom:8px">
    2719. 

  2719.                 <div class="col s4" style="margin-top:8px">
    2720. 

  2720.                     <input id="autoscroll" type="checkbox" class="filled-in" checked="checked">
    2721. 

  2721.                     <label for="autoscroll">
    2722. 

  2722.                         <span class="translatable_autoScroll">Autoscroll</span>
    2723. 

  2723.                     </label>
    2724. 

  2724.                 </div>
    2725. 

  2725.                 <div class="input-field col s8" style="margin:4px,0,8px,0">
    2726. 

  2726.                     <a id="comms-clear" class="waves-effect waves-light blue lighten-2 btn translatable_comms_clear"
    2727. 

  2727.                         style="float:right;margin-right:5px">CLEAR</a>
    2728. 

  2728.                     <a id="comms-export"
    2729. 

  2729.                         class="waves-effect waves-light blue lighten-2 btn translatable_comms_export modal-trigger"
    2730. 

  2730.                         href="#export-file" style="float:right;margin-right:5px">EXPORT</a>
    2731. 

  2731.                 </div>
    2732. 

  2732.             </div>
    2733. 

  2733.         </div>
    2734. 

  2734.     </div>
    2735. 

  2735.     <!-- login modal -->
    2736. 

  2736.     <div id="login_modal" class="modal modal_closes" style="top:62px">
    2737. 

  2737.         <div id="login_modal_preload" class="progress" style="display:none">
    2738. 

  2738.             <div class="indeterminate"></div>
    2739. 

  2739.         </div>
    2740. 

  2740.         <div class="modal-content" style="padding:0;">
    2741. 

  2741.             <span class="modal_close" style="padding: 15px;">
    2742. 

  2742.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2743. 

  2743.             </span>
    2744. 

  2744.             <!-- add for login iframe -->
    2745. 

  2745.             <div id="before_login"></div>
    2746. 

  2746.             <div id="after_login">
    2747. 

  2747.                 <div id="userProfile_alias"></div>
    2748. 

  2748.                 <div style="width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span
    2749. 

  2749.                         class="translatable_user_email">Email：</span><span id="userProfile_username"> </span></div>
    2750. 

  2750.                 <div><span class="translatable_user_school">School：</span><span id="userProfile_school"></span></div>
    2751. 

  2751.                 <div id="userProfile_apikey">
    2752. 

  2752.                     <div>
    2753. 

  2753.                         <span class="translatable_Event">Event: </span>
    2754. 

  2754.                         <span style="margin-top: -13px;float:right;transform:translateY(35%);">
    2755. 

  2755.                             <i id="update_Coevent" class="material-icons" onclick="updateProject()">autorenew</i>
    2756. 

  2756.                         </span>
    2757. 

  2757.                         <p class="get_event" style="margin: 5px 0;color: #2196F3;"></p>
    2758. 

  2758.                         <select
    2759. 

  2759.                             style="outline:0; width: 100%; margin: 6px auto 8px auto; border: 1px solid rgba(0,0,0,.2);"
    2760. 

  2760.                             class="browser-default" id="cloud_events" onchange="changeProject()">
    2761. 

  2761.                             <option value=null disabled>No Event</option>
    2762. 

  2762.                         </select>
    2763. 

  2763.                     </div>
    2764. 

  2764.                     <div style="margin-top:5px">
    2765. 

  2765.                         <span>API Key: </span>
    2766. 

  2766.                         <a id="apikey-copy" data-clipboard-action="copy" data-clipboard-target="#api-key">
    2767. 

  2767.                             <i class="material-icons tiny">content_copy</i>
    2768. 

  2768.                         </a>
    2769. 

  2769.                         <textarea style="padding: 6px 6px; margin-top: 4px;" id="api-key" readonly></textarea>
    2770. 

  2770.                     </div>
    2771. 

  2771.                 </div>
    2772. 

  2772.             </div>
    2773. 

  2773.         </div>
    2774. 

  2774.         <div class="modal-footer" style="display:none;">
    2775. 

  2775.             <a id="modal_logout_btn" class="waves-effect btn-flat blue">
    2776. 

  2776.                 <span class="translatable_signout">Sign Out</span>
    2777. 

  2777.                 <img class="xuanhuan svgImg" src="./images/loading.svg" alt="">
    2778. 

  2778.             </a>
    2779. 

  2779.             <a id="modal_cococloud_btn" href="//cocorobo.cn/cloud" target="_black"
    2780. 

  2780.                 class="waves-effect btn-flat blue"><span class="translatable_cococloud">Go to CocoCloud</span></a>
    2781. 

  2781.         </div>
    2782. 

  2782.     </div>
    2783. 

  2783.     <!-- local storage - import modal -->
    2784. 

  2784.     <div id="Storage_import_modal" class="modal" style="width:500px">
    2785. 

  2785.         <div class="modal-content">
    2786. 

  2786.             <h4 class="translatable_localStorageImport">Import Project</h4>
    2787. 

  2787.             <div> <span class="translatable_ImportTooltip" sytle="margin-left:10px">Select your project file(*.xml) and
    2788. 

  2788.                     import it to the current workspace.Warning:will replace current blocks</span></div>
    2789. 

  2789.             <div id="import_area" class="row" style="margin: 10px;height: 170px;position: relative;">
    2790. 

  2790.                 <a id="modal_import_btn" class="waves-effect btn-flat blue" style="top:180px;position:fixed;"><span
    2791. 

  2791.                         class="translatable_import" style="font-size:15px;color:#fff">Import</span></a>
    2792. 

  2792.                 <span class="translatable_ImportContent"
    2793. 

  2793.                     style="top: 187px;width:300px;position:fixed;text-align:center;">Click to choose a file from
    2794. 

  2794.                     your computer</span>
    2795. 

  2795.             </div>
    2796. 

  2796.         </div>
    2797. 

  2797.     </div>
    2798. 

  2798.     <!-- General Alert: Content is loaded using JavaScript to display alerts -->
    2799. 

  2799.     <div id="gen_alert" class="modale modal_closes modal_small" style="width:730px">
    2800. 

  2800.         <div class="modal-content">
    2801. 

  2801.             <span class="modal_close" style="padding: 15px;">
    2802. 

  2802.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2803. 

  2803.             </span>
    2804. 

  2804.             <h5 id="gen_alert_title">Empty Alert</h5>
    2805. 

  2805.             <p><span id="gen_alert_body">Empty alert text</span></p>
    2806. 

  2806.         </div>
    2807. 

  2807.         <div class="modal-footer">
    2808. 

  2808.             <a id="gen_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay"
    2809. 

  2809.                     style="color:#fff">Okay</span></a>
    2810. 

  2810.             <a id="gen_alert_cancel_link" class="waves-effect btn-flat modal-close blue"><span
    2811. 

  2811.                     class="translatable_cancel" style="color:#fff">Cancel</span></a>
    2812. 

  2812.         </div>
    2813. 

  2813.     </div>
    2814. 

  2814.     <!-- Example Alert: Content is loaded using JavaScript to display alerts -->
    2815. 

  2815.     <div id="example_alert" class="modale modal_small" style="height:30%;width: 30%;">
    2816. 

  2816.         <div class="modal-content">
    2817. 

  2817.             <div id="loading" style="text-align:center;display: none;">
    2818. 

  2818.                 <img src="./gif/loading.gif" style="width: 300px;" />
    2819. 

  2819.             </div>
    2820. 

  2820.             <p
    2821. 

  2821.                 style="text-align:center;font-weight:bold;font-size:20px;z-index: 1087;position: absolute;left: 0;right: 0;top: 50%;">
    2822. 

  2822.                 <span id="example_alert_body">Empty alert text</span>
    2823. 

  2823.             </p>
    2824. 

  2824.         </div>
    2825. 

  2825.     </div>
    2826. 

  2826. 

  2827.     <div id="cloud_storage_name_modal" class="modal modal_closes cloud_storage_name_modal">
    2828. 

  2828.         <div class="modal-content" style="padding: 0;">
    2829. 

  2829.             <span class="modal_close" style="padding: 15px;">
    2830. 

  2830.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2831. 

  2831.             </span>
    2832. 

  2832.             <h4 class="cloudStorage translatable_cloudStorageTitle">Cloud Storage</h4>
    2833. 

  2833.             <!-- <div id="cloud_askLogin"></div> -->
    2834. 

  2834.             <div class="cloud_fileName">
    2835. 

  2835.                 <div class="translatable_project_name"
    2836. 

  2836.                     style="font-size: 16px;color: #3D3D3D;letter-spacing: 0;margin-top: 15px;margin-left: 25px;">作品名称
    2837. 

  2837.                 </div>
    2838. 

  2838.                 <div style="text-align: center;margin-top: 15px;">
    2839. 

  2839.                     <input id="cloud_input" type="text" placeholder="名称" />
    2840. 

  2840.                 </div>
    2841. 

  2841.                 <div style="margin-top: 20px;text-align: center;">
    2842. 

  2842.                     <button id="confirm_btn" type="button"
    2843. 

  2843.                         style="cursor: pointer;background: #4A6AFF;border-radius: 3px;width: 90px;line-height: 36px;border: none;margin-right: 30px;">
    2844. 

  2844.                         <span class="translatable_cofirm_btn"
    2845. 

  2845.                             style="font-size: 14px;color: #FFFFFF;letter-spacing: 0;">确 定</span>
    2846. 

  2846.                     </button>
    2847. 

  2847.                     <button id="cancel_btn" class="cancelBtn" type="button"
    2848. 

  2848.                         style="cursor: pointer;border-radius: 3px;width: 90px;line-height: 36px;border: 1px solid #CCCCCC;">
    2849. 

  2849.                         <span class="translatable_cancel_btn" style="font-size: 14px;color:#888888;letter-spacing: 0;">取
    2850. 

  2850.                             消</span>
    2851. 

  2851.                     </button>
    2852. 

  2852.                 </div>
    2853. 

  2853.             </div>
    2854. 

  2854.         </div>
    2855. 

  2855.     </div>
    2856. 

  2856. 

  2857. 

  2858.     <div id="donload_file_cocorobo" class="modal modal_closes donload_file_cocorobo">
    2859. 

  2859.         <div class="modal-content" style="padding: 0;">
    2860. 

  2860.             <span class="modal_close" style="padding: 15px;">
    2861. 

  2861.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2862. 

  2862.             </span>
    2863. 

  2863.             <h4 class="cloudStorage translatable_localStorageTitle">Cloud Storage</h4>
    2864. 

  2864.             <!-- <div id="cloud_askLogin"></div> -->
    2865. 

  2865.             <div class="cloud_fileName">
    2866. 

  2866.                 <div class="translatable_project_name"
    2867. 

  2867.                     style="font-size: 16px;color: #3D3D3D;letter-spacing: 0;margin-top: 15px;margin-left: 25px;">作品名称
    2868. 

  2868.                 </div>
    2869. 

  2869.                 <div style="text-align: center;margin-top: 15px;">
    2870. 

  2870.                     <input id="donload_file_cloud_input" type="text" placeholder="名称" />
    2871. 

  2871.                 </div>
    2872. 

  2872.                 <div style="margin-top: 20px;text-align: center;">
    2873. 

  2873.                     <button id="donload_file_confirm_btn" type="button"
    2874. 

  2874.                         style="cursor: pointer;background: #4A6AFF;border-radius: 3px;width: 90px;line-height: 36px;border: none;margin-right: 30px;">
    2875. 

  2875.                         <span class="translatable_cofirm_btn"
    2876. 

  2876.                             style="font-size: 14px;color: #FFFFFF;letter-spacing: 0;">确 定</span>
    2877. 

  2877.                     </button>
    2878. 

  2878.                     <button id="donload_file_cancel_btn" class="cancelBtn" type="button"
    2879. 

  2879.                         style="cursor: pointer;border-radius: 3px;width: 90px;line-height: 36px;border: 1px solid #CCCCCC;">
    2880. 

  2880.                         <span class="translatable_cancel_btn" style="font-size: 14px;color:#888888;letter-spacing: 0;">取
    2881. 

  2881.                             消</span>
    2882. 

  2882.                     </button>
    2883. 

  2883.                 </div>
    2884. 

  2884.             </div>
    2885. 

  2885.         </div>
    2886. 

  2886.     </div>
    2887. 

  2887. 

  2888.     <div id="firmware_upgrade_modal" class="modal modal_closes firmware_upgrade_modal">
    2889. 

  2889.         <div class="modal-content">
    2890. 

  2890.             <span class="modal_close" style="padding: 15px;">
    2891. 

  2891.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2892. 

  2892.             </span>
    2893. 

  2893.             <div id="firmware_upgrade_Area">
    2894. 

  2894.                 <div style="text-align: center;">
    2895. 

  2895.                     <div class="firmware_module" style="margin-right: 20%;">
    2896. 

  2896.                         <div style="display: table;width: 126px;height: 126px;">
    2897. 

  2897.                             <div class="firmware_module_ai">
    2898. 

  2898.                                 <div class="translatable_ai_module_a">AI 模块</div>V1.0
    2899. 

  2899.                             </div>
    2900. 

  2900.                         </div>
    2901. 

  2901.                     </div>
    2902. 

  2902.                     <div class="firmware_module">
    2903. 

  2903.                         <div style="display: table;width: 126px;height: 126px;">
    2904. 

  2904.                             <div class="firmware_module_iot">
    2905. 

  2905.                                 <div class="translatable_iot_module_a">IOT 模块</div>V0.2
    2906. 

  2906.                             </div>
    2907. 

  2907.                         </div>
    2908. 

  2908.                     </div>
    2909. 

  2909.                 </div>
    2910. 

  2910.                 <div style="text-align: center;">
    2911. 

  2911.                     <div class="firmware_module_download" style="margin-right: 20%;">
    2912. 

  2912.                         <div style="display: table;">
    2913. 

  2913.                             <button
    2914. 

  2914.                                 style="cursor: pointer;background: #4A6AFF;border-radius: 3px;width: 130px;line-height: 36px;border: none;"
    2915. 

  2915.                                 onclick='openUrl("./firmware/ai-module_firmware_2020-10-14.rar")'>
    2916. 

  2916.                                 <span class="button_text translatable_button_text">下载固件升级包</span>
    2917. 

  2917.                             </button>
    2918. 

  2918.                         </div>
    2919. 

  2919.                     </div>
    2920. 

  2920.                     <div class="firmware_module_download">
    2921. 

  2921.                         <div style="display: table;">
    2922. 

  2922.                             <button
    2923. 

  2923.                                 style="cursor: pointer;background: #4A6AFF;border-radius: 3px;width: 130px;line-height: 36px;border: none;"
    2924. 

  2924.                                 onclick='openUrl("./firmware/mcu-module_firmware_2020-9-21_STABLE.bin")'>
    2925. 

  2925.                                 <span class="button_text translatable_button_text">下载固件升级包</span>
    2926. 

  2926.                             </button>
    2927. 

  2927.                         </div>
    2928. 

  2928.                     </div>
    2929. 

  2929.                 </div>
    2930. 

  2930.             </div>
    2931. 

  2931.         </div>
    2932. 

  2932.     </div>
    2933. 

  2933. 

  2934.     <!-- local storage - export modal -->
    2935. 

  2935.     <div id="Storage_export_modal" class="modal" style="width:730px">
    2936. 

  2936.         <div class="modal-content">
    2937. 

  2937.             <h4 class="translatable_localStorageExport">Export Project</h4>
    2938. 

  2938.             <div> <span class="translatable_ExportTooltip" sytle="margin-left:10px">Export current project blocks and
    2939. 

  2939.                     save it your computer,so you can open it next time when you need it</span></div>
    2940. 

  2940.             <div class="row" style="margin: 10px;height: 200px;width: 640px;position: relative;">
    2941. 

  2941.                 <div style="display:block">
    2942. 

  2942.                     <div class="col l6">
    2943. 

  2943.                         <img src="./icons/blockly-file-export_xml.png"
    2944. 

  2944.                             style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
    2945. 

  2945.                     </div>
    2946. 

  2946.                     <div class="col l6">
    2947. 

  2947.                         <img src="./icons/blockly-file-export_png.png"
    2948. 

  2948.                             style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
    2949. 

  2949.                     </div>
    2950. 

  2950.                 </div>
    2951. 

  2951.                 <div>
    2952. 

  2952.                     <div class="col l6">
    2953. 

  2953.                         <a id="modal_exportFileBtn" class="waves-effect btn-flat blue"
    2954. 

  2954.                             style="left: 50%;right: 50%;transform: translateX(-50%)"><span
    2955. 

  2955.                                 class="translatable_exportFile" style="font-size:15px;color:#fff">Project
    2956. 

  2956.                                 File</span></a>
    2957. 

  2957.                     </div>
    2958. 

  2958.                     <div class="col l6">
    2959. 

  2959.                         <a id="modal_exportSnapBtn" class="waves-effect btn-flat blue"
    2960. 

  2960.                             style="left: 50%;right: 50%;transform: translateX(-50%)"><span
    2961. 

  2961.                                 class="translatable_exportSnap" style="font-size:15px;color:#fff">Snapshot</span></a>
    2962. 

  2962.                     </div>
    2963. 

  2963.                 </div>
    2964. 

  2964.                 <div>
    2965. 

  2965.                     <div class="col l6">
    2966. 

  2966.                         <p class="translatable_ExportFileContent"
    2967. 

  2967.                             style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">
    2968. 

  2968.                             Will export as an *xml file.<br>for you to continuing code nextime</p>
    2969. 

  2969.                     </div>
    2970. 

  2970.                     <div class="col l6">
    2971. 

  2971.                         <p class="translatable_ExportSnapContent"
    2972. 

  2972.                             style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">
    2973. 

  2973.                             Will export to a *png picture.<br>for your reference</p>
    2974. 

  2974.                     </div>
    2975. 

  2975.                 </div>
    2976. 

  2976.             </div>
    2977. 

  2977.         </div>
    2978. 

  2978.     </div>
    2979. 

  2979.     <div style="display: none;" id="content_blocks"></div>
    2980. 

  2980.     <!-- cloud storage modal -->
    2981. 

  2981.     <div id="cloud_storage_modal" class="modal modal_closes">
    2982. 

  2982.         <div class="modal-content">
    2983. 

  2983.             <span class="modal_close" style="padding: 15px;">
    2984. 

  2984.                 <i class="small material-icons" style="font-size: 1.5rem;">close</i>
    2985. 

  2985.             </span>
    2986. 

  2986.             <h4 class="translatable_cloudStorageTitle">Cloud Storage</h4>
    2987. 

  2987.             <!-- <div id="cloud_askLogin"></div> -->
    2988. 

  2988.             <div id="cloud_fileListArea" class="cloud-file">
    2989. 

  2989.             </div>
    2990. 

  2990.         </div>
    2991. 

  2991.         <div id="cloud_modal_preload" style="display:none">
    2992. 

  2992.             <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
    2993. 

  2993.                 <div class="preloader-wrapper big active" style="top:0;left:0">
    2994. 

  2994.                     <div class="spinner-layer spinner-blue-only">
    2995. 

  2995.                         <div class="circle-clipper left">
    2996. 

  2996.                             <div class="circle"></div>
    2997. 

  2997.                         </div>
    2998. 

  2998.                         <div class="gap-patch">
    2999. 

  2999.                             <div class="circle"></div>
    3000. 

  3000.                         </div>
    3001. 

  3001.                         <div class="circle-clipper right">
    3002. 

  3002.                             <div class="circle"></div>
    3003. 

  3003.                         </div>
    3004. 

  3004.                     </div>
    3005. 

  3005.                 </div>
    3006. 

  3006.             </div>
    3007. 

  3007.         </div>
    3008. 

  3008.     </div>
    3009. 

  3009. 

  3010.     <!-- share modal -->
    3011. 

  3011.     <div id="share" class="modal">
    3012. 

  3012.         <div class="modal-content">
    3013. 

  3013.             <h4 class="">程序分享</h4>
    3014. 

  3014.             <div style="text-align: center;">
    3015. 

  3015.                 <div id="QrImg" style="display: inline-block;"></div>
    3016. 

  3016.             </div>
    3017. 

  3017.             <p class="qrImgUrl"></p>
    3018. 

  3018.         </div>
    3019. 

  3019. 

  3020.     </div>
    3021. 

  3021. 

  3022.     <div class="downbox MouduleBox" style="display:none;position: fixed;width:175px;height:162px;right:50px;top:225px;">
    3023. 

  3023.         <div>
    3024. 

  3024.             <div class="translatable_iot_module">IoT Module</div>
    3025. 

  3025.         </div>
    3026. 

  3026.         <div>
    3027. 

  3027.             <div class="translatable_ai_module">A.I. Module</div>
    3028. 

  3028.         </div>
    3029. 

  3029.         <div><a href="//python-blockly.cocorobo.cn" style="color: #424242 !important;"
    3030. 

  3030.                 class="translatable_cloud_mode">Cloud
    3031. 

  3031.                 Mode</a></div>
    3032. 

  3032.         <div><a href="//ai-blockly.cocorobo.cn" style="color: #424242 !important;"
    3033. 

  3033.                 class="translatable_javascript_mode">JavaScript Mode</a></div>
    3034. 

  3034.     </div>
    3035. 

  3035.     <div id="ai_tt" class="downbox MouduleBox" style="display:none;position: fixed;width:230px;right:50px;top:225px;">
    3036. 

  3036.         <div>1.Hello World</div>
    3037. 

  3037.         <div>2.螢幕顯示 Hello World</div>
    3038. 

  3038.         <div>3.畫布應用</div>
    3039. 

  3039.         <div>4.迷你相機</div>
    3040. 

  3040.         <div>5.簡易物體識別</div>
    3041. 

  3041.     </div>
    3042. 

  3042.     <!-- <iframe id="web" name="web" src="//x.cocorobo.cn/web.html" style="display: none"></iframe> -->
    3043. 

  3043. </body>
    3044. 

  3044. <script>
    3045. 

  3045.     $("#modal_logout_btn").on("click", function () {
    3046. 

  3046.         $("#modal_logout_btn").removeClass('blue');
    3047. 

  3047.         $("#modal_logout_btn").css('background', 'gray')
    3048. 

  3048.         $(".svgImg").css('display', 'block')
    3049. 

  3049.         $(".translate-signout").css('opacity', '0.5')
    3050. 

  3050.         $.ajax(`${CCB.base_url}api/logout`, {
    3051. 

  3051.             type: "GET",
    3052. 

  3052.             xhrFields: {
    3053. 

  3053.                 withCredentials: true
    3054. 

  3054.             },
    3055. 

  3055.             success: () => {
    3056. 

  3056.                 // $('#login_iframe').attr('src', '//staging.cocorobo.cn/login/');
    3057. 

  3057.                 appendIframe("TM_login");
    3058. 

  3058.                 $('#TM_login').children().css("height", "820px");
    3059. 

  3059.                 appendIframe("before_login");
    3060. 

  3060.                 appendIframe("cloud_askLogin");
    3061. 

  3061.                 Materialize.toast(CCB.str_group.success_userLogout, 4000);
    3062. 

  3062.                 CCB.userState = false;
    3063. 

  3063.                 $("#cloud_fileListArea").html("");
    3064. 

  3064.                 loginModalStatus();
    3065. 

  3065.                 $("#modal_logout_btn").addClass('blue')
    3066. 

  3066.                 $(".svgImg").css('display', 'none');
    3067. 

  3067.                 $(".translate-signout").css('opacity', '1')
    3068. 

  3068.             }
    3069. 

  3069.         });
    3070. 

  3070.     });
    3071. 

  3071. </script>
    3072. 

  3072. <script type="text/javascript" src="./src/blockly/demo.js"></script>
    3073. 

  3073. <script type='text/javascript' src="./src/blockly/recorder.js"></script>
    3074. 

  3074. <script type='text/javascript' src="./src/blockly/jquery.s2t.js"></script>
    3075. 

  3075. 

  3076. </html>
    3077.