diff --git a/bricks/bricks.js b/bricks/bricks.js
index 45fa558..83e72b6 100755
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@@ -446,6 +446,7 @@ bricks.App = class extends bricks.Layout {
bricks.Body = this;
this.login_url = opts.login_url;
this.charsize = this.opts.charsize || 20;
+ this.keyevent_blocked = false;
this.char_size = this.observable('charsize', this.charsize);
if (this.opts.language){
this.lang = this.opts.language;
@@ -461,6 +462,7 @@ bricks.App = class extends bricks.Layout {
this.add_widget(this.tooltip);
this._Width = this.dom_element.offsetWidth;
this._Height = this.dom_element.offsetHeight;
+ document.addEventListener('keydown', this.key_down_action.bind(this));
}
create(){
this.dom_element = document.getElementsByTagName('body')[0];
@@ -519,4 +521,19 @@ bricks.App = class extends bricks.Layout {
await (this.i18n.change_lang(lang));
this.lang_x.set(this.lang);
}
+ async key_down_action(event){
+ if (this.keyevent_blocked){
+ return;
+ }
+ var d = {
+ key:event.key,
+ repeat:event.repeat,
+ altkey:event.altKey,
+ ctrlkey:event.ctrlKey,
+ shiftkey:event.shiftKey,
+ metakey:event.metaKey,
+ code:event.code
+ }
+ this.dispatch('keydown', d);
+ }
}
diff --git a/bricks/layout.js b/bricks/layout.js
index 0c9895d..8e1a82d 100755
--- a/bricks/layout.js
+++ b/bricks/layout.js
@@ -114,6 +114,32 @@ bricks.FVBox = class extends bricks.VBox {
this.set_style('flexWrap', 'nowrap');
}
}
+
+bricks.ResponsableBox = class extends bricks.Layout {
+ constructor(opts){
+ super(opts);
+
+ this.bind('element_resize', this.reset_type.bind(this));
+ }
+ reset_type(event){
+ var w = this.dom_element.clientWidth;
+ var h = this.dom_element.clientHeight;
+ var cr = event.params;
+ console.log('size changed', w, h, cr);
+ if (w > h) {
+ this.set_css('vcontainer', true);
+ this.set_css('hcontainer');
+ this.set_style('width', 'auto');
+ this.set_style('height', '100%');
+
+ } else {
+ this.set_css('vcontainer');
+ this.set_css('hcontainer', true);
+ this.set_style('height', 'auto');
+ this.set_style('width', '100%');
+ }
+ }
+}
bricks.Factory.register('HBox', bricks.HBox);
bricks.Factory.register('FHBox', bricks.FHBox);
bricks.Factory.register('VBox', bricks.VBox);
@@ -121,4 +147,4 @@ bricks.Factory.register('FVBox', bricks.FVBox);
bricks.Factory.register('Filler', bricks.Filler);
bricks.Factory.register('HFiller', bricks.Filler);
bricks.Factory.register('VFiller', bricks.Filler);
-
+bricks.Factory.register('ResponsableBox', bricks.ResponsableBox);
diff --git a/bricks/myvad.js b/bricks/myvad.js
new file mode 100644
index 0000000..59df593
--- /dev/null
+++ b/bricks/myvad.js
@@ -0,0 +1,30 @@
+/*
+
+
+
+*/
+
+var bricks = window.bricks || {};
+bricks.enable_vad = async function(func){
+ /*
+ func accept one argument "audio"(float32array of audio samples at sample rate 16000)
+ */
+ bricks.vad = await vad.MicVAD.new({
+ onSpeechEnd:func
+ });
+ bricks.vad.start();
+}
+bricks.disable_vad = async function(){
+ bricks.vad.stop();
+ bricks.vad = null;
+}
diff --git a/bricks/tree_choose.js b/bricks/tree_choose.js
new file mode 100644
index 0000000..70c4b09
--- /dev/null
+++ b/bricks/tree_choose.js
@@ -0,0 +1,11 @@
+var bricks = window.bricks || {};
+
+bricks.TreeChoose = class extends bricks.VBox {
+ /*
+ {
+ }
+ */
+ constructor(opts){
+ super(opts);
+
+}
diff --git a/bricks/vision.js b/bricks/vision.js
new file mode 100644
index 0000000..125b5ee
--- /dev/null
+++ b/bricks/vision.js
@@ -0,0 +1,5 @@
+bricks = window.bricks || {}
+
+bricks.Vision = class extend bricks.Layout {
+
+}
diff --git a/bricks/widget.js b/bricks/widget.js
index e557164..5e5d623 100755
--- a/bricks/widget.js
+++ b/bricks/widget.js
@@ -1,4 +1,19 @@
var bricks = window.bricks || {};
+/*
+We use ResizeObserver to implements dom object resize event
+*/
+bricks.resize_observer = new ResizeObserver(entries => {
+ for (let entry of entries){
+ const cr = entry.contentRect;
+ const ele = entry.target;
+ const w = ele.bricks_widget;
+ // console.log('size=', cr, 'element=', ele, w);
+ if (w){
+ w.dispatch('element_resize', cr);
+ }
+ }
+});
+
bricks.JsWidget = class {
constructor(options){
if (!options){
@@ -24,6 +39,10 @@ bricks.JsWidget = class {
this.bind('mousemove', w.show.bind(w, this.opts.tip));
this.bind('mouseout', w.hide.bind(w));
}
+ bricks.resize_observer.observe(this.dom_element);
+ }
+ is_in_dom(){
+ return document.contains(this.dom_element);
}
getUserData(){
return this.user_data || null;
@@ -311,6 +330,42 @@ bricks.Text = class extends bricks.TextBase {
}
}
+bricks.KeyinText = class extends bricks.Text {
+ constructor(opts){
+ super(opts);
+ if (! this.name) {
+ this.name = 'data';
+ }
+ bricks.app.bind('keydown', this.key_down_action.bind(this))
+ }
+ key_down_action(event){
+ var kdic = event.params;
+ switch (kdic.key) {
+ case 'Delete':
+ this.set_text('');
+ this.dispatch_changed();
+ break;
+ case 'Backspace':
+ var s = this.text.substring(0, this.text.length - 1);
+ this.set_text(s);
+ this.dispatch_changed();
+ break;
+ default:
+ if (kdic.key.length == 1){
+ var txt = this.text + kdic.key;
+ this.set_text(txt);
+ this.dispatch_changed();
+ }
+ break;
+ }
+ }
+ dispatch_changed(){
+ var d = {};
+ d[this.name] = this.text;
+ this.dispatch('changed', d);
+ }
+}
+
bricks.Title1 = class extends bricks.TextBase {
constructor(options){
super(options);
@@ -412,6 +467,7 @@ bricks.Tooltip = class extends bricks.Text {
bricks.Factory.register('Tooltip', bricks.Tooltip);
bricks.Factory.register('Text', bricks.Text);
+bricks.Factory.register('KeyinText', bricks.KeyinText);
bricks.Factory.register('Title1', bricks.Title1);
bricks.Factory.register('Title2', bricks.Title2);
bricks.Factory.register('Title3', bricks.Title3);
diff --git a/examples/keyevent.ui b/examples/keyevent.ui
new file mode 100644
index 0000000..3daa775
--- /dev/null
+++ b/examples/keyevent.ui
@@ -0,0 +1,21 @@
+{
+ "widgettype":"VBox",
+ "options":{
+ "overflow":"auto",
+ "width":"100%",
+ "height":"100%",
+ },
+ "binds":[
+ {
+ "wid":"app",
+ "event":"keydown",
+ "actiontype":"urlwidget",
+ "target":"self",
+ "mode":"append",
+ "options":{
+ "params":{},
+ "url":"{{entire_url('./keytext.ui')}}"
+ }
+ }
+ ]
+}
diff --git a/examples/keytext.ui b/examples/keytext.ui
new file mode 100644
index 0000000..4a7a8ac
--- /dev/null
+++ b/examples/keytext.ui
@@ -0,0 +1,7 @@
+{
+ "widgettype":"Text",
+ "options":{
+ "text":"{{quotedstr(json.dumps(params_kw))}}",
+ "wrap":true
+ }
+}
diff --git a/examples/responsablebox.ui b/examples/responsablebox.ui
new file mode 100644
index 0000000..403d4ff
--- /dev/null
+++ b/examples/responsablebox.ui
@@ -0,0 +1,44 @@
+{
+ "widgettype":"ResponsableBox",
+ "options":{
+ "width":"100%",
+ "height":"100%",
+ "overflow":"auto",
+ "bgcolor":"#6f6f6f"
+ },
+ "subwidgets":[
+ {
+ "widgettype":"VBox",
+ "options":{
+ "width":"300px",
+ "height":"300px",
+ "bgcolor":"#f9f9f9",
+ "color":"#3f3f3f",
+ "flexShrink":0,
+ "margin":"4px"
+ }
+ },
+ {
+ "widgettype":"VBox",
+ "options":{
+ "width":"300px",
+ "height":"300px",
+ "bgcolor":"#f9f9f9",
+ "color":"#3f3f3f",
+ "flexShrink":0,
+ "margin":"4px"
+ }
+ },
+ {
+ "widgettype":"VBox",
+ "options":{
+ "width":"300px",
+ "height":"300px",
+ "bgcolor":"#f9f9f9",
+ "color":"#3f3f3f",
+ "flexShrink":0,
+ "margin":"4px"
+ }
+ }
+ ]
+}