Coder Social home page Coder Social logo

rshcaroline / tracing-app Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 1.0 70.47 MB

An Android app, adding more fun during city orienteering with AR technology and unique Nearby function, which had won 1st runner up in 2017-IShamrock Software Competition

PHP 0.30% Java 99.70%

tracing-app's Introduction

Tracing

An app, won 1st runner up in 2017-IShamrock Software Competition

项目概述

开发背景

移动互联网时代全面到来后,媒体生态发生了革命性的变化,创新成为发展动力的源泉。2017年度的三叶草软件竞赛(iShamrock Software Competition)以“移动媒体创新– 媒体应用使生活更美好”作为比赛主题,正契合于当下的时代旋律。
因而,我们要做的是一款充分利用移动终端的资源能力、丰富人们社交娱乐生活的媒体应用。 我们选择的切入点是“痕迹(trace)”,也即用户移动的轨迹。显然,人们行动的“痕迹”总是由许许多多标识地点串联而成,好比定向游戏中玩家奔向一个又一个地标,或是日常生活中我们在餐馆、球场、影院等地间往返。我们希望利用移动终端的GPS定位能力,结合地图、AR接口,将人们的行动轨迹可视化,让使用者一路走来能“雁过留声、人过留痕”,为地图上每一个坐标赋予独特的意义。

功能描述

目前Tracing已实现的功能包括:
用户新建痕迹点,即在某一地点发表文字、图片形式的留言;
用户查看附近地方他人的留言;
用户进行指定路线的定向游戏,路线上每一个地点可以进行AR识别交互。
辅助定向游戏是这款应用重要的衍生功能,我们精心设计了一条张江地区的定向路线供用户体验。

开发过程Timeline

2016.12.4 第一次会议 初步讨论确定了参赛主题、产品功能、人员分工,完成了参赛方案的填写
2017.1.29 假期中的第一次会议 详细探讨了AR和地图两个模块的API的使用
2017.1.30 主要讨论了几个用户界面的UI设计 明确了用户使用该程序的流程 根据讨论的内容适当调整了分工
2017.2.7 初步实现了注册登录以及地图主界面并成功进行对接
2017.2.15 AR模块打包完成 讨论中提出了新建一个用户发表动态新建足迹点的功能并设计一个“附近”界面来展示周围的足迹点上的动态内容,实现用户间的互动 修复了一些地图模块的bug
2017.2.25 几大模块基本全部完成,对接尝试较为顺利,修复了一些接口中的问题,讨论了程序开发的前景,提出了通过记录用户添加的兴趣点来产生用户生活轨迹来提高社交精确性的想法。

客户端部分

UI界面

  1. 登陆界面和注册界面
    a) 使用sharedPreference来实现“记住密码”功能
    b) 修改了button的样式,写了一个button_selector来增加了四个角的弧度和点击按钮后的变色功能
    c) 写了一个CircleImageView的类来使得头像的方形变成圆形
  2. 开始界面
    a) 用了toolbar来代替actionbar充当标题栏
    b) 用了navigationview来实现侧滑栏功能
    c) 调用了一个包在右下角实现了一个卫星菜单
  3. 附近界面
    a) 设计风格上借鉴了微信朋友圈的界面
    b) 布局文件中的friends_circle_head负责显示附近页面最上方的背景及用户头像;friends_circle_item负责每条动态发布者的用户信息以及每条动态的文字内容
    c) 设计了SquareImageView类来存放用户头像
    d) 使用自定义的NoScrollGridView显示用户每条动态的图片
    e) 使用谷歌官方的SwipeRefreshLayout实现下拉刷新功能

AR设计

AR场景创建

使用高通Vuforia SDK进行AR识别对象的创建并且导出为unity database,使用3DSMAX制作AR交互物体,并将AR交互物体添加到unity场景中

AR与用户的交互

在Unity项目中添加C#代码
在onBack中添加函数
在cubeOnClick中添加函数
在cameraupdate中添加函数
使得AR部分可以封装嵌入到UI中,并且AR场景可以进行自动对焦,AR交互物体可以产生旋转动画、可以响应用户的点击

活动之间的信息传递

在地图界面使用startActivityForResult调入AR识别界面,并且传入位置id,在AR界面中通过ClickModel函数,用startActivityForResult实现位置id的下一级传递使得能够在特定位置弹出特定的提示信息和识别成功信息的回调,并且用:

AR总体框架:Vuforia SDK将照片识别图封装为unity database,unity将database和object封装为Android activity

地图组件

地图组件使用了高德3D地图SDK与定位SDK。

在代码中名为Mapmodule的package中实现了大量的地图相关的操作。其中,LocOverlay主要用于维护用户头像在地图上的显示,以及定位精度圈与搜索范围提示圈的显示及动画效果。ClipOverlay主要用于实现在在地图上显示标记点(包括留言点,AR扫描点,提问点),从服务器更新标记点,以及控制用户远近时标志点样式的变化。

标志点的信息通过Clip(标签)类进行维护

包括了类型信息,经纬度信息,提示语,发布用户等多种信息。
该类实现了Parcelable接口,并且可以与服务器进行通信。每一个Clip与地图上的现实的“标记点”通过Map一一对应。

用户的信息通过player类进行维护

该类不与服务器进行通信,但包括了经纬度信息,以及用户的视野(标记点的可搜索范围等)等数据,以便在其他类中访问。

定向的线路实质上内部表示为一个Clip(标签) 类型的Array。

这些标签由于用于定向,处理逻辑上与一般的标签点(如用户的留言点)处理逻辑不同。这些标签只有在定向确认开始后加载,并且必须按照正确顺序访问,且用户距离足够近时(在搜索范围提示圈内)才会显示。

服务器部分

数据库主要有有两张表组成。一张记录用户数据,包括用户名,密码,以及在用户ID,并以此ID作为主键并标识其头像图片,另一张表记录的是足迹点的信息主要包括足迹点的经纬度,建立此足迹点的用户ID,以及该足迹点的内容和图片信息。
两张表通过用户ID互相关联,并可在此基础上,扩展查询功能。

服务端通信,主要用的是volley(部分使用okhttp3)通信框架,使用post方式与后端通信,后端主要使用PHP语言,数据通过json发送给前端,前端使用Gson框架进行解析。
后端实现了用户注册、登录验证、周围Clip查询、用户创建Clip等操作。
服务器使用的是腾讯云学生机。

图片加载使用了Glide 框架和volley 自带的网络加载框架,相册图片的加载裁剪等操作使用的是GalleyFinal框架

项目前景

完善辅助定向功能

现实中的定向游戏路线繁多,还可以多人合作完成,这些都不难在Tracing中实现。只需要导入更多不同地区的定向路线,就能为用户提供更多选择。 Tracing的辅助定向功能不仅增加了游戏趣味性,还能更好满足用户的社交需求。组队功能上线之后,用户既可以和好友相约聚首,拿起手机来上一场别开生面的定向,也可以选择在线上寻找附近的玩家,组成队伍进行定向游戏,是一种新颖的交友方式。

完善用户添加痕迹点功能

目前用户在某一地点留言只能选择文字和图片形式,未来我们希望让用户自定义AR识别地点。

进一步完善社交系统

回到最初的话题,“痕迹”是我们的切入点,事实上生活轨迹也确实反映了一个人的兴趣所在,因此这款应用可以提供更具有导向性、精确性的好友匹配功能。例如系统可以为用户筛选出在某一餐馆留下过多次“痕迹”的人,精确地找到口味相同的潜在好友。此外,通过算法为用户找出生活轨迹最相似的人,让人们不错过身边的有缘人。

tracing-app's People

Contributors

rshcaroline avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

aucson

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.