2022年6月

用过Flutter,对数据的响应式,有进一步了解。于是,回过头来再看看VueJS,自然而然地理解了。

找到一个比较好的Vue3示例代码,展示了使用Vue3的主要代码,涉及Vue3的模板语言、组件等。

Vue3 起步简单示例
https://blog.csdn.net/thankseveryday/article/details/124741733

我在代码加上注释,更容易理解:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>Learn Vue3</title>
</head>

<body>
<!-- 界面模板 -->
<div id="app">
    <!-- 两个大括号,获取data()方法返回对象的属性的值,给文本绑定值 -->
    <p>{{counter}}</p>
    <p>
        <!-- :title是v-bind:title的缩写,给HTML标签的属性绑定值 -->
        <span :title="message">{{message}}</span>
    </p>
    
    <!-- @click 是 v-on:click 的缩写,指定事件的执行方法 -->
    <p><button @click="reverseMessage">翻转文字</button></p>
    
    <!-- “v-”前缀的特殊属性,是Vue的指令 -->
    <!-- 使用 v-model 指令来实现双向数据绑定 -->
    <p><input type="text" v-model="message"></p>
    
    <!-- v-if ,当值为true时,才显示对应HTML -->
    <p v-if="seen">你能看到我吗?</p>
    
    <p><button @click="seenYN">显示/隐藏</button></p>
    <h4>我爱吃的水果:</h4>
    <ul>
        <!-- v-for,循环输出HTML -->
        <li v-for="fruit in fruits">{{fruit}}</li>
    </ul>
    <h4>周末计划:</h4>
    <ol>
        <!-- todo-item对应自定义组件TodoItem -->
        <todo-item v-for="todo in todos" :todo="todo" :key="todo"></todo-item>
    </ol>
</div>
<script>
// 定义自定义组件
const TodoItem = {
    props: ['todo'],
    template: '<li>{{todo}}</li>'
}

// 数据对象,有点像Flutter的State或者Provider
const dataObj = {
    // 声明用到的自定义组件
    components: {
        TodoItem
    },
    
    // 定义数据对象,有用的属性可以先设置null,用于占位
    data() {
        console.log("vue3 demo, data()");
        return {
            counter: 0,
            message: "hello vue",
            seen: true,
            fruits: ["apple", "orange", "bananas"],
            todos: ["钢琴课", "绘画课", "看电影"]
        }
    },
    
    // 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
    created() {
        console.log("vue3 demo, created()");
    },
    
    // 在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    mounted() {
        console.log("vue3 demo, mounted()");
        setInterval(() => {
            this.counter++
        }, 1000);
    },
    
    // 操作数据的方法,一般用于页面元素的事件处理
    methods: {
        reverseMessage: function () {
            // 操作数据,让Vue更新界面
            this.message = this.message.split('').reverse().join('');
        },
        seenYN: function () {
            this.seen = !this.seen;
        }
    }
}

// 数据与模板绑定
Vue.createApp(dataObj).mount('#app')
</script>
</body>
</html>

更详细的介绍和相关文档,可以访问Vue3的官网:
https://v3.cn.vuejs.org/guide/introduction.html#vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

注:本文不是教程。纯粹以玩和分享的角度做记录。

现今时代,微波炉已经足够廉价,可以成为普通家用电器。微波炉也是个加热工具,所以一直想试试用来烘培咖啡豆,但不知如何操作。直到刷到这个视频(注意,up主是个居住在中国的日本人,应该是用翻译软件翻译出来的中文,所以看起来有点别扭):

微波炉也能烘焙咖啡豆妈?使用微波炉的咖啡烘焙方法
https://www.bilibili.com/video/BV15Z4y1t77z

一 所需器具

  1. 微波炉,只要带调火力的功能的即可。
  2. 外壁比较厚(0.5cm左右吧)的玻璃器具,可以观察豆子的颜色变化,也可以锁住热量。我是用两个玻璃饭盒,一大一小。小的反过来,可以被大的包住。
  3. 隔热手套一双。
  4. 计时器。可以用手机自带的计时器(秒表)。最好是两个,一个是记录操作时间,一个记录总的烘培时间。没有的话,总的烘培时间可以看手机的时间。
  5. 金属盘子。刚出炉的咖啡豆比较热,最好用金属盘子装着。
  6. 风扇。下豆后给豆子降温。比较专业的,应该是用“去银皮冷却盘散热器”。
  7. 电子秤。

二 操作方式

视频的操作是,微波炉(分5档,低火、中低火、中火、中高火、高火)开高火,每隔30秒拿出来摇晃几下。130g生豆,约7分钟后一爆,约10分钟后二爆,约12分钟下豆。

我第一次试,50g生豆,用玻璃茶壶(外壁比较薄)。开高火,第一个30秒还没到就黑掉几颗,赶紧转中高火。可是全程中高火,烘了14分钟也没有一爆,但豆子没有糊。估计是没能锁住热量。

后面一次,110g生豆,用两个玻璃饭盒(外壁比较厚)。先开中高火,约5分钟后转黄,再开高火,约9分钟后(时间有点忘记了)一爆,一爆过后下豆。效果比较好。但是由于两个饭盒盖得比较紧,拖慢了下豆时间,导致有点过烘。

就是,没有一次成功的经历,但可以总结一些经验。正如该视频下的有个留言,“小火脱水,中火转黄,大火发展”,烘豆一般都是这样操作的过程。

三 需要注意

  1. 烘焙时,最好在室外,或者厨房里开排气、抽油烟机。毕竟不是每个人都喜欢烘焙时的气味。特别要注意下豆时,最好是在室外进行。因为整个烘焙过程的烟都被困在玻璃饭盒里,一打开就爆发出来,气味非常浓烈。
  2. 下豆最好在室外进行,第二个原因是要处理银皮。有专业机器的话,可以无视这点。
  3. 烘焙成品不均匀。应该是没有在烘培过程中进行搅拌而导致的。
  4. 烘焙过程不能测温。一般温度计不能放进微波炉,拿出来摇晃又不能打开(避免导致豆子失温)。
  5. 根据微波炉的加热原理,会导致豆子从内部发热出来,跟传统的烘豆(从外部给豆子加热)不同。不知道是不是这个原因,豆子太少(例如50g)就不能达到一爆。

四 总结

总的来说,微波炉烘豆,值得玩玩。毕竟器具都很家常,整个过程能够观察咖啡生豆的颜色和气味变化,烘焙过程也不会有银皮乱飞的烦恼。

但不建议作为日常烘豆。不能搅拌、不能测温,基本就不能控制并稳定出品的风味。

今年受疫情影响,几乎所有芯片都涨价了。但是合宙ESP32C3-CORE却奇迹地以9.9RMB包邮,其搭配的Air101-LCD屏幕扩展板(0.96寸)也是9.9RMB包邮。甚是吸引,于是入手了一套,主板+屏幕。

注:以下操作,以基于Debian的Linux发行版为例。

一 概述

合宙ESP32C3-CORE简单总结如下:

  1. 采用乐鑫科技的ESP32-C3芯片,搭载RISC-V 32位单核处理器,支持2.4 GHz Wi-Fi 和Bluetooth 5 (LE)。
  2. 板载4MB闪存。
  3. USB Type-C接口,集成CH343(带TTL串口转USB)。新版好像改为USB直连了。

相关资料

二 MicroPython

由于合宙的Lua OS采用Lua语言,虽然官方在努力,但本人不熟悉,就选择了更好玩的MicroPython。

相关资料

三 刷机

MicroPython官方关于ESP32-C3的固件及刷机教程:
https://micropython.org/download/esp32c3/

1. 安装USB串口驱动

Windows,需要安装CH343的驱动。我使用Lubuntu 20.04,自动识别。另外,新版的合宙ESP32C3-CORE应该也不用装。

2. 刷机工具

安装Python 3.8或3.7后,再装刷机工具esptool。使用sudo安装,是方便所有用户都可以用。使用pip3是指定安装Python3的版本。

sudo pip3 install esptool

3. 下载固件

在MicroPython官方网站 https://micropython.org/download/esp32c3/ 底部的Firmware -> Releases,下载最新版本的固件。

4. 清除原固件

--port为端口,要根据实际填写,我电脑上的是/dev/ttyACM0

sudo esptool.py --chip esp32-c3 --port /dev/ttyACM0 erase_flash

5. 刷入固件

--port为端口,/opt/download/esp32c3-20220618-v1.19.1.bin为MicroPython固件文件。另外,如果刷入不成功,可以多刷几次。

sudo esptool.py --chip esp32-c3 --port /dev/ttyACM0 --baud 460800 write_flash -z 0x0 /opt/download/esp32c3-20220618-v1.19.1.bin

四 开发

推荐使用Thonny作为开发IDE。可以先不上传代码而直接运行,也可以看到开发板上的文件。

相关资料

先安装python3-tk

sudo apt install python3-tk

再安装thonny

sudo pip3 install thonny

运行

thonny

插上开发板,在Thonny进入 工具 -> 设置 -> 解释器 -> 选择解释器为“MicroPython (ESP32)”,然后就可以开发了。

五 点亮屏幕

Air101-LCD屏幕的使用有几点需要注意的:

  1. 不能使用HSPI(硬件SPI),只能使用软SPI,即SoftSPI
  2. 该屏颜色不对,因此需要定义函数来生成正确的颜色。
  3. 横屏时,即tft.rotation(1),x轴不偏移,y轴偏移24像素。相反,竖屏时,即不写tft.rotation(1),x轴偏移24像素,y轴不偏移。
  4. 屏幕的RKey应该接到ESP32C3-CORE的GPIO13,但不知道为什么不能读取点击事件,于是该为接在GPIO19。

相关资料

写了个示例代码显示一些信息(如下),保存为main.py,连同ST7735驱动文件ST7735.py、英文字体文件terminalfont.py

from machine import Pin, SoftSPI, SPI
from ST7735 import TFT
import time
from terminalfont import terminalfont
import network
import ubinascii

# 由于TFT屏的颜色有问题,因此需要重写一个函数修复一下
def TFTColor(r,g,b) :
  return ((b & 0xF8) << 8) | ((g & 0xFC) << 3) | (r >> 3)

spi = SoftSPI(baudrate=1000000, polarity=1, phase=0, sck=Pin(2), mosi=Pin(3), miso=Pin(10))
tft=TFT(spi,6,10,7) #DC, Reset, CS
tft.initr()
tft.rgb(True)
tft.rotation(1) # 横屏显示

# 绘制背景色
tft.fill(TFTColor(0,0,0))

# 绘制方块
#tft.fillrect((0,24),(20,20),TFTColor(0,0,255))

# 显示文字
tft.text((0,24),'mac',tft.WHITE,terminalfont,2)

# 显示MAC
mac = ubinascii.hexlify(network.WLAN().config('mac')).decode()
tft.text((0,40),mac,tft.WHITE,terminalfont,2)

# 显示运行秒数
from machine import Timer
sec = 0
def showTime(t) :
    global sec
    sec += 1
    tft.fillrect((0,56),(160,20),TFTColor(255,255,255))
    tft.text((0,60),f'Run {sec} sec',tft.BLACK,terminalfont,2)

# 运行定时器
tim0 = Timer(0)
tim0.init(period=1000, mode=Timer.PERIODIC, callback=showTime)

# 把按键信息显示在屏幕的函数
def showDirect(t) :
    global tft
    tft.fillrect((0,76),(160,16),TFTColor(0,0,0))
    tft.text((0,78),str(t),tft.WHITE,terminalfont,2)

