diff --git a/css/style.css b/css/style.css
index 896051bfd63d9af0a0e5cc4392efe925b45949b8..030ae096122aa9dadd0cb3ea8d76ba0075828f56 100644
--- a/css/style.css
+++ b/css/style.css
@@ -23,6 +23,20 @@ body {
position : relative ;
}
+#program.align-bottom {
+ font-size : 0px ;
+}
+
+#program.align-bottom > * {
+ float : none ;
+ display : inline-block ;
+ font-size : 14px ;
+}
+
+#program.align-bottom > *:last-child {
+ vertical-align : bottom ;
+}
+
.vcenter {
display : inline-block ;
vertical-align : middle ;
@@ -33,8 +47,10 @@ body {
margin-bottom : 0 ;
}
-script {
- display : block ;
+#draw-area {
+ background : #ffffff ;
+ width : 100% ;
+ height : auto ;
}
@media(max-width:767px){
@@ -69,8 +85,6 @@ script {
}
}
-
-
.Map {
text-align : center ;
padding : 5px;
@@ -452,17 +466,23 @@ script {
min-height : 35em ;
}
-.pgm > .panel-heading {
+.pgm > .panel-heading,
+#draw .panel-heading {
padding-top : 9px ;
padding-bottom : 8px ;
overflow : hidden ;
}
-#pgm-title {
+#pgm-title,
+#draw-title {
margin-top : 9px ;
margin-right : 10px ;
}
+#draw .panel-heading .btn-group {
+ margin-left : 10px ;
+}
+
#phone-toolbar {
position : absolute ;
top : 0 ;
@@ -710,3 +730,6 @@ input.add-target {
width: 100%;
}
}
+
+
+
diff --git a/explorer.php b/explorer.php
index 39665ceea63dd068c432eac2c5cf5d30419a3fde..7fd13d6ff77e8239e399183725ea88554fd140a6 100644
--- a/explorer.php
+++ b/explorer.php
@@ -92,7 +92,7 @@
</div>
<!--}}}-->
- <div class="container-fluid">
+ <div class="container-fluid" id="panel-layout">
<!--{{{ help-->
<div class="panel panel-default collapse" id="help-panel">
<!--<div class="panel panel-default" id="help-panel">-->
@@ -347,7 +347,7 @@
</div>
</div>
<!--}}}-->
- <div class="row">
+ <div class="row" id="map">
<!--{{{ map -->
<div class="col-sm-8 col-md-9">
<div class="panel panel-default">
@@ -481,9 +481,64 @@
</div>
<!--}}}-->
</div>
- <!--{{{ programming interface-->
- <div class="row hidden" id="progress">
+ <div class="row" id="draw">
+ <!--{{{ draw area-->
<div class="col-xs-12">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <h3 class="panel-title pull-left" id="draw-title">
+ <a href="#draw-container" data-toggle="collapse">Carte</a>
+ </h3>
+ <div class="btn-group pull-right" role="group">
+ <button
+ class="btn btn-default"
+ type="button"
+ id="draw-stamp"
+ >
+ <span class="glyphicon glyphicon-tint"></span>
+ </button>
+ </div>
+ <div class="btn-group pull-right" role="group">
+ <button
+ class="btn btn-default"
+ type="button"
+ id="draw-left"
+ >
+ <span class="glyphicon glyphicon-triangle-left"></span>
+ </button>
+ <button
+ class="btn btn-default"
+ type="button"
+ id="draw-up"
+ >
+ <span class="glyphicon glyphicon-triangle-top"></span>
+ </button>
+ <button
+ class="btn btn-default"
+ type="button"
+ id="draw-down"
+ >
+ <span class="glyphicon glyphicon-triangle-bottom"></span>
+ </button>
+ <button
+ class="btn btn-default"
+ type="button"
+ id="draw-right"
+ >
+ <span class="glyphicon glyphicon-triangle-right"></span>
+ </button>
+ </div>
+ </div>
+ <div class="panel-body collapse" id=draw-container>
+ <canvas id="draw-area" width=1920 height=1200></canvas>
+ </div>
+ </div>
+ </div>
+ <!--}}}-->
+ </div>
+ <div class="row row-offcanvas row-offcanvas-left" id="program">
+ <!--{{{ programming indicators-->
+ <div class="col-xs-12 hidden" id="progress">
<div class="progress">
<div
class="progress-bar progress-bar-striped active"
@@ -494,9 +549,7 @@
</div>
</div>
</div>
- </div>
- <div class="row hidden" id="log-panel">
- <div class="col-xs-12">
+ <div class="col-xs-12 hidden" id="log-panel">
<div class="alert alert-info" role="alert">
<button type="button" class="close" id="log-close">
<span aria-hidden="true">×</span>
@@ -504,9 +557,7 @@
<div id="log-msg"></div>
</div>
</div>
- </div>
- <div class="row hidden" id="error-panel">
- <div class="col-xs-12">
+ <div class="col-xs-12 hidden" id="error-panel">
<div class="alert alert-danger alert-dismissible" role='alert'>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<button type="button" class="close" id="error-close">
@@ -515,8 +566,7 @@
<span id="error-msg"></span>
</div>
</div>
- </div>
- <div class="row row-offcanvas row-offcanvas-left" id="program">
+ <!--}}}-->
<!--{{{ commands-->
<div class="col-xs-12 col-sm-5 col-md-4 sidebar-offcanvas" id="library">
<div class="panel panel-default" id="library-panel">
@@ -551,19 +601,19 @@
<!--{{{ movement-->
<ul id="mv_cmds" class="list-group tab-pane fade library-group in active">
<li class="list-group-item pgm-command pgm-type-direction cmd-dir-up">
- <span class="glyphicon glyphicon-circle-arrow-up"></span>
+ <span class="glyphicon glyphicon-chevron-up"></span>
haut
</li>
<li class="list-group-item pgm-command pgm-type-direction cmd-dir-left">
- <span class="glyphicon glyphicon-circle-arrow-left"></span>
+ <span class="glyphicon glyphicon-chevron-left"></span>
gauche
</li>
<li class="list-group-item pgm-command pgm-type-direction cmd-dir-down">
- <span class="glyphicon glyphicon-circle-arrow-down"></span>
+ <span class="glyphicon glyphicon-chevron-down"></span>
bas
</li>
<li class="list-group-item pgm-command pgm-type-direction cmd-dir-right">
- <span class="glyphicon glyphicon-circle-arrow-right"></span>
+ <span class="glyphicon glyphicon-chevron-right"></span>
droite
</li>
<li class="list-group-item pgm-command pgm-type-color cmd-col-red">
@@ -617,25 +667,25 @@
<li class="list-group-item pgm-command pgm-type-void cmd-var-local-set">
<span class="glyphicon glyphicon-map-marker"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
←
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="valeur" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="valeur" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-read cmd-var-local-read">
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon glyphicon-search"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-void cmd-var-local-delete-var">
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon glyphicon-trash"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-void cmd-var-local-delete-tile">
@@ -651,25 +701,25 @@
<li class="list-group-item pgm-command pgm-type-void cmd-var-global-set">
<span class="glyphicon glyphicon-globe"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
←
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="valeur" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="valeur" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-read cmd-var-global-read">
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-search"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-void cmd-var-global-delete-var">
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-trash"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-void cmd-var-global-delete-all">
@@ -732,7 +782,7 @@
<div class="panel-heading">
Répéter
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
fois
</div>
@@ -748,29 +798,29 @@
<ul id="test_cmds" class="list-group tab-pane fade library-group">
<li class="list-group-item pgm-command pgm-type-bool cmd-test-equal">
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="valeur" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="valeur" disabled></input> </li>
</ul>
=
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="valeur" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="valeur" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-bool cmd-test-gt">
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
>
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-bool cmd-test-ge">
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
≥
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-bool cmd-test-not">
@@ -800,14 +850,14 @@
<li class="list-group-item pgm-command pgm-type-bool cmd-test-var-exists-local">
<span class="glyphicon glyphicon-map-marker"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
existe
</li>
<li class="list-group-item pgm-command pgm-type-bool cmd-test-var-exists-global">
<span class="glyphicon glyphicon-globe"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="variable" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="variable" disabled></input> </li>
</ul>
existe
</li>
@@ -830,44 +880,44 @@
<li class="list-group-item pgm-command pgm-type-int cmd-arith-plus">
(
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
+
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
)
</li>
<li class="list-group-item pgm-command pgm-type-int cmd-arith-minus">
(
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
-
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
)
</li>
<li class="list-group-item pgm-command pgm-type-int cmd-arith-mult">
(
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
×
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
)
</li>
<li class="list-group-item pgm-command pgm-type-int cmd-arith-div">
(
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
÷
<ul class="pgm-recv pgm-recv-int">
- <li class="field"><input size=8 placeholder="entier" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="entier" disabled></input> </li>
</ul>
)
</li>
@@ -878,16 +928,16 @@
<li class="list-group-item pgm-command pgm-type-str cmd-str-concat">
<span class="glyphicon glyphicon-paperclip"></span>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="debut" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="debut" disabled></input> </li>
</ul>
<ul class="pgm-recv pgm-recv-str">
- <li class="field"><input size=8 placeholder="fin" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=8 placeholder="fin" disabled></input> </li>
</ul>
</li>
<li class="list-group-item pgm-command pgm-type-void cmd-str-log">
<span class="glyphicon glyphicon-bullhorn"></span>
<ul class="pgm-recv pgm-recv-msg">
- <li class="field"><input size=20 placeholder="message" disabled></input> </li>
+ <li class="field"><input autocomplete=off size=20 placeholder="message" disabled></input> </li>
</ul>
</li>
</ul>
@@ -965,8 +1015,8 @@
</div>
<!--}}}-->
</div>
- <!--}}}-->
- <div class="row">
+ <div class="row" id="extra">
+ <!--{{{ extra-->
<?php
// get the XML planet descriptor
if(file_exists('extra.php')) {
@@ -975,6 +1025,7 @@
print ob_get_clean() ;
}
?>
+ <!--}}}-->
</div>
</div>
<!--{{{ modals-->
@@ -1147,6 +1198,7 @@
<script type="text/javascript" src="<?php echo $rootpath?>/js/pgm_compiler.js"></script>
<script type="text/javascript" src="<?php echo $rootpath?>/js/notes.js"></script>
<script type="text/javascript" src="<?php echo $rootpath?>/js/explorer.js"></script>
+ <script type="text/javascript" src="<?php echo $rootpath?>/js/draw.js"></script>
<div class="visible-xs-block" id="mobile-tester"></div>
</body>
</html>
diff --git a/js/pgm_compiler.js b/js/pgm_compiler.js
index 4c7afe1f1bb03e77250f97bc918de55378bf253c..90e12676553351cedf13fbde625387e7c9ebb6e7 100644
--- a/js/pgm_compiler.js
+++ b/js/pgm_compiler.js
@@ -29,7 +29,8 @@ function block_compile(el) {
return res ;
}
-function get_integer(str, error_target) {
+function get_integer(data, error_target) {
+ var str = typeof data === 'string' ? data : '' + data ;
var i = parseInt(str) ;
if(!str.match(/^-?\d+$/) || isNaN(i)) {
return pgm_selector_error(
@@ -109,6 +110,8 @@ function receiver_compile(el) {
var err_target = selector_path_to_root(target.children[0]) ;
if(type === 'str') {
rec_compile = '"' + get_str(target.children[0].value, err_target) + '"' ;
+ } else if(type === 'int') {
+ rec_compile = get_integer(target.children[0].value, err_target)
} else {
rec_compile = '"' + get_msg(target.children[0].value, err_target) + '"' ;
}
@@ -118,7 +121,9 @@ function receiver_compile(el) {
}
//handle runtime type errors
var err_target = '"' + selector_path_to_root(target) + '"' ;
- if(type === 'int') {
+ if(type === 'str') {
+ return 'get_str(' + rec_compile + ',' + err_target + ')' ;
+ } else if(type === 'int') {
return 'get_integer(' + rec_compile + ',' + err_target + ')' ;
} else if (type === 'bool') {
return 'get_boolean(' + rec_compile + ',' + err_target + ')' ;
@@ -547,10 +552,23 @@ function block_if_else(el) {
pgm_elements['cmd-block-if-else'] = block_if_else ;
+var while_index = 0 ;
+
function block_while(el) {
var test = receiver_compile(el.children[0].children[0]) ;
var block = block_compile(el.children[1]) ;
- return 'while(' + test + '){' + block + '}' ;
+ var err_target = '"' + selector_path_to_root(el) + '"' ;
+ var counter_var = 'counter_' + while_index ;
+ ++ while_index ;
+ var code = '' ;
+ code += 'var ' + counter_var + ' = 0 ;' ;
+ code += 'for(;' + test + ';++' + counter_var + '){ ' ;
+ code += ' if( ' + counter_var + ' > 10000) {' ;
+ code += ' pgm_selector_error( ' + err_target + ', "cette boucle fait plus de 10000 itérations ") ;'
+ code += ' } '
+ code += block ;
+ code += '}' ;
+ return code ;
}
pgm_elements['cmd-block-while'] = block_while ;
@@ -712,8 +730,10 @@ function hide_progress() {
}
function run() {
+ Pgm.save() ;
pgm_clear_error() ;
pgm_clear_log() ;
+ while_index = 0 ;
var el = document.getElementById("pgm-main") ;
show_progress() ;
//timeout to allow the browser to update and show the bar
diff --git a/js/pgm_construction.js b/js/pgm_construction.js
index 2135bcbab729eae496370a8e42ad6c88247b42e9..8b6607d64d4be87108c26b8f6cec6bc39d3e1dea 100644
--- a/js/pgm_construction.js
+++ b/js/pgm_construction.js
@@ -12,6 +12,7 @@
var library = document.getElementById('library') ;
var library_panel = document.getElementById('library-panel') ;
var pgm = document.getElementById('pgm') ;
+var pgm_container = document.getElementById('program') ;
var main = document.getElementById('pgm-main') ;
var phone_toolbar = document.getElementById('phone-toolbar') ;
@@ -86,6 +87,8 @@ function local_save(name) {
localStorage.setItem(prefix, main.innerHTML) ;
}
+Pgm.save = local_save ;
+
window.addEventListener('beforeunload', local_save) ;
/* callback for the save program modal */
@@ -504,9 +507,18 @@ function activate_sortables_callback(evt) {
*/
function library_fixed_switch() {
- if(pgm.getBoundingClientRect().top < 10) {
- addClass(library_panel, 'fixed-top') ;
+ pgm_rect = pgm.getBoundingClientRect() ;
+ lib_rect = library_panel.getBoundingClientRect() ;
+ if(pgm_rect.top < 10) {
+ if(pgm_rect.bottom > lib_rect.height + 10) {
+ addClass(library_panel, 'fixed-top') ;
+ removeClass(pgm_container, 'align-bottom') ;
+ } else {
+ addClass(pgm_container, 'align-bottom') ;
+ removeClass(library_panel, 'fixed-top') ;
+ }
} else {
+ removeClass(pgm_container, 'align-bottom') ;
removeClass(library_panel, 'fixed-top') ;
}
}