Skip to content

Commit 60b2d19

Browse files
anserwaseemanserwaseem
committed
added details and videos in help page
1 parent ffcb492 commit 60b2d19

File tree

7 files changed

+208
-1
lines changed

7 files changed

+208
-1
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Automadeasy } from "./components/Automadeasy";
44
import { NavBar } from "./components/Navbar";
55
import { Editor } from "./components/Editor";
66
import { Pages } from "./enums/Pages";
7+
import { Help } from "./components/Help";
78

89
function App() {
910
return (
@@ -13,6 +14,7 @@ function App() {
1314
<Routes>
1415
<Route path={process.env.PUBLIC_URL} element={<Automadeasy />} />
1516
<Route path={`${process.env.PUBLIC_URL}/${Pages.Editor}`} element={<Editor />} />
17+
<Route path={`${process.env.PUBLIC_URL}/${Pages.Help}`} element={<Help />} />
1618
</Routes>
1719
</Router>
1820
);

‎src/common/HelpCard.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Card from "@mui/material/Card";
2+
import CardContent from "@mui/material/CardContent";
3+
import CardMedia from "@mui/material/CardMedia";
4+
import Typography from "@mui/material/Typography";
5+
import { HelpCardProps } from "./props/HelpCardProps";
6+
7+
const testWebm =
8+
"https://github.com/anserwaseem/automadeasy-videos/raw/main/help/video-webm.webm";
9+
10+
const testMp4 =
11+
"https://github.com/anserwaseem/automadeasy-videos/raw/main/help/video-mp4.mp4";
12+
13+
export const HelpCard = (props: HelpCardProps) => {
14+
return (
15+
<Card>
16+
<CardContent>
17+
<Typography variant="body2" color="text.secondary" fontSize="1rem">
18+
{props.description}
19+
</Typography>
20+
</CardContent>
21+
<CardMedia
22+
component="video"
23+
src={props.videoSource}
24+
controls
25+
muted
26+
playsInline
27+
autoPlay
28+
/>
29+
</Card>
30+
);
31+
};

‎src/common/props/HelpCardProps.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export type HelpCardProps = {
2+
title: string;
3+
description: string;
4+
videoSource: string;
5+
}

‎src/components/Help.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { useState } from "react";
2+
import {
3+
Accordion,
4+
AccordionSummary,
5+
Typography,
6+
AccordionDetails,
7+
} from "@mui/material";
8+
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
9+
import { HelpHeaders } from "../enums/HelpHeaders";
10+
import { HelpDetails } from "../enums/HelpDetails";
11+
import { HelpCard } from "../common/HelpCard";
12+
13+
const videoSrc =
14+
"https://github.com/anserwaseem/automadeasy-videos/raw/main/help/";
15+
16+
const headers = Object.values(HelpHeaders);
17+
const details = Object.values(HelpDetails);
18+
19+
export const Help = () => {
20+
const [expanded, setExpanded] = useState<string | false>(false);
21+
22+
const handleChange =
23+
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
24+
setExpanded(isExpanded ? panel : false);
25+
};
26+
27+
return (
28+
<div>
29+
{headers.map((header, index) => (
30+
<Accordion
31+
expanded={expanded === header}
32+
onChange={handleChange(header)}
33+
>
34+
<AccordionSummary
35+
expandIcon={<ExpandMoreIcon />}
36+
aria-controls={`${header}-content`}
37+
id={`${header}-header`}
38+
sx={{
39+
"& .MuiAccordionSummary-content": {
40+
marginRight: 5,
41+
},
42+
}}
43+
>
44+
<Typography
45+
width="33%"
46+
flexShrink={0}
47+
mr={5}
48+
fontSize={
49+
expanded.toString() === header.toString() ? "1.3rem" : "1.1rem"
50+
}
51+
fontWeight={
52+
expanded.toString() === header.toString() ? "bold" : "normal"
53+
}
54+
>
55+
{header}
56+
</Typography>
57+
58+
{expanded.toString() !== header.toString() && (
59+
<Typography
60+
color="text.secondary"
61+
overflow="hidden"
62+
textOverflow="ellipsis"
63+
display="-webkit-box"
64+
sx={{
65+
WebkitLineClamp: "1",
66+
WebkitBoxOrient: "vertical",
67+
}}
68+
>
69+
{details[index]}
70+
</Typography>
71+
)}
72+
</AccordionSummary>
73+
<AccordionDetails>
74+
<HelpCard
75+
title={header}
76+
description={details[index]}
77+
videoSource={videoSrc + Object.keys(HelpHeaders)[index] + ".mp4"}
78+
/>
79+
</AccordionDetails>
80+
</Accordion>
81+
))}
82+
</div>
83+
);
84+
85+
// return (
86+
// <>
87+
// <video controls loop autoPlay={true} muted playsInline>
88+
// <source src={testMp4} type="video/mp4" />
89+
// Sorry, your browser doesn't support embedded videos.
90+
// </video>
91+
// </>
92+
// );
93+
};

‎src/components/Navbar.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Menu from "@mui/material/Menu";
77
import MenuIcon from "@mui/icons-material/Menu";
88
import Container from "@mui/material/Container";
99
import Button from "@mui/material/Button";
10-
import MenuItem from "@mui/material/MenuItem";
1110
import AdbIcon from "@mui/icons-material/Adb";
1211
import { Pages } from "../enums/Pages";
1312
import { Link as RouterLink } from "react-router-dom";

‎src/enums/HelpDetails.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
export enum HelpDetails {
2+
HowToCreateAutomaton = `
3+
To create an automaton, there are two options.
4+
Either states can be dragged in the canvas and connected through transitions filling the transition table automatically,
5+
or transition table can be filled manually creating states and their respective transitions automatically.
6+
Both options can be used simultaneously.`,
7+
8+
HowToDownloadAutomaton = `
9+
To download automaton, click on Tools > Download automaton.
10+
A file will be downloaded with the automaton in JSON format.`,
11+
12+
HowToUploadAutomaton = `
13+
To upload automaton, click on Tools > Upload automaton.
14+
Select your desired file.
15+
The automaton will be uploaded and you continue your work.`,
16+
17+
HowToCheckIfAutomatonIsDFA = `
18+
To check if automaton is DFA, click on Tools > IsDFA.
19+
An automaton is considered a DFA if it has one initial state, final state(s), and exactly
20+
two transitions for each state i.e. a and b transitions. if any state has missing or null
21+
transition, it won't be considered as a DFA.`,
22+
23+
HowToCheckIfAutomatonIsNFA = `
24+
To check if automaton is NFA, click on Tools > IsNFA.
25+
An automaton is considered a NFA if it has one initial state, final state(s), multiple
26+
"a" and "b" transitions, missing or null transition(s).`,
27+
28+
HowToHighlightNullTransitions = `
29+
To highlight null transitions in an automaton, click on Tools > Highlight null transitions.
30+
This will highlight all the null transitions in automaton.`,
31+
32+
HowToConvertNFAtoDFA = `
33+
To convert NFA to DFA, click on Tools > Convert NFA to DFA.
34+
This process requires an already built NFA.
35+
The process first creates a null closure table to demosntrate null closure of each state.
36+
Then a modified transition table is created where every state in transition label is replaced by its null closure.
37+
The process is then followed by transition table for resultant DFA where null null closure of initial state becomes the initial state of DFA.
38+
New state is added whenever their is a new transition label. The process completes when all the states are added to the table.
39+
The process is demonstrated in the video below.
40+
41+
1. Null Closure
42+
2. Modified Transition Table
43+
3. Resultant DFA`,
44+
45+
HowToMinimizeDFA = `
46+
To minimize a DFA, click on Tools > Minimize DFA.
47+
This process requires an already built DFA.
48+
The process is started with a table containing rows and columns equal to the number of states of DFA.
49+
In the first step, all the diagonal entries are marked with "tick".
50+
In the second step, all the upper triangle cells are marked with "dash".
51+
In the third step, all the cells containing one final and one non-final state are marked with a "cross".
52+
After that, the remaining cells are checked one-by-one for their a and b transitions.
53+
If the cell lead by a or b transition is marked with cross, it is marked with a cross.
54+
Or if both cells lead by a and b transitions are marked "tick", then current cell is also marked with a tick.
55+
Otherwise left empty.
56+
This process continues for all the cells.
57+
After that, next iteration is performed following the last mentioned step.
58+
If the table remains same across two iterations, then blank cells are marked with a "tick".
59+
After that, minimized DFA is created with states being merged according to the ticks in each row of the table.`,
60+
61+
HowToTestAStringOnAutomaton = `
62+
To test a string on automaton, click on Tools > test a string. Enter a valid string.
63+
Select animation duration and click play. The animation will start highlighting the path
64+
of each character. Note that if there are null transitions in the automaton, string will go through
65+
them and continue their path after the null transitions.`,
66+
}

‎src/enums/HelpHeaders.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export enum HelpHeaders {
2+
HowToCreateAutomaton = "How to create automaton",
3+
HowToDownloadAutomaton = "How to download automaton",
4+
HowToUploadAutomaton = "How to upload automaton",
5+
HowToCheckIfAutomatonIsDFA = "How to check if automaton is DFA",
6+
HowToCheckIfAutomatonIsNFA = "How to check if automaton is NFA",
7+
HowToHighlightNullTransitions = "How to highlight null transitions on automaton",
8+
HowToConvertNFAtoDFA = "How to convert NFA to DFA",
9+
HowToMinimizeDFA = "How to minimize DFA",
10+
HowToTestAStringOnAutomaton = "How to test a string on automaton",
11+
}

0 commit comments

Comments
 (0)