专栏首页HT基于 HTML5 WebGL 的 CPU 监控系统

基于 HTML5 WebGL 的 CPU 监控系统

前言

科技改变生活,科技的发展带来了生活方式的巨大改变。随着通信技术的不断演进,5G 技术应运而生,随时随地万物互联的时代已经来临。5G 技术不仅带来了更快的连接速度和前所未有的用户体验,也为制造业,微电子及集成电路发展带来了巨大的发展机遇和挑战。 5G 技术商业实施过程中,5G 网络芯片面临低功耗、低延时、高可靠性和高精度的技术挑战。 本文将以大家熟悉的 CPU 为例,介绍以 HT 为基础,应用 JavaScript,WebGL 和 HTML5 技术开发的 CPU 监控系统。在大型数据中心,实时监控 CPU 的温度,使用率等具有重要的意义。在服务器级别进行 CPU 温度监控,能够实时了解服务器 CPU 的温度,及时发现能效问题,防止出现服务延迟、服务器宕机,从而节约成本。实时监控 CPU 使用率等,能够实时查看服务器的 CPU 使用情况,合理分配服务器资源。

系统预览

- PC 端

- 移动端

Demo 中的场景是由 2D 和 3D 结合搭建而成,移动端的左上数据框部分显示的是手机陀螺仪数据,仅在移动端开启陀螺仪时显示。

功能实现

- 判断页面打开设备

在移动互联网时代,建设移动端和 PC 端网站具有同等重要的意义。与 PC 端相比,移动端能够实现随时随地的浏览,宣传和移动营销,因此 HT 设计和开发的系统都能很好地兼容移动端的访问和展示。

为了带来更好的用户体验,Demo 使用 Navigator 对象的 userAgent 属性,判断用户请求来自于 PC 端还是移动端,做不同的动画处理和数据展示。Navigator 对象包含了浏览器的信息,其 userAgent 属性则声明了浏览器用于 HTTP 请求的用户代理头的值。下面分别是在 Windows 端和 Android 端打印出的 userAgent 信息。

对应到代码中,基于 userAgent 属性信息,使用正则表达式去判断请求是否来自于移动端(主要考虑了 Android 端 和 IOS 端)。

isMobile() {
    return (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent));
}

- 动画原理

本 Demo 使用 HT 内置的 ht.Default.startAnim 函数来生成动画,此函数支持 Frame-Based 和 Time-Based 两种方式的动画。我采用的是 Time-Based 方法,即用户使用 duration 指定动画周期 (单位为毫秒)。easing 参数是用于让用户定义函数,通过数学公式控制动画,如匀速变化、先慢后快等效果。action 函数的第一个参数 v 代表通过 easing(t) 函数运算后的值, t代表当前动画进行的进度 [0, 1],一般属性变化根据 v 参数进行。finishFunc 参数代表动画结束后的动作。本实例中的 startAnim 函数均采用了如下结构的 JSON 参数结构:

ht.Default.startAnim({
    duration: 500, // 动画周期毫秒数
    easing: function (t) {}, // 动画缓动函数
    action: function (v, t) {…} // 动画过程属性变化
    finishFunc: function () {} // 动画结束后调用的函数
});

- 旋转 180 度并抬高视角

3D 场景中的视角是由 eye (相机位置) 和 center (目标位置) 决定的,因此视角的变化改变这两个参数即可,本 Demo 使用 HT 内置的 moveCamera 方法实现。动画采用圆的参数方程计算 eye 的 x 值和 z 值,完成 180 度的旋转。在旋转过程中半径和角度都随着 t 的变化而变化,通过 ( t – 0.5 ) * Math.PI 使得角度变化范围为 [ - Math.PI / 2, Math.PI / 2] 。圆的参数方程如下所示:

旋转过程中,y 值也随 t 变化,完成 3D 场景视角的提升。finishFunc 参数用来定义该动画结束后继续调用的下一个动画,实现多个动画效果。

// 旋转 180 度并抬高视角
startRotationAnimation(onFinish) {
    let that = this;
    let r = 849
    ht.Default.startAnim({
        duration: 6000,
        easing: function (t) { return t; },
        action: function (v, t) { // 圆的参数方程 半径和角度都在变
            let r1 = (1 - t) * r;
            let angle = (t - 0.5) * Math.PI;
            let x = r1 * Math.cos(angle);
            let z = r1 * Math.sin(angle);
            let y = 126 + (1968 - 126) * t * t * t;
            that.g3d.moveCamera([x, y, z]);
        },
        finishFunc: function () {
            if (!onFinish) {
                return;
            }
            onFinish.call(that);
        }
    });
}

