trying to show chessboard js in odoo form widget,

Question

Hi i´m trying to show chessboardjs on a form view in odoo backend, I finally make the widget to show the board, but the pieces are hidden, I don´t know why because seems to work fine, except for the pieces. If I use dragable : true in the options and move a hidden piece then the board is rendered with all the pieces. do I´m missing something, on my code that the chessboard its not rendered well?? here is mi widget code:

(function (instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;

    openerp.chess_base = function (instance, local) {

        local.YourWidgetClassName = instance.web.form.FormWidget.extend({
            start: function () {
                this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>'); // creating the board in the DOM
                this.onBoard();
            },
            onBoard: function (position, orientation) {
                if (!position) {
                    this.position = 'start'
                } else {
                    this.position = position
                }
                if (!orientation) {
                    this.orientation = 'white'
                } else {
                    this.orientation = orientation
                }
                this.el_board = this.$('#board');
                this.cfg = {
                    position: this.position,
                    orientation: this.orientation,
                    draggable: false,
                    pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
                };
                this.board = ChessBoard(this.el_board, this.cfg);
            }
        });

        instance.web.form.custom_widgets.add('widget_tag_name', 'instance.chess_base.YourWidgetClassName');
    }
})(openerp);

Answer 1

I don't know why but this solve the issue, if someone have an explanation to me please ...

(function (instance) {
    var _t = instance.web._t,
        _lt = instance.web._lt;
    var QWeb = instance.web.qweb;

    openerp.chess_base = function (instance, local) {

        local.ShowBoard = instance.web.form.FormWidget.extend({
            start: function () {
                this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
                this.show_board();
            },
            show_board: function () {
                var Game = new instance.web.Model("chess.game"),
                    record_id = this.field_manager.datarecord.id,
                    record_name = this.field_manager.datarecord.name,
                    self = this;
                    self.el_board = self.$('#board');

                Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
                    console.log(data);
                    self.cfg = {
                        position: data[0].pgn,
                        orientation: 'white',
                        pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
                    };
                    ChessBoard(self.el_board, self.cfg);
                });
            }
        });

        instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
    }
})(openerp);