关注细节-TWaver Android

一款优秀的产品体现在细节,UI产品更是如此,精确到每个像素,平衡性能与效果的最佳点,是我们追求的目标,细节的实现过程会有困难,结果却让人兴奋,TWaver Android的开发正是如此,所以我忍不住想分享一些细节点。

 

位置的细节

 

位置与坐标是图形界面的基础,TWaver Android中使用了绝对与相对坐标结合的思路,采用漫游模式交互,代码上与以往twaver产品会有所不同,这里列举部分特点。

 

绝对位置的两个要素

 

(location, anchor position)

 

位置是图形元素最基本的信息,自然想到的是点(Point)作为位置(location),比如说你的位置在(250, 360),但人不是大头针,物体总是有尺寸,一个点代表不了位置的全部信息,比如人的位置是算脚尖还是脚跟呢?于是我们引入挂载点位置(anchorPosition)参数,可以是左上角,中心或者其他位置,于是在TWaver Android中,你会看到位置的两个要素:位置(location)和挂载点(anchor position)

下面示意图中,两个网元相同的位置(100, 100),但挂载点不同,一个在中心,另一个在左上角。

 

 

下面的代码的作用是,设置网元位置(100, 100),挂载点位置为左上角(left top,初始为居中)

 

 

node.setLocation(100, 100);
node.setAnchorPosition(Position.LEFT_TOP);

 

 

相对位置的三个要素

 

(position, offset, anchor position)

 

对于相对位置,TWaver Android引入了第三个要素(position),twaver中网元可以组合,每个节点由一个主体(body)和一堆附件(attachments)组成,其中附件的位置就是相对与主体,称为相对位置,以文本标签为例,可以放置在主体的底部,中间或者其他位置

 

下面的代码设置文本相对位置为节点的左上角,挂载点位置为右下角1

 

 

node.setStyle(Styles.LABEL_POSITION, Position.LEFT_TOP);
node.setStyle(Styles.LABEL_ANCHOR_POSITION, Position.RIGHT_BOTTOM);

 

 

 

再加上前面提到的挂载点位置,两者组合可以实现81种位置,详见LabelPositionDemo

 

 

推而广之,对于线形元素,81种位置同样适用,且支持沿线旋转等等

 

 

外观的细节

 

前面位置和组合是否让你兴奋,又或者是头晕,好吧,我可以说些更直观的东西——外观

 

渐变 - 彩虹

渐变旋转,偏移,再加上一尾彩虹色,是否让可爱的Demo顿时文艺

 

 

定义彩虹渐变

int[] rainbowColors = new int[]{0x00000000, 0xFFFF0000, 0xFFFFFF00, 0xFF00FF00, 0xFF00EAFF, 0xFF000390, 0xFFFF00C6, 0x00000000};
float[] rainbowPositions = new float[]{0f, 0.12f, 0.28f, 0.45f, 0.6f, 0.75f, 0.8f, 1f};
Gradient linearGradient = new Gradient(Gradient.LINEAR, rainbowColors, rainbowPositions);
Gradient radialGradient = new Gradient(Gradient.RADIAL, rainbowColors, rainbowPositions);
Gradient sweepGradient = new Gradient(Gradient.SWEEP, rainbowColors, rainbowPositions);

 

冒泡样式

twaver的告警冒泡样式颇受好评,如果将这种冒泡推而广之,作用于所有附件,你是否感到兴奋呢,看看TWaver Android中的冒泡效果

 

 

设置lable的冒泡效果

 

Gradient linearGradient = Gradient.LINEAR_GRADIENT_VERTICAL;
int backgroundColor = Defaults.GROUP_BACKGROUND_COLOR;
node1.setStyle(Styles.LABEL_OUTLINE, 1);
node1.setStyle(Styles.LABEL_PADDING, new Insets(5));
node1.setStyle(Styles.LABEL_BACKGROUND_COLOR, backgroundColor);
node1.setStyle(Styles.LABEL_CORNER_RADIUS, 10);
node1.setStyle(Styles.LABEL_OFFSET, new Point(0, 10));
node1.setStyle(Styles.LABEL_BACKGROUND_SHADER, linearGradient);
...

 

圆角,阴影

 

圆角,阴影本是平常的东西,虽然申请不了圆角矩阵的专利,但我们可以稍微做好些,TWaver Android中圆角普遍被应用,而阴影效果也不错

 

更多

 

细节很多,这只是冰山一角,从模型,外观到交互设计,方方面面等待你去体验,最后静待TWaver Android的正式发布……

 

TWaver动画之雷达扫描效果 如何在TWaver中实现动画之雷达扫描效果?夯下看更多! 阅读详情

相关推荐

TWaver图形界面之道(二)TWaver介绍