在运行该动画时,需要延时调用另外两个动画完成 CPU 卡扣的抬起及消失,这样可使得动画错开执行,以达到更好的视觉效果。这部分使用 ht.Default.callLater(func, scope, args, delay) 延时调用动画函数,最后一个参数 delay 定义延迟的时间间隔。

ht.Default.callLater(() => { this.startCap1Animation(); }, this, null, 500);
ht.Default.callLater(() => { this.startCap2Animation(); }, this, null, 1000);

- 视角切换

本部分根据页面在 PC 端还是手机端打开,使用 moveCamera 方法分别切换到不同视角。以 PC 端视角切换为例,通过 getEye() 方法获取相机所在位置作为起始位置,终止位置为预定义的数值。通过 action 参数定义视角从起始位置到终点位置的切换。

// 视角切换
startMoveAngle3AnimationPC(onFinish) {
    let startPos = this.g3d.getEye();
    let endPos = [0, 728, 661];
    let that = this;
    ht.Default.startAnim({
        duration: 2000,
        easing: function (t) { return t * t; },
        action: function (v, t) {
            let x, y, z;
            x = startPos[0] + (endPos[0] - startPos[0]) * t;
            y = startPos[1] + (endPos[1] - startPos[1]) * t;
            z = startPos[2] + (endPos[2] - startPos[2]) * t;
            that.g3d.moveCamera([x, y, z]);
        },
        finishFunc: function () {…}
    });
}

- CPU 外壳隐藏动画

为带来更好的视觉效果,视角切换的同时使用 ht.Default.callLater() 延迟调用 CPU 外壳隐藏动画。通过 getElevation() 获取外壳在 3D 坐标系中 y 的初始坐标,动画过程中使用 setElevation() 方法设置 y 坐标,动画结束后设置其可见属性为 false。代码如下:

easing: function (t) { return t * t; },
action: function (v, t) {
    let val = start + (end - start) * t; // start: 起始 y 坐标;end: 终止 y 坐标
    that.hide1.setElevation(val);
}
finishFunc: function () {
    that.hide1.s('3d.visible', false);
}

- 芯片冒出及呼吸灯渲染

视角切换完成后,在 CPU 外壳隐藏的同时,CPU 内部结构逐渐冒出。与外壳隐藏相同,该部分也是通过setElevation方法完成。

action: function (v, t) {
    let e = start1Y + (end1Y - start1Y) * t
    that.up1.setElevation(e);
}

与芯片冒出动画间隔 1s, 呼吸灯渲染动画开启,使用 shape3d.blend 和 shape3d.opacity 分别设置呼吸灯染色和透明度。

easing: easing.easeBothStrong,
action: function (v, t) {
    let val = 255 - (255 - endBlend) * t;
    val = val.toFixed(0);
    let blend = 'rgb(' + val + ',' + val + ',' + val + ')';
    let opacity = startOpa + (endOpa - startOpa) * t
    that.blend.s('shape3d.blend', blend);
    that.opacity.s('shape3d.opacity', opacity);
}

此部分动画采用 easeBothStrong 方式,即开始慢且减速, t 的四次方,代码实现如下:

easeBothStrong: function (t) {
    return (t *= 2) < 1 ?
        .5 * t * t * t * t :
        .5 * (2 - (t -= 2) * t * t * t);
}

- PC 端结束动画

当动画结束后,PC 端重置 interactors,并启动线的流动及点位地面的旋转动画。

startAnimation() {
    setInterval(() => {
        this.uvOffset = this.uvOffset + this.uvSpeed;
        this.line.s('top.uv.offset', [-this.uvOffset, 0]); // 线的流动
        this.rotationAngle = this.rotationSpeed + this.rotationAngle;
        this.flagReflection.setRotationY(this.rotationAngle); // 点位地面旋转
    }, 16.7);
}

移动端动画结束后,会读取手机陀螺仪数据并展示,具体原理及实现在手机传感器数据部分。

手机传感器数据

HTML5 提供了几个 DOM 事件来获得移动端方向及运动的信息,deviceorientation 提供设备的物理方向信息;devicemotion 提供设备的加速度信息。

- 处理方向 (orientation) 事件

要接收设备方向变化信息,需要首先注册监听 deviceorientation 事件:

window.addEventListener('deviceorientation', (e) => {
    this.onOrientationEvent(e);
});

orientation 事件中 3 个重要值:

属性值

含义

DeviceOrientationEvent.alpha

设备水平放置时,沿 z 轴的旋转角度,范围 [0,360] 。

DeviceOrientationEvent.beta

设备水平放置时,沿 x 轴的旋转角度,范围 [-180, 180] 。

DeviceOrientationEvent.gamma

设备水平放置时,沿 y 轴的旋转角度,范围 [-90, 90] 。

