十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有了很大改进,图片归类及设置Tag比以前易用很多,不过我还是不满意传统改良的Web方式操作图片,我还是喜欢更有交互感的图片操作体验,借助hightopo的HT for Web的拓扑图组件写了个自己满意的搜查Flickr图片例子。

http://v.youku.com/v_show/id_XNjg5MjMwMTYw.html

Flickr提供了OpenAPI的搜索方式,到网页输入http://api.flickr.com/services/feeds/photos_public.gne?tags=hightopo&format=json的链接,基本原理就一目了然,通过修改url的tags=内容,即可实现搜索不同tag图片的结果。这个url返回的是个jsonp的函数回调jsonFlickrFeed({…}),关于jsonp主要就是用来解决跨域访问的安全问题,我们只需要实现处理数据jsonFlickrFeed等着flickr服务器下发回调即可,jsonp的文章已经很多再次不再详述。

输入框每次输入关键字后我构建了个document.createElement(‘script’),同时避免DOM无限制增长删除了上次查询的结果,当然也不删也问题不大,只不过对我这种有代码洁癖者,看到DOM上有没用的元素我就很不爽。

                searchJS = document.createElement('script');
searchJS.setAttribute('src', 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tag + '&format=json');
document.getElementsByTagName('head')[0].appendChild(searchJS);

剩下就很简单了,在jsonFlickrFeed函数里面遍历Flickr返回的图片数组信息,每个元素的title就是图片名称,media.m就是图片路径,根据这些信息创建每个相应的图元,然后通过new ht.layout.ForceLayout(g2d).start()构建一个弹力布局器去自动布局就完事了。

这个视频搜索了hightopo、girl和cr7关键字的效果,再有两个小时西甲的重头戏皇马和巴萨就要开展了,明天还要工作我只能洗洗睡吧,在此祝我喜欢的CR7能进球。

以下为本例子的所有js代码

  function init(){
input = ht.Default.createElement('input', null, null, 'hightopo');
input.onkeypress = function(e){
if (e.keyCode === 13){
search();
}
};
items = [
{
element: input
},
{
label: 'Clear',
action: function(){
dataModel.clear();
}
}
];
dataModel = new ht.DataModel();
g2d = new ht.graph.GraphView(dataModel);
toolbar = new ht.widget.Toolbar(items);
borderPane = new ht.widget.BorderPane();
borderPane.setTopView(toolbar);
borderPane.setCenterView(g2d);
view = borderPane.getView();
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {
borderPane.invalidate();
}, false); forceLayout = new ht.layout.ForceLayout(g2d);
forceLayout.start();
}
function search() {
if (window.searchJS) {
document.getElementsByTagName('head')[0].removeChild(searchJS);
}
var tag = input.value;
searchJS = document.createElement('script');
searchJS.setAttribute('src', 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tag + '&format=json');
document.getElementsByTagName('head')[0].appendChild(searchJS);
root = new ht.Node();
root.s({
'shape': 'circle',
'shape.gradient': 'radial.center',
'shape.background': '#E74C3C',
'label': tag,
'label.background': 'yellow',
'select.width': 0
});
root.setSize(30, 30);
dataModel.add(root);
return root;
}
function jsonFlickrFeed(datas) {
datas.items.forEach(function(item){
var node = new ht.Node();
node.a(item);
node.setName(item.title);
node.s({
'label.background': 'yellow'
});
node.setImage(item.media.m);
dataModel.add(node);
var edge = new ht.Edge(root, node);
edge.s({
'edge.3d': true,
'edge.width': 4,
'edge.color': '#1ABC9C'
});
dataModel.add(edge);
});
}

创意点:企业工作汇报简图,智能财务报表。

拓扑图弹力布局呈现Flickr图片搜索结果:智能创新的更多相关文章

  1. 拓扑图弹力布局呈现Flickr图片搜索结果

    十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有 ...

  2. 如何获取Flickr图片链接地址作为外链图片

    Flickr,雅虎旗下图片分享网站.为一家提供免费及付费数位照片储存.分享方案之线上服务,也提供网络社群服务的平台.其重要特点就是基于社会网络的人际关系的拓展与内容的组织.这个网站的功能之强大,已超出 ...

  3. Google 以图搜图 - 相似图片搜索原理 - Java实现

    前阵子在阮一峰的博客上看到了这篇<相似图片搜索原理>博客,就有一种冲动要将这些原理实现出来了. Google "相似图片搜索":你可以用一张图片,搜索互联网上所有与它相 ...

  4. Google图片搜索

    本博文的主要内容有 .Google图片搜索的介绍 .Google图片之普通搜索    .Google图片之高级搜索 1.Google图片搜索的介绍   Google的图片搜索,不仅通过关键字查找拥有特 ...

  5. Google 以图搜图 - 相似图片搜索原理 - Java实现 (转)

    前阵子在阮一峰的博客上看到了这篇<相似图片搜索原理>博客,就有一种冲动要将这些原理实现出来了. Google "相似图片搜索":你可以用一张图片,搜索互联网上所有与它相 ...

  6. 基于 HTML5 WebGL 的 3D “弹力”布局

    分子力(molecular force),又称分子间作用力.范得瓦耳斯力,是指分子间的相互作用.当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化 ...

  7. 百度Ueditor编辑器取消多图上传对话框中的图片搜索

    百度Ueditor确实是一个非常强悍的编辑器,功能强大!但是实际开发需求复杂,总会有各种不符合要求的,比如想要取消多图上传的“图片搜索”选项卡(这个图片搜索真心难用)! 以ueditor 1.4.3为 ...

  8. 利用bing图片搜索接口开发图片搜索应用程序

    概述:通过bing的图片搜索引擎,开发自己的图片搜索应用程序.bing的图片搜索接口是收费的,但是初次注册使用,key可以免费试用30天 程序运行效果如下 一,代码如下 static SearchRe ...

  9. 爬虫(四)Selenium + Headless Chrome爬取Bing图片搜索结果

    Bing图片搜索结果是动态加载的,如果我们直接用requests去访问页面爬取数据,那我们只能拿到很少的图片.所以我们使用Selenium + Headless Chrome来爬取搜索结果.在开始前, ...

随机推荐

  1. ASCII码排序,hdu-2000

    Problem Description 输入三个字符后,按各字符的ASCII码从小到大的顺序输出这三个字符.   Input 输入数据有多组,每组占一行,有三个字符组成,之间无空格.   Output ...

  2. 水池(DFS)

    水池数目 点我 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中 ...

  3. MEMS陀螺仪(gyroscope)的工作原理

    传统的陀螺仪主要是利用角动量守恒原理,因此它主要是一个不停转动的物体,它的转轴指向不随承载它的支架的旋转而变化. 但是MEMS陀螺仪(gyroscope)的工作原理不是这样的,因为要用微机械技术在硅片 ...

  4. C#、VB.NET 使用System.Media.SoundPlayer播放音乐

    原文:C#.VB.NET 使用System.Media.SoundPlayer播放音乐 同步播放: System.Media.SoundPlayer player = new System.Media ...

  5. 在WPF中自定义你的绘制(二)

    原文:在WPF中自定义你的绘制(二)   在WPF中自定义你的绘制(二)                                                                 ...

  6. Inno Setup 系统托盘图标插件 TrayIconCtrl V1.5

    原文 http://restools.hanzify.org/article.asp?id=93 V1.5 修正在某些 Windows 平台上(例如 Windows XP SP3)不能正常运行的问题. ...

  7. git 拉取远程分之到本地

    git checkout -b newbranch_name --track origin/feature/newbranch_name 如果遇到类似: fatal: git checkout: up ...

  8. H面试程序(12): 输出字符串中第一个只出现一次的字母

    题目描述: 若字符串str为'' sbdddsbfc'',则输出 f; 若字符串str为''aabbccdd'',则输出:字符串str中的字符都出现两次以上 #include <stdio.h& ...

  9. RadioButtonList选择事件onclick

    <asp:RadioButtonList ID="rbtnFInvoiceType" runat="server" onclick="check ...

  10. VS2015 企业版不支持 JavaScript 语法高亮、智能提醒

    2015年7月,微软终于放出了 Visual Studio 2015 正式版,博主安装了 Visual Studio 2015 企业版之后,居然不支持 JavaScript 的语法高亮.智能提醒功能, ...