构建DeepZoom:概念的创造

维多利亚和阿尔伯特博物馆有丰富的创意人才在其墙壁,这些领域之一是内艺术家在实习项目。上个月我们说再见利亚姆·奥康纳去年,他花了我们在居民的绘画艺术家,特别是工作展道路建设项目。

末利亚姆居住的数字媒体团队被邀请去他的工作室看看他工作了,目的是建立一个在线与我们回顾他的年。理查德,卢卡,西蒙和我看着雨伞挂在墙上,挂在天花板上的放大镜和很多模型的手制成的混凝土。尽管如此,画眼睛的东西是一个12米滚动覆盖着铅笔标记。当时已经完全展开,贴在墙上的工作室。

当我们和利亚姆,他向我们解释说,滚动了一切,他是看在去年的建筑工地。人们捕获和过程随着时间的推移,然后这些图纸是用来启动不同的想法在他的工作室。建筑工地的滚动文档不仅是在过去的一年,但在维多利亚和阿尔伯特博物馆利亚姆的时间。Liam使用滚动到捕获的想法,我们想要使用滚动显示和解释这些想法的工具,和显示进展。

球场和内容捕捉

我们搭的想法是创建一个交互式版本的利亚姆滚动,让游客放大的细节图,然后让Liam谈论滚动的关键领域和引发的想法。的特性之一博物馆的美我们真正喜欢的是升入麦昆对象的细节,所以我们开始思考的思想融合深海缩放图像注释利亚姆的滚动。(理查德也想到映入眼帘旅鼠的游戏…但版权)。

当我们思考如何最好地捕捉利亚姆的注释,我们意识到写不同的关键领域和项目不会不够。捕捉这些想法的最佳方式是记录Liam谈论不同的部分。西蒙,配备一个录音机和一个20页打印的滚动,和利亚姆花了一个下午,谈论mp3的不同区域,然后标记安装在滚动。西蒙的第二个任务是数字缝合所有滚动连接成一个巨大的照片(69664 x3514px)图像文件,一个不小的任务!

技术构建

同时通过各种JavaScript库,允许我看到我们需要的功能。SeaDragon开放是我们登陆,它有一个最顺利的缩放库,支持了我们需要的注释,以及他们的吗GitHub帐户已经非常活跃,核心开发人员很快在应对问题和困惑中。

图像适合开放SeaDragon它首先需要瓷砖切割成图像。确保浏览器只下载图像块为当前缩放级别而不是下载非常大的图像。在瓷砖的顶端位于不同的标记在特定的x, y的位置。每个这些标记内容分配给他们,在点击触发不同的利亚姆的解释。

所有的代码,我们可以使用GitHub帐户:DeepZoom-Images。

使其可重用

开发人员团队的关键是努力确保我们正在构建可重用;我们不想有重建现有的东西在未来新项目。因此带注释的深变焦图像工具(简称ADZIT,是的;它需要一个更好的名字)需要与我们的CMS集成。卢卡和安德鲁带头,创建资产模板注释和锻炼如何正确地将瓷砖导入CMS。

CMS的设置,这是西蒙工作通过将每个点添加到滚动和上传内容。可以看到结果展道路画滚动页面。

因为这是一个可重用的工具,我们开始思考我们如何使用深缩放图片在网站。到目前为止,包括候选人Ardabil地毯,物品在我们的tapestry画廊,拉斐尔的漫画我们也在考虑在即将到来的项目织物的印度展。任何更多的想法,请在评论中让我们知道!

---

PS:如果你想看到原来的滚动,目前画廊20的一部分显示致力于展览道路建设项目。做进来,四处看看。