文档章节

基于HTML5的云虚拟主机配置界面

nosand
 nosand
发布于 2014/06/19 21:26
字数 1051
阅读 5220
收藏 104

云计算大行其道,上期开源中国的原创会就有好几位云计算专家演讲,从底层的虚拟化技术,到上层的云存储和应用API,耳濡目染,也受益匪浅,算是大势所趋,回头看看Qunee组件,借这个趋势,可以在云计算可视化上发挥作用,最近就有客户用Qunee实现VPC配置图,并对交互做了定制,细节不便多说,本文主要介绍Qunee交互扩展方面的思路

VPC配置图

参考示例 - visualops

云平台可视化这块儿国外做的不错,有不少开放的示例可以学习和参考,客户看中了这家云管理系统http://www.visualops.io/ ,这个系统使用的是SVG技术,体验了一下,效果不错,参照着实现

从界面上看,一个云节点上有多个子网,每个子网内有多台虚拟主机,然后每个云节点有统一的路由Router管理(或者网关Gateway)

visualops

界面呈现

参照原型实现,使用Q.Path描出子网和云节点范围,虚拟机则用普通节点,连线使用正交连线类型,此外还有些外观配置,比如虚线,背景颜色,网格等,设置style或者css即可

创建矩形元素(子网、云节点)

function createRect(name, left, top, width, height, fillColor) {
    var rect = graph.createNode(name, left, top);
    rect.type = "rectGroup";
    rect.anchorPosition = Q.Position.LEFT_TOP;
    rect.image = Q.Shapes.getRect(0, 0, 100, 100);
    rect.size = {width: width, height: height};
    rect.setStyle(Q.Styles.IMAGE_BACKGROUND_COLOR, fillColor || Q.toColor(0x88FFFFFF));
    rect.setStyle(Q.Styles.SHAPE_STROKE, 0);
    rect.setStyle(Q.Styles.BORDER, 1);
    rect.setStyle(Q.Styles.BORDER_COLOR, "#32c02f");
    rect.setStyle(Q.Styles.BORDER_LINE_DASH, [5, 6]);
    rect.setStyle(Q.Styles.LABEL_PADDING, 5);
    rect.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_TOP);
    rect.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP);
    rect.setBounds = function (bounds) {
        this.x = bounds.x;
        this.y = bounds.y;
        this.size = new Q.Size(bounds.width, bounds.height);
    }
    rect.getBounds = function () {
        return new Q.Rect(this.x, this.y, this.size.width, this.size.height);
    }
    rect.inBounds = function (x, y) {
        return this.getBounds().contains(x, y);
    }
    rect.intersectsRect = function (rect) {
        return rect.intersectsRect(this.x, this.y, this.size.width, this.size.height);
    }
    rect.containsRect = function (rect) {
        return Q.containsRect(this.x, this.y, this.size.width, this.size.height, rect.x, rect.y, rect.width, rect.height);
    }
    rect.updateBoundsByChildren = function () {
        var bounds = new Q.Rect();
        Q.forEachChild(this, function (child) {
            bounds.add(graph.getUIBounds(child));
        });
        this.location = new Q.Point(bounds.x, bounds.y - 15);
        this.size = new Q.Size(Math.max(200, bounds.width), Math.max(70, bounds.height + 15));
    }
    return rect;
}

注意到对Rect增加了一些标定节点范围、计算自身大小的方法,后面交互时会用到

创建虚拟主机

function createPC(name, x, y, parent) {
    var node = graph.createNode(name, x, y);
    node.image = Q.Graphs.server;
    node.parent = node.host = parent;
    node.zIndex = 10;
    return node;
}

创建连接关系

function createEdge(from, to) {
    var name = from.name + "->" + to.name;
    var edge = graph.createEdge(name, from, to);
    edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;
    edge.setStyle(Q.Styles.EDGE_FROM_OFFSET, {x: 20});
    edge.setStyle(Q.Styles.EDGE_CORNER_RADIUS, 0);
    return edge;
}

定制交互

呈现出来不难,业务的体现在于交互,客户需求要求虚拟主机不得超出云节点范围,超出时需要回撤操作,此外可以将一台虚拟机从一个子网移到另一个子网,另外还要控制路由的移动范围,限定在云节点的左边框上......

实现思路是通过交互监听,分别对移动(ELEMENT_MOVING),调整大小(RESIZING)等情况做处理,Qunee交互事件通常有三个状态:开始、进行时、结束,比如移动交互的三个过程:开始移动(ELEMENT_MOVE_START),移动中(ELEMENT_MOVING),完成移动(ELEMENT_MOVE_END),我们可以在开始时记录节点原始位置,结束时判断节点位置是否允许,如果不允许则作调整

var oldLocation = {};
graph.interactionDispatcher.addListener(function (evt) {
    var data = evt.data;
    if (evt.kind == Q.InteractionEvent.RESIZE_START) {
        oldLocation[data.id] = {x: data.x, y: data.y, width: data.size.width, height: data.size.height};
    }
    if (evt.kind == Q.InteractionEvent.RESIZING) {
        if (data == mainNode) {
            label.updateLocation();
        }
        return;
    }
    if (evt.kind == Q.InteractionEvent.RESIZE_END) {
        var oldBounds = oldLocation[data.id];
        oldLocation = {};
        if ((data != mainNode && isGroup(data) && groupIntersected(data)) || childrenOutParent(data)) {
            data.setBounds(oldBounds);
        }
        if (data == mainNode) {
            label.updateLocation();
        }
        return;
    }
    if (data.atLeft) {
        if (evt.kind == Q.InteractionEvent.ELEMENT_MOVING) {
            data.updateLocation();
        }
        return;
    }

    if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_START) {
        oldLocation[data.id] = {x: data.x, y: data.y};
        return;
    }
    if (evt.kind == Q.InteractionEvent.ELEMENT_MOVING) {
        if (!isGroup(data)) {
            var g = findGroup(evt.event);
            highlight(g);
        }
        return;
    }
    if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
        highlight();
        if (isGroup(data)) {
            if (groupIntersected(data)) {
                var old = oldLocation[data.id];
                graph.moveElements([data], old.x - data.x, old.y - data.y);
            }
            return;
        }
        var g = findGroup(evt.event);
        if (g) {
            data.parent = data.host = g;
            fixNode(data);
        } else {
            data.location = oldLocation[data.id];
        }
        oldLocation = {};
    }
})

最终效果

VPC配置图

在线演示

http://demo.qunee.com/#VPC Manager Demo

© 著作权归作者所有

共有 人打赏支持
nosand
粉丝 80
博文 40
码字总数 33601
作品 0
徐汇
私信 提问
加载中

评论(5)

nosand
nosand

引用来自“滔哥”的评论

http://jiagouyun.com/
kineticjs做的,不错
诸葛非卿
诸葛非卿
www.jncao.com
滔哥
滔哥
http://jiagouyun.com/
晒太阳的小猪
晒太阳的小猪
现在网站内容下载收藏好像不行呢
91porn
91porn
云适配发布HTML5生态报告 Amaze UI成最受欢迎框架

随着HTML5标准的成熟以及企业应用的落地,HTML5正在从根本上改变开发者开发web应用的方式,从桌面浏览器到移动应用,HTML5语言和标准都正在影响并将继续影响着各种操作平台。 近日,全球领先...

IT_insight
2017/03/23
0
0
开源仓储软件 "一库仓储" 3.0 版本发布

一库仓储 第一便捷的开源仓储软件,基于 HTML5 的,便捷企业仓储管理软件。 适合库存品类在 3000 以内的中小企业。界面非常简单 出入库、库存、明细、设置,无需配置品类,直接使用。 要求 ...

BatM3
2012/10/14
2K
13
一库仓储发布 4.0 版本

一直有人加我QQ 问怎么配置各种服务器的 url_rewrite. 想想美化 Url 没什么实际意义,做了一下更新,主要更新内容如下: 1. 不再强制要求 url_rewrite 配置 2. 支持新浪云商店、SAE 3. 选用 ...

BatM3
2013/04/05
4.6K
8
2016年让原生APP插上HTML5的翅膀

APICloud新版网站上线,更多产品、更多功能等你来探索! “HTML5和Native APP谁主导未来?”当这种算命式的争论已不再是热点的时候,两种技术的融合变成了主流的声音。 现在中国70%以上的APP...

API_Cloud
2016/01/14
2.9K
2
DevOps与微服务 ▎时速云Docker&Kubernetes技术沙龙第四期

时速云是国内领先的容器云平台与解决方案提供商,自成立之日起,就根植于技术社区,致力于推动以Docker为代表的容器技术在国内的发展。迄今为止我们已在北京成功举办三期Docker&Kubernetes技...

时速云
2016/06/13
207
0

没有更多内容

加载失败,请刷新页面

加载更多

webpack4 css打包、压缩、分离、去重等优化配置详解

Webpack 4 目前版本已经到了4.27 相较于前面的版本还是有一些改动的,具体可以参考升级指南 迁移到新版本 这里只介绍 css 的 打包、压缩、分离、去重 的方法; 不懂的或者有更优的方案,欢迎...

zerokb-小浪
11分钟前
0
0
基于协同过滤算法的推荐

基于协同过滤算法的推荐 (本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 数据挖掘的一个经典案例就是尿布与啤酒的例子。尿布与啤酒看似毫不相关的两种产品,但是当超市将两种产...

阿里云官方博客
19分钟前
0
0
Tomcat配置强制https端口变成8443的解决办法

Tomcat配置强制https端口变成8443的解决办法 2017年10月18日 10:44:10 我们始终是路人 阅读数:2953 标签: tomcathttps8443443 更多 个人分类: Tomcat 版权声明:本文为博主原创文章,未经...

linjin200
21分钟前
0
0
基于协同过滤算法的推荐

基于协同过滤算法的推荐 (本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 数据挖掘的一个经典案例就是尿布与啤酒的例子。尿布与啤酒看似毫不相关的两种产品,但是当超市将两种产...

阿里云云栖社区
22分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部