added start page to allow for boot audio
This commit is contained in:
parent
f06c0ae64d
commit
1a497e6aba
|
@ -45,6 +45,9 @@
|
||||||
<Folder Include="GroundControl\Assets\" />
|
<Folder Include="GroundControl\Assets\" />
|
||||||
<Folder Include="GroundControl\frontend\" />
|
<Folder Include="GroundControl\frontend\" />
|
||||||
<Folder Include="GroundControl\frontend\public\" />
|
<Folder Include="GroundControl\frontend\public\" />
|
||||||
|
<Folder Include="GroundControl\frontend\public\Assets\" />
|
||||||
|
<Folder Include="GroundControl\frontend\public\Assets\image\" />
|
||||||
|
<Folder Include="GroundControl\frontend\public\Assets\sound\" />
|
||||||
<Folder Include="GroundControl\frontend\src\" />
|
<Folder Include="GroundControl\frontend\src\" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
|
@ -98,6 +101,10 @@
|
||||||
<Content Include="Assets\Sphere\0048.png" />
|
<Content Include="Assets\Sphere\0048.png" />
|
||||||
<Content Include="Assets\Sphere\0049.png" />
|
<Content Include="Assets\Sphere\0049.png" />
|
||||||
<Content Include="Assets\Sphere\0050.png" />
|
<Content Include="Assets\Sphere\0050.png" />
|
||||||
|
<Content Include="GroundControl\frontend\public\Assets\image\BoSLOO logo.txt" />
|
||||||
|
<Content Include="GroundControl\frontend\public\Assets\image\testMap.png" />
|
||||||
|
<Content Include="GroundControl\frontend\public\Assets\sound\apricot-rustle-boot.wav" />
|
||||||
|
<Content Include="GroundControl\frontend\public\Assets\sound\disc-seek-test.mp3" />
|
||||||
<Content Include="GroundControl\frontend\src\BoSLOO logo.json" />
|
<Content Include="GroundControl\frontend\src\BoSLOO logo.json" />
|
||||||
<Content Include="GroundControl\frontend\.gitignore" />
|
<Content Include="GroundControl\frontend\.gitignore" />
|
||||||
<Content Include="GroundControl\frontend\package-lock.json" />
|
<Content Include="GroundControl\frontend\package-lock.json" />
|
||||||
|
@ -112,6 +119,7 @@
|
||||||
<Content Include="GroundControl\frontend\src\commands.js" />
|
<Content Include="GroundControl\frontend\src\commands.js" />
|
||||||
<Content Include="GroundControl\frontend\src\index.css" />
|
<Content Include="GroundControl\frontend\src\index.css" />
|
||||||
<Content Include="GroundControl\frontend\src\index.js" />
|
<Content Include="GroundControl\frontend\src\index.js" />
|
||||||
|
<Content Include="GroundControl\frontend\src\statusbar.js" />
|
||||||
<Content Include="GroundControl\frontend\src\terminal.js" />
|
<Content Include="GroundControl\frontend\src\terminal.js" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />
|
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />
|
||||||
|
|
BIN
GroundControl/frontend/public/Assets/image/testMap.png
Normal file
BIN
GroundControl/frontend/public/Assets/image/testMap.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
BIN
GroundControl/frontend/public/Assets/sound/disc-seek-test.mp3
Normal file
BIN
GroundControl/frontend/public/Assets/sound/disc-seek-test.mp3
Normal file
Binary file not shown.
|
@ -27,9 +27,10 @@
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<audio id="boot-sound" src="./Assets/sound/disc-seek-test.mp3">Your browser does not support audio.</audio>
|
||||||
<!--
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
This HTML file is a template.
|
This HTML file is a template.
|
||||||
If you open it directly in the browser, you will see an empty page.
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
@ -23,7 +23,11 @@ class helpCommand extends Command{
|
||||||
|
|
||||||
call(body) {
|
call(body) {
|
||||||
if (body === "") {
|
if (body === "") {
|
||||||
return (this.helpString);
|
var commands = "";
|
||||||
|
for (let command of commandList) {
|
||||||
|
commands += command.keyword + " ";
|
||||||
|
}
|
||||||
|
return (commands);
|
||||||
} else {
|
} else {
|
||||||
for (let command of commandList) {
|
for (let command of commandList) {
|
||||||
if (body === command.keyword || body === command.fullName) {
|
if (body === command.keyword || body === command.fullName) {
|
||||||
|
|
|
@ -8,7 +8,6 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: #02d300;
|
color: #02d300;
|
||||||
text-shadow: 0 0 6px #73ff71;
|
text-shadow: 0 0 6px #73ff71;
|
||||||
margin: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body::after {
|
body::after {
|
||||||
|
@ -27,10 +26,28 @@ body::after {
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.power-on-container {
|
||||||
|
height: 90vh;
|
||||||
|
align-items:center;
|
||||||
|
justify-items:center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.power-on-box {
|
||||||
|
position:relative;
|
||||||
|
justify-self:center;
|
||||||
|
margin-top: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#start-text{
|
||||||
|
font-size: 30px;
|
||||||
|
border:double;
|
||||||
|
padding:2em 6em;
|
||||||
|
}
|
||||||
|
|
||||||
.console {
|
.console {
|
||||||
padding-left: 6em;
|
padding-top: 15vh;
|
||||||
padding-top: 10vh;
|
height: 70vh;
|
||||||
height: 80vh;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -46,10 +63,12 @@ body::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-window{
|
.terminal-window{
|
||||||
width: 40%;
|
width: 65%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-line{
|
.active-line{
|
||||||
|
|
|
@ -5,15 +5,29 @@ import ClickableDiv from 'react-clickable-div';
|
||||||
import KeyboardEventHandler from 'react-keyboard-event-handler'
|
import KeyboardEventHandler from 'react-keyboard-event-handler'
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import logos from './BoSLOO logo.json';
|
import logos from './BoSLOO logo.json';
|
||||||
import Terminal from './terminal.js'
|
import Terminal from './terminal.js';
|
||||||
|
import StatusBar from './statusbar.js';
|
||||||
|
|
||||||
|
const nominal = <div><Terminal /><StatusBar /></div>;
|
||||||
|
|
||||||
class Console extends React.Component {
|
class Console extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
this.swapper = this.swapper.bind(this);
|
||||||
this.state = {
|
this.state = {
|
||||||
bodyObj: <span><SelfTest /><KeyboardEventHandler handleKeys={['all']} onKeyEvent={(key, e) => { this.replaceBody(<Terminal />); this.setState({ init: true }) }} /></span>,
|
bodyObj: <PowerOn onClick={this.swapper} />,
|
||||||
init: false,
|
init: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
swapper(key, e) {
|
||||||
|
if (this.state.init === 0) {
|
||||||
|
this.replaceBody(<SelfTest />);
|
||||||
|
this.playSound();
|
||||||
|
} else if (this.state.init === 1) {
|
||||||
|
this.replaceBody(nominal);
|
||||||
}
|
}
|
||||||
|
this.setState({ init: this.state.init + 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
appendToBody(newContent) {
|
appendToBody(newContent) {
|
||||||
|
@ -29,9 +43,16 @@ class Console extends React.Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
playSound() {
|
||||||
|
var sound = document.getElementById("boot-sound")
|
||||||
|
sound.volume = 0.1;
|
||||||
|
sound.play();
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className='console'>
|
<div className='console'>
|
||||||
|
<KeyboardEventHandler handleKeys={['all']} onKeyEvent={this.swapper} />
|
||||||
{this.state.bodyObj}
|
{this.state.bodyObj}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -43,17 +64,17 @@ class SelfTest extends React.Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
logodisplay: false
|
logodisplay: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const final = <span className='logo'>{logos.logo} < br /><br /><br /><Typing speed={5}>Press any key to continue...<br />{'>'} <span className='blink-text'>_</span></Typing></span>;
|
const final = <span className='logo'>{logos.logo} < br /><br /><br /><Typing speed={5}>Press any key to continue...<br />{'>'} <span className='blink-text'>_</span></Typing></span>;
|
||||||
return (
|
return (
|
||||||
<div className='power-on-self-test'>
|
<div className='power-on-self-test'>
|
||||||
<Typing speed={5} onFinishedTyping={() => this.setState({logodisplay: true})}>
|
<Typing speed={30} onFinishedTyping={() => this.setState({ logodisplay: true })}>
|
||||||
BoSLOO ACPI BIOS v0.1<br />
|
BoSLOO ACPI BIOS v0.1<br />
|
||||||
Sakimori Ind. 2022<br />
|
Sakimori Ind. 2022<br />
|
||||||
Initializing cache.................................<Typing.Speed ms={200} />...<Typing.Speed ms={5} /> OK!<br />
|
<Typing.Speed ms={ 5}/>Initializing cache.................................<Typing.Speed ms={200} />...<Typing.Speed ms={5} /> OK!<br />
|
||||||
Initializing network.........<Typing.Speed ms={500} />....<Typing.Speed ms={5} />.................<Typing.Speed ms={300} />....<Typing.Speed ms={5} /> OK!<br />
|
Initializing network.........<Typing.Speed ms={500} />....<Typing.Speed ms={5} />.................<Typing.Speed ms={300} />....<Typing.Speed ms={5} /> OK!<br />
|
||||||
Initializing GPU...................................<Typing.Speed ms={1000} />...<Typing.Speed ms={5} /> <span className='fail-text'>FAIL!</span><br />
|
Initializing GPU...................................<Typing.Speed ms={1000} />...<Typing.Speed ms={5} /> <span className='fail-text'>FAIL!</span><br />
|
||||||
<br />
|
<br />
|
||||||
|
@ -64,6 +85,12 @@ class SelfTest extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PowerOn(props) {
|
||||||
|
return (
|
||||||
|
<div className="power-on-container"><div className='power-on-box'><span id='start-text' onClick={props.onClick}><span className='blink-text'>START</span></span></div></div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// =========================================
|
// =========================================
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
|
|
9
GroundControl/frontend/src/statusbar.js
Normal file
9
GroundControl/frontend/src/statusbar.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
class StatusBar extends React.Component {
|
||||||
|
render() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StatusBar
|
Loading…
Reference in a new issue