- 浏览: 165415 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
qq_21380041:
954414957@qq.com
HTML5数据可视化第二弹:打造最美3D机房 -
qq_21380041:
楼主,求代码
HTML5数据可视化第二弹:打造最美3D机房 -
luoaz:
楼主能不能传个源码的附件上来, 分享学习下呢?
HTML5+WebGL 3D机房开发实例 -
xiaosi1278:
你好能不能把你讲的源代码发一下!!做参考403541110@q ...
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定 -
TWaverGeek:
BigBird2012 写道您好,您能把您使用TWaver导入 ...
TWaver导入导出AutoCAD DXF图纸
构建iOS App有很多技术方式可以选择,本文介绍基于UIWebView的Cocoa Touch组件嵌入HTML页面的方式实现的一个iPhone App例子。文中将穿插iOS的基本内容,TWaver HTML5的基础应用,以及Objective C与Javascript相互调用的技术点。
首先通过XCode构建个Empty Application即可
创建一个UIViewController子类我命名为MainViewController,然后再xib可视化拖拽出如下界面,其中包含一个UISwitch开关,一个UISlider拉条,一个UITextField输入框,以及一个最重要的UIWebView组件。
该例子中UISwitch用于自动布局的开关,UISlider作为network拓朴图的缩放控制,UITextField作为图元label的编辑更新,UIWebView用于加载TWaver HTML5的拓扑组件
以下代码在界面呈现时通过UIWebView的loadRequest函数加载指向demo.html的NSURLRequest,注意其中对textfield的添加的个空函数是为了回车能取消编辑,最后的becomeFirstResponder是为了能接收到Shake手势,该例子中通过选中图元摇晃手机可以弹出编辑告警界面。
-(void)viewDidAppear:(BOOL)animated { [self.webView setDelegate:self]; [self.webView setScalesPageToFit: YES]; NSURL *url = [[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"]; NSURLRequest *req = [[NSURLRequest alloc]initWithURL:url]; [self.webView loadRequest:req]; [self.textField addTarget:nil action:@selector(dummy:) forControlEvents:UIControlEventEditingDidEndOnExit]; [self becomeFirstResponder]; }
以下是Switch开关控制html页面内javascript代码,Objective C调用Javascript比较容易,直接调用stringByEvaluatingJavaScriptFromString运行即可
- (IBAction)handleSwitchChange:(id)sender { if(self.switcher.on){ [self.webView stringByEvaluatingJavaScriptFromString: @"window.springLayouter.start();"]; }else{ [self.webView stringByEvaluatingJavaScriptFromString: @"window.springLayouter.stop();"]; } }
如果javascript函数有返回值,则即是stringByEvaluatingJavaScriptFromString函数的返回值,以下代码就是通过这种方式来获取network当前的zoom值,以及当前选中图元的名字信息
-(void) updateSlider{ NSString* zoom = [self.webView stringByEvaluatingJavaScriptFromString: @"window.network.getZoom();"]; self.slider.value = [zoom floatValue]; } -(void) updateTextField{ NSString* name = [self.webView stringByEvaluatingJavaScriptFromString: @"window.getCurrentName();"]; self.textField.text = name; }
Javascript没有直接调用Objective C的函数,我们只能通过改变页面location的方式,在UIWebView的UIWebViewDelegate中拦截shouldStartLoadWithRequest函数回调来实现Javascript主动调用Objective C代码。实际还不是那么完美,建议读下这篇文章,我现在才有的也是文章建议的再建立一个iFrame方式去改变location避免一些副作用,以下是相关的代码,逻辑很简单我就不解释了。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ NSString* url = [[request URL] absoluteString]; if([url hasPrefix:@"call:" ]){ NSArray *array = [url componentsSeparatedByString:@":"]; NSString *method = [array objectAtIndex:1]; [self performSelector:NSSelectorFromString(method)]; return NO; } return YES; }
var iframe = document.createElement("IFRAME"); network.addPropertyChangeListener(function(e){ if(e.property === 'zoom'){ iframe.setAttribute("src", "call:updateSlider"); document.body.appendChild(iframe); iframe.parentNode.removeChild(iframe); } }); box.getSelectionModel().addSelectionChangeListener(function(e){ iframe.setAttribute("src", "call:updateTextField"); document.body.appendChild(iframe); iframe.parentNode.removeChild(iframe); });
最后为了让跟随我四年多的已无法升级到iOS5的itouch继续发挥余热,还得做如下一些设置才能用于调试测试,首先Summary里面的Deployment Target需要设置到4.*的版本,plist文件中删除Required device capabilities这行设置,最后在Architectures内改成armv7和armv6
最后是两个比较重要的obc和js代码文件供大家参考TWaver HTML5 Demo
最后将程序Archive归档发布到了App Store等着Apple的“审判”,如果顺利的话过几天大家就可以在App Store上通过查找到“TWaver”关键字,下载玩玩这篇文章的App,最后当然是free的App了。
发表评论
-
HTML5数据可视化第四弹:交互式地铁线路图
2016-12-13 15:25 982前言 最近特别忙, ... -
HTML5数据可视化第三弹:萌萌哒拓扑图分组
2016-12-02 09:55 2481前言 最近忙着给客户折腾一个复杂的多层嵌套关系。客 ... -
看HTML5如何化解大型复杂网络拓扑图的分组嵌套效果
2015-06-25 14:12 3618忙完3D,最近又开始用HTML5给客户开发网管界面。这次客 ... -
HTML5数据可视化第二弹:打造最美3D机房
2015-06-01 14:25 12780最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果 ... -
HTML5数据可视化第一弹:彩虹爆炸图
2015-05-19 15:23 8028前言 25年过去了,Brooks博士著名的“没有银 ... -
HTML5组织结构图之名片式网元布局
2015-05-07 11:43 2460组织结构图(Organization chart)是企业的 ... -
HTML5流程图之矢量可伸展workflow
2015-05-06 17:17 11458互联网购物成了当今非 ... -
HTML5流程图之复杂关系网
2015-05-06 17:10 2230关系网图的呈现方式多种多样,今天我们给大家分享的是和弦式的 ... -
TWaver GIS制作穹顶之下的雾霾地图
2015-03-18 14:31 754“我不满意,我不想等待,我也不再推诿,我要站出来做一点什么。 ... -
TWaver HTML5之树形布局
2015-03-11 10:53 1419转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没 ... -
TWaver 3D应用于大型数据中心(续)
2015-02-04 12:00 953在2014年11月份,我们当时发了一篇有关TWaver HT ... -
TWaver动画之雷达扫描效果
2015-01-26 14:03 1590UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上 ... -
HTML5 实现Link跳线效果
2015-01-15 14:01 1005之前我们推出过Flex版 ... -
在TWaver的Tree节点上画线
2015-01-13 10:27 947论坛上有同学提出如何在tree上画引导线,之前我们Flex已 ... -
22万个木箱!TWaver 3D极限压榨
2014-12-29 11:31 895打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有 ... -
如何创建TWaver 3D的轮廓选中效果
2014-11-03 10:44 911在一般的游戏中,物体的选中效果会是这样: TWaver 3 ... -
如何创建环型、树型双层布局
2014-09-19 10:58 826TWaver的Demo中有常用的环型布局和树型布局,但是当网 ... -
服务器各项指标的图形化显示
2014-09-11 11:49 691在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项 ... -
HTML5定制全选列头
2014-09-10 14:57 711随着HTML5产品分支的不断深入使用,HTML5的需求也是越 ... -
TWaver MONO模板库新鲜出炉 精彩纷呈
2014-08-05 11:39 929MONO Design在线3D建模平台网站, www.mon ...
相关推荐
《TWaver HTML5 开发指南代码》是一份专为开发者准备的参考资料,它主要聚焦于如何利用TWaver库在HTML5环境下构建拓扑工具和机房展示应用。TWaver是一个强大的可视化框架,其核心特性是支持复杂的图形和网络图表的...
标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口(API)文档。Twaver是一个强大的数据可视化和网络建模工具,广泛应用于网络拓扑、流程图、组织...
Twaver学习案例的例子
TWaver HTML5 Developer Guide是关于TWaver HTML5组件套件的官方开发文档,由Serva Software发布。TWaver HTML5是一套基于HTML5的图形组件库,它提供了一整套用于构建网络拓扑图、树形结构、表格和图表等功能丰富的...
TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件,以及表格、树图、属性表、图表等丰富的通用图形界面组件,为电信运营支撑系统(OSS)的开发提供“一站式”的组件产品和解决方案,是快速设计、开发和...
描述中提到的“TWaver HTML5 3D 制作的demo提供一个3d图形展示的基本代码”意味着这个压缩包内包含了一个使用TWaver库构建的3D图形演示程序,其中包含了实现基本3D效果的源代码。开发者可以通过学习和分析这个demo,...
5. **报警系统模拟**:“alarm”可能是一个具体的应用场景,展示如何使用twaver.js来设计和实现报警系统的图形界面,包括节点的状态变化、事件响应等。 6. **交互操作**:学习如何利用twaver.js库实现图形元素的交互...
TWaver HTML5(以下简称TWaver)使用HTML5技术和javascript语言,可在支持HTML5的浏览器上进行绘图。 使用TWaver前,需熟悉几个基本概念:图元(Element)、容器(DataBox)和画布(Network)。 图元:图形中的...
TWaver组件家族包括TWaver Java、TWaver Web、TWaver Flex、TWaver .NET、TWaver HTML5和TWaver GIS,覆盖了多种开发环境。本文主要讨论的是在Flex环境下的TWaver组件——TWaver Flex。 在配置TWaver Flex的开发...
【标题】"twaver拓扑" 是一个基于HTML5技术的图形化工具,主要用于创建和展示复杂的网络拓扑结构。这个工具提供了丰富的图形类型,能够适应多种应用场景,如IT网络架构、工业控制系统、流程图等。它允许用户通过图形...
TWaver HTML5使用JavaScript语言开发,可运行在多种现代浏览器:IE9+, Firefox, Chrome, Safari, Opera。请原谅我 没有列出具体的版本号,现在浏览器更新换代太快,而TWaver HTML5面向的是现代和未来的浏览器,所以...
### Twaver Web SVG 开发说明文档 #### 一、前言 Twaver Web SVG 开发说明文档是一份针对电信网管 WEB 模式开发的重要参考资料。该文档详细介绍了 Twaver Web SVG 的架构、开发流程以及常见问题解决方案等内容,...
- TWaver支持多种技术和平台,包括**Java**、**Flex**、**.NET**、**HTML5**和**Android**等。 - 这种跨平台的支持意味着TWaver可以被集成到不同的应用场景中,无论是桌面应用、Web应用还是移动应用,都能找到合适的...
5. `javadoc`:这个目录下是TWaver库的Java文档,详细解释了每个类、接口和方法的功能和用法,对开发者理解和使用TWaver的API非常有帮助。 6. `src`:源代码目录,可能包含了示例代码或者TWaver的部分源码,供...
【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...
即使是在极端情况下(如连接比例达到5:1),Twaver Java仍能保持较高的响应速度和稳定性,证明其在网络通信方面具有出色的技术优势。 #### 结论 通过对Twaver Java在不同节点和连接情况下的性能测试,我们可以得出...
【标题】"Twaver Web实例源码"是一个关于使用Twaver与ExtJS结合的Web应用程序开发的学习资源。Twaver是一款强大的图形化建模和可视化工具,常用于数据可视化、网络拓扑图、流程图等场景。ExtJS则是一个流行的...
**标题:“twaver-java-3.7”** **描述:“twaver-java-3.7 文档”** **标签:“twaver java 3.7”** 本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。...
【标题】"twaver-flex-3.6.5 官方demo" 提供的是一个基于Flex技术的Twaver图形库的演示版本。Twaver是一款强大的数据可视化和建模工具,广泛应用于网络、系统和业务流程的图形化表示。在3.6.5这个版本中,官方提供了...