1. 安装 Conda

如果你还没有安装 Conda,可以通过以下两种方式之一进行安装:

Anaconda:一个包含 Conda、Python 和许多常用数据科学库的发行版。你可以从 Anaconda 官网 下载并安装它。

Miniconda:一个更轻量级的发行版,只包含 Conda 和必要的 Python 组件,你可以使用 Conda 安装其他库。可以从 Miniconda 官网 下载并安装它。

2. 创建新的 Conda 环境

为了隔离项目依赖,最好为每个项目创建一个新的 Conda 环境。使用以下命令创建一个新的环境:

conda create -n my_ml_env python=3.12

这里 my_ml_env 是你为环境起的名字,python=3.12 指定了 Python 的版本。你可以根据需要选择不同的 Python 版本。

3. 激活环境

创建环境后,使用以下命令激活环境:

conda activate my_ml_env

4. 安装机器学习库

在激活的环境中,你可以安装所需的机器学习库。Conda 允许你从 Anaconda 仓库安装库,这些库已经为科学计算进行了优化。以下是一些常用的机器学习库:

NumPy:基础数学库。 Pandas:数据分析库。 Matplotlib:绘图库。 Scikit-learn:机器学习库。 TensorFlow 或 PyTorch:深度学习库。 安装这些库的命令如下:

conda install numpy pandas matplotlib scikit-learn
conda install tensorflow  # 或者 conda install pytorch

5. 管理环境

查看所有环境:

conda env list

退出环境:

conda deactivate

删除环境:

conda env remove -n my_ml_env
  1. 更新和升级 更新环境中的所有包:
conda update --all

升级 Conda:

conda update conda

6. 使用 YML 文件管理环境

Conda 允许你使用 YML 文件来管理环境,这样可以更容易地复制和共享环境配置。创建一个 YML 文件,例如 environment.yml,并添加以下内容:

name: my_ml_env
dependencies:
  - python=3.8
  - numpy
  - pandas
  - matplotlib
  - scikit-learn
  - tensorflow
  - jupyter

然后,使用以下命令创建环境:

conda env create -f environment.yml

这将根据 YML 文件中的依赖关系创建环境。

通过这些步骤,你可以使用 Conda 为机器学习项目创建一个完整的开发环境,包括必要的库和工具。Conda 的强大之处在于其能够管理复杂的依赖关系,并且可以轻松地在不同环境之间切换。

patch libs

ref

    1. install patch-package
npm i patch-package --save-dev
    1. modify the source code in third party libs
    1. generate the .patch
npx patch-package @mantine/core
✔ Created file patches/@mantine+core+7.2.2.patch

remove old source and reinstall

rm -rf node_modules/@mantine/core
bun install 
// npm install

jest

jest can not found canvas

npm i jest-canvas-mock --dev

and add 'canvas' : 'jest-canvas-mock' to moduleNameMapper in jest.config.js.

jest css, svg ...

module.exports = {
    "roots": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    "modulePaths": [
        "<rootDir>",
        "/Users/shezw/dev/web/react/easyvgl-editor"
    ],
    // "moduleDirectories": [
        // "node_modules"
    // ],
    moduleNameMapper: {
        'canvas':'jest-canvas-mock',
        "@mantine/core/styles.css": "<rootDir>/node_modules/@mantine/core/esm/index.css",
        // "@mantine/core/(.*).css": "<rootDir>/node_modules/@mantine/core/esm/$1.css",
    },
    transform: {
        "^.+\\.[t|j]sx?$": "babel-jest",
        "^.+\\App.css$": "jest-transform-css",
        ".+\\.(styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub"
    },
}

jest test throw case

Use a clouse function wrap the test case and check if the result throw an Error.

test('Convert Color to RGBA', ()=>{

    const { toRGBA } = colorConvertor();

    expect( ()=>{ toRGBA("#333444",1000) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#333444",-1) } ).toThrow(RangeError);
    expect( ()=>{ toRGBA("#331",50) } ).toThrow(Error);

    expect( toRGBA('#ff3366',100) ).toBe('ff3366ff');
})

jest wrong environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

https://jestjs.io/docs/configuration#testenvironment-string

https://jestjs.io/docs/tutorial-react

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Jest test fails with "window is not defined"

add globals window to jest.config.js

module.exports = {
    globals: {
        "window": {}
    }
}

TypeError: Cannot read properties of undefined (reading 'html')

npm install --dev jest-environment-jsdom

jsdom environment

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined
/**
 * @jest-environment jsdom
 */
import '../jest.mock'
import React from 'react';
import {cleanup, render, screen} from '@testing-library/react';
import App from './App';


afterEach(cleanup);
test('Render App', () => {
    // ...
}

Class constructor Stage cannot be invoked without 'new'

use ts-jest instead of jest


TypeError: window.matchMedia is not a function

https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

src/jest.mock.js

Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
    })),
});

xx.test.tsx

import '../jest.mock'

git log --all -- ${dirname}

# choose the COMMIT_TAG that removed the folder 

git checkout ${COMMIT_TAG}^ ${pathtodir}${dirname}

# 重置当前分支的 HEAD 指针到指定的提交
git reset ${COMMIT_TAG} -- ${pathtodir}${dirname}


git revert  -n ${COMMIT_TAG}
git commit -m "revert this commit"

Sometimes, we need to run a script to modify saveral files at once.

We can use xargs on shell tube.

ls | xargs echo 

As the command before, xargs run echo and use the result from ls.

this example shows how to use xargs modify all index.html that change *.js to *.js?ver=xxx

verStr="1.0.0"

# set version for  .css .js files
find -name "index.html" | xargs -i cp {} {}.bak 

find -name "index.html" | xargs sed -i 's@\.js.*\"@.js?ver='${verStr}'\"@g'

# reset files
# find -name "index.html" | xargs -i mv {}.bak {} 

在进行嵌入式开发的时候,文件传输是比较麻烦的 在调试过程中,最方便的方式是使用nfs进行文件目录共享 记录一下在设备和ubuntu之间共享的方法

在ubuntu上开启nfs共享

1. 安装和开启nfs-server服务

sudo apt install nfs-kernel-server

2. 配置共享文件目录

此时可以创建一个新目录 或者使用 开发目录来进行共享,这里以 /home/my/dev 为例

sudo vi /etc/exports

添加

/home/my/dev  192.168.*(rw,sync,no_root_squash)

如果出现Protocol not supported 可以在 /etc/default/nfs-kernel-server末尾添加

PRCNFSDORTS="--nfs-version 2,3,4 --debug --syslog"

3. 刷新服务

sudo systemctl restart nfs-server.service

4. 检查状态

sudo exportfs -v

前言

最近打算用树莓派做为智能显示驱动来搭配手头的一台咖啡机来实现一个真正的智能咖啡机,但是搭配ubuntu一类操作系统开机速度太慢了,找了很久也没有发现可以在数秒之内开机的树莓派映像,所以一直在寻找如何能够构建一个最小的操作系统。

buildroot

问题记录

  1. 直接使用buildroot官方版本的 defconfig文件 无法打开显卡驱动 系统大小约100M 可以通过fbdev的驱动显示画面,但是没有gpu的情况下,整个画面性能非常糟糕。 此时,尝试使用weston+drm+egl的方式,失败报错。 ls /dev/dri 无法找到节点 尝试使用insmod 加载 drm.ko 等模块,无效 经过比较 buildroot的defconfg和 raspberry git上提供的不一样,改用树莓派提供的buildroot

  2. 使用raspberry提供的buildroot版本依然不能打开 drm 此时显卡驱动是以模块形式编译需要通过模块加载启动

    modprobe i2c_brcmstb
    modprobe vc4
    modprobe v3d
    modprobe snd_soc_hdmi_codec
  3. 成功加载drm和 v3d v4c后 ,运行weston

    [00:24:19.786] warning: no input devices on entering Weston. Possible causes:
         - no permissions to read /dev/input/event*
         - seats misconfigured (Weston backend option 'seat', udev device property ID_SEAT)

驱动解决后,无法创建gl context

libGL: Can't open configuration file /etc/drirc: No such file or directory.
libGL: Can't open configuration file /root/.drirc: No such file or directory.

daisyUI

https://daisyui.com daisyUI — Tailwind CSS Components WebdaisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file. Install daisyUI as a dev dependency and use the class names just like any …

Chakra UI

https://chakra-ui.com Chakra UI - A simple, modular and accessible component … WebCreate accessible React apps. with speed. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

mantine (UI)

https://mantine.dev/

Global web icon

react-icons.github.io https://react-icons.github.io/react-icons React Icons - GitHub Pages WebReact Icons. Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. …

tabler-icons

https://tabler-icons.io/

Over 4850 pixel-perfect icons for web design Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.

Introduction to Immer

GitHub Pages https://immerjs.github.io › immer Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. ‎React & Immer · ‎Using produce · ‎Supporting immer · ‎Installation

hooks

immer

https://zhuanlan.zhihu.com/p/639089491

  1. use-immer库的高级用法 下面我们将介绍use-immer库的高级用法,包括:

3.1 使用produce函数 produce函数是use-immer库中最重要的函数之一。它可以帮助我们更加方便地管理和更新JavaScript对象和数组。下面是一个简单的例子:

import { produce } from 'immer';
const state = {
  todos: [
    { id: 1, text: 'Learn React', completed: true },
    { id: 2, text: 'Learn use-immer', completed: false },
  ],
};
const nextState = produce(state, draftState => {
  draftState.todos.push({ id: 3, text: 'Learn Redux', completed: false });
});
console.log(nextState.todos);

在上面的例子中,我们使用了produce函数来更新state中的todos数组。我们可以看到,使用produce函数可以帮助我们更加方便地更新JavaScript对象和数组。


