diff --git a/components/configuration/VFBToolbar/vfbtoolbarHTML.js b/components/configuration/VFBToolbar/vfbtoolbarHTML.js
index 6cf644186..c0dcb920f 100644
--- a/components/configuration/VFBToolbar/vfbtoolbarHTML.js
+++ b/components/configuration/VFBToolbar/vfbtoolbarHTML.js
@@ -355,4 +355,15 @@ var contribute
+ " "
+ " ";
-module.exports = { about, feedback, contribute };
+var quickHelp
+= "
"
+ + "
"
+ + "
Quick Help for : Virtual Fly Brain
"
+ + "
"
+ + "
![](geppetto/build/splash.png)
"
+ + "
LOADING... [~3MB]"
+ + "
"
+ + "
"
+ + "
";
+
+module.exports = { about, feedback, contribute, quickHelp};
diff --git a/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js b/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js
index b0622d4a1..4a48cdcad 100644
--- a/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js
+++ b/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js
@@ -457,6 +457,14 @@ var toolbarMenu = {
handlerAction: "clickFeedback",
parameters: []
}
+ },
+ {
+ label: "Click Help",
+ icon: "fa fa-book",
+ action: {
+ handlerAction: "clickQuickHelp",
+ parameters: []
+ }
}
]
}
diff --git a/components/interface/VFBToolbar/VFBToolBar.js b/components/interface/VFBToolbar/VFBToolBar.js
index b5fd3ac2d..8061642f8 100644
--- a/components/interface/VFBToolbar/VFBToolBar.js
+++ b/components/interface/VFBToolbar/VFBToolBar.js
@@ -72,12 +72,14 @@ export default class VFBToolBar extends React.Component {
this.aboutHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').about;
this.feedbackHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').feedback;
this.contributeHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').contribute;
+ this.quickHelpHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').quickHelp;
this.clickAbout = this.clickAbout.bind(this);
this.menuHandler = this.menuHandler.bind(this);
this.clickFeedback = this.clickFeedback.bind(this);
this.clickContribute = this.clickContribute.bind(this);
+ this.clickQuickHelp = this.clickQuickHelp.bind(this);
}
componentWillMount () {
@@ -213,6 +215,12 @@ export default class VFBToolBar extends React.Component {
this.props.htmlOutputHandler(htmlContent);
window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Contribute'));
}
+
+ clickQuickHelp () {
+ var htmlContent = this.quickHelpHTML;
+ this.props.htmlOutputHandler(htmlContent);
+ window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Tutorial'));
+ }
menuHandler (click) {
switch (click.handlerAction) {
@@ -234,6 +242,9 @@ export default class VFBToolBar extends React.Component {
case 'clickContribute':
this.clickContribute();
break;
+ case 'clickQuickHelp':
+ this.clickQuickHelp();
+ break;
default:
return this.props.menuHandler(click);
}
diff --git a/images/splash.png b/images/splash.png
new file mode 100644
index 000000000..98c63f493
Binary files /dev/null and b/images/splash.png differ
diff --git a/tests/jest/vfb/menu-component-tests.js b/tests/jest/vfb/menu-component-tests.js
index 7a13f2718..f098f3af8 100644
--- a/tests/jest/vfb/menu-component-tests.js
+++ b/tests/jest/vfb/menu-component-tests.js
@@ -82,9 +82,9 @@ describe('VFB Menu Component Tests', () => {
await page.evaluate(async () => document.getElementById("Help").click());
// Wait for drop down menu of 'Help' to show
await wait4selector(page, "ul.MuiList-root", { visible: true, timeout : 120000 })
- // Check there's three elements in the drop down menu of 'Help'
+ // Check there's four elements in the drop down menu of 'Help'
const dropDownMenuItems = await page.evaluate(async () => document.getElementsByClassName("MuiListItem-root").length);
- expect(dropDownMenuItems).toEqual(3);
+ expect(dropDownMenuItems).toEqual(4);
})
it('Help Modal FAQ Tab Opened', async () => {
diff --git a/webpack.config.js b/webpack.config.js
index a64c30143..c01fadecb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,8 @@ var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
+var fs = require('fs');
+
/*
*var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
* <%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION._webapp_folder%>
@@ -28,6 +30,17 @@ var availableExtensions = [];
availableExtensions.push({ from: path.resolve(__dirname, geppetto_client_path, "static/*"), to: 'static', flatten: true });
availableExtensions.push({ from: 'tutorials/*', to: './', flatten: true });
availableExtensions.push({ from: 'model/*', to: './', flatten: true });
+
+const splashLoadingImage = 'images/splash.png';
+
+try {
+ if (fs.existsSync(splashLoadingImage)) {
+ availableExtensions.push({ from: splashLoadingImage, to: './', flatten: true });
+ }
+} catch (err) {
+ console.error(err)
+}
+
console.log(availableExtensions);
module.exports = function (env){