This commit is contained in:
yumoqing 2024-07-14 20:34:50 +08:00
parent d3f5502eae
commit 5c43989cd7
9 changed files with 218 additions and 1 deletions

View File

@ -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);
}
}

View File

@ -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);

30
bricks/myvad.js Normal file
View File

@ -0,0 +1,30 @@
/*
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.7/dist/bundle.min.js"></script>
<script>
async function main() {
const myvad = await vad.MicVAD.new({
onSpeechEnd: (audio) => {
// do something with `audio` (Float32Array of audio samples at sample rate 16000)...
},
})
myvad.start()
}
main()
</script>
*/
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;
}

11
bricks/tree_choose.js Normal file
View File

@ -0,0 +1,11 @@
var bricks = window.bricks || {};
bricks.TreeChoose = class extends bricks.VBox {
/*
{
}
*/
constructor(opts){
super(opts);
}

5
bricks/vision.js Normal file
View File

@ -0,0 +1,5 @@
bricks = window.bricks || {}
bricks.Vision = class extend bricks.Layout {
}

View File

@ -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);

21
examples/keyevent.ui Normal file
View File

@ -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')}}"
}
}
]
}

7
examples/keytext.ui Normal file
View File

@ -0,0 +1,7 @@
{
"widgettype":"Text",
"options":{
"text":"{{quotedstr(json.dumps(params_kw))}}",
"wrap":true
}
}

View File

@ -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"
}
}
]
}