Skip to content

Commit

Permalink
Instructions Added
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlayKharadi
AlayKharadi committed Jul 22, 2021
1 parent 2ec66a6 commit dd65faf
Show file tree
Hide file tree
Showing 11 changed files with 180 additions and 12,574 deletions.
24 changes: 24 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@
"name": "ros-web-app",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.16.0",
"npm": "7.19.1"
},
"dependencies": {
"@material-ui/core": "^4.12.1",
"@material-ui/lab": "^4.0.0-alpha.60",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
Expand Down
2 changes: 0 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand Down
17 changes: 0 additions & 17 deletions public/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
Expand Down
70 changes: 31 additions & 39 deletions src/components/Control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import * as action_type from "../storage/actiontype";
import ROSLIB from 'roslib';
import { useSelector } from "react-redux";
import { useEffect, useState } from 'react';
import { Button, Container, FormControl, InputLabel, OutlinedInput, FormHelperText } from '@material-ui/core';
import { Col, Jumbotron, Row } from 'react-bootstrap';
import { Button, Container, TextField } from '@material-ui/core';
import { Col, Row } from 'react-bootstrap';

const Control = () => {
let connected = useSelector(state => state.connected);
const [ws, setWS] = useState(userStore.getState().ws_address);
const [topicName, setTopicName] = useState('');
const [topicName, setTopicName] = useState(userStore.getState().topic === null ? "" : userStore.getState().topic.name);

useEffect(() => {
// link for the web
Expand Down Expand Up @@ -156,7 +156,7 @@ const Control = () => {

return (

<Jumbotron style={{ marginBottom: '0px' }}>
<div className="container" style={{ marginBottom: '0px' }}>
<Row>
<Container>
<h3>Connection Status:</h3>
Expand All @@ -171,38 +171,34 @@ const Control = () => {
Not connected
</p>
}
<hr />
</Container>
<hr />

<Container>
<Row>
<Col style={{ padding: '5px' }}>
<FormControl fullWidth>
<InputLabel htmlFor="ws_address" variant="outlined" error={false}>Websocket server address:</InputLabel>
<OutlinedInput
id="ws_address"
type="text"
name="ws_address"
label="Websocket server address"
error={false}
aria-describedby="my-helper-text-user"
value={ws === null ? '' : ws}
onChange={(e) => setWS(e.target.value)}
/>
<FormHelperText id="my-helper-text-ws_address" error={false}>{""}</FormHelperText>
</FormControl>
<Col>
<TextField
id="ws_address"
type="text"
name="ws_address"
variant="filled"
label="Websocket server address:"
value={ws === null ? '' : ws}
onChange={(e) => setWS(e.target.value)}
fullWidth
/>
</Col>
</Row>

<Row>
<Col style={{ padding: '5px' }}>
<Col>
{
connected ?
<Button variant="contained" color="secondary" onClick={disconnect}>
<Button variant="contained" color="secondary" onClick={disconnect} style={{marginTop: "10px"}}>
Disconnect
</Button>
:
<Button variant="contained" color="primary" onClick={connect}>
<Button variant="contained" color="primary" onClick={connect} style={{ marginTop: "10px" }}>
Connect
</Button>
}
Expand All @@ -212,21 +208,17 @@ const Control = () => {
<hr />

<Row>
<Col style={{ padding: '5px' }}>
<FormControl fullWidth>
<InputLabel htmlFor="topic_name" variant="outlined" error={false}>Topic Name:</InputLabel>
<OutlinedInput
id="topic_name"
type="text"
name="topic_name"
label="Topic Name"
error={false}
aria-describedby="my-helper-text-topic_name"
value={topicName === null ? '' : topicName}
onChange={(e) => setTopicName(e.target.value)}
/>
<FormHelperText id="my-helper-text-topic_name" error={false}>{""}</FormHelperText>
</FormControl>
<Col>
<TextField
id="topic_name"
type="text"
name="topic_name"
variant="filled"
label="Topic Name:"
value={topicName === null ? '' : topicName}
onChange={(e) => setTopicName(e.target.value)}
fullWidth
/>
</Col>
</Row>
</Container>
Expand Down Expand Up @@ -294,7 +286,7 @@ const Control = () => {
</Row>
</Container>
</Row>
</Jumbotron>
</div>
);
}

Expand Down
50 changes: 27 additions & 23 deletions src/components/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
import "bootstrap/dist/css/bootstrap.min.css";
import { Jumbotron } from "react-bootstrap";
import { useState } from "react";
import { Tabs, Tab } from "react-bootstrap";
import Offline from "./Offline";
import Online from "./Online";

function Home() {
const [key, setKey] = useState('online');

return (
<Jumbotron style={{ marginBottom: '0px' }}>
<h1>Hello from ROSDS!</h1>
<hr />
<h2>Go to <a href="https://app.theconstructsim.com/" target="_blank" rel="noreferrer">Constructsim</a></h2>
<div className="container" style={{ marginBottom: '0px' }}>
<h3>Introduction:</h3>
<ul>
<li>
<p>create account</p>
</li>
<li>
<p>Go to Project</p>
</li>
<li>
<p>create a new Project</p>
</li>
<li>
<p>Run the Project</p>
</li>
<li>
<p>Run ROSBridge Websocket Server via terminal</p>
<p>command:<code> roslaunch rosbridge_server rosbridge_websocket.launch</code></p>
</li>
<li>We have created an online website through which you can control the ROS robot.</li>
<li>Below you have instructions for how to use the website both in online or offline mode.</li>
<li>you can find controller in control section.</li>
<li>logs regarding the connection process are in logs section.</li>
<li>This is part of our Institute's project. If you want to contribute to this project this is the link <a href="https://github.com/AlayKharadi/Ros-Web-App" target="_blank" rel="noreferrer">Github Project</a>. feel free to add something new to this project.</li>

</ul>
</Jumbotron>
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="online" title="Online">
<Online></Online>
</Tab>
<Tab eventKey="offline" title="Offline">
<Offline></Offline>
</Tab>
</Tabs>
</div>
);
}

Expand Down
7 changes: 3 additions & 4 deletions src/components/Logs.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import { useSelector } from "react-redux";
import { Jumbotron } from 'react-bootstrap';
import { Alert, AlertTitle } from '@material-ui/lab';

const Logs = () => {
let logs = useSelector(state => state.logs);

return (
<Jumbotron style={{ marginBottom: '0px' }}>
<h3>Log messages</h3>
<div className="container" style={{ marginBottom: '0px' }}>
<h3>Log messages:</h3>
<div>
<ul>
{
Expand Down Expand Up @@ -45,7 +44,7 @@ const Logs = () => {
}
</ul>
</div>
</Jumbotron>
</div>
);
}

Expand Down
40 changes: 40 additions & 0 deletions src/components/Offline.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const Offline = () => {
return (
<div>
<h3>To connect in Linux ROS Enviornment</h3>
<hr />
<ul>
<li>
<p>Open terminal run below command.</p>
<p>command : <code>roscore</code></p>
</li>
<li>
<p>Open another terminal and run below command.</p>
<p>command : <code>rosrun turtlesim turtlesim_node</code></p>
</li>
<li>
<p>Run ROSBridge Websocket Server via another terminal</p>
<p>command : <code>roslaunch rosbridge_server rosbridge_websocket.launch</code></p>
</li>
<li>
<p>Write <code>ws://localhost:9090</code> or <code>ws://127.0.0.1:9090</code> it in our website's control section's websocket server address field.</p>
</li>
<li>
<p>controller will be enabled as soon as you click <code>connect</code> button.</p>
</li>
<li>
<p>Put <code>/turtle1/cmd_vel</code> in the Topic Name to use controller.</p>
</li>
<li>
<p>You are good to go.</p>
</li>
<li>
<p>You can see your robot moving the constructsim's simulator.</p>
</li>

</ul>
</div>
);
}

export default Offline;
Loading

1 comment on commit dd65faf

@vercel
Copy link

@vercel vercel bot commented on dd65faf May 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ros-web-app – ./

ros-web-app.vercel.app
ros-web-app-git-main-alaykharadi.vercel.app
ros-web-app-alaykharadi.vercel.app

Please sign in to comment.