# 设置按键的接口
from machine import Pin
keyL = Pin(9, Pin.IN, Pin.PULL_UP)
keyU = Pin(8, Pin.IN, Pin.PULL_UP)
keyC = Pin(4, Pin.IN, Pin.PULL_UP)
keyD = Pin(5, Pin.IN, Pin.PULL_UP)
keyR = Pin(19, Pin.IN, Pin.PULL_DOWN)

keyL.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyU.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyC.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyD.irq(trigger=Pin.IRQ_FALLING, handler=showDirect)
keyR.irq(trigger=Pin.IRQ_RISING, handler=showDirect)

这是另一个程序,显示一个走动的方块:

from machine import Pin, SoftSPI, SPI
from ST7735 import TFT
import time

# 由于ftf屏的颜色有问题,因此需要重写一个函数修复一下
def TFTColor(r,g,b) :
  return ((b & 0xF8) << 8) | ((g & 0xFC) << 3) | (r >> 3)

spi = SoftSPI(baudrate=1000000, polarity=1, phase=0, sck=Pin(2), mosi=Pin(3), miso=Pin(10))
tft=TFT(spi,6,10,7) #DC, Reset, CS
tft.initr()
tft.rgb(True)
tft.rotation(1) #方向调整

# 绘制背景色
tft.fill(TFTColor(0,0,0))

w = 20
h = 20
max = 160
for i in range(0,max*4-1):
  x = i * 5 % max
  y = i * 5 // max * h + 24
  tft.fillrect((x,y),(w,h),TFTColor(255,255,255))
  ++i
  time.sleep(0.04)
  tft.fillrect((x,y),(w,h),TFTColor(0,0,0))

六 后续

显示优化的问题,仍未解决(如下)。后面应该会试试Arduino for ESP32-C3。

  1. 有个项目解决中文的显示的,但刷固件失败,放弃了。
    支持中文显示的MicroPython固件 https://github.com/wangshujun-tj/mpy-Framebuf-boost
  2. 想使用LVGL显示更好的UI,但是编译失败,也放弃了。
    Micropython + lvgl https://github.com/lvgl/lv_micropython

今晚计划做意大利面,于是CFO建议搭配个Pizza。以前做过很多次,一直没有实现满意的饼底。再次参考小高姐视频,做了个软底的,这次算是比较满意了。当然,还是没有视频中的烘焙石板。视频如下:
Youtube版:小高姐的 Magic Ingredients - 披萨做法 Pizza Margherita, Cheese Pizza and Steak Pizza
https://www.youtube.com/watch?v=ATEnM1YPQQE
Bilibili版:小高姐的魔法调料 - 详细的解说,带你做出真正经典的意大利披萨
https://www.bilibili.com/video/av35740109

1)饼底材料(刚好做一个家用烤箱盘子大小的):

  • 高筋面粉 125克
  • 温水 85克
  • 酵母 2克
  • 盐 1克
  • 油 8克
  • Pizza草 适量(没有可以不加)

2)配料(一般选用自己喜欢的即可):

  • 番茄酱
  • 马苏里拉芝士
  • 洋葱
  • 玉米
  • 培根、牛肉等

3)做法:

  • a)高筋面粉加入油和盐。
  • b)酵母加入温水融化后,倒进高筋面粉混合。醒面20分钟。
  • c)揉面,直到出现光面。面团表面抹油,发酵1个小时,面团大概成两倍大。
  • d)面团弄成烤盘大小的饼底,不要用擀面杖,用手甩或者拉扯面团。烤盘铺上硅胶纸(不用硅胶纸的,可以在烤盘刷油,防粘),放上整理好的饼底。
  • e)饼底表面撒上Pizza草,再刷层薄油、涂上番茄酱、铺上马苏里拉芝士,最后铺上其它材料。
  • f)烤箱最高温(我的是230°C)预热10分钟,然后放入Pizza烤大概10分钟。一般马苏里拉开始烤焦,就差不多可以出炉。