TWaver版3D化学元素周期表

TWaver可视化软件(一)初识三维可视化软件 在这个特殊的时期,想必大家在家中或放假或办公,学习的热情必定是空前高涨,趁着这个机会,我们就来聊一聊数据可视化。说起可视化,很多人听说过却未必深入了解过,事实上,在信息化的浪潮席卷之下,数据可视化已经成为数字化、智能化管理运营的趋势。 数据可视化,顾名思义,就是将数据以可视图表的形式展现出来,以直观的形式挖掘数据深层次的价值,帮助企业实现管理和运营的智能化,提高企业运行效率。赛瓦软件便是国内最早... 阅读详情

很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧一度被众多粉丝奉为神明,争相研究和效仿。甚至有人放弃一切扑向这颗蜡烛,不由总是想到那个OPPO广告女主角拽拽的鄙视道:“辞职去旅游!你敢吗?”

俺不敢,不过用TWaver做一个也没用几个小时。所以就老在想:不就旅个游么,至于嘛?

这个3D元素周期表做了一些改进:卡片上增加了汉字及拼音读音,原因你懂得——各位程序猿没几个敢大声读这些汉字的。还好每个字的主要部分还大都认识,多少可以小声蒙一下,加上拼音就少了许多尴尬。另外在形状布局和特效上也丰富了一点,具体可以看下方视频连接。

技术上来说,用TWaver 3D来做的思路略有不同。最开始网上这个程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技术做的。使用TWaver就不用这么麻烦了,直接一个mono.js就差不多搞定了。技术上依旧是WebGL+js,但没有使用CSS3和其他框架。效果和效率都很好。

实现上难度不大,大概思路如下:

  1. 用数组定义好化学元素周期表的数据。包括编号、汉字、拼音、数值、英文等等。然后在内存中动态生成每个元素对应的图片卡,并转成base64格式的内存url字符串。注意图片的格式、透明度、颜色等细节;
  2. 为每个化学元素new一个3D立方体,并把内存图片贴图到立方体正面。立方体的厚度0就行了,其他面都透明即可;
  3. 监听鼠标事件。当鼠标over每个物体时,让立方体发光;点击物体时,让立方体动画反转一圈;
  4. 计算好几个形状布局对应的空间坐标,并事先记录到每个立方体的client属性表中。例如:node.setClient(‘grid’,{x:100,y:340});
  5. 放几个按钮,每个按钮点击后,让所有的立方体到对应的形状的位置上去,同时启用动画机制;

实际代码中,也要留意一些注意事项:

  1. 动画:当第一次动画尚未执行完毕,用户又点击其他按钮执行新动画时,需要先判断当前有无正在运行的动画,并及时让动画停止。同时还要判断是否需要把数值恢复成初始值或动画正常结束所设定的值。这里如不仔细处理,可能会导致动画将卡片的位置、角度错乱。
  2. 布局:球形、螺旋、随机等空间点其实都很好计算。尤其球形布局,开始大家可能会去寻找“在一个半径为r的球形表面均匀散布n个点,求每个点的坐标?”这样的题目。这样就把问题复杂化了。因为简单的视觉布局并不需要特别严谨的位置数值,所以大致把球进行径向和横向切片进行数值插入即可;
  3. 贴图:最开始,我们可能会觉得程序是使用了100张小图片进行贴图。但实际上,由于每个卡片的区别仅仅是文字,所以完全可以在内存动态生成。这样速度快节省了网络下载图片的时间以及维护图片的麻烦,同时文字和图片等样式也更容易控制。这也都是HTML5的canvas技术为大家带来的好处。
  4. 物体朝向:在布局过程中,每个卡片的旋转和朝向是一个要考虑的问题。例如球形,每个卡片要面向球形圆心发射线的外方向,螺旋形卡片则朝向水平外方向,等等。计算这些坐标和角度需要很多数学运算,光是求坐标系和直角坐标系转换之类的就够大家忙活一阵子了。而用TWaver就简单了:每个物体直接lookAt一个点就行了。例如球形卡片,每帧动画只要执行:node.lookAt(0,0,0)就行了,对吗?还不完全对。这样lookAt到中心点,不就“屁股”朝外了吗?用户看到的字是卡片的背面,是反的。要解决也简单,应当让它lookAt自己坐标两倍的地方,也就是圆心放射线的外面:node.lookAt(x*2, y*2, z*2),这样就对了。
  5. 发光。鼠标over每个物体,都会看到发光。而鼠标over在光晕位置,却不会触发over事件。这是怎么做到的呢?其实也是小技俩,大家可以看看程序,自己研究吧。

