mirror of
https://github.com/sensebox/blockly-app
synced 2025-04-19 16:07:33 +02:00
Merge branch 'development_yannick'
This commit is contained in:
commit
d9a4c2d8f4
3 changed files with 94 additions and 80 deletions
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
|
.blocks_panel_large, .blocks_panel_small, #content_blocks, .content_xml_large, .content_xml_small {
|
||||||
|
|
@ -89,91 +89,92 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
|
<div id="blocklyview">
|
||||||
<!-- Toolbox visibility button -->
|
<!-- Toolbox visibility button -->
|
||||||
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off hidden" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
|
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
|
||||||
<!-- Arduino IDE action buttons -->
|
<!-- Arduino IDE action buttons -->
|
||||||
<div id="ide_buttons_wrapper" class="hidden">
|
<div id="ide_buttons_wrapper" class="hidden">
|
||||||
<div id="buttons_offline">
|
<div id="buttons_offline">
|
||||||
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
|
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
|
||||||
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
|
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
|
||||||
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
|
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="buttons_online" class="hidden">
|
<div id="buttons_online" class="hidden">
|
||||||
<a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
|
<a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
|
||||||
<a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
|
<a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader" style="display:none">
|
<div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader hidden">
|
||||||
<div class="spinner-layer spinner-orange">
|
<div class="spinner-layer spinner-orange">
|
||||||
<div class="circle-clipper left">
|
<div class="circle-clipper left">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="gap-patch">
|
</div><div class="gap-patch">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
</div><div class="circle-clipper right">
|
</div><div class="circle-clipper right">
|
||||||
<div class="circle"></div>
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spinner-layer spinner-dark-teal">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spinner-layer spinner-yellow">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spinner-layer spinner-light-teal">
|
||||||
|
<div class="circle-clipper left">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="gap-patch">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div><div class="circle-clipper right">
|
||||||
|
<div class="circle"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="spinner-layer spinner-dark-teal">
|
</div>
|
||||||
<div class="circle-clipper left">
|
<!-- Blockly Panel -->
|
||||||
<div class="circle"></div>
|
<div style="padding: 0">
|
||||||
</div><div class="gap-patch">
|
<div id="blocks_panel" class="content blocks_panel_large">
|
||||||
<div class="circle"></div>
|
<div id="content_blocks" class="content z-depth-1"></div>
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spinner-layer spinner-yellow">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spinner-layer spinner-light-teal">
|
|
||||||
<div class="circle-clipper left">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="gap-patch">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div><div class="circle-clipper right">
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Blockly Panel -->
|
<div id="codeview" class="hidden">
|
||||||
<div style="padding: 0">
|
<ul class="collapsible z-depth-1" data-collapsible="accordion">
|
||||||
<div id="blocks_panel" class="content blocks_panel_large">
|
<li>
|
||||||
<div id="content_blocks" class="content z-depth-1"></div>
|
<div class="collapsible-header active">
|
||||||
</div>
|
<span class="collapsible_logo">{ }</span>
|
||||||
|
<span class="translatable_arduinoSourceCode">Arduino Source Code</span>
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header" id="xml_collapsible_header">
|
||||||
|
<span class="collapsible_logo">< ></span>
|
||||||
|
<span class="translatable_blocksXml">Blocks XML</span>
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
|
||||||
|
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
|
||||||
|
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<ul class="collapsible z-depth-1" data-collapsible="accordion">
|
|
||||||
<li>
|
|
||||||
<div class="collapsible-header active">
|
|
||||||
<span class="collapsible_logo">{ }</span>
|
|
||||||
<span class="translatable_arduinoSourceCode">Arduino Source Code</span>
|
|
||||||
</div>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="collapsible-header" id="xml_collapsible_header">
|
|
||||||
<span class="collapsible_logo">< ></span>
|
|
||||||
<span class="translatable_blocksXml">Blocks XML</span>
|
|
||||||
</div>
|
|
||||||
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
|
|
||||||
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
|
|
||||||
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- IDE Output content -->
|
<!-- IDE Output content -->
|
||||||
<div class="ide_output_wrapper hidden">
|
<div class="ide_output_wrapper hidden">
|
||||||
<ul class="collapsible ide_output_collapsible" data-collapsible="expandable">
|
<ul class="collapsible ide_output_collapsible" data-collapsible="expandable">
|
||||||
|
|
@ -191,7 +192,7 @@
|
||||||
|
|
||||||
<!-- Settings: Displayed as a Materialize Modal -->
|
<!-- Settings: Displayed as a Materialize Modal -->
|
||||||
<div id="settings_dialog" class="modal modal-fixed-footer hidden">
|
<div id="settings_dialog" class="modal modal-fixed-footer hidden">
|
||||||
<div class="modal-content hidden">
|
<div class="modal-content">
|
||||||
<h4><span class="translatable_settings">Settings</span></h4>
|
<h4><span class="translatable_settings">Settings</span></h4>
|
||||||
<div class="modal_section online">
|
<div class="modal_section online">
|
||||||
<label><span class="translatable_compilerLocation">Compiler Location</span>:</label>
|
<label><span class="translatable_compilerLocation">Compiler Location</span>:</label>
|
||||||
|
|
@ -328,11 +329,15 @@
|
||||||
data: code,
|
data: code,
|
||||||
}, event.origin)
|
}, event.origin)
|
||||||
break;
|
break;
|
||||||
|
case 'toggleView':
|
||||||
|
document.getElementById('blocklyview').classList.toggle('hidden');
|
||||||
|
document.querySelector('.blocklyToolboxDiv').classList.toggle('hidden');
|
||||||
|
document.getElementById('codeview').classList.toggle('hidden');
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
console.warn(`postMessage type ${event.data} not implemented`)
|
console.warn(`postMessage type ${event.data} not implemented`)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,13 @@
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-fab top right edge>
|
<ion-fab top right edge style="right: 4vh">
|
||||||
<button ion-fab large (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
|
<button ion-fab large (click)="launchOtaWizard()" color="light"><ion-icon name="wifi"></ion-icon></button>
|
||||||
</ion-fab>
|
</ion-fab>
|
||||||
|
|
||||||
|
<ion-fab top right edge style="right: calc(4vh + 60px)">
|
||||||
|
<button ion-fab mini (click)="toggleView();" color ="light"><ion-icon name="code"></ion-icon></button>
|
||||||
|
</ion-fab>
|
||||||
|
|
||||||
<iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>
|
<iframe #blocklyFrame scrolling="no" src='assets/blockly.html'></iframe>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,10 @@ export class BlocklyPage {
|
||||||
launchOtaWizard () {
|
launchOtaWizard () {
|
||||||
this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
|
this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleView () {
|
||||||
|
this.blocklyFrame.nativeElement.contentWindow.postMessage('toggleView', '*')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IframePostMessageEvent extends MessageEvent {
|
interface IframePostMessageEvent extends MessageEvent {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue