分类存档: Develop

Monaco Editor 实战:添加代码折叠功能

在之前的文章《4 步为 Monaco Editor 添加自定义语言支持》中,我们已经学会了如何使用 monaco-editor 来实现一个支持自定义编程语言的编辑器,但是作为一个标准的代码编辑器,我们还需要它支持代码块折叠功能,这样在编辑内容比较多的代码文件时,可以方便的将其中一些代码块折叠起来,使得在阅读代码时更容易理解整体代码结构。

这一次我们就来看看如何给 Monaco Editor 增加代码块折叠功能。

官方示例

在 Monaco Editor Playground 的 Folding Provider Example 示例中,可以看到如何给一个自定义语言添加代码折叠支持:

monaco.languages.registerFoldingRangeProvider("foldLanguage", {
    provideFoldingRanges: function (model, context, token) {
        return [
            // comment1
            {
                start: 5,
                end: 7,
                kind: monaco.languages.FoldingRangeKind.Comment,
            },
      // ...
    ]
  }
});

可以看到,只需要在注册自定义语言后,再注册一个 foldingRangeProvider …

阅读全文 »

Using INA219 with Arduino to Measure Voltage, Current, and Power in a Circuit

Recently, while working on a DIY project, I needed to measure voltage, current, and power in the circuit. After comparing several chips, I decided to use the INA219 chip from Texas Instruments. Coincidentally, I had previously used an INA219 module to build a simple power meter, which made me …

阅读全文 »

在 Arduino 中使用 INA219 测量电路中电压、电流和功率

前段时间在做一个 DIY 产品的时候,会需要测量电路中电压、电流和功率等数据,在找了一些芯片对比后最终选择了德州仪器的 INA219 芯片,刚好之前也使用过 INA219 模块做了一个简单的功率计,相对还算熟悉。

INA219 的官方介绍如下:

INA219 是一款具备 I2C 或 SMBUS 兼容接口的分流器 和功率监测计。该器件监测分流器电压降和总线电源电 压,转换次数和滤波选项可通过编程设定。可编程校准 值与内部乘法器相结合,支持直接读取电流值(单位: 安培)。通过附加乘法寄存器可计算功率(单位: 瓦)。I2C 或 SMBUS 兼容接口 具有 16 个可编程地 址。

INA219 的使用还是比较简单的,直接通过 I2C 总线即可读取数据,并且支持最大 26V 测量电压,12 位精度,在大多数场合都满足需求了。在立创开源平台,也能看到很多 USB 功率计也是使用的这款芯片。

原理图

using-ina219-in-arduino-schematic

INA219 只需要很少的外围元件即可工作,给电源添加一个旁路电容,再加上一个采样电阻,即可完成。

A0、A1 用于指定通过 I2C 与 INA219 通信时,INA219 的地址,如果电路中只有一个 INA219 芯片,可以直接将这两个引脚接地即可。…

阅读全文 »

ESP32-S3 开发板配套物联网扩展板的设计与制作

在完成之前的 《ESP32-S3 最小开发板》 之后,想到很长一段时间,都是用 ESP32-S3 做物联网相关的应用。在这过程中,又会碰到一些会经常重复使用的模块,例如 LCD 屏幕、I2C 外设等,这个时候如果有一个现成的扩展板,就可以省去很多通过杜邦线连接模块的时间,提升应用开发效率。

在做完 ESP32-S3 最小开发板之后,我就根据自己的需求,并且参考了一些其他扩展板,开始设计一个主要用于物联网领域的扩展板。

设计目标

和 ESP32-S3 最小开发板一样,为了使初学者更容易使用,这次的扩展板也会基于容易焊接的前提去规划,主要使用 0805 元件和 2.54mm 排母插件,其中多数元件以模块的方式来引入,这样可以在淘宝购买对应的模块直插,避免在模块的电路设计上花费太多时间。

整个扩展板以输入模块、输出模块和总线模块三部分组成,对应到物联网开发中的大多数展示以及交互场景。

输入模块

  • 5 个用户按键
    • 接受用户输入,可以作为方向键,也可以模拟鼠标移动和按下操作
  • 多功能按键
    • 常见的手持设备,会提供一个多功能按键来实现向上、向下、按压三种操作
  • TF 读卡器
    • 用于数据文件的保存和读取

输出模块

  • LCD 屏幕
    • 显示界面和数据
  • WS2812 LED
    • 状态指示,灯光效果

