Glass UI SDK

Version: 1.5.6

一、UI SDK介绍


1.1 概述

提供一套在Rokid Glass上开发应用的基础UI库,目前已经提供以下支持:

1. GlassButton
Glass自定义的Button

2. GlassDialog
提供了一系列常用的对话框

3. 屏幕适配
屏幕适配方案,可以在Rokid Glass上保持UI统一按比例显示

4. GlassAlignment
由于AR 眼镜特有的屏幕显示特性(Optical see through),在开发眼镜上的"识别类应用"时,
为保证好的体验,建议不显示camera preview,然后把识别后要显示出来的标定内容做一次对齐映射,以保证人眼看到的标定内容固定在真实物体上。

5. IMU View
提供了一个可通过头控横向自动滚动的列表控件

二、集成说明


在project的build.gradle中添加jcenter依赖:

allprojects {
    repositories {
        google()
        jcenter()
    }
}

2.1 Gradle依赖

在项目的 /app/build.gradle 文件中,增加如下依赖:

...
dependencies {
    ...
    implementation 'com.rokid.glass:ui:1.5.6'
}

2.2 Demo下载

Glass UI Demo

三、功能列表


3.1 GlassButton

Glass自定义的Button

Focused:

Normal

3.1.1 用法

 <com.rokid.glass.ui.button.GlassButton
    android:id="@+id/custom_dialog_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Dialog"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/dialog_btn" />

3.2 GlassDialog

提供了一系列常用的对话框,通过不同Builder 来构建不同类型的对话框。 目前提供的Builder:

3.2.1 CommonDialogBuilder

通用的 DialogBuilder

方法 含义 备注
setTitle 设置标题
setContent 设置内容 和自定义内容布局选其一
setConfirmText 设置确定按钮文字
setCancelText 设置取消按钮文字
setContentLayoutId 设置内容自定义布局id
setContentLayoutView 设置内容自定义布局View 和setContentLayoutId选其一
setConfirmListener 设置Confirm监听
setCancelListener 设置Cancel监听

示例代码

new GlassDialog.CommonDialogBuilder(this)
        .setTitle("Title")
        .setContent("Content")
        .setConfirmText("Confirm")
        .setCancelText("Cancel")
        .setContentLayoutId(R.layout.layout_custom_dialog_content)
        .setConfirmListener(new GlassDialogListener() {
            @Override
            public void onClick(View view) {

            }
        })
        .setCancelListener(new GlassDialogListener() {
            @Override
            public void onClick(View view) {

            }
        })
        .show();

3.3 屏幕适配

在app的AndroidManifest.xml声明:

<manifest>
    <application>            
        <meta-data
            android:name="design_width_in_dp"
            android:value="640"/>
        <meta-data
            android:name="design_height_in_dp"
            android:value="360"/>           
     </application>           
</manifest>

这里的都是根据设计图的尺寸来,以宽或者高为基准,默认是宽。

模拟器Preview设置

3.4 GlassAlignment

  • Alignment概念:

    • Camera预览界面通过Glass显示屏幕进入人眼睛的映射过程.
  • 在手机上开发如下图:

  • 在眼镜上开发如下图:

  1. 蓝色代表相机预览的画面
  2. 绿色代表相机预览中物体的坐标
  3. 橙色代表LCD屏幕相机预览的映射区域,百分比表示真实世界在虚拟世界的比例
  4. 白色代表物体映射到LCD屏幕的显示区域

3.4.1 getAlignmentRect

说明:根据preview的rect,获取到映射到LCD屏幕的区域

public static Rect getAlignmentRect(final int previewWidth, final int previewHeight, final Rect previewRect)
参数 含义 默认值
previewWidth Camera preview宽
previewHeight Camera preview高
previewRect Camera preview的Rect

示例代码:人脸识别后,在屏幕上画出人脸Rect

public static final int PREVIEW_WIDTH = 1280;
public static final int PREVIEW_HEIGHT = 720;

//camera preview的人脸区域
Rect previewRect = faceDoCache.faceDo.toRect(getWidth(), getHeight());

//根据preview的人脸Rect,映射后,获取最终在屏幕上绘制的Rect
Rect rect = RokidSystem.getAlignmentRect(PREVIEW_WIDTH, PREVIEW_HEIGHT,previewRect);

...
//根据
canvas.save();
canvas.translate((rect.left + rect.right) / 2f, (rect.top + rect.bottom) / 2f);
...
canvas.restore();
...

3.4.2 getWindowRect

说明:根据LCD屏幕的rect,获取到preview的区域rect

public static Rect getWindowRect(final int previewWidth, final int previewHeight, final Rect windowRect)
参数 含义 默认值
previewWidth Camera preview宽
previewHeight Camera preview高
windowRect LCD屏幕上的Rect

3.4.3 getProjectionMatrix_OpticalSeeThrough

说明:获取OpticalSeeThrough场景下,OpenGLES 3D 应用的投影矩阵(横屏状态),以便人眼看到的标定内容和真实世界对齐

public static float[] getProjectionMatrix_OpticalSeeThrough()

示例代码: 对于横屏应用,获取OpenGLES MVP矩阵的投影矩阵

float projectionMatrix[] = RokidSystem.getProjectionMatrix_OpticalSeeThrough();
...

3.5 IMU View

  • IMU View控件:提供了一个可通过头部左右转动,控制横向自动滚动的列表控件,帮助开发者快速使用“头控快划”功能。
  • 当用户打开系统设置中的“头控快划”后,你的IMU View控件就生效了。

3.5.1 使用示例

3.5.2 使用方法

在Application中进行初始化:
IMUSdk.init(this);
具体使用:
getLifecycle().addObserver(mImuView);//生命周期绑定
mImuView.setSlow();//默认是快滑模式,设置此处可设置为慢滑模式
mImuView.setAdapter(mAdapter);
<com.rokid.glass.imusdk.core.IMUView
        android:id="@+id/ui_recycler_view"
        imulabmarginleft="10"
        imulabmargintop="10"
        imutouchstyle="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:imuscale="1.1"
        app:imutouchstyle="true" />
属性配置 含义
imuscale 配置选中Item的缩放比例
imupadding 配置item内填充的间距,用于预留缩放空间
imuspeed 配置匀速滑动模式的滑动速度
imuguide 配置是否显示顶部导航栏
imuunable 默认为false,设置为true将屏蔽imu头控功能
imutitlewidth 配置默认显示模板title的宽度
imulabmarginleft 配置左上角位置提示lab距离左边界的距离
imulabmargintop 配置左上角位置提示lab距离上边界的距离
imutouchstyle 提供两种滑动模式 true:模拟touch滑动模式 false:匀速滑动模式
imutouchinterval 配置模拟touch滑动模式的滑动速度
<declare-styleable name="imuview">
    <attr name="imuscale" format="float"/>
    <attr name="imupadding" format="dimension" />
    <attr name="imuspeed" format="integer" />
    <attr name="imuguide" format="boolean" />
    <attr name="imuunable" format="boolean" />
    <attr name="imutitlewidth" format="dimension" />
    <attr name="imulabmarginleft" format="dimension" />
    <attr name="imulabmargintop" format="dimension" />
    <attr name="imutouchstyle" format="boolean" />
    <attr name="imutouchinterval" format="dimension" />
</declare-styleable>

3.5.3 滑动模式选择

  • 配置方式:通过imutouchstyle属性配置。
  • 匀速滑动模式:列表进行匀速滑动,每个item不会有停顿效果,多用于内容多比较快速的滚动,类似图库。
  • 模拟touch滑动模式:模拟手动touch滑动的效果,经过每个item会有停顿的效果,便于用户看清,是默认的滑动模式。

3.5.4 自定义头控相关功能

results matching ""

    No results matching ""