Skip to content

Commit

Permalink
Merge pull request #324 from gbmhunter/develop
Browse files Browse the repository at this point in the history 
Release of v4.17.1.
  • Loading branch information
@gbmhunter
gbmhunter authored Jun 11, 2024
2 parents 9e06afa + c29b482 commit 2ce70b0
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 44 deletions.
9 changes: 8 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## Unreleased

## [4.17.1] - 2024-06-11

### Changed

- Added more info about browser compatibility to the error message if navigator.serial is not available. Also added this same info to the homepage.

## [4.17.0] - 2024-05-31

### Added
Expand Down Expand Up @@ -714,7 +720,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Added auto-scroll to TX pane, closes #89.
- Added special delete behaviour for backspace button when in "send on enter" mode, closes #90.

[unreleased]: https://github.com/gbmhunter/NinjaTerm/compare/v4.17.0...HEAD
[unreleased]: https://github.com/gbmhunter/NinjaTerm/compare/v4.17.1...HEAD
[4.17.1]: https://github.com/gbmhunter/NinjaTerm/compare/v4.17.0...v4.17.1
[4.17.0]: https://github.com/gbmhunter/NinjaTerm/compare/v4.16.0...v4.17.0
[4.16.0]: https://github.com/gbmhunter/NinjaTerm/compare/v4.15.0...v4.16.0
[4.15.0]: https://github.com/gbmhunter/NinjaTerm/compare/v4.14.0...v4.15.0
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ninjaterm",
"version": "4.17.0",
"version": "4.17.1",
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
Expand Down
137 changes: 99 additions & 38 deletions src/Homepage/HomepageView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,36 +106,46 @@ export default observer((props: Props) => {
gap: '20px',
}}
>
<Button
href="/app"
variant="contained"
size="large"
startIcon={<TerminalIcon />}
>
<Button href="/app" variant="contained" size="large" startIcon={<TerminalIcon />}>
Go to app
</Button>
<Button
href="https://github.com/gbmhunter/NinjaTerm"
target="_blank"
variant="outlined"
size="large"
startIcon={<GitHubIcon />}
>
<Button href="https://github.com/gbmhunter/NinjaTerm" target="_blank" variant="outlined" size="large" startIcon={<GitHubIcon />}>
GitHub
</Button>
</Grid>
<Grid xs={12} sx={{ height: '20px' }} />

<Grid xs={12}>
<Typography sx={{ fontSize: '20px', marginBottom: '20px' }}>
NinjaTerm is an open source and free web-based application designed for viewing debug serial port data and sending commands when developing firmware for an embedded device (e.g. microcontroller).
NinjaTerm is an open source and free web-based application designed for viewing debug serial port data and sending commands when developing firmware for an embedded
device (e.g. microcontroller).
</Typography>

<Typography variant="h2" style={{ marginBottom: '20px' }}>
Browser Support
</Typography>
<p>
Natively supported browsers include Chromium-based desktop browsers (e.t.c. Chrome,
Edge, Brave) and Opera. Firefox is supported but you have to install the{' '}
<a href="https://addons.mozilla.org/en-US/firefox/addon/webserial-for-firefox/" target="_blank">
WebSerial for Firefox extension
</a>{' '}
first. Unfortunately Safari is not supported (as of June 2024).
</p>
<p>
See{' '}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" target="_blank">
https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility
</a>{' '}
for a compatibility table.
</p>
</Grid>

<Grid xs={12} sx={{ height: '20px' }} />


<Typography variant="h2" style={{ marginBottom: '20px' }}>Features</Typography>
<Typography variant="h2" style={{ marginBottom: '20px' }}>
Features
</Typography>

<Grid container xs={12} spacing={2.0} sx={{ marginBottom: '20px' }}>
{/* ========================================================================== */}
Expand All @@ -150,9 +160,13 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>ANSI Escape Code Support</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
ANSI Escape Code Support
</Typography>

<Typography style={{ marginBottom: '20px' }}>Rich support for ANSI CSI colour codes, giving you ability to express information however you see fit! (e.g. colour errors red, warnings yellow).</Typography>
<Typography style={{ marginBottom: '20px' }}>
Rich support for ANSI CSI colour codes, giving you ability to express information however you see fit! (e.g. colour errors red, warnings yellow).
</Typography>

<div style={{ display: 'flex' }}>
<img src={AnsiEscapeCodeColoursGif} alt="Demonstration of ANSI escape codes in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
Expand All @@ -171,9 +185,14 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Graphing</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Graphing
</Typography>

<Typography style={{ marginBottom: '20px' }}>Extract data from your stream of debug data and graph it! Flexible options to extract data from text based serial streams, or dedicate the serial port for data only!</Typography>
<Typography style={{ marginBottom: '20px' }}>
Extract data from your stream of debug data and graph it! Flexible options to extract data from text based serial streams, or dedicate the serial port for data
only!
</Typography>

<div style={{ display: 'flex' }}>
<img src={GraphingGif} alt="Demonstration of graphing in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
Expand All @@ -192,9 +211,15 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Smart Scrolling</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Smart Scrolling
</Typography>

