From e84a29f1a8d9d1d8e6e84a8d9069d886b6d80b00 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Mon, 8 Apr 2019 18:31:40 +0200
Subject: [PATCH] Little improvement on the readmes of each widget
---
public/LearnMore.css | 74 +++++++++----------
public/light-flat.css | 2 +-
src/Common.css | 20 +++--
src/HorizontalGauge/HozirontalGauge.js | 4 +-
src/InteractionTrace/InteractionTrace.js | 10 ++-
.../RosLastestInteraction.js | 14 ----
src/LatestInteraction/index.js | 14 ++++
src/LineChart/RosLineChart.js | 4 +-
src/MemoryRanked/MemoryRanked.js | 15 ++++
src/MemoryRanked/RosMemoryRanked.js | 15 ----
src/Mood/Mood.js | 12 +++
src/Mood/RosMood.js | 14 ----
src/VideoStream/index.js | 42 +++++------
src/index.js | 2 +-
14 files changed, 122 insertions(+), 120 deletions(-)
diff --git a/public/LearnMore.css b/public/LearnMore.css
index 9ed59bb..2e6a4fe 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 340c0c2..c96628e 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 a3eaa66..20bbfec 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 85e33f0..65fca8a 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 8c63019..2d3a1bf 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 91df14b..8e5913c 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 c0567d0..47c459b 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 79983bc..c6c9514 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 f0b2d56..202784d 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 43bc9de..31afc2a 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 a958086..65c282e 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 98d560d..226251b 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 27db709..e49e4f6 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 7c84e37..62d7995 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
--
GitLab