生成内存图片代码片段:

1 var url = canvas.toDataURL("image/png");
2 node.setStyle('front.m.texture.image',url);

球形布局坐标计算代码片段:

1 var radius=1000;
2 var phi = Math.acos( -1 + ( 2 * index ) / total );
3 var theta = Math.sqrt( total * Math.PI ) * phi;
4 var x = radius * Math.cos( theta ) * Math.sin( phi );
5 var y = radius * Math.sin( theta ) * Math.sin( phi );
6 var z = radius * Math.cos( phi );

程序和源代码都已经在TWaver的MONO DESIGN产品中,感兴趣的朋友可以登录在线网址www.mono-design.cn或下载产品包。赶紧试试吧!







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

相关推荐

TWaver可视化软件(七) WEB组态可视化软件

关于这个软件,首先要从组态的概念开始说起。 组态(Configure)的概念来自于20世纪70年代中期出现的第一代集散控制系统(Distributed Control System),可以理解为“配置”、“设定”、“设置”等,是指通过人机开发界面,用类似“搭积木”的简单方式来搭建软件功能,而不需要编写计算机程序。我们也可称之为“二次开发”,组态软件即为“二次开发平台”。 从用户操作与界面呈现的角度来说,组态软件采用标准HTML5技术,基于B/S架构进行开发,支持Web端呈现,在浏览器端即可完成便捷的人机交互

TWaver可视化 4254

Twaver-HTML5基础学习(2)基本数据元素(Data)

Data对象上的基本属性和如何自定义属性

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

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

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

TWaver可视化 7817

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

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

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

2026年7月19日 从可插拔到共封装:技术路线研究报告

AI 算力的爆发正在重写数据中心光互连的技术路线。本报告对当前并存的四代光互连架构——

weixin_51184047的博客 591

Android存储空间不足下,APP出现奔溃等情况

版权声明:本文为博主原创文章,未经博主允许不得转载。 1. 问题起因     实时录制视频,使用getExternalCacheDir()函数返回的路径作为文件缓存区 2. 问题产生     系统在空间不足的情况下第一清除getExternalCacheDir和getCache文件下的缓存,导致正在录制的视频出现Error。 3. 解决方案     第一

OverseasAndroid的博客 4160

twaver html5 api,TWaver版3D化学元素周期表

很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧一度被众多粉丝奉为神明,争相研究和效仿。甚至有人放弃一切扑向这颗蜡烛,不由总是想到那个OPPO广告女主角拽拽的鄙视道:“辞职去旅游!你敢吗?”俺不敢,不过用TWaver做一个也没用几个小时。所以就老在想:不就旅个游么,至于嘛?这个3D元素周期表做了一些改进:卡片上增加了汉字及拼音读音,原因你懂得——各位程序猿没几个敢大声读这些汉字的。还好...

weixin_29876341的博客 383

手把手教你玩转AT32F403A位带操作:像51单片机一样控制GPIO

本文详细介绍了如何在雅特力AT32F403A国产MCU上实现位带操作,像51单片机一样高效控制GPIO。通过实战演示和性能对比,展示了位带操作在实时控制中的优势,包括更快的执行速度和更低的延迟,特别适合工业控制和电机驱动等场景。

weixin_29234509的博客 285

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

