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);
});
}
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() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();

View File

@ -3,6 +3,8 @@ body {
height: 100%;
width: 100%;
margin: 0;
color: #8a8a8a;
background-color: #fafafa;
overflow: auto;
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:{
rate:
url:
blink:false
color:*
blinkcolor:*
blinktime:*
@ -11,11 +12,17 @@ bricks.Svg = class extends bricks.VBox {
*/
constructor(opts){
opts.rate = opts.rate || 1;
opts.cwidth = opts.cwidth || 1;
opts.cheight = opts.cheight || 1;
opts.cwidth = opts.rate;
opts.cheight = opts.rate;
opts.blinktime = opts.blinktime || 0.5;
opts.dynsize = true;
super(opts);
if (! this.color) {
this.color = bricks.app.get_color();
}
if (!this.blinkcolor){
this.blinkcolor = bricks.app.get_blinkcolor()
}
if (opts.url){
this.set_url(opts.url);
}
@ -26,7 +33,7 @@ bricks.Svg = class extends bricks.VBox {
.then(svgText => {
this.svgText = svgText;
this.set_colored_svg(this.color);
this.blink();
if (this.blink) this.start_blink();
});
}
set_ancent_color(e){
@ -46,20 +53,20 @@ bricks.Svg = class extends bricks.VBox {
var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
this.dom_element.innerHTML = svgText;
}
blink(){
_blink(){
if (this.blinktime && this.blinkcolor) {
if (this.cur_color == this.color){
this.set_colored_svg(this.blinkcolor);
} else {
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);
}
}
start_blink(){
if (!this.blink_task){
blink();
this._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('StatedSvg', bricks.StatedSvg);

View File

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

View File

@ -1,6 +1,20 @@
var bricks = window.bricks || {};
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) {
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");