Skip to content
This repository was archived by the owner on Aug 3, 2025. It is now read-only.

Commit cbbc13a

Browse files
bcongdonkevinwang
bcongdon
authored and
kevinwang
committed
Restyle for and integrate with Groot.
1 parent 29d5ece commit cbbc13a

34 files changed

+4007
-257
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,4 @@ src/secrets.js
4444

4545
# Vim swap file
4646
.*.swp
47+
current_layout.json

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,30 @@ npm run build
2424
/path/to/electron . # Replace with actual path to Electron binary
2525
```
2626

27+
Adding a new Panel
28+
------------------
29+
30+
A panel is just a React component that can be fit flexibly inside a `div` (to conform with the dashboard layout).
31+
To add a new type of panel:
32+
33+
1. Create a new panel component in `src/panels/`.
34+
2. Import your panel component in `src/panels.js` and give it a representative name.
35+
3. Add an entry in `src/layout.json` to render your panel on the dashboard.
36+
4. Follow the instructions for 'Changing the layout' to graphically resize and position your panel.
37+
38+
Changing the layout
39+
-------------------
40+
41+
You can manually edit `src/layout.json` to change the layout of the Dashboard.
42+
However, you can also run dashboard in layout mode with `--layout`, which allows you to drag and resize panels.
43+
44+
1. Run `/path/to/electron . --layout`
45+
2. Drag and resize panels on the dashboard.
46+
3. Copy the newly created `current_layout.json` from the project root directory to `src/layout.json`.
47+
48+
```mv curent_layout.json src/layout.json```
49+
50+
2751
Raspberry Pi setup guide
2852
------------------------
2953

‎gulpfile.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ var browserify = require('browserify');
33
var babelify = require('babelify');
44
var source = require('vinyl-source-stream');
55
var sass = require('gulp-sass');
6+
var importCss = require('gulp-import-css');
67

78
gulp.task('bundle', function() {
89
return browserify('./src/main.js')
@@ -15,6 +16,7 @@ gulp.task('bundle', function() {
1516
gulp.task('sass', function() {
1617
return gulp.src('./sass/main.scss')
1718
.pipe(sass().on('error', sass.logError))
19+
.pipe(importCss())
1820
.pipe(gulp.dest('.'));
1921
});
2022

‎img/acm-logo-flat.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎img/acm-logo.png‎

-366 KB
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<body>
99
<div id="main">
1010
<div class="loading-container">
11-
<img src="img/acm-logo.png">
11+
<img src="img/acm-logo-flat.svg">
1212
<p>Loading display...</p>
1313
</div>
1414
</div>

‎main.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
'use strict';
22

33
const electron = require('electron');
4+
const fs = require('fs');
5+
const ipcMain = electron.ipcMain;
46
// Module to control application life.
57
const app = electron.app;
68
// Module to create native browser window.
@@ -28,6 +30,21 @@ function createWindow () {
2830
// when you should delete the corresponding element.
2931
mainWindow = null;
3032
});
33+
// Save current layout for layout mode
34+
ipcMain.on('layout-changed', function(event, layout) {
35+
if(process.argv.includes('--layout')) {
36+
var layoutJSON = JSON.stringify(layout.map(function(widget) {
37+
return {
38+
i: widget.i,
39+
x: widget.x,
40+
y: widget.y,
41+
w: widget.w,
42+
h: widget.h
43+
}
44+
}), undefined, 4);
45+
fs.writeFile('./current_layout.json', layoutJSON);
46+
}
47+
});
3148
}
3249

3350
// This method will be called when Electron has finished

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,16 @@
1616
"babelify": "7.2.x",
1717
"browserify": "13.0.x",
1818
"classnames": "2.2.x",
19+
"electron": "1.4.x",
1920
"gulp": "3.9.x",
21+
"gulp-import-css": "0.1.x",
2022
"gulp-sass": "2.3.x",
2123
"ical.js": "1.2.x",
2224
"jquery": "2.2.x",
2325
"moment": "2.12.x",
2426
"react": "0.14.x",
2527
"react-dom": "0.14.x",
28+
"react-grid-layout": "0.13.x",
2629
"vinyl-source-stream": "1.1.x"
2730
}
2831
}

‎sass/base.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono:400,700');
2+
3+
$font-color: #333333;
4+
$font-color-alt: #999;
5+
$font-color-neg: white;
6+
$font-color-neg-back: #333333;
7+
$border-color: #464646;
8+
$button-active-color: #999;
9+
$button-inactive-color: #ddd;
10+
11+
@mixin monospace-font() {
12+
font-family: 'Roboto Mono', monospace;
13+
}
14+
15+
@mixin serif-font() {
16+
font-family: 'Open Sans', sans-serif;
17+
}

‎sass/header.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
.header-container {
44
width: 1920px;
55
height: 200px;
6-
background: linear-gradient(#2f86ae, #385461);
7-
color: white;
6+
color: $font-color;
7+
border-bottom: 1.5px solid $border-color;
88
display: flex;
99
justify-content: space-between;
1010
}

0 commit comments

Comments
 (0)