in odoo 10, how do i modify the POS to add a new header widget?

Question

Im trying to add a custom widget similar to HeaderButtonWidget, or StatusWidget, but im not able to do it yet: my first attempt:

odoo.define('my_module.pos', function(require) {
    "use strict";    
    var chrome  = require('point_of_sale.chrome');
    var _t = core._t;
    var _lt = core._lt;
    ...
    var AltHeader = chrome.HeaderButtonWidget.extend({
        template : 'AltHeader',
        init: function(parent, options){
            options = options || {};
            this._super(parent, options);
            this.action = options.action;
            this.label   = options.label;
        },
        renderElement: function(){
            var self = this;
            this._super();
        },
        button_click: function(){ console.log("its a hit") },
        highlight: function(highlight){
        this.$el.toggleClass('highlight',!!highlight);
        },
    });

but this is not working, and HeaderButtonWidget is not returned by the main method of point_of_sale/static/src/js/screens.js so according to this page: http://odoo-development.readthedocs.io/en/latest/dev/pos/gui.html so using the screen widget extend is not possible, how do i do this?

EDIT: Here is what i have attempted:

odoo.define('pos_widget_toggler.pos', function (require) {
"use strict";
  var PosBaseWidget = require('point_of_sale.BaseWidget');
  var core = require('web.core');
  var _t = core._t;
  var _lt = core._lt;
  var AltHeader = PosBaseWidget.extend({
  template: 'AltHeader',
  init: function(parent,options){
            this._super(parent, options);
            this.label = _lt('OFF');
            this.action= function(){
                // code will be here
                } ;
       },
    });

  return{
    AltHeader:AltHeader
    };
});

and pos_widget_toggler.xml

    <templates id="pos_widget_toggler" inherit_id="point_of_sale.template" xml:space="preserve">
    <t t-name="AltHeader">
        <div class="oe_status">
            <t t-esc="widget.label" />
        </div>
    </t>
   </templates>

Im still not able to see anything,

Answer 1

To create new widget,

odoo.define('point_of_sale.chrome', function (require) {
"use strict";
  var PosBaseWidget = require('point_of_sale.BaseWidget');
  var AltHeader = PosBaseWidget.extend({
  template: 'AltHeader',
  init: function(parent, options){
    //Your code
       } 
    });

  return{
     AltHeader:AltHeader
 };
});

your_custom_module/static/src/xml/file.xml

<t t-name="AltHeader">
    <div class="oe_status">
        // Your code
    </div>
</t>

Add this template file in your manifest.

your_custom_module/__manifest__.py

'qweb': ['static/src/xml/pos.xml'],

Hope it will help you.