TWaver - 專注UI技術

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          2014年9月16日

          posted @ 2017-06-01 14:08 TWaver 閱讀(310) | 評論 (0)編輯 收藏

               摘要: 近年來VR(虛擬現(xiàn)實)這個詞越來越頻繁地出現(xiàn)在我們生活當中。由于它能帶來前所未有的交互體驗和沉浸感,VR技術的廣泛應用,例如在游戲,影視,數(shù)據(jù)中心等領域,已經成了一個必然的趨勢。  閱讀全文

          posted @ 2017-05-31 16:45 TWaver 閱讀(367) | 評論 (0)編輯 收藏

               摘要: 用TWaver HTML5制作的上海地鐵圖,一個簡單實用的小應用,具有純矢量、可交互、有動態(tài)效果、無失真縮放等特點。可以方便擴展各種實用功能,也可以稍加改造應用于高鐵、公交等類似圖形展示。  閱讀全文

          posted @ 2016-12-13 14:36 TWaver 閱讀(777) | 評論 (0)編輯 收藏

               摘要: 以下網頁3D案例均為TWaver原創(chuàng)出品,推薦使用Chrome, FireFox, Safari等對WebGL支持良好的瀏覽器運行。案例排名不分先后,如需Demo,可直接申請試用。  閱讀全文

          posted @ 2016-12-09 15:29 TWaver 閱讀(561) | 評論 (0)編輯 收藏

               摘要: 3D雖然炫酷,但在真正的企業(yè)應用里,數(shù)據(jù)、關系的呈現(xiàn)還是要回到傳統(tǒng)的2D界面,而HTML5是目前的最佳選擇。像HTML5的canvas,雖然已經不是什么新鮮技術了,但可以直接在瀏覽器中繪制網絡拓撲圖的邏輯關系,而不需要安裝任何插件,對于很多正在更新?lián)Q代的OSS系統(tǒng)來說,還是很有吸引力的。  閱讀全文

          posted @ 2016-12-02 10:26 TWaver 閱讀(588) | 評論 (0)編輯 收藏

               摘要: 正看文章的小哥,我看你骨骼精奇,是個練武的奇才!我這里有一部TWaver3D寶典,何不入我賽瓦門,咱們一起闖蕩江湖!  閱讀全文

          posted @ 2016-11-24 10:03 TWaver 閱讀(386) | 評論 (0)編輯 收藏

               摘要: 本文介紹了如何用TWaver HTML5制作3D拓撲圖,代碼不足一百行,讓大家領略TWaver3D拓撲圖的風采。實際上,這個例子稍作變化,就可以用來展示豐富的3D網絡拓撲圖、各種復雜數(shù)據(jù)的樹狀關系圖。  閱讀全文

          posted @ 2016-11-23 10:32 TWaver 閱讀(327) | 評論 (0)編輯 收藏

               摘要: TWaver發(fā)布了一款全新的模型庫框架TWaver? Make,來幫助開發(fā)者快速創(chuàng)建高質量、專業(yè)的行業(yè)可視化應用場景。TWaver? Make提供的是模版定義的開發(fā)SDK框架,和高質量的跨行業(yè)模型庫。使用TWaver? Make,可以把TWaver 2D/3D的代碼細節(jié)包裝在模版中進行復用,極大的降低使用TWaver的復雜度,提高開發(fā)效率。模型庫就像一本字典一樣,開發(fā)著只需查閱模型id,就可以通過load方法快速加載使用這些內置模型。  閱讀全文

          posted @ 2016-11-22 10:35 TWaver 閱讀(438) | 評論 (0)編輯 收藏

               摘要: TWaver 3D發(fā)布也有很長一段時間了,相關的應用和項目也做了不少,特別是3D機房,可是有些用戶反饋說3D機房開發(fā)起來有些費勁,耗時,3D并不像2D,雖然有時更加的直觀,但是需要考慮的問題也很多。本文著重介紹了如何通過兩個簡單的步驟來創(chuàng)建出一個3D數(shù)據(jù)中心。
            閱讀全文

          posted @ 2016-11-21 11:25 TWaver 閱讀(253) | 評論 (0)編輯 收藏

               摘要: TWaver 3D產品的定位一直在于為企業(yè)提供3D應用的快速開發(fā)工具,方便企業(yè)開發(fā)適合自己的高效、實時的監(jiān)控系統(tǒng)。用TWaver 3D開發(fā)的3D場景360度無死角,可綁定動態(tài)數(shù)據(jù),輕松添加動畫,在平板和手機上也能輕松運行。  閱讀全文

          posted @ 2016-11-18 10:29 TWaver 閱讀(824) | 評論 (0)編輯 收藏

               摘要: HTML5發(fā)展迅速、勢不可擋。隨著HTML5技術的普及,用HTML5做可視化呈現(xiàn)的項目越來越多了。HTML5的優(yōu)勢明顯:網頁上直接運行無需插件、手機平板方便兼容、代碼開發(fā)和維護相對容易,等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手們都紛紛開始研究javascript了,而初出茅廬的新一代程序猿更是義無反顧的直奔HTML5這個技術大熱點而來。本文主要介紹了用HTML5實現(xiàn)的彩虹爆炸圖,具有諸多功能,可用于大數(shù)據(jù)展示。  閱讀全文

          posted @ 2016-11-17 10:52 TWaver 閱讀(563) | 評論 (0)編輯 收藏

               摘要: 前段時間,有個項目需要顯示一個很大的樹形拓撲結構圖,而布局怎么都不好看。要生成一顆比較布局規(guī)矩、好看的樹狀圖,一個成熟、高效的樹形布局算法必不可少。Reingold Tilford是常用的一個,大家可以google一下。這個算法最先是由Edward Reingold和John Tilford一起發(fā)表的,并由他們的名字命名。有興趣的同學,可以研究一下這篇1981年的論文:http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf,里面給出了這個算法的原理和邏輯代碼。這個算法的優(yōu)點是邏輯相對簡單,效率高。不過用js寫一遍也要消耗很多腦細胞。還要,twaver直接提供了這種算法和自動布局,我們可以直接使用。 下面看一看這種布局的用途。利用Reingold Tilford樹算法,我們可以把一個樹形結構的數(shù)據(jù),用不重疊、緊湊、分層的形式展示出來。  閱讀全文

          posted @ 2015-05-22 17:37 TWaver 閱讀(6735) | 評論 (2)編輯 收藏

               摘要: 應廣大客戶所需,今天給大家?guī)硪豢罱M織結構圖。組織結構圖的呈現(xiàn)方式多種多樣,用途也是非常廣泛,可以應用于集團內部,企業(yè)各部門之間的組織關系呈現(xiàn)。我們就來看看twaver實現(xiàn)出來的效果。  閱讀全文

          posted @ 2015-05-22 17:33 TWaver 閱讀(5223) | 評論 (1)編輯 收藏

               摘要: 說到TWaver的流程圖卻是層出不窮,千姿百態(tài)。2D的,3D的,靜態(tài)的,動態(tài)的。這次要給大家呈現(xiàn)的是一款全矢量的,非常清新優(yōu)美的流程圖。  閱讀全文

          posted @ 2015-05-22 17:29 TWaver 閱讀(3925) | 評論 (0)編輯 收藏

               摘要: 在公司內部,不僅部門內部員工之間發(fā)生著關系往來,部門和部門之間的員工也在發(fā)生這各種往來關系。如果你還是用原先的那種表格來呈現(xiàn),顯然很難直觀看出各種關系,用圖形化的拓撲呈現(xiàn)就會顯得一目了然。  閱讀全文

          posted @ 2015-05-22 17:06 TWaver 閱讀(3632) | 評論 (0)編輯 收藏

               摘要: 數(shù)字圖像處理(Digital Image Processing)又稱為計算機圖像處理,它是指將圖像信號轉換成數(shù)字信號并利用計算機對其進行處理的過程。常用的圖像處理方法有圖像增強、復原、編碼、壓縮等,數(shù)字圖像處理應用領域非常廣泛。具體關于數(shù)字圖像處理的介紹可以參考書籍《岡薩雷斯 數(shù)字圖像處理》。
          TWaver作為可視化的利器,如果在展示網元的時候,融入圖像處理技術,將會對網元圖標的顯示增加了靈活性,是一件非常有意思的事情。那么我們不妨來試試,如何將圖像處理技術融入進來。  閱讀全文

          posted @ 2015-04-16 14:21 TWaver 閱讀(1170) | 評論 (0)編輯 收藏

               摘要: 百度公司的ECharts發(fā)展迅速,已經成為HTML5 Chart的佼佼者,這讓大家驕傲:中國人終于也有世界級的開源通用UI產品了。正如其網站所說,它是百度的,是中國的,也是世界的。想想那些年,我們追逐感慨過的chart產品,fusionchart、highchart等等不計其數(shù),隨著HTML5的迅速普及和ECharts的瘋狂發(fā)展,大家可以忘掉那些產品了。其他商業(yè)chart產品基本上也離顫抖中關門的日子不遠了。  閱讀全文

          posted @ 2015-03-24 10:01 TWaver 閱讀(2267) | 評論 (0)編輯 收藏

               摘要: 用TWaver GIS實現(xiàn)全國霧霾圖示例,查看更多。  閱讀全文

          posted @ 2015-03-18 14:14 TWaver 閱讀(4119) | 評論 (0)編輯 收藏

               摘要: 今天是春節(jié)后上班的第三天,給大家分享一下我們前段時間的一個需求,需求是這樣的:界面中的網元分為不同的域,比如一級域,二級域,三級域,….N級域,而且不同域之間會有連線。對于這個需求,按照常規(guī)的想法,使用group豈不是很簡單,一級域是一個group,二級域也是一個group,二級域的group是一級域的父親,以此類推。但是這樣有個問題,如果域比較多,會造成group的過度嵌套,界面中group多了之后,不僅用戶體驗下降,而且會嚴重影響性能,所以倒不如直接用樹,可以很直觀的體現(xiàn)各個域之間的層級關系。  閱讀全文

          posted @ 2015-03-11 10:45 TWaver 閱讀(5238) | 評論 (0)編輯 收藏

               摘要: 2015年的春節(jié)剛過,蘋果、華為、三星就緊鑼密鼓的發(fā)布了各自新產品。華為、蘋果的智能手表最吸引眼球。TWaver也不甘示弱,立刻連夜推出了更像傳統(tǒng)奢侈豪華手表的TWaver Watch,予以反擊。看來一場腥風血雨的殘酷競爭不可避免。下面就帶大家先睹TWaver手表的芳容。  閱讀全文

          posted @ 2015-03-04 10:26 TWaver 閱讀(3549) | 評論 (1)編輯 收藏

               摘要: 隨著歲末將至,twaver開發(fā)團隊依舊馬不停蹄,3d產品功能持續(xù)更新,新特效和功能目不暇接。現(xiàn)在,我們就利用一些新功能,制作一個全新“賽瓦號”飛船,大家看一下仿真程度是否有質的不同?  閱讀全文

          posted @ 2015-02-16 10:34 TWaver 閱讀(5429) | 評論 (2)編輯 收藏

               摘要: 為了讓開發(fā)者更方便的對各類3D模型、設備、物體進行瀏覽和查看,我們直接封裝了mono.Viewer組件。它可以直接根據(jù)給定的數(shù)據(jù)源(json、obj、url等)進行數(shù)據(jù)加載和瀏覽展示。對于一般的3D設備、圖紙、作品的展示,它可是非常方便了,一句new mono.Viewer()就解決了所有問題。各種常見的交互設置、燈光設置、呈現(xiàn)方式等,都已經直接封裝其中。  閱讀全文

          posted @ 2015-02-15 10:07 TWaver 閱讀(3654) | 評論 (1)編輯 收藏

               摘要: 前篇我們介紹了TWaver 3D的環(huán)境映射特效,下面我們接著給大家分享高光反射特效。
          高光反射定義了物體上的某一區(qū)域比其他地方更反光。在高光反射的貼圖中,黑色區(qū)域的反射率為0(完全不反光),白色區(qū)域的反射率為100%(完全反光)。這在現(xiàn)實的生活中,也是隨處可見,比如一個生銹的物體用低光,而一個拋光的金屬應該用高強光;手表上的表盤比表帶應該更反光;人的嘴唇應該比皮膚有更強的高光,而皮膚應該比純棉衣服更反光。加上了這種高光效果后,會是3D物體更加真實,更加生動。
          接下來我們就來講解一下如何在一個模型中使用高光反射,比如我們需要創(chuàng)建一個大樓的建筑物。一個cube貼上建筑物的貼圖就可以模擬了。我們準備了一張玻璃的貼圖:  閱讀全文

          posted @ 2015-02-06 10:18 TWaver 閱讀(4208) | 評論 (3)編輯 收藏

               摘要: 在2014年11月份,我們當時發(fā)了一篇有關TWaver HTML5 3D應用于大型數(shù)據(jù)中心的文章,該blog比較詳細的描述一些常用的功能的實現(xiàn)方法,比如:動態(tài)添加機柜,告警,溫度,濕度等相關的功能的具體實現(xiàn)。其實會用這些東西的話基本上可以使用我們的TWaver HTML5 3D來實現(xiàn)相關的應用了,可是在有些客戶覺得這還不夠“動態(tài)”,都是代碼一下生成的,少了一些交互,前些天同事說要不再加點功能,讓它更加“動”一些,所以今天我抽了個時間再接著來個“續(xù)”——動態(tài)的添加機柜,主機和告警。  閱讀全文

          posted @ 2015-02-04 11:50 TWaver 閱讀(4137) | 評論 (1)編輯 收藏

               摘要: 還有半個多月就到春節(jié)了,年底相信很多公司都會進行年度總結以及公司發(fā)展狀況總結,在這過程中難免會用到RoadMap,在這我們也使用TWaver的矢量部分繪制一個Android系統(tǒng)的發(fā)展歷程。先看效果。  閱讀全文

          posted @ 2015-02-02 11:42 TWaver 閱讀(3791) | 評論 (1)編輯 收藏

               摘要: 隨著TWaver3D的快速發(fā)展,越來越多的各種功能都在不斷加強,包括性能的極大提升(可以參考這里),3D編輯器的易用性和功能持續(xù)增強(歡迎大家申請試用),各種特效的增加,特效是本文的主角。  閱讀全文

          posted @ 2015-01-28 15:26 TWaver 閱讀(1522) | 評論 (2)編輯 收藏

               摘要: UI和功能是好的產品的兩個重要因素,很多產品往往只注重功能上的設計,而忽略了UI。在這個“看臉”的時代,就算產品的功能很強大,如果UI跟不上步伐,你的產品都會在客戶心中大打折扣。如何利用TWaver實現(xiàn)動畫之雷達掃描效果呢,點擊看文章。  閱讀全文

          posted @ 2015-01-26 13:54 TWaver 閱讀(2681) | 評論 (1)編輯 收藏

               摘要: 容積率一般應用在房地產開發(fā)中,是指用地范圍內地上總建筑面積與項目總用地面積的比值,這個參數(shù)是衡量建設用地使用強度的一項非常重要的指標。在其他行業(yè),容積率的計算也非常重要,如產品利用率、管道使用率等等。那么在監(jiān)控系統(tǒng)中,如何能夠生動形象的表達容積率的計算,是的監(jiān)控系統(tǒng)具有準確性、安全性的同時,還具備了多樣性,良好交互性等等。 最近的游戲產業(yè)發(fā)展也非常迅速,在手持終端3D的游戲也越來越多,那么如果我們將游戲引擎融入到監(jiān)控系統(tǒng)中,會實現(xiàn)什么樣的效果呢,本文重點介紹使用APE物理引擎結合TWaver 2D產品實現(xiàn)管線的容積率計算。 先來看下效果:  閱讀全文

          posted @ 2015-01-19 10:31 TWaver 閱讀(888) | 評論 (0)編輯 收藏

               摘要: 之前我們推出過Flex版本的Link跳線效果,現(xiàn)在基于HTML5新版本的跳線效果也實現(xiàn)了,細微之處我們進行了改進,如link傾斜的時候Offset方向始終保持垂直等。先看效果。  閱讀全文

          posted @ 2015-01-15 13:54 TWaver 閱讀(3817) | 評論 (0)編輯 收藏

               摘要: 論壇上有同學提出如何在tree上畫引導線,之前我們Flex已經實現(xiàn)此功能,現(xiàn)在最新版的HTML5也將添加此功能。先看看效果吧。  閱讀全文

          posted @ 2015-01-13 10:17 TWaver 閱讀(3098) | 評論 (0)編輯 收藏

               摘要: 游戲中經常會出現(xiàn)一些大型的戶外場景,例如一個小鎮(zhèn)、一座古城等。通常這種場景中包含了較多的建筑、道路、橋梁等等元素,其3D模型比較大且復雜。在使用TWaver加載時,可使用一些技巧,讓加載速度更快、顯示更流暢。  閱讀全文

          posted @ 2015-01-06 13:41 TWaver 閱讀(4238) | 評論 (1)編輯 收藏

               摘要: 打開個門戶網站都千呼萬喚,我們還能期待網頁上的3D技術會有“酣暢淋漓”、“一氣呵成”的感受嗎?也許現(xiàn)在還差點火候。但是HTML5、WebGL等技術一直在飛速的發(fā)展,可能很快你就會驚訝它的能力。現(xiàn)在,我們就試試TWaver的3D能顯示多少個木箱子,透明的木箱子。數(shù)據(jù)量當然要大才行,10萬個怎么樣?干脆試試20萬好了,具體說是60的立方矩陣=60x60x60=216000個。只有壓榨到極限才能了解WebGL和TWaver 3D技術適合做什么應用。 下面就Let’s go吧!  閱讀全文

          posted @ 2014-12-29 11:11 TWaver 閱讀(4507) | 評論 (0)編輯 收藏

               摘要: 前段時間有個客戶說他們想在我們的3D的機房中找從A點到B點的最短路徑,然而在2D中確實有很多成熟的尋路算法,其中A*是最為常見的,而這個Demo也是用的A*算法。  閱讀全文

          posted @ 2014-12-02 10:37 TWaver 閱讀(6684) | 評論 (0)編輯 收藏

               摘要: TWaver 3D中,物體的默認的選中效果一般都是一個方方正正的外框。在HTML5的Mono版本中,TWaver提供了輪廓線樣式的選中效果。  閱讀全文

          posted @ 2014-11-03 10:31 TWaver 閱讀(5962) | 評論 (1)編輯 收藏

               摘要: 的確,提起TWaver,大家想到的首先是“電信拓撲圖組件”。其實,由于其靈活的MVC架構、矢量化設計、方便定制等特點,TWaver可以做的還有很多。例如房地產行業(yè)常見到的“戶型圖”。  閱讀全文

          posted @ 2014-10-29 10:59 TWaver 閱讀(5323) | 評論 (1)編輯 收藏

               摘要: 一般而言,需要實現(xiàn)3D物體的漸變,通常的思路就是通過2D繪制一張漸變canvas圖片作為3D對象的貼圖,這種方式是可以解決這類問題的,不過對于一般用戶而言,通過2D生成一張漸變的圖片,有一定的難度,另外如果要生成的圖片比較多,性能效率上會成為一個瓶頸,特別是漸變隨著條件在不斷變化的情況下,就需要每次繪制的時候都去生成一張漸變的canvas圖,效率極其低。  閱讀全文

          posted @ 2014-10-21 13:27 TWaver 閱讀(2507) | 評論 (0)編輯 收藏

               摘要: 應客戶需求寫個Demo,Demo中包含一些常用的功能,包括解析JSON數(shù)據(jù)生成TWaver中的網元和連線,網元右下角帶上不同標識的小圖標,連線需要是二次曲線,彈出菜單和信息板,跟大家分享下。先上圖讓大家看看效果  閱讀全文

          posted @ 2014-10-13 09:35 TWaver 閱讀(5989) | 評論 (2)編輯 收藏

               摘要: 使用過MONO編輯器的朋友都應該了解MONO中支持一些動畫的設置,比如開門,開窗,彈出設備,旋轉場景,鏡頭巡航等。但如何將這些動畫應用到自己的場景中呢?比如我們在編輯器中給機柜定義了動畫,怎樣讓做好的機柜模型加載到自己的場景中并能播放動畫呢?別急,我們來舉個例子給大家講解一下。  閱讀全文

          posted @ 2014-10-11 10:21 TWaver 閱讀(3198) | 評論 (1)編輯 收藏

               摘要: TWaver提供的是電信行業(yè)中的圖形解決方案,TWaver GIS是基于地圖服務的一套解決方案。您可以這樣理解,TWaver GIS就是在地理信息系統(tǒng)(GIS)上使用TWaver,TWaver的各種圖形組件都可以在GIS上使用。TWaver本身不提供地圖數(shù)據(jù),我們與傳統(tǒng)的arcgis相比更輕量,更簡單,而且價格也更便宜,我們更加專注在地圖上來實現(xiàn)復雜的電信業(yè)務,可以兼容OpenstreetMap,BingMap,GoogleMap,MapABC等多種主流地圖。甚至只要你的地圖是ogc標準的WMS服務格式,我們都是可以支持的。  閱讀全文

          posted @ 2014-10-09 14:48 TWaver 閱讀(2350) | 評論 (0)編輯 收藏

               摘要: TWaver的Demo中有常用的環(huán)型布局和樹型布局,但是當網元數(shù)量較多,又不想zoomOverView,我們自然會想到使用雙層布局,整體效果既不會顯得很擁擠。  閱讀全文

          posted @ 2014-09-19 10:42 TWaver 閱讀(3176) | 評論 (2)編輯 收藏

               摘要: 如何獲取整條回路的所有l(wèi)ink,并使之發(fā)光。在這個Demo中主要包含三個技術點,一是如何在選取一條鏈路時,讓整條回路發(fā)光;二是如何繪制帶有箭頭方向的曲線link;三是如何設置鏈路的樣式,讓整體可控。
            閱讀全文

          posted @ 2014-09-16 13:36 TWaver 閱讀(2972) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 文登市| 琼结县| 嘉鱼县| 洛隆县| 台北市| 枣阳市| 达拉特旗| 永善县| 界首市| 祥云县| 德钦县| 锦州市| 灯塔市| 临漳县| 平定县| 淮安市| 海宁市| 南皮县| 萝北县| 丰宁| 余庆县| 泗水县| 涿州市| 武隆县| 高州市| 武强县| 沈丘县| 古交市| 南雄市| 庄河市| 宝兴县| 平乡县| 韶山市| 应用必备| 中宁县| 龙口市| 普宁市| 丹寨县| 洛南县| 略阳县| 水富县|