Ionic app using Javascript library xterm.js

Ionic Framework ionic-v3
1

I’m trying to use the xterm.js library for an Ionic 3 project.

Github has the source: https://github.com/aircable/ionic-xterm and instructions. It compiles and starts, but it does not show correctly, or at all. Layout is wrong.

Other problems are the loading of addons. Several of these tryouts are commented out. I hope that someone can help, it would be very useful for all.

Here is an excerpt from home.ts

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as Terminal from "xterm";
//import style from 'xterm/dist/xterm.css';
import "xterm/dist/addons/fit/fit";

@Component({
  selector: 'terminal',
  templateUrl: "home.html",
  //styles: [ style ]
  //styleUrls: ["./xterm.css"]
})

export class HomePage implements OnInit {

  private term: Terminal;

  constructor( public navCtrl: NavController ) {

    this.term = new Terminal( {cursorBlink: true} );
    this.term.open( document.getElementById("terminal") );

    //Terminal.loadAddon( "fit" );

    //this.term.fit();

    this.term.writeln('Welcome to xterm.js');

    // this is
    this.term.on('key', (key, ev) => {
      console.log( key );
    });

  }

  ngOnInit () {}

}
2

I would hold off on this endeavor until this is done.

3

sure, I know of that effort. That might only affect the addons. But Ionic does not get the “div” part in the html right either. It’s not a problem to import Javascript files and call the object methods. I believe that there’s a lot more to it. Would you try it out at least? I would appreciate any little hint to make it better. Thanks.

4

Explain a bit more please.

What exactly is xterm?
What does work?
What does not work?
What exactly is the error?

PS: Repo home.ts seems to be empty, not the code you posted above.

5

Sorry, forgot to commit. It’s up now.

This is xterm: https://github.com/sourcelair/xterm.js/
A library to create terminals in web pages. You could connect that to ssh or anything.
See quickstart: https://xtermjs.org/
Similar to this online demo: http://vtortola.github.io/ng-terminal-emulator/

My goal is to create a portable app for web, ios and android that connects the terminal to a Bluetooth-to-serial device. Depending on where it runs, it uses either Web Bluetooth or Ionic native BLE from Cordova.

6

Ok, what exactly does work or does not work now?

On the first impression, document.getElementById in the constructor probably won’t work, or does it? At least do that in ionViewDidLoad.

7

There is no compile error or runtime error.
the writeln to the class works without error.

But the thing that does not work is:

  • the div terminal in the html file is not parsed, it does not show up
  • the addons cannot be loaded (try it, it’s commented out)
  • the layout is not processed, neither is the css file, which I included in the home.sass
  • the fit plugin does not calculate the size

Thanks for taking a look at it.

8

I made some changes to Github source and got the first working version.
Now the question is more of a fit problem.
Maybe someone understands what’s happening?