如何使用 Ray 开发万能面板（万字 全流程 手把手教学）

最新推荐文章于 2024-05-20 22:23:58 发布
最新推荐文章于 2024-05-20 22:23:58 发布
阅读量1.3k 收藏 24
点赞数 31
文章标签： 小程序 iot 开发语言 App 低代码 ide css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Smart/article/details/135755908
版权

1. IoT 平台创建产品

面板作为 IoT 智能设备在 App 终端上的产品形态，创建产品之前，首先来了解一下什么是面板，以及和产品、设备之间的关系。

1.1 面板是什么？

  1. 面板 是运行在智能生活 App、OEM App（涂鸦定制 App） 上的界面交互程序，用于控制 智能设备 的运行，展示 智能设备 实时状态。
  2. 产品 将 面板 与 智能设备 联系起来，产品描述了其具备的功能、在 App 上面板显示的名称、智能设备拥有的功能点等。
  3. 智能设备 是搭载了 涂鸦智能模组 的设备，通常在设备上都会贴有一张 二维码，使用 智能生活 App 扫描二维码，即可在 App 中获取并安装该设备的控制 面板。

1.2 产品、面板、设备关系

下图描述了产品、面板和设备三者之间的关系

1.3 创建产品

由于产品定义了面板和设备所拥有的功能点，所以在开发一个智能设备面板之前，我们首先需要创建一个产品，定义产品有哪些功能点，然后面板中再根据这些功能点一一实现。

这部分我们在 IoT 平台上进行操作，注册登录 IoT 平台:

  1. 点击左侧产品菜单，产品开发，创建产品，以大家电为例，选择标准类目，选择大家电 -> 空调:

  1. 填写产品名称，输入"万能面板"，其余选项默认即可，点击创建产品按钮，完成产品创建。

2. 产品功能点定义

创建完成产品后，进入功能定义页面，这里列出了空调类目下可选的标准功能点，这里我们点击全部选择，点击确定完成产品初始功能点设置：

 

3. 小程序平台创建小程序

现在我们已经有了一个产品，并且功能点已设置完成，接下来就进入面板小程序的开发流程。前往注册登录涂鸦小程序开发者平台，创建我们的小程序项目。

点击新建，输入小程序名称"万能面板"，小程序类型选择 面板小程序，面板类型选择公版，点击确定完成创建：

 

4. 安装小程序 IDE 创建项目代码

安装并打开小程序 IDE 工具（前往下载小程序 IDE）

使用涂鸦 IoT 平台账号登录 IDE 后，使用智能生活 App 扫码授权 IDE：

4.1 创建项目代码

点击新建，输入项目名称：万能面板，关联智能小程序选择第 3 步小程序平台创建的小程序，关联产品选择第 1 步在 IoT 平台创建的产品：

点击下一步选择模版，选择 App 面板开发 Ray 应用（jotai），生成 Ray 面板项目（Ray 类似 Taro，是一个多端研发框架，编写一套代码编译到多端）

4.2 启动项目

创建后，点击工具栏在 vscode 打开项目代码：

涂鸦小程序 IDE 工具导入小程序后会自动安装依赖，并实时编译运行。

如果出现Error(MiniKit 不存在指定的版本 2.3.3)类似的错误，点击环境配置 -> Kit 管理，选择推荐的版本即可:

 

5. 小程序开发工作流程

面板小程序开发主要围绕 IoT 平台、小程序开发平台、小程序 IDE 之间进行，用一张图来概括整体流程：

 

6. 项目代码结构

以上完成了一个面板小程序的创建流程，下面进入到实际代码的开发教程。

6.1 代码目录结构

首先了解项目的目录结构：

6.2 页面路由配置

编写代码主要在 pages 文件夹中进行，创建你的页面代码，然后将路由地址配置到 src/routes.config.ts 文件中:

其他文件的说明，会在下文开发步骤中顺路提到。

7. 编写代码

7.1 使用 jotai 状态管理读取设备数据

在 IDE 中点击 在 vscode 打开 按钮，打开 vscode 编辑器，修改 src/pages/home/index.tsx 文件，清空内容，输入以下代码:

import React from "react";

import { useDevInfo } from "@ray-js/panel-sdk";
import { useAtomValue } from "jotai";
import { selectDpStateAtom } from "@/atoms";
import { View } from "@ray-js/ray";

export default () => {
  // 项目启动时，会自动拉取 IoT 平台 productId 对应的产品信息
  const devInfo = useDevInfo() || {};

  // 从 jotai 中读取 dpState 数据
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo); // 打印查看 devInfo 内容
  console.log("dpState", dpState); // 打印查看 dpState 内容

  return <View>hello world</View>;
};

7.2 IDE 调试器 console 打印日志

查看 IDE 调试 console，可以看到打印出 devInfo 内容:

7.3 devInfo 字段说明

在 IDE 调试器 console 面板中默认可以看到有很多输出，jotai 状态中内置有很多数据，其中最重要的就是 devInfo ，即设备信息（Device Information）

需要了解 devInfo 中几个重要的属性，

  1. codeIds: 一个对象，key 是 dpCode，值是 dpId
  2. devId: 设备的 id，虚拟设备会以 vdevo 开头
  3. deviceOnline: 设备是否在线
  4. dps: 一个对象，key 是 dpId，值是 DP 的状态
  5. idCodes: 一个对象，与 codeIds 相反
  6. panelConfig: 面板配置，其中 bic 是云功能配置
  7. productId: 当前设备绑定的产品
  8. schema: 产品的功能点定义，其中描述了 DP 的 code、类型、值范围属性、icon 图标
  9. state: 一个对象，key 是 dpCode，值是 DP 的状态
  10. ui: 面板的 uiId

通常代码中获取 devInfo 是通过 jotai 状态管理 API 来读取。（本文中的 DP 即 功能点，来自 IoT 平台功能定义）

7.4 获取产品功能定义（schema）

在 devInfo 中可以获取到产品的功能定义：

const schema = devInfo.schema; // 功能点定义
const state = devInfo.state; // 设备功能点状态

遍历 schema 可以获取到产品所有的 DP 功能点及属性:

schema.map(item => {
  // item.code
  // item.property
  // ...
  return <Text>{item.name}</Text>;
});

这里根据 item.property.type 就可以判断并渲染不同类型 DP 功能点的 UI 展示

 

8. 样式定义

8.1 使用 rpx 单位

Ray 开发样式使用 less 语言，支持 css module，新建文件 index.module.less，编写内容例如：

src/pages/home/index.module.less

.container {
  border-radius: 24rpx;
  background-color: #fff;
  margin-bottom: 24rpx;
}

rpx 单位是 Ray 框架提供的特有单位，能够做到不同设备上的自适应。

8.2 使用 css module 方式添加样式

在代码中使用样式：

import React from "react";

import { useDevInfo } from "@ray-js/panel-sdk";
import { View } from "@ray-js/components";
import styles from "./index.module.less"; // 注意样式引入方式

export default () => {
  const devInfo = useDevInfo() || {};

  // 添加 className
  return <View className={styles.container}>hello world</View>;
};

 

9. 渲染 DP 的 6 种基本类型

9.1 功能定义 Schema 的结构

  • 在涂鸦智能设备的功能定义中，一共有 6 种类型的 DP，分别是布尔型、数值型、枚举型、故障型、字符型、透传型。
  • 每种 DP 有不同的数值类型和范围，在面板渲染时需要根据类型和范围渲染 UI 视图。

通过 console 日志可以了解到 schema 的数据结构:

详细请参考文档 自定义功能

9.2 渲染 Schema 数据展示

src/home/index.tsx 编写输入以下代码：

import React from "react";

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { View } from "@ray-js/components";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);
  console.log("dpState", dpState);

  return (
    <View>
      {Object.keys(devInfo.schema || {}).map(dpCode => {
        // 遍历渲染每个功能点
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

重新编译，可以看到 IDE 左边面板中显示了所有 DP 的 code 及对应设备状态 ：

 

10. Bool 布尔类型功能点渲染

10.1 bool 功能点数据结构

在 IDE console 面板中，可以看到 bool 类型功能点的数据结构，例如：

{
  dptype: "obj";
  id: "39";
  type: "bool";
}

10.2 安装扩展组件库

使用工具包 @ray-js/components-ty 提供的开关组件 TySwitch 来渲染，执行以下命令，安装 Ray 提供的扩展组件库：

yarn add @ray-js/components-ty

10.3 使用开关组件 TySwitch

继续编写代码，输入以下内容：

import React from "react";

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { TySwitch } from "@ray-js/components-ty";
import { View } from "@ray-js/components";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 判断如果是 bool 类型，返回 TySwitch
        if (props.type === "bool") {
          return (
            <View>
              {dpCode}: <TySwitch checked={dpState[dpCode]} />
            </View>
          );
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

编译后，IDE 中渲染界面如下，看到所有的 bool 型 DP 已经成功渲染出了开关组件：

10.4 功能点多语言获取

DP 在功能定义时，在产品信息中已经有相应的多语言文本，这里使用 src/i18n 下的 Strings 工具获取 DP 文本，输入以下代码：

import React from "react";

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { TySwitch } from "@ray-js/components-ty";
import { View } from "@ray-js/components";
import Strings from "@/i18n";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        if (props.type === "bool") {
          // 使用 Strings.getDpLang 方法获取多语言
          return (
            <View>
              {Strings.getDpLang(dpCode)}:{" "}
              <TySwitch checked={dpState[dpCode]} />
            </View>
          );
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

再次编译查看 IDE 渲染结果，可以看到所有的 bool 类型 DP 文本都已显示出中文:

这样就完成了 Bool 类型 DP 功能点的 UI 渲染。

 

11. 使用虚拟设备调试 Bool 功能点

11.1 使用下发 DP 功能点 API

上文介绍了如何编写代码渲染 DP 点，但是要控制设备运行，还需要进行 DP 下发, 使用 ray 框架 API 下发能力，例如：

import { publishDps } from "@ray-js/api";

// 下发给 deviceId 对应设备，dps中的 key 是 dpId，value 是 dpValue。（关于 dps、dpId 的说明可以看 `编写代码` 一节）
publishDps({
  deviceId: devInfo.devId,
  dps: {
    1: true
  }
});

11.2 下发 Bool 开关功能点

现在来示例开关功能点的 DP 下发 操作，编写代码：

import React from "react";

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { TySwitch } from "@ray-js/components-ty";
import { View } from "@ray-js/components";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  const schema = devInfo.schema || {};

  const putDeviceData = (code, value) => {
    const dpId = schema[code].id;
    publishDps({
      deviceId: devInfo.devId,
      dps: {
        [dpId]: value
      }
    });
  };

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 判断如果是 bool 类型，返回 TySwitch
        if (props.type === "bool") {
          return (
            <View>
              {dpCode}:{" "}
              <TySwitch
                checked={dpState[dpCode]}
                onChange={value => putDeviceData(dpCode, value)}
              />
            </View>
          );
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

11.3 虚拟设备插件调试

IDE 编译后运行，使用虚拟设备插件进行调试，在调试器 Virtual Device 面板中，选择可视化面板，点击调试器中的开关，可以看到左边模拟器中的开关收到了 DP 上报，并做出了相同的切换动作。

 

12. Enum 枚举类型功能点渲染

12.1 enum 功能点数据结构

enum 类型 DP 点的 schema 属性配置如下：

{
  dptype: "obj";
  id: "20";
  range: ["cancel", "1h", "2h", "3h", "4h", "5h", "6h"];
  type: "enum";
}

12.2 使用弹窗组件 TyActionsheet 和列表组件 TyCell

range 中的即枚举条目，使用 @ray-js/components-ty 中的 ActionSheet 弹窗组件 + Cell 列表组件 进行渲染，编写以下代码：

import React, { useState } from "react";

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { TyActionsheet, TyCell, TySwitch } from "@ray-js/components-ty";
import { Button, ScrollView, View } from "@ray-js/components";
import Strings from "@/i18n";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  const [showEnumDp, setShowEnumDp] = useState(null);

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 这里为了文章篇幅，忽略其他类型的。本地代码可复制上节 bool 类型的到这里
        if (props.type === "enum") {
          return (
            <View>
              {Strings.getDpLang(dpCode)}:
              <Button onClick={() => setShowEnumDp(dpCode)}>
                {Strings.getDpLang(dpCode, dpState[dpCode])}
              </Button>
              <TyActionsheet
                header={Strings.getDpLang(dpCode)}
                show={showEnumDp === dpCode}
                onCancel={() => setShowEnumDp(null)}
              >
                <View style={{ overflow: "auto", height: "200rpx" }}>
                  <TyCell.Row
                    rowKey="title"
                    dataSource={props.range.map(item => ({
                      title: Strings.getDpLang(dpCode, item)
                    }))}
                  />
                </View>
              </TyActionsheet>
            </View>
          );
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

点击按钮，触发 ActionSheet 弹窗，弹窗中使用 Cell 列表组件 渲染多个枚举项，效果如下：

 

13. String 字符类型功能点渲染

13.1 string 功能点数据结构

string 类型 DP 点的 schema 属性配置如下：

{
  dptype: "obj";
  id: "20";
  type: "string";
}

13.2 使用输入组件 Input

字符型可以使用 Input 组件渲染，实现如下：

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";
import { Input } from "@ray-js/components";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  const [showEnumDp, setShowEnumDp] = useState(null);

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 这里为了文章篇幅，忽略其他类型的。本地代码可复制上节类型的到这里
        if (props.type === "string") {
          return <Input value={dpState[dpCode]} />;
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

Raw 类型 DP 一般不做渲染，如果需要可以按照 String 类型进行处理

 

14. Value 字符类型功能点渲染

14.1 value 功能点数据结构

value 类型 DP 点的 schema 属性配置如下：

{
  dptype: "obj";
  id: "18";
  max: 100;
  min: 0;
  scale: 0;
  step: 1;
  type: "value";
  unit: "%";
}

14.2 使用滑动条组件 Slider

其中定义了数值范围和单位，使用 Slider 组件进行渲染:

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";

import { Slider } from "@ray-js/components";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  const [showEnumDp, setShowEnumDp] = useState(null);

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 这里为了文章篇幅，忽略其他类型的。本地代码可复制上节类型的到这里
        if (props.type === "value") {
          return (
            <View>
              {Strings.getDpLang(dpCode)}:
              <Slider
                step={props?.step}
                max={props?.max}
                min={props?.min}
                value={dpState[dpCode]}
              />
            </View>
          );
        }
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

Slider 组件是一个滑动条组件，可以根据数值范围进行约束，IDE 渲染如下，所有 value 类型 DP 都渲染出了滑动条：

 

15. Bitmap 故障类型功能点渲染

15.1 bitmap 功能点数据结构

bitmap 类型一般用作故障上报，属性配置如下:

{
  dptype: "obj";
  id: "22";
  label: ["sensor_fault", "temp_fault"];
  maxlen: 2;
  type: "bitmap";
}

15.2 使用消息提醒组件 Notification

故障型 DP 使用弹窗渲染，这里使用 @ray-js/ray-components-plus 提供的 Notification 来实现：

import { useAtomValue } from "jotai";
import { useDevInfo } from "@ray-js/panel-sdk";
import { selectDpStateAtom } from "@/atoms";

import { Notification } from "@ray-js/ray-components-plus";

export default () => {
  const devInfo = useDevInfo() || {};
  const dpState = useAtomValue(selectDpStateAtom) || {};

  console.log("devInfo", devInfo);

  const schema = devInfo.schema || {};

  // 弹窗消息在 useEffect 中进行
  useEffect(() => {
    Object.keys(schema).forEach(dpCode => {
      const props = schema[dpCode];
      if (props.type === "bitmap") {
        Notification.show({
          message: Strings.getFaultStrings(dpCode, dpState[dpCode]),
          icon: "warning"
        });
      }
    });
  }, [schema, dpState]);

  return (
    <View>
      {Object.keys(schema).map(dpCode => {
        const props = schema[dpCode];
        // 这里为了文章篇幅，忽略其他类型的。本地代码可复制上节类型的到这里
        return (
          <View key={dpCode}>
            {dpCode}: {dpState[dpCode]}
          </View>
        );
      })}
    </View>
  );
};

bitmap 类型通常用来做故障上报，以弹窗消息提示，所以需要在 useEffect 中遍历 schema 找到 bitmap 类型并弹窗提醒。

 

16. 自定义功能点

16.1 IoT 平台添加自定义功能点

以上 schema 中是家电类目自带的标准 DP 点，我们还可以增加自定义的 DP，打开 IoT 平台产品详情 -> 功能定义 -> 自定义功能 一栏。

16.2 自定义功能点属性配置

点击添加功能，新建一个 bool 型 DP：

16.3 IDE 刷新拉取自定义功能点配置

然后回到 IDE 中，点击编译按钮刷新面板，可以看到渲染出了我们新增加的一个 DP 点：

 

17. 虚拟设备调试

17.1 虚拟设备解决什么问题？

面板运行时需要获取设备信息来显示设备的运行状态，在开发阶段，如果没有真实的智能硬件设备，我们可以借助虚拟设备来辅助调试，可以达到和真实设备一样的效果。虚拟设备和真实设备对于面板小程序来说可以是等效的，其关系如下图所示：

17.2 授权 IDE 登录

在使用虚拟设备前，请先确认已授权登录态，点击右上角登录，使用智能生活 App 扫描二维码授权登录。

17.3 App 扫码创建虚拟设备

登录后进入万能面板项目，点击调试工具 Virtual Device，使用智能生活 App 扫码创建虚拟设备：

17.4 操作指南

虚拟设备面板中分为 3 个区块，左边是兜底面板用于展示当前产品的 DP 功能点，右侧是虚拟设备 DP 控制列表，可以改变 DP 状态然后点击上报按钮，下方是 Log 面板用于输出 MQTT 日志。点击"可视化面板"，切换到兜底面板视图，与控制面板功能相同，更加直观的展现产品功能点。

17.5 调试我们编写的代码！

下面来调试我们刚编写的代码：

 

18. 真机调试

18.1 获取虚拟设备 ID

在虚拟设备界面右侧 -> 设备信息，点击 deviceId 右侧的复制按钮

18.2 设置真机调试参数

点击编译参数设置，按照格式填入真机调试参数。 例如：deviceId=vdevo165398364416684

18.3 App 扫码打开调试器

设置好编译参数后，点击真机调试按钮（真机需要前往下载智能生活 App）

使用智能生活 App 扫描二维码，打开并进入小程序面板，可以在真机上进行调试万能面板。

 

19. 示例开源代码

到此你已经熟悉了 6 种 DP 点的渲染及下发，附上万能面板代码开源地址：

panel-universal

经过样式优化后的万能面板展示：

 

20. 小程序投放流程

20.1 上传源码包

在 IDE 中完成调试后，点击上传源码按钮，输入版本号及说明，点击上传预览包

上传完成后，在小程序开发者平台版本管理中可以看到已经上传的版本列表

20.2 添加预览包白名单

在上传完成源码包后，在小程序开发者平台 -> 版本管理中，选择需要预发布的版本，设为体验版：

点击白名单页面，添加自己智能生活 App 的账号：

添加完后，可以点击 版本管理 -> 体验二维码，查看小程序码，使用智能生活 App 扫码预览小程序。

20.3 审核上线

非官方主体的面板小程序，在提交审核前需要完善 IoT 平台展示信息。其余审核上线注意项可参考：上线审核。

 

21. 结束

  • 恭喜你 🎉 完成了本教程的学习！
  • 立即开发自己的项目面板。
IoT砖家涂拉拉
关注
  • 31
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CPU-Ray-Tracer:全参数射线追踪器
05-01
CPU射线追踪器 项目介绍 该项目的目标是用C ++创建具有许多实用功能的高效光线追踪器。 实现功能包括： POV-Ray文件解析 Blinn-Phong BRDF 库克·托伦斯BRDF 折射和反射 对象转换 边界体积层次结构 蒙特卡洛全球照明 纹理和法线贴图 双线性插值 多线程 用法 建造 在环境变量GLM_INCLUDE_DIR下安装 克隆项目 在项目目录中运行mkdir buid; cd build; cmake ..; make mkdir buid; cd build; cmake ..; make mkdir buid; cd build; cmake ..; make或使用CMake GUI进行构建 跑步 支持的povray文件可以在/ res /中找到 命令行参数： sceneinfo <input_file.pov> -在不渲染的情况下打印出povray场景信息
MonoGameRayTracer:使用MonoGame的WIP raytracer
05-18
MonoGame光线追踪器 使用MonoGame用C＃编写的非常完善的ray跟踪器。 控制项 PageUp：提高质量 PageDown：降低质量 插入：增加深度 删除：减小深度 Ctrl + S：保存屏幕截图 F1：缩小比例 F2：高档 F10：切换用户界面 F11：实时切换 F12：强制渲染（禁用实时性时） 执照 该项目是根据MIT许可证发布的，请花些时间阅读LICENSE文件以获取更多信息。
Laravel开发-ray-emitter
08-28
Laravel开发-ray-emitter 使用Laravel应用程序中的事件源和CQR深入领域驱动的设计。
muzero-ray：使用ray库实现的MuZero for Atari
02-14
学习玩雅达利 这是使用光线分布式处理库的MuZero的实现。 它旨在玩Atari游戏Breakout。 不幸的是，尽管训练将继续进行，但是该模型无法学习。 显然存在未发现的错误或错误的超参数。 超参数在run.py muzero/muzero.py中设置，并在run.py覆盖。 设置 make venv 跑 首先，打开run.py并编辑ray配置，以具有所需的GPU，CPU和内存数量。 目前，它设置为在具有12个内核和64 GB RAM的3 GPU机器上运行。 然后从此仓库的根目录运行 source venv/bin/activate python run.py --logdir ./results --loglevel error breakout Ray仪表板将在。 如果在服务器上运行代码，请运行ssh -L 8265:localhost:8265 username@server以
node-ray：使用Ray调试NodeJS代码以更快地解决问题
02-13
node-ray 节点射线 用Ray调试NodeJS代码以更快地解决问题 该软件包可以安装在任何NodeJS，ES6 +或TypeScript应用程序中，以将消息发送到。 安装 使用npm安装： npm install node-ray 或纱线： yarn add node-ray 可用环境 node-ray提供了多种变体，可让您在NodeJS或浏览器环境中使用它。 节点JS 在NodeJS环境（默认）中使用时，请像通常那样导入软件包： // es module import: import { ray } from 'node-ray' ; // commonjs import: const ray = require ( 'node-ray' ) . ray ; 浏览器捆绑 如果您要捆绑脚本以在浏览器环境中使用（即使用webpack） ，请导入/web变体： // es m
Ray core的基础知识、使用实例以及集群搭建
hp884279483的博客
05-24 2048
一些学习ray的心得以及坑
Ray介绍
caoli4608的博客
10-14 1393
Ray概述
Ray 简介
BerMaker
06-29 2288
Ray 文章目录RayRayMeetup参考 Ray Ray 是 UC Berkeley riseLab (前身是开发 Spark/Mesos 等的AMPLab实验室) 针对机器学习领域开发的一种新的分布式计算框架。 Ray 是一个面向大规模机器学习和增强学习应用的高性能分布式执行框架。它通过在全局控制存储中抽象系统的控制状态并使所有其他组件保持无状态来实现可伸缩性和容错性。它使用共享内存分布式...
Ray入门指南（2）----Ray API
weixin_43255962的博客
04-02 1万+
Ray API ray.init(redis_address=None, num_cpus=None, num_gpus=None, resources=None, object_store_memory=None, redis_max_memory=None, log_to_driver=True, node_ip_address=None, object_id_seed=None, local...
Python爬虫开发学习全教程第二版，爆肝十万字【建议收藏】
热门推荐
五包辣条的博客
10-17 4万+
大家好，我是辣条。 上次整理的爬虫教程反响不错，但是还是有小伙伴表示不够细致，今天带了升级版，全文很长，建议先收藏下来。 一、爬虫基础 爬虫概述 知识点： 了解 爬虫的概念 了解 爬虫的作用 了解 爬虫的分类 掌握 爬虫的流程 1. 爬虫的概念 模拟浏览器，发送请求，获取响应 网络爬虫（又被称为网页蜘蛛，网络机器人）就是模拟客户端(主要指浏览器)发送网络请求，接收请求响应，一种按照一定的规则，自动地抓取互联网信息的程序。 原则上,只要是客户端(浏
Docker实践：使用Docker搭建个人开发环境
MAVER1CK的博客
08-10 7405
my_dev是镜像名称，latest是标签，可以理解为镜像的分支或版本，就像git中的master一样，镜像的默认标签为latest，标签可以自定义，比如my_dev:v1。my_dev是镜像名称，latest是标签，可以理解为镜像的分支或版本，就像git中的master一样，镜像的默认标签为latest，标签可以自定义，比如my_dev:v1。-o=my_dev.tar指定了tar包的生成路径为当前文件夹且生成的包的名称为my_dev.tar，最后的参数my_dev是容器名称。......
分布式应用程序的开源框架ray
天道酬勤
07-10 644
Ray 是一款用于构建分布式应用程序的开源框架。它提供了一种简单且高效的方式来编写并行和分布式应用程序，尤其擅长处理大规模数据和计算密集型任务。Ray 的设计目标是使开发人员能够轻松地利用分布式计算的优势，而无需担心复杂的底层细节。
解析分布式应用框架Ray架构源码
华为云官方博客
03-15 2311
摘要：Ray的定位是分布式应用框架，主要目标是使能分布式应用的开发和运行。 Ray是UC Berkeley大学 RISE lab（前AMP lab） 2017年12月 开源的新一代分布式应用框架（刚发布的时候定位是高性能分布式计算框架，20年中修改定位为分布式应用框架），通过一套引擎解决复杂场景问题，通过动态计算及状态共享提高效率，实现研发、运行时、容灾一体化 Ray架构解析 业务目标 Ray的定位是分布式应用框架，主要目标是使能分布式应用的开发和运行。 业务场景 具体的粗粒度使用场景包括 弹
Ray: A Distributed Framework for Emerging AI Applications
xl.zhang的博客
02-15 7213
Ray是UC Berkeley RISELab新推出的高性能分布式执行框架，目前还处于实验室阶段，具有比Spark更优秀的性能，有望在将来取代Spark。本篇博客是对该论文的简单翻译，如有翻译不妥的地方，欢迎指正。 原论文 pdf Ray开发手册 Ray-Guide 项目下载 Ray 0 简介 下一代AI应用程序将不断与环境交互，并从这些交互中学习。这些应用程序在性能和灵活性方面...
python ray分布式_取代 Python 多进程！伯克利开源分布式框架 Ray
weixin_39946313的博客
12-15 367
Ray 由伯克利开源，是一个用于并行计算和分布式 Python 开发的开源项目。本文将介绍如何使用 Ray 轻松构建可从笔记本电脑扩展到大型集群的应用程序。并行和分布式计算是现代应用程序的主要内容。我们需要利用多个核心或多台机器来加速应用程序或大规模运行它们。网络爬虫和搜索所使用的基础设施并不是在某人笔记本电脑上运行的单线程程序，而是相互通信和交互的服务的集合。云计算承诺在所有维度上(内存、计算、...
基于云开发快速搭建智能名片小程序
最新发布
mon_star°的博客
05-20 345
熏风徐来，麦穗摇曳；麦类等夏熟作物生长旺盛，籽粒灌浆渐趋饱满，但尚未完全成熟，故称“小满”。今日小满，基于云开发快速搭建智能名片小程序，发文以记录输入和输出过程。
【源码+文档+调试讲解】实习记录小程序
2401_84408400的博客
05-14 1198
摘 要随着社会的发展，社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。本文以实际运用为开发背景，运用软件工程原理和开发方法，它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对实习记录进行需求分析，得出实习记录主要功能。接着对实习记录进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等；详细设计主要包括实习记录。
原生小程序项目总结--时尚妈咪
yc1425869600的博客
05-17 318
OK，先记录这些，记录的意义在于有些功能点是从网上翻阅的，那如果以后在遇到且别人的文章被删除，可以打开自己的csdn快速解决当前问题。这里用到的是wx.navigateToMiniProgram。1、首先第一步要去微信公众平台去申请使用api资格。2、申请成功后要现在app.json声明。创建公共request.js。在页面js引入并使用。
【全开源】预约咨询小程序基于Fastadmin+ThinkPHP和Uniapp
2401_84413903的博客
05-13 305
基于Fastadmin+ThinkPHP和Uniapp开发的预约咨询系统，可应用于心理咨询、问诊、法律咨询等咨询类场景。
使用ray监视本地cpu
06-06
您可以使用ray来监视本地CPU的使用情况。以下是一个简单的示例代码： ```python import ray import psutil ray.init() while True: cpu_percent = psutil.cpu_percent() print("Current CPU usage: {}%".format...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值