From 618e2bb61e5ed657f068eb1bb606b00885d055eb Mon Sep 17 00:00:00 2001
From: Laurianne Charrier <laurianne.charrier@hoomano.com>
Date: Wed, 3 Apr 2019 17:27:46 +0200
Subject: [PATCH] Adding readme to all the gadgets (aim to be slightly
modified)
---
src/Common.css | 13 ++++++++-
src/HorizontalGauge/HozirontalGauge.js | 24 +++++++++++----
src/InteractionTrace/InteractionTrace.js | 9 +++---
.../RosLastestInteraction.js | 24 +++++++++++----
src/MemoryRanked/RosMemoryRanked.js | 17 ++++++++++-
src/Mood/RosMood.js | 24 +++++++++++----
src/VideoStream/index.js | 20 +++++++++----
src/devel-2-config.js | 29 +++++++++++++++----
8 files changed, 129 insertions(+), 31 deletions(-)
diff --git a/src/Common.css b/src/Common.css
index 570e19e..42705be 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -12,4 +12,15 @@
.valence-negative {
color: #d62728;
fill: #d62728;
-}
\ No newline at end of file
+}
+
+h1 {
+ color: #edc61b;
+ text-align:center;
+}
+
+h2 {
+ color:#383838;
+ font-weight: normal;
+ padding-left: 10px;
+}
diff --git a/src/HorizontalGauge/HozirontalGauge.js b/src/HorizontalGauge/HozirontalGauge.js
index a9757a2..85e33f0 100644
--- a/src/HorizontalGauge/HozirontalGauge.js
+++ b/src/HorizontalGauge/HozirontalGauge.js
@@ -6,19 +6,19 @@ import "./HorizontalGauge.css";
class HorizontalGauge extends Component {
render() {
const value = ('value' in this.props && this.props.value) ? this.props.value : 0;
-
+
// Define the dimensions of the gaug
const margin = { left:10, top: 10, right: 10, bottom: 10}
, width = this.props.size.width - margin.left - margin.right
, height = 20;
const viewbox = "0 0 " + (width + margin.left + margin.right) +" "+ (height + margin.top + margin.bottom);
-
+
// Scale to map from values in [0, 1] to values in [0, width] (callable)
const xScale = scaleLinear()
.domain([0, 1])
.range([0, width])
.clamp(true);
-
+
const svg = <svg viewBox={viewbox} width={width + margin.left + margin.right} height={height + margin.top + margin.bottom}>
{/* translate to add some margin around the gauge */}
<g className="gauge" transform={"translate(" + margin.left + "," + margin.top + ")"}>
@@ -32,9 +32,23 @@ class HorizontalGauge extends Component {
</text>
</g>
</svg>;
-
+
+ const config = this.props.node.getConfig()
+
+ 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>;
+ } else if (config.displayMode === "settings") {
+ return <div>
+ <p>config panel</p>
+ </div>;
+ }
+ }
+
return <div>{svg}</div>;
}
}
-export default sizeMe()(HorizontalGauge);
\ No newline at end of file
+export default sizeMe()(HorizontalGauge);
diff --git a/src/InteractionTrace/InteractionTrace.js b/src/InteractionTrace/InteractionTrace.js
index 15251a2..0682da5 100644
--- a/src/InteractionTrace/InteractionTrace.js
+++ b/src/InteractionTrace/InteractionTrace.js
@@ -286,11 +286,12 @@ class InteractionTrace extends Component {
if (config && 'displayMode' in config) {
if (config.displayMode === "readme") {
return <div>
- <p>Info info info info</p>
+ <h1>Understand what is happening inside the head of the agent</h1>
+ <h2>The <b>mood</b> represent the effect of the <b>valence</b> on the mood of the agent.<br></br>
+ Boredom<br></br>
+ Observe the evolution of the <b>actions</b> of the agent and their <b>intended</b> and <b>enacted</b> (actually obtained) <b>valences</b> </h2>
</div>;
- }
-
- if (config.displayMode === "settings") {
+ } else if (config.displayMode === "settings") {
return <div>
<p>config panel</p>
</div>;
diff --git a/src/LatestInteraction/RosLastestInteraction.js b/src/LatestInteraction/RosLastestInteraction.js
index 70cf8be..91df14b 100644
--- a/src/LatestInteraction/RosLastestInteraction.js
+++ b/src/LatestInteraction/RosLastestInteraction.js
@@ -6,7 +6,7 @@ import {LatestInteraction} from './index'
class RosLatestInteraction extends Component {
constructor(props) {
super(props)
-
+
this.state = {intended: {
action_names: [],
primitive_valences: []
@@ -19,7 +19,7 @@ class RosLatestInteraction extends Component {
type: "april_messages/trace"
}
}
-
+
componentDidMount() {
if ('ros' in this.props && this.props.ros) {
this.trace_listener = new RosLib.Topic({
@@ -34,16 +34,30 @@ class RosLatestInteraction extends Component {
console.warn('RosMood expects to be passed a valid Ros object as property, got ', this.props.ros);
}
}
-
+
componentWillUnmount() {
if ('trace_listener' in this) {
this.trace_listener.unsubscribe();
}
}
-
+
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}/>
}
}
-export { RosLatestInteraction };
\ No newline at end of file
+export { RosLatestInteraction };
diff --git a/src/MemoryRanked/RosMemoryRanked.js b/src/MemoryRanked/RosMemoryRanked.js
index 60b5b57..70efa63 100644
--- a/src/MemoryRanked/RosMemoryRanked.js
+++ b/src/MemoryRanked/RosMemoryRanked.js
@@ -34,8 +34,23 @@ class RosMemoryRanked extends Component {
}
render () {
+ const config = this.props.node.getConfig()
+
+ if (config && 'displayMode' in config) {
+ if (config.displayMode === "readme") {
+ return <div>
+ <h1>Know what the agent is knowing</h1>
+ <h2>The agent knows the <b>valence</b> of the <b>actions</b> that it knows before exploring the world and then the <b>actions</b> that it makes, with their <b>occurency</b></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}/>
}
}
-export {RosMemoryRanked}
\ No newline at end of file
+export {RosMemoryRanked}
diff --git a/src/Mood/RosMood.js b/src/Mood/RosMood.js
index 5ce26df..98d560d 100644
--- a/src/Mood/RosMood.js
+++ b/src/Mood/RosMood.js
@@ -6,14 +6,14 @@ import { SizedMood } from './Mood'
class RosMood extends Component {
constructor(props) {
super(props)
-
+
this.state = {mood: "PLEASED"};
this.mood = {
topic: "/algorithm/mood",
type: "april_messages/mood"
}
}
-
+
componentDidMount() {
if ('ros' in this.props && this.props.ros) {
this.mood_listener = new RosLib.Topic({
@@ -28,16 +28,30 @@ class RosMood extends Component {
console.warn('RosMood expects to be passed a valid Ros object as property, got ', this.props.ros);
}
}
-
+
componentWillUnmount() {
if ('mood_listener' in this) {
this.mood_listener.unsubscribe();
}
}
-
+
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}/>
}
}
-export { RosMood };
\ No newline at end of file
+export { RosMood };
diff --git a/src/VideoStream/index.js b/src/VideoStream/index.js
index 70b45fa..27db709 100644
--- a/src/VideoStream/index.js
+++ b/src/VideoStream/index.js
@@ -10,13 +10,16 @@ class VideoStream extends Component {
url: hasUrl ? this.props.url : 'http://localhost:8081/stream?topic=/pepper/image_raw'
}
}
-
+
handleSettingsChange(event) {
this.setState({url: event.target.value})
}
-
+
render() {
- if (this.props.node.getConfig().settingsMode) {
+
+ const config = this.props.node.getConfig()
+
+ if (config.displayMode === "settings") {
return <div>
<form className="pure-form pure-form-stacked" onSubmit={(event)=>event.preventDefault()}>
<fieldset>
@@ -30,7 +33,14 @@ class VideoStream extends Component {
<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>;
+ }
+
return (
<div className="video-stream container">
<img src={this.state.url} alt="there should have been a video stream here"/>
@@ -42,4 +52,4 @@ function DemoVideoStream(props) {
return <VideoStream url="images/table-right.jpg" node={props.node}/>;
}
-export {VideoStream, DemoVideoStream};
\ No newline at end of file
+export {VideoStream, DemoVideoStream};
diff --git a/src/devel-2-config.js b/src/devel-2-config.js
index ac75804..0c52a04 100644
--- a/src/devel-2-config.js
+++ b/src/devel-2-config.js
@@ -39,7 +39,11 @@ export const flexlayout_json = {
{
"type": "tab",
"name": "Robot's memory",
- "component": "memory"
+ "component": "memory",
+ "config": {
+ "configurable": false,
+ "hasReadme": true
+ },
},
]
},
@@ -55,7 +59,11 @@ export const flexlayout_json = {
{
"type": "tab",
"name": "Latest interaction",
- "component": "latest-interaction"
+ "component": "latest-interaction",
+ "config": {
+ "configurable": false,
+ "hasReadme": true
+ },
},
]
},
@@ -69,7 +77,11 @@ export const flexlayout_json = {
{
"type": "tab",
"name": "Current mood",
- "component": "mood"
+ "component": "mood",
+ "config": {
+ "configurable": false,
+ "hasReadme": true
+ },
},
]
},
@@ -79,7 +91,11 @@ export const flexlayout_json = {
{
"type": "tab",
"name": "Involvement",
- "component": "h-gauge"
+ "component": "h-gauge",
+ "config": {
+ "configurable": false,
+ "hasReadme": true
+ },
},
]
},
@@ -93,7 +109,10 @@ export const flexlayout_json = {
"type": "tab",
"name": "Robot video stream",
"component": "demo-video",
- "config": {"configurable": false}
+ "config": {
+ "configurable": false,
+ "hasReadme": true
+ }
}
]
}
--
GitLab