以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后,如需Demo,可直接申请试用。 1. 化学元素周期表 六种排列方式,炫酷动画效果,TWaver 3D轻松实现。 演示地址:http://demo.servasoft.com/chemical-table/ 2.DNA螺旋图 ...

weixin_30430169的博客 221

别再为淘宝滑块发愁了!一个Python脚本自动获取x5sec cookie的保姆级教程

本文提供了一套完整的Python自动化解决方案,帮助开发者轻松应对淘宝滑块验证码问题。通过模拟浏览器行为、精准识别滑块缺口位置和生成拟人化移动轨迹,脚本能够自动获取关键的x5sec cookie,显著提升爬虫效率。教程涵盖环境配置、验证机制分析、代码实现及反检测策略,是解决淘宝滑块验证的实用指南。

weixin_30300225的博客 576

Halcon 3D点云处理实战:从PLY文件读取到曲面匹配的完整流程(附避坑指南)

本文详细介绍了Halcon在3D点云处理中的完整流程,从PLY文件读取到曲面匹配,特别强调了3D算子的应用技巧和避坑指南。通过实战案例和参数优化建议,帮助开发者高效处理工业视觉检测中的复杂点云数据,提升匹配精度和性能。

weixin_42535720的博客 278

TWaver阶段学习-入门篇

这段时间在学习了解TWaver这个3D建模的框架,下面是对这段时间学习成果的一个总结,也为自己梳理一下知识点。 TWaver介绍 TWaver是美国Serva Software公司的产品,是全球范围内先进的可视化管理软件,可以直接使用,也可根据需求二次开发,在电信、金融、交通等领域都有广泛应用。 主要就是能快速构建一个3D的交互式场景,能够方便快捷的管理电信服务器,电力工厂等。 更加详细的介绍请:...

快乐是一切的博客 7758

黑马程序员Pink的javaScript课程APIday4

本文摘要:介绍了JavaScript中日期对象的实例化方法(有参/无参)及三种获取时间戳的方式。讲解了DOM节点操作,包括节点查找(父、子、兄弟节点)、增加/克隆/删除节点的方法。详细说明了移动端touch事件和Swiper插件的使用,包括自动播放和小圆点配置。最后提及学成在线案例中表单验证和取消默认跳转的实现。

JLY19970726的博客 826

Twaver-HTML5基础学习(4)告警元素(Alarm)

Twaver-HTML5基础学习(4)告警元素(Alarm)

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

如何理解Apollo模型参考自适应控制MRAC

最近有了解到百度无人驾驶Apollo项目中的横向控制有用到MRAC(Model Reference Adaptive Control),于是便详细研究了一下这个控制方法,在此总结一下心得。 什么是MRAC MRAC控制系统的基本结构图如下所示: 它由两个环路组成,由控制器和受控对象组成内环,这一部分称之为可调系统,由参考模型和自适应机构组成外环。实际上,该系统是在常规的反馈控制回路上再附加一个参考模型和控制器参数的自动调节回路而形成。在该系统中,参考模型的输出或状态相当于给定一个动态性能指标,(通常,参考模

zmhzmhzm的博客 6480

英飞凌TC3xx之一起认识GTM系列(一)先来认识GTM架构

本文讲述英飞凌TC3xx的通用计时器GTM的架构。

无所适从的我的博客 4600

Twaver-HTML5基础学习(11)形状节点(ShapeNode)

Twaver-HTML5基础学习(11)形状节点(ShapeNode)

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

深度学习工具包 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

一、    概念介绍         TWaver是美国Serva Software公司的产品,是应用最为广泛的电信专业图形界面开发工具包,在电信行业应用非常广泛。TWaver关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。         TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OS

黄爱岗廊坊师范学院信息技术提高班 第七期 2235

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

上一篇: 用TWaver实现组合的Chart
下一篇: TWaver MONO模板库新鲜出炉 精彩纷呈
TWaver数字孪生
博客等级 码龄18年 400粉丝 123原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值