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

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

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