-
-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an experimental browser-based GUI
- Loading branch information
Showing
39 changed files
with
10,746 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules/ | ||
dist/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
module.exports = { | ||
"env": { | ||
"browser": true, | ||
"es2021": true | ||
}, | ||
"extends": [ | ||
"eslint:recommended", | ||
"plugin:@typescript-eslint/recommended", | ||
], | ||
"overrides": [ | ||
{ | ||
"env": { | ||
"node": true | ||
}, | ||
"files": [ | ||
".eslintrc.{js,cjs}", | ||
"*.config.js", | ||
], | ||
"parserOptions": { | ||
"sourceType": "script" | ||
} | ||
} | ||
], | ||
"parser": "@typescript-eslint/parser", | ||
"parserOptions": { | ||
"ecmaVersion": "latest", | ||
"sourceType": "module" | ||
}, | ||
"plugins": [ | ||
"@typescript-eslint", | ||
"@stylistic", | ||
], | ||
"rules": { | ||
"linebreak-style": [ "error", "unix"], | ||
"@typescript-eslint/no-explicit-any": [ "off" ], | ||
"@stylistic/indent": [ | ||
"error", 2, { | ||
"ignoredNodes": ["JSXElement *", "JSXElement"], | ||
"SwitchCase": 1 } | ||
], | ||
"@stylistic/jsx-indent-props": [ "warn", "first" ], | ||
"@stylistic/jsx-closing-bracket-location": [ "warn", "after-props" ], | ||
"@stylistic/jsx-first-prop-new-line": [ "warn", "never" ], | ||
"@stylistic/quotes": [ "warn", "double" ], | ||
"@stylistic/semi": [ "error", "always" ], | ||
"@stylistic/brace-style": [ | ||
"error", "stroustrup", { "allowSingleLine": true } | ||
], | ||
"@stylistic/type-annotation-spacing": [ "error" ], | ||
"@stylistic/max-len": ["error", { "code": 80 }], | ||
"@stylistic/no-tabs": ["error"], | ||
"@stylistic/eol-last": ["error", "always"], | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
NPM = $(AM_V_GEN)npm --prefix $(top_srcdir)/contrib/gui | ||
|
||
BUNDLE_ASSETS = \ | ||
gui/assets/index.css \ | ||
gui/assets/allPaths.js \ | ||
gui/assets/allPathsLoader.js \ | ||
gui/assets/splitPathsBySizeLoader.js \ | ||
gui/assets/index2.js \ | ||
gui/assets/index3.js \ | ||
gui/assets/index.js | ||
|
||
if ENABLE_GUI | ||
guidir = $(pkgdatadir)/gui | ||
assetsdir = $(guidir)/assets | ||
|
||
gui_DATA = gui/index.html | ||
assets_DATA = $(BUNDLE_ASSETS) | ||
|
||
CLEANFILES += gui/index.html $(BUNDLE_ASSETS) .stamp-npm | ||
|
||
gui/index.html: $(GUI_FILES) .stamp-npm | ||
$(AM_V_GEN)( \ | ||
cd $(top_srcdir)/contrib/gui; \ | ||
npx tsc -noEmit && \ | ||
npm run lint && \ | ||
npx vite build --outDir $(abs_builddir)/gui --emptyOutDir; \ | ||
) | ||
|
||
gui/assets/index.css: gui/index.html | ||
gui/assets/allPaths.js: gui/index.html | ||
gui/assets/allPathsLoader.js: gui/index.html | ||
gui/assets/splitPathsBySizeLoader.js: gui/index.html | ||
gui/assets/index2.js: gui/index.html | ||
gui/assets/index3.js: gui/index.html | ||
gui/assets/index.js: gui/index.html | ||
|
||
.stamp-npm: $(srcdir)/contrib/gui/package-lock.json | ||
$(NPM) ci | ||
$(AM_V_AT)touch .stamp-npm | ||
endif | ||
|
||
EXTRA_DIST += $(GUI_FILES) | ||
|
||
if MAINTAINER_MODE | ||
update-js-dist: | ||
$(AM_V_GEN)( \ | ||
echo "# Generated automatically, do not edit." ; \ | ||
echo "GUI_FILES = \\" ; \ | ||
cd $(top_srcdir) ; \ | ||
git ls-files -- 'contrib/gui/*.ts' 'contrib/gui/*.tsx' 'contrib/gui/*.json' \ | ||
'contrib/gui/*.css' 'contrib/gui/*.html' \ | ||
| sort | sed -e 's/^/\t/' -e '$$ ! s/$$/ \\/' ; \ | ||
) > $(top_srcdir)/contrib/gui/dist.mk | ||
endif | ||
|
||
.PHONY: update-js-dist | ||
|
||
include contrib/gui/dist.mk |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
## Hacking | ||
|
||
NVC always serves the static HTML and JS files from the install prefix. | ||
Development using `make`, `make install`, and then reloading is way too | ||
slow so use the [https://vitejs.dev/](Vite) development server instead | ||
by running `nvc --gui` and then `npm start` in this directory in another | ||
window. The open [http://localhost:5173] in your web browser (note the | ||
different port number). This will automatically reload when any of the | ||
source files changes. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
module.exports = { | ||
presets: [ | ||
["@babel/preset-env", {targets: {node: "current"}}], | ||
"@babel/preset-typescript", | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
// | ||
// Copyright (C) 2023 Nick Gasson | ||
// | ||
// This program is free software: you can redistribute it and/or modify | ||
// it under the terms of the GNU General Public License as published by | ||
// the Free Software Foundation, either version 3 of the License, or | ||
// (at your option) any later version. | ||
// | ||
// This program is distributed in the hope that it will be useful, | ||
// but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
// GNU General Public License for more details. | ||
// | ||
// You should have received a copy of the GNU General Public License | ||
// along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
// | ||
|
||
import type { Toaster } from "@blueprintjs/core"; | ||
import { FocusStyleManager, OverlayToaster } from "@blueprintjs/core"; | ||
import "@blueprintjs/core/lib/css/blueprint.css"; | ||
import React from "react"; | ||
import Split from "react-split"; | ||
import Conduit from "../lib/conduit"; | ||
import { Model } from "../lib/model"; | ||
import ClosedAlert from "./ClosedAlert"; | ||
import Transcript from "./Transcript"; | ||
import WaveView from "./WaveView"; | ||
import Sidebar from "./Sidebar"; | ||
import { bindEvents } from "../lib/react-util"; | ||
|
||
function makeWebSocket(url: string) { | ||
const ws = new WebSocket(url); | ||
ws.binaryType = "arraybuffer"; | ||
return ws; | ||
} | ||
|
||
const conduit = new Conduit(makeWebSocket); | ||
const model = new Model(conduit); | ||
const toaster: Toaster = OverlayToaster.create({ position: "top-right" }); | ||
|
||
function showRestartToast() { | ||
toaster.show({ message: "simulation restarted" }); | ||
} | ||
|
||
function setWindowTitle(top: string) { | ||
toaster.show({ message: `simulation ${top} loaded` }); | ||
document.title = `${top.toLowerCase()} - NVC`; | ||
} | ||
|
||
function showQuitToast() { | ||
toaster.show({ message: "simulation unloaded" }); | ||
} | ||
|
||
FocusStyleManager.onlyShowFocusOnTabs(); | ||
|
||
function App() { | ||
bindEvents(model, { | ||
restartSim: showRestartToast, | ||
quitSim: showQuitToast, | ||
startSim: setWindowTitle, | ||
}); | ||
|
||
return ( | ||
<div className="component-app"> | ||
<Split className="app-split" direction="vertical" gutterSize={8}> | ||
<Split className="app-hsplit" gutterSize={8} sizes={[20, 80]}> | ||
<Sidebar /> | ||
<WaveView model={model}/> | ||
</Split> | ||
<Transcript conduit={conduit} /> | ||
</Split> | ||
<ClosedAlert conduit={conduit} /> | ||
</div> | ||
); | ||
} | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
// | ||
// Copyright (C) 2023 Nick Gasson | ||
// | ||
// This program is free software: you can redistribute it and/or modify | ||
// it under the terms of the GNU General Public License as published by | ||
// the Free Software Foundation, either version 3 of the License, or | ||
// (at your option) any later version. | ||
// | ||
// This program is distributed in the hope that it will be useful, | ||
// but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
// GNU General Public License for more details. | ||
// | ||
// You should have received a copy of the GNU General Public License | ||
// along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
// | ||
|
||
import { Alert, Intent } from "@blueprintjs/core"; | ||
import React, { useEffect, useState } from "react"; | ||
import type Conduit from "../lib/conduit"; | ||
|
||
interface IProps { | ||
conduit: Conduit; | ||
} | ||
|
||
function ClosedAlert(props: IProps) { | ||
const [closed, setClosed] = useState(false); | ||
|
||
useEffect(() => { | ||
props.conduit.onClose = () => { setClosed(true); }; | ||
}, []); | ||
|
||
const onConfirm = () => { location.reload(); }; | ||
|
||
return ( | ||
<Alert confirmButtonText="Refresh" | ||
onConfirm={onConfirm} | ||
isOpen={closed} | ||
intent={Intent.DANGER} | ||
loading={false}> | ||
<p>Lost connection to server</p> | ||
</Alert> | ||
); | ||
} | ||
|
||
export default ClosedAlert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
// | ||
// Copyright (C) 2023 Nick Gasson | ||
// | ||
// This program is free software: you can redistribute it and/or modify | ||
// it under the terms of the GNU General Public License as published by | ||
// the Free Software Foundation, either version 3 of the License, or | ||
// (at your option) any later version. | ||
// | ||
// This program is distributed in the hope that it will be useful, | ||
// but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
// GNU General Public License for more details. | ||
// | ||
// You should have received a copy of the GNU General Public License | ||
// along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
// | ||
|
||
import React from "react"; | ||
import { Tab, Tabs } from "@blueprintjs/core"; | ||
import SignalPanel from "./SignalPanel"; | ||
|
||
function Sidebar() { | ||
return ( | ||
<Tabs id="TabsExample" selectedTabId="signals"> | ||
<Tab id="signals" title="Signals" panel={<SignalPanel/>} /> | ||
<Tab id="bb" disabled title="Other" /> | ||
</Tabs> | ||
); | ||
} | ||
|
||
export default Sidebar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// | ||
// Copyright (C) 2023 Nick Gasson | ||
// | ||
// This program is free software: you can redistribute it and/or modify | ||
// it under the terms of the GNU General Public License as published by | ||
// the Free Software Foundation, either version 3 of the License, or | ||
// (at your option) any later version. | ||
// | ||
// This program is distributed in the hope that it will be useful, | ||
// but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
// GNU General Public License for more details. | ||
// | ||
// You should have received a copy of the GNU General Public License | ||
// along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
// | ||
|
||
import React from "react"; | ||
|
||
function SignalPanel() { | ||
return ( | ||
<div> | ||
<h1>Example panel</h1> | ||
<p> | ||
text | ||
</p> | ||
</div>); | ||
} | ||
|
||
export default SignalPanel; |
Oops, something went wrong.