接上篇:TWaver图形界面之道(一)序言与目录 TWaver介绍 TWaver是一款图形界面组件产品,电信行业的朋友用它开发网管图形界面,非电信行业的用它制作的表格,指标图表,流程图。TWaver让界面开发变得简单,几行代码就可以实现组件与数据的绑定,组件与组件间的同步交互。TWaver提供多种界面组件,支持多种编程语言,这意味着无论你使用Java,.NET,Flex,还是JavaS

TWaver可视化 5056

Twaver-HTML5基础学习(1)两点一线

我们需要明白 1.图元是最小的单元; 2.图元需要放置到容器中; 3.最终图元会渲染到画布上即可;

见贤思齐焉,见不贤内自省 3324

10个TWaver网页3D可视化精彩案例

以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后,如需Demo,可直接申请试用。

TWaver可视化 7817

TWaver GIS制作穹顶之下的雾霾地图

“我不满意,我不想等待,我也不再推诿,我要站出来做一点什么。我要做的事,就在此时,就在此刻,就在此地,就在此生”。自离职央视后,沉寂许久的知名记者、主持人柴静昨日携个人视频新作 《穹顶之下》宣告归来,并在短时间内引起广泛关注。生活在这个地球上,空气质量的好坏决定这我们的健康,每个人都希望能够呼吸新鲜空气,都希望抬起头看到的是蓝天和白云,而不是灰蒙蒙的雾霾。说到雾霾,我们用TWaver GIS实现...

subnetwork的专栏 327

androidtwaver

androidtwaver

Chatbox使用指南

Chatbox使用指南

weixin_65289420的博客 2万+

android siri声波动画,Waver声波效果开源项目:和 Siri 一起学数学

在上一篇研究了动效之后,这段时间一直在琢磨如何做一些更有趣的东西,所以,昨天我开源了一个新的声波库——Waver,拥有非常动人的声波效果,在此要感谢 SCSiriWaveformView 这个项目,Waver 在他的基础上改成了 Block 的使用方式,同时声波采用我最熟悉的 UIBezierPath 和 CAShapeLayer 实现,并做了一些逻辑上的优化,实现了 8 倍的性能提升。采用 UI...

weixin_39606244的博客 1521

UE5深度图与Mask图渲染实战:从基础到高级应用

本文详细解析了在UE5中渲染深度图与Mask图的完整实战流程。从启用电影渲染队列、配置自定义深度模板通道等前期准备,到构建即用型深度图材质网络与精准物体Mask生成,并深入探讨了二者结合在NPR风格化、程序化雾气及AI工作流(如ComfyUI)中的高级应用,为影视、游戏后期与AI创作提供了高效的解决方案。

weixin_29001419的博客 349

TWaver图形界面之道(五)Hello TWaver

继续上一章的介绍TWaver图形界面之道(四)如何申请与技术支持 本章将以一个入门示例开始,介绍TWaver的基本使用,设计思想以及开发流程,如果你已经熟悉了TWaver的使用,熟悉了TWaver的MVC的设计模式,可跳过本章节。 Hello TWaver 以一个经典示例开始,创建两个节点和一条连线,并在不同组件中展现,然后我们会追加告警,观察界面的变化。 开发环境 ...

web开发自学 501

四自由度机械臂Matlab仿真全流程:从DH参数建模到轨迹规划实战

本文详细介绍了四自由度机械臂在Matlab中的完整仿真流程,从DH参数建模到轨迹规划实战。通过Robotics Toolbox工具,读者可以学习如何构建机械臂模型、验证运动学特性,并实现平滑的轨迹规划。文章还提供了性能优化技巧和常见问题解决方案,帮助开发者高效完成机械臂仿真项目。

weixin_29061041的博客 238

VSCode配置ClangFormat:让C++大括号乖乖不换行(附常见样式对比)

本文详细介绍了如何在VSCode中配置ClangFormat,实现C++代码大括号不换行的格式化风格。通过对比Attach、Allman等主流大括号样式,并提供从快速设置到项目级配置的完整指南,帮助开发者打造统一、高效的代码格式化工作流,提升团队协作效率。

weixin_28835551的博客 215

twaver API笔记

twaver.Alarm : 告警对象存储, 在告警容器中,告警容器是网元的一部分,用于管理告警对象,每一个告警都可以设置关联网元Id twaver.AlarmBox: 告警容器对象,告警存在网元容器中,作为网元容器的一部分,管理网元容器中所有告警对象 twaver.AlarmElementMapping:告警网元映射对象,定义网元映射关系,一般告警和网元是一对一关系,需要达到一...

weixin_30955617的博客 906

用FSL的eddy_topup pipeline完整处理DTI数据:从原理到实战,搞定涡流和磁化率畸变

