@robotical/sensors-dashboard
Version:
A dashboard tool for depicting Marty data by Robotical
42 lines (41 loc) • 3.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = GeneralInfo;
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function GeneralInfo() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule.default.howToUseModalContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextTitle,
children: "Introduction"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextParagraph,
children: "Welcome to the dashboard \u2013 your go-to tool for visualizing data from Marty's sensors!"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextParagraph,
children: "Upon connecting to your Marty, you'll see an empty graph appear. On the left side, there's a list of sensors. Each sensor can be expanded to reveal its input streams. For instance, the color sensor has four input streams: Red, Green, Blue, and Clear. To add another graph, you will need to click on the button in the top right corner of the screen. This will create a new, empty graph for you to customize and configure with the input streams from the available sensors. "
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextTitle,
children: "Recording Data"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextParagraph,
children: "To start capturing data, simply select at least one input stream and hit the Play button on the bottom left of the graph. A round, black shape will pop up, signaling that you're now recording data live! The data will be plotted on the graph as it flows from Marty."
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextTitle,
children: "Conditional Start/End Events"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextParagraph,
children: "You can also choose to display data only when specific conditions are met. First, select an input stream. If it supports conditional display, the 'Start/End when' list (located at the bottom right of the graph) will show the available conditions for that stream. Select your desired condition and press Play to begin recording. Data will appear on the plot once the \"Start when\" condition is satisfied."
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextTitle,
children: "Export data/Capture graph"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: _stylesModule.default.howToUseModalTextParagraph,
children: "To export the graph data in .csv format, click the 'Export CSV' link on the top left side of the plot. To capture a screenshot of the plot, hover over the graph area and then click the 'Download plot as PNG' button that appears on the top right of the plot. Happy data visualizing!"
})]
});
}