Commit f1897672 authored by Dorian Goepp's avatar Dorian Goepp

Propagate to video stream (and fix mood)

parent 06c9ea55
......@@ -14,8 +14,8 @@ import { RosMood, DemoMood } from './Mood'
import DemoString from './String'
// get the default configuration for the layout
// import {flexlayout_json as json} from './demo-1-config'
import {flexlayout_json as json} from './devel-config'
import {flexlayout_json as json} from './demo-1-config'
// import {flexlayout_json as json} from './devel-config'
// CSS common to the whole app
import './Common.css'
......
import React from 'react';
import React, {Component} from 'react';
import sizeMe from 'react-sizeme'
import './Mood.css'
/**
* Display a picture based on the agent's mood.
* @param {any} props React properties
*/
export function Mood(props) {
const image = {
"PAINED": "images/mood/mood-pained.svg",
"PLEASED": "images/mood/mood-happy.svg",
"BORED": "images/mood/mood-bored.svg"
};
export class Mood extends Component {
constructor(props) {
super(props);
const config = 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>;
}
const modes = {
readme: (
<p className="about">
The <b>current mood</b> of the agent regarding the valences of its actions.
</p>)
};
this.image = {
"PAINED": "images/mood/mood-pained.svg",
"PLEASED": "images/mood/mood-happy.svg",
"BORED": "images/mood/mood-bored.svg"
};
}
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" />);
render() {
return (
<img alt={"the current mood of the agent is "+this.props.mood} src={this.image[this.props.mood]}
width={this.props.size.height} height={this.props.size.height}
className="mood" />);
}
}
const SizedMood = sizeMe({monitorHeight: true})(Mood);
......
import React, {Component} from 'react'
import {Modal} from '../utils/modeHandler'
import {has} from 'lodash/object'
import './VideoStream.css'
import { modeHandler } from '../utils/modeHandler';
class VideoStream extends Component {
constructor(props) {
super(props)
this.settingsSchema = {
title: "Video streamer",
type: "object",
required: ["host", "topic"],
properties: {
host: {type: "string", title: "Host (IP or name)", default:"localhost:8081"},
topic: {type: "string", title: "ROS topic (absolute name)", default: "/pepper/image_raw"}
super(props);
this.defaultImage = 'images/default.svg';
}
/**
* Method that returns the display modes and desired settings properties (in JSON Schema for the settings).
* These are used by Modal, from modeHandler, to switch from this component to a configuration view or a readme
* view.
*/
static get modes() {
return {
readme: (
<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>
),
settingsSchema: {
title: "Video streamer",
type: "object",
required: ["host", "topic"],
properties: {
host: {type: "string", title: "Host (IP or name)", default:"localhost:8081"},
topic: {type: "string", title: "ROS topic (absolute name)", default: "/pepper/image_raw"}
}
}
};
this.readme = (
<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>
);
this.defaultImage = '';
this.modeHandler = new modeHandler(this,
() => (this.props.node.getConfig()),
(config) => {this.props.updateConfig(config)});
}
/**
......@@ -38,24 +43,30 @@ class VideoStream extends Component {
getStreamUrl() {
const config = this.props.node.getConfig();
const config_fields = ['topic', 'host'];
// Check that all requierd configuration fields are defined
if (config_fields.reduce((accumulator, field) => accumulator && has(config, field), true)) {
if ('url' in this.props && this.props.url) {
return this.props.url;
} else if (config_fields.reduce((accumulator, field) => accumulator && has(config, field), true)) {
// all requierd configuration fields are defined
return 'http://' + config.host + '/stream?topic=' + config.topic;
} else {
return ('url' in this.props && this.props.url) ? this.props.url : this.defaultImage;
return this.defaultImage;
}
}
render() {
return this.modeHandler.modalDisplay(
<div className="video-stream container">
<img src={this.getStreamUrl()} alt="there should have been a video stream here"/>
</div>);
return (
<div className="video-stream container">
<img src={this.getStreamUrl()} alt="there should have been a video stream here"/>
</div>);
}
}
function DemoVideoStream(props) {
return <VideoStream url="images/table-right.jpg" node={props.node}/>;
return <VideoStream url="images/table-right.jpg" {...props}/>;
}
function ModalVideoStream(props){
return <Modal component={VideoStream} {...props}/>;
}
export {VideoStream, DemoVideoStream};
export {ModalVideoStream as VideoStream, DemoVideoStream};
Markdown is supported
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