本文详细介绍了如何使用FSL的eddy_topup pipeline完整处理DTI数据,解决涡流和磁化率畸变问题。从原理到实战,涵盖了数据格式转换、脑提取、b0图像处理等关键步骤,并提供了acqparams.txt配置和eddy命令的详细解析,帮助研究人员高效完成DTI数据校正。

weixin_29235525的博客 283

TWaver学习之Node篇

Node学习篇   1.         使用API创建Node Node node = new Node(); TDataBox   box =  new  TDataBox(); Box.addElement(node); //设置节点位置 node.setLocation(100,100); node.setImage(“node.gif”); l  Node图标: No...

青春速客 1015

SAP 针对不同行业(制造业、零售业、金融业)推出了专属的云解决方案,以下是各行业的核心方案与特点

SAP推出行业专属云解决方案:制造业(SAP Digital Manufacturing Cloud)提供AI排产与质量预警,降低缺陷率;零售业(S/4HANA Cloud零售版)实现AI预测补货与全渠道库存同步,减少浪费;金融业(Business ByDesign)支持合规自动化与实时风控,降低审计成本。各方案均采用云原生架构,典型案例显示实施效果显著。

金牌架构师 492

python实现马丁策略(股市) (附完整源码)

python实现马丁策略(股市) (附完整源码)

希望我的博客,能帮上你解决学习中工作中所遇到的问题 603

Android开发环境搭建

开发Android应用程序需要用到的几个基础工具及工具间的相互关系。 1.JDK&JRE JRE是整个Android开发的基础,有了它其它开发工具才有了运行了基础。Android开发还需要JDK,所以JDK和JRE都要安装,但安装JDK会附带安装JRE。 JDK分三种版本:Java SE、Java EE 和 Java ME。 这里使用Java SE,下载页面为:http://www.ora

weaver2007的专栏 640

【技能】伪真openclaw主动式智能体—告别‘巨婴’AI工具人:体验主动智能体的魅力

摘要: 传统AI常因被动执行、缺乏闭环而令人抓狂。Proactivity主动执行能力将AI从"指令跟随者"升级为"主动合伙人",具备预判需求、自动推进、断聊恢复、问题自解等能力。其核心原理在于建立AI专属工作体系(持久化内存、动态任务层、临时缓存层、归档复盘层),通过7步闭环(感知触发→状态恢复→边界校验→方案探索→动作决策→执行落地→状态留存)确保安全高效。

海兰 209

twaver 类清单和概要说明

twaver.Alarm 告警对象。代表告警状态。是一个轻量级的对象。可以创建很多然后放到DataBox中。所有的Alarm对象存放在由ElementBox提供的AlarmBox中。通过setPropertyValue可以带入新的信息。 twaver.network.ui.AlarmAttachment 典型的应用是在网元的旁边产生一个告警的标识。可指定位置,文字等样式。还可通过子类改变默认...

没有遥远 496

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

TWaver自动化设计平台Legolas —— 数据响应动作

在上一篇入门流程中有简单提到“动作”,这篇就介绍如何添加动作,并应用动作。 简介 “动作”从使用场景角度可以分为数据响应动作和事件响应动作,其中事件响应动作又可以细分为交互响应动作和逻辑事件响应动作 Legolas中的“动作”使用Javascript语言定义,使用Javascript做脚本语言的原因 第一, Legolas前台使用Javascript编写 第二, Javascri

龙俊生的专栏 1283

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)

Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)

见贤思齐焉,见不贤内自省 1417

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Twaver.net节点样式边框和背景色

node.SetStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE); //如果是INNER_STYLE_SHAPE,则显示边框                     node.SetStyle(Styles.INNER_OUTLINE_PATTERN, new List() { 2, 5 }); //边框为虚线,值为NULL,则为穿线  

cyb331的专栏 1995

TWaver3D入门探索——3D拓扑图之绽放的小球花

这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图。 搭建3D空间 首先为花簇的绽放建一个展示的舞台。接触过TWaver2D的都知道,box、network是必不可少的,但对3D场景来说,还远远不够。一是要添加镜头位置,确定我们在什么角度和距离进行观察;...

weixin_30360497的博客 474

TWaver自动化设计平台Legolas —— 入门流程

客户的2D管汇系统上线差不多有一年了,前段时间回访的时候给客户演示了TWaver HTML 3D的效果,立马要跟我们谈二期,要包含3D呈现,这可把商务高兴坏了。 借此机会,一层一层揭开Legolas神秘的面纱,此篇就概括的介绍Legolas搭建应用的流程,具体功能点另开新篇,形成一系列的文章 第一步,将模板库中的模板拖入场景中(场景可为2D或3D,这里以3D为例) 拖入场

龙俊生的专栏 1506
上一篇: Hello TWaver Android
下一篇: 用TWaver实现组合的Chart
subnetwork
博客等级 码龄17年 17粉丝 84原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值