@robotical/sensors-dashboard/dist/components/modals/HowToUseModal/GeneralInfo/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = GeneralInfo;
require("core-js/modules/es.symbol.description.js");
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const steps = [{
  title: "Connect a device",
  description: "Pair Marty or Cog, or use Connect micro:bit for a micro:bit running the Robotical firmware."
}, {
  title: "Add a graph",
  description: "Use Add graph in the Graphs toolbar, then choose which connected device the graph belongs to."
}, {
  title: "Choose signals and record",
  description: "Expand a sensor, select one or more signals, then start recording when the graph says Ready."
}];
function GeneralInfo() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: _stylesModule.default.guide,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
      "aria-labelledby": "quick-start-heading",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: _stylesModule.default.eyebrow,
        children: "Three steps"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
        id: "quick-start-heading",
        children: "Create your first live graph"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
        className: _stylesModule.default.steps,
        children: steps.map((step, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: _stylesModule.default.stepNumber,
            "aria-hidden": "true",
            children: index + 1
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
              children: step.title
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              children: step.description
            })]
          })]
        }, step.title))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
      className: _stylesModule.default.tipGrid,
      "aria-label": "Graph controls",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("article", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
          children: "Recording controls"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Record begins a live capture. Pause keeps the data already captured. Reset clears the graph so you can begin again."
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("article", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
          children: "Advanced settings"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "Open Advanced settings when you need trigger conditions or automatic scrolling. Set triggers before recording."
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("article", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
          children: "Exporting data"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          children: "CSV becomes available after the graph has captured data. Plotly\u2019s chart toolbar can also download an image of the plot."
        })]
      })]
    })]
  });
}