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

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

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