mirror of
https://github.com/sensebox/blockly-app
synced 2025-04-19 16:07:33 +02:00
blockly page init
This commit is contained in:
yhallowiegeht
parent
19d14d392e
commit
d6d4d77c34
8 changed files with 331 additions and 27 deletions
|
|
@ -5,6 +5,10 @@
|
|||
- please fork this repository to develop your apps
|
||||
|
||||
### Prequesites
|
||||
- Git Installation
|
||||
- use
|
||||
`git clone https://github.com/AppDevelopmentAtsenseBox/openSenseApp --recursive`
|
||||
because the ardublockly submodule is used to implememt blockly
|
||||
|
||||
- Node + NPM (nvm)
|
||||
- https://www.npmjs.com/get-npm
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { StatusBar } from '@ionic-native/status-bar';
|
|||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
|
||||
import { HomePage } from '../pages/home/home';
|
||||
import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard';
|
||||
import { BlocklyPage } from '../pages/Blockly/blockly';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'app.html'
|
||||
|
|
@ -13,7 +13,7 @@ export class openSenseApp {
|
|||
|
||||
@ViewChild(Nav) nav: Nav;
|
||||
|
||||
rootPage:any = OtaWizardPage; // TODO: for development, revert to HomePage
|
||||
rootPage:any = BlocklyPage; // TODO: for development, revert to HomePage
|
||||
|
||||
pages: Array<{title: string, component: any}> = [
|
||||
{ title: 'Home', component: HomePage },
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { ApiProvider } from '../providers/api/api';
|
|||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard';
|
||||
import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
|
||||
import { BlocklyPage} from '../pages/Blockly/blockly'
|
||||
import { BlocklyPageModule} from '../pages/Blockly/blockly.module'
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -20,13 +22,15 @@ import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
|
|||
HttpClientModule,
|
||||
BrowserModule,
|
||||
OtaWizardPageModule,
|
||||
IonicModule.forRoot(openSenseApp)
|
||||
IonicModule.forRoot(openSenseApp),
|
||||
BlocklyPageModule
|
||||
],
|
||||
bootstrap: [IonicApp],
|
||||
entryComponents: [
|
||||
openSenseApp,
|
||||
OtaWizardPage,
|
||||
HomePage
|
||||
HomePage,
|
||||
BlocklyPage
|
||||
],
|
||||
providers: [
|
||||
StatusBar,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,20 @@
|
|||
|
||||
<link href="build/main.css" rel="stylesheet">
|
||||
|
||||
<!-- Materialize, Prettify, and Ardublockly CSS -->
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/materialize/materialize.css" media="screen,projection">
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/prettify/arduino.css">
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/ardublockly.css" media="screen,projection">
|
||||
|
||||
<!-- Ardublockly - These three files contain the compress version-->
|
||||
<script src="assets/blockly/blockly/blockly_compressed.js"></script>
|
||||
<script src="assets/blockly/blockly/blocks_compressed.js"></script>
|
||||
<script src="assets/blockly/blockly/arduino_compressed.js"></script>
|
||||
|
||||
<!-- Default language js files, user selection appended to head on load -->
|
||||
<script src="assets/blockly/blockly//msg/js/en.js"></script>
|
||||
<script src="assets/blockly/ardublockly/msg/en.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -45,5 +59,27 @@
|
|||
<!-- The main bundle js is generated during the build process -->
|
||||
<script src="build/main.js"></script>
|
||||
|
||||
<!-- Desktop version of Ardublockly JS, needs to be loaded first. -->
|
||||
<script src="assets/blockly/ardublockly/ardublockly_desktop.js"></script>
|
||||
<!-- jQuery and Materialize JS -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/jquery-2.1.3.min.js"></script>
|
||||
<script src="assets/blockly/ardublockly/materialize/materialize.js"></script>
|
||||
<!-- FileSaver JS -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/FileSaver.min.js"></script>
|
||||
<!-- JS Diff -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/diff.js"></script>
|
||||
<!-- Prettify JS -->
|
||||
<script src="assets/blockly/ardublockly/prettify/prettify.js"></script>
|
||||
<!-- Ardublockly app -->
|
||||
<script src="assets/blockly/ardublockly/ardublocklyserver_ajax.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_lang.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_design.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_toolbox.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_blockly.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly.js"></script>
|
||||
<!-- copy to clipboard stuff -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/clipboard.min.js"></script>
|
||||
<script src="assets/blockly/ardublockly/sensebox_extensions.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,25 +5,18 @@
|
|||
Ionic pages and navigation.
|
||||
-->
|
||||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-navbar class="nav-fixed sensebox_green">
|
||||
<button ion-button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Blockly</ion-title>
|
||||
<ion-title>Blockly for SenseBox</ion-title>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
|
||||
<!-- Real floating action button, fixed. It will not scroll with the content -->
|
||||
<ion-fab top right edge>
|
||||
<!-- Real floating action button, fixed. It will not scroll with the content -->
|
||||
<ion-fab top right edge>
|
||||
<button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
|
||||
|
||||
</ion-fab>
|
||||
<div>
|
||||
Blockly should be displayed here !
|
||||
</div>
|
||||
|
||||
<div id="blocklyDiv" style="height: 93%; margin-top: 50px;"></div>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { BlocklyPage } from './blockly';
|
|||
BlocklyPage,
|
||||
],
|
||||
imports: [
|
||||
IonicPageModule.forChild(BlocklyPage),
|
||||
IonicPageModule.forChild(BlocklyPage)
|
||||
],
|
||||
})
|
||||
export class BlocklyPageModule {}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
page-blockly {
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,288 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IonicPage, NavController, NavParams } from 'ionic-angular';
|
||||
import { OtaWizardPage } from '../ota-wizard/ota-wizard';
|
||||
|
||||
/**
|
||||
* Generated class for the SenseBoxPage page.
|
||||
*
|
||||
* See https://ionicframework.com/docs/components/#navigation for more info on
|
||||
* Ionic pages and navigation.
|
||||
*/
|
||||
declare var Blockly: any;
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
selector: 'page-blockly',
|
||||
templateUrl: 'blockly.html',
|
||||
})
|
||||
export class BlocklyPage {
|
||||
export class BlocklyPage implements OnInit{
|
||||
|
||||
public toolbox:string =
|
||||
'<xml>' +
|
||||
' <sep></sep>' +
|
||||
'<category id="senseBox_Sensor" name="senseBox Sensoren" colour="120">' +
|
||||
' <block type="sensebox_sensor_temp_hum"></block>' +
|
||||
' <block type="sensebox_sensor_lux"></block>' +
|
||||
' <block type="sensebox_sensor_uv"></block>' +
|
||||
' <block type="sensebox_sensor_pressure"></block>' +
|
||||
' <block type="sensebox_sensor_ultrasonic_ranger"></block>' +
|
||||
' <block type="sensebox_sensor_ir_dist"></block>' +
|
||||
' <block type="sensebox_sensor_sound"></block>' +
|
||||
' <block type="sensebox_foto"></block>' +
|
||||
' <block type="sensebox_button"></block>' +
|
||||
' <block type="sensebox_poti"></block>' +
|
||||
' <block type="sensebox_time"></block>' +
|
||||
' </category>' +
|
||||
' <category id="senseBox_output" name="senseBox Ausgabe" colour="120">' +
|
||||
' <block type="sensebox_led"></block>' +
|
||||
' <block type="sensebox_piezo_buzzer"></block>' +
|
||||
' <block type="sensebox_rgb_led">' +
|
||||
' <value name="RED">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="GREEN">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="BLUE">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="sensebox_safe_to_sd"></block>' +
|
||||
' <block type="sensebox_serial_print"></block>' +
|
||||
' <block type="sensebox_shield_wifi"></block>' +
|
||||
' <block type="sensebox_shield_ethernet"></block>'+
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catLogic" name="Logic" colour="210">' +
|
||||
' <block type="controls_if"></block>' +
|
||||
' <block type="logic_compare"></block>' +
|
||||
' <block type="logic_operation"></block>' +
|
||||
' <block type="logic_negate"></block>' +
|
||||
' <block type="logic_boolean"></block>' +
|
||||
' <block type="logic_null"></block>' +
|
||||
' <block type="logic_ternary"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catLoops" name="Loops" colour="10">' +
|
||||
' <block type="controls_repeat_ext">' +
|
||||
' <value name="TIMES">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="controls_whileUntil"></block>' +
|
||||
' <block type="controls_for">' +
|
||||
' <value name="FROM">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="TO">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="BY">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="controls_flow_statements"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catMath" name="Math" colour="230">' +
|
||||
' <block type="math_number"></block>' +
|
||||
' <block type="math_arithmetic"></block>' +
|
||||
' <block type="math_single"></block>' +
|
||||
' <block type="math_trig"></block>' +
|
||||
' <block type="math_constant"></block>' +
|
||||
' <block type="math_number_property"></block>' +
|
||||
' <block type="math_change">' +
|
||||
' <value name="DELTA">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_round"></block>' +
|
||||
' <block type="math_modulo"></block>' +
|
||||
' <block type="math_constrain">' +
|
||||
' <value name="LOW">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="HIGH">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_random_int">' +
|
||||
' <value name="FROM">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="TO">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_random_float"></block>' +
|
||||
' <block type="base_map"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catText" name="Text" colour="160">' +
|
||||
' <block type="text"></block>' +
|
||||
' <block type="text_join"></block>' +
|
||||
' <block type="text_append">' +
|
||||
' <value name="TEXT">' +
|
||||
' <block type="text"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="text_length"></block>' +
|
||||
' <block type="text_isEmpty"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catVariables" name="Variables" colour="330">' +
|
||||
' <block type="variables_get"></block>' +
|
||||
' <block type="variables_set"></block>' +
|
||||
' <block type="variables_set">' +
|
||||
' <value name="VALUE">' +
|
||||
' <block type="variables_set_type"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="variables_set_type"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catFunctions" name="Functions" custom="PROCEDURE" colour="290"></category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catInputOutput" name="Input/Output" colour="250">' +
|
||||
' <block type="io_digitalwrite">' +
|
||||
' <value name="STATE">' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_digitalread"></block>' +
|
||||
' <block type="io_builtin_led">' +
|
||||
' <value name="STATE">' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_analogwrite"></block>' +
|
||||
' <block type="io_analogread"></block>' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' <block type="io_pulsein">' +
|
||||
' <value name="PULSETYPE">' +
|
||||
' <shadow type="io_highlow"></shadow>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_pulsetimeout">' +
|
||||
' <value name="PULSETYPE">' +
|
||||
' <shadow type="io_highlow"></shadow>' +
|
||||
' </value>' +
|
||||
' <value name="TIMEOUT">' +
|
||||
' <shadow type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </shadow>' +
|
||||
' </value>'+
|
||||
' </block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catTime" name="Time" colour="140">' +
|
||||
' <block type="time_delay">' +
|
||||
' <value name="DELAY_TIME_MILI">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1000</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="time_delaymicros">' +
|
||||
' <value name="DELAY_TIME_MICRO">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="time_millis"></block>' +
|
||||
' <block type="time_micros"></block>' +
|
||||
' <block type="infinite_loop"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catAudio" name="Audio" colour="250">' +
|
||||
' <block type="io_tone">' +
|
||||
' <field name="TONEPIN">0</field>' +
|
||||
' <value name="FREQUENCY">' +
|
||||
' <shadow type="math_number">' +
|
||||
' <field name="NUM">220</field>' +
|
||||
' </shadow>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_notone"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catMotors" name="Motors" colour="60">' +
|
||||
' <block type="servo_write">' +
|
||||
' <value name="SERVO_ANGLE">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">90</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="servo_read"></block>' +
|
||||
' <block type="stepper_config">' +
|
||||
' <field name="STEPPER_NUMBER_OF_PINS">2</field>' +
|
||||
' <field name="STEPPER_PIN1">1</field>' +
|
||||
' <field name="STEPPER_PIN2">2</field>' +
|
||||
' <value name="STEPPER_STEPS">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="STEPPER_SPEED">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="stepper_step">' +
|
||||
' <value name="STEPPER_STEPS">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catComms" name="Comms" colour="160">' +
|
||||
' <block type="serial_setup"></block>' +
|
||||
' <block type="serial_print"></block>' +
|
||||
' <block type="text_prompt_ext">' +
|
||||
' <value name="TEXT">' +
|
||||
' <block type="text"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="spi_setup"></block>' +
|
||||
' <block type="spi_transfer"></block>' +
|
||||
' <block type="spi_transfer_return"></block>' +
|
||||
' </category>' +
|
||||
'</xml>';
|
||||
|
||||
|
||||
ngOnInit(){
|
||||
this.createBlocks();
|
||||
}
|
||||
|
||||
|
||||
createBlocks(){
|
||||
let workspacePlayground = Blockly.inject('blocklyDiv', {toolbox: this.toolbox});
|
||||
return workspacePlayground;
|
||||
}
|
||||
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
|
|
@ -28,5 +296,4 @@ export class BlocklyPage {
|
|||
launchOtaWizard () {
|
||||
this.navCtrl.setRoot(OtaWizardPage)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue