Skip to content

Commit

Permalink
Init new webpack structure (#13)
Browse files Browse the repository at this point in the history
* init new webpack structure

* added environment related builds

* added sidebars.js

* fixed issues with build

* back sidebars code

* removed issue with duplicated favicon

* added latest release

* update latest translations

* updated README, webpack refactor
  • Loading branch information
yarsanich committed Jun 3, 2019
1 parent 03d3220 commit 1d710e0
Show file tree
Hide file tree
Showing 43 changed files with 8,054 additions and 2,884 deletions.
29 changes: 7 additions & 22 deletions README.md
Expand Up @@ -4,9 +4,6 @@ This project is a webapp-based implementation of the Energy in Schools hub that
## Feature Request and Issue Tracking
Please add an issue if you wish for any additional features or discover any issues using this project. Tracking changes will keep things organised.

## Local Server
This WebBridge will require an install of the latest version of NodeJS.

**Note: WebUSB is only available via a secure HTTPS connection or ``localhost`` for development.**

### Running
Expand All @@ -18,35 +15,23 @@ npm install
npm start
```

By default, this application is hosted on port 3000 at ``http://localhost:3000/``. This is intended for development as WebUSB requires a secure HTTPs connection, or localhost for development.
This can be changed by heading into the ``bin\ServerConfig.js`` and modifying the configurations.
By default, this application is hosted on port 3000 at ``http://localhost:8080/``. This is intended for development as WebUSB requires a secure HTTPs connection, or localhost for development.

### Building
Modifications to any of the TypeScript files found in ``public\javascript`` must be compiled into JavaScript and further bundled together using Browserify and minified using uglify.

```
cd public\javascript
browserify WebBridge.js > WebBridge.bundle.js
npm run build // translation localhost:4000
npm run build:staging // translations staging
npm run build:production // translatinos production
```

Upon deploying to production, run this process through uglifyjs to remove comments and minify the bundled output.

```
cd public\javascript
browserify WebBridge.js | uglifyjs -c > WebBridge.bundle.js
```
### Local development
For local development setup you might be interested in launching chrome without internet security with disabled CORS
`npm run chrome-without-web-security`

### Node Modules (DAPjs)
At the moment, this repo has not been cleaned up and may contain a load of potentially useless (for this project) node modules.
That being said, this project relies on the [DAPjs](https://github.com/ARMmbed/dapjs) JavaScript interface for the main serial communication between the webapp and the bridging micro:bit.
To install the required node modules, be sure to run ``npm install`` before running the server.

## Project Notes
As JavaScript/TypeScript aren't my strongest language, and my knowledge of NodeJS was lacking, I decided to start with a simple, yet useful project to allow serial communication via the WebUSB standard. This was then improved upon to create a bridge between micro:bits and the internet.

I built this project using WebStorm's brilliant Node.JS Express App generator and utilised the features provided. With the division of business logic and views, modifying the look and feel of the page while maintaining the technical stuff was made very simple. The rendering is achieved via Jade and CSS located in the ``views`` and ``public\stylesheets`` folders, while the logic uses TypeScript found throughout the repo.

**Note: This project is a bit messy at the minute. There are some files within this project that are there purely for local testing purposes and will be removed once complete.**

## Repos
[DAPjs](https://github.com/ARMmbed/dapjs) JavaScript interface to CMSIS-DAP
Empty file removed debug.json
Empty file.
File renamed without changes.
File renamed without changes
1 change: 1 addition & 0 deletions dist/index.html
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="shortcut icon" href="favicon.ico"><link href="stylesheets/styles.css" rel="stylesheet"></head><body><div id="loginpage"><div class="container"><div class="row justify-content-center"><div class="col-12 col-lg-5"><div class="card card-signin" id="loginForm"><div class="card-body"><h5 class="card-title text-center">Login</h5><form class="form-signin"><div class="form-label-group"><input class="form-control" id="userName" type="text" placeholder="Email address" required="" autofocus=""><label for="userName">Username</label></div><div class="form-label-group"><input class="form-control" id="inputPassword" type="password" placeholder="Password" required=""><label for="inputPassword">Password</label></div><div class="text-danger" id="loginError">Some message</div><button class="btn btn-lg btn-primary btn-block text-uppercase" type="button" id="loginButton">Login</button></form></div></div></div></div></div></div><div id="main"><h1></h1><div class="container"><div class="row justify-content-center"><div style="max-width:400px;padding-top:30px"><img class="img-fluid" src="./images/microbit.png"></div></div></div><div id="status"><text>Connect to a micro:bit and flash the bridging software</text></div><div class="div" id="terminal-container"><input type="checkbox" id="terminal-checkbox"><label for="terminal-checkbox" id="terminal-toggle">&#9776;</label><div id="terminal-box"><div id="terminal-header">Terminal</div></div><div id="terminal-contents"></div></div><div id="history-container"><input type="checkbox" id="history-checkbox"><label for="history-checkbox" id="history-toggle">&#9776;</label><div id="history-box"><div id="history-header">History</div></div></div><div id="hubSelectContainer"><select class="form-control" id="hubSelect"><option selected value="-1">Select webhub to flash...</option></select></div><dif id="footer"><div class="container"><div class="row justify-content-center" id="controls"><button id="connect">Connect</button><button id="flash">Flash</button><button id="logout">Logout</button></div></div></dif></div><script type="module" src="./javascripts/sidebars.js"></script><script type="module" src="./javascripts/WebBridge.bundle.js"></script><script type="text/javascript" src="javascripts/WebBridge.bundle.js"></script></body></html>
66 changes: 66 additions & 0 deletions dist/javascripts/WebBridge.bundle.js

Large diffs are not rendered by default.

46 changes: 46 additions & 0 deletions dist/javascripts/sidebars.js
@@ -0,0 +1,46 @@
function hideTerminal() {
let size = $(window).width() < 480 ? 80 : 20;
$('#terminal-container').animate({
'left': `-${size}%`
}, {queue: false});
}

function hideHistory() {
$('#history-container').animate({
'left': '100%'
}, {queue: false});
}

/***
* Slides in or out the terminal panel once the invisible checkbox is changed.
*/
$('#terminal-checkbox').change(function (change) {
if ($(window).width() < 480) {
hideHistory()
}
if (change.target.checked)
$('#terminal-container').animate({
'left': '0px'
}, {queue: false});
else {
hideTerminal();
}
});

/***
* Slides in or out the history panel once the invisible checkbox is changed.
*/
$('#history-checkbox').change(function (change) {
let size = 80
if ($(window).width() < 480) {
size = 20;
hideTerminal()
}

if (change.target.checked)
$('#history-container').animate({
'left': `${size}%`
}, {queue: false});
else
hideHistory();
});
336 changes: 336 additions & 0 deletions dist/stylesheets/styles.css

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions translations.json → dist/translations.json
Expand Up @@ -157,7 +157,7 @@
"endpoint":{
"sensorState":{
"queryObject": {
"api_endpoint": "motion",
"api_endpoint": "motion-sensor",
"device": "^device^"
},
"jspath": ".value",
Expand All @@ -170,7 +170,7 @@
},
"sensorTemp":{
"queryObject": {
"api_endpoint": "temperature",
"api_endpoint": "temperature-measurement",
"device": "^device^"
},
"jspath": ".value",
Expand All @@ -186,6 +186,7 @@
"api_endpoint": "switch",
"device": "^device^"
},
"jspath": ".value",
"returns":[
{
"type":"string",
Expand All @@ -198,6 +199,7 @@
"api_endpoint": "switch-level",
"device": "^device^"
},
"jspath": ".value",
"returns":[
{
"type":"string",
Expand All @@ -210,6 +212,7 @@
"api_endpoint": "color-temperature",
"device": "^device^"
},
"jspath": ".value",
"returns":[
{
"type":"string",
Expand All @@ -222,6 +225,7 @@
"api_endpoint": "color-control",
"device": "^device^"
},
"jspath": ".value",
"returns":[
{
"type":"string",
Expand All @@ -234,6 +238,7 @@
"api_endpoint": "switch",
"device": "^device^"
},
"jspath": ".value",
"returns":[
{
"type":"string",
Expand Down
Binary file added images/favicon.ico
Binary file not shown.
Binary file added images/microbit.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions libs/sidebars.js
@@ -0,0 +1,46 @@
function hideTerminal() {
let size = $(window).width() < 480 ? 80 : 20;
$('#terminal-container').animate({
'left': `-${size}%`
}, {queue: false});
}

function hideHistory() {
$('#history-container').animate({
'left': '100%'
}, {queue: false});
}

/***
* Slides in or out the terminal panel once the invisible checkbox is changed.
*/
$('#terminal-checkbox').change(function (change) {
if ($(window).width() < 480) {
hideHistory()
}
if (change.target.checked)
$('#terminal-container').animate({
'left': '0px'
}, {queue: false});
else {
hideTerminal();
}
});

/***
* Slides in or out the history panel once the invisible checkbox is changed.
*/
$('#history-checkbox').change(function (change) {
let size = 80
if ($(window).width() < 480) {
size = 20;
hideTerminal()
}

if (change.target.checked)
$('#history-container').animate({
'left': `${size}%`
}, {queue: false});
else
hideHistory();
});

0 comments on commit 1d710e0

Please sign in to comment.