<Typography style={{ marginBottom: '20px' }}>Most of the time you want to see the most recent information printed to the screen. NinjaTerm has a "scroll lock" feature to allow for that. However, scrolling up allows you to break the "scroll lock" and focus on previous info (e.g. an error that occurred). NinjaTerm will adjust the scroll point to keep that information in view even if the scrollback buffer is full.</Typography>
<Typography style={{ marginBottom: '20px' }}>
Most of the time you want to see the most recent information printed to the screen. NinjaTerm has a "scroll lock" feature to allow for that. However, scrolling up
allows you to break the "scroll lock" and focus on previous info (e.g. an error that occurred). NinjaTerm will adjust the scroll point to keep that information in
view even if the scrollback buffer is full.
</Typography>

<div style={{ display: 'flex' }}>
<img src={SmartScrollGif} alt="Demonstration of smart scrolling in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
Expand All @@ -213,12 +238,23 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Show Invisible Characters</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Show Invisible Characters
</Typography>

<Typography style={{ marginBottom: '20px' }}>When debugging ASCII based data, sometimes unexpected "invisible" characters such as ASCII control characters or bytes above 0x7F &#40;which are not part of ASCII&#41; cause weird things to happen to your data! NinjaTerm contains a special font with glyphs for all ASCII control chars and all hex codes from 0x00 to 0xFF. Enable this mode from the settings to "see" any received byte of data!</Typography>
<Typography style={{ marginBottom: '20px' }}>
When debugging ASCII based data, sometimes unexpected "invisible" characters such as ASCII control characters or bytes above 0x7F &#40;which are not part of
ASCII&#41; cause weird things to happen to your data! NinjaTerm contains a special font with glyphs for all ASCII control chars and all hex codes from 0x00 to
0xFF. Enable this mode from the settings to "see" any received byte of data!
</Typography>

<div style={{ display: 'flex' }}>
<img src={ControlCharAndHexCodeGlyphsGif} alt="Demonstration of ASCII control character and hex code glyphs in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
<img
src={ControlCharAndHexCodeGlyphsGif}
alt="Demonstration of ASCII control character and hex code glyphs in NinjaTerm."
width="900px"
style={{ margin: 'auto' }}
/>
</div>
</div>
</Grid>
Expand All @@ -234,9 +270,14 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Logging</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Logging
</Typography>

<Typography style={{ marginBottom: '20px' }}>Log your data to the file system for future retrieval or post analysis with other software. The file is written to once per second so your previous data should still be there even if the computer crashes/resets!</Typography>
<Typography style={{ marginBottom: '20px' }}>
Log your data to the file system for future retrieval or post analysis with other software. The file is written to once per second so your previous data should
still be there even if the computer crashes/resets!
</Typography>

<div style={{ display: 'flex' }}>
<img src={LoggingGif} alt="Demonstration of logging functionality in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
Expand All @@ -255,9 +296,14 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Filtering</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Filtering
</Typography>

<Typography style={{ marginBottom: '20px' }}>Narrow down on the info you want by using filtering! Great for quickly finding errors, warnings, or debug prints from specific modules. Only rows of received data matching the filter text are shown. Clear the filter text to show all rows again.</Typography>
<Typography style={{ marginBottom: '20px' }}>
Narrow down on the info you want by using filtering! Great for quickly finding errors, warnings, or debug prints from specific modules. Only rows of received data
matching the filter text are shown. Clear the filter text to show all rows again.
</Typography>

<div style={{ display: 'flex' }}>
<img src={FilteringGif} alt="Demonstration of filtering functionality in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
Expand All @@ -276,16 +322,20 @@ export default observer((props: Props) => {
padding: '20px',
}}
>
<Typography variant="h6" style={{ marginBottom: '20px' }}>Number Types</Typography>
<Typography variant="h6" style={{ marginBottom: '20px' }}>
Number Types
</Typography>

<Typography style={{ marginBottom: '20px' }}>Don't just treat your data as ASCII! NinjaTerm also supports parsing received data as various numbers, including hex (variable byte length), uint8, int8, uint16, float32, e.t.c. View your data in the way you want it.</Typography>
<Typography style={{ marginBottom: '20px' }}>
Don't just treat your data as ASCII! NinjaTerm also supports parsing received data as various numbers, including hex (variable byte length), uint8, int8, uint16,
float32, e.t.c. View your data in the way you want it.
</Typography>

<div style={{ display: 'flex' }}>
<img src={NumberTypesGif} alt="Demonstration of number parsing in NinjaTerm." width="900px" style={{ margin: 'auto' }} />
</div>
</div>
</Grid>

</Grid>

