This commit is contained in:
ymq1 2025-06-05 05:24:36 +00:00
parent 76995ad1e0
commit 3b1ed752ed
7 changed files with 136 additions and 27 deletions

View File

@ -560,6 +560,34 @@ bricks.App = class extends bricks.Layout {
this.bind('orient_changed', this.screen_orient); this.bind('orient_changed', this.screen_orient);
}); });
} }
get_color(){
return getComputedStyle(this.dom_element).color;
return parseRGB(colorStr);
}
get_bgcolor(){
return getComputedStyle(this.dom_element).backgroundColor;
return parseRGB(colorStr);
}
get_blinkcolor(){
var color, bgcolor, blinkcolor;
color = parseRGB(this.get_color());
bgcolor = parseRGB(this.get_bgcolor());
console.log('color=', color, 'bgcolor=', bgcolor);
function short1of3(x, y){
if (x < y) {
return x + (y - x) / 3;
} else {
return x - (x - y) / 3;
}
}
var r = short1of3(color.r, bgcolor.r);
var g = short1of3(color.g, bgcolor.g);
var b = short1of3(color.b, bgcolor.b);
var bc = bricks.obj_fmtstr({r:r, g:g, b:b}, "rgb(${r}, ${g}, ${b})");
console.log('color=', color, 'bgcolor=', bgcolor, 'bc=', bc);
return bc;
}
async getCameras() { async getCameras() {
try { try {
const devices = await navigator.mediaDevices.enumerateDevices(); const devices = await navigator.mediaDevices.enumerateDevices();

View File

@ -3,6 +3,8 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
color: #8a8a8a;
background-color: #fafafa;
overflow: auto; overflow: auto;
display: flex; display: flex;
} }

View File

@ -0,0 +1 @@
<svg t="1748923025889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="130072" width="100%" height="100%"><path d="M310.784 132.8c38.144 21.056 412.864 323.264 445.12 342.144 28.864 16.896 29.376 57.216 0 74.112-44.736 25.728-417.536 326.464-443.712 341.312-32.768 18.624-65.856-5.056-65.856-36.864 0-24.512 0-648.448 0-683.968C246.272 134.4 282.88 117.376 310.784 132.8z" p-id="130073" fill="${color}"></path></svg>

After

Width:  |  Height:  |  Size: 461 B

View File

@ -0,0 +1 @@
<svg t="1748922878918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="126615" width="100%" height="100%"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" fill="${color}" p-id="126616"></path></svg>

After

Width:  |  Height:  |  Size: 267 B

View File

@ -4,6 +4,7 @@ bricks.Svg = class extends bricks.VBox {
options:{ options:{
rate: rate:
url: url:
blink:false
color:* color:*
blinkcolor:* blinkcolor:*
blinktime:* blinktime:*
@ -11,11 +12,17 @@ bricks.Svg = class extends bricks.VBox {
*/ */
constructor(opts){ constructor(opts){
opts.rate = opts.rate || 1; opts.rate = opts.rate || 1;
opts.cwidth = opts.cwidth || 1; opts.cwidth = opts.rate;
opts.cheight = opts.cheight || 1; opts.cheight = opts.rate;
opts.blinktime = opts.blinktime || 0.5; opts.blinktime = opts.blinktime || 0.5;
opts.dynsize = true; opts.dynsize = true;
super(opts); super(opts);
if (! this.color) {
this.color = bricks.app.get_color();
}
if (!this.blinkcolor){
this.blinkcolor = bricks.app.get_blinkcolor()
}
if (opts.url){ if (opts.url){
this.set_url(opts.url); this.set_url(opts.url);
} }
@ -26,7 +33,7 @@ bricks.Svg = class extends bricks.VBox {
.then(svgText => { .then(svgText => {
this.svgText = svgText; this.svgText = svgText;
this.set_colored_svg(this.color); this.set_colored_svg(this.color);
this.blink(); if (this.blink) this.start_blink();
}); });
} }
set_ancent_color(e){ set_ancent_color(e){
@ -46,20 +53,20 @@ bricks.Svg = class extends bricks.VBox {
var svgText = bricks.obj_fmtstr({color: color}, this.svgText); var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
this.dom_element.innerHTML = svgText; this.dom_element.innerHTML = svgText;
} }
blink(){ _blink(){
if (this.blinktime && this.blinkcolor) { if (this.blinktime && this.blinkcolor) {
if (this.cur_color == this.color){ if (this.cur_color == this.color){
this.set_colored_svg(this.blinkcolor); this.set_colored_svg(this.blinkcolor);
} else { } else {
this.set_colored_svg(this.color); this.set_colored_svg(this.color);
} }
this.blink_task = schedule_once(this.blink.bind(this), this.blink_task = schedule_once(this._blink.bind(this),
this.blinktime); this.blinktime);
} }
} }
start_blink(){ start_blink(){
if (!this.blink_task){ if (!this.blink_task){
blink(); this._blink();
} }
} }
end_blink(){ end_blink(){
@ -67,5 +74,27 @@ bricks.Svg = class extends bricks.VBox {
} }
} }
bricks.StatedSvg = class extends bricks.Svg {
/* {
states:[{state:aaa,url:} ,,],
state:
} */
constructor(opts){
super(opts);
if (this.states){
if (! this.state){
this.state = this.states[0].state;
}
var url = this.set_state(this.state);
this.set_url(url);
}
}
set_state(state){
this.states.forEach(s => {
if (s.state == state) this.set_url(s.url);
});
}
}
bricks.Factory.register('Svg', bricks.Svg); bricks.Factory.register('Svg', bricks.Svg);
bricks.Factory.register('StatedSvg', bricks.StatedSvg);

View File

@ -12,8 +12,8 @@ bricks.TreeNode = class extends bricks.VBox {
this.user_data = data; this.user_data = data;
this.is_leaf = this.user_data.is_leaf; this.is_leaf = this.user_data.is_leaf;
this.params = bricks.extend(this.tree.params, {id:this.user_data[this.tree.opts.idField]}); this.params = bricks.extend(this.tree.params, {id:this.user_data[this.tree.opts.idField]});
if (this.tree.multitype_tree){ if (this.tree.opts.typeField){
this.params['type'] = this.user_data[this.tree.opts.typeField]; this.params.type = this.user_data[this.tree.opts.typeField];
} }
var n = new bricks.HBox({ var n = new bricks.HBox({
height:this.tree.row_height, height:this.tree.row_height,
@ -33,6 +33,7 @@ bricks.TreeNode = class extends bricks.VBox {
} }
this.container.hide(); this.container.hide();
} }
this.setup_icon_urls()
} }
getValue(){ getValue(){
var v = this.user_data; var v = this.user_data;
@ -63,7 +64,9 @@ bricks.TreeNode = class extends bricks.VBox {
this.collapse() this.collapse()
} }
} }
async expand(){ async expand(){
this.node_state = 'open';
if (this.is_leaf){ if (this.is_leaf){
return; return;
} }
@ -74,6 +77,7 @@ bricks.TreeNode = class extends bricks.VBox {
this.container.show(); this.container.show();
} }
collapse(){ collapse(){
this.node_state = 'close'
if (this.is_leaf){ if (this.is_leaf){
return; return;
} }
@ -86,13 +90,21 @@ bricks.TreeNode = class extends bricks.VBox {
} else { } else {
var srcs = this.tree.opts.node_state_imgs || {}; var srcs = this.tree.opts.node_state_imgs || {};
var sources = {}; var sources = {};
sources['open'] = objget(srcs, 'open', bricks_resource('imgs/down_arrow.png')); sources['open'] = objget(srcs, 'open', bricks_resource('imgs/node-expand.svg'));
sources['close'] = objget(srcs, 'close', bricks_resource('imgs/right_arrow.png')); sources['close'] = objget(srcs, 'close', bricks_resource('imgs/node-collapse.svg'));
this.trigle = new bricks.MultipleStateIcon({ this.trigle = new bricks.StatedSvg({
state:'close', state:'close',
urls:sources, states:[
height:img_size, {
width:img_size state: 'open',
url: bricks_resource('imgs/node-expand.svg')
},
{
state: 'close',
url: bricks_resource('imgs/node-collapse.svg')
}
],
rate: 1,
}); });
this.trigle.bind('state_changed', this.toggleExpandCollapse.bind(this)); this.trigle.bind('state_changed', this.toggleExpandCollapse.bind(this));
widget.add_widget(this.trigle); widget.add_widget(this.trigle);
@ -103,15 +115,12 @@ bricks.TreeNode = class extends bricks.VBox {
widget.add_widget(this.check_w); widget.add_widget(this.check_w);
this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this)) this.check_w.bind('changed', this.tree.node_checked.bind(this.tree, this))
} }
var dtype = this.user_data[this.tree.opts.typeField]; var icon_url = self.this.icons_urls.leaf;
var icon = objget(TypeIcons, dtype); if (this.is_leaf) icon_url = this.icons_urls.leaf;
if (!icon && this.tree.opts.default_type){ else if this.node_state == 'expand') this.icon_url = this.icons_urls.open;
icon = objget(TypeIcons, his.tree.opts.default_type); else this.icon_url = this.icons_urls.close;
} var img = new bricks.Svg({
if (!icon){ rate:1,
icon = bricks_resource('imgs/folder.png');
}
var img = new bricks.Icon({
url:icon url:icon
}); });
widget.add_widget(img); widget.add_widget(img);
@ -136,13 +145,34 @@ bricks.TreeNode = class extends bricks.VBox {
} }
this.str_w.set_text(this.user_data[this.tree.opts.textField]); this.str_w.set_text(this.user_data[this.tree.opts.textField]);
} }
setup_icon_urls(){
if (this.tree.opts.typeField){
var ntype = this.user_data[this.opts.typeField];
var icons = null;
if (this.tree.node_state_icons){
icons = this.tree.node_state_icons[ntype];
var dt = this.tree.node_state_icons.default_type;
if (dt){
icon = this.tree.node_state_icons[dt];
}
}
}
if (! icons){
icons = {
open: bricks_resource('imgs/open_folders.svg'),
close: bricks_resource('imgs/close_folder.svg'),
leaf: bricks_resource('imgs/close_folder.svg')
};
}
this.icons_urls = icons;
}
} }
bricks.Tree = class extends bricks.VScrollPanel { bricks.Tree = class extends bricks.VScrollPanel {
/* /*
{ {
row_height: row_height:
multitype_tree:false,
idField: idField:
textField: textField:
type_icons: type_icons:
@ -150,9 +180,13 @@ bricks.Tree = class extends bricks.VScrollPanel {
default_type: default_type:
data: data:
dataurl: dataurl:
node_state_imgs:{ node_state_icon:{
open:url, nodetype:{
close:url open:url,
close:url,
leaf:url
}
default_type:
}, },
admin:{ admin:{
{ {

View File

@ -1,6 +1,20 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.bug = false; bricks.bug = false;
function parseRGB(colorStr) {
const match = colorStr.match(/^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/);
if (!match) return null;
const [, r, g, b] = match.map(Number);
return { r, g, b };
}
function parseRGBA(colorStr) {
const match = colorStr.match(/^rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/);
if (!match) return null;
const [, r, g, b, a] = match;
return { r: +r, g: +g, b: +b, a: a !== undefined ? +a : 1 };
}
async function streamResponseJson(response, onJson) { async function streamResponseJson(response, onJson) {
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8"); const decoder = new TextDecoder("utf-8");