Skip to content

Commit

Permalink
WIP: Ardulib not loading object from DOM
Browse files Browse the repository at this point in the history
  • Loading branch information
rennemannd committed Apr 6, 2020
1 parent fabd92d commit a7fe631
Show file tree
Hide file tree
Showing 16 changed files with 680 additions and 443 deletions.
17 changes: 16 additions & 1 deletion client/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,22 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>STEM+C</title>

<!--libraries for style-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover.css"/>

<!-- libraries for blockly -->
<script src="lib/blockly_compressed.js"></script>
<script src="lib/blocks_compressed.js"></script>
<script src="lib/en.js"></script>

<!-- here are the libraries to get code from the blocks -->
<script src="lib/arduino_compressed.js"></script>
<script src="lib/javascript_compressed.js"></script>

</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
91 changes: 66 additions & 25 deletions client/src/App.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,79 @@
.App {
text-align: center;
body {
margin: 0;
}

.App-logo {
height: 40vmin;
pointer-events: none;
h3, p {
margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
.flex {
display: flex;
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
.flex-column {
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}

.space-between {
justify-content: space-between;
}

#container {
height: 100vh;
background-color: rgb(241, 241, 241);
}

.vertical-container {
margin: 1.5em;
}

#nav-container {
margin: 0;
background-color: rgb(32, 145, 173);
color: white;
align-items: center;
}

#title {
flex: 10;
margin: 0.5em;
}

.App-link {
color: #61dafb;
#action-btn-container {
flex: 1;
margin: 1em;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
#top-container {
flex: 1;
margin-bottom: 0.75em
}

.card {
background-color: white;
padding: 1em;
}

#description-container {
height: 100%;
}

#bottom-container {
flex: 6;
margin-top: 0.75em
}

#blockly-canvas {
flex: 2;
}

#models-container {
flex: 1;
margin-left: 1.5em;
}

#mode-img {
width: auto;
height: auto;
}

142 changes: 120 additions & 22 deletions client/src/App.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,124 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import React, {useState, useRef} from "react";
import "./App.css";
import {getArduino, getJS, compileArduinoCode} from "./scripts";

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
const [board, updateBoard] = useState("uno");

const alertArduino = () => {
alert(getArduino());
};

const alertJS = () => {
alert(getJS());
};

const alertCompile = () => {
alert(compileArduinoCode());
};

return (
<body>
<div id="container" className="flex flex-column">
<div id="nav-container" className="flex vertical-container space-between">
<h1 id="title">STEM+C</h1>
<div id="action-btn-container" className="flex space-between">
{/*<i onClick={alertJS} onMouseOver="this.style.cursor='hand'" className={"fab fa-js hvr-grow"}/>*/}
{/*<i onClick={alertArduino} onMouseOver="this.style.cursor='hand'" className="hvr-grow">A</i>*/}
{/*<i onClick={alertCompile} onMouseOver="this.style.cursor='hand'" className="fas fa-play hvr-grow"/>*/}
</div>
</div>
<div id="top-container" className="flex flex-column vertical-container">
<div id="description-container" className="flex flex-column card">
<h3>Maker Activity X</h3>
<p><b>Instructions / Science Brief: </b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="bottom-container" className="flex vertical-container">
<div id="blockly-canvas" style={{"height": "800px", "width": "100%"}}/>
<div id="models-container" className="flex flex-column card space-between">
<h3>Activity Models</h3>
<img src="assets/arduino.png" id="model-img"/>
<div id="model-btn-container" className="flex space-between">
<span>
<input type="radio" value="arduino" name="model-btn" checked/>
<label htmlFor="btn-arduino">Arduino</label>
</span>
<span>
<input type="radio" value="maker" name="model-btn"/>
<label htmlFor="btn-maker">Maker</label>
</span>
<span>
<input type="radio" value="science" name="model-btn"/>
<label htmlFor="btn-science">Science</label>
</span>
</div>
</div>
</div>
</div>

{/* This xml is for the blocks' menu we will provide. Here are examples on how to include categories and subcategories */}
{/*<xml id="toolbox" style="display: none">
Here I input Blockly category and blocks
<category name="Conditionals">
<category name="Operations">
<block type="controls_if"/>
<block type="logic_compare"/>
<block type="controls_whileUntil"/>
</category>
</category>
<category name="Input and Output">
<category name="Numeric">
<block type="math_number"/>
<block type="math_arithmetic"/>
</category>
<category name="Text">
<block type="text"/>
<block type="text_print"/>
</category>
<category name="Your Variables" custom="VARIABLE"/>
</category>
Here I input Ardublockly category and blocks. Check: ardublockly_toolbox.js
<category id="catInputOutput" name="Input/Output">
<block type="io_digitalwrite">
<value name="STATE">
<block type="io_highlow"/>
</value>
</block>
<block type="io_digitalread"/>
<block type="io_builtin_led">
<value name="STATE">
<block type="io_highlow"/>
</value>
</block>
<block type="io_analogwrite"/>
<block type="io_analogread"/>
<block type="io_highlow"/>
<block type="io_pulsein">
<value name="PULSETYPE">
<shadow type="io_highlow"/>
</value>
</block>
<block type="io_pulsetimeout">
<value name="PULSETYPE">
<shadow type="io_highlow"/>
</value>
<value name="TIMEOUT">
<shadow type="math_number">
<field name="NUM">100</field>
</shadow>
</value>
</block>
</category>
</xml>*/}
</body>
);

}

export default App;
export default App;
Binary file added client/src/assets/arduino.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/maker.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/src/assets/science.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 79 additions & 0 deletions client/src/assets/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
body {
margin: 0;
}

h3, p {
margin: 0;
}

.flex {
display: flex;
}

.flex-column {
flex-direction: column;
}

.space-between {
justify-content: space-between;
}

#container {
height: 100vh;
background-color: rgb(241, 241, 241);
}

.vertical-container {
margin: 1.5em;
}

#nav-container {
margin: 0;
background-color: rgb(32, 145, 173);
color: white;
align-items: center;
}

#title {
flex: 10;
margin: 0.5em;
}

#action-btn-container {
flex: 1;
margin: 1em;
}

#top-container {
flex: 1;
margin-bottom: 0.75em
}

.card {
background-color: white;
padding: 1em;
}

#description-container {
height: 100%;
}

#bottom-container {
flex: 6;
margin-top: 0.75em
}

#blockly-canvas {
flex: 2;
}

#models-container {
flex: 1;
margin-left: 1.5em;
}

#mode-img {
width: auto;
height: auto;
}

Loading

0 comments on commit a7fe631

Please sign in to comment.