huge refactor to webworker..tears and happiness..

com/isoterminal.js

@@ -1,32 +1,33 @@
-function ISOTerminal(instance,opts){
+/* 
-  // create a neutral isoterminal object which can be decorated
+ *
-  // with prototype functions and has addListener() and dispatchEvent()
+ *                   css/html template                                                                                
-  let obj      = new EventTarget()
+ *                                                                                                                     
-  obj.instance = instance
+ *                     ┌─────────┐   ┌────────────┐  ┌─────────────┐            exit-AR                                
-  obj.opts     = opts 
+ *            ┌───────►│ com/dom ┼──►│ com/window ├─►│ domrenderer │◄────────── exit-VR  ◄─┐                           
-  // register default event listeners (enable file based features like isoterminal/jsconsole.js e.g.)
+ *            │        └─────────┘   └────────────┘  └─────▲───────┘                       │                           
-  for( let event in ISOTerminal.listener )
+ *            │                                            │         ┌───────────────┐     │                           
-    for( let cb in ISOTerminal.listener[event] )
+ * ┌──────────┴────────┐                             ┌─────┴──────┐  │  xterm.js     │  ┌─────────────────────────────┐
-      obj.addEventListener( event, ISOTerminal.listener[event][cb] )
+ * │  com/isoterminal  ├────────────────────────────►│com/xterm.js│◄─┤               │  │com/html-as-texture-in-XR.js │
-  // compose object with functions
+ * └────────┬─┬────────┘                             └──┬──────┬▲─┘  │  xterm.css    │  └─────────────────────────────┘
-  for( let i in ISOTerminal.prototype ) obj[i] = ISOTerminal.prototype[i]
+ *          │ │        ┌────────┐             ┌─────────▼──┐   ││    └───────────────┘     │     ▲                     
-  obj.emit('init')
+ *          │ └───────►│ plane  ├─────►text───┼►canvas     │◄────────────────── enter-VR   │     │                     
-  return obj
+ *          │          └────────┘             └────────────┘   ││               enter-AR ◄─┘     │                     
-}
+ *          │                                                  ││                                │                     
-
+ *          │                                                  ││                                │                     
-ISOTerminal.prototype.emit = function(event,data){
+ *          │                      ISOTerminal.js              ││                                │                     
-  data = data || false 
+ *          │                ┌───────────────────────────┐◄────┘│                                │                     
-  this.dispatchEvent( new CustomEvent(event, {detail: data} ) )
+ *          │                │ com/isoterminal/worker.js ├──────┘                                │                     
-}
+ *          │                └──────────────┌────────────┤                                       │                     
-
+ *          │                               │ v86.js     │                                       │                     
-ISOTerminal.addEventListener = (event,cb) => {
+ *          │                               │ feat/*.js  │                                       │                     
-  ISOTerminal.listener = ISOTerminal.listener || {}
+ *          │                               │ libv86.js  │                                       │                     
-  ISOTerminal.listener[event] = ISOTerminal.listener[event] || []
+ *          │                               └────────────┘                                       │                     
-  ISOTerminal.listener[event].push(cb)
+ *          │                                                                                    │                     
-}
+ *          └────────────────────────────────────────────────────────────────────────────────────┘                     
-
+ *                                                                                                                     
-// ISOTerminal has defacto support for AFRAME 
+ * NOTE: For convenience reasons, events are forwarded between com/isoterminal.js, worker.js and ISOTerminal
-// but can be decorated to work without it as well
+ *       Instead of a melting pot of different functionnames, events are flowing through everything (ISOTerminal.emit())
+ */ 
 
 if( typeof AFRAME != 'undefined '){
 
@@ -68,14 +69,7 @@ if( typeof AFRAME != 'undefined '){
       // html to texture
       htmlinxr:    "com/html-as-texture-in-xr.js",
       // isoterminal features
-      core:        "com/isoterminal/core.js",
+      ISOTerminal: "com/isoterminal/ISOTerminal.js",
-      utils_9p:    "com/isoterminal/feat/9pfs_utils.js",
-      boot:        "com/isoterminal/feat/boot.js",
-      jsconsole:   "com/isoterminal/feat/jsconsole.js",
-      javascript:  "com/isoterminal/feat/javascript.js",
-      indexhtml:   "com/isoterminal/feat/index.html.js",
-      indexjs:     "com/isoterminal/feat/index.js.js",
-      autorestore: "com/isoterminal/feat/autorestore.js",
       localforage: "https://cdn.rawgit.com/mozilla/localForage/master/dist/localforage.js"
     },
 
@@ -83,9 +77,6 @@ if( typeof AFRAME != 'undefined '){
       scale:   0.66,
       events:  ['click','keydown'],
       html:    (me) => `<div class="isoterminal">
-                          <div id="screen" style="white-space: pre; font: 14px monospace; "></div>
-                          <canvas style="display: none"></canvas> 
-<div id="serial"></div>
                         </div>`,
 
       css:     (me) => `.isoterminal{
@@ -112,7 +103,8 @@ if( typeof AFRAME != 'undefined '){
                            overflow: hidden;
                         }
                         .isoterminal *,
-                        .xterm-dom-renderer-owner-1 .xterm-rows {
+                        .isotemrinal .xterm-dom-renderer-owner-1 .xterm-rows {
+                           background:transparent !important;
                            font-size: 14px;
                            font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
                            font-weight:500 !important;
@@ -122,6 +114,11 @@ if( typeof AFRAME != 'undefined '){
 
                         .isoterminal style{ display:none }
 
+                        #overlay .winbox:has(> .isoterminal){ 
+                          background:transparent;
+                          box-shadow:none;
+                        }
+
                         .wb-body:has(> .isoterminal){ 
                           background: #000C; 
                           overflow:hidden;
@@ -135,6 +132,11 @@ if( typeof AFRAME != 'undefined '){
                         .isoterminal div{ display:block; }
                         .isoterminal span{ display: inline }
 
+                        .isoterminal .xterm-helpers { 
+                          position:absolute; 
+                          opacity:0;
+                        }
+
                         @keyframes fade {
                             from { opacity: 1.0; }
                             50% { opacity: 0.5; }
@@ -158,13 +160,27 @@ if( typeof AFRAME != 'undefined '){
     initTerminal: async function(singleton){
 
       if( this.data.xterm ){
-        this.requires.xtermjs  = "https://unpkg.com/@xterm/xterm@5.5.0/lib/xterm.js"
+        // why 3.12?
-        this.requires.xtermcss = "https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css"
+        // first versions used 1.5.4, a typescript rewrite which:
-        this.requires.xterm    = "com/isoterminal/feat/xterm.js"
+        // * does not use canvas anymore [which would be ideal for THREE.js texture]
-        // xterm relies on window.requestAnimationFrame which is not called in XR (xrSession.requestAnimationFrame is)
+        // * does not allow switching between dom/canvas
+        // * only allows a standalone WebGL addon (conflicts with THREE)
+        // * heavily dependent on requestAnimationFrame (conflicts with THREE)
+        // * typescript-rewrite results in ~300k lib (instead of 96k)
+        this.requires.xtermcss = "//unpkg.com/xterm@3.12.0/dist/xterm.css",
+        this.requires.xtermjs  = "//unpkg.com/xterm@3.12.0/dist/xterm.js",
+        this.requires.xtermcss = "com/xterm.js"
       }
 
-      let s = await AFRAME.utils.require(this.requires)
+      await AFRAME.utils.require(this.requires)
+      await AFRAME.utils.require({ // ISOTerminal plugins
+        boot:          "com/isoterminal/feat/boot.js",
+        javascript:    "com/isoterminal/feat/javascript.js",
+        jsconsole:     "com/isoterminal/feat/jsconsole.js",
+        //indexhtml:   "com/isoterminal/feat/index.html.js",
+        //indexjs:     "com/isoterminal/feat/index.js.js",
+        //autorestore: "com/isoterminal/feat/autorestore.js",
+      })
 
       this.el.setAttribute("selfcontainer","")
 
@@ -194,10 +210,12 @@ if( typeof AFRAME != 'undefined '){
 
       instance.addEventListener('window.oncreate', (e) => {
         instance.dom.classList.add('blink')
+        instance.setAttribute("xterm","")
+        instance.addEventListener("xterm-input", (e) => this.isoterminal.send(e.detail,0) )
         // run iso
         let opts = {dom:instance.dom}
         for( let i in this.data ) opts[i] = this.data[i]
-        this.isoterminal.runISO(opts)
+        this.isoterminal.start(opts)
       })
 
       instance.setAttribute("dom",      "")
@@ -214,9 +232,6 @@ if( typeof AFRAME != 'undefined '){
       this.isoterminal.addEventListener('ready', (e)=>{
         instance.dom.classList.remove('blink')
         this.isoterminal.emit('status',"running")
-        setTimeout( () => { // important: after window maximize animation to get true size
-          instance.setAttribute("html-as-texture-in-xr", `domid: #${instance.uid}`)  // only show aframe-html in xr 
-        },1500)
       })
 
       this.isoterminal.addEventListener('status', function(e){
@@ -236,8 +251,8 @@ if( typeof AFRAME != 'undefined '){
       instance.addEventListener('window.onmaximize', resize )
 
       const focus = (e) => {
-        if( this.isoterminal?.emulator?.serial_adapter?.term ){
+        if( this.el.components.xterm ){
-          this.isoterminal.emulator.serial_adapter.term.focus()
+          this.el.components.xterm.term.focus()
         }
       }
       instance.addEventListener('obbcollisionstarted', focus )
@@ -257,10 +272,6 @@ if( typeof AFRAME != 'undefined '){
       // reactive events for this.data updates
       myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
 
-      ready: function( ){
-        this.el.dom.style.display = 'none'
-      },
-
       launcher: async function(){
         this.initTerminal()
       }

com/isoterminal/feat/9pfs_utils.js

@@ -1,8 +1,7 @@
-ISOTerminal.addEventListener('emulator-started', function(){
 let emulator    = this.emulator
-  let isoterminal = this 
 
 emulator.fs9p.update_file = async function(file,data){
+    const convert = ISOTerminal.prototype.convert
 
     const p = this.SearchPath(file);
 
@@ -12,18 +11,19 @@ ISOTerminal.addEventListener('emulator-started', function(){
     }
     
     const inode = this.GetInode(p.id);
-      const buf   = typeof data == 'string' ? isoterminal.convert.toUint8Array(data) : data
+    const buf   = typeof data == 'string' ? convert.toUint8Array(data) : data
     await this.Write(p.id,0, buf.length, buf )
     // update inode
     inode.size = buf.length
     const now = Math.round(Date.now() / 1000);
     inode.atime = inode.mtime = now;
-      isoterminal.exec(`touch ${file}`) // update inode 
+    this.postMessage({event:'exec',data:[`touch ${file}`]}) // update inode 
     return new Promise( (resolve,reject) => resolve(buf) )
 
 }
 
 emulator.fs9p.append_file = async function(file,data){
+    const convert = ISOTerminal.prototype.convert
 
     const p = this.SearchPath(file);
 
@@ -33,7 +33,7 @@ ISOTerminal.addEventListener('emulator-started', function(){
     }
     
     const inode = this.GetInode(p.id);
-      const buf   = typeof data == 'string' ? isoterminal.convert.toUint8Array(data) : data
+    const buf   = typeof data == 'string' ? convert.toUint8Array(data) : data
     await this.Write(p.id, inode.size, buf.length, buf )
     // update inode
     inode.size = inode.size + buf.length
@@ -43,4 +43,5 @@ ISOTerminal.addEventListener('emulator-started', function(){
 
 }
 
-})
+this['fs9p.append_file'] = function(){ emulator.fs9p.append_file.apply(emulator.fs9p, arguments[0]) }
+this['fs9p.update_file'] = function(){ emulator.fs9p.update_file.apply(emulator.fs9p, arguments[0]) }

com/isoterminal/feat/autorestore.js

@@ -1,4 +1,5 @@
 ISOTerminal.addEventListener('emulator-started', function(e){
+  return console.log("TODO: autorestore.js")
   this.autorestore(e)
 })
 

com/isoterminal/feat/boot.js

@@ -6,10 +6,11 @@ ISOTerminal.prototype.boot = async function(e){
   // set environment
   let env = ['export BROWSER=1']
   for ( let i in document.location ){
-    if( typeof document.location[i] == 'string' )
+    if( typeof document.location[i] == 'string' ){
       env.push( 'export '+String(i).toUpperCase()+'="'+decodeURIComponent( document.location[i]+'"') )
     }
-  await this.emulator.create_file("profile.browser", this.convert.toUint8Array( env.join('\n') ) )
+  }
+  await this.emit("emulator.create_file", ["profile.browser", this.convert.toUint8Array( env.join('\n') ) ] )
 
   if( this.serial_input == 0 ){
     if( !this.noboot ){
@@ -18,10 +19,5 @@ ISOTerminal.prototype.boot = async function(e){
     }
   }
 
-  if( this.emulator.serial_adapter ) this.emulator.serial_adapter.term.focus()
-  else{
-    let els = [...document.querySelectorAll("div#screen")]
-    els.map( (el) => el.focus() )
-  }
 }
 

com/isoterminal/feat/javascript.js

@@ -1,29 +1,32 @@
-ISOTerminal.addEventListener('init', function(){
+if( typeof emulator != 'undefined' ){
-
+  // inside worker-thread
-  this.addEventListener('emulator-started', function(e){
-
-    const emulator = this.emulator
 
   // unix to js device
-    this.readFromPipe( '/mnt/js', async (data) => {
+  emulator.readFromPipe( 'dev/browser/js', async (data) => {
-      const buf = await emulator.read_file("js")
+    const convert = ISOTerminal.prototype.convert
-      const script = this.convert.Uint8ArrayToString(buf)
+    const buf     = await this.emulator.read_file("dev/browser/js")
+    const script  = convert.Uint8ArrayToString(buf)
     let PID="?"
     try{
       if( script.match(/^PID/) ){ 
         PID = script.match(/^PID=([0-9]+);/)[1] 
       }
-        let res = (new Function(`${script}`))()
+      this.postMessage({event:'javascript-eval',data:{script,PID}})
-        if( res && typeof res != 'string' ) res = JSON.stringify(res,null,2)
-        // write output to 9p with PID as filename
-        // *FIXME* not flexible / robust
-        emulator.create_file(PID, this.convert.toUint8Array(res) )
     }catch(e){ 
       console.error(e)
     }
   })
 
+}else{
+  // inside browser-thread
+  
+  ISOTerminal.addEventListener('javascript-eval', function(e){
+    const {script,PID} = e.detail
+    let res = (new Function(`${script}`))()
+    if( res && typeof res != 'string' ) res = JSON.stringify(res,null,2)
+    // write output to 9p with PID as filename
+    // *FIXME* not flexible / robust
+    this.emit('emulator.create_file', [PID, this.convert.toUint8Array(res)] )
   })
 
-})
+}
-

com/isoterminal/feat/jsconsole.js

@@ -27,7 +27,6 @@ ISOTerminal.prototype.redirectConsole = function(handler){
 }
 
 ISOTerminal.addEventListener('emulator-started', function(){
-  let emulator = this.emulator
 
   this.redirectConsole( (str,prefix) => {
     let finalStr = ""
@@ -35,7 +34,7 @@ ISOTerminal.addEventListener('emulator-started', function(){
     str.trim().split("\n").map( (line) => {
       finalStr += '\x1b[38;5;165m/dev/browser: \x1b[0m'+prefix+line+'\n'
     })
-    emulator.fs9p.append_file( "console", finalStr )
+    this.emit('fs9p.append_file', ["/dev/browser/console",finalStr])
   })
 
   window.addEventListener('error', function(event) {
@@ -51,9 +50,4 @@ ISOTerminal.addEventListener('emulator-started', function(){
     console.error(event);
   });
 
-  // enable/disable logging file (echo 1 > mnt/console.tty) 
-  this.readFromPipe( '/mnt/console.tty', (data) => {
-    emulator.log_to_tty = ( String(data).trim() == '1')
-  })
-
 })

com/isoterminal/feat/xterm.js

@@ -27,7 +27,6 @@ ISOTerminal.prototype.xtermInit = function(){
     })
 
     term.onRender( () => {
-
       // xterm relies on requestAnimationFrame (which does not called in immersive mode)
       let _window = term._core._coreBrowserService._window
       if( !_window._XRSH_proxied ){ // patch the planet!
@@ -40,8 +39,10 @@ ISOTerminal.prototype.xtermInit = function(){
         //    term.tid = null
         //  },100)
         //}
+        this.i = 0
         const requestAnimationFrameAFRAME = AFRAME.utils.throttleLeadingAndTrailing(
-          function(cb){ cb() },150 
+          function(cb){ cb() }
+          ,150 
         )
 
         // we proxy the _window object of xterm, and reroute 

com/isoterminal/worker.js

@@ -0,0 +1,78 @@
+importScripts("libv86.js");
+importScripts("ISOTerminal.js")  // we don't instance it again here (just use its functions)
+
+//var emulator = new V86({
+//    wasm_path: "../build/v86.wasm",
+//    memory_size: 32 * 1024 * 1024,
+//    vga_memory_size: 2 * 1024 * 1024,
+//    bios: {
+//        url: "../bios/seabios.bin",
+//    },
+//    vga_bios: {
+//        url: "../bios/vgabios.bin",
+//    },
+//    cdrom: {
+//        url: "../images/linux4.iso",
+//    },
+//    autostart: true,
+//});
+//
+//
+//emulator.add_listener("serial0-output-byte", function(byte)
+//{
+//    var chr = String.fromCharCode(byte);
+//    this.postMessage(chr);
+//}.bind(this));
+//
+//this.onmessage = function(e)
+//{
+//    emulator.serial0_send(e.data);
+//};
+
+this.runISO = function(opts){
+  if( opts.cdrom   ) opts.cdrom.url   = "../../"+opts.cdrom.url 
+  if( opts.bzimage ) opts.bzimage.url = "../../"+opts.bzimage.url 
+                   
+  let emulator = this.emulator = new V86(opts); 
+  console.log("worker:started emulator")
+
+  // event forwarding
+  emulator.add_listener("serial0-output-byte", function(byte){
+    this.postMessage({event:"serial0-output-byte",data:byte});
+  }.bind(this));
+
+  emulator.add_listener("emulator-started", function(){
+    importScripts("feat/9pfs_utils.js")
+    this.postMessage({event:"emulator-started",data:false});
+  }.bind(this));
+
+  /* 
+   * forward events/functions so non-worker world can reach them
+   */
+  this['emulator.create_file'] = function(){ emulator.create_file.apply(emulator, arguments[0]) }
+  this['emulator.read_file']   = function(){ emulator.read_file.apply(emulator, arguments[0])   }
+
+
+  // filename will be read from 9pfs: "/mnt/"+filename
+  emulator.readFromPipe = function(filename,cb){
+    emulator.add_listener("9p-write-end", async (opts) => {
+      if ( opts[0] == filename.replace(/.*\//,'') ){
+        cb()
+      }
+    })
+  }
+
+  importScripts("feat/javascript.js")
+}
+/* 
+ * forward events/functions so non-worker world can reach them
+ */
+
+this['serial0-input'] = function(c){
+  this.emulator.bus.send( 'serial0-input', c)
+}
+
+this.onmessage = function(e){
+  let {event,data} = e.data
+  if( this[event] ) this[event](data)
+}

com/xterm.js

@@ -0,0 +1,175 @@
+let terminalInstance = 0
+
+const TERMINAL_THEME = {
+  theme_foreground: {
+    // 'default': '#ffffff'
+  },
+  theme_background: {
+    // 'default': '#000'
+  },
+  theme_cursor: {
+    // 'default': '#ffffff'
+  },
+  theme_selection: {
+    // 'default': 'rgba(255, 255, 255, 0.3)'
+  },
+  theme_black: {
+    // 'default': '#000000'
+  },
+  theme_red: {
+    // 'default': '#e06c75'
+  },
+  theme_brightRed: {
+    // 'default': '#e06c75'
+  },
+  theme_green: {
+    // 'default': '#A4EFA1'
+  },
+  theme_brightGreen: {
+    // 'default': '#A4EFA1'
+  },
+  theme_brightYellow: {
+    // 'default': '#EDDC96'
+  },
+  theme_yellow: {
+    // 'default': '#EDDC96'
+  },
+  theme_magenta: {
+    // 'default': '#e39ef7'
+  },
+  theme_brightMagenta: {
+    // 'default': '#e39ef7'
+  },
+  theme_cyan: {
+    // 'default': '#5fcbd8'
+  },
+  theme_brightBlue: {
+    // 'default': '#5fcbd8'
+  },
+  theme_brightCyan: {
+    // 'default': '#5fcbd8'
+  },
+  theme_blue: {
+    // 'default': '#5fcbd8'
+  },
+  theme_white: {
+    // 'default': '#d0d0d0'
+  },
+  theme_brightBlack: {
+    // 'default': '#808080'
+  },
+  theme_brightWhite: {
+    // 'default': '#ffffff'
+  }
+}
+
+AFRAME.registerComponent('xterm', {
+  schema: Object.assign({
+    cols: {
+      type: 'number',
+      default: 110,
+    },
+    rows: {
+      type: 'number',
+      default: Math.floor( (window.innerHeight * 0.7 ) * 0.054 )
+    },
+  }, TERMINAL_THEME),
+
+  write: function(message) {
+    this.term.write(message)
+  },
+  init: function () {
+    const terminalElement = document.createElement('div')
+    terminalElement.setAttribute('style', `
+      width:  ${Math.floor( window.innerWidth * 0.7 )}px;
+      height: ${Math.floor( window.innerHeight * 0.7 )}px;
+      overflow: hidden;
+    `)
+
+    this.el.dom.appendChild(terminalElement)
+    //document.body.appendChild(terminalElement)
+    this.el.terminalElement = terminalElement
+
+    // Build up a theme object
+    const theme = Object.keys(this.data).reduce((theme, key) => {
+      if (!key.startsWith('theme_')) return theme
+      const data = this.data[key]
+      if(!data) return theme
+      theme[key.slice('theme_'.length)] = data
+      return theme
+    }, {})
+
+    this.renderType = 'dom'
+
+    const term = new Terminal({
+      theme: theme,
+      allowTransparency: true,
+      cursorBlink: true,
+      disableStdin: false,
+      rows: this.data.rows,
+      cols: this.data.cols,
+      fontSize: 14,
+      lineHeight: 1.15,
+      rendererType: this.renderType 
+    })
+
+    this.term = term
+
+    term.open(terminalElement)
+    term.focus()
+    
+    terminalElement.querySelector('.xterm-viewport').style.background = 'transparent'
+
+    ////// now we can scale  canvases to the parent element
+    const $screen = terminalElement.querySelector('.xterm-screen') 
+    $screen.style.width = '100%'
+
+    term.on('refresh', () => {
+      if( this.renderType == 'canvas' ){
+        const material = this.el.getObject3D('mesh').material
+        if (!material.map) return
+        this.canvasContext.drawImage(this.cursorCanvas, 0,0)
+        material.map.needsUpdate = true
+      }
+    })
+
+    term.on('data', (data) => {
+      this.el.emit('xterm-input', data)
+    })
+
+    this.el.addEventListener('click', () => {
+      term.focus()
+    })
+
+    this.el.addEventListener('serial-output-byte', (e) => {
+      const byte = e.detail
+      var chr = String.fromCharCode(byte);
+      this.term.write(chr)
+    })
+
+    this.el.addEventListener('serial-output-string', (e) => this.term.write(e.detail) )
+
+  },
+
+  setRenderType: function(type){
+
+    if( type.match(/(dom|canvas)/) ){
+
+      if( type == 'dom'){
+        this.el.removeAttribute('material')
+      }
+
+      term.setOption('rendererType',type )
+      this.renderType = type
+
+      if( type == 'canvas'){
+        this.canvas = terminalElement.querySelector('.xterm-text-layer')
+        this.canvasContext = this.canvas.getContext('2d')
+        this.cursorCanvas = terminalElement.querySelector('.xterm-cursor-layer')
+        this.el.setAttribute('material', 'transparent', true)
+        this.el.setAttribute('material', 'src', '#' + this.canvas.id)
+      }
+    }
+  },
+
+})