首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于 HTML5 Canvas 的工控机柜 U 位动态管理

设计为能放置到 19 英寸机柜的产品一般被称为机架服务器。...toolbar 工具条中总共的元素就三个:添加机柜,编辑机柜和删除机柜。...元素的具体定义如下: var toolbarItems = [// 工具条上三个的元素 { icon: self.getToolbarIcon('toolbar.add.rack'),// 的是我们前面声明过的图片...http://www.hightopo.com/guide/guide/plugin/dialog/ht-dialog-guide.html),我们设置此对话框中的内容为一个 form 表单进行显示,同时还设计了两个按钮...实现了添加和编辑机柜的两个功能,删除机柜的功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 在拓扑图上删除机柜,并删除树上此机柜对应的节点

2.4K40

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

myDiv'); myDiv.appendChild(splitView.getView());//将分割组件添加进myDiv中 接着添加节点进入 dataModel 数据模型之中,我们这里做的是机房的机柜...2D 的图片显示肯定和 3D 的模型显示是不一样的,2D 中我们直接贴图就能解决,而 HT 3D 中支持 obj 格式的模型显示,就是这个部分: ?...,该函数有三个参数,第一第二分别为 obj 文件的路径和 mtl 文件的路径,第三个参数为 json 格式控制参数,具体参数请参考 HT for Web OBJ 手册 loadObj 函数章节(ps:...obj 模型会导致跨域问题,要放到服务器上运行): ht.Default.loadObj('obj/机柜组件1.obj', 'obj/机柜组件1.mtl', { cube: true,//是否将模型缩放到单位

1.3K80
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5设计原理(下)

    使用JavaScript编写一些代码当然也可以实现这个功能,但HTML5一个placeholder属性就帮我们解决了问题。...HTML5规范的设计能够让你做到鱼和熊掌兼得。 好,下面就来看看这个新的video元素;真是非常贴心的一个元素,而且设计又简单,又实用。...总之,无论你是编写软件,还是制造什么东西,都是一样的,即20%的努力可以触及80%的例。最后20%的例则需要付出80%甚至更多的努力。...因此,有时候据此确定只为80%设计是很合理的,因为我们知道为此只要付出20%的努力即可。 再比如,微格式同样也利用了帕累托原理,只处理常见例,而没有考虑少数情形。...我觉得像这样的设计原理都非常好。而有了设计原理,我认为才更有希望设计出真正有价值的产品。设计原理是Web发展背后的驱动力,也是通过HTML5反映出来的某种思维方式。

    1.1K10

    HTML5设计原理(中)

    避免不必要的复杂性 下面我就给大家介绍一些这份文档中记载的设计原理。第一个,非常简单:避免不必要的复杂性。好像很简单吧。我一个例子来说明。...而按照HTML5的另一个设计原理,它必须向前向后兼容,兼容未来的HTML版本——不管是HTML6、HTML7,还是其他什么——都要与当前的HTML版本,HTML5,兼容。...我说过,因为浏览器必须支持已有的内容,HTML5自然也不能例外。归根结底还是伯斯塔尔法则。我们始终离不开伯斯塔尔法则。 解决现实的问题 HTML5的另一个设计原理是解决现实的问题。...所以,说HTML5解决现实的问题,其本质还是“你都这样写了很多年了吧?现在我们把标准改了,允许你这样写了。” 求真务实 在所有设计原理中,这一条恐怕是最响亮的了——求真务实。...在HTML5中,这些元素都可以换掉。说起新增的语义元素,它们价值的一方面可以这样来体现:“嘿,看啊,这样多好,HTML5新增的元素可以把这些div都替换掉。” ...

    1.6K10

    HTML5设计原理(上)

    今天我想跟大家谈一谈HTML5设计。主要分两个方面:一方面,当然了,就是HTML5。...但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。...一直没有举手的呢,大声点,你们什么?HTML5,也很好!更早的呢,还有人使用更早的文档类型吗?没有了? 10年来我一直使用XHTML 1.0,就是因为验证器能够真正帮到我。...有人XHTML 1.1吗?你知道有人吗?请举手,别放下。有人把网页标记为XML文档吗?有吗?那你们使用的就不是XHTML 1.1。 这就是个大问题。...两个工作组之所以能够同心同德,主要原因是HTML5设计思想。因为他们从一开始就确定了设计HTML5所要坚持的原则。

    1.4K10

    无插件纯Web 3D机房,HTML5+WebGL倾力打造

    懂的人都知道,这可是一张设计公司出的装修效果图啊,就算是max建模,也需要大量的工作,何况咱可是程序员在做数据中心的可视化项目啊。。。...这些东西3D做起来都有点啰嗦。不过也不难。花盆一个大圆柱剪掉中间的小圆柱,做成空心花盆;植物贴图+透明模拟一下就行,不用真的去做植物的3D模型,否则要累死了。...机柜和设备 写了那么一大篇,才终于把3D机房的外观装修完成,咱也算是个设计师程序员的混合型人才了呢。其实机房最核心的资源——机柜,还没找落呢,没办法,形象工程也是项目建设的一大亮点。...这里为了演示方便,直接写几个机柜的片段,看一下显示效果。 机柜对象在项目中是这样封装的:一个立方体来表示机柜,并加上贴图。...Html5就是极佳的一个选择。 Html5,也许它还不是银弹,但它确实是很好的一个炮弹。本文这一弹,你还喜欢吗?

    1.1K41

    基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子没有设计师的参与,样式上面大家将就将就,但是我觉得还不错啊,哈哈~ 进入正题,整个例子差不多用了 200 行的代码来实现的,这就是我喜欢 HT 的原因,现在 Web3d 技术兴起,大体就是分为两派...:插件派和 HTML5 派。...HT 就是基于 HTML5 的,不需要安装任何插件,啊,跑题了。。。 首先,还是从场景的搭建开始,这个界面是在 body 体上添加了三个部分:3d 组件,属性组件以及拓扑组件(2d 组件)。.../机房/机柜相关/机柜2.json'); service2 = createNode([-200, 140, 0], [100, 260, 100], '网站', 'models/机房/机柜相关/机柜2.../机柜设备6.json'); device2 = createNode([100, 20, 650], [200, 20, 100], 'VLS 12000(下)', 'models/机房/机柜相关/机柜设备

    1.3K20

    接口设计

    背景说明 一个系统可为其他系统提供能力或者直接为UI层提供数据,在设计系统测试方案时应考虑上游调用的各种场景,不仅考虑顺利且正向思维操作的场景,还应逆向的场景。...换句话来说,使用契约式设计的方式,运行前条件必须满足,参数不正确不可运行;运行中内部状态必须不变;运行后结果必须保持一致。...在设计接口设计时,除实现功能外,应关注:幂等性、空校验、流程节点限制、异常校验。 ? 01 幂等性 何为幂等性? 幂等为一数学概念,指使用相同参数重复执行,能获取相同结果。...当然,首先需明白业务逻辑,从而进行设计。尤其对于参数复杂的接口,当某一条调用规则下 某些非空参数就需要作为必传了。 03 流程节点限制 流程节点限制,即需严格遵守流程流转。...明确系统的状态流转,一个系统设计初期就需明确功能及状态流转,会依据产品对系统的定义及依赖的下游或三方产品的功能。 测试正常流程节点。按照正向流程依次调用,观察调用结果及生成状态。

    1.6K31

    HTML5拓扑图形组件设计之道(一)

    这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只做我们感觉自己能得更好,能给用户综合体验更佳的功能,在这样理念驱动下我们慢慢形成了这样的愿景...,慢慢实现了几个有意义的里程碑,慢慢积累下了不少图形组件设计上的创新和经验,我不知道这个系列会写多少篇,也许永远也不会结束,也没有系统的提纲规划,想到什么就写什么,只希望文章能启发有兴趣的同学对图形组件设计更深的思考就足够了...讨论前先设定话题的边界,HT是基于HTML5的图形组件库,因此文章的案例更多会涉及HTML和JavaScript语言,但并不局限于Web前端,设计思想上同样适用于任何GUI语言平台。...完整的前端设计是需要考虑到后台加载并发等因素,但本系列更侧重于纯客户端图形组件,不涉及网络通讯部分的思考,例如最近阿里无线前端招聘让谈谈:讲讲输入完网址按下回车,到看到网页这个过程中发生了什么。...因此我选择在话题展开之前,先用HT来扩展定制几个应用案例,以便大家了解HT组件及其扩展设计思路。

    1K90

    贵州新增一个千亿产业集群!这个产业,去年投资157.56亿元……

    至此,全国一体化大数据中心体系完成总体布局设计,“东数西算”工程全面启动。...通过交互、切换场景等实现逐级下钻,从地球-区域-园区-机房-机柜设备。通过提供卫星云图、效果图、鸟瞰图、CAD图、现场照片等资料,由设计师进行轻量化建模。...设计师采用轻量化建模,可对模型进行精雕细琢,做出酷炫的效果。...可视化 U 位:透视每个机柜的U位使用情况。 可视化承重:透视每个机柜的承重负荷情况。 可视化功耗:透视每个机柜的总功耗情况,进而了解机房的能耗分布情况。...(5)门禁监控 HT 作为基于 HTML5 标准的组件库,可以无缝结合 HTML5 各项多媒体功能,支持集成各类视频资源形成统一的视频流。图扑软件的可视化系统能集成门禁信息,辨别入侵人员。

    43630

    贵州有哪些魅力,为何阿里、华为、腾讯都把数据中心建在贵州?

    常规情况下可通过提供卫星云图、效果图、鸟瞰图、CAD图、现场照片等资料,由设计师进行轻量化建模。 目前手头有 BIM 的模型信息,是否能够直接用于这个场景的展示?...// 容量管理可视化 可视化不仅仅能将肉眼所见的对象图像描绘出来,也能将设备的信息状态形式表达出来。...能按不同区域查看能耗的用量,如楼层、房间、机柜进行查找和统计。运维人员不再需要通过原始数据去推理建立心理形象,而是直接感官快速理解情况。...(5)门禁监控 门禁控制系统的设置是用来隔离公众区和受控区,刷卡、密码、指纹、指静脉等方式代替传统的仅靠人工放行。...HT 作为基于 HTML5 标准的组件库,可以无缝结合 HTML5 各项多媒体功能,支持集成各类视频资源形成统一的视频流,可在 2D、3D 态势地图上标注摄像头对象并关联其视频信号源,通过场景交互来调取相应监控视频

    2.3K20

    矢量化的HTML5拓扑图形组件设计

    但,我还是不喜欢DOM上太重都是元素,不喜欢庞大包罗万象搞得没有一家能完美实现的标准,另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活,基于HTML5...有了工具再也不用为绘制曲线犯愁了,甚至都不需要程序员参与,美工也可以HT的矢量编辑器绘制图形导出JSON给程序员使用,这就是HT为让Designer与Developer更好互相配合而进行矢量的设计初衷...,程序员不用再每天苦逼的代码绘制各种设备,这样的设计开发工作流程下,即使哪个领导不满意,美工也可以快速再拖拖拽拽出新的矢量图形效果,而程序员需要做的仅仅是再导入JSON即可。...,所以选择什么样的设计方案很多情况下并不是决定性的,关键还是认真,只要认真用心实现都可以在不同的设计路子上做出精彩。...最后还是收收心,其实矢量也不是那么万能,ps还是很强大的,美工可以ps快速构建出各种细致效果的图片,这点有简单的矢量格式描述很多情况下是达不到的,因此矢量也是仅仅解决了监控领域的部分问题,减少了程序员的部分工作量

    1.4K20

    基于 WebGL 的 HTML5 3D SCADA 主站系统 顶

    代码实现 进入正题,整个例子仅仅是用了两百多行代码来实现,这就是我喜欢 HT 的原因,能够进行快速开发。现在 Web3D 技术兴起,大体就是分为两派:插件派和 HTML5 派。...HT 就是基于 HTML5 的,不需要安装任何插件,啊,跑题了。。。 场景搭建 首先,还是从场景的搭建开始,这个界面是在 body 体上添加了三个部分:3D 组件,表单组件以及拓扑组件(2D 组件)。...= createNode([-400, 140, 0], [100, 260, 100], '备用', 'models/机房/机柜相关/机柜2.json', 'symbols/机房/电阻柜.json'.../机房/电阻柜.json'); service3 = createNode([0, 140, 0], [100, 260, 100], 'OA', 'models/机房/机柜相关/机柜2.json.../机柜设备6.json', 'symbols/机房/机柜组件1.json').s('label.t3', [0, 0, -151]); // 剩下创建的节点部分重复的太多,我就不贴代码了 } 最后

    1K60
    领券