main
yumoqing 2024-02-06 14:30:10 +08:00
parent ca905937cf
commit 3a97400c94
60 changed files with 835 additions and 1599 deletions

View File

@ -4,9 +4,12 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
<script src="/3parties/recorder.wav.min.js"></script>
<script src="/bricks/bricks.js"></script>
<script>

View File

@ -16,6 +16,7 @@ bricks.Layout = class extends bricks.JsWidget {
var pos_w = this.children[index];
this.dom_element.insertBefore(w.dom_element, pos_w.dom_element);
this.children.insert(index+1, w);
w.dispatch('on_parent', this);
}
remove_widgets_at_begin(cnt){
return this._remove_widgets(cnt, false);

View File

@ -1,52 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Accordion",
"options":{
"item_size":'28px',
"items":[
{
"name":"test1",
"icon":"/imgs/t.png",
"text":"accordion 1 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 1",
"i81n":true
}
}
},
{
"name":"test2",
"icon":"/imgs/t.png",
"text":"accordion 2 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 2",
"i81n":true
}
}
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,33 @@
{
"widgettype":"Accordion",
"options":{
"item_size":'28px',
"items":[
{
"name":"test1",
"icon":"/imgs/t.png",
"text":"accordion 1 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 1",
"i81n":true
}
}
},
{
"name":"test2",
"icon":"/imgs/t.png",
"text":"accordion 2 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 2",
"i81n":true
}
}
}
]
}
}

View File

@ -1,28 +0,0 @@
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
/*
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
*/
const opts =
{
"widget": {
"id":"audioplayer",
"widgettype":"AudioPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,9 @@
{
"id":"audioplayer",
"widgettype":"AudioPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
}
}

View File

@ -1,57 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"HBox",
"options":{
"height":"auto",
"width":"100%"
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"name":"test",
"icon":"/bricks/imgs/submit.png",
"label":"test once",
"tooltip":"This is a joke too",
"nonepack":true,
"orientation":"horizontal"
}
},
{
"widgettype":"Button",
"options":{
"name":"test",
"icon":"/bricks/imgs/reset.png",
"tooltip":"This is a joke",
"label":"test twice",
"nonepack":true,
"orientation":"horizontal"
}
}
],
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"script":"alert('HBox clicked');"
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

40
examples/button.ui 100644
View File

@ -0,0 +1,40 @@
{
"widgettype":"HBox",
"options":{
"height":"auto",
"width":"100%"
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"name":"test",
"icon":"/bricks/imgs/submit.png",
"label":"test once",
"tooltip":"This is a joke too",
"nonepack":true,
"orientation":"horizontal"
}
},
{
"widgettype":"Button",
"options":{
"name":"test",
"icon":"/bricks/imgs/reset.png",
"tooltip":"This is a joke",
"label":"test twice",
"nonepack":true,
"orientation":"horizontal"
}
}
],
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"script":"alert('HBox clicked');"
}
]
}

View File

@ -1,22 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"users.bcrud"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"users.bcrud"
}
}

View File

@ -1,22 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"iptvchannels.bcrud"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -1,24 +0,0 @@
<html>
<head>
</head>
<body>
<script src="/marked.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"MarkdownViewer",
"options":{
"navigator":true,
"md_url":"../docs/index.md"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

8
examples/docs.ui 100644
View File

@ -0,0 +1,8 @@
{
"widgettype":"MarkdownViewer",
"options":{
"navigator":true,
"md_url":"../docs/index.md"
}
}

View File

@ -1,24 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"editabletree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"editabletree.json"
}
}

View File

@ -1,105 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Tree",
"options":{
"idField":"id",
"textField":"text",
"data":[
{
"id":1,
"text":"node1",
"is_leaf":false,
"children":[
{
"id":11,
"text":"node11",
"is_leaf":false,
"children":[
{
"id":112,
"text":"node.12",
"is_leaf":false,
"children":[
{
"id":1112,
"text":"node1112",
"is_leaf":true
},
{
"id":1113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":12,
"text":"node12",
"is_leaf":true
},
{
"id":13,
"text":"node13",
"is_leaf":true
}
]
},
{
"id":2,
"text":"node2",
"is_leaf":false,
"children":[
{
"id":21,
"text":"node21",
"is_leaf":true
},
{
"id":22,
"text":"node22",
"is_leaf":true
},
{
"id":23,
"text":"node23",
"is_leaf":true
}
]
},
{
"id":3,
"text":"node3",
"is_leaf":true
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
var m = new Error({
"title":"TEst Message",
"message":"This is a test message",
"auto_open":true,
"timeout":30
})
</script>
</body>
</html>

83
examples/error.ui 100644
View File

@ -0,0 +1,83 @@
{
"widgettype":"Tree",
"options":{
"idField":"id",
"textField":"text",
"data":[
{
"id":1,
"text":"node1",
"is_leaf":false,
"children":[
{
"id":11,
"text":"node11",
"is_leaf":false,
"children":[
{
"id":112,
"text":"node.12",
"is_leaf":false,
"children":[
{
"id":1112,
"text":"node1112",
"is_leaf":true
},
{
"id":1113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":12,
"text":"node12",
"is_leaf":true
},
{
"id":13,
"text":"node13",
"is_leaf":true
}
]
},
{
"id":2,
"text":"node2",
"is_leaf":false,
"children":[
{
"id":21,
"text":"node21",
"is_leaf":true
},
{
"id":22,
"text":"node22",
"is_leaf":true
},
{
"id":23,
"text":"node23",
"is_leaf":true
}
]
},
{
"id":3,
"text":"node3",
"is_leaf":true
}
]
}
}

View File

@ -1,64 +0,0 @@
<html>
<head>
</head>
<body>
<div>
<button onclick="f()">uoload</button>
</div>
<script src="../bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"id":"file1",
"widgettype":"UtFile",
"options":{
"name":"file1",
"label":"File 1"
}
},
{
"widgettype":"Text",
"options":{
"text":"upload"
},
"binds":[
{
"wid":"self",
"event":"clcik",
"action":{
"rfname":"do_upload"
}
}
]
}
]
}
}
;
var f = async function(){
console.log('it work');
var b = new Bricks();
var w = b.getWidgetById('file1', bricks_app.root);
var file = w.files[0];
var fd = new FormData();
fd.append('file1', file);
var resp = await jcall('http://192.168.1.10/examples/fileupload.dspy',{
method:'POST',
params:fd
})
console.log('resp=', resp);
}
rf = new RegisterFunction();
rf.register('do_upload', f);
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,32 @@
{
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"id":"file1",
"widgettype":"UtFile",
"options":{
"name":"file1",
"label":"File 1"
}
},
{
"widgettype":"Text",
"options":{
"text":"upload"
},
}
],
"binds":[
{
"wid":"self",
"event":"clcik",
"action":{
"rfname":"do_upload"
}
}
]
}

View File

@ -1,4 +0,0 @@
;
const app = BricksApp(opts);
app.run();
</script>

View File

@ -1,167 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{"height":"100%"},
"subwidgets":[
{
"widgettype":"HBox",
"options":{"height":"auto"},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"otext":"Please change Font size",
"i18n":true
}
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":0.8
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
},
{
"widgettype":"Form",
"options":{
"submit_url":"/ttt/ttt.dspy",
"title":"Test hahah Form",
"description":"test input implemented",
"fields":[
{
"uitype":"email",
"name":"email",
"label":"Email",
'required':true
},
{
"uitype":"tel",
"name":"tel",
"pattern":"{\d}3-{\d}4-{\d}4",
"label":"Tel",
'required':true
},
{
"uitype":"file",
"name":"file",
"label":"File",
'required':true
},
{
"uitype":"str",
"minlength":3,
"length":30,
"value":"tlegre",
"name":"name",
"label":"Name",
'required':true
},
{
"uitype":"int",
"minlength":3,
"length":30,
"value":12432,
"name":"integer",
"label":"Integer",
'required':true
},
{
"uitype":"float",
"dec_length":3,
"length":25,
"name":"float",
"label":"Float"
},
{
"uitype":"date",
"name":"date",
"label":"Date",
'required':true
},
{
"uitype":"password",
"minlength":3,
"length":30,
"name":"password",
"label":"Password",
'required':true
},
{
"uitype":"checkbox",
"name":"checkbox",
"label":"CheckBox",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"audio",
"name":"audio",
"label":"Audio",
'required':true
},
{
"uitype":"code",
"name":"code",
"label":"Code",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"text",
"name":"text",
"value":"This is a test",
"label":"Text",
'required':true
}
]
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

151
examples/form.ui 100644
View File

@ -0,0 +1,151 @@
{
"widgettype":"VBox",
"options":{"height":"100%"},
"subwidgets":[
{
"widgettype":"HBox",
"options":{"height":"auto"},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"otext":"Please change Font size",
"i18n":true
}
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"width":"auto",
"item_rate":0.8
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
},
{
"widgettype":"Form",
"options":{
"submit_url":"/ttt/ttt.dspy",
"title":"Test hahah Form",
"description":"test input implemented",
"fields":[
{
"uitype":"email",
"name":"email",
"label":"Email",
'required':true
},
{
"uitype":"tel",
"name":"tel",
"pattern":"{\d}3-{\d}4-{\d}4",
"label":"Tel",
'required':true
},
{
"uitype":"file",
"name":"file",
"label":"File",
'required':true
},
{
"uitype":"str",
"minlength":3,
"length":30,
"value":"tlegre",
"name":"name",
"label":"Name",
'required':true
},
{
"uitype":"int",
"minlength":3,
"length":30,
"value":12432,
"name":"integer",
"label":"Integer",
'required':true
},
{
"uitype":"float",
"dec_length":3,
"length":25,
"name":"float",
"label":"Float"
},
{
"uitype":"date",
"name":"date",
"label":"Date",
'required':true
},
{
"uitype":"password",
"minlength":3,
"length":30,
"name":"password",
"label":"Password",
'required':true
},
{
"uitype":"checkbox",
"name":"checkbox",
"label":"CheckBox",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"audio",
"name":"audio",
"label":"Audio",
'required':true
},
{
"uitype":"code",
"name":"code",
"label":"Code",
"value":2,
"dataurl":"test_code.json",
'required':true
},
{
"uitype":"text",
"name":"text",
"value":"This is a test",
"label":"Text",
'required':true
}
]
}
}
]
}

View File

@ -1,65 +0,0 @@
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
},
"binds":[
{
"wid":"self",
"target":"self",
"event":"click",
"actiontype":"script",
"script":"alert('hahahahahah');"
}
]
},
{
"widgettype":"urlwidget",
"options":{
"url":"/bricks/image.tmpl",
"i18n":true
}
},
{
"id":"mymodal",
"widgettype":"Modal",
"options":{
"auto_close":true,
"auto_open":false,
"width":"700px",
"height":"400px",
"archor":"cl",
},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"This is a test"
}
}
]
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

50
examples/hbox.ui 100644
View File

@ -0,0 +1,50 @@
{
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
},
"binds":[
{
"wid":"self",
"target":"self",
"event":"click",
"actiontype":"script",
"script":"alert('hahahahahah');"
}
]
},
{
"widgettype":"urlwidget",
"options":{
"url":"/bricks/image.tmpl",
"i18n":true
}
},
{
"id":"mymodal",
"widgettype":"Modal",
"options":{
"auto_close":true,
"auto_open":false,
"width":"700px",
"height":"400px",
"archor":"cl",
},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"This is a test"
}
}
]
}
]
}

View File

@ -1,8 +0,0 @@
<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<script
type="text/javascript"
src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" ></script>
<script defer src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =

View File

@ -1,27 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Image",
"options":{
"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
"height":"100%",
"width":"100%"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,9 @@
{
"widgettype":"Image",
"options":{
"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
"height":"100%",
"width":"100%"
}
}

View File

@ -1,29 +0,0 @@
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
/*
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
*/
const opts =
{
"widget": {
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
"type":"hls"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

10
examples/m3u8.ui 100644
View File

@ -0,0 +1,10 @@
{
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
"type":"hls"
}
}

View File

View File

@ -1,38 +0,0 @@
<html>
<head>
</head>
<body>
<div>
<script src="/marked.min.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"MarkdownViewer",
"options":{
"md_url":"test1.md"
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,21 @@
{
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"MarkdownViewer",
"options":{
"md_url":"test1.md"
}
}
]
}

View File

@ -1,107 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Tree",
"options":{
"idField":"id",
"textField":"text",
"data":[
{
"id":1,
"text":"node1",
"is_leaf":false,
"children":[
{
"id":11,
"text":"node11",
"is_leaf":false,
"children":[
{
"id":112,
"text":"node.12",
"is_leaf":false,
"children":[
{
"id":1112,
"text":"node1112",
"is_leaf":true
},
{
"id":1113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":12,
"text":"node12",
"is_leaf":true
},
{
"id":13,
"text":"node13",
"is_leaf":true
}
]
},
{
"id":2,
"text":"node2",
"is_leaf":false,
"children":[
{
"id":21,
"text":"node21",
"is_leaf":true
},
{
"id":22,
"text":"node22",
"is_leaf":true
},
{
"id":23,
"text":"node23",
"is_leaf":true
}
]
},
{
"id":3,
"text":"node3",
"is_leaf":true
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
var m = new Message({
"title":"TEst Message",
"message":"This is a test message",
"auto_open":true,
"timeout":3
})
</script>
</body>
</html>

View File

@ -0,0 +1,83 @@
{
"widgettype":"Tree",
"options":{
"idField":"id",
"textField":"text",
"data":[
{
"id":1,
"text":"node1",
"is_leaf":false,
"children":[
{
"id":11,
"text":"node11",
"is_leaf":false,
"children":[
{
"id":112,
"text":"node.12",
"is_leaf":false,
"children":[
{
"id":1112,
"text":"node1112",
"is_leaf":true
},
{
"id":1113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":113,
"text":"node113",
"is_leaf":true
}
]
},
{
"id":12,
"text":"node12",
"is_leaf":true
},
{
"id":13,
"text":"node13",
"is_leaf":true
}
]
},
{
"id":2,
"text":"node2",
"is_leaf":false,
"children":[
{
"id":21,
"text":"node21",
"is_leaf":true
},
{
"id":22,
"text":"node22",
"is_leaf":true
},
{
"id":23,
"text":"node23",
"is_leaf":true
}
]
},
{
"id":3,
"text":"node3",
"is_leaf":true
}
]
}
}

View File

@ -1,24 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"miniform.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"miniform.json"
}
}

View File

@ -1,22 +0,0 @@
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"modal.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"modal.json"
}
}

View File

@ -1,26 +0,0 @@
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"id":"recorder",
"widgettype":"AudioRecorder",
"options":{
"height":"40px",
"start_icon":"/bricks/imgs/start_recording.png"
}
}
}
;
const app = new BricksApp(opts);
console.log('here ..........');
app.run();
console.log('here 1..........');
</script>
</body>
</html>

View File

@ -0,0 +1,17 @@
{
"id":"recorder",
"widgettype":"AudioRecorder",
"options":{
"height":"40px",
"upload_url":"{{entire_url('stt.dspy')}}",
"start_icon":"/bricks/imgs/start_recording.png"
},
"binds":[
{
"wid":"self",
"event":"uploaded",
"actiontype":"script",
"script":"alert('kwargs', kwargs, args)"
}
]
}

View File

@ -1,24 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"scroll.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"scroll.json"
}
}

View File

@ -1,69 +0,0 @@
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 2 },
{ from: 2, to: 3 }
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
navigationButtons: true,
keyboard: true,
hover: true,
multiselect: true,
hideEdgesOnDrag: false,
hideNodesOnDrag: false,
dragView: true,
zoomView: true
},
manipulation: {
enabled: true,
initiallyActive: true,
addNode: function(nodeData, callback) {
nodeData.id = (Math.random() * 1000000).toFixed(0);
nodeData.label = 'Node ' + nodeData.id;
nodes.add(nodeData);
callback(nodeData);
},
editNode: function(nodeData, callback) {
nodeData.label = 'Node ' + nodeData.id;
nodes.update(nodeData);
callback(nodeData);
},
deleteNode: function(nodeData, callback) {
nodes.remove(nodeData.id);
callback(nodeData);
}
}
};
var network = new vis.Network(container, data, options);
network.on('oncontext', function(properties) {
var nodeId = properties.nodes[0];
var node = nodes.get(nodeId);
// display context menu
// ...
});
</script>
</body>
</html>

View File

@ -1,75 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"TabPanel",
"options":{
"tab_wide":"auto",
"height":"100%",
"tab_long":"70%",
"tab_pos":"top",
"items":[
{
"name":"c",
"label":"C",
"content":{
"widgettype":"Text",
"options":{
"text":"This is a C language documents"
}
},
"icon":null
},
{
"name":"javascript",
"removable":true,
"label":"JavaScript",
"content":{
"widgettype":"Text",
"options":{
"text":"This is JavaScript language documents"
}
},
"icon":null
},
{
"name":"php",
"label":"PHP",
"content":{
"widgettype":"Text",
"options":{
"text":"This is PHP language documents"
}
},
"icon":null
},
{
"name":"python",
"label":"Python",
"content":{
"widgettype":"Text",
"options":{
"text":"This is Python language documents"
}
},
"icon":null
},
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

58
examples/tab.ui 100644
View File

@ -0,0 +1,58 @@
{
"widgettype":"TabPanel",
"options":{
"tab_wide":"auto",
"height":"100%",
"tab_long":"70%",
"tab_pos":"top",
"items":[
{
"name":"c",
"label":"C",
"content":{
"widgettype":"Text",
"options":{
"text":"This is a C language documents"
}
},
"icon":null
},
{
"name":"javascript",
"removable":true,
"label":"JavaScript",
"content":{
"widgettype":"Text",
"options":{
"text":"This is JavaScript language documents"
}
},
"icon":null
},
{
"name":"php",
"label":"PHP",
"content":{
"widgettype":"Text",
"options":{
"text":"This is PHP language documents"
}
},
"icon":null
},
{
"name":"python",
"label":"Python",
"content":{
"widgettype":"Text",
"options":{
"text":"This is Python language documents"
}
},
"icon":null
},
]
}
}

View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"tables.json"
}
}

View File

@ -1,25 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"tables.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -1,39 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
var ws = new WebSocket("ws://localhost/test/dev.xterm");
console.log('term=', term);
var curr_line = "";
var entries = [];
term.prompt = () => {
if (curr_line) {
let data = { method: "command", command: curr_line };
ws.send(JSON.stringify(data));
}
};
term.prompt();
// Receive data from socket
ws.onmessage = msg => {
term.write(JSON.parse(msg.data).data);
};
term.onData(function(key) {
//Enter
let msg = {
data:{data:key},
type:1
}
ws.send(key);
});
</script>
</body>
</html>

View File

@ -1,144 +0,0 @@
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.header-cell,
.data-cell {
padding: 8px;
text-align: left;
border: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
</style>
</head>
<body>
<div>Test Grid table </div>
<div id="grid-container">
</div>
<script>
class GridData {
constructor(data, container) {
this.data = data;
this.container = container;
this.columns = Object.keys(data[0]).length;
this.rows = data.length;
this.minColumnWidth = 100; // minimum column width in pixels
}
render() {
// Create a grid container element
const gridContainer = document.createElement('div');
gridContainer.classList.add('grid-container');
// Create the header cells
for (let i = 0; i < this.columns; i++) {
const headerCell = document.createElement('div');
headerCell.classList.add('header-cell');
headerCell.textContent = Object.keys(this.data[0])[i];
headerCell.setAttribute('data-col', i);
headerCell.style.gridArea = `1 / ${i + 1} / 2 / ${i + 2}`;
headerCell.addEventListener('mousedown', this.startResize.bind(this));
gridContainer.appendChild(headerCell);
}
// Create the data cells
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.columns; j++) {
const dataCell = document.createElement('div');
dataCell.classList.add('data-cell');
dataCell.setAttribute('data-col', j);
dataCell.textContent = Object.values(this.data[i])[j];
dataCell.style.gridArea = `${i + 2} / ${j + 1} / ${i + 3} / ${j + 2}`;
gridContainer.appendChild(dataCell);
}
}
// Add the grid container to the container element
this.container.appendChild(gridContainer);
}
startResize(e) {
this.resizing = true;
this.currentCol = e.target.getAttribute('data-col');
this.initialX = e.clientX;
this.currentWidth = parseInt(
document.defaultView.getComputedStyle(e.target).width,
10
);
document.documentElement.addEventListener('mousemove', this.resize.bind(this));
document.documentElement.addEventListener('mouseup', this.stopResize.bind(this));
}
/*
resize(e) {
if (this.resizing) {
const deltaX = e.clientX - this.initialX;
const newWidth = this.currentWidth + deltaX;
if (newWidth > this.minColumnWidth) {
document
.querySelectorAll(`[data-col="${this.currentCol}"]`)
.forEach((cell) => (cell.style.width = `${newWidth}px`));
}
}
}
*/
resize(e) {
if (this.resizing) {
const deltaX = e.clientX - this.initialX;
const newWidth = this.currentWidth + deltaX;
if (newWidth > this.minColumnWidth) {
// Set the width of the current column
document
.querySelectorAll(`[data-col="${this.currentCol}"]`)
.forEach((cell) => (cell.style.width = `${newWidth}px`));
// Calculate the total width of all the columns
let totalWidth = 0;
document
.querySelectorAll('.header-cell')
.forEach((cell) => (totalWidth += parseInt(cell.style.width)));
// Calculate the width of each column based on the total width
const columnWidths = Array.from(
document.querySelectorAll('.header-cell')
).map((cell) => `minmax(${this.minColumnWidth}px, ${cell.style.width})`);
const gridTemplateColumns = columnWidths.join(' ');
// Set the grid-template-columns property on the grid container
document.querySelector('.grid-container').style.gridTemplateColumns =
gridTemplateColumns;
}
}
}
stopResize(e) {
this.resizing = false;
document.documentElement.removeEventListener('mousemove', this.resize);
document.documentElement.removeEventListener('mouseup', this.stopResize);
}
}
const data = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Mary', age: 30, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' },
];
const container = document.getElementById('grid-container');
const grid = new GridData(data, container);
grid.render();
</script>
</body>
</html>

View File

@ -1,24 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Text",
"options":{
"text":"This is a test"
}
}
}
;
const app = new BricksApp(opts);
app.run();
await fetch('http://localhost/
</script>
</body>
</html>

View File

@ -1,117 +0,0 @@
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title2",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title3",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title4",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title5",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title6",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Text",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":0.7,
"item_size":"20px"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -1,48 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Toolbar",
"options":{
"target":null,
"orientation":"horizontal",
"tool_margin":"15px",
"tools":[
{
"name":"c",
"Label":"C",
"icon":null
},
{
"name":"javascript",
"Label":"JavaScript",
"icon":null
},
{
"name":"php",
"Label":"PHP",
"icon":null
},
{
"name":"python",
"Label":"Python",
"icon":null
},
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

View File

@ -0,0 +1,31 @@
{
"widgettype":"Toolbar",
"options":{
"target":null,
"orientation":"horizontal",
"tool_margin":"15px",
"tools":[
{
"name":"c",
"Label":"C",
"icon":null
},
{
"name":"javascript",
"Label":"JavaScript",
"icon":null
},
{
"name":"php",
"Label":"PHP",
"icon":null
},
{
"name":"python",
"Label":"Python",
"icon":null
},
]
}
}

View File

@ -1,24 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"tree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

7
examples/tree.ui 100644
View File

@ -0,0 +1,7 @@
{
"widgettype":"urlwidget",
"options":{
"url":"tree.json"
}
}

View File

@ -1,70 +0,0 @@
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"urlwidget",
"options":{
"url":"/bricks/image.tmpl"
}
},
{
"id":"mymodal",
"widgettype":"Modal",
"options":{
"auto_close":true,
"auto_open":false,
"width":"700px",
"height":"400px",
"archor":"cl",
},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"This is a test"
}
}
]
}
]
}
}
;
var o = {
'name':'john',
'age':12
}
console.log('fmtstr=', obj_fmtstr(o, 'name=${name} ${age:}'));
const app = new BricksApp(opts);
app.run();
var btn = document.getElementById('btn')
btn.innerText = 'ShowModal';
var showModal = function(){
var m = document.getElementById('mymodal');
m.style.display = 'block';
console.log('clicked');
}
btn['HDHDHD'] = o;
console.log('btn new data=', btn['HDHDHD']);
</script>
</body>
</html>

97
examples/vbox.ui 100644
View File

@ -0,0 +1,97 @@
{
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title2",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title3",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title4",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title5",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title6",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Text",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":0.7,
"item_size":"20px"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
}
]
}

40
examples/vbox1.ui 100644
View File

@ -0,0 +1,40 @@
{
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"urlwidget",
"options":{
"url":"/bricks/image.tmpl"
}
},
{
"id":"mymodal",
"widgettype":"Modal",
"options":{
"auto_close":true,
"auto_open":false,
"width":"700px",
"height":"400px",
"archor":"cl",
},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"This is a test"
}
}
]
}
]
}

View File

@ -1,25 +0,0 @@
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/video/sample-mp4-file.mp4",
"type":"mp4"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>

10
examples/video.ui 100644
View File

@ -0,0 +1,10 @@
{
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/video/sample-mp4-file.mp4",
"type":"mp4"
}
}