diff --git a/public/LearnMore.css b/public/LearnMore.css
index 9ed59bbef5ec41a03f186bd77027b5394d68fdc6..2e6a4fee7a0ee5e1d701ef3d0c9a555d80521aa7 100644
--- a/public/LearnMore.css
+++ b/public/LearnMore.css
@@ -28,6 +28,43 @@ p {
text-align: justify;
}
+#team-photo {
+ display:block;
+ float:left;
+ width: 500px;
+ margin: 0px 1.5em 1.5em 0px;
+ border-radius: 10px;
+}
+
+.lavizu_btn {
+ background: #edc71b;
+ color:#fff;
+ font-family: sans-serif;
+ font-size: 25px;
+ text-decoration: none;
+ border-radius: 10px;
+ border:none;
+ border-bottom:5px solid #ba9d1a;
+ transition: all 0.2s;
+ width:auto;
+ float: right;
+ padding: 10px 20px 10px 20px;
+ margin-left: auto;
+ position: relative;
+ top: -2em;
+
+}
+.lavizu_btn:hover {
+ border-bottom:7px solid #ba9d1a;
+ transform: translateY(-2px);
+ cursor: pointer;
+}
+.lavizu_btn:active {
+ transition: all 0s;
+ border-bottom:2px solid #ba9d1a;
+ transform: translateY(2px);
+}
+
.single-service-line1 {
width:100%;
}
@@ -101,40 +138,3 @@ p {
height: 150px;
margin-top: -20px
}
-
-#team-photo {
- display:block;
- float:left;
- width: 500px;
- margin: 0px 1.5em 1.5em 0px;
- border-radius: 10px;
-}
-
-.lavizu_btn {
- background: #edc71b;
- color:#fff;
- font-family: sans-serif;
- font-size: 25px;
- text-decoration: none;
- border-radius: 10px;
- border:none;
- border-bottom:5px solid #ba9d1a;
- transition: all 0.2s;
- width:auto;
- float: right;
- padding: 10px 20px 10px 20px;
- margin-left: auto;
- position: relative;
- top: -2em;
-
-}
-.lavizu_btn:hover {
- border-bottom:7px solid #ba9d1a;
- transform: translateY(-2px);
- cursor: pointer;
-}
-.lavizu_btn:active {
- transition: all 0s;
- border-bottom:2px solid #ba9d1a;
- transform: translateY(2px);
-}
diff --git a/public/light-flat.css b/public/light-flat.css
index 340c0c295173a44082d2689686aab393b2612d32..c96628efa69d7a8561fd5ecbe72034d0c8483898 100755
--- a/public/light-flat.css
+++ b/public/light-flat.css
@@ -21,8 +21,8 @@ html,body
margin: 0;
padding: 0;
overflow:hidden;
- /* font-size: 12px; */
font-family: 'Lato', Arial, sans-serif;
+ font-size: 16px;
}
#container {
diff --git a/src/Common.css b/src/Common.css
index a3eaa660233877627cc9d9b3b474fa2981d8e609..20bbfec311f3f9e00dc5296beb8e5da4ef40e92a 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -1,3 +1,14 @@
+h1 {
+ color: #edc61b;
+ /* font-weight: normal; */
+ font-size: 1.8em;
+}
+
+h2 {
+ color:#383838;
+ font-weight: normal;
+}
+
/* Colorization of action strings */
.valence-positive {
color: #2ca02c;
@@ -14,11 +25,6 @@
fill: #d62728;
}
-h1 {
- color: #edc61b;
-}
-
-h2 {
- color:#383838;
- font-weight: normal;
+.about {
+ margin: 10px 10px 10px 10px;
}
diff --git a/src/HorizontalGauge/HozirontalGauge.js b/src/HorizontalGauge/HozirontalGauge.js
index 85e33f06938a9ce352d6e0d60e162bfa18669b11..65fca8a360dffc0c2335feba35fdf1f26109ff64 100644
--- a/src/HorizontalGauge/HozirontalGauge.js
+++ b/src/HorizontalGauge/HozirontalGauge.js
@@ -37,9 +37,7 @@ class HorizontalGauge extends Component {
if (config && 'displayMode' in config) {
if (config.displayMode === "readme") {
- return <div>
- <h2>This gauge represent a <b>measure</b> ranging from 0 to 1.</h2>
- </div>;
+ return <p className="about">This gauge represent a <b>measure</b> ranging from 0 to 1.</p>;
} else if (config.displayMode === "settings") {
return <div>
<p>config panel</p>
diff --git a/src/InteractionTrace/InteractionTrace.js b/src/InteractionTrace/InteractionTrace.js
index 8c630194470aaf2ee928bd158cea7a6b8ac3fbdc..2d3a1bf9e73ad2ed86b36686a4748f38da7af250 100644
--- a/src/InteractionTrace/InteractionTrace.js
+++ b/src/InteractionTrace/InteractionTrace.js
@@ -295,11 +295,13 @@ class InteractionTrace extends Component {
if (config && 'displayMode' in config) {
if (config.displayMode === "readme") {
- return <div>
+ return <div className="about">
<h1>Trace of the reasoning process performed by the agent</h1>
- <h2>The <b>mood</b> represents the effect of the <b>valence</b> on the mood of the agent.<br></br>
- <b>Boredom</b><br></br>
- Observe the evolution of the <b>interactions</b> performed by the agent. <b>Intended</b> interactions are the interactions the agent plans to perform whereas <b>enacted</b> interactions are the interactions actually performed in the physical world of the agent. An interaction is composed of an <b>action</b> and a <b>valence</b>, the valence being dependent of the response from the environment.</h2>
+ <p>The <b>mood</b> represents the effect of the <b>valence</b> on the mood of the agent.</p>
+ <h2>Boredom</h2>
+ <p>
+ Observe the evolution of the <b>interactions</b> performed by the agent. <b>Intended</b> interactions are the interactions the agent plans to perform whereas <b>enacted</b> interactions are the interactions actually performed in the physical world of the agent. An interaction is composed of an <b>action</b> and a <b>valence</b>, the valence being dependent of the response from the environment.
+ </p>
</div>;
} else if (config.displayMode === "settings") {
return <div>
diff --git a/src/LatestInteraction/RosLastestInteraction.js b/src/LatestInteraction/RosLastestInteraction.js
index 91df14bad1e14856a19bcf06fbcf85944e822b94..8e5913ca24b7ea1e8207d9ccbb65b708d1a3cdc8 100644
--- a/src/LatestInteraction/RosLastestInteraction.js
+++ b/src/LatestInteraction/RosLastestInteraction.js
@@ -42,20 +42,6 @@ class RosLatestInteraction extends Component {
}
render() {
- const config = this.props.node.getConfig()
-
- if (config && 'displayMode' in config) {
- if (config.displayMode === "readme") {
- return <div>
- <h2><b>Last action</b> done by the agent and its <b>valence</b>.</h2>
- </div>;
- } else if (config.displayMode === "settings") {
- return <div>
- <p>config panel</p>
- </div>;
- }
- }
-
return <LatestInteraction intended={this.state.intended} enacted={this.state.enacted} {...this.props}/>
}
}
diff --git a/src/LatestInteraction/index.js b/src/LatestInteraction/index.js
index c0567d016977ce470182c4ddf882cf4fa2c4e62e..47c459b88fd0823a66d5e741d8b232a4cd4ecfe0 100644
--- a/src/LatestInteraction/index.js
+++ b/src/LatestInteraction/index.js
@@ -46,6 +46,20 @@ function LatestInteraction(props) {
);
}
+ const config = this.props.node.getConfig()
+ if (config && 'displayMode' in config) {
+ if (config.displayMode === "readme") {
+ return <div className="about">
+ <p><b>Last action</b> done by the agent and its <b>valence</b>.</p>
+ <p>If you place your mouse pointer over an <b>action</b> in the interaction trace, this widget will display the <b>full interaction</b>.</p>
+ </div>;
+ } else if (config.displayMode === "settings") {
+ return <div>
+ <p>config panel</p>
+ </div>;
+ }
+ }
+
return (
<div className="latest-interaction">
{iteration}
diff --git a/src/LineChart/RosLineChart.js b/src/LineChart/RosLineChart.js
index 79983bca65b04938ec0b7d24e3911effa5a7379c..c6c95147b2f1d801c6f8af3b6d0cb5efa47a3230 100644
--- a/src/LineChart/RosLineChart.js
+++ b/src/LineChart/RosLineChart.js
@@ -64,9 +64,7 @@ class RosLineChart extends Component {
const config = this.props.node.getConfig()
if (config.displayMode === "readme") {
- return <div>
- <h2>This <b>linechart</b> represents a <b>measure</b> evolving over time.</h2>
- </div>;
+ return <p className="about">This <b>linechart</b> represents a <b>measure</b> evolving over time.</p>;
}
if (config.displayMode === "settings") {
diff --git a/src/MemoryRanked/MemoryRanked.js b/src/MemoryRanked/MemoryRanked.js
index f0b2d569e6320b887bd96702ece9607582cf9c95..202784df12651c9422fcba0dab89534559582acd 100644
--- a/src/MemoryRanked/MemoryRanked.js
+++ b/src/MemoryRanked/MemoryRanked.js
@@ -134,6 +134,21 @@ class MemoryRanked extends Component {
xLabel: "Valence"
}
];
+
+
+ const config = this.props.node.getConfig()
+ if (config && 'displayMode' in config) {
+ if (config.displayMode === "readme") {
+ return <div className="about">
+ <h1>Display the sequences of the interactions learnt by the agent</h1>
+ <p>Each time the agent performs a <b>sequence of interactions</b> in the environment, it records the corresponding <b>valence</b> and stores it in the memory. Each record is called an <b>occurence</b> of the sequence.</p>
+ </div>;
+ } else if (config.displayMode === "settings") {
+ return <div>
+ <p>config panel</p>
+ </div>;
+ }
+ }
const viewbox = "0 0 " + (width + this.margin.left + this.margin.right)
+ " " + (height + this.margin.top + this.margin.bottom);
diff --git a/src/MemoryRanked/RosMemoryRanked.js b/src/MemoryRanked/RosMemoryRanked.js
index 43bc9de3bde4c6538ec280ba57cb7788264effe2..31afc2a4deddc0ce6f8ad164f8cdaf037835756b 100644
--- a/src/MemoryRanked/RosMemoryRanked.js
+++ b/src/MemoryRanked/RosMemoryRanked.js
@@ -34,21 +34,6 @@ class RosMemoryRanked extends Component {
}
render () {
- const config = this.props.node.getConfig()
-
- if (config && 'displayMode' in config) {
- if (config.displayMode === "readme") {
- return <div>
- <h1>Display the sequences of the interactions learnt by the agent</h1>
- <h2>Each time the agent performs a <b>sequence of interactions</b> in the environment, it records the corresponding <b>valence</b> and stores it in the memory. Each record is called an <b>occurence</b> of the sequence.</h2>
- </div>;
- } else if (config.displayMode === "settings") {
- return <div>
- <p>config panel</p>
- </div>;
- }
- }
-
return <MemoryRanked data={this.state.data} xLabel={this.state.xLabel} yLabel={this.state.yLabel} {...this.props}/>
}
}
diff --git a/src/Mood/Mood.js b/src/Mood/Mood.js
index a95808618d13c319aab8ea59698e1888c76fc128..65c282e666621243f11bd29dc6aacb603b59212e 100644
--- a/src/Mood/Mood.js
+++ b/src/Mood/Mood.js
@@ -13,6 +13,18 @@ export function Mood(props) {
"PLEASED": "images/mood/mood-happy.svg",
"BORED": "images/mood/mood-bored.svg"
};
+
+ const config = this.props.node.getConfig()
+ if (config && 'displayMode' in config) {
+ if (config.displayMode === "readme") {
+ return <p className="about">The <b>current mood</b> of the agent regarding the valences of its actions.</p>;
+ } else if (config.displayMode === "settings") {
+ return <div>
+ <p>config panel</p>
+ </div>;
+ }
+ }
+
return (<img alt={"the current mood of the agent is "+props.mood} src={image[props.mood]}
width={props.size.height} height={props.size.height}
className="mood" />);
diff --git a/src/Mood/RosMood.js b/src/Mood/RosMood.js
index 98d560d79f3f4dd17a385a8bcf4b55c4cb037bf3..226251b15f5ede0809e72ab63bd64285903c49e4 100644
--- a/src/Mood/RosMood.js
+++ b/src/Mood/RosMood.js
@@ -36,20 +36,6 @@ class RosMood extends Component {
}
render() {
- const config = this.props.node.getConfig()
-
- if (config && 'displayMode' in config) {
- if (config.displayMode === "readme") {
- return <div>
- <h2>The <b>current mood</b> of the agent regarding the valences of its actions.</h2>
- </div>;
- } else if (config.displayMode === "settings") {
- return <div>
- <p>config panel</p>
- </div>;
- }
- }
-
return <SizedMood mood={this.state.mood} {...this.props}/>
}
}
diff --git a/src/VideoStream/index.js b/src/VideoStream/index.js
index 27db70949b2e40df260a9c8c447750d122e283d2..e49e4f6d6da56c420a201386a223550ed70f70ba 100644
--- a/src/VideoStream/index.js
+++ b/src/VideoStream/index.js
@@ -18,27 +18,27 @@ class VideoStream extends Component {
render() {
const config = this.props.node.getConfig()
-
- if (config.displayMode === "settings") {
- return <div>
- <form className="pure-form pure-form-stacked" onSubmit={(event)=>event.preventDefault()}>
- <fieldset>
- <label>Nice modification option for the module</label>
-
- <label htmlFor="url">URL of the stream</label>
- <input className="pure-input-1" id="url" name="url" type="text" placeholder="http://localhost:8080/..."
- value={this.state.url} onChange={this.handleSettingsChange.bind(this)}/>
- </fieldset>
- </form>
- <p>Changes are automatically saved!</p>
- </div>;
- }
-
- if (config.displayMode === "readme") {
- return <div>
- <h1>See what the agent is seeing</h1>
- <h2><b>Video stream</b> coming from the robot or the device.</h2>
- </div>;
+ if (config && 'displayMode' in config) {
+ if (config.displayMode === "settings") {
+ return <div>
+ <form className="pure-form pure-form-stacked" onSubmit={(event)=>event.preventDefault()}>
+ <fieldset>
+ <label>Nice modification option for the module</label>
+
+ <label htmlFor="url">URL of the stream</label>
+ <input className="pure-input-1" id="url" name="url" type="text" placeholder="http://localhost:8080/..."
+ value={this.state.url} onChange={this.handleSettingsChange.bind(this)}/>
+ </fieldset>
+ </form>
+ <p>Changes are automatically saved!</p>
+ </div>;
+ }
+ if (config.displayMode === "readme") {
+ return <div className="about">
+ <h1>See what the agent is seeing</h1>
+ <p><b>Video stream</b> coming from the robot or the device.</p>
+ </div>;
+ }
}
return (
diff --git a/src/index.js b/src/index.js
index 7c84e37f060ea98494eea9e8fc7fa25a95e4a16f..62d7995baa635f2e52b9c05d96a6675d11849fe6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -51,4 +51,4 @@ class Main extends React.Component {
}
}
-ReactDOM.render(<Main ros={true}/>, document.getElementById("container"));
\ No newline at end of file
+ReactDOM.render(<Main ros={false}/>, document.getElementById("container"));
\ No newline at end of file