source: EcnlProtoTool/trunk/webapp/webmrbc/index.min.html@ 437

Last change on this file since 437 was 437, checked in by coas-nagasima, 4 years ago

JavaScriptの読み込まれる順番によって画面が表示できないのを修正
  • Property svn:eol-style set to native
  • Property svn:mime-type set to text/html
File size: 21.8 KB
Line 
1<!doctype html>
2<html lang="ja-jp">
3<head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>TOPPERS/ECNL for mruby Prototyping Tool</title>
8 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
9 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" />
10 <link rel="stylesheet" href="xterm/src/xterm.css" />
11 <link rel="stylesheet" href="css/webmrbc.css" />
12 <script src="js/jquery-3.1.0.min.js"></script>
13 <script src="bootstrap/js/bootstrap.min.js"></script>
14 <script src="xterm/src/xterm.js"></script>
15 <script src="xterm/addons/fit/fit.js"></script>
16 <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
17 <script src="ace/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
18 <script src="ace/mode-ruby.js" type="text/javascript" charset="utf-8"></script>
19 <script src="js/jszip.min.js"></script>
20 <script src="js/FileSaver.min.js" type="text/javascript"></script>
21 <script async src="mrbc.min.js" type="text/javascript"></script>
22 <script src="js/webmrbc.min.js" type="text/javascript"></script>
23</head>
24<body>
25 <div class="navbar navbar-inverse" id="main-menu">
26 <div class="container">
27 <ul class="nav navbar-nav" id="tabs">
28 <li class="active">
29 <a href="#block-tab" id="block-mode-button" onclick="WebMrbc.Views.MainMenuView.onBlockMode()">
30 <i class="glyphicon glyphicon-equalizer"></i>
31 ブロック
32 </a>
33 </li>
34 <li>
35 <a href="#ruby-tab" id="ruby-mode-button" onclick="WebMrbc.Views.MainMenuView.onRubyMode()">
36 <i class="glyphicon glyphicon-pencil"></i>
37 Ruby
38 </a>
39 </li>
40 <li>
41 <a href="#output-tab" id="output-mode-button" onclick="WebMrbc.Views.MainMenuView.onOutputMode()">
42 <i class="glyphicon glyphicon-console"></i>
43 出力
44 </a>
45 </li>
46 </ul>
47 <form accept-charset="UTF-8" action="/upload" class="navbar-form pull-right" enctype="multipart/form-data" id="file-form" method="post">
48 <div class="btn-group">
49 <a class="dropdown-toggle btn btn-primary" data-toggle="dropdown" href="#menu" id="submenu-button">
50 <i class="glyphicon glyphicon-th-list"></i>
51 メニュー
52 </a>
53 <ul class="dropdown-menu pull-right" id="submenu">
54 <li>
55 <a id="load-local-button">
56 <h4>
57 <label for="load-file">
58 <i class="glyphicon glyphicon-folder-open"></i>
59 ロード
60 </label>
61 <input type="file" name="workspace_xml" id="load-file" accept=".xml,application/xml" style="position:absolute; visibility: hidden" onclick="WebMrbc.Views.MainMenuView.onLoad()" />
62 </h4>
63 </a>
64 </li>
65 <li>
66 <a id="save-button" onclick="WebMrbc.Views.MainMenuView.onSaveWorkspace()">
67 <h4>
68 <i class="glyphicon glyphicon-hdd"></i>
69 ブロックを保存
70 </h4>
71 </a>
72 </li>
73 <li>
74 <a id="save-button" onclick="WebMrbc.Views.MainMenuView.onSaveRuby()">
75 <h4>
76 <i class="glyphicon glyphicon-hdd"></i>
77 Rubyコードを保存
78 </h4>
79 </a>
80 </li>
81 <li>
82 <a id="reset-button" onclick="WebMrbc.Views.MainMenuView.onReset()">
83 <h4>
84 <i class="glyphicon glyphicon-off"></i>
85 リセット
86 </h4>
87 </a>
88 </li>
89 </ul>
90 </div>
91 <div class="btn-group">
92 <a class="dropdown-toggle btn btn-info" data-toggle="dropdown" href="#compile" id="compile-submenu-button">
93 <i class="glyphicon glyphicon-random"></i>
94 ビルド
95 </a>
96 <ul class="dropdown-menu pull-right" id="compile-submenu">
97 <li>
98 <a id="mrbc-help-button" onclick="WebMrbc.Views.MainMenuView.onHelp()">
99 <h4>
100 <i class="glyphicon glyphicon-question-sign"></i>
101 ヘルプ
102 </h4>
103 </a>
104 </li>
105 <li>
106 <a id="mrbc-version-button" onclick="WebMrbc.Views.MainMenuView.onVersion()">
107 <h4>
108 <i class="glyphicon glyphicon-info-sign"></i>
109 バージョン
110 </h4>
111 </a>
112 </li>
113 <li>
114 <a id="mrbc-compile-to-c-button" onclick="WebMrbc.Views.MainMenuView.onCompileToC()">
115 <h4>
116 <i class="glyphicon glyphicon-circle-arrow-down"></i>
117 ビルド（.c）
118 </h4>
119 </a>
120 </li>
121 <li>
122 <a id="mrbc-compile-to-bin-button" onclick="WebMrbc.Views.MainMenuView.onCompileToMrb()">
123 <h4>
124 <i class="glyphicon glyphicon-download"></i>
125 ビルド（.mrb）
126 </h4>
127 </a>
128 </li>
129 </ul>
130 </div>
131 <a class="btn btn-default" id="run-button" onclick="WebMrbc.Views.MainMenuView.onRun()">
132 <i class="glyphicon glyphicon-send"></i>
133 実行
134 </a>
135 <a class="btn btn-link" id="information-button" onclick="WebMrbc.Views.MainMenuView.onInformationOpen()">
136 <i class="glyphicon glyphicon-info-sign"></i>
137 </a>
138 </form>
139 </div>
140 </div>
141
142 <div class="tab-content" id="modes-container">
143 <div class="tab-pane active modes-tab-pane" id="block-tab">
144 <div class="right-pane" id="block-tab-right-pane">
145 </div>
146 <div class="left-pane" id="block-tab-left-pane">
147 <div id="selectors-container">
148 <ul class="nav nav-pills">
149 <li class="active">
150 <a data-toggle="tab" href="#class-selector-tab">クラス</a>
151 </li>
152 </ul>
153 <div class="tab-content" id="selectors-tab-content">
154 <div class="tab-pane active selector-tab" id="class-selector-tab">
155 <div id="class-selector-celltype-set"></div>
156 <div class="item" id="add-celltype-item">
157 <a class="celltype" id="add-celltype-button">
158 <i class="glyphicon glyphicon-plus"></i>
159 <br>
160 新しい機器オブジェクト
161 </a>
162 </div>
163 </div>
164 </div>
165 </div>
166 </div>
167 </div>
168
169 <div class="tab-pane modes-tab-pane" id="ruby-tab">
170 <div class="ace_editor ace-clouds" id="text-editor"><textarea style="opacity: 0;" spellcheck="false" class="ace_text-input" nowrap></textarea><div class="ace_gutter"><div class="ace_layer ace_gutter-layer ace_folding-enabled"></div><div class="ace_gutter-active-line"></div></div><div class="ace_scroller"><div class="ace_content"><div class="ace_layer ace_print-margin-layer"><div style="left: 4px; visibility: visible;" class="ace_print-margin"></div></div><div class="ace_layer ace_marker-layer"></div><div style="padding: 0px 4px;" class="ace_layer ace_text-layer"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div><div style="width: 22px; display: none; overflow-y: scroll;" class="ace_scrollbar"><div style="width: 22px;" class="ace_scrollbar-inner"></div></div><div style="height: 22px; display: none; overflow-x: scroll;" class="ace_scrollbar-h"><div style="height: 22px;" class="ace_scrollbar-inner"></div></div></div>
171 </div>
172
173 <div class="tab-pane modes-tab-pane" id="output-tab">
174 <div id="term-box">
175 <div id="term"></div>
176 </div>
177 <div id="emscripten-box">
178 <a href="http://emscripten.org" id="emscripten_logo">
179 <img src="img/banner.svg" />
180 </a>
181 <div class="spinner" id='spinner'></div>
182 <div class="emscripten" id="status">Downloading...</div>
183 <div class="emscripten">
184 <progress value="0" max="100" id="progress" hidden></progress>
185 </div>
186 </div>
187 </div>
188 </div>
189
190 <div id="eobject-modal" class="modal fade">
191 <div class="modal-dialog">
192 <div class="modal-content">
193 <div class="modal-body">
194 <div class="right-pane" id="eobject-modal-right-pane">
195 <div id="eobject-modal-right-pane-inner">
196 <div class="btn-group-vertical" data-toggle="buttons" id="eobject_properties">
197 <label class="btn btn-default">
198 <input type="checkbox" autocomplete="off">動作状態
199 </label>
200 <label class="btn btn-default">
201 <input type="checkbox" autocomplete="off">設置場所
202 </label>
203 </div>
204 </div>
205 </div>
206 <div class="left-pane" id="eobject-modal-left-pane">
207 <div class="ui-droppable" id="eobject-modal-preview">
208 <div style="left: 0px; top: 0px; transform: rotate(0deg) scaleX(1);" class="ui-draggable" id="eobject-modal-celltype">
209 <img alt="no_image.png" src="img/no_image.png">
210 </div>
211 </div>
212 <div id="eobject-modal-attributes">
213 <form class="form-horizontal" id="eobject-modal-form">
214 <div class="control-group" for="celltype[identifier]">
215 <label class="control-label" for="eobject_identifier">名前</label>
216 <div class="controls">
217 <input class="form-control" id="eobject_identifier" name="eobject[identifier]" placeholder="Identifier" type="text" onchange="external.onChangeIdentifier(this)">
218 </div>
219 </div>
220 <div class="control-group" for="celltype[attribute]">
221 <label class="control-label" for="eobject_attribute">区分</label>
222 <div class="dropdown">
223 <button class="btn btn-default dropdown-toggle" type="button" id="eobject_attribute" data-toggle="dropdown" aria-expanded="false">
224 区分
225 <span class="caret"></span>
226 </button>
227 <ul class="dropdown-menu" role="menu" aria-labelledby="eobject_attribute">
228 <li role="presentation"><a role="menuitem" onclick="WebMrbc.Views.EObjectModalView.onSelectAttribute(this, 'local')">ローカルノード</a></li>
229 <li role="presentation"><a role="menuitem" onclick="WebMrbc.Views.EObjectModalView.onSelectAttribute(this, 'sync')">リモートノード（同期）</a></li>
230 <li role="presentation"><a role="menuitem" onclick="WebMrbc.Views.EObjectModalView.onSelectAttribute(this, 'async')">リモートノード（非同期）</a></li>
231 <li role="presentation"><a role="menuitem" onclick="WebMrbc.Views.EObjectModalView.onSelectAttribute(this, 'device')">機器オブジェクト</a></li>
232 </ul>
233 </div>
234 </div>
235 <div class="control-group" for="celltype[classGroupCode]">
236 <label class="control-label" for="eobject_classGroupCode">クラスグループ</label>
237 <div class="dropdown">
238 <button class="btn btn-default dropdown-toggle" type="button" id="eobject_classGroupCode" data-toggle="dropdown" aria-expanded="false">
239 クラスグループ
240 <span class="caret"></span>
241 </button>
242 <ul class="dropdown-menu" role="menu" aria-labelledby="eobject_classGroupCode" id="eobject_classGroups">
243 <li role="presentation"><a role="menuitem">センサー関連機器</a></li>
244 <li role="presentation"><a role="menuitem">空調関連機器</a></li>
245 </ul>
246 </div>
247 </div>
248 <div class="control-group" for="celltype[classCode]">
249 <label class="control-label" for="eobject_classCode">クラス</label>
250 <div class="dropdown">
251 <button class="btn btn-default dropdown-toggle" type="button" id="eobject_classCode" data-toggle="dropdown" aria-expanded="false">
252 クラス
253 <span class="caret"></span>
254 </button>
255 <ul class="dropdown-menu" role="menu" aria-labelledby="eobject_classCode" id="eobject_classs">
256 <li role="presentation"><a role="menuitem">ガス漏れセンサ</a></li>
257 <li role="presentation"><a role="menuitem">防犯センサ</a></li>
258 <li role="presentation"><a role="menuitem">非常ボタン</a></li>
259 </ul>
260 </div>
261 </div>
262 <div class="control-group" for="celltype[instanceCode]">
263 <label class="control-label" for="eobject_instanceCode">インスタンス</label>
264 <div class="controls">
265 <input class="form-control" id="eobject_instanceCode" name="celltype[instanceCode]" placeholder="1～127" type="text" onchange="WebMrbc.Views.EObjectModalView.onChangeInstanceCode(this)">
266 </div>
267 </div>
268 </form>
269 </div>
270 </div>
271 </div>
272 <div class="modal-footer">
273 <button aria-hidden="true" class="btn btn-default" onclick="WebMrbc.Views.EObjectModalView.onCancel(this)"><i class="glyphicon glyphicon-remove"></i>やめる</button>
274 <button class="btn btn-primary" id="eobject-modal-ok-button" onclick="WebMrbc.Views.EObjectModalView.onOk(this)"><i class="glyphicon glyphicon-ok"></i>決めた！</button>
275 </div>
276 </div>
277 </div>
278
279 <script id="class-selector-template" type="text/template">
280 <div class='item' id="%identifier%">
281 <div class='item-info'>
282 <div class='name'>
283 %identifier%
284 </div>
285 <div class='attributes'>
286 %attribute%
287 </div>
288 <a class='modify-button'>
289 <i class='glyphicon glyphicon-cog'></i>
290 </a>
291 <span class="topright-buttons">
292 <a class='selected-mark'>
293 <i class='glyphicon glyphicon-chevron-right'></i>
294 </a>
295 <a class='remove-button'>
296 <i class='glyphicon glyphicon-remove'></i>
297 </a>
298 </span>
299 </div>
300 <a class='celltype'>
301 <img src='%img%'>
302 </a>
303 </div>
304 </script>
305 </div>
306
307 <div id="message-modal" class="modal fade">
308 <div class="modal-dialog">
309 <div class="modal-content">
310 <div class="modal-body">
311 <div id="message-text">実行ファイルを転送しています。</div>
312 </div>
313 <div class="modal-footer" style="text-align: right;">
314 <button id="message-button" class="btn btn-default" hidden onclick="WebMrbc.Views.MainMenuView.onMessageClose()">OK</button>
315 </div>
316 </div>
317 </div>
318 </div>
319
320 <div id="information-modal" class="modal fade">
321 <div class="modal-dialog">
322 <div class="modal-content">
323 <div class="modal-body">
324 <div class="panel panel-default">
325 <div class="panel-heading">
326 ソフトウェア情報
327 </div>
328 <div id="software-list" class="list-group">
329 </div>
330 </div>
331 <div style="text-align: right;">
332 <button id="information-button" class="btn btn-default" hidden onclick="WebMrbc.Views.MainMenuView.onInformationClose()">OK</button>
333 </div>
334 </div>
335 <div class="modal-footer" style="text-align: right;">
336 <a href="http://www.core-s.co.jp" target="_blank" style="text-align: center">
337 <p class="list-group-item-text"><img src="img/core-s.svg">コアーズ株式会社</p>
338 </a>
339 </div>
340 </div>
341 </div>
342 </div>
343
344 <xml id="toolbox" style="display: none">
345 <category name="Logic" colour="210">
346 <block type="controls_if"></block>
347 <block type="switch_case_number"></block>
348 <block type="switch_case_text"></block>
349 <block type="logic_compare"></block>
350 <block type="logic_operation"></block>
351 <block type="logic_negate"></block>
352 <block type="logic_boolean"></block>
353 <block type="logic_null"></block>
354 <block type="logic_ternary"></block>
355 </category>
356 <category name="Loops" colour="120">
357 <block type="controls_repeat_ext">
358 <value name="TIMES">
359 <shadow type="math_number">
360 <field name="NUM">10</field>
361 </shadow>
362 </value>
363 </block>
364 <block type="controls_whileUntil"></block>
365 <block type="controls_for">
366 <value name="FROM">
367 <shadow type="math_number">
368 <field name="NUM">1</field>
369 </shadow>
370 </value>
371 <value name="TO">
372 <shadow type="math_number">
373 <field name="NUM">10</field>
374 </shadow>
375 </value>
376 <value name="BY">
377 <shadow type="math_number">
378 <field name="NUM">1</field>
379 </shadow>
380 </value>
381 </block>
382 <block type="controls_forEach"></block>
383 <block type="controls_flow_statements"></block>
384 </category>
385 <category name="Math" colour="230">
386 <block type="math_number"></block>
387 <block type="math_arithmetic">
388 <value name="A">
389 <shadow type="math_number">
390 <field name="NUM">1</field>
391 </shadow>
392 </value>
393 <value name="B">
394 <shadow type="math_number">
395 <field name="NUM">1</field>
396 </shadow>
397 </value>
398 </block>
399 <block type="math_single">
400 <value name="NUM">
401 <shadow type="math_number">
402 <field name="NUM">9</field>
403 </shadow>
404 </value>
405 </block>
406 <block type="math_trig">
407 <value name="NUM">
408 <shadow type="math_number">
409 <field name="NUM">45</field>
410 </shadow>
411 </value>
412 </block>
413 <block type="math_constant"></block>
414 <block type="math_number_property">
415 <value name="NUMBER_TO_CHECK">
416 <shadow type="math_number">
417 <field name="NUM">0</field>
418 </shadow>
419 </value>
420 </block>
421 <block type="math_round">
422 <value name="NUM">
423 <shadow type="math_number">
424 <field name="NUM">3.1</field>
425 </shadow>
426 </value>
427 </block>
428 <block type="math_on_list"></block>
429 <block type="math_modulo">
430 <value name="DIVIDEND">
431 <shadow type="math_number">
432 <field name="NUM">64</field>
433 </shadow>
434 </value>
435 <value name="DIVISOR">
436 <shadow type="math_number">
437 <field name="NUM">10</field>
438 </shadow>
439 </value>
440 </block>
441 <block type="math_constrain">
442 <value name="VALUE">
443 <shadow type="math_number">
444 <field name="NUM">50</field>
445 </shadow>
446 </value>
447 <value name="LOW">
448 <shadow type="math_number">
449 <field name="NUM">1</field>
450 </shadow>
451 </value>
452 <value name="HIGH">
453 <shadow type="math_number">
454 <field name="NUM">100</field>
455 </shadow>
456 </value>
457 </block>
458 <block type="math_random_int">
459 <value name="FROM">
460 <shadow type="math_number">
461 <field name="NUM">1</field>
462 </shadow>
463 </value>
464 <value name="TO">
465 <shadow type="math_number">
466 <field name="NUM">100</field>
467 </shadow>
468 </value>
469 </block>
470 <block type="math_random_float"></block>
471 </category>
472 <category name="Text" colour="160">
473 <block type="text"></block>
474 <block type="text_join"></block>
475 <block type="text_append">
476 <value name="TEXT">
477 <shadow type="text"></shadow>
478 </value>
479 </block>
480 <block type="text_length">
481 <value name="VALUE">
482 <shadow type="text">
483 <field name="TEXT">abc</field>
484 </shadow>
485 </value>
486 </block>
487 <block type="text_isEmpty">
488 <value name="VALUE">
489 <shadow type="text">
490 <field name="TEXT"></field>
491 </shadow>
492 </value>
493 </block>
494 <block type="text_indexOf">
495 <value name="VALUE">
496 <block type="variables_get">
497 <field name="VAR">text</field>
498 </block>
499 </value>
500 <value name="FIND">
501 <shadow type="text">
502 <field name="TEXT">abc</field>
503 </shadow>
504 </value>
505 </block>
506 <block type="text_charAt">
507 <value name="VALUE">
508 <block type="variables_get">
509 <field name="VAR">text</field>
510 </block>
511 </value>
512 </block>
513 <block type="text_getSubstring">
514 <value name="STRING">
515 <block type="variables_get">
516 <field name="VAR">text</field>
517 </block>
518 </value>
519 </block>
520 <block type="text_changeCase">
521 <value name="TEXT">
522 <shadow type="text">
523 <field name="TEXT">abc</field>
524 </shadow>
525 </value>
526 </block>
527 <block type="text_trim">
528 <value name="TEXT">
529 <shadow type="text">
530 <field name="TEXT">abc</field>
531 </shadow>
532 </value>
533 </block>
534 <block type="text_print">
535 <value name="TEXT">
536 <shadow type="text">
537 <field name="TEXT">abc</field>
538 </shadow>
539 </value>
540 </block>
541 <block type="text_prompt_ext">
542 <value name="TEXT">
543 <shadow type="text">
544 <field name="TEXT">abc</field>
545 </shadow>
546 </value>
547 </block>
548 </category>
549 <category name="Lists" colour="260">
550 <block type="lists_create_with">
551 <mutation items="0"></mutation>
552 </block>
553 <block type="lists_create_with"></block>
554 <block type="lists_repeat">
555 <value name="NUM">
556 <shadow type="math_number">
557 <field name="NUM">5</field>
558 </shadow>
559 </value>
560 </block>
561 <block type="lists_length"></block>
562 <block type="lists_isEmpty"></block>
563 <block type="lists_indexOf">
564 <value name="VALUE">
565 <block type="variables_get">
566 <field name="VAR">list</field>
567 </block>
568 </value>
569 </block>
570 <block type="lists_getIndex">
571 <value name="VALUE">
572 <block type="variables_get">
573 <field name="VAR">list</field>
574 </block>
575 </value>
576 </block>
577 <block type="lists_setIndex">
578 <value name="LIST">
579 <block type="variables_get">
580 <field name="VAR">list</field>
581 </block>
582 </value>
583 </block>
584 <block type="lists_getSublist">
585 <value name="LIST">
586 <block type="variables_get">
587 <field name="VAR">list</field>
588 </block>
589 </value>
590 </block>
591 <block type="lists_split">
592 <value name="DELIM">
593 <shadow type="text">
594 <field name="TEXT">,</field>
595 </shadow>
596 </value>
597 </block>
598 <block type="lists_sort"></block>
599 </category>
600 <category name="Color" colour="20">
601 <block type="colour_picker"></block>
602 <block type="colour_random"></block>
603 <block type="colour_rgb">
604 <value name="RED">
605 <shadow type="math_number">
606 <field name="NUM">100</field>
607 </shadow>
608 </value>
609 <value name="GREEN">
610 <shadow type="math_number">
611 <field name="NUM">50</field>
612 </shadow>
613 </value>
614 <value name="BLUE">
615 <shadow type="math_number">
616 <field name="NUM">0</field>
617 </shadow>
618 </value>
619 </block>
620 <block type="colour_blend">
621 <value name="COLOUR1">
622 <shadow type="colour_picker">
623 <field name="COLOUR">#ff0000</field>
624 </shadow>
625 </value>
626 <value name="COLOUR2">
627 <shadow type="colour_picker">
628 <field name="COLOUR">#3333ff</field>
629 </shadow>
630 </value>
631 <value name="RATIO">
632 <shadow type="math_number">
633 <field name="NUM">0.5</field>
634 </shadow>
635 </value>
636 </block>
637 </category>
638 <sep></sep>
639 <category name="Variables" custom="VARIABLE" colour="330"></category>
640 <category name="Functions" custom="PROCEDURE" colour="290"></category>
641 </xml>
642</body>
643</html>
Note: See TracBrowser for help on using the repository browser.