Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Very simple browser Javascript TTY web terminal for usage by Nim

License

Notifications You must be signed in to change notification settings

JohnAD/webterminal

Repository files navigation

Introduction to webterminal

ver 0.0.2

nimble repo.support

Very simple browser Javascript TTY web terminal

This library consists of three parts:

  1. A HTML page to hold the elements needed to show the terminal and reference the javascript.
  2. A prewritten, but small, javascript file called tiny_pre_tty.js.
  3. A nimble library to access the web page terminal from nim.

The result, using the included "simple example", looks like this:

simple example

The user sees the output in the large text box (an HTML PRE element). The user can also send a string with the INPUT form element below the box.

How to Use

  1. Copy the tiny_pre_tty.js to the destination directory. It can be downloaded or forked from GitHub.

  2. Make the HTML file. Either start with one of the examples, or include the following elements in the web page:

    <!doctype html>
    <html>
      <head>
        <script src="tiny_pre_tty.js"></script>
        <script src="app.js"></script>
      </head>
      <body onload="initTerminal(24)">
        <p>
          <pre id="terminal" width="80" style="border: 1px solid black">
            initializing...
          </pre>
        </p>
        <div class="center">
          <p>
            <input type="text" value="" id="input_dialog" size="80" />
            <button type="button" onclick="sendInput()" id="input_button">Send</button>
          </p>
        </div>
      </body>
    </html>

    Specifically, include:

    1. <script> references to both tiny_pre_tty.js and whatever you name your app.
    2. after loading the body, invoke initTerminal(line-count) where line-count is an integer representing how many lines you want in the terminal box.
    3. an <input> element with an id of input_dialog.
    4. a <pre> element with an id of terminal.
    5. optionally, a <button> element with an id of input_button. Have the button generate a call to sendInput().

    You can, of course, style the web page with CSS and other items. This example simply shows the bare minimum. Input displayed on the screen is wrapped with a <span class="in">.

  3. Create a nim script.

    After installing the library:

    nimble install webterminal

    Import the library into your nim source code.

    Use send(string) to send text to the web terminal box. (When targeting Javascript, the echo command sends text to the console log.)

    Write two procedures (any name) that handle, the web terminal starting:

    establish_terminal_on_start_function(proc)

    and when input is sent from the user:

    establish_terminal_on_input_function(proc)

    The procedure for capturing input is passed a single string parameter.

    An example script:

    import webterminal
    
    # a simple example that simply repeats anything the user types
    
    proc on_terminal_start() =
      send("3\n2\n1\n")
      send("The repeating app has started.")
    
    establish_terminal_on_start_function(on_terminal_start)
    
    proc on_terminal_input(msg: string) =
      send("You just said \"" & msg & "\".")
    
    establish_terminal_on_input_function(on_terminal_input)

Live Example

Visit: https://nimgame.online/game/game-of-knights

The source for this example can be found in the knights_example subdirectory. This example also requires the turn_based_game and negamax nimble libraries.

Table Of Contents

  1. Introduction to webterminal

  2. Appendices

    1. webterminal Reference

About

Very simple browser Javascript TTY web terminal for usage by Nim

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •