bugfix
This commit is contained in:
yumoqing
parent
ca905937cf
commit
3a97400c94
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
33
examples/accordion.ui
Normal file
33
examples/accordion.ui
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
9
examples/audio.ui
Normal file
9
examples/audio.ui
Normal file
@ -0,0 +1,9 @@
|
||||
|
||||
{
|
||||
"id":"audioplayer",
|
||||
"widgettype":"AudioPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
|
||||
}
|
||||
}
|
||||
@ -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
Normal file
40
examples/button.ui
Normal 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');"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
7
examples/datagrid.ui
Normal file
7
examples/datagrid.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"users.bcrud"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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
Normal file
8
examples/docs.ui
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
{
|
||||
"widgettype":"MarkdownViewer",
|
||||
"options":{
|
||||
"navigator":true,
|
||||
"md_url":"../docs/index.md"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
7
examples/editabletree.ui
Normal file
7
examples/editabletree.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"editabletree.json"
|
||||
}
|
||||
}
|
||||
@ -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
Normal file
83
examples/error.ui
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
32
examples/fileupload.ui
Normal file
32
examples/fileupload.ui
Normal 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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
;
|
||||
const app = BricksApp(opts);
|
||||
app.run();
|
||||
</script>
|
||||
@ -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
Normal file
151
examples/form.ui
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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
Normal file
50
examples/hbox.ui
Normal 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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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 =
|
||||
|
||||
@ -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>
|
||||
9
examples/image.ui
Normal file
9
examples/image.ui
Normal 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%"
|
||||
}
|
||||
}
|
||||
@ -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
Normal file
10
examples/m3u8.ui
Normal 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"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
21
examples/markdown.ui
Normal file
21
examples/markdown.ui
Normal file
@ -0,0 +1,21 @@
|
||||
|
||||
{
|
||||
"widgettype":"VBox",
|
||||
"options":{
|
||||
},
|
||||
"subwidgets":[
|
||||
{
|
||||
"widgettype":"Title1",
|
||||
"options":{
|
||||
"text":"Pic Viewer",
|
||||
"i18n":true
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype":"MarkdownViewer",
|
||||
"options":{
|
||||
"md_url":"test1.md"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
83
examples/message.ui
Normal file
83
examples/message.ui
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
7
examples/miniform.ui
Normal file
7
examples/miniform.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"miniform.json"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
7
examples/model.ui
Normal file
7
examples/model.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"modal.json"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
17
examples/recorder.ui
Normal file
17
examples/recorder.ui
Normal 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)"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
7
examples/scroll.ui
Normal file
7
examples/scroll.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"scroll.json"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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
Normal file
58
examples/tab.ui
Normal 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
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
7
examples/table.ui
Normal file
7
examples/table.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"tables.json"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
31
examples/toolbar.ui
Normal file
31
examples/toolbar.ui
Normal 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
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -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
Normal file
7
examples/tree.ui
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"url":"tree.json"
|
||||
}
|
||||
}
|
||||
@ -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
Normal file
97
examples/vbox.ui
Normal 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
Normal file
40
examples/vbox1.ui
Normal 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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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
Normal file
10
examples/video.ui
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
{
|
||||
"id":"videoplayer",
|
||||
"widgettype":"VideoPlayer",
|
||||
"options":{
|
||||
"autoplay":true,
|
||||
"url":"http://kimird.com/video/sample-mp4-file.mp4",
|
||||
"type":"mp4"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user