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