Home Explore Help
Sign In
chao
/
mini_cocopi
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
mini_cocopi
/
python
/
index2.html

index2.html 87 KB
Permalink History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381 
  1. <!DOCTYPE html>
    2. 

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

  3. 

  4. <head>
    5. 

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

  6.     <title>Python Blockly</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 rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png">
    11. 

  11.     <link rel="apple-touch-icon" sizes="60x60" href="img/apple-icon-60x60.png">
    12. 

  12.     <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png">
    13. 

  13.     <link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon-76x76.png">
    14. 

  14.     <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png">
    15. 

  15.     <link rel="apple-touch-icon" sizes="120x120" href="img/apple-icon-120x120.png">
    16. 

  16.     <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png">
    17. 

  17.     <link rel="apple-touch-icon" sizes="152x152" href="img/apple-icon-152x152.png">
    18. 

  18.     <link rel="apple-touch-icon" sizes="180x180" href="img/apple-icon-180x180.png">
    19. 

  19.     <link rel="icon" type="image/png" sizes="192x192" href="img/android-icon-192x192.png">
    20. 

  20.     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
    21. 

  21.     <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
    22. 

  22.     <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
    23. 

  23.     <link rel="manifest" href="img/manifest.json">
    24. 

  24.     <meta name="msapplication-TileColor" content="#ffffff">
    25. 

  25.     <meta name="msapplication-TileImage" content="img/ms-icon-144x144.png">
    26. 

  26.     <title class="translatable_title">CocoBlockly Pi | Design, Create, Inspire</title>
    27. 

  27.     <!-- Materialize, Prettify, Slick, and Ardublockly CSS -->
    28. 

  28.     <link rel="stylesheet" href="materialize/css/materialize.css" media="screen,projection">
    29. 

  29.     <link rel="stylesheet" href="prettify/arduino.css">
    30. 

  30.     <link rel="stylesheet" href="slick/slick.css">
    31. 

  31.     <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
    32. 

  32.     <link rel="stylesheet" href="ardublockly.css" media="screen,projection">
    33. 

  33.     <link rel="stylesheet" href="cocoblockly.css">
    34. 

  34.     <!-- JQuery, D3, Math.js, Bootstrap -->
    35. 

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

  36.     <script type="text/javascript" src="libs/jquery-3.3.1.min.js"></script>
    37. 

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

  38.     <script type="text/javascript" src="libs/jquery.hotkeys.js"></script>
    39. 

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

  40.     <script type="text/javascript" src="libs/materialize.min.js"></script>
    41. 

  41.     <script type="text/javascript" src="libs/d3.min.js"></script>
    42. 

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

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

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

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

  46.     <script type="text/javascript" src="libs/codemirror/codemirror.js"></script>
    47. 

  47.     <script type="text/javascript" src="libs/codemirror/python.js"></script>
    48. 

  48.     <script type="text/javascript" src="libs/codemirror/htmlmixed.js"></script>
    49. 

  49.     <script type="text/javascript" src="libs/codemirror/xml.js"></script>
    50. 

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

  51.     <script type="text/javascript" src="libs/stringify.js"></script>
    52. 

  52.     <!-- Summernote, a rich text editor -->
    53. 

  53.     <script type="text/javascript" src="libs/summernote/summernote.min.js"></script>
    54. 

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

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

  56.     <!-- Blockly -->
    57. 

  57.     <script type="text/javascript" src="blockly/blockly_uncompressed.js"></script>
    58. 

  58.     <script type="text/javascript" src="blockly/blocks_compressed.js"></script>
    59. 

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

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

  61.     <script type="text/javascript" src="blockly/javascript_compressed.js"></script>
    62. 

  62.     <script type="text/javascript" src="blockly/msg/js/en.js"></script>
    63. 

  63.     <!-- Skulpt -->
    64. 

  64.     <script type="text/javascript" src="skulpt/dist/skulpt.min.js"></script>
    65. 

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

  66.     <!-- Source Code -->
    67. 

  67.     <script type="text/javascript" src="src/utilities.js"></script>
    68. 

  68.     <script type="text/javascript" src="src/python_errors.js"></script>
    69. 

  69.     <script type="text/javascript" src="src/ast_node_visitor.js"></script>
    70. 

  70.     <script type="text/javascript" src="src/abstract_interpreter.js"></script>
    71. 

  71.     <script type="text/javascript" src="src/pytifa.js"></script>
    72. 

  72.     <script type="text/javascript" src="src/abstract_interpreter_definitions.js"></script>
    73. 

  73.     <script type="text/javascript" src="src/python_to_blockly.js"></script>
    74. 

  74.     <script type="text/javascript" src="src/imported.js"></script>
    75. 

  75.     <script type="text/javascript" src="src/blockly_blocks/class.js"></script>
    76. 

  76.     <script type="text/javascript" src="src/blockly_blocks/comment.js"></script>
    77. 

  77.     <script type="text/javascript" src="src/blockly_blocks/comprehensions.js"></script>
    78. 

  78.     <script type="text/javascript" src="src/blockly_blocks/dict.js"></script>
    79. 

  79.     <script type="text/javascript" src="src/blockly_blocks/if.js"></script>
    80. 

  80.     <script type="text/javascript" src="src/blockly_blocks/io.js"></script>
    81. 

  81.     <script type="text/javascript" src="src/blockly_blocks/lists.js"></script>
    82. 

  82.     <script type="text/javascript" src="src/blockly_blocks/sets.js"></script>
    83. 

  83.     <script type="text/javascript" src="src/blockly_blocks/loops.js"></script>
    84. 

  84.     <script type="text/javascript" src="src/blockly_blocks/parking.js"></script>
    85. 

  85.     <script type="text/javascript" src="src/blockly_blocks/tuple.js"></script>
    86. 

  86.     <script type="text/javascript" src="src/blockly_blocks/turtles.js"></script>
    87. 

  87.     <script type="text/javascript" src="src/blockly_blocks/text.js"></script>
    88. 

  88.     <script type="text/javascript" src="src/blockly_blocks/plots.js"></script>
    89. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  105.     <script>
    106. 

  106.         $(document).ready(function() {
    107. 

  107.         $('.dropdown-trigger').dropdown();
    108. 

  108.         setTimeout(() => $('.modal').modal(), 0);
    109. 

  109. 

  110.         blockpy = new BlockPy({
    111. 

  111.           blocklyPath: "blockly/",
    112. 

  112.           attachmentPoint: document.getElementById("blockpy-div"),
    113. 

  113.           instructor:
    114. 

  114.             !getQueryParams()["instructor"] ||
    115. 

  115.             getQueryParams()["instructor"] == "true",
    116. 

  116.           developer: true,
    117. 

  117.           editor: getQueryParams()["mode"] || "Split",
    118. 

  118.           urls: {
    119. 

  119. 

  120.           }
    121. 

  121.         });
    122. 

  122.         blockpy.setAssignment(
    123. 

  123.           // settings
    124. 

  124.           {
    125. 

  125.             editor: getQueryParams()["mode"] || "Split",
    126. 

  126.             read_only: getQueryParams()["upload"] == "true",
    127. 

  127.             disable_semantic_errors: false,
    128. 

  128.             disable_timeout: true
    129. 

  129.           },
    130. 

  130.           // assignment
    131. 

  131.           {
    132. 

  132.             introduction:
    133. 

  133.               "Use the canvas below to calculate the sum of a list of 4 numbers.",
    134. 

  134.             name: "#1.3",
    135. 

  135.             //'give_feedback': 'from instructor_functions import *\nsuppress("analyzer", "Incompatible types")\nmatch_signature("curve_grade", 1, "old")\nunit_test("curve_grade", (64, True), (0, 0), (100, 100))',
    136. 

  136.             //'give_feedback': 'from instructor_functions import *\n5+""\nsuppress("analyzer", "Incompatible types")\nmatch_signature("rate_animal", 1, "old")\nunit_test("rate_animal", (64, True))',
    137. 

  137.             //'give_feedback': "log(parse_program().find_all('FunctionDef')[0].args.args[0].arg)",
    138. 

  138.             give_feedback: "set_success()",
    139. 

  139.             //'give_feedback': 'from instructor_utility import *\nfrom instructor_printing import *\n\nsuppress("analyzer")\nsuppress("instructor")\nhide_correctness()\n\nast = parse_program()\n\nall_checked = True\nanswers = [("1*2*3", "6"), ("3*4","12"), ("0","0"), ("5*-5", "-25")]\nfor an_input, result in answers:\n    reset_output()\n    queue_input(an_input)\n    run_student()\n    if not get_output():\n        all_checked = False\n    elif result not in get_output():\n        if str(float(result)) in get_output():\n            give_partial(.1/len(answers), "Checking Float "+an_input)\n        all_checked = False\n    else:\n        give_partial(.2/len(answers), "Checking "+an_input)',
    140. 

  140.             //'give_feedback': "from instructor_utility import *\nensure_operation('in')",
    141. 

  141.             //'give_feedback': 'for x in range(2):\n    reset_output()\n    queue_input("Test", "")\n    e = run_student()\n    if e:\n        gently(str(e))\n    log(get_output())\nif not e:\n    set_success()',
    142. 

  142.             //'give_feedback': "from instructor_files import *\nfiles_not_handled_correctly('example.txt')",
    143. 

  143.             //'give_feedback': "from instructor_imports import *\nensure_imports('math', 'random')",
    144. 

  144.             //'give_feedback': "from instructor_plotting import * \nprevent_incorrect_plt() \nensure_correct_plot('plot') \nensure_show() \ncheck_for_plot('line', [[1,2,3],[4,5,6]])",
    145. 

  145.             //'give_feedback': 'ast = parse_program()\nassignments = ast.find_all("Assign")\nfor assignment in assignments:\n    if assignment.targets.id == "parking_allowed":\n        log(assignment.targets.data_type)',
    146. 

  146.             on_change: "",
    147. 

  147.             //'on_change': 'gently("Test")',
    148. 

  148.             parsons: false,
    149. 

  149.             starting_code: "",
    150. 

  150.             importable: true,
    151. 

  151.             initial_view: getQueryParams()["mode"] || "Split",
    152. 

  152.             upload: getQueryParams()["upload"] == "true",
    153. 

  153.             modules: {
    154. 

  154.               added: ['Turtles','Dictionaries',"Classes", "Tuples", "Data - Weather", "Request" , "Camera",'AIY Board','VisionKit','VoiceKit','System'],
    155. 

  155.               removed: []
    156. 

  156.             }
    157. 

  157.           },
    158. 

  158.           // programs
    159. 

  159.           {
    160. 

  160.             //'__main__': 'ss = ["Testing", "Here"]\nfor a in ss:\n    print(a)\nfor b in a:\n    print(b)',
    161. 

  161.             //'__main__': 'print("Hello world"[1:5])',
    162. 

  162.             __main__: ""
    163. 

  163.             //'__main__': 'num = input("")\nnum_list = [int(n) for n in num.split("*")]\nfor n in num_list:\n    n*n\n    return 4\nprint(n)',
    164. 

  164.             //'__main__': 'def rate_animal(an_animal):\n    if an_animal != "dog":\n        1 + ""\nrate_animal("dog")',
    165. 

  165.             //'__main__': 'round(float("9.5", ___))',
    166. 

  166.             //'__main__': getQueryParams()["code"] || "import matplotlib.pyplot as plt\nplt.plot([1, 2, 3],[4, 5, 6])\nplt.show()",
    167. 

  167.             //'__main__': 'i=0\nwhile i!="0":\n    i=input("")\n    print(i)',
    168. 

  168.             //'__main__': "import requests\nprint(requests.get('https://pastebin.com/raw/V7tWn1Rj').text)"
    169. 

  169.             //'__main__': "print(open('example.txt').read())"
    170. 

  170.             //'__main__': "import math\nmath\nfrom random import choice\nchoice"
    171. 

  171.             //'__main__': "from random import randint\nprint(5+randint(1,10))"
    172. 

  172.             //'__main__': 'print(input("Prompt:"))',
    173. 

  173.             //'__main__': 'import parking\nparking_allowed = parking.now()\nif parking.now() > parking.Time(8,30,"AM") and parking.now() < parking.Time(5,30,"PM"):\n    parking_allowed = False\nelse:\n    parking_allowed = True \nprint(parking_allowed)'
    174. 

  174.             //'__main__': 'print("Banana"[:int(len("Banana")/2)])',
    175. 

  175.             //'__main__': 'def curve_grade(old):\n    return (old ** .5) * 10\n\nprint(90, "becomes", curve_grade(90))\nprint(50, "becomes", curve_grade(50))\nprint(20, "becomes", curve_grade(20))'
    176. 

  176.             //'__main__': 'print(1 != 2 and 2 != 1)'
    177. 

  177.           }
    178. 

  178.         );
    179. 

  179. 

  180.         function inIframe() {
    181. 

  181.           try {
    182. 

  182.             return window.self !== window.top;
    183. 

  183.           } catch (e) {
    184. 

  184.             return true;
    185. 

  185.           }
    186. 

  186.         }
    187. 

  187.         if (inIframe()) {
    188. 

  188.           $("#blockpy-container").width("100%");
    189. 

  189.           $("#blockpy-div").css("padding", 0);
    190. 

  190.         }
    191. 

  191.       });
    192. 

  192.     </script>
    193. 

  193. </head>
    194. 

  194. 

  195. <body>
    196. 

  196.     <div class="se-pre-con">
    197. 

  197.         <h4 style="position: fixed;left: 45%;top: 60%;" class="translatable_pageLoading">Loading....</h4>
    198. 

  198.     </div>
    199. 

  199.     <!-- Horizontal Navigation bar -->
    200. 

  200.     <nav id="nav_" class="nav-fixed arduino_teal">
    201. 

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

  202.         <div class="nav-wrapper navcontainer" style="position:static;">
    203. 

  203.             <a id="logo-container" class="brand-logo">
    204. 

  204.                 <span style="font-size:28px;font-family:'GT Walsheim Pro Trial Bold';" class="app_title translatable_title">CocoBlockly Pi</span>
    205. 

  205.                 <!-- Sketch name editable text field -->
    206. 

  206.                 <span class="sketch_name_wrapper" style="position:relative">
    207. 

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

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

  209.                     </a> -->
    210. 

  210.                     <i id="workspace_screenshot" class="material-icons sketch_name_icon right" style="margin-left:5px;cursor: pointer;">photo_camera</i>
    211. 

  211.                     <i id="button_delete" class="material-icons sketch_name_icon right" style="margin-left:5px;cursor: pointer;">delete</i>
    212. 

  212.                     <!-- <i class="material-icons sketch_name_icon right">create</i> -->
    213. 

  213.                     <input id="sketch_name" class="sketch_name" type="text">
    214. 

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

  215.                 </span>
    216. 

  216.             </a>
    217. 

  217.             <!-- Horizontal Navbar links only shown on large resolutions -->
    218. 

  218.             <ul id="nav-mobile" class="right hide-on-med-and-down">
    219. 

  219.                 <!-- AI Demo -->
    220. 

  220.                 <!-- <li>
    221. 

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

  222.                         <span class="translatable_AI_experience">AI</span>
    223. 

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

  224.                     </a>
    225. 

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

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

  227.                             <span class="translatable_AI_emotion">Emotion Recognotion</span>
    228. 

  228.                         </li>
    229. 

  229.                         <li class="divider"></li>
    230. 

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

  231.                             <span class="translatable_AI_speech">Speech Recognotion</span>
    232. 

  232.                         </li>
    233. 

  233.                     </ul>
    234. 

  234.                 </li> -->
    235. 

  235.                 <!-- help button -->
    236. 

  236.                 <li>
    237. 

  237.                     <a id="help" class='dropdown-button lang_resize' data-activates="help_board" style="position:relative">
    238. 

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

  239.                         <span class="translatable_help_board">Help</span>
    240. 

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

  241.                     </a>
    242. 

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

  243.                         <li id="">
    244. 

  244.                             <a href="http://help.cocorobo.cn/" target="_blank">
    245. 

  245.                                 <span class="translatable_tutorial">Tutorial</span>
    246. 

  246.                             </a>
    247. 

  247.                         </li>
    248. 

  248.                         <!-- <li class="divider"></li>
    249. 

  249.                         <li>
    250. 

  250.                             <a href="#tourmode" class="modal-trigger">
    251. 

  251.                                 <span class="translatable_tour">Start Tour</span>
    252. 

  252.                             </a>
    253. 

  253.                         </li> -->
    254. 

  254.                         <li class="divider"></li>
    255. 

  255.                         <li>
    256. 

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

  257.                                 <span class="translatable_changelog">Change Log</span>
    258. 

  258.                             </a>
    259. 

  259.                         </li>
    260. 

  260.                     </ul>
    261. 

  261.                 </li>
    262. 

  262.                 <li>
    263. 

  263.                     <a id="local_storage" class='dropdown-button lang_resize' data-activates='local_saveOrOpen' style="position:relative">
    264. 

  264.                         <span class="translatable_storage">Storage</span>
    265. 

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

  266.                     </a>
    267. 

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

  268.                         <li id="button_load" class='modal-trigger' href="#Storage_import_modal">
    269. 

  269.                             <span class="translatable_localimport">Import</span>
    270. 

  270.                         </li>
    271. 

  271.                         <li class="divider"></li>
    272. 

  272.                         <li id="button_save" class='modal-trigger' href="#Storage_export_modal">
    273. 

  273.                             <span class="translatable_localexport">Export</span>
    274. 

  274.                         </li>
    275. 

  275.                     </ul>
    276. 

  276.                 </li>
    277. 

  277.                 <li>
    278. 

  278.                     <a id="nav_language" class='dropdown-button lang_resize' data-activates='languages' style="position:relative">
    279. 

  279.                         <span class="translatable_language">Language</span>
    280. 

  280.                         <img class="left nav-icon" src="./icons/language.png">
    281. 

  281.                     </a>
    282. 

  282.                     <ul id='languages' class='dropdown-content'>
    283. 

  283.                         <li onclick="changeLanguage('en')">
    284. 

  284.                             <a>English</a>
    285. 

  285.                         </li>
    286. 

  286.                         <li class="divider"></li>
    287. 

  287.                         <li onclick="changeLanguage('zh-hant')">
    288. 

  288.                             <a>繁体中文</a>
    289. 

  289.                         </li>
    290. 

  290.                         <li class="divider"></li>
    291. 

  291.                         <li onclick="changeLanguage('zh-hans')">
    292. 

  292.                             <a>简体中文</a>
    293. 

  293.                         </li>
    294. 

  294.                     </ul>
    295. 

  295.                 </li>
    296. 

  296.                 <li>
    297. 

  297.                     <span class="vertical-separator"></span>
    298. 

  298.                 </li>
    299. 

  299.                 <li>
    300. 

  300.                     <a id="back_home" class="lang_resize" target="_blank" href="//cocorobo.cn/online/" style="position:relative">
    301. 

  301.                         <img class="nav-icon2" src="./icons/home_icon.png">
    302. 

  302.                     </a>
    303. 

  303.                 </li>
    304. 

  304.             </ul>
    305. 

  305.         </div>
    306. 

  306.     </nav>
    307. 

  307.     <!-- Sidebar navigation -->
    308. 

  308.     <ul id="slide-out" class="side-nav">
    309. 

  309.         <li class="logo"><img style="padding-bottom:100px;" src="img/header.png" width="105%" alt="Ardublockly block image">
    310. 

  310.         </li>
    311. 

  311.         <li class="no-padding">
    312. 

  312.             <ul>
    313. 

  313.                 <li id="menu_home">
    314. 

  314.                     <a href="//cocorobo.cn/online/">
    315. 

  315.                         <span class="translatable_home">Home</span>
    316. 

  316.                         <i class="material-icons left">home</i>
    317. 

  317.                     </a>
    318. 

  318.                 </li>
    319. 

  319.                 <li id="menu_load">
    320. 

  320.                     <a>
    321. 

  321.                         <span class="translatable_open">Open</span>
    322. 

  322.                         <i class="material-icons left">file_upload</i>
    323. 

  323.                     </a>
    324. 

  324.                 </li>
    325. 

  325.                 <li id="menu_save">
    326. 

  326.                     <a>
    327. 

  327.                         <span class="translatable_save">Save</span>
    328. 

  328.                         <i class="material-icons left">file_download</i>
    329. 

  329.                     </a>
    330. 

  330.                 </li>
    331. 

  331.                 <li id="menu_delete">
    332. 

  332.                     <a>
    333. 

  333.                         <span class="translatable_deleteAll">Delete All</span>
    334. 

  334.                         <i class="material-icons left">delete</i>
    335. 

  335.                     </a>
    336. 

  336.                 </li>
    337. 

  337.                 <li id="">
    338. 

  338.                     <a href="//help.cocorobo.cn/#/" target="_blank">
    339. 

  339.                         <span class="translatable_help">Help</span>
    340. 

  340.                         <i id="menu_settings" class="material-icons left">help</i>
    341. 

  341.                     </a>
    342. 

  342.                 </li>
    343. 

  343.                 <li id="menu_bug">
    344. 

  344.                     <a href="mailto:tommy@cocorobo.cc?cc=it@cocorobo.cc&subject=CocoBlockly Pi Bug Report">
    345. 

  345.                         <span class="translatable_reportBug modal-trigger">Report Bug</span>
    346. 

  346.                         <i class="material-icons left">bug_report</i>
    347. 

  347.                     </a>
    348. 

  348.                 </li>
    349. 

  349.                 <li>
    350. 

  350.                     <a href="#tourmode" class="modal-trigger">
    351. 

  351.                         <span class="translatable_tour">Start Tour</span>
    352. 

  352.                         <i class="material-icons left">help</i>
    353. 

  353.                     </a>
    354. 

  354.                 </li>
    355. 

  355.                 <li>
    356. 

  356.                     <a href="//help.cocorobo.cn/#/changelog" target="_blank">
    357. 

  357.                         <span class="translatable_changelog">Change Log</span>
    358. 

  358.                         <i class="material-icons left">assignment</i>
    359. 

  359.                     </a>
    360. 

  360.                 </li>
    361. 

  361.             </ul>
    362. 

  362.         </li>
    363. 

  363.         <li class="no-padding side-menu-end">&nbsp;</li>
    364. 

  364.     </ul>
    365. 

  365.     <!-- sidebar icon : Arduino main / Serial monitor -->
    366. 

  366.     <ul id="icon-tool" class="card-icon-area">
    367. 

  367.         <li class="card-icon active" onclick="changeSideCard('code')">
    368. 

  368.             <i class="material-icons media">build</i>
    369. 

  369.         </li>
    370. 

  370.         <li class="card-icon" onclick="changeSideCard('monitor')">
    371. 

  371.             <i class="material-icons ">search</i>
    372. 

  372.         </li>
    373. 

  373.         <li class="card-icon" onclick="changeSideCard('fullmode')">
    374. 

  374.             <i class="material-icons ">crop_free</i>
    375. 

  375.         </li>
    376. 

  376.         <li id="lang-tool" class="card-icon">
    377. 

  377.             <i class="material-icons">translate</i>
    378. 

  378.         </li>
    379. 

  379.         <li id="bar_help" class="card-icon">
    380. 

  380.             <a href="http://help.cocorobo.cn/" target="_blank">
    381. 

  381.                 <img class="bar-icon" src="./icons/help_icon-blockly-widget.png">
    382. 

  382.             </a>
    383. 

  383.         </li>
    384. 

  384.     </ul>
    385. 

  385.     <a id='side-lang-trigger' class='dropdown-button' data-activates='side-lang'></a>
    386. 

  386.     <ul id="side-lang" class='dropdown-content'>
    387. 

  387.         <li onclick="changeLanguage('en')">
    388. 

  388.             <a>English</a>
    389. 

  389.         </li>
    390. 

  390.         <li class="divider"></li>
    391. 

  391.         <li onclick="changeLanguage('zh-hant')">
    392. 

  392.             <a>繁体中文</a>
    393. 

  393.         </li>
    394. 

  394.         <li class="divider"></li>
    395. 

  395.         <li onclick="changeLanguage('zh-hans')">
    396. 

  396.             <a>简体中文</a>
    397. 

  397.         </li>
    398. 

  398.     </ul>
    399. 

  399.     <div id="main_shadow" class="shadowbox" style="display:none;">
    400. 

  400.         <div id="shadow_content" class="shadow_container">
    401. 

  401.             <div class="shadow_top">
    402. 

  402.                 <img src="./icons/drag_import.png" style="width:200px">
    403. 

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

  404.             </div>
    405. 

  405.         </div>
    406. 

  406.     </div>
    407. 

  407.     <!-- Content -->
    408. 

  408.     <div id="main_content" class="container">
    409. 

  409.         <div class="row">
    410. 

  410.             <div id="blocks_content" class="col s12 m12 l8" style="position:relative">
    411. 

  411.                 <!-- Blockly Panel -->
    412. 

  412.                 <!-- <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>-->
    413. 

  413.                 <div class="card-panel white" style="padding: 0">
    414. 

  414.                     <div id="blocks_panel" class="content blocks_panel_large">
    415. 

  415.                         <div id="content_blocks" class="content z-depth-1"></div>
    416. 

  416.                     </div>
    417. 

  417.                 </div>
    418. 

  418.             </div>
    419. 

  419.             <div class="col s12 m12 l4" style="position:relative;">
    420. 

  420.                 <!-- Ardunio code area / uploader -->
    421. 

  421.                 <div id="Ardunio-main" style="height:100%;opacity:1;">
    422. 

  422.                     <div id="codeArea" class="card">
    423. 

  423.                         <div class="code-header">
    424. 

  424.                             <span class="card-title translatable_arduinoSourceCode">Arduino Source Code</span>
    425. 

  425.                             <span class="collapsible_logo">&#60; &#62;</span>
    426. 

  426.                         </div>
    427. 

  427.                         <div class="card-content" style="position:relative;padding:0;">
    428. 

  428.                             <a id="code-copy" style="position:absolute;right:18px;top:8px;" data-clipboard-action="copy" data-clipboard-target="#content_arduino">
    429. 

  429.                                 <i class="material-icons right" style="color:#2c4fcd;cursor:pointer;">content_copy</i>
    430. 

  430.                             </a>
    431. 

  431.                             <a id="code-download" style="position:absolute;right:45px;top:8px;">
    432. 

  432.                                 <i class="material-icons right" style="color:#2c4fcd;cursor:pointer;">arrow_downward</i>
    433. 

  433.                             </a>
    434. 

  434.                             <pre id="content_arduino" class="content content_height_transition content_arduino_small">
    435. 

  435.                             </pre>
    436. 

  436.                         </div>
    437. 

  437.                     </div>
    438. 

  438.                     <div id="uploader" class="card" style="margin-bottom:0;">
    439. 

  439.                         <div class="code-header" style="position: relative;">
    440. 

  440.                             <span class="collapsible_logo"><i class="material-icons small" style="transform:translateY(25%);">swap_vert</i></span>
    441. 

  441.                             <span class="card-title translatable_blocksXml">Upload Area</span>
    442. 

  442.                             <div id="discnt_icon" style="display:inline-block;">
    443. 

  443.                                 <a href="#env_detect" class="modal-trigger"><img style="height:17px;margin-left:8px;transform:translateY(2px);" src="./icons/uploader_disconnect.png"></a>
    444. 

  444.                             </div>
    445. 

  445.                             <div id="cnt_icon" style="display:none;"><img style="height:17px;margin-left:8px;transform:translateY(2px);" src="./icons/uploader_connect.png"></div>
    446. 

  446.                             <a class="header-link upload_instruction" href="http://help.cocorobo.cn/#/getting-started/info" target="_blank"><img src="./icons/instruction.png"></a>
    447. 

  447.                             <a id="plugin_download" download class="header-link" target="_blank">
    448. 

  448.                                 <img src="./icons/plugin_download.png">
    449. 

  449.                                 <img style="position:absolute;height:10px;right:45px;bottom:32px; display:none" src="./icons/icon_new.png">
    450. 

  450.                             </a>
    451. 

  451.                         </div>
    452. 

  452.                         <div class="card-content" style="padding:8px 10px;">
    453. 

  453.                             <div class="row">
    454. 

  454.                                 <div class="col s12">
    455. 

  455.                                     <img id="error-btn" class="activator" src="./icons/error.png">
    456. 

  456.                                     <span id="status_bar" class="translatable_statusbar">Directly upload your code to the electronic modules.</span>
    457. 

  457.                                 </div>
    458. 

  458.                             </div>
    459. 

  459.                             <div class="row">
    460. 

  460.                                 <div class="col s12">
    461. 

  461.                                     <div class="progress" style="margin:7px 0;">
    462. 

  462.                                         <div class="determinate blue" style="width:0%;"></div>
    463. 

  463.                                     </div>
    464. 

  464.                                 </div>
    465. 

  465.                             </div>
    466. 

  466.                             <div class="row">
    467. 

  467.                                 <div class="col s6" style="padding-right:1px;">
    468. 

  468.                                     <select id="ports">
    469. 

  469.                                         <option value=null disabled>No ports detected</option>
    470. 

  470.                                     </select>
    471. 

  471.                                 </div>
    472. 

  472.                                 <div class="col s6 mctooltip" style="padding-left:1px;">
    473. 

  473.                                     <div class="switch" style="margin:12px 0 0 0;">
    474. 

  474.                                         <label>
    475. 

  475.                                             <span id="main_mode_label" class="translatable_main_mode" style="font-size:14px;color:#000">Main mode</span>
    476. 

  476.                                             <input id="network-btn" type="checkbox" onclick="PageModeSwitch()">
    477. 

  477.                                             <span class="lever" style="margin:0 1px;"></span>
    478. 

  478.                                             <span id="wifi_mode_label" class="translatable_wifi_mode" style="font-size:14px;">WiFi mode</span>
    479. 

  479.                                         </label>
    480. 

  480.                                     </div>
    481. 

  481.                                 </div>
    482. 

  482.                             </div>
    483. 

  483.                             <div class="row">
    484. 

  484.                                 <div id="uploader-btns" class="col s12">
    485. 

  485.                                     <a id="compile-btn" class="waves-effect waves-light btn blue" style="margin-right:0.5rem;"><span class="translatable_compile">COMPILE</span></a>
    486. 

  486.                                     <a id="upload-btn" class="waves-effect waves-light btn blue disabled" style="margin-right:0.5rem;"><span class="translatable_upload">UPLOAD</span></a>
    487. 

  487.                                     <a id="uploader-relaunch-btn" class="waves-effect waves-light btn blue disabled" style="float:right;">
    488. 

  488.                                         <i class="material-icons">refresh</i>
    489. 

  489.                                     </a>
    490. 

  490.                                 </div>
    491. 

  491.                             </div>
    492. 

  492.                         </div>
    493. 

  493.                         <div class="card-reveal grey darken-3 white-text" style="padding:8px 13px;">
    494. 

  494.                             <div class="card-title" style="height:18%;margin-bottom:2px;">
    495. 

  495.                                 <span class="translatable_errmsg" style="font-weight:normal;">Error Message</span>
    496. 

  496.                                 <a id="err-copy" style="display:inline-block;margin-left:26px;" data-clipboard-action="copy" data-clipboard-target="#err-msg">
    497. 

  497.                                     <i class="material-icons right" style="color:#fff;font-size:18px;cursor:pointer;">content_copy</i>
    498. 

  498.                                 </a>
    499. 

  499.                                 <i class="material-icons right" style="cursor:pointer;">close</i>
    500. 

  500.                             </div>
    501. 

  501.                             <div style="width:100%;height:78%;">
    502. 

  502.                                 <textarea readonly id="err-msg" style="overflow:visible;font-family:consolas;font-size:14px;height:100%;resize:none;border:none;"></textarea>
    503. 

  503.                             </div>
    504. 

  504.                         </div>
    505. 

  505.                     </div>
    506. 

  506.                     <div class="card plugin_options options_hide">
    507. 

  507.                         <div class="card-content">
    508. 

  508.                             <div>
    509. 

  509.                                 <a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_macOS.dmg" target="_black"><img src="./icons/mac-icon.png">Mac</a>
    510. 

  510.                                 <a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_Windows.exe" target="_black"><img src="./icons/windows-icon.png">Windows</a>
    511. 

  511.                             </div>
    512. 

  512.                         </div>
    513. 

  513.                     </div>
    514. 

  514.                 </div>
    515. 

  515.                 <!-- Serial Monitor   -->
    516. 

  516.                 <div id="Serial-monitor" class="card card-serialMonitor" style="display:none;height:0;opacity:0;">
    517. 

  517.                     <div class="code-header">
    518. 

  518.                         <span class="code-header-logo"><i class="material-icons" style="padding-top:10px">search</i></span>
    519. 

  519.                         <span class="card-title translatable_serialMonitor">Serial Monitor</span>
    520. 

  520.                     </div>
    521. 

  521.                     <div class="card-content" style="padding:8px 10px;">
    522. 

  522.                         <div class="row">
    523. 

  523.                             <div class="input-field col s6" style="margin-top:2px;">
    524. 

  524.                                 <p id="ports-monitor" style="font-size:16px"><span class="translatable_port">Port:</span><span style="padding-left:10px;"></span></p>
    525. 

  525.                             </div>
    526. 

  526.                             <div class="col s6" style="margin-top:2px;">
    527. 

  527.                                 <a id="comms-cnt" class="waves-effect waves-light blue lighten-2 btn translatable_connectBtn disabled" style="float:right;margin-right:5px">connect</a>
    528. 

  528.                                 <a id="comms-discnt" class="waves-effect waves-light blue lighten-2 btn translatable_disconnectBtn " style="float:right;margin-right:5px;display:none">disconnect</a>
    529. 

  529.                             </div>
    530. 

  530.                         </div>
    531. 

  531.                         <div class="row">
    532. 

  532.                             <div class="input-field col s5">
    533. 

  533.                                 <select id="serial_output_style" style="font-size:16px">
    534. 

  534.                                     <option value="" selected class="translatable_no_line_ending">No line ending</option>
    535. 

  535.                                     <option value="nl" class="translatable_newline">Newline</option>
    536. 

  536.                                     <option value="cr" class="translatable_CR">Carriage return</option>
    537. 

  537.                                     <option value="blc" class="translatable_NL_CR">Both NL &amp; CR</option>
    538. 

  538.                                 </select>
    539. 

  539.                             </div>
    540. 

  540.                             <div class="input-field col s5">
    541. 

  541.                                 <select id="serial_baud" style="font-size:16px">
    542. 

  542.                                     <option value="300">300 <span class="translatable_baud">baud</span></option>
    543. 

  543.                                     <option value="1200">1200 <span class="translatable_baud">baud</span></option>
    544. 

  544.                                     <option value="2400">2400 <span class="translatable_baud">baud</span></option>
    545. 

  545.                                     <option value="4800">4800 <span class="translatable_baud">baud</span></option>
    546. 

  546.                                     <option value="9600" selected>9600 <span class="translatable_baud">baud</span></option>
    547. 

  547.                                     <option value="19200">19200 <span class="translatable_baud">baud</span></option>
    548. 

  548.                                     <option value="38400">38400 <span class="translatable_baud">baud</span></option>
    549. 

  549.                                     <option value="57600">57600 <span class="translatable_baud">baud</span></option>
    550. 

  550.                                     <option value="115200">115200 <span class="translatable_baud">baud</span></option>
    551. 

  551.                                 </select>
    552. 

  552.                             </div>
    553. 

  553.                         </div>
    554. 

  554.                         <div class="row">
    555. 

  555.                             <div class="input-field col s10">
    556. 

  556.                                 <input id="comms-msg" type="text" style="margin:0">
    557. 

  557.                                 <label for="Sending_Messages" class="translatable_sendMsg" style="font-size:16px">Sending Messages</label>
    558. 

  558.                             </div>
    559. 

  559.                             <div class="input-field col s2">
    560. 

  560.                                 <a id="comms-send" class="waves-effect waves-light blue lighten-2 btn translatable_sendBtn disabled" style="float:right;padding-right:5px">SEND</a>
    561. 

  561.                             </div>
    562. 

  562.                         </div>
    563. 

  563.                         <div class="row">
    564. 

  564.                             <div class="col s12">
    565. 

  565.                                 <textarea id="commsBox" label="readonly" readonly></textarea>
    566. 

  566.                             </div>
    567. 

  567.                         </div>
    568. 

  568.                         <div class="row" style="margin-bottom:8px">
    569. 

  569.                             <div class="col s4" style="margin-top:8px">
    570. 

  570.                                 <input id="autoscroll" type="checkbox" class="filled-in" checked="checked">
    571. 

  571.                                 <label for="autoscroll">
    572. 

  572.                                     <span class="translatable_autoScroll">Autoscroll</span>
    573. 

  573.                                 </label>
    574. 

  574.                             </div>
    575. 

  575.                             <div class="input-field col s8" style="margin:4px,0,8px,0">
    576. 

  576.                                 <a id="comms-clear" class="waves-effect waves-light blue lighten-2 btn translatable_comms_clear" style="float:right;margin-right:5px">CLEAR</a>
    577. 

  577.                                 <a id="comms-export" class="waves-effect waves-light blue lighten-2 btn translatable_comms_export modal-trigger" href="#export-file" style="float:right;margin-right:5px">EXPORT</a>
    578. 

  578.                             </div>
    579. 

  579.                         </div>
    580. 

  580.                     </div>
    581. 

  581.                 </div>
    582. 

  582.             </div>
    583. 

  583.         </div>
    584. 

  584.     </div>
    585. 

  585.     <footer id="footer_" class="page-footer arduino_teal">
    586. 

  586.         <div class="footer-copyright">
    587. 

  587.             <div class="navcontainer" style="z-index:auto;">
    588. 

  588.                 <span class="translatable_copyright" style="color:#fff;">CocoRobo LTD © 2019 Copyright</span>
    589. 

  589.                 <span style="color:#fff;" class="right">CocoBlockly Pi v3</span>
    590. 

  590.             </div>
    591. 

  591.         </div>
    592. 

  592.     </footer>
    593. 

  593.     <!-- General Alert: Content is loaded using JavaScript to display alerts -->
    594. 

  594.     <div id="gen_alert" class="modale modal_small">
    595. 

  595.         <div class="modal-content">
    596. 

  596.             <h5 id="gen_alert_title">Empty Alert</h5>
    597. 

  597.             <p><span id="gen_alert_body">Empty alert text</span></p>
    598. 

  598.         </div>
    599. 

  599.         <div class="modal-footer">
    600. 

  600.             <a id="gen_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay" style="color:#fff">Okay</span></a>
    601. 

  601.             <a id="gen_alert_cancel_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_cancel" style="color:#fff">Cancel</span></a>
    602. 

  602.         </div>
    603. 

  603.     </div>
    604. 

  604.     <!-- General Warning: Content is loaded using JavaScript to display alerts -->
    605. 

  605.     <div id="gen_warn" class="modale modal_small">
    606. 

  606.         <div class="modal-content">
    607. 

  607.             <img id="gen_warn_image" src="">
    608. 

  608.             <h5 id="gen_warn_title">Empty Alert</h5>
    609. 

  609.             <p id="gen_warn_body"><span>Empty alert text</span></p>
    610. 

  610.             <div id="gen_warn_others"></div>
    611. 

  611.         </div>
    612. 

  612.         <div class="modal-footer">
    613. 

  613.             <a id="gen_warn_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay" style="color:#fff">Okay</span></a>
    614. 

  614.             <a id="gen_warn_cancel_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_cancel" style="color:#fff">Cancel</span></a>
    615. 

  615.         </div>
    616. 

  616.     </div>
    617. 

  617.     <!-- Custom Alert: Content is loaded using JavaScript to display alerts -->
    618. 

  618.     <div id="cus_alert" class="modale modal_small modal_custom">
    619. 

  619.         <div class="modal-content">
    620. 

  620.             <h5 id="cus_alert_title">Empty Alert</h5>
    621. 

  621.             <p><span id="cus_alert_body">Empty alert text</span></p>
    622. 

  622.         </div>
    623. 

  623.         <div class="modal-footer">
    624. 

  624.             <a id="cus_alert_button" class="waves-effect btn-flat modal-close blue"><span id="cus_alert_button_content" style="color:#fff"></span></a>
    625. 

  625.             <a id="cus_alert_ok_link" class="waves-effect btn-flat modal-close blue"><span class="translatable_okay" style="color:#fff">Okay</span></a>
    626. 

  626.         </div>
    627. 

  627.     </div>
    628. 

  628.     <!-- Env Detect Modal -->
    629. 

  629.     <div id="env_detect" class="modal">
    630. 

  630.         <div class="modal-content">
    631. 

  631.             <h4 class="translatable_env_detect" style="margin-bottom:2.5rem;">Environment Detect</h4>
    632. 

  632.             <div id="detect_before" style="position:relative;">
    633. 

  633.                 <div>
    634. 

  634.                     <img src="./icons/device-detect.svg" />
    635. 

  635.                 </div>
    636. 

  636.                 <div id="detect_preload" style="display:none;">
    637. 

  637.                     <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
    638. 

  638.                         <div class="preloader-wrapper big active">
    639. 

  639.                             <div class="spinner-layer spinner-blue-only">
    640. 

  640.                                 <div class="circle-clipper left">
    641. 

  641.                                     <div class="circle"></div>
    642. 

  642.                                 </div>
    643. 

  643.                                 <div class="gap-patch">
    644. 

  644.                                     <div class="circle"></div>
    645. 

  645.                                 </div>
    646. 

  646.                                 <div class="circle-clipper right">
    647. 

  647.                                     <div class="circle"></div>
    648. 

  648.                                 </div>
    649. 

  649.                             </div>
    650. 

  650.                         </div>
    651. 

  651.                     </div>
    652. 

  652.                 </div>
    653. 

  653.             </div>
    654. 

  654.             <div id="detect_result" style="display:none;">
    655. 

  655.                 <div style="border-bottom:2.5px #0057ff6e solid;padding:0.25rem 0;">
    656. 

  656.                     <h5 class="translatable_title_device">Device</h5>
    657. 

  657.                     <h5 class="translatable_title_result">Result</h5>
    658. 

  658.                     <h5 class="translatable_title_support">Support</h5>
    659. 

  659.                     <h5 class="translatable_title_suggest">Suggest</h5>
    660. 

  660.                 </div>
    661. 

  661.                 <div id="env_detect_os" style="margin-top:0.5rem;">
    662. 

  662.                     <div class="translatable_os">System</div>
    663. 

  663.                     <div></div>
    664. 

  664.                     <div class="detect-icons"></div>
    665. 

  665.                     <div></div>
    666. 

  666.                 </div>
    667. 

  667.                 <div id="env_detect_browser">
    668. 

  668.                     <div class="translatable_browser">Browser</div>
    669. 

  669.                     <div></div>
    670. 

  670.                     <div class="detect-icons"></div>
    671. 

  671.                     <div></div>
    672. 

  672.                 </div>
    673. 

  673.                 <div id="env_detect_plugin" style="margin-bottom:0.5rem;">
    674. 

  674.                     <div>Uploader</div>
    675. 

  675.                     <div></div>
    676. 

  676.                     <div class="detect-icons"></div>
    677. 

  677.                     <div></div>
    678. 

  678.                 </div>
    679. 

  679.             </div>
    680. 

  680.         </div>
    681. 

  681.         <div class="modal-footer">
    682. 

  682.             <a id="detect-btn" class="waves-effect waves-light btn-large blue">
    683. 

  683.                 <span class="translatable_detect">Detect</span>
    684. 

  684.             </a>
    685. 

  685.         </div>
    686. 

  686.     </div>
    687. 

  687.     <!-- app center modal -->
    688. 

  688.     <div id="app_center_modal" class="modal">
    689. 

  689.         <div class="modal-content" style="padding: 20px;">
    690. 

  690.             <h4 class="translatable_labs_center_modal_title">CocoBlockly Pi Labs</h4>
    691. 

  691.             <hr style="border-top: 1px solid #ddd;margin:20px 0 10px 0;" />
    692. 

  692.             <div class="row" style="text-align:left;">
    693. 

  693.                 <div style="float:center;" class="col s3">
    694. 

  694.                     <p class="translatable_app_center_all_categories" style="padding-bottom:0px;font-weight: bold">All Categories:</p>
    695. 

  695.                     <div id="center_categories" class="collection ">
    696. 

  696.                         <a name="center_ai" class="collection-item grey-text text-darken-4 active translatable_app_center_ai" onclick="ACCategorySelect(1)">Artificial Intelligence</a>
    697. 

  697.                         <a name="center_iot" class="collection-item grey-text text-darken-4 translatable_app_center_iot" onclick="ACCategorySelect(2)">Internet of Things</a>
    698. 

  698.                         <a name="center_robot" class="collection-item grey-text text-darken-4 translatable_app_center_robot" onclick="ACCategorySelect(3)">Robot Controller</a>
    699. 

  699.                         <a name="center_science" class="collection-item grey-text text-darken-4 translatable_app_center_science" onclick="ACCategorySelect(4)">Science Experiements</a>
    700. 

  700.                         <a name="center_game" class="collection-item grey-text text-darken-4 translatable_app_center_games" onclick="ACCategorySelect(5)">Games</a>
    701. 

  701.                         <a name="center_arvr" class="collection-item grey-text text-darken-4 translatable_app_center_arvr" onclick="ACCategorySelect(6)">AR/VR</a>
    702. 

  702.                     </div>
    703. 

  703.                 </div>
    704. 

  704.                 <div style="float:center;padding-top:5px; overflow-y:auto;max-height:400px" class="col s9">
    705. 

  705.                     <div id="center_ai" class=" col s12">
    706. 

  706.                         <h5 class="translatable_app_center_ai">Artificial Intelligence</h5>
    707. 

  707.                         <ul class="tabs">
    708. 

  708.                             <li class="tab col s2"><a href="#center_ai_vision" class="translatable_app_center_tab_vision active">Vision</a></li>
    709. 

  709.                             <li class="tab col s2"><a href="#center_ai_speech" class="translatable_app_center_tab_speech">Speech</a></li>
    710. 

  710.                             <li class="tab col s2"><a href="#center_ai_text" class="translatable_app_center_tab_text">Text</a></li>
    711. 

  711.                         </ul>
    712. 

  712.                         <div id="center_ai_vision" class="col s12">
    713. 

  713.                             <div style="float:center;" class="col s6">
    714. 

  714.                                 <div class="card">
    715. 

  715.                                     <div class="card-image waves-effect waves-block waves-light">
    716. 

  716.                                         <img class="" src="icons/AppCenter_ai_teachableMachine.jpg" style="border: solid 1.2px lightgray;">
    717. 

  717.                                     </div>
    718. 

  718.                                     <div class="card-content">
    719. 

  719.                                         <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    720. 

  720.                                         <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_Teachabel_Machine">Teachable Machine</span>
    721. 

  721.                                         <p class="">
    722. 

  722.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger" href="#Teachable_Machine">Enter</a>
    723. 

  723.                                         </p>
    724. 

  724.                                     </div>
    725. 

  725.                                 </div>
    726. 

  726.                             </div>
    727. 

  727.                             <div style="float:center;" class="col s6">
    728. 

  728.                                 <div class="card">
    729. 

  729.                                     <div class="card-image waves-effect waves-block waves-light">
    730. 

  730.                                         <!-- <img class="activator" src="icons/app-center_ai_emotion.jpg"> -->
    731. 

  731.                                         <img class="" src="icons/AppCenter_ai_emotion.jpg">
    732. 

  732.                                     </div>
    733. 

  733.                                     <div class="card-content">
    734. 

  734.                                         <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    735. 

  735.                                         <span id="ac-card-title emotion_recognition_enter_button" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_emotion_recognition">Emotion Recognition</span>
    736. 

  736.                                         <p class="">
    737. 

  737.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger" href="#webcam_capture_modal">Enter</a>
    738. 

  738.                                         </p>
    739. 

  739.                                     </div>
    740. 

  740.                                 </div>
    741. 

  741.                             </div>
    742. 

  742.                         </div>
    743. 

  743.                         <div id="center_ai_speech" class="col s12">
    744. 

  744.                             <div style="float:center;" class="col s6">
    745. 

  745.                                 <div class="card">
    746. 

  746.                                     <div class="card-image waves-effect waves-block waves-light">
    747. 

  747.                                         <img class="" src="icons/AppCenter_ai_speech.jpg">
    748. 

  748.                                     </div>
    749. 

  749.                                     <div class="card-content">
    750. 

  750.                                         <!-- <span class="AI_card_content">COCOCLOUD APP</span> -->
    751. 

  751.                                         <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_speech_recognition">Speech Recognition</span>
    752. 

  752.                                         <p class="">
    753. 

  753.                                             <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger" href="#voice_input_modal">Enter</a>
    754. 

  754.                                         </p>
    755. 

  755.                                     </div>
    756. 

  756.                                 </div>
    757. 

  757.                             </div>
    758. 

  758.                         </div>
    759. 

  759.                         <div id="center_ai_text" class="col s12">
    760. 

  760.                             <div style="float:center;" class="col s6">
    761. 

  761.                                 <div class="card">
    762. 

  762.                                     <div class="card-image waves-effect waves-block waves-light">
    763. 

  763.                                         <img class="" src="./icons/AppCenter_comingSoon.jpg">
    764. 

  764.                                     </div>
    765. 

  765.                                     <div class="card-content">
    766. 

  766.                                         <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming soon</span>
    767. 

  767.                                         <p class="">
    768. 

  768.                                             <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    769. 

  769.                                         </p>
    770. 

  770.                                     </div>
    771. 

  771.                                 </div>
    772. 

  772.                             </div>
    773. 

  773.                         </div>
    774. 

  774.                     </div>
    775. 

  775.                     <div id="center_iot" class=" col s12" style="display:none">
    776. 

  776.                         <h5 class="translatable_app_center_iot">Internet of Things</h5>
    777. 

  777.                         <div style="float:center;" class="col s6">
    778. 

  778.                             <div class="card">
    779. 

  779.                                 <div class="card-image waves-effect waves-block waves-light">
    780. 

  780.                                     <img class="" src="icons/AppCenter_iot_thingspeak.jpg">
    781. 

  781.                                 </div>
    782. 

  782.                                 <div class="card-content">
    783. 

  783.                                     <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    784. 

  784.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 ">ThingSpeak</span>
    785. 

  785.                                     <p class="">
    786. 

  786.                                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger" href="https://thingspeak.com" target="_blank">Enter</a>
    787. 

  787.                                     </p>
    788. 

  788.                                 </div>
    789. 

  789.                             </div>
    790. 

  790.                         </div>
    791. 

  791.                         <div style="float:center;" class="col s6">
    792. 

  792.                             <div class="card">
    793. 

  793.                                 <div class="card-image waves-effect waves-block waves-light">
    794. 

  794.                                     <img class="" src="icons/AppCenter_iot_ifttt.jpg">
    795. 

  795.                                 </div>
    796. 

  796.                                 <div class="card-content">
    797. 

  797.                                     <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    798. 

  798.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 ">IFTTT</span>
    799. 

  799.                                     <p class="">
    800. 

  800.                                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button modal-trigger" href="https://ifttt.com/maker_webhooks" target="_blank">Enter</a>
    801. 

  801.                                     </p>
    802. 

  802.                                 </div>
    803. 

  803.                             </div>
    804. 

  804.                         </div>
    805. 

  805.                     </div>
    806. 

  806.                     <div id="center_robot" class=" col s12" style="display:none">
    807. 

  807.                         <h5 class="translatable_app_center_robot">Robot Controller</h5>
    808. 

  808.                         <div style="float:center;" class="col s6">
    809. 

  809.                             <div class="card">
    810. 

  810.                                 <div class="card-image waves-effect waves-block waves-light">
    811. 

  811.                                     <img class="" src="./icons/AppCenter_comingSoon.jpg">
    812. 

  812.                                 </div>
    813. 

  813.                                 <div class="card-content">
    814. 

  814.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming soon</span>
    815. 

  815.                                     <p class="">
    816. 

  816.                                         <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    817. 

  817.                                     </p>
    818. 

  818.                                 </div>
    819. 

  819.                             </div>
    820. 

  820.                         </div>
    821. 

  821.                     </div>
    822. 

  822.                     <div id="center_science" class="col s12" style="display:none">
    823. 

  823.                         <h5 class="translatable_app_center_science">Science Experiements</h5>
    824. 

  824.                         <div style="float:center;" class="col s6">
    825. 

  825.                             <div class="card">
    826. 

  826.                                 <div class="card-image waves-effect waves-block waves-light">
    827. 

  827.                                     <img class="" src="./icons/AppCenter_comingSoon.jpg">
    828. 

  828.                                 </div>
    829. 

  829.                                 <div class="card-content">
    830. 

  830.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming soon</span>
    831. 

  831.                                     <p class="">
    832. 

  832.                                         <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    833. 

  833.                                     </p>
    834. 

  834.                                 </div>
    835. 

  835.                             </div>
    836. 

  836.                         </div>
    837. 

  837.                     </div>
    838. 

  838.                     <div id="center_game" class=" col s12" style="display:none">
    839. 

  839.                         <h5 class="translatable_app_center_games">Interactive Games</h5>
    840. 

  840.                         <div style="float:center;" class="col s6">
    841. 

  841.                             <div class="card">
    842. 

  842.                                 <div class="card-image waves-effect waves-block waves-light">
    843. 

  843.                                     <img class="" src="./icons/AppCenter_game_floppy-bird.jpg">
    844. 

  844.                                 </div>
    845. 

  845.                                 <div class="card-content">
    846. 

  846.                                     <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    847. 

  847.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_flappy">Floppy bird</span>
    848. 

  848.                                     <p class="">
    849. 

  849.                                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button " href="https://cocorobo.cn/demo/floppybird/" target="_blank">Enter</a>
    850. 

  850.                                     </p>
    851. 

  851.                                 </div>
    852. 

  852.                             </div>
    853. 

  853.                         </div>
    854. 

  854.                         <div style="float:center;" class="col s6">
    855. 

  855.                             <div class="card">
    856. 

  856.                                 <div class="card-image waves-effect waves-block waves-light">
    857. 

  857.                                     <img class="" src="icons/AppCenter_game_space_lamb.jpg">
    858. 

  858.                                 </div>
    859. 

  859.                                 <div class="card-content">
    860. 

  860.                                     <!-- <span class="AI_card_content">3RD-PARTY APP</span> -->
    861. 

  861.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_game_space_lamb">Space Lamb</span>
    862. 

  862.                                     <p class="">
    863. 

  863.                                         <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button " href="https://spacelamb.12wave.com" target="_blank">Enter</a>
    864. 

  864.                                     </p>
    865. 

  865.                                 </div>
    866. 

  866.                             </div>
    867. 

  867.                         </div>
    868. 

  868.                     </div>
    869. 

  869.                     <div id="center_arvr" class=" col s12" style="display:none">
    870. 

  870.                         <h5 class="translatable_app_center_arvr">AR/VR</h5>
    871. 

  871.                         <div style="float:center;" class="col s6">
    872. 

  872.                             <div class="card">
    873. 

  873.                                 <div class="card-image waves-effect waves-block waves-light">
    874. 

  874.                                     <!-- <img class="activator" src="icons/app-center_ai_speech.jpg"> -->
    875. 

  875.                                     <img class="" src="icons/AppCenter_comingSoon.jpg">
    876. 

  876.                                 </div>
    877. 

  877.                                 <div class="card-content">
    878. 

  878.                                     <span id="ac-card-title" class="ac-card-title card-title activator grey-text text-darken-4 translatable_app_center_wait_to_come">Comming soon</span>
    879. 

  879.                                     <p class="">
    880. 

  880.                                         <!-- <a class="waves-effect waves-light btn blue accent-3 translatable_app_center_enter_button disabled" href="#">Enter</a> -->
    881. 

  881.                                     </p>
    882. 

  882.                                 </div>
    883. 

  883.                             </div>
    884. 

  884.                         </div>
    885. 

  885.                     </div>
    886. 

  886.                 </div>
    887. 

  887.             </div>
    888. 

  888.         </div>
    889. 

  889.     </div>
    890. 

  890.     </div>
    891. 

  891.     <!-- webcam input modal -->
    892. 

  892.     <div id="webcam_capture_modal" class="modal">
    893. 

  893.         <div id="emotionRecognitionTitle" class="modal-content">
    894. 

  894.             <div style="margin-bottom:-10px;margin-top:10px;" class="row">
    895. 

  895.                 <div class="col s8">
    896. 

  896.                     <h4 class="translatable_webcamDemoTitle">Emotion Recognition</h4>
    897. 

  897.                 </div>
    898. 

  898.                 <div style="text-align:right;" class="col s4">
    899. 

  899.                     <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);" id="emotion_recognition_close">
    900. 

  900.                         <h4><i class="small material-icons">close</i></h4>
    901. 

  901.                     </a>
    902. 

  902.                 </div>
    903. 

  903.             </div>
    904. 

  904.             <!--<div> <span class="translatable_cloudFileTooltip" sytle="margin-left:10px">Type project's name and click save</span></div>-->
    905. 

  905.             <div class="row">
    906. 

  906.                 <div class="col s12">
    907. 

  907.                     <div class="switch" style="margin-bottom:20px;">
    908. 

  908.                         <label>
    909. 

  909.                             <span class="translatable_emotion_camera_off">Camera Off</span>
    910. 

  910.                             <input id="camera_switch" type="checkbox" onclick="cameraSwitch()">
    911. 

  911.                             <span class="lever "></span><span class="translatable_emotion_camera_on">On</span>
    912. 

  912.                         </label>
    913. 

  913.                     </div>
    914. 

  914.                 </div>
    915. 

  915.             </div>
    916. 

  916.             <div class="row" style="text-align:left;">
    917. 

  917.                 <div style="float:center;" class="col s6">
    918. 

  918.                     <p class="translatable_face_webcam" style="margin-top:-20px;">Webcam:</p>
    919. 

  919.                     <div id="webCamera"></div>
    920. 

  920.                     <div class="translatable_emotion_camera_turnon_text" id="webCamPlaceholder">Turn on the Camera first</div>
    921. 

  921.                 </div>
    922. 

  922.                 <div style="float:center;" class="col s6">
    923. 

  923.                     <p class="translatable_face_latest_snapshot" style="margin-top:-20px;">Last snapshot:</p>
    924. 

  924.                     <div id="results"></div>
    925. 

  925.                     <div class="translatable_emotion_snapshot_text" id="SnapshotPlaceholder">Your snapshot will be here</div>
    926. 

  926.                 </div>
    927. 

  927.             </div>
    928. 

  928.             <div class="row">
    929. 

  929.                 <div class="col s6">
    930. 

  930.                     <a id="emotionRequestStatus" class="waves-effect waves-light btn blue translatable_face_analyze" onclick="processImage()">Analyze</a>
    931. 

  931.                 </div>
    932. 

  932.             </div>
    933. 

  933.             <div class="row" style="text-align:left;">
    934. 

  934.                 <div id="emotionResultsAll" class="col s12">
    935. 

  935.                     <span class="translatable_emotion_result_title" id="facialanalysistitle" style="font-weight:200;">Facial Analysis:</span>
    936. 

  936.                     <p id="emotionResultsAll_property">
    937. 

  937.                         <b class="translatable_emotion_result_emotion_title">Emotion:</b>
    938. 

  938.                         <span id="emotionResults_emotion" class="emotionResultsAll_single translatable_emotion_result_default">Nothing detected.</span>
    939. 

  939.                     </p>
    940. 

  940.                     <p id="emotionResultsAll_property">
    941. 

  941.                         <b class="translatable_emotion_result_age_title">Age:</b>
    942. 

  942.                         <span id="emotionResults_age" class="emotionResultsAll_single translatable_emotion_result_default">Nothing detected.</span>
    943. 

  943.                     </p>
    944. 

  944.                     <p id="emotionResultsAll_property">
    945. 

  945.                         <b class="translatable_emotion_result_gender_title">Gender:</b>
    946. 

  946.                         <span id="emotionResults_gender" class="emotionResultsAll_single translatable_emotion_result_default">Nothing detected.</span>
    947. 

  947.                     </p>
    948. 

  948.                     <p id="emotionResultsAll_property">
    949. 

  949.                         <b class="translatable_emotion_result_glasses_title">Glasses:</b>
    950. 

  950.                         <span id="emotionResults_glasses" class="emotionResultsAll_single translatable_emotion_result_default">Nothing detected.</span>
    951. 

  951.                     </p>
    952. 

  952.                     <!-- <p id="emotionResultsAll_property">
    953. 

  953.                         <b>Hair Color:</b>
    954. 

  954.                         <span id="emotionResults_hair" class="emotionResultsAll_single">Nothing detected.</span>
    955. 

  955.                     </p>-->
    956. 

  956.                 </div>
    957. 

  957.                 <div id="cloudRequestStatus" class="col s12">
    958. 

  958.                 </div>
    959. 

  959.             </div>
    960. 

  960.             <div class="row">
    961. 

  961.                 <div class="col s12" style="position: relative">
    962. 

  962.                     <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will directly send to there</div>
    963. 

  963.                     <div style="width:100%;margin-top: 15px;">
    964. 

  964.                         <select class="browser-default" id="AI_webcam_events">
    965. 

  965.                             <option class="translatable_noEvent" value=null disabled>No event here. Login first</option>
    966. 

  966.                         </select>
    967. 

  967.                     </div>
    968. 

  968.                     <span style="float:right;top: -45px;position: relative;margin-top: -38px;">
    969. 

  969.                         <i id="update_Coevent_web" class="material-icons">autorenew</i>
    970. 

  970.                     </span>
    971. 

  971.                 </div>
    972. 

  972.             </div>
    973. 

  973.         </div>
    974. 

  974.     </div>
    975. 

  975.     <div id="voice_input_modal" class="modal">
    976. 

  976.         <div class="modal-content">
    977. 

  977.             <div style="margin-top:10px;" class="row">
    978. 

  978.                 <div class="col s8">
    979. 

  979.                     <h4 class="translatable_speechDemoTitle">Speech Recognition</h4>
    980. 

  980.                 </div>
    981. 

  981.                 <div style="text-align:right;" class="col s4">
    982. 

  982.                     <a style="cursor: pointer;text-decoration:none; color:rgba(0,0,0.9);" id="voice_input_close">
    983. 

  983.                         <h4><i class="small material-icons">close</i></h4>
    984. 

  984.                     </a>
    985. 

  985.                 </div>
    986. 

  986.             </div>
    987. 

  987.             <div style="margin-bottom:10px;margin-top:-20px;" class="row">
    988. 

  988.                 <div class="col s12">
    989. 

  989.                         <p class="translatable_speechTip" style="font-size:15px;font-weight:200;">Voice recognition for English, Cantonese & Mandarin.</p>
    990. 

  990.                         <hr style="position:relative;top:-2px;margin-bottom:15px;border-color:rgba(0,0,0,.1); border-width: 1px;">
    991. 

  991.                 </div>
    992. 

  992.             </div>
    993. 

  993.             <div class="row" style="margin-top:-15px;margin-bottom:10px">
    994. 

  994.                 <div class="col s4">
    995. 

  995.                     <p class="translatable_speech_language_select">Select a language to recognize:</p>
    996. 

  996.                 </div>
    997. 

  997.                 <div style="margin-left:-20px;" class="col s2 speech_language" style="position:relative;top:3px">
    998. 

  998.                     <select id="speech_language_selection" class="browser-default" style="max-width:200px">
    999. 

  999.                         <option value="english" class="translatable_speech_language_English">English</option>
    1000. 

  1000.                         <option value="cantonese" class="translatable_speech_language_Cantonese">Cantonese</option>
    1001. 

  1001.                         <option value="mandarin" class="translatable_speech_language_Mandarin">Mandarin</option>
    1002. 

  1002.                     </select>
    1003. 

  1003.                 </div>
    1004. 

  1004.                 <div class="col s1" style="position:relative;top:5px">
    1005. 

  1005.                     <a id="speech_button" class="waves-effect waves-light btn blue" style="padding:0 8px" onclick="processSpeech()/*startSpeech()*/"><i class="material-icons">mic</i></a>
    1006. 

  1006.                 </div>
    1007. 

  1007.                 <div class="col s5" style="position:relative;top:15px">
    1008. 

  1008.                     <span style="font-weight:200;margin-left:-5px;" id="speech_process_title" style="position:relative;top:-6px;"></span>
    1009. 

  1009.                 </div>
    1010. 

  1010.             </div>
    1011. 

  1011.             <div class="row">
    1012. 

  1012.                 <textarea id="speech_textarea" row="3" class="disabled translatable_speech_textarea_title" style="width:772px;height:130px;resize:none;border-radius:5px;padding:10px;color:rgba(0,0,0,.4);" readonly> Click on the mic button to start dictating...</textarea>
    1013. 

  1013.             </div>
    1014. 

  1014.             <div style="margin-top:-8px;" class="row">
    1015. 

  1015.                 <div class="col s12" style="position: relative; margin-bottom:12px;">
    1016. 

  1016.                     <span id="speechDemoCloudRequest" style="font-weight:200;"></span>
    1017. 

  1017.                 </div>
    1018. 

  1018.                 <div class="col s12" style="position: relative">
    1019. 

  1019.                     <div class="translatable_selectEvent">Choose a CocoCloud event here, the analyzed result will directly send to there</div>
    1020. 

  1020.                     <div style="width:95%">
    1021. 

  1021.                         <select style="margin-top:10px;" class="browser-default" id="AI_voice_events">
    1022. 

  1022.                             <option class="translatable_noEvent" value=null disabled>No event here. Login first</option>
    1023. 

  1023.                         </select>
    1024. 

  1024.                     </div>
    1025. 

  1025.                     <span style="float:right;top: -45px;position: relative;">
    1026. 

  1026.                         <i id="update_Coevent_voice" class="material-icons">autorenew</i>
    1027. 

  1027.                     </span>
    1028. 

  1028.                 </div>
    1029. 

  1029.             </div>
    1030. 

  1030.         </div>
    1031. 

  1031.     </div>
    1032. 

  1032.     <!-- login modal -->
    1033. 

  1033.     <div id="login_modal" class="modal" style="top:62px">
    1034. 

  1034.         <div id="login_modal_preload" class="progress" style="display:none">
    1035. 

  1035.             <div class="indeterminate"></div>
    1036. 

  1036.         </div>
    1037. 

  1037.         <div class="modal-content" style="padding:0;">
    1038. 

  1038.             <!-- add for login iframe -->
    1039. 

  1039.             <div id="before_login"></div>
    1040. 

  1040.             <div id="after_login">
    1041. 

  1041.                 <div id="userProfile_alias"></div>
    1042. 

  1042.                 <div><span class="translatable_user_email">Email：</span><span id="userProfile_username"> </span></div>
    1043. 

  1043.                 <div><span class="translatable_user_school">School：</span><span id="userProfile_school"></span></div>
    1044. 

  1044.                 <div id="userProfile_apikey">
    1045. 

  1045.                     <div>
    1046. 

  1046.                         <span class="translatable_Event">Event: </span>
    1047. 

  1047.                         <span style="margin-top: -13px;float:right;transform:translateY(35%);">
    1048. 

  1048.                             <i id="update_Coevent" class="material-icons">autorenew</i>
    1049. 

  1049.                         </span>
    1050. 

  1050.                         <select style="width: 100%; margin: 6px auto 8px auto; border: 1px solid rgba(0,0,0,.2);" class="browser-default" id="cloud_events">
    1051. 

  1051.                             <option value=null disabled>No Event</option>
    1052. 

  1052.                         </select>
    1053. 

  1053.                     </div>
    1054. 

  1054.                     <div style="margin-top:5px">
    1055. 

  1055.                         <span>API Key: </span>
    1056. 

  1056.                         <a id="apikey-copy" data-clipboard-action="copy" data-clipboard-target="#api-key">
    1057. 

  1057.                             <i class="material-icons tiny">content_copy</i>
    1058. 

  1058.                         </a>
    1059. 

  1059.                         <textarea style="padding: 6px 6px; margin-top: 4px;" id="api-key" readonly></textarea>
    1060. 

  1060.                     </div>
    1061. 

  1061.                 </div>
    1062. 

  1062.             </div>
    1063. 

  1063.         </div>
    1064. 

  1064.         <div class="modal-footer" style="display:none;">
    1065. 

  1065.             <a id="modal_logout_btn" class="waves-effect btn-flat blue"><span class="translatable_signout">Sign Out</span></a>
    1066. 

  1066.             <a id="modal_cococloud_btn" href="//cocorobo.cn/cloud" target="_black" class="waves-effect btn-flat blue"><span class="translatable_cococloud">Go to CocoCloud</span></a>
    1067. 

  1067.         </div>
    1068. 

  1068.     </div>
    1069. 

  1069.     <!-- local storage - import modal -->
    1070. 

  1070.     <div id="Storage_import_modal" class="modal" style="width:730px">
    1071. 

  1071.         <div class="modal-content">
    1072. 

  1072.             <h4 class="translatable_localStorageImport">Import Project</h4>
    1073. 

  1073.             <div> <span class="translatable_ImportTooltip" sytle="margin-left:10px">Select your project file(*.xml) and import it to the current workspace.Warning:will replace current blocks</span></div>
    1074. 

  1074.             <div id="import_area" class="row" style="margin: 10px;height: 200px;position: relative;">
    1075. 

  1075.                 <a id="modal_import_btn" class="waves-effect btn-flat blue" style="top:180px;left:320px;position:fixed"><span class="translatable_import" style="font-size:15px;color:#fff">Import</span></a>
    1076. 

  1076.                 <span class="translatable_ImportContent" style="top: 230px;width:300px;left:27%;position:fixed;text-align:center">Click to choose a file from your computer</span>
    1077. 

  1077.             </div>
    1078. 

  1078.         </div>
    1079. 

  1079.     </div>
    1080. 

  1080.     <!-- local storage - export modal -->
    1081. 

  1081.     <div id="Storage_export_modal" class="modal" style="width:730px">
    1082. 

  1082.         <div class="modal-content">
    1083. 

  1083.             <h4 class="translatable_localStorageExport">Export Project</h4>
    1084. 

  1084.             <div> <span class="translatable_ExportTooltip" sytle="margin-left:10px">Export current project blocks and save it your computer,so you can open it next time when you need it</span></div>
    1085. 

  1085.             <div class="row" style="margin: 10px;height: 200px;width: 640px;position: relative;">
    1086. 

  1086.                 <div style="display:block">
    1087. 

  1087.                     <div class="col l6">
    1088. 

  1088.                         <img src="./icons/blockly-file-export_xml.png" style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
    1089. 

  1089.                     </div>
    1090. 

  1090.                     <div class="col l6">
    1091. 

  1091.                         <img src="./icons/blockly-file-export_png.png" style="width:20%;position:relative;left:50%;right:50%;transform:translateX(-50%);">
    1092. 

  1092.                     </div>
    1093. 

  1093.                 </div>
    1094. 

  1094.                 <div>
    1095. 

  1095.                     <div class="col l6">
    1096. 

  1096.                         <a id="modal_exportFileBtn" class="waves-effect btn-flat blue" style="left: 50%;right: 50%;transform: translateX(-50%)"><span class="translatable_exportFile" style="font-size:15px;color:#fff">Project File</span></a>
    1097. 

  1097.                     </div>
    1098. 

  1098.                     <div class="col l6">
    1099. 

  1099.                         <a id="modal_exportSnapBtn" class="waves-effect btn-flat blue" style="left: 50%;right: 50%;transform: translateX(-50%)"><span class="translatable_exportSnap" style="font-size:15px;color:#fff">Snapshot</span></a>
    1100. 

  1100.                     </div>
    1101. 

  1101.                 </div>
    1102. 

  1102.                 <div>
    1103. 

  1103.                     <div class="col l6">
    1104. 

  1104.                         <p class="translatable_ExportFileContent" style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">Will export as an *xml file.<br>for you to continuing code nextime</p>
    1105. 

  1105.                     </div>
    1106. 

  1106.                     <div class="col l6">
    1107. 

  1107.                         <p class="translatable_ExportSnapContent" style="display:block;text-align:center;width:80%;position: relative;left: 50%;right: 50%;transform: translateX(-50%);font-size:0.875rem">Will export to a *png picture.<br>for your reference</p>
    1108. 

  1108.                     </div>
    1109. 

  1109.                 </div>
    1110. 

  1110.             </div>
    1111. 

  1111.         </div>
    1112. 

  1112.     </div>
    1113. 

  1113.     <!-- cloud storage modal -->
    1114. 

  1114.     <div id="cloud_storage_modal" class="modal">
    1115. 

  1115.         <div class="modal-content">
    1116. 

  1116.             <h4 class="translatable_cloudStorageTitle">Cloud Storage</h4>
    1117. 

  1117.             <div id="cloud_askLogin"></div>
    1118. 

  1118.             <div id="cloud_fileListArea" class="cloud-file" style="display:none">
    1119. 

  1119.             </div>
    1120. 

  1120.         </div>
    1121. 

  1121.         <div id="cloud_modal_preload" style="display:none">
    1122. 

  1122.             <div style="position:relative;top:50%;transform:translateY(-50%);height:128px;width:128px;margin:0 auto;">
    1123. 

  1123.                 <div class="preloader-wrapper big active" style="top:0;left:0">
    1124. 

  1124.                     <div class="spinner-layer spinner-blue-only">
    1125. 

  1125.                         <div class="circle-clipper left">
    1126. 

  1126.                             <div class="circle"></div>
    1127. 

  1127.                         </div>
    1128. 

  1128.                         <div class="gap-patch">
    1129. 

  1129.                             <div class="circle"></div>
    1130. 

  1130.                         </div>
    1131. 

  1131.                         <div class="circle-clipper right">
    1132. 

  1132.                             <div class="circle"></div>
    1133. 

  1133.                         </div>
    1134. 

  1134.                     </div>
    1135. 

  1135.                 </div>
    1136. 

  1136.             </div>
    1137. 

  1137.         </div>
    1138. 

  1138.     </div>
    1139. 

  1139.     </div>
    1140. 

  1140.     <!-- export monitor data modal -->
    1141. 

  1141.     <div id="export-file" class="modal" style="width:20%">
    1142. 

  1142.         <div class="modal-content" style="padding:20px,20px,0,20px">
    1143. 

  1143.             <h5 class="translatable_modal_export_title">Choose the file type you want to save as</h5>
    1144. 

  1144.             <div class="row">
    1145. 

  1145.                 <div class="input-field col s3"></div>
    1146. 

  1146.                 <div class="input-field col s6">
    1147. 

  1147.                     <select id="export-file-type" style="font-size:10px;margin-bottom:0;">
    1148. 

  1148.                         <option value="txt" selected>TXT</option>
    1149. 

  1149.                         <option value="csv">CSV</option>
    1150. 

  1150.                     </select>
    1151. 

  1151.                 </div>
    1152. 

  1152.                 <div class="input-field col s3"></div>
    1153. 

  1153.             </div>
    1154. 

  1154.         </div>
    1155. 

  1155.         <div class="modal-footer">
    1156. 

  1156.             <a id="modal-export-confirm-btn" class="col s6 waves-effect waves-light blue lighten-2 btn translatable_modal_export_comfirm" style="float:right;margin-right:10px">confirm</a>
    1157. 

  1157.             <!-- <a class="col s6 waves-effect waves-light blue lighten-2 btn"style="float:right;margin-right:10px"
    1158. 

  1158.                 onclick="exportMonitorData('.txt')">txt
    1159. 

  1159.             </a>    
    1160. 

  1160.             <a class="col s6 waves-effect waves-light blue lighten-2 btn"style="float:right;margin-right:10px"
    1161. 

  1161.                 onclick="exportMonitorData('.csv')">csv
    1162. 

  1162.             </a> -->
    1163. 

  1163.         </div>
    1164. 

  1164.     </div>
    1165. 

  1165.     <!-- uploader version reminder modal -->
    1166. 

  1166.     <div id="uploader_reminder" class="modale" style="width: 800px;">
    1167. 

  1167.         <div class="modal-content">
    1168. 

  1168.             <h4 class="translatable_uploader_reminder_title" style="font-size:2.0rem">Please upgrade your CocoBlockly Pi Uploader</h4>
    1169. 

  1169.             <p>
    1170. 

  1170.                 <span class="translatable_uploader_reminder_currentVersion">Current version:</span>
    1171. 

  1171.                 <span id="uploader_currentVersion"></span>
    1172. 

  1172.                 <span> / </span>
    1173. 

  1173.                 <span class="translatable_uploader_reminder_newVersion">Latest version: </span>
    1174. 

  1174.                 <sapn id="uploader_newVersion"></sapn>
    1175. 

  1175.             </p>
    1176. 

  1176.             <p id="uploader_content_update" class="translatable_uploader_reminder_text3">To ensure a smooth user experience, we strongly recommend you to keep the software updated.
    1177. 

  1177.                 <br>There are two ways to upgrade the CocoBlockly Pi Uploader:
    1178. 

  1178.                 <br>&nbsp&nbsp&nbsp&nbsp1) Right click the system tray icon in the system status bar, then click "Update";
    1179. 

  1179.                 <br>&nbsp&nbsp&nbsp&nbsp2) Download our latest release from our server: <a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_Windows.exe" target="_black">Windows</a> /<a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_macOS.dmg" target="_black">macOS</a>
    1180. 

  1180.             </p>
    1181. 

  1181.             <p id="uploader_content_redownload" class="translatable_uploader_reminder_text4" style="display:none">The version of uploader isn't support any more, we strongly recommend you to keep the software updated.
    1182. 

  1182.                 <br>Download our latest release from our server: <a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_Windows.exe" target="_black">Windows</a> /<a download href="http://cocorobo.cn/downloads/CocoBlocklyUploader_v3.0.6_macOS.dmg" target="_black">macOS</a>
    1183. 

  1183.             </p>
    1184. 

  1184.         </div>
    1185. 

  1185.         <div class="modal-footer">
    1186. 

  1186.             <div>
    1187. 

  1187.                 <a id="reminder_close" class="waves-effect waves-green btn-flat blue translatable_uploader_reminder_done" style="margin-right:10px">Got it</a>
    1188. 

  1188.             </div>
    1189. 

  1189.         </div>
    1190. 

  1190.     </div>
    1191. 

  1191.     <!-- start tour modal -->
    1192. 

  1192.     <div id="tourmode" class="modal">
    1193. 

  1193.         <div class="modal-content">
    1194. 

  1194.             <h4 class="translatable_tourmodal_title">Welcome to CocoBlockly Pi!</h4>
    1195. 

  1195.             <p class="translatable_tourmodal_text">Follow "Start Tour" to get all information about CocoBlockly Pi.</p>
    1196. 

  1196.         </div>
    1197. 

  1197.         <div class="modal-footer">
    1198. 

  1198.             <a class="modal-action modal-close waves-effect waves-green btn-flat translatable_tourmodal_click" href="http://help.cocorobo.cn/#/getting-started/info?id=cocoblockly-%E7%95%8C%E9%9D%A2%E5%8F%8A%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%B4%B9" target="_black">Start Tour</a>
    1199. 

  1199.         </div>
    1200. 

  1200.     </div>
    1201. 

  1201.     <!-- gif tour mode - slide  -->
    1202. 

  1202.     <div id="tour_slider_modal" class="modal slide-section" style="display:none">
    1203. 

  1203.         <div style="height: 45px;">
    1204. 

  1204.             <i id="tour_modal_close" class="right material-icons btn-flat grey">close</i>
    1205. 

  1205.         </div>
    1206. 

  1206.         <section id="section-slider" class="variable slider" style="width:90%;top:2px;left:36px;height:90%">
    1207. 

  1207.             <div>
    1208. 

  1208.                 <div class="slide-content">
    1209. 

  1209.                     <img data-src="./gif/step01.jpg" class="lazyload slide-element">
    1210. 

  1210.                 </div>
    1211. 

  1211.                 <p class="slide-text translatable_tour_start">Follow this beginner-level instruction, you will learn how to use CocoBlockly Pi to code:</p>
    1212. 

  1212.             </div>
    1213. 

  1213.             <div>
    1214. 

  1214.                 <div class="slide-content">
    1215. 

  1215.                     <img data-src="./gif/step02.gif" class="lazyload slide-element">
    1216. 

  1216.                 </div>
    1217. 

  1217.                 <p class="slide-text translatable_tour_editProject">Edit Project Title: Click the input on the top left, type a desired name of your project</p>
    1218. 

  1218.             </div>
    1219. 

  1219.             <div>
    1220. 

  1220.                 <div class="slide-content">
    1221. 

  1221.                     <img data-src="./gif/step03.gif" class="lazyload slide-element">
    1222. 

  1222.                 </div>
    1223. 

  1223.                 <p class="slide-text translatable_tour_menuBar">Menu Bar: Here you will find 4 important functions: Help, Cloud Storage, Local Import/Export and Language Switch (English, Simplified Chinese and Traditional Chinese)</p>
    1224. 

  1224.             </div>
    1225. 

  1225.             <div>
    1226. 

  1226.                 <div class="slide-content">
    1227. 

  1227.                     <img data-src="./gif/step04.gif" class="lazyload slide-element">
    1228. 

  1228.                 </div>
    1229. 

  1229.                 <p class="slide-text translatable_tour_personAccount">Personal Account: Click the avatar and login to your account, experience features like the cloud storage and IoT applet via CocoCloud.</p>
    1230. 

  1230.             </div>
    1231. 

  1231.             <div>
    1232. 

  1232.                 <div class="slide-content">
    1233. 

  1233.                     <img data-src="./gif/step05.gif" class="lazyload slide-element">
    1234. 

  1234.                 </div>
    1235. 

  1235.                 <p class="slide-text translatable_tour_blocklyToolbox">Blockly Toolbox: Where all CocoBlockly Pi blocks exists, from Logic to blocks for CocoRobo Module, we also provide examples in order to help users getting started</p>
    1236. 

  1236.             </div>
    1237. 

  1237.             <div>
    1238. 

  1238.                 <div class="slide-content">
    1239. 

  1239.                     <!-- <img src="./gif/step06a.gif" class="slide-element" style="margin-top: 40px;"> -->
    1240. 

  1240.                     <img data-src="./gif/step06a.gif" class="lazyload slide-element">
    1241. 

  1241.                 </div>
    1242. 

  1242.                 <p class="slide-text translatable_tour_codeWorkspace_1">Coding Workspace (1): Drag the block;</p>
    1243. 

  1243.             </div>
    1244. 

  1244.             <div>
    1245. 

  1245.                 <div class="slide-content">
    1246. 

  1246.                     <!-- <img src="./gif/step06b.gif" class="slide-element" style="margin-top: 40px;"> -->
    1247. 

  1247.                     <img data-src="./gif/step06b.gif" class="lazyload slide-element">
    1248. 

  1248.                 </div>
    1249. 

  1249.                 <p class="slide-text translatable_tour_codeWorkspace_2">Coding Workspace (2): Duplicate the block;</p>
    1250. 

  1250.             </div>
    1251. 

  1251.             <div>
    1252. 

  1252.                 <div class="slide-content">
    1253. 

  1253.                     <!-- <img src="./gif/step06c.gif" class="slide-element" style="margin-top: 40px;"> -->
    1254. 

  1254.                     <img data-src="./gif/step06c.gif" class="lazyload slide-element">
    1255. 

  1255.                 </div>
    1256. 

  1256.                 <p class="slide-text translatable_tour_codeWorkspace_3">Coding Workspace (3): Delete the block;</p>
    1257. 

  1257.             </div>
    1258. 

  1258.             <div>
    1259. 

  1259.                 <div class="slide-content">
    1260. 

  1260.                     <!-- <img src="./gif/step06d.gif" class="slide-element" style="margin-top: 40px;"> -->
    1261. 

  1261.                     <img data-src="./gif/step06d.gif" class="lazyload slide-element">
    1262. 

  1262.                 </div>
    1263. 

  1263.                 <p class="slide-text translatable_tour_codeWorkspace_4">Coding Workspace (4): Delete all blocks;</p>
    1264. 

  1264.             </div>
    1265. 

  1265.             <div>
    1266. 

  1266.                 <div class="slide-content">
    1267. 

  1267.                     <img data-src="./gif/step07.gif" class="lazyload slide-element">
    1268. 

  1268.                 </div>
    1269. 

  1269.                 <p class="slide-text translatable_tour_sourceCodeArea">Source Code Area: When you drag block to coding workspace, this area will automatically generate Arduino source code for reference.</p>
    1270. 

  1270.             </div>
    1271. 

  1271.             <div>
    1272. 

  1272.                 <div class="slide-content">
    1273. 

  1273.                     <!-- <img src="./gif/step08.gif" class="slide-element"style="margin-top: 90px;"> -->
    1274. 

  1274.                     <img data-src="./gif/step08.gif" class="lazyload slide-element">
    1275. 

  1275.                 </div>
    1276. 

  1276.                 <p class="slide-text translatable_tour_uploadArea">Upload Area: When you finished coding, click the Compile option to verify if your code is valid, make sure you have a good internet connection.Click the Upload option to upload the code to your module (Note: Please do not disconnect the
    1277. 

  1277.                     module from your computer while the code is uploading)</p>
    1278. 

  1278.             </div>
    1279. 

  1279.             <div>
    1280. 

  1280.                 <div class="slide-content">
    1281. 

  1281.                     <img data-src="./gif/step09.gif" class="lazyload slide-element">
    1282. 

  1282.                 </div>
    1283. 

  1283.                 <p class="slide-text translatable_tour_serialMonitorArea">Serial Monitor Area: Like Arduino IDE, in here you can debug your code, such as put the value to the monitor to check if it's right.</p>
    1284. 

  1284.             </div>
    1285. 

  1285.             <div>
    1286. 

  1286.                 <div class="slide-content">
    1287. 

  1287.                     <img data-src="./gif/step10.gif" class="lazyload slide-element">
    1288. 

  1288.                 </div>
    1289. 

  1289.                 <p class="slide-text translatable_tour_switchtoFullScreen">Switch to Full Screen: When you feel the coding space is narrow, you can always toggle the full screen option in the top-right toolbar</p>
    1290. 

  1290.             </div>
    1291. 

  1291.             <div>
    1292. 

  1292.                 <div class="slide-content">
    1293. 

  1293.                     <img data-src="./gif/step11.gif" class="lazyload slide-element">
    1294. 

  1294.                 </div>
    1295. 

  1295.                 <p class="slide-text translatable_tour_mainMode">(Main Mode) Upload Code: Under Main Mode, CocoBlockly Pi will only detect Main Controller Module, and you will be able to upload the main mode code to the module. If you are using WiFi Module, the interface will automatically change to WiFi
    1296. 

  1296.                     Mode.
    1297. 

  1297.                 </p>
    1298. 

  1298.             </div>
    1299. 

  1299.             <div>
    1300. 

  1300.                 <div class="slide-content">
    1301. 

  1301.                     <img data-src="./gif/step12.gif" class="lazyload slide-element">
    1302. 

  1302.                 </div>
    1303. 

  1303.                 <p class="slide-text translatable_tour_wifiMode">(WiFi Mode) Upload Code: Under WiFi Mode, CocoBlockly Pi will only detect WiFi Module, and you will be able to upload the wifi mode code to the module. If you are using Main Controller Module, the interface will automatically change to Main
    1304. 

  1304.                     Mode.
    1305. 

  1305.                 </p>
    1306. 

  1306.             </div>
    1307. 

  1307.             <div>
    1308. 

  1308.                 <div class="slide-content">
    1309. 

  1309.                     <img data-src="./gif/step-cloud1.gif" class="lazyload slide-element">
    1310. 

  1310.                 </div>
    1311. 

  1311.                 <p class="slide-text translatable_tour_cloudStorage_update">Cloud Storage: To add a new project to our cloud, click the Cloud Storage icon and a prompt will open, change the name to a desired one if you needed, then click "Update" button.</p>
    1312. 

  1312.             </div>
    1313. 

  1313.             <div>
    1314. 

  1314.                 <div class="slide-content">
    1315. 

  1315.                     <img data-src="./gif/step-cloud2.gif" class="lazyload slide-element">
    1316. 

  1316.                 </div>
    1317. 

  1317.                 <p class="slide-text translatable_tour_cloudStorge_open">Cloud Storage: To open a new project from your cloud, single-click the project name, then click the "Open" button.</p>
    1318. 

  1318.             </div>
    1319. 

  1319.             <div>
    1320. 

  1320.                 <div class="slide-content">
    1321. 

  1321.                     <img data-src="./gif/step-cloud3.gif" class="lazyload slide-element">
    1322. 

  1322.                 </div>
    1323. 

  1323.                 <p class="slide-text translatable_tour_cloudStorge_delete">Cloud Storage: To delete a project from your cloud, single-click the project name, then click the "Delete" button.</p>
    1324. 

  1324.             </div>
    1325. 

  1325.             <div>
    1326. 

  1326.                 <div class="slide-content">
    1327. 

  1327.                     <img data-src="./gif/final-step.gif" class="lazyload slide-element">
    1328. 

  1328.                 </div>
    1329. 

  1329.                 <p class="slide-text translatable_tour_end">Congratulations! You have sucessfully mastered the fundametals of CocoBlockly Pi, start coding yourself now!</p>
    1330. 

  1330.             </div>
    1331. 

  1331.         </section>
    1332. 

  1332.     </div>
    1333. 

  1333.     <!-- <script>
    1334. 

  1334.         $('.dropdown-button + .dropdown-content').on('click', function(event) {
    1335. 

  1335.             event.stopPropagation();
    1336. 

  1336.         });
    1337. 

  1337.     </script>-->
    1338. 

  1338.     <!-- Mopinion Pastea.se end -->
    1339. 

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

  1340.     <script src="ardublockly_desktop.js"></script>
    1341. 

  1341.     <!-- jQuery and Materialize JS -->
    1342. 

  1342.     <script src="js_libs/jquery-2.1.3.min.js"></script>
    1343. 

  1343.     <script src="materialize/js/materialize.js"></script>
    1344. 

  1344.     <!-- Slick JS -->
    1345. 

  1345.     <script src="slick/slick.js"></script>
    1346. 

  1346.     <script>
    1347. 

  1347.     $(".variable").slick({
    1348. 

  1348.         dots: true,
    1349. 

  1349.         infinite: true,
    1350. 

  1350.         variableWidth: true
    1351. 

  1351.     });
    1352. 

  1352.     </script>
    1353. 

  1353.     <!-- FileSaver JS -->
    1354. 

  1354.     <script src="js_libs/FileSaver.min.js"></script>
    1355. 

  1355.     <!-- JS Diff -->
    1356. 

  1356.     <script src="js_libs/diff.js"></script>
    1357. 

  1357.     <!-- Prettify JS -->
    1358. 

  1358.     <script src="prettify/prettify.js"></script>
    1359. 

  1359.     <!-- Lazyload JS -->
    1360. 

  1360.     <script src="lazysize/lazysizes.min.js"></script>
    1361. 

  1361.     <!-- Socket.io -->
    1362. 

  1362.     <script src="socket.io-client/dist/socket.io.js"></script>
    1363. 

  1363.     <!-- clipboard -->
    1364. 

  1364.     <script src="clipboard/dist/clipboard.js"></script>
    1365. 

  1365.     <!-- Event Proxy -->
    1366. 

  1366.     <script src="eventproxy/eventproxy.js"></script>
    1367. 

  1367.     <!-- platform.js -->
    1368. 

  1368.     <script src="platformjs/platform.js"></script>
    1369. 

  1369.     <!-- AI Face Emotion Recognition -->
    1370. 

  1370.     <script type='text/javascript' src="demo.js"></script>
    1371. 

  1371.     <script type='text/javascript' src="recorder.js"></script>
    1372. 

  1372.     <script type='text/javascript' src="jquery.s2t.js"></script>
    1373. 

  1373.     <!-- network online detection  -->
    1374. 

  1374.     <!-- <script src="onlineJS/online.js"></script> -->
    1375. 

  1375.     <!-- crazyegg  -->
    1376. 

  1376.     <!-- <script type="text/javascript" src="//script.crazyegg.com/pages/scripts/0082/8235.js" async="async"></script> -->
    1377. 

  1377.     <!-- Clicky Tracking Code for cocorobo.cn -->
    1378. 

  1378.     <!-- <script async defer src="//static.getclicky.com/js" type="text/javascript"></script> -->
    1379. 

  1379. </body>
    1380. 

  1380. 

  1381. </html>
    1382.