From 49cb284db5c83762d40797b9061f3aa778fea1cf Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Thu, 17 Nov 2022 10:38:59 +0100 Subject: [PATCH 1/2] WIP --- docusaurus.config.js | 28 +++++++++- package.json | 14 +++-- src/pages/editors.js | 64 ----------------------- src/pages/groot.js | 103 +++++++++++++++++++++++++++++++++++++ src/pages/groot.module.css | 58 +++++++++++++++++++++ src/pages/index.js | 2 +- src/pages/moveit_studio.js | 34 ++++++++++++ static/img/green_check.svg | 4 ++ static/img/red_cross.svg | 6 +++ tailwind.config.js | 7 +++ 10 files changed, 248 insertions(+), 72 deletions(-) delete mode 100644 src/pages/editors.js create mode 100644 src/pages/groot.js create mode 100644 src/pages/groot.module.css create mode 100644 src/pages/moveit_studio.js create mode 100644 static/img/green_check.svg create mode 100644 static/img/red_cross.svg create mode 100644 tailwind.config.js diff --git a/docusaurus.config.js b/docusaurus.config.js index fa4f010..a4c30c6 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -32,7 +32,20 @@ const config = { }, }, - plugins: [require.resolve("@cmfcmf/docusaurus-search-local")], + plugins: [ + require.resolve("@cmfcmf/docusaurus-search-local"), + async function myPlugin(context, options) { + return { + name: "docusaurus-tailwindcss", + configurePostCss(postcssOptions) { + // Appends TailwindCSS and AutoPrefixer. + postcssOptions.plugins.push(require("tailwindcss")); + postcssOptions.plugins.push(require("autoprefixer")); + return postcssOptions; + }, + }; + }, + ], presets: [ [ @@ -88,7 +101,18 @@ const config = { type: 'doc', label: 'Tutorial', docId: 'intro', position: 'left' }, { - to: '/editors', label: 'Editors', position: 'left' + position: 'left', + label: 'Tools', + items: [ + { + to: '/groot', + label: 'Groot' + }, + { + to: '/moveit_studio', + label: 'MoveIt Studio' + } + ] }, { to: '/migration', label: 'Migration from 3.X', position: 'left' diff --git a/package.json b/package.json index d91a318..cd622fa 100644 --- a/package.json +++ b/package.json @@ -15,19 +15,23 @@ }, "dependencies": { "@cmfcmf/docusaurus-search-local": "^0.11.0", - "@docusaurus/core": "2.1.0", - "@docusaurus/plugin-ideal-image": "^2.1.0", - "@docusaurus/preset-classic": "2.1.0", + "@docusaurus/core": "2.2.0", + "@docusaurus/plugin-ideal-image": "^2.2.0", + "@docusaurus/preset-classic": "2.2.0", "@mdx-js/react": "^1.6.22", + "autoprefixer": "^10.4.13", + "bootstrap": "^5.2.2", "clsx": "^1.2.1", + "postcss": "^8.4.19", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-bootstrap": "^2.5.0", "react-bootstrap-icons": "^1.9.1", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "tailwindcss": "^3.2.4" }, "devDependencies": { - "@docusaurus/module-type-aliases": "2.1.0" + "@docusaurus/module-type-aliases": "2.2.0" }, "browserslist": { "production": [ diff --git a/src/pages/editors.js b/src/pages/editors.js deleted file mode 100644 index 8555bb8..0000000 --- a/src/pages/editors.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import Layout from '@theme/Layout'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import styles from './index.module.css'; - -export default function Hello() { - return ( - -
-
-
-
-

Groot

-

Groot - is an open source Graphical Editor, written in C++ and Qt, to create BehaviorTrees. -

-

With Groot you can: -

    -
  • Create and edit trees using a drag and drop interface.
    • -
  • Monitor the state of a tree remotely in real-time.
    • -
  • Replay the state transitions offline, using a log.
    • -
-

-

-

Groot 2 is currently under development.

- We are reimaginging Groot to be easier to use and more scalable. - If you use Groot professionally, it is the perfect time to get in touch! -

-
-
- groot 1 -
-
-
-
- -
-
-
-
- moveit studio -
-
-

MoveIt Studio

-

MoveIt Studio is a complete platform - that enables robotics engineers and robot field operators to more quickly build - advanced applications that include - manipulator arms.

-

Designed with a user-friendly interface, it includes - a set of pre-built tools that make it easy to build and debug behavior trees, - inspect trajectories, diagnose failures, and provide robot recovery. -

-
-
-
-
- - ); -} \ No newline at end of file diff --git a/src/pages/groot.js b/src/pages/groot.js new file mode 100644 index 0000000..56aed51 --- /dev/null +++ b/src/pages/groot.js @@ -0,0 +1,103 @@ +import React from 'react'; +import Layout from '@theme/Layout'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './groot.module.css'; +import Table from 'react-bootstrap/Table'; + +function Check(props) { + return yes; +} + +function Cross(props) { + return yes; +} + +export default function Groot() { + return ( + +
+
+
+
+

Groot

+

Groot + is an open source Graphical Editor, written in C++ and Qt, to create BehaviorTrees. +

+

With Groot you can: +

    +
  • Create and edit trees using a drag and drop interface.
    • +
  • Monitor the state of a tree remotely in real-time.
    • +
  • Replay the state transitions offline, using a log.
    • +
+

+

+

Groot 2 is currently under development.

+ We are reimaginging Groot to be easier to use and more scalable. + If you use Groot professionally, it is the perfect time to get in touch! +

+
+
+ groot 1 +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Groot 1.0Groot 2.x
Open Source
Actively developed and supported
BehaviorTree.CPP 4.X support
Advanced Editor:
    +
  • Multi-file projects
    • +
  • Improved subtree navigation
    • +
Realtime monitoringComing soon
Realtime Debugging:
    +
  • Add breakpoints
    • +
  • Visualize the Blackboard
    • +
  • Mock Nodes
    • +
  • Add fault injection
    • +
Coming soon
+
+ + ); +} \ No newline at end of file diff --git a/src/pages/groot.module.css b/src/pages/groot.module.css new file mode 100644 index 0000000..1f6f96d --- /dev/null +++ b/src/pages/groot.module.css @@ -0,0 +1,58 @@ + +h1 { + font-size: 38px; + padding: 0.5rem 0; +} + +h2 { + font-size: 32px; + padding: 0.5rem 0; +} + +h3{ + font-size: 24px; +} + +p{ + font-size: 18px; +} + + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} + +.sectionText { + padding: 0.5rem 0; + display: flex; + align-items: center; + justify-content: center; + color: #3b3b3b; + font-size: 20px; +} + +.sectionText li{ + font-size: 20px; +} + +.sectionTable{ + padding: 0.5rem 0; + display: flex; + align-items: center; + justify-content: center; + color: #3b3b3b; + font-size: 20px; +} + +.sectionTable li{ + list-style-type: none; + font-size: 16px; +} + +table, th, td { + font-size: 18px; + border: 1px solid; + } + diff --git a/src/pages/index.js b/src/pages/index.js index 46df485..0333f37 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -107,7 +107,7 @@ function Home() {

About Groot diff --git a/src/pages/moveit_studio.js b/src/pages/moveit_studio.js new file mode 100644 index 0000000..f4beca4 --- /dev/null +++ b/src/pages/moveit_studio.js @@ -0,0 +1,34 @@ +import React from 'react'; +import Layout from '@theme/Layout'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import styles from './index.module.css'; + +export default function Studio() { + return ( + +
+
+
+
+ moveit studio +
+
+

MoveIt Studio

+

MoveIt Studio is a complete platform + that enables robotics engineers and robot field operators to more quickly build + advanced applications that include + manipulator arms.

+

Designed with a user-friendly interface, it includes + a set of pre-built tools that make it easy to build and debug behavior trees, + inspect trajectories, diagnose failures, and provide robot recovery. +

+
+
+
+
+ + ); +} \ No newline at end of file diff --git a/static/img/green_check.svg b/static/img/green_check.svg new file mode 100644 index 0000000..fa7d97e --- /dev/null +++ b/static/img/green_check.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/img/red_cross.svg b/static/img/red_cross.svg new file mode 100644 index 0000000..ee49235 --- /dev/null +++ b/static/img/red_cross.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..43ef746 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +}; \ No newline at end of file From 8dad51869f89f1176424df1611817efcb3b26fd4 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Thu, 17 Nov 2022 12:31:57 +0100 Subject: [PATCH 2/2] WIP --- src/pages/groot.js | 101 ++++++++++++++++++++++++-------- src/pages/groot.module.css | 8 ++- static/img/open_source_icon.svg | 1 + static/img/pro_logo_icon.svg | 1 + 4 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 static/img/open_source_icon.svg create mode 100644 static/img/pro_logo_icon.svg diff --git a/src/pages/groot.js b/src/pages/groot.js index 56aed51..36f1eb7 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -10,7 +10,7 @@ function Check(props) { } function Cross(props) { - return yes; + return no; } export default function Groot() { @@ -19,25 +19,27 @@ export default function Groot() {
-
-

Groot

-

Groot - is an open source Graphical Editor, written in C++ and Qt, to create BehaviorTrees. +

+

Groot

+

Groot is the Integrated Development Environment to build and debug Behavior Trees. + It allows you to:

-

With Groot you can: +

    -
  • Create and edit trees using a drag and drop interface.
    • +
  • Create and edit trees, using a drag and drop interface.
  • Monitor the state of a tree remotely in real-time.
    • -
  • Replay the state transitions offline, using a log.
    • +
  • Debug and test your behaviors (new in version 2)

-

Groot 2 is currently under development.

- We are reimaginging Groot to be easier to use and more scalable. - If you use Groot professionally, it is the perfect time to get in touch! +

Groot 2 is under development, available in early preview

+ We are reimaginging Groot to be easier to use and more scalable, focusing in particular + on the needs of industrial and professional users. +
If you use BT.CPP and Groot professionally, contact us and + we will be happy to help.

-
+
groot 1 @@ -46,8 +48,39 @@ export default function Groot() {
-
- +
+

Which version of Groot is the right for you?

+
+ +
+
+
+
+

pro Groot 2.X

+ +

Groot 2 is the professional successor of Groot, focusing on improved + user experience, modularity and scalability. +
It introduces powerful debugging and introspection tools, to support the + entire development cycle, from conception to validation. +

+
+
+

pro Groot 1.0

+

Groot is the original open source editor. +
It is not under active development, but it still a valid + option for users who are still using BehaviorTree.CPP 3.8 and need + real-time visualization.

+
+
+
+
+ +
+
@@ -62,33 +95,41 @@ export default function Groot() { - + - + - + + + + + + + + + + + + - + + - - @@ -98,6 +139,14 @@ export default function Groot() {
Actively developed and supportedActively developed
BehaviorTree.CPP 4.X supportCommercial support
Advanced Editor:
    -
  • Multi-file projects
    • -
  • Improved subtree navigation
    • -
Tree EditorFreeFree
Realtime MonitoringFreeCommercial
(Coming soon)
Supports the new feature in BehaviorTree.CPP 4.X
Realtime monitoringMulti-file projects
 Coming soon
Realtime Debugging:
    -
  • Add breakpoints
    • -
  • Visualize the Blackboard
    • -
  • Mock Nodes
    • +
Realtime Debugging:
    +
  • Add breakpoints at run-time
    • +
  • Visualize the content of the Blackboard
    • +
  • Nodes mocking and automated tests
  • Add fault injection
+ +
+

+

Download Groot 2.0

+ Free as in "beer". Editor Mode only. Version: alpha_1. +

+
+ ); } \ No newline at end of file diff --git a/src/pages/groot.module.css b/src/pages/groot.module.css index 1f6f96d..5e4e34f 100644 --- a/src/pages/groot.module.css +++ b/src/pages/groot.module.css @@ -30,11 +30,15 @@ p{ align-items: center; justify-content: center; color: #3b3b3b; - font-size: 20px; + font-size: 18px; +} + +.sectionText h3{ + font-size: 22px; } .sectionText li{ - font-size: 20px; + font-size: 18px; } .sectionTable{ diff --git a/static/img/open_source_icon.svg b/static/img/open_source_icon.svg new file mode 100644 index 0000000..1e8b36e --- /dev/null +++ b/static/img/open_source_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/pro_logo_icon.svg b/static/img/pro_logo_icon.svg new file mode 100644 index 0000000..3ef4c9d --- /dev/null +++ b/static/img/pro_logo_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file