Howto guide

web/package.json

@@ -23,6 +23,8 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@octokit/rest": "^18.0.6",
     "axios": "^0.19.0",
     "axios-observable": "^1.1.3",

web/src/components/alternating_text_image.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Row, Col } from 'reactstrap';
+
+const AlternatingTextImage = ({ elements }) =>
+  elements.map(({ title, text, image }, i) => {
+    const textElement = (
+      <>
+        <h4 className="display-4">{title}</h4>
+        <p className="lead">{text}</p>
+      </>
+    );
+
+    const imageElement = <img src={`${process.env.PUBLIC_URL}/${image}`} alt={title} />;
+
+    return (
+      <div className="pt-lg-5" key={i}>
+        {i % 2 === 0 ? (
+          <Row>
+            <Col xs="8">{textElement}</Col>
+            <Col xs="4">{imageElement}</Col>
+          </Row>
+        ) : (
+          <Row>
+            <Col xs="4">{imageElement}</Col>
+            <Col xs="8">{textElement}</Col>
+          </Row>
+        )}
+      </div>
+    );
+  });
+export default AlternatingTextImage;

web/src/components/carousel.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Carousel, CarouselItem, CarouselControl, CarouselIndicators, CarouselCaption } from 'reactstrap';
+
+const SimpleCarousel = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [animating, setAnimating] = useState(false);
+
+  const next = () => {
+    if (animating) return;
+    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+    setActiveIndex(nextIndex);
+  };
+
+  const previous = () => {
+    if (animating) return;
+    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
+    setActiveIndex(nextIndex);
+  };
+
+  const goToIndex = (newIndex) => {
+    if (animating) return;
+    setActiveIndex(newIndex);
+  };
+
+  const slides = items.map((item) => {
+    return (
+      <CarouselItem onExiting={() => setAnimating(true)} onExited={() => setAnimating(false)} key={item.src}>
+        <img src={`${process.env.PUBLIC_URL}/${item.src}`} alt={item.altText} width="100%" />
+        <CarouselCaption captionText="" captionHeader={item.caption} />
+      </CarouselItem>
+    );
+  });
+
+  return (
+    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
+      <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
+      {slides}
+      <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
+      <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
+    </Carousel>
+  );
+};
+
+export default SimpleCarousel;

