Flutter简易框架插件simple_frame_app的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter简易框架插件simple_frame_app的使用

图片

frameshot1 frameshot2 frameshot3 frameshot4 frameshot5 screenshot1 screenshot2

功能

  • 通过蓝牙连接/断开（使用flutter_blue_plus包）
  • 发送并显示框架上的精灵（从预制作的图像资源或动态获取）
  • 发送文本到框架上显示（使用TxPlainText和TxTextSpriteBlock支持Unicode/RTL）
  • 请求并处理来自框架相机的JPG图像（使用image包）
  • 请求磁力计和加速度计流（IMU）
  • 自动在应用启动时加载自定义Lua脚本到框架上，并在退出应用时删除它们
  • 在应用启动时自动将精灵资产加载到框架内存中
  • 自定义类型消息发送和接收的框架（打包/解析标准和自定义消息类型），自动处理超过蓝牙MTU大小的消息
  • 标准框架侧Lua脚本库（用于通用的消息数据累积、电池、相机、精灵、文本、IMU）
  • 精简Lua脚本使用的约定
  • 可选的简单单页手机端Flutter应用模板
  • 标准框架侧Lua应用模板

入门指南

  1. 创建一个Flutter移动应用。
  2. 执行命令flutter pub add simple_frame_app。
  3. 按照flutter_blue_plus文档修改Android和iOS的配置文件以支持Bluetooth LE。
  4. 在Android中，还需在android:configChanges列表末尾追加|navigation，以防止蓝牙连接/断开时重启应用活动。
  5. 复制模板文件template/main.dart和template/frame_app.lua到项目的lib/和assets/目录下（也可以查看样本项目以了解手机端和框架端应用的例子）。
  6. 在pubspec.yaml文件中添加你希望在应用启动时发送到框架的资产（包括标准和自定义资产）。例如，对于标准Lua库，可以添加：
    flutter:
  assets:
  - packages/simple_frame_app/lua/battery.min.lua
  - packages/simple_frame_app/lua/data.min.lua
  - packages/simple_frame_app/lua/code.min.lua
  - packages/simple_frame_app/lua/plain_text.min.lua
  - packages/simple_frame_app/lua/sprite.min.lua
  - assets/frame_app.lua

使用方法

手机端（Flutter/Dart）

// 发送一些ASCII文本到框架
await frame!.sendMessage(TxPlainText(msgCode: 0x12, text: 'Hello, Frame!'));

// 让框架拍摄照片并返回
var takePhoto = TxCameraSettings(msgCode: 0x0d);
await frame!.sendMessage(takePhoto);

// 同步等待JPEG编码的图像响应
Uint8List imageData = await RxPhoto(qualityLevel: 50).attach(frame!.dataResponse).first;

// 发送自定义消息和值到运行在框架上的Lua应用
await frame!.sendMessage(TxCode(msgCode: 0x0e, value: 1));

// 发送一个精灵到框架，并使用标识符消息代码
var sprite = TxSprite.fromPngBytes(msgCode: 0x2F, pngBytes: bytesFromFileOrWeb);
await frame!.sendMessage(sprite);

框架端（Lua）

-- 手机到框架的消息代码
CAMERA_SETTINGS_MSG = 0x0d
HOTDOG_MSG = 0x0e

-- 消息代码为camera_settings时，请求拍照
if (data.app_data[CAMERA_SETTINGS_MSG] ~= nil) then
    rc, err = pcall(camera.camera_capture_and_send, data.app_data[CAMERA_SETTINGS_MSG])

    if rc == false then
        print(err)
    end

    -- 清除消息
    data.app_data[CAMERA_SETTINGS_MSG] = nil
end

-- hotdog分类为0或1
if (data.app_data[HOTDOG_MSG] ~= nil) then

    if (data.app_data[HOTDOG_MSG].value == 1) then

        if (data.app_data[HOTDOG_SPRITE] ~= nil) then
            local spr = data.app_data[HOTDOG_SPRITE]
            frame.display.bitmap(450, 136, spr.width, 2^spr.bpp, 0, spr.pixel_data)
        end
    end

    frame.display.show()

    -- 清除消息
    data.app_data[HOTDOG_MSG] = nil
end

更多关于Flutter简易框架插件simple_frame_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter简易框架插件simple_frame_app的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用simple_frame_app插件的一个示例。假设你已经有一个Flutter项目，并且已经添加了simple_frame_app依赖到你的pubspec.yaml文件中。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加simple_frame_app依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_frame_app: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

2. 使用SimpleFrameApp

下面是一个简单的示例，展示如何使用simple_frame_app插件来创建一个具有基本框架的应用程序。

main.dart

import 'package:flutter/material.dart';
import 'package:simple_frame_app/simple_frame_app.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Frame App Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SimpleFrameAppScaffold(
        appBar: AppBar(
          title: Text('Simple Frame App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Hello, Simple Frame App!',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 处理按钮点击事件
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Button Clicked!')),
                  );
                },
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了SimpleFrameAppScaffold作为主要的布局组件。SimpleFrameAppScaffold是一个自定义的Scaffold，它可能包含一些预定义的样式或功能，具体取决于simple_frame_app插件的实现。不过，在这个假设的示例中，我们直接使用了一个标准的AppBar和一个居中的Column。

3. 运行应用

确保你的开发环境已经设置好，然后运行flutter run来启动你的Flutter应用。你应该能够看到一个带有标题栏和中心文本的简单界面，以及一个可点击的按钮。

注意事项

  • 由于simple_frame_app是一个假设的插件，其实际功能和API可能会有所不同。请参考该插件的官方文档或源代码以获取准确的信息。
  • 如果simple_frame_app插件提供了额外的配置选项或功能，你可能需要在SimpleFrameAppScaffold中添加相应的属性或子组件。

希望这个示例能帮助你开始使用simple_frame_app插件！如果你有任何进一步的问题或需要更详细的帮助，请查阅该插件的官方文档。

回到顶部