Technical mailing list archives

technical@mail.odoo.com

Avatar

Re: Trying to embed xterm.js as Odoo widget

by
Axel Mendoza
- 15/05/2017 15:25:35
I think that you could get it working like this according with your changes and your video:
Look for the comments

    var ServerCli = common.AbstractField.extend({
        tagName: 'div', // this is the default
        className: 'terminal-container',    // let's make this.$el with this class
        id: 'terminal-container',           // and with this id
        renderElement: function() {
            this._super();
            // this.$el will be <div id="terminal-container" class="terminal-container"></div>
            // no need to append it since it was build by super call
            this.term = new Terminal({
              cols: 100,
              rows: 24
            });
        },
        start: function() {
            var socketURL = this.get('value');
            var sock = new WebSocket(socketURL);
            var self = this;
            sock.addEventListener('open', function () {
                self.term.terminadoAttach(sock);
            });
            // I think that now there is no need for a timeout, keep it only if is needed
            // no need to look for the dom node since it's this.$el
            this.term.open(this.$el, focus=true);
            this.set_dimensions('100%', '100%');
        },
    });

On Mon, May 15, 2017 at 1:50 PM, Maxim Litnitskiy <litnimaxster@gmail.com> wrote:
Thank you Alex for your advice.
But it did not work.
I event removed ajax loading to resource loading from xml.
The same.
Actually the problem is that xterm is trying to attach itself to DOM element while it's not yet there.
You can see this in action here - https://youtu.be/bEqOgNWbx80
I got your idea about _super(), and even re-worked everything to use it.
I even switched from JQuery this.$el.append to document.createElement.
But still the same - the terminal cannot find div element.
And all is ok when I set timeout for 3 seconds.


Here is the latest code:

odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({

      renderElement: function() {
        console.log('render');
        var self = this;
        return $.when(this._super()).then(function() {
          var d = document.createElement('div');
          d.setAttribute('id', 'terminal-container');
          self.setElement(d);
          self.term = new Terminal({
            cols: 100,
            rows: 24
          });
        });
      },

      render_value: function() {
        var self = this;
        return $.when(this._super()).then(function() {
          console.log('start');
          var socketURL = self.get('value');
          var sock = new WebSocket(socketURL);
          sock.addEventListener('open', function () {
            self.term.terminadoAttach(sock);
          });
          // Now it need some time to load correctly.
          console.log('get element', document.getElementById('terminal-container'));
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');

        });
        /*
        setTimeout(function() {
          console.log('get element', document.getElementById('terminal-container'));
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');
        }, 3000);
        */

      },

    });

    core.form_widget_registry.add('server_cli', ServerCli);

  });



On Mon, May 15, 2017 at 7:45 PM, Axel Mendoza Pupo <aekroft@gmail.com> wrote:
Hi Maxim
This code changes should solve your issue

###############################################################################
odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({
        willStart: function() {
            return $.when(
                this._super(), 
                ajax.loadJS('/asterisk_base/static/lib/xterm/dist/xterm.js'),
                ajax.loadJS('/asterisk_base/static/lib/xterm/dist/addons/terminado/terminado.js')
            );
        },
        renderElement: function() {
            this._super();
            this.$el.append('<div id="terminal-container" class="terminal-container"></div>');
            this.term = new Terminal({
              cols: 100,
              rows: 24
            });
        },
        start: function() {
            var socketURL = this.get('value');
            var sock = new WebSocket(socketURL);
            var self = this;
            sock.addEventListener('open', function () {
                self.term.terminadoAttach(sock);
            });
            // I think that now there is no need for a timeout, keep it only if is needed
            self.term.open(document.getElementById('terminal-container'), focus=true);
            self.set_dimensions('100%', '100%');
        },
    });

    core.form_widget_registry.add('server_cli', ServerCli);
  });
###############################################################################

On Mon, May 15, 2017 at 7:00 AM, Maxim Litnitskiy <litnimaxster@gmail.com> wrote:
Hi all!
I have developed an Odoo widget for xterm.js.
It works but has some issues.
As far as I can understand terminal is trying to initialize before Odoo widget is fully setup.
Here is the code and Youtube video showing the problem.
Anybody knowing Odoo JS framework internals please advise how to initialize the terminal when all is ready and Console tab is clicked.
Thanks!



odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({

      willStart: function() {
        console.log('ajax');
        if (!this.loadJS_def) {
          this.loadJS_def = ajax.loadJS(
            '/asterisk_base/static/lib/xterm/dist/xterm.js').then(function() {
                return $.when(
                  ajax.loadJS('/asterisk_base/static/lib/xterm/dist/addons/terminado/terminado.js')
                )
              });
        }
        return $.when(this._super(), this.loadJS_def);
      },

      renderElement: function() {
        this._super();
        this.$el.append('<div id="terminal-container" class="terminal-container"></div>');
        this.term = new Terminal({
          cols: 100,
          rows: 24
        });
      },

      start: function() {
        var socketURL = this.get('value');
        var sock = new WebSocket(socketURL);
        var self = this;
        sock.addEventListener('open', function () {
          self.term.terminadoAttach(sock);
        });
        // Now it need some time to load correctly.
        setTimeout(function() {
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');
        }, 3000);

      },

    });

    core.form_widget_registry.add('server_cli', ServerCli);

  });



_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-framework-62
Post to: mailto:expert-framework@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-framework-62
Post to: mailto:expert-framework@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-framework-62
Post to: mailto:expert-framework@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


Reference