react snippets

a quick way to create a code template for a component or etc...

rcc

refs

ref is a reference to a element but ref maybe null

react-hook-form

transform several properties

const obj = {
    className: "none",
    size: 14,
    color: "red"
}

<Comp
    { ... obj }
/>

equals

<Comp
    className={obj.className}
    size={obj.size}
    color={obj.color}
/>

... means    loop the obj and set each key to the value

zod , joi , ... validation libs

import { z } from 'zod';

// create the limites
const schema = z.object({
    name: z.string().min(3, {"message":"at least 3 characters."}),
    age: z.number({invalid_type_error:"required"}).min(18) // the api shoud be mobile and ...
})

// create the  interface for data
type FormData = Formz.infer<typeof schema>;
@hookform/resolvers
const {
    register,
    handleSubmit,
    formState: {errors,isValid}
} = 
useForm<FormData>( { resolver: zodResolver(schema) } );
useEffect()

useEffect is similar to a "OnRendered" Callback when JSX modules is rendered then react call this function

finally()

the finally method will be called both succeed or failed when fetch on axios

?. optional link

seemly to swift syntax

obj?.type means obj && obj.type

Abort Signal

Mozilla Developer https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal AbortSignal - Web APIs | MDN WebAug 4, 2023 · English (US) AbortSignal. The AbortSignal interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it …

const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

Array.reduce()

Mozilla Developer https://developer.mozilla.org/.../Array/Reduce Array.prototype.reduce() - JavaScript | MDN - MDN Web … WebSep 14, 2023 · Array.prototype.reduce () Try it. The reducer walks through the array element-by-element, at each step adding the current array value to the... Syntax.

JavaScript Array filter()

WebThe filter () method creates a new array filled with elements that pass a test provided by a function. The filter () method does not execute the function for empty elements.

随着智能化在生活的方方面面深入,家电设备上的智能化需求也是在不断增长。 同时伴随着芯片行业的飞速发展、芯片的国产化进程不断推进,在家用电器上内嵌一块显示屏、并且提供智能化的设备服务已经成为一个行业趋势。

本文从需求、行业特性、技术架构几个角度试图探索、分析和预测一下家电行业的智能化趋势。


需求:智能家电的本质是什么?

科技的世俗目的是扩展人类的能力边界,而计算机则是大大降低了人脑在记忆、数据处理方面的心智成本,“智能”则是站在体验的角度,基于一个高性能设备,通过各类交互和流程设计,令计算机(设备)的使用更符合人类的直觉感观体验,能够让用户更加“随心所欲”操控计算机的概括。

a. 其智能化的程度主要体现在用户通过直觉体验能够对于设备操作的精细度以及完成复杂的组合式目标的便捷和直观程度上。

比起智能手机、汽车与家电的相似性更高,都是在可以完全通过机械操作完成设备的工作。其智能化的程度主要体现在用户通过直觉体验能够对于设备操作的精细度以及完成复杂的组合式目标的便捷和直观程度上。(这里的智能实际上是设备本身替代和减少人类思考决策和操作而形成的机器智能的感观体验,而并不是设备本身一定具有切实的AI能力)

- 阅读剩余部分 -

lv_draw_sw_img_decoded

img_decoded 是用于解码图片并且将图片绘制到指定buffer区域。

LV_ATTRIBUTE_FAST_MEM 
void lv_draw_sw_img_decoded
(
struct _lv_draw_ctx_t * draw_ctx,
const lv_draw_img_dsc_t * draw_dsc,
const lv_area_t * coords, 
const uint8_t * src_buf, 
lv_img_cf_t cf
)

/**
    struct _lv_draw_ctx_t * draw_ctx        // 绘制上下文
    const lv_draw_img_dsc_t * draw_dsc      // 图像素材绘制描述
    const lv_area_t * coords                // 绘制区(图像在output buffer上的绝对定位)
    const uint8_t * src_buf                  // 图像buffer
    lv_img_cf_t cf                          // 图像色彩格式
**/

绘制上下文中,与当前绘制图像相关的属性:

typedef struct _lv_draw_ctx_t  {
    /**
     *  Pointer to a buffer to draw into
     */
    void * buf;

    /**
     * The position and size of `buf` (absolute coordinates)
     */
    lv_area_t * buf_area;

    /**
     * The current clip area with absolute coordinates, always the same or smaller than `buf_area`
     */
    const lv_area_t * clip_area;

} lv_draw_ctx_t;

与图像本身的绘制效果相关的:

typedef struct {

    int16_t angle;
    uint16_t zoom;
    lv_point_t pivot;

    lv_color_t recolor;
    lv_opa_t recolor_opa;

    lv_opa_t opa;
    lv_blend_mode_t blend_mode : 4;

    int32_t frame_id;
    uint8_t antialias       : 1;
} lv_draw_img_dsc_t;