Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhw2590582/term-web
:pager: A simple Terminal UI that run on the web
https://github.com/zhw2590582/term-web
browser canvas terminal ui web
Last synced: 26 days ago
JSON representation
:pager: A simple Terminal UI that run on the web
- Host: GitHub
- URL: https://github.com/zhw2590582/term-web
- Owner: zhw2590582
- License: mit
- Created: 2020-04-02T13:08:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-27T22:33:38.000Z (over 2 years ago)
- Last Synced: 2024-05-21T18:46:10.237Z (7 months ago)
- Topics: browser, canvas, terminal, ui, web
- Language: JavaScript
- Homepage: https://term-web.js.org
- Size: 7.39 MB
- Stars: 17
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Term-Web
> :pager: A Simple Terminal UI That Run On The Web
[](https://www.npmjs.com/package/term-web)
## Demo
[Checkout the demo](https://term-web.js.org) from Github Pages
## Install
Install with `npm`:
```bash
$ npm install term-web
```
Or install with `yarn`:
```bash
$ yarn add term-web
```
```js
import Term from 'term-web';
```
Or umd builds are also available:
```html
```
Or from jsDelivr CDN:
```html
```
Will expose the global variable to `window.Term`.
## Usage
```html
```
```js
var term = new Term({
// ... options
container: '#term',
});
```
## Options
```js
{
// Mounted dom element
container: '#term',
// Debug mode
debug: false,
// Initial size
width: 600,
height: 500,
// Custom actions
actions: [],
// Use the display recorder button
recorder: true,
// Is it draggable
draggable: true,
// Font size
fontSize: 13,
// Font family
fontFamily: 'monospace',
// Watermark image url
watermark: '',
// Font color
color: '#b0b2b6',
// Background color
background: 'rgb(42, 39, 52)',
// Title on the topbar
title: 'Term Web',
// Entered prefix
prefix: 'root@linux: ~ $ ',
// Welcome Message
welcome: `Last login: ${new Date()}`,
// Loading tips
loading: (val) => 'Loading...',
// Pixel ratio
pixelRatio: window.devicePixelRatio,
// Callback when command is not found
notFound: (val) => `-bash: ${val}: command not found`,
}
```
## API
#### term.input(text, isReplace)
- `text` is the string to be displayed.
- `isReplace` indicates whether to replace the previous record, default is `false`;
#### term.output(text, isReplace)
- `text` is the string to be displayed.
- `isReplace` indicates whether to replace the previous record, default is `false`;
#### term.type(text, isExecute)
- `text` is the string to be displayed.
- `isExecute` Whether to execute immediately after typing, default is `true`;
#### term.clear()
Clear all log
#### term.ask(text)
- `text` is the question string to be displayed.
```js
term.ask('How are you ?').then((answer) => console.log(answer));
```
#### term.radio(list)
Output radio list
```js
term.radio([
{
key: 1,
text: 'hi',
},
{
key: 0,
text: 'bye',
},
]).then((key) => {
console.log(key);
});
```
#### term.checkbox(list)
Output checkbox list
```js
term.checkbox([
{
key: 1,
text: 'hi',
},
{
key: 0,
text: 'bye',
},
]).then((key) => {
console.log(key);
});
```
## Dynamically modify the UI
#### term.color
Modify font color
```js
term.color = '#fff';
```
#### term.background
Modify background color
```js
term.background = '#000';
```
#### term.watermark
Modify watermark image
```js
term.watermark = 'img.png';
```
#### term.width
Modify terminal width
```js
term.width = 500;
```
#### term.height
Modify terminal height
```js
term.height = 500;
```
## Style attribute
The output interface supports multiple styles through a html tag, currently does not support tag nesting effect
#### color
```js
term.output('some text');
```
#### background
```js
term.output('some text');
```
#### border
Select the color attribute or fontColor attribute of the option by default
```js
term.output('some text');
```
#### underline
Select the color attribute or fontColor attribute of the option by default
```js
term.output('some text');
```
#### del
Select the color attribute or fontColor attribute of the option by default
```js
term.output('some text');
```
#### href
Link jump behavior
```js
term.output('google');
```
## Common problem
#### How to use the font after the font file is loaded?
[MDN Web Docs - FontFace](https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace)
```js
Term.font('Font Name', 'path/to/font.ttf').then((font) => {
var term = new Term({
fontFamily: font.family,
// ... options
});
});
```
## Donations
We accept donations through these channels:
- [Paypal](https://www.paypal.me/harveyzack)
- [WeChat Pay](./images/wechatpay.jpg)
- [Alipay](./images/alipay.jpg)
## QQ Group
## License
MIT © [Harvey Zack](https://sleepy.im/)