{/* ========================================================================== */}
Expand All @@ -295,13 +345,17 @@ export default observer((props: Props) => {
<ul>
<li>Ability to switch between a combined TX/RX terminal and separate terminals.</li>
<li>Options for controlling carriage return (CR) and line feed (LF) behavior.</li>
<li>Smart copy/paste between the terminals and the clipboard with Ctrl-Shift-C and Ctrl-Shift-V. When copying to the clipboard, rows in the terminal created due to wrapping do not insert new lines into the clipboard data.</li>
<li>
Smart copy/paste between the terminals and the clipboard with Ctrl-Shift-C and Ctrl-Shift-V. When copying to the clipboard, rows in the terminal created due to
wrapping do not insert new lines into the clipboard data.
</li>
<li>Macros to send repetitive ASCII or HEX data easily.</li>
<li>Send 200ms "break signals" with Ctrl-Shift-B.</li>
</ul>

<Typography variant="h2">Bugs and Features</Typography>
<Typography style={{ marginBottom: '20px' }}>Found a bug? Have a awesome feature you'd like added to NinjaTerm? <a href="https://github.com/gbmhunter/NinjaTerm/issues">Open an issue on GitHub</a>.
<Typography style={{ marginBottom: '20px' }}>
Found a bug? Have a awesome feature you'd like added to NinjaTerm? <a href="https://github.com/gbmhunter/NinjaTerm/issues">Open an issue on GitHub</a>.
</Typography>

{/* ========================================================================== */}
Expand All @@ -311,13 +365,20 @@ export default observer((props: Props) => {

<Typography>Thanks to Zac Frank for user-interaction guidance and tips!</Typography>
<Typography>Thanks to testing done by William Hunter.</Typography>
<Typography>Thanks to <a href="https://github.com/johnhofman">John Hofman</a> for helping port the project to Maven and setup TravisCI (back when NinjaTerm was written in Java).</Typography>
<Typography>
Thanks to <a href="https://github.com/johnhofman">John Hofman</a> for helping port the project to Maven and setup TravisCI (back when NinjaTerm was written in Java).
</Typography>
<Typography>Big ups to "utopian" to creating the new NinjaTerm logo!</Typography>

<hr style={{ width: '100%' }}/>

<p style={{ fontWeight: 'bold', marginBottom: '50px' }}>NinjaTerm is developed and maintained by Geoffrey Hunter <IconButton href="https://twitter.com/gbmhunter" target="_blank"><TwitterIcon /></IconButton> (<a href="https://blog.mbedded.ninja/">blog.mbedded.ninja</a>).</p>
<hr style={{ width: '100%' }} />

<p style={{ fontWeight: 'bold', marginBottom: '50px' }}>
NinjaTerm is developed and maintained by Geoffrey Hunter{' '}
<IconButton href="https://twitter.com/gbmhunter" target="_blank">
<TwitterIcon />
</IconButton>{' '}
(<a href="https://blog.mbedded.ninja/">blog.mbedded.ninja</a>).
</p>
</Grid>
</Box>
</ThemeProvider>
Expand Down
21 changes: 20 additions & 1 deletion src/model/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,26 @@ export class App {
}
}
} else {
this.snackbar.sendToSnackbar('Browser not supported, it does not provide the navigator.serial API.', 'error');
this.snackbar.sendToSnackbar(
<div>
<p style={{ maxWidth: '500px' }}>
Could not find the Web Serial API (navigator.serial) provided by the browser. Natively supported browsers include Chromium-based desktop browsers (e.t.c.
Chrome, Edge, Brave) and Opera. Firefox is supported but you have to install the{' '}
<a href="https://addons.mozilla.org/en-US/firefox/addon/webserial-for-firefox/" target="_blank">
WebSerial for Firefox extension
</a>{' '}
first. Unfortunately as of June 2024 Safari is not supported.
</p>
<p style={{ maxWidth: '500px' }}>
See{' '}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" target="_blank">
https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility
</a>{' '}
for a compatibility table.
</p>
</div>,
'error'
);
}
}

Expand Down
6 changes: 3 additions & 3 deletions src/model/Snackbar/Snackbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, IconButton } from '@mui/material';
import { makeAutoObservable } from 'mobx';
import { SnackbarAction, VariantType, enqueueSnackbar, closeSnackbar } from 'notistack';
import { SnackbarAction, VariantType, enqueueSnackbar, closeSnackbar, SnackbarMessage } from 'notistack';
import CloseIcon from '@mui/icons-material/Close';

export default class Snackbar {
Expand All @@ -19,11 +19,11 @@ export default class Snackbar {
/**
* Enqueues a message to the snackbar used for temporary status updates to the user.
*
* @param msg The message you want to display. Use "\n" to insert new lines.
* @param msg The message you want to display. Use "\n" to insert new lines. Can either be a string or a JSX element.
* @param variant The variant (e.g. error, warning) of snackbar you want to display.
* @param action The action to display on the snackbar (see notistack docs). If undefined, a close button will be displayed.
*/
sendToSnackbar(msg: string, variant: VariantType, action?: SnackbarAction, persist?: boolean) {
sendToSnackbar(msg: SnackbarMessage, variant: VariantType, action?: SnackbarAction, persist?: boolean) {
if (!(enqueueSnackbar instanceof Function)) {
console.error('enqueueSnackbar is not a function. Cannot send message: ' + msg)
return;
Expand Down

0 comments on commit 2ce70b0

Please sign in to comment.