以下是事件处理的简单代码:

onOrientationEvent(e) {
    let alpha, beta, gamma, compass;
    let compassFlag = true;
    alpha = e.alpha ? e.alpha : 0;
    beta = e.beta ? e.beta : 0;
    gamma = e.gamma ? e.gamma : 0;
}

值得注意的是, IOS 和 Android 对手机硬件提供的 alpha 值不完全一样,所以需要借助 webkitCompassHeading 属性来判断是 IOS 还是 Android。当 webkitCompassHeading 不为空时,代表是 IOS 系统。

- 处理移动 (Motion) 事件

与方向事件处理类似,移动事件的处理也是首先注册监听 devicemotion:

window.addEventListener('devicemotion', (e) => {
    this.dataTextarea.s('2d.visible', true);
    this.onMotionEvent(e);

});

移动事件包含 4 个属性:

属性值

含义

DeviceMotionEvent.acceleration

加速度,需要陀螺仪支持。

DeviceMotionEvent.accelerationIncludingGravity

重力加速度。

DeviceMotionEvent.rotationRate

旋转速度。

DeviceMotionEvent.interval

从设备获取数据的频率,单位为毫秒。

以下是事件的简单代码:

onMotionEvent(e) {
    let MAX1 = 2;
    let MAX2 = 5;

    this.acceleration = e.acceleration.x ? e.acceleration : {
        x: 0,
        y: 0,
        z: 0
    };
    this.accGravity = e.accelerationIncludingGravity.x ? e.accelerationIncludingGravity : {
        x: 0,
        y: 0,
        z: 0
    };
    this.rotationRate = e.rotationRate.alpha ? e.rotationRate : {
        alpha: 0,
        beta: 0,
        gamma: 0
    };
    this.interval = e.interval;

}

总结

芯片强则产业强。随着 5G 技术、物联网和人工智能的发展,集成电路作为最重要也是最基础的科技技术,必将获得更快地发展。随着国内信息产业的快速发展,自主研发一颗好的中国“芯”已经迫在眉睫。本文以大家熟知的 CPU 为例抛转引玉,讲述微观世界 HT 的应用,如果你有更深入的需求和更好的想法,欢迎提出,我们进行更深入地讨论,也可以进行差异化业务定制。 如果你对工业互联网感兴趣,可以从 https://www.hightopo.com/demos/index.html 获取更多案例及效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HT for Web基础动画介绍

    在上一篇《基于HT for Web矢量实现3D叶轮旋转》一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT f...

    HT for Web
  • 浅谈可视化设计-数据时代的美味“烹饪师”(下篇)

    上篇我们讲到了《可视化设计-数据时代的美味制造者(上篇)》,分析完了逻辑性的可视化概念与设计流程。

    HT for Web
  • 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

    在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元。而伴随着带宽的提升,网络信息飞速发展,能源管控上与...

    HT for Web
  • 技惊四座的BERT全靠数据集?大模型霸榜或许是学界的灾难

    然而最近台湾国立成功大学的一篇论文却给人们泼了冷水。这一研究认为,BERT 至少在 ARCT 任务上利用了不正常的统计线索。正是这些统计线索,BERT 才能获得...

    机器之心
  • OpenGL矩阵变换的数学推导

    说起OpenGL的矩阵变换,我是之前在我们的项目天天P图、布丁相机中开发3D效果时才比较深入地研究了其中的原理,当时一开始时,也只是知道怎么去用这些矩阵,却不知...

    腾讯Bugly
  • 线性方程组

    线性方程组,是任何标准大学数学教材讲解矩阵是都要用到的,并用它引出矩阵概念。之所以如此,可能有两个原因:一是因为我们在初中的时候就已经学习过线性方程组,对它不陌...

    老齐
  • 新冠肺炎数据里学到的四个数据分析和机器学习知识

    虽然现在大家很容易获取机器学习和数据科学的学习工具,但是除了学习如何使用工具以外,往工具里输入数据之前如何有效地探索数据,并找出其局限性也同样重要。

    统计学家
  • Python 之 pexpect模块

    python安装setuptools模块之后,便可使用easy_install来安装python的第三方扩展模块,默认安装路径是:

    py3study
  • 什么是UML?

    UML是统一建模语言(Unified Modeling Language)的缩写,它发表于1997年,综合了当时已经存在的面向对象的建模语言、方法和过程,是一个...

    唐怀瑟
  • 「Workshop」第十七期 奇异值分解

    奇异值分解(Singular Value Decomposition,以下简称SVD)是在机器学习领域广泛应用的算法,它不光可以用于降维算法中的特征分解,还可以...

    王诗翔呀

扫码关注云+社区

领取腾讯云代金券