Commit e84a29f1 authored by Dorian Goepp's avatar Dorian Goepp
Browse files

Little improvement on the readmes of each widget

parent 616559f4
......@@ -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);
}
......@@ -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 {
......
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;
}
......@@ -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>
......
......@@ -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>
......
......@@ -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}/>
}
}
......
......@@ -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}
......
......@@ -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") {
......
......@@ -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);
......
......@@ -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}/>
}
}
......
......@@ -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" />);
......
......@@ -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}/>
}
}
......
......@@ -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 (
......
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment