很有爱的QAir空气监测站之HTML5版~

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4380 天前的主题，其中的信息可能已经有所发展或是发生改变。

特别有爱的QAir空气监测站，小兔子、汽车、房子等等全部是橡皮泥捏的~小心被萌翻

用到了一些常见的HTML5技术，交互和动画主要使用CreateJS来实现，部署在SAE上。

http://qair.sinaapp.com

QAir

html5

监测站

46 条回复 • 1970-01-01 08:00:00 +08:00

TonyG

2012-11-14 21:10:27 +08:00

amazing stuff !

xhinking

2012-11-14 22:34:14 +08:00

@TonyG 谢谢
~

iYu

2012-11-15 18:27:20 +08:00

老萌了。

NemoAlex

2012-11-15 19:02:28 +08:00

Uncaught ReferenceError: type is not defined

xhinking

2012-11-15 20:23:35 +08:00

@NemoAlex 会出现数据没有加载完的情况，需要刷新几次。

jedicxl

2012-11-15 20:39:12 +08:00

哈哈已经买了IOS版的，太可爱了

jlee

2012-11-16 01:08:40 +08:00

你是kvc同学工作室的吧，哈哈~

xhinking

2012-11-16 02:19:08 +08:00

@jedicxl 谢谢支持！

xhinking

2012-11-16 02:19:58 +08:00

@jlee 哈哈，是的啊。

ichigo

2012-11-16 09:22:16 +08:00

无法切换城市？

cranej

2012-11-16 09:45:16 +08:00

北京太恐怖了, 北京公司offer再好也不能去，还是老实呆在魔都吧，哈哈

xhinking

2012-11-16 09:51:48 +08:00

@ichigo 左上角有添加监控城市的，然后就可以切换了。

xhinking

2012-11-16 09:52:59 +08:00

@ichigo 错了...是右上角

xhinking

2012-11-16 09:57:59 +08:00

@cranej 在厦门的无压力啊

imcj

2012-11-16 10:31:02 +08:00

推荐给同事了。

sobigfish

2012-11-16 11:04:42 +08:00

不允许获得位置得话就什么都看不到么？

btw 海口缩写hk...你让香港情何以堪啊

sobigfish

2012-11-16 11:22:51 +08:00

o 原来是从usembassy采集的数据啊，那lz可以从香港环保署采集hk的api啊 http://www.epd-asg.gov.hk/cindex.html 严格来说也是要授权的－，－

xhinking

2012-11-16 11:25:28 +08:00

@sobigfish 不获取位置的话应该是看到帝都的..判断逻辑那里还有些小bug

目前还不支持香港..

xhinking

2012-11-16 11:31:38 +08:00

@sobigfish 北上广等地是从美帝大使馆获取的数据，国内的数据严重不靠谱，解析起来还很要命-_-

香港的数据回来看看能不能获取授权，果断添加进来。

sobigfish

2012-11-16 11:54:51 +08:00

@xhinking 看来greenpeace也对官方的api有不同看法。http://www.greenpeace.org/hk/aptin/

wiki http://zh.wikipedia.org/wiki/%E7%A9%BA%E6%B0%A3%E6%B1%A1%E6%9F%93%E6%8C%87%E6%95%B8_(%E9%A6%99%E6%B8%AF)

paloalto

2012-11-16 12:22:28 +08:00

firefox打开一直卡在进度条上。
chrome打开，页面只有一个绿色的球。

xhinking

2012-11-16 17:51:16 +08:00

@paloalto 应该是图片加载太慢的问题，SAE的速度还是有点汗。。

jimmy

2012-11-19 14:44:30 +08:00

版本有更新了呢，之前没有进度条，感觉卡死的样子。
现在加了进度条好多了呢。

amoydavid

2012-11-19 14:47:11 +08:00

@jimmy 蛙哥果然四处出没。

jimmy

2012-11-19 14:55:23 +08:00

@amoydavid 哈哈，彼此彼此

vincent1q84

2012-11-19 17:03:47 +08:00

火狐打开只有一个绿色的球

moxuanyuan

2012-11-19 17:32:36 +08:00

不错

xhinking

2012-11-19 22:37:25 +08:00

@vincent1q84 明天测试一下火狐浏览器。

xhinking

2012-11-19 22:38:44 +08:00

@jimmy 竟然见过没有进度条的版本！难道是自己人-_-

zx900930

2012-11-20 04:41:49 +08:00

火狐打开只有一个绿色的球+1

aveline

2012-11-20 06:41:39 +08:00

@xhinking 诶你也在厦门么... 我还以为那个是根据地理位置自动判断的... 囧

jimmy

2012-11-20 09:32:40 +08:00

@xhinking 哈哈

choyo

2012-11-20 09:33:40 +08:00

chrome开怎么只有一个圆盘呢。

choyo

2012-11-20 09:35:22 +08:00

多刷几次，出来了：）

momou

2012-11-20 09:36:36 +08:00

虽然看到结果，但不知道那些数字代表空气质量如何啊。。。

xhinking

2012-11-20 10:14:39 +08:00

@aveline 理论上讲应该是会自动判断地理位置的...

xhinking

2012-11-20 10:16:07 +08:00

@momou 可以看小兔子的表情，小兔子越开心空气质量越好。

xhinking

2012-11-20 10:22:17 +08:00

好消息，iOS版今天限免啦~大家喜欢的话快去下载啊~~

https://itunes.apple.com/cn/app/q-air-kong-qi-jian-ce-zhan/id495609535?mt=8

ywencn

2012-11-20 10:45:49 +08:00

那个小兔子能做成汤姆猫那种可以点一下就动一下的不

xhinking

2012-11-20 10:53:29 +08:00

@ywencn 负责捏橡皮泥的同志表示压力很大很大

joby

2012-11-20 14:08:39 +08:00

@xhinking This app is incompatible with your China Unicom Samsung Galaxy Nexus.

archeryan

2012-11-21 19:04:50 +08:00

H5的动画很厉害啊
easeljs+tweenjs
能透露一下动画的实现技术吗=。=

xhinking

2012-11-21 21:05:30 +08:00

@archeryan

主要就是easeljs+tweenjs，很多概念和flash差不多，用起来挺方便的。当时就配合文档看了几篇文章，上手很快。

http://active.tutsplus.com/tutorials/games/learn-createjs-by-building-an-html5-pong-game/

遇到的最大问题就是圆周运动，其他就没什么了。

性能还是有些问题的，R屏ipad全屏的时候会出现卡顿，本来有好多车啊、飞机啊都没加进来。

jimmy

2012-11-22 10:44:15 +08:00

@joby 这是一个很奇怪的问题，不知道啥原因，我的N1也说不支持，之前的版本还可以，自从ADT升到高版本之后就不行了，但我还是用2.2的SDK做开发的。

54xiaobin

2012-11-22 16:57:04 +08:00

根据ip判断城市够了吧？用geo是不是体验差了点

xhinking

2012-11-22 20:13:32 +08:00

@54xiaobin 之前从没有用过HTML5 geo，这次正好有机会就尝试了一下。