总线模块

  • I2C 总线
    • 常见传感器模块都支持 I2C 通信,需要支持多个 I2C 模块同时连接
  • SPI 总线
    • 和屏幕或者 TF 读卡器模块进行通信


阅读全文 »

做一个 ESP32-S3 开发板

接触立创 EDA 和嘉立创 PCB 打样服务之后,一直想从头设计一块 PCB,刚好前段时间立创硬件开源平台搞活动,就又薅了一把羊毛,蹭了立创商城的器件券,和嘉立创的打样券,相当于费用全免,做了一块开发板。

因为一直在玩 IoT,因此 MCU 就选择了最熟悉的乐鑫 ESP32-S3,这款 MCU 内置了 Wi-Fi 和蓝牙,官方支持 Arduino 开发框架,GPIO 数量相对前代 ESP8266 也多了很多,而且支持了 PSRAM,在一些高内存应用场合也可以放心使用了。看在免费的情况下,直接选了顶配 N16R8 型号,16MB Flash + 8MB PSRAM 足够应对绝大部分场景。

需求

除开嘉立创搞活动这个原因,在设计这款开发板之前,我也在淘宝上买过 ESP32-S3 的开发板,但是在使用过程中总会碰到各种不满意的地方,因此借这个机会就一起解决了。

宽度要小

在平时做原型验证的时候,会经常要使用到面包板,像下面这种常见的款式。

esp32devkit-breadboard

但是淘宝上常见的 ESP32-S3 开发板的宽度都稍微宽了一些,在插到这个面包板上之后,左右两侧的 GPIO 只能有一侧可以露出接线孔,这样在使用杜邦线或者跳线连接的时候,就非常不方便。

双 USB Type-C 接口

ESP32 系列在 ESP32-S2 之后, 就已经增加了对 USB 设备驱动的支持,可以通过 …

阅读全文 »

iOS 使用推送通知更新 Dynamic Island 和 Live Activity

随着 iOS 16 推出的 Live Activity 以及 iOS 16.1 正式支持的 Dynamic Island 已经可以提交 App Store 发布了,最近在测试 Live Activity 的后台更新碰到一些问题,在这里记录一下。

什么是 Live Activity 和 Dynamic Island

Live Activity 和 Dynamic Island 其实是作为同一个 Widget 的两种形态存在的,它们使用 ActivityKit 中的 ActivityConfiguration 同时进行配置,在拥有 Dynamic Island 支持的 iPhone 14 Pro 和 iPhone 14 Pro Max 上可以正常显示 Dynamic …

阅读全文 »

5 个原因让我重写 Mac Catalyst 应用

我写了一个名为 MermaidEditor 的 iOS App,这是一个用于编写 mermaid js 图表的编辑器,它使用 WKWebVIew 加载一个monaco 编辑器来编辑 mermaid js 图图的源代码,从而支持语法高亮和关键词自动完成。

在发布了 iOS 版本的 MermaidEditor 之后,我想把这个应用适配到 macOS 上,我认为在这里使用 Mac Catalyst 是一个很好的场景,这是苹果在 WWDC19 开始提供的一项技术,可以让我们的 iPad 应用在 macOS上 运行,只需要在 Xcode 中选中一个复选框就行了。

所以我用 Mac Catalyst 为 macOS 重新编译了 MermaidEditor,并向用户发布。但在一些版本之后,我决定用原生代码重写它。

为什么呢?

最低 macOS 版本要求

Mac Catalyst 要求的最低 macOS 部署目标版本是 macOS 10.15,所以如果我们的应用程序的目标版本早于 …

阅读全文 »

4 步为 Monaco Editor 添加自定义语言支持

在很多需要为用户提供编写代码能力的服务中,我们需要给用户提供一下能力足够强大的编辑器,这样可以使得用户在编写代码时更顺畅,减少查询文档次数,降低出错概率,提升编码效率。

而想要提供这些能力,就需要一个足够强大的代码编辑器,并且为它添加我们自定义语言的支持,这样用户可以在语法高亮、自动完成等方面得到足够的支持。

为什么用 Monaco Editor?

Visual Studio Code 是世界一个非常流行的代码编辑器,而 Monaco Editor 是用于构建 VSCode 核心功能的代码编辑器,它提供了相当多的功能,用于实现各种代码编辑能力。并且微软为 Monaco Editor 提供了单独的项目,单独的打包脚本,因此我们可以轻易的将 Monaco Editor 集成到我们自己的 Web 应用中。

Monaco Editor 已经提供了一系列的基础设施,用于完成对自定义语言的支持,只需要通过很小的步骤,我们就可以搭建一个属于自己语言的代码编辑器。

那么,这就开始吧!

Step 1. 注册一个语言

这里将不再赘述如何将 Monaco Editor 引入 Web 应用,在 Monaco Editor 的仓库提供了使用各种方式集成 Monaco Editor 的说明。

为了让 Monaco Editor 知道我们将要添加一种自定义语言的支持,首先需要注册一个自定义语言标识,这里我们选择 mylang 作为我们自定义语言的标识符。

注册一个自定义语言对于 Monaco Editor …

阅读全文 »

使用 Link Map 分析 iOS App 二进制文件体积

为什么要分析 App 文件体积?

作为一个 iOS 开发者,通常会需要关心 App 体积的大小,这将会是影响用户在 App Store 看到 App 时,是否决定下载的因素之一,如果 App 的体积太大,可能会使得用户放弃下载 App,特别是在用户使用蜂窝网络的时候。

对于一个 iOS App 来说,它的体积通常由以下几个部分组成:

  • 二进制可执行文件
  • 资源文件
  • 第三方 Framework

对于资源文件和第三方 Framework 来说,我们可以直接通过统计文件大小的方式来统计它们所占用的磁盘空间,但是对于二进制文件来说,我们该如何去统计它里面所包含的代码大小组成呢?

如何分析?

非常幸运的,Xcode 为我们提供了 Link Map 这样的一个统计文件来展示代码在经过编译之后,在可执行二进制文件中的实际占用体积大小,通过分析这个文件,我们就可以精确地知道,对应到每一个代码文件,它在最终生成的可执行二进制文件中所占的体积。

为了让 Xcode 能输出我们所需要的 Link Map 文件,需要在 Xcode 进入到工程的设置界面,选择需要输出 Link Map 的 Target,选择 Build Settings Tab,在搜索框中输入“link map”(注意 link …

阅读全文 »

基于钉钉 + Virtual-LDAP + KeyCloak 的内网统一认证系统

0. 架构

基于钉钉的内网统一认证

1. 背景

最近公司内网的各种系统部署得越来越多,每个系统都有自己的认证方式和账号体系,这导致大家在每个地方都要去注册一个账号,并且不利于公司统一管理密码安全策略,例如密码到期策略、密码复杂度策略以及强制二次验证等。

以及对于一部分短平快的内网应用来说,我们并没有时间去为它开发一套用户体系,这个时候还是希望能有一个统一的前端反向代理来处理用户认证这个流程。

为此,我就去寻找了一些解决方案,并且为了解决开源系统并不能对接外部用户系统的问题,开发了一个 Node.JS Package(Virtual-LDAP)来提供 LDAP 能力。

2. 问题

虽然总的需求是一个很简单的功能,但是这其中还是有很多细节的问题需要考虑。

认证方式

对于有一些开源系统,它本身是支持 OAuth 来进行用户认证的,这个时候只需要去选择一个支持 OAuth 的用户管理系统就可以了,甚至基于开源库自己去开发一个也并不困难。但是对于某一些开源系统来说,它并没有提供 OAuth 认证接入的支持,只提供了 LDAP 接入。

例如最近我们引入了 Metabase 作为面向运营的快速 BI 分析工具,但是它除了可以接入 Google 账号作为认证方式,就只能接受 LDAP 作为认证方式了。这个时候就得去寻找一个认证系统,同时能支持 OAuth 以及 LDAP。

用户体系

引入用户管理系统之后,还有另外一个问题需要考虑,就是现在员工的用户体系需要去管理。对于一个小公司来说,目前并没有一个统一的工具去同时管理员工的各种信息以及状态。

但是目前公司已经引入钉钉作为公司的交流沟通工具,以及作为各种流程的审批处理系统,HR 也会在钉钉上去管理所有员工的状态,以及员工的组织架构。

因此,这个用户管理系统最好需要能支持同步钉钉中的用户体系,这样就不需要额外的人力去维护用户管理系统,以及在有员工状态变更的时候,能及时同步,避免出现授权外的访问。

数据同步

有了 OAuth,有了 LDAP,还有了钉钉这个数据源,因此就需要处理好各个 Provider 之间的数据同步问题,避免人工去维护各个系统里面的用户数据,做到以钉钉的数据为基础,用户管理系统提供能力,做到各个系统各个认证方式得到的用户数据都是一致的。

以及,对于 …

阅读全文 »