1006大设计翻译版以面向触屏设备的集群监控交互式展示平台

航空航天航空航天大学毕业设计()PAGE\*ROMANIV开发环 开发语言及技术基 系统实现概 3.3文件和解析数据的实 3.3.1文 解析数 节点信息展示区的实 作业详细信息列表区的实 系统综合信息展示区的实 作业时间运行图展示区的实 本章小 手势动作的实 技术基 拖拽元素实现位置交 获取多个对 获取对象位 对“虚拟ID”的改 重新开启 扫动实现删除作 长按实现改变作业状 本章小 平台功能测 编写测试文 iOS系统上的测 实验环 实验目的及设 26 实验环 实验目的及设 29实验总结与分 本章小 总结与展 工作总 工作展 致 参考文 航空航天航空航天大学毕业设计()VI图目图2.1集群系统总体架 图2.2平台架构设计 图3.1JSON数据解析示意 图3.2节点区表格创建流 图3.3作业详细信息数据结 图3.4作业运行时间元素属性设 图4.1元素交换动作实现流 图4.2删除及暂停作业流程 图5.1iOS-Safari浏览器下显示效 图5.2拖拽实现元素交换效果 图5.3扫动删除作业及长按暂停作业效果 图5.4实时功能效果 图5.5Windows-Chrome浏览器下显示效 航空航天航空航天大学毕业设计()VII表目表5.1测试数据设计 航空航天航空航天大学毕业设计()第PAGE10绪集群交互式展示平台则是根据这个需要而设计的一个可以友好地、可视化地显开启展示平台对数据的等。 系统就网格，我们可以从网页上随时获取它到的集群系统的运行参数，UI非常友好，避免了大量繁琐的数据显示，而且面向的用户非常广泛，操作也目前比较流行和典型的几个集群系统的原理和特性作简要的介绍。Ganglia[3]包括gmondgmetad和一个Web前端Ganglia主要的对象是cpu，mem的性能，硬盘的利用率，I/O负载及网络流量情况等，它会让集群系统中每台计算gmetad可以部署在系统内任一节点上，通过单播路由gmondXML格式的数据文件在各程序中进行络设置以及的状态等，属于一款网络监视工具。可以有效SMTP、POP3、HTTP等网络服务，运行并行服务检查机制，定义网络分层等。Nagios最主要的特性就态恢复正常后发出新的正常的邮件或通知。但是它要求运行环境必须可以运行LinuxC语言编译器，还要正确配置各种协议和安装各种插件，因而跨平台性和HTools[5]Hadoop开发的集群管理工具，致力于提供优质的用户体验，可IT技术人员，轻一个可扩展的数据协议和编程接口，它的对象也很广泛，从最基本的单处理器到1024个处理器的大规模集群都可以被它和管理，并且处理速度极高。Juelich大学开发的LLview[7]。该软件是一款基于-Server的程序，可以由类似控制的集群系统的利用率、节点数据、历史作业情况等信息。LLview解决了因数据信息列表太过庞大和复杂而无法拥有上千处理器的大规模超级计算机集群系统的问文的主要研究目标即为最后一项——设计并实现一个能够对从集群中到的资源和停，显示当前状态以供用户查看和分析数据。36 HTML5[8]。HTML5HTML元素、CSS样应用的功能HTML5APPCache能够使这类网页应用拥有更短的启动时间和联网速度。另外，CSS3[9]中提供了的风格和更强的效果，使得三维、图形等特效性显著增强。JavaScript对于网页应用，JavaScript语言[10]自然是必不可少的，在本平台中，所有的文方便地处理HTML ，Event等，本需用到JavaScript的一个优秀框架——Jquery[11]，Jquery能够使用户的HTML页面保持代码和HTML内容分离，从而可以使程序员不用再在HTML里面插入一堆JavaScript来调用命令了。JSON（JavaScriptObjectNotation，JavaScript对象表示法）JavaScript的，并且完全独立于语言。JSONJavaScript对象中表示的一组数据转换为字符串，Web客户机传递给服务器端程序。它一般使用名称/值对这种形式将数据以字符串的形式表示出来，JavaScript很容易解释这个字符串。由于底层的信息系统会到集数据并以不同的形式展示出来，这就需要一种既方便底层系统输出，又适合前端平台和解析的数据交换格式，该格式最好还能够易于人们人工阅读。而JSON数据交的是触屏设备上的touch，包括touchstart、touove和touchend三种，通过EventListener机制来其是否发生，通过targetTouches.length来判断是否是多点第一章绪论完成平台的设计后，根据前面功能需求，在不同的环境下进试和平台架构设计及功能需本章在第一章内容的基础上，首先从目前已有的LLview系统出发，分析该软件的根据LLview软件的功能特性，给出本文要求的集群系统功能需求及详细的展示平台部LLviewPerl语言[12]Linux操作系统，其数据传输格XML[13]。在软件的设置中，用户可根据自己需要使其显示不同的信息，隐藏不需间变化的曲线图（包括每个时刻的最小占用资源量、最大占用资源量和平均占用量，作业详细信息的列表（给出了作业的编号、颜色、用户、占用节点数、类型等信息，本文研究内容来源于的一个项目——集群系统的设计与实现，该系统主2.1阐述了该系统的总体架构设计。本文的研究对象为最后一项，即设图2.1集群系统总体架以txt格式文件输出。8个线程，其状态以灰色和彩分，且运行同一作业的线程为同一颜色；作业详细信根据之前对依据上一节中对系统功能的需求和平台的设计的解决方案，本平台将设计成2.2本章依据对LLview软件功能的分析，提取了该软件的几个典型功能作为本系原则，给出了系统的总体架构设计和展示平台部分的详细设计。本章需求确定了数据解析及展示功能的浏览器：Chrome34.0.1847.116开发软件：AdobeDreamweaverHTML5JavaScriptLLview软件使Perl。对HTML5JavaScript，在第一章的相关技术介绍中已经作了简要说明，此外，开发该需一项叫做Ajax的技术作为支持：Ajax（AsynchronousJavaScriptandXML，异步JavaScript和XML）[14]是基于JavaScript的，可以创建更好更快及交互性更强的Web应用程序的技术。通过在与服务器进行少量的数据交换AjaxAjaxDOM模型进行动态显示及交互[15]，使用XML或JSON进行数据交换，使用XMLHttpRequest进行异步数据处理。其中，XMLHttpRequest提供了open()和send()方法发送请求，以GetPostAjax技术，可以使用户进行连续操作，只需要发出请运用Ajax技术，通过以下代码来创建对象：xmlhttp=newxmlhttp=newActiveXObject("xmlhttp=new}}xmlhttp.open("GET","求的方法[17]methodGet请求类型，url即为这里设置的服务器中的文件路径，async则使用了异步方式（true；xmlhttp.send()可以将请求发送到服务器，但只支持Post方式，由于之前使用的请求类型为Get，所以这里参数设为null。面的文件函数中，还需使用一个json=eval()的方法来将文件中的JSON数到二维数组中即可（node表示节点信息数组，其他部分的数组同理。在完成该解3.1JSON在节点信息展示区（TopologyofNodes）中，每个节点代表一台机器，每台机器上#CCCCCC为不同颜色。图3.2给出了整个区域表格和数据的生成流程。一行每行再生成6列用于表示6个节点位置在每个节点中首先根据到的JSON数node[i][0]div2行4列，用于表示一个节点中的8个线程，每个线程的颜色用background-color=node[i][j]iJSON数据格式文件中的行数，j代表每行的第几个键值对的3.2TimeTime）以及状态（Status，其中状态又分为正在运行（running、挂起（hold、暂停（suspended信息的格式是一个个的键值对，所以其实质就是一个二维数组；并且由于在还是使用表格的形式来展示作业的各种信息。图3.3阐述了该区域的数据结构。3.3numberjobsjobsjobsutilization在作业时间运行图展示区（TimeChartofJobs）中，我们需要对作业的开始运行时divdiv3.4所3.4margin-leftwidth以及时间标志线绝对位置zero等都需要通过以下的自适应区域宽度算法和相关步骤来得出：（end_timediv计算margin-left，width，时间标线绝对位置zero以及时间标线相对元素位置now[]的n=505/(left_max+right_max);zero=left_max*n;for(vari=1;i<=graph_num;i++)now[i]=left[i]*n;graph[i].style.width:="+(parseInt(now[i])+parseInt(right[i]*n))+"px;graph[i].style.margin-left="+(parseInt(zero)-parseInt(now[i]))+"px;now_time[i].style.margin-left="+(parseInt(now[i]))+"parseInt()方法可以将JSON数据格式文件中的字符串直接转化widthmargin-leftnow[]记录了每条作业中的零点div元素全部生成后，每段标线将会组合成一条长线，且相对于该区域的位本章详细介绍了该展示展示部分的实现过程，包括在加载页面、文件时使用到的Ajax异步刷新技术，实时关键代码，数据转化时使用的数据结构，节手势动作的HTMLDOM ObjectModel（文档对象模型）[18]的缩写，其实质就是网页的（ApplicationProgrammingInterface，应用程序编程接口。它是一种与浏览器、平台和语言无关的接口，将网页中的所有元素都看成一个个的对象，从而允许程序和动态地和更新文档的内容、结构及样式。在DOM中，最常用到的就是使用geementById()和geementsByClassName()等方法获取对象，从而对目标元素进行设置属性、修改参数和删除等动作。如果少了DOM的支持，很多动作将无法完成。在获取了对象之后，我们需要对其进行绑定，其状态以判断是否发生变化或执过addEventListener(eventFlag,eventFunc,useCapture)方法来 [19]，其中，代表绑定到中的执行动作，在这里可以设置判断和各种动作；useCapture是指是否所有的手势动作都需要使用这个机制来执行。ID4.1给出了该4.1基于DOM模型基础，一般都会使用.geementsById()方法来获取对象，HTMLID是唯一的，不能重名，所以使用该方法只能获取一个对象。而方法.geementsByClassName()可以通过元素的类（class）来获取HTMLclass属性值是可以重复的，从而解决了获取多个对象由于此处使用的手势touchstarttouove和touchend是无法直接获取触控点元ID的，因此要想知道用户选择了哪个对象和放置于哪个对象之上，就必须通过计算触控点的位置和元素的位置关系来判断，得到一个对象的“虚拟ID”值。这里，我们使用数组top[]来记录每个元素的顶点使用数组event.targetTouches[].pageY和来记录触控点的高度位置，当event.targetTouches[].pageY处于某个高度区间[top[i],对“虚拟ID虽然上面的过程已经实现了交换，但是由于“虚拟ID”并非程序直接获取的，而IDA1A2，其真实ID12，但是交换过后，A1ID2A2ID”变1A1又成为了交换对象，交换时使用ID”——2A2的内容。这样就无法对已经交换过的对象再度执行该操作。为了解决这个问题，我们在“虚拟ID”外又封装了一层专a[]IDij个对象发生交换动作后，交换的只是这两个对象的a[i]和a[j]值，其余对象的a[]值并不改变，然重新开启超过或不足这个范围都将无法触发删除命令。图4.2给出了这一实现流程。4.230px删除动作其实质就是使用.geementById().deleteRow()方法删除表格中特定的的图4.2中已经给出了该动作的执行流程。其关键代码如下所示：if(Date.now()-{varvalue=confirm("Areyousuretosuspendthejob?");alert('Suspendthisjob}在touch_start中，当有两个手指放在同一元素上时，记录此刻的时间timer； 2s）时，触发该动作。至此，长按实现改变作业状态的动作已完成本章详细介绍了面向触屏设备的集群交互式展示平台的手势动作功能的实现过程，包括使用到的DOM模型和技术，手势操作详细设计流程，手势动作中如何获取多个对象及其位置，器的设置和重启，以及对元素ID的设计和改进等，平台功能（time（node（info时间信息（graph。其中，数据生成时间（date）代表信息系统将到的信息处（node_num（th1~th8numberjobsjobsjobs成作业数（Completedjobs、正在等待作业数（Idlejobs）及资源利用率（Resourceutilization（color（job_num（JobID、提交者（Submitter、提交时间（SubmittedTime、运行时间（RunTime）（Status；（name（start_time（end_time（thread表5.1给出了该测试文件的设计数据。5.1date 2014-05-25 node_num job_num JobSubmittedRun2014/5/242014/5/2402014/5/2402014/5/242014/5/252014/5/252014/5/252014/5/252014/5/252014/5/2502014/5/252014/5/252014/5/2502014/5/252014/5/25X系统的iOS系统设备进试。其测试环境的具体参数如下：触屏设备：iPad操作系统：iOS服务器：ApacheTomcat1）打开浏览器，输入，加载网页静态内容2）文件，生成数据信息给出Safari浏览器下的效果。5.1iOSSafari5.2所示，测试时，依据图中给出的交换对象和次序，在左图中拖动箭头左边5.2不涉及真正指令的下达和影响作业处理系统，所以并无其他动作显示；然后，两指11和作业3后的效果。5.3实时功如图5.4所示，测试时，实时功能先处于关闭状态，此时不会更新数据信息；开关，界面重新加载，点击确认后界面回到了原来的形态，由于数据并没有改变，图5.4实时功能效果虽然目前市场上最流行的触控设备是苹果的iPad，但最主流的操作系统还是Windows，很多触屏演示都是基于Windows设备：LenovoIdeaPadYoga13（超极本处理器：Interl(R)Core(TM)i5-3337UCPU@操作系统：Windows8,浏览器：IE10，Chrome，FireFox，360服务器：ApacheTomcat1）使用不同浏览器，输入，加载网页静态内容2）文件，生成数据信息此处只给出Chrome浏览器下的效果，且各种手势动作都能完成。WindowsChrome5.5Windows-Chrome浏览器下显示效然而，在IE10、FireFox以及360浏览器下，该平台的兼容性有所缺陷。在IE和只能进行浏览器默认支持的缩放动作。在FireFox浏览器下，同样只能加载显示界面信的实验数据和结果可以得出结论——在iOS和Windows平台和使用webkit内核的Chrome、Safari及搜狗等浏览器中，该展示平台的一切功能均能实现，且都符合第二章成功txt文件，并将文件中的JSON格式的数据转化为图形、列表等形式展示指同时向右水平滑动一定距离实现作业的删除，可以通过两指在某元素上长按超过2s文件并生成新的展示信息，自动时间间隔为2s（由程序设定。Safari、ChromeIE、FireFox360三种IE10IE浏览器一直对手势动作的兼容性较差由于其只支持pointer而不支持IEAjax的兼容性也非常差，所以在但是FireFox和IE都不属于这种内核的，所以无法执行这些；而Chrome和Safari都是基于webkit内核开发的，所以均能支持这些。360360IEIE中普通360IE10中运行时的效果完本章对面向触屏设备的集群交互式展示平台的功能和兼容性进行了测试。包括iOSWindows操作系统触屏设备（iPad和联想使用手势动作，只能实现数据展示。其原因在于本文中使用的触屏只支持特定的浏总结与展拖拽对象“虚拟ID”的改进和器的重启。由于本文使用的touch无法获取到触控ID的问题。这一函数，这样就可以产生无限循环，保证器处于状态，实现了多次交换的功能。这一问题的解决，让我对JavaScript机制的原理、过程都有了更深的了解，作系统兼容性良好，而对于浏览器，只兼容使用webkit内核的浏览器[22]，如Chrome和Safari等，的分析也让我对各种浏览器的特性和原理有了新的了解。Perl、AjaxJSON数据交换格式，扩宽了我的知识范围和视野，对今后的添加缩放和旋转，能够让用户对界面中的某个元素或版块进行缩放等操作。在本文中使用的触摸是touchstart、touove和touchend的组合，该虽然与添加新的触控，使该平台能够兼容的浏览器。致在完成本科之际，我在此向所有给予过我指导和关心的老师、师兄、同学环境来完成的本科毕业设计，感谢JSI给我在这里的实习机会，过去但这里的一点一滴我都会铭记，这里发生过的一切都是我最美好的回忆。 感谢答辩组的各位老师，老师、老师和老师，在开题答辩和中研究，谢谢您具有重要价值的指导意见；傅老师作为答辩组，非常辛苦地准备各种老师在答辩过程中问题也让我对自己的毕设有了的思考，变通了实现方式和感谢与我同一项目组的、、和。在毕设过程中，无私的帮助与关心给予我和一起奋斗的动力，在我存在技术上的时，是和我一起思考问题来源、解决问题关键，我会非常珍惜和一起努力奋斗的日子。持我在北航接受高等教育，的鼓励让我更有信心追求心中的梦想，我爱！参考[1].大规模云计算集群系统设计与实现[D].长春:东北师范大学,[2].高性能Linux服务器构建实战：运维、性能调优与集群应用[M].机械工业,MattMassie,BernardLi,BradNicholes,