2. Advanced Usage

Settings

These are all the default settings for Termino.js

      allow_scroll: true, // allow scroll up & down on terminal 
      prompt: "> ", // default prompt
      command_key: 13, // default command key
      terminal_killed_placeholder: "TERMINAL DISABLED", // default terminal input placeholder when kill. 
      terminal_output: ".termino-console", // default output query selector
      terminal_input: ".termino-input", // default input query selector
      disable_terminal_input: false // disable any user commands / inputs. --- Useful for making terminal animations etc! 

You can over-ride these settings by simply passing your custom settings to your Termino.js instance like so -

    let YOUR_CUSTOM_SETTINGS = {
      allow_scroll: false, // disable scroll up & down on terminal 
      prompt: ">> ", // custom prompt
      command_key: 18, // custom command key
      terminal_killed_placeholder: "CUSTOM DISABLED PLACEHOLDER", // custom terminal input placeholder when kill. 
      terminal_output: ".termino-custom-console", // custom output query selector
      terminal_input: ".termino--custom-input", // custom input query selector
      disable_terminal_input: true // disable any user commands / inputs. --- Useful for making terminal animations etc! 
    }

Termino(terminalSelector, null, YOUR_CUSTOM_SETTINGS) 

You can also change the default scroll up & down keys - see key-codes

Keycodes

Note: To change the default "command" key see - Settings.

These are the default key codes for a Termino.js instance.

     [{
      "id": "SCROLL_UP_KEY", /// DEFAULT SCROLL UP KEY - "SCROLL_UP_KEY" ID NAME IS REQUIRED. 
      "key_code": 38
     // "function": example() // you can add your own custom function to the scroll up button if needed! 
    }, {
      "id": "SCROLL_DOWN_KEY", // DFEAULT SCROLL DOWN KEY - "SCROLL_DOWN_KEY" ID NAME IS REQUIRED. 
      "key_code": 40
    // "function": example() // you can add your own custom function to the scroll down button if needed! 
    }];

You can pass your own keycodes & functions to execute in a Termino.js instance like the example below -

    /// CUSTOM TERMINAL KEY CODES  
   let YOUR_CUSTOM_KEYCODES = [{
     "id": "CLEAR_TERM", // DESCRIBE YOUR KEY CODE FUNCTION BUTTON (OPTIONAL)
     "function": "termClear()", // FUNCTION TO EXECUTE ON BUTTON
     "key_code": 46 // KEYCODE FOR BUTTON
   }, {
     "id": "SCROLL_UP_KEY", /// CUSTOM SCROLL UP KEY - "SCROLL_UP_KEY" ID NAME IS REQUIRED. 
     "key_code": 12,
    // "function": example() // you can add your own custom function to the scroll up button if needed! 
   }, {
     "id": "SCROLL_DOWN_KEY", // CUSTOM SCROLL DOWN KEY - "SCROLL_DOWN_KEY" ID NAME IS REQUIRED. 
     "key_code": 15,
   // "function": example() // you can add your own custom function to the scroll down button if needed! 
   }];
   
   /// YOUR TERMINAL / TERMINO INSTANCE WITH CUSTOM KEYCODES
   let term= Termino(document.getElementById("YOUR_TERMINAL"), YOUR_CUSTOM_KEYCODES)

Add Your Own Commands

Note: To add your own commands to execute via KeyCodes / Keyboard Buttons see - keycodes.

You can add your own commands to a Termino.js instance example below -

// Termino.js - Terminal App Demo (Basic)

  
// initialize a Terminal via Termino.js   
let term2= Termino(document.getElementById("Example_Terminal_2"))



function print_hello_world(){
  term2.output("hello world")
}

async function add_numbers(){
  let number1  = await term2.input("First number to add")
  let number2  = await term2.input("Second number to add")
  term2.output(Number(number1) + Number(number2))
}


async function basicTerminalApp(){
term2.output(`1. Print Hello Wolrd
2. Add Two Numbers
3. Exit`) 

    // call Termino.js /  your terminal for inital input
let termvalue = await term2.input("What would you like to do?") 

if(termvalue === "1"){
  print_hello_world() // example of running your own custom function
}
  
if(termvalue === "2"){
add_numbers() // example of running your own custom function
}  
  
if(termvalue === "3"){
  term2.output("You chose option 3, exiting terminal")
  await term2.delay(2000)
  term2.kill() // exit terminal
} 
  
if(termvalue != "1" && termvalue != "2" && termvalue != "3"){
  term2.output("Invalid choice")
}    
  
  // after called  - repeat function again (if not exit menu)
 if(termvalue != "3"){
 ////  NOTE TO DEV!: To repeat / loop the terminal inputs - you need to loop your Termino.js instance / function. 
  setTimeout(basicTerminalApp, termvalue)
 }
 
}

basicTerminalApp()

See also the Termino.js default commands that include (delay, input & etc) - Termino Functions

Termino Functions

These are the functions you can call via the Termino.js API

    // DEFAULT TERMINO FUNCTIONS FOR DEVELOPER USAGE
    echo: termEcho, // ECHO MESSAGE TO TERM WITH CAROT
    output: termOutput, // ECHO MESSAGE TO TERM WITHOUT CAROT
    clear: termClear, // CLEAR THE TERMINAL
    delay: delay, // DELAY FUNCTION BY X VALUE OF SECONDS
    disable_input: termDisable, // DISABLE TERMINAL INPUT
    enable_input: termEnable, // ENABLE TERMINAL INPUT
    input: ask, // ASK USER QUESTION & RETURN VALUE - AWAIT BASED / PROMISED BASED VALUE
    scroll_to_bottom: scrollTerminalToBottom, // SCROLL TERMINAL TO THE BOTTOM
    scroll_to_top: scrollTerminalToTop, // SCROLL TERMINAL TO TOP
    add_element: addElementWithID, // ADD HTML ELEMENT WITH ID TO TERMINAL,
    remove_element: removeElementWithID, // REMOVE HTML ELEMENT WITH ID TO TERMINAL,
    kill: termKill, // KILL THE TERMIMAL - IE.. SET INPUT TO DISABLED & CLEAR THE TERMINAL.

Example of usage below -

// YOUR TERMINO INSTANCE
let term = Termino(document.getElementById("Example_Terminal"))

term.echo("hello world")

ANSI Escape Codes

ANSI Escape Codes are special characters which can be used to control formatting, colors or other output preferences in a text terminal. Escape Codes are non-printing code and will not appear in a Termino.js console output directly.

Tho you can add support to render these codes via a library such as ansi_up - A javascript library that converts text with ANSI terminal codes into colorful HTML Zero dependencies.

You can also find a complete table of ANSI Escape Codes available at https://en.wikipedia.org/wiki/ANSI_escape_code

Styling

Since Termino.js allows you to bring your own styling / HTML! You can customize the looks of your terminal the way you want it! A awesome CSS / SCSS library that will work awesome with Termino.js is TuiCss - a Text-based user interface CSS library.

Tho you can literally bring any CSS framework etc you prefer!

Accessibility

You might want to add accessibility features to your Termino.js app (in the browser), here is a example of how you might do so!

Submit Button

To submit a Termino.js input value with a button etc, you can use a keyboard event. Example below -

document.querySelector(".termino-input").dispatchEvent(new KeyboardEvent('keypress', {'keyCode':13}));

Create a Plugin

You can create a plugin to share with the community! Here is an basic example of making a plugin for Termino.js

// Create your plugin
Termino.yourPlugin = function(pluginFn) {
  pluginFn();
}