web/src/components/table.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+const SimpleTable = ({ headers, elementsRows }) => (
+  <Table striped borderless responsive>
+    <thead>
+      <tr>
+        {headers.map((header) => (
+          <th key={header}>{header}</th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {elementsRows.map((row, i) => (
+        <tr key={i}>
+          {row.map((element) => (
+            <td key={element}>{element}</td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  </Table>
+);
+
+export default SimpleTable;

web/src/components/tabs.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { Card, CardBody, NavItem, NavLink, Nav, TabContent, TabPane } from 'reactstrap';
+
+const Tabs = ({ elements, onSelectTab, onHoverTab }) => {
+  const [selectedTab, _setSelectedTab] = useState(0);
+  const setSelectedTab = (event, tab) => {
+    event.preventDefault();
+    _setSelectedTab(tab);
+  };
+
+  return (
+    <>
+      <div className="nav-wrapper">
+        <Nav className="nav-fill flex-column flex-md-row" id="tabs-icons-text" pills role="tablist">
+          {elements.map(({ id, title }, i) => (
+            <NavItem key={i}>
+              <NavLink
+                aria-selected={selectedTab === i}
+                className={classnames('mb-sm-3 mb-md-0', {
+                  active: selectedTab === i,
+                })}
+                onClick={(e) => {
+                  onSelectTab && onSelectTab(id);
+                  setSelectedTab(e, i);
+                }}
+                onMouseOver={() => onHoverTab && onHoverTab(id)}
+                onMouseLeave={() => onHoverTab && onHoverTab(null)}
+                href="#pablo"
+                role="tab"
+              >
+                {title}
+              </NavLink>
+            </NavItem>
+          ))}
+        </Nav>
+      </div>
+      <Card className="shadow">
+        <CardBody>
+          <TabContent activeTab={'selectedTab' + selectedTab}>
+            {elements.map(({ content }, i) => (
+              <TabPane key={i} tabId={'selectedTab' + i}>
+                <p>{content}</p>
+              </TabPane>
+            ))}
+          </TabContent>
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default Tabs;

web/src/index.js

@@ -11,6 +11,7 @@ import Navbar from 'components/navbar';
 import SleepAnalysisResults from 'views/sleep_analysis_results';
 import Performance from 'views/performance';
 import AnalyzeSleep from 'views/analyze_sleep';
+import RecordMySleep from 'views/record_my_sleep';
 import ScrollToTop from 'components/scroll_to_top';
 import Emoji from 'components/emoji';
 
@@ -46,7 +47,7 @@ ReactDOM.render(
       <Navbar />
       <Switch>
         <Route exact path="/" render={underConstruction} />
-        <Route exact path="/record-my-sleep" render={underConstruction} />
+        <Route exact path="/record-my-sleep" render={() => <RecordMySleep />} />
         <Route exact path="/analyze-my-sleep" render={() => <AnalyzeSleep />} />
         <Route exact path="/sleep-analysis-results" render={() => <SleepAnalysisResults />} />
         <Route exact path="/performance" render={() => <Performance />} />

web/src/views/analyze_sleep/index.js

@@ -8,7 +8,7 @@ import { periodicPingServer } from 'requests/ping_server';
 import WaitingForServer from './waiting_for_server';
 import UploadForm from './upload_form';
 import { PING_PERIOD } from './constants';
-import AnalysisInProgress from './analysis_in_progress.js';
+import AnalysisInProgress from './analysis_in_progress';
 
 import text from './text.json';
 

web/src/views/record_my_sleep/carousel_images.json

@@ -0,0 +1,34 @@
+{
+  "items": [
+    {
+      "src": "instructions/res_1.jpg",
+      "altText": "Slide 1",
+      "caption": "1"
+    },
+    {
+      "src": "instructions/res_2.jpg",
+      "altText": "Slide 2",
+      "caption": "2"
+    },
+    {
+      "src": "instructions/res_3.jpg",
+      "altText": "Slide 3",
+      "caption": "3"
+    },
+    {
+      "src": "instructions/res_4.jpg",
+      "altText": "Slide 4",
+      "caption": "4"
+    },
+    {
+      "src": "instructions/res_5.jpg",
+      "altText": "Slide 5",
+      "caption": "5"
+    },
+    {
+      "src": "instructions/res_6.jpg",
+      "altText": "Slide 6",
+      "caption": "6"
+    }
+  ]
+}

web/src/views/record_my_sleep/electrode_display.css

@@ -0,0 +1,78 @@
+.imgs-container {
+  position: relative;
+  text-align: center;
+}
+
+.img-container {
+  position: relative;
+  text-align: center;
+  min-width: 50px;
+  min-height: 50px;
+  display: inline-block;
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+}
+
+.dot-select {
+  background-color: #fc7c5f;
+}
+
+.dot-null {
+  display: none;
+}
+
+.top.dot-fpz {
+  top: 3%;
+  left: 47%;
+}
+
+.top.dot-cz {
+  top: 46%;
+  left: 47%;
+}
+
+.top.dot-pz {
+  top: 76%;
+  left: 46%;
+}
+
+.top.dot-oz {
+  top: 89%;
+  left: 46%;
+}
+
+.top.dot-a2 {
+  top: 48%;
+  left: 90%;
+}
+
+.side.dot-fpz {
+  top: 38%;
+  left: 70%;
+}
+
+.side.dot-cz {
+  top: 17%;
+  left: 43%;
+}
+
+.side.dot-pz {
+  top: 28%;
+  left: 27%;
+}
+
+.side.dot-oz {
+  top: 51%;
+  left: 23%;
+}
+
+.side.dot-a2 {
+  top: 58%;
+  left: 49%;
+}

web/src/views/record_my_sleep/electrodes_display.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Row, Col } from 'reactstrap';
+
+import Tabs from 'components/tabs';
+
+import './electrode_display.css';
+
+const ElectrodesDisplay = () => {
+  const [selectedElectrode, setSelectedElectrode] = useState('fpz');
+
+  return (
+    <Row>
+      <Col xs="8">
+        <Tabs
+          onSelectTab={setSelectedElectrode}
+          elements={[
+            {
+              id: 'fpz',
+              title: 'Fpz',
+              content: `
+                  Fpz is used as one of our active electrodes. To identify the Fpz location, just measure the distance
+                  starting from your nasion (the easily identifiable depressed area between your eyes) to your inion
+                  using your flexible measuring tape. Fpz is located at 10 % of the distance along the midline between
+                  your nasion and your inion.`,
+            },
+            {
+              id: 'cz',
+              title: 'Cz',
+              content: `
+                  We’re measuring a potential difference between Fpz and that point. Cz is located at 50% of the
+                  distance along the midline starting from your nasion to your inion.`,
+            },
+            {
+              id: 'pz',
+              title: 'Pz',
+              content: `
+                This is our other active electrode. It is located at 70% of the distance between your nasion and your
+                inion.`,
+            },
+            {
+              id: 'oz',
+              title: 'Oz',
+              content: `
+                This is the point at which Pz is referenced. It is located at 90% of the distance between your nasion
+                and your inion.`,
+            },
+            {
+              id: 'a2',
+              title: 'A2',
+              content: `
+              This is the electrode that serves as driven ground between your and your OpenBCI board. Simply place it on
+              your right earlobe.`,
+            },
+          ]}
+        />
+      </Col>
+      <Col xs="4">
+        <div className="imgs-container">
+          <div className="img-container">
+            <img src={`${process.env.PUBLIC_URL}/illustrations/top.png`} alt="top" />
+            <span className={`top dot dot-select dot-${selectedElectrode}`}></span>
+          </div>
+          <div className="img-container">
+            <img src={`${process.env.PUBLIC_URL}/illustrations/side.png`} alt="side" />
+            <span className={`side dot dot-select dot-${selectedElectrode}`}></span>
+          </div>
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default ElectrodesDisplay;