oled  spi  esp8266  nodeMCU

图片发自简书App

闲言碎语

接着上一篇，继续来说u8glib模块。上回文末说到使用drawStr()函数显示字符串，坐标(x,y)并不是字符串左上角的坐标。在u8glib官方wiki中的Font and String Handling提到了一些与字符串有关的内容，其中有个就提到了坐标问题。另外，找到了之前例子中，液晶头部10个像素左右的高度不显示的原因。

这篇文章就不细讲API，直接来实践。

实践一下

先来看字符串对齐的。模块为字符串对齐提供了4种方案：

• u8g.disp:setFontPosBaseline()
• u8g.disp:setFontPosBottom()
• u8g.disp:setFontPosCenter()
• u8g.disp:setFontPosTop()

这几个方案的区别在于Y坐标与baseline的关系，默认使用第一种方案。

来自官方wiki

但是,这两个函数的返回值还和另外的函数有关系：

• u8g.disp:setFontRefHeightAll()
• u8g.disp:setFontRefHeightExtendedText()
• u8g.disp:setFontRefHeightText()

这三个函数使用了三种不同的计算算法，使得上面两个函数的返回值不一样。具体的区别可以看这里，有图示，一看便知，┏ (゜ω゜)=☞。

下面来看个简单的例子，当做开胃菜。以（2， 1）为顶点坐标，显示一段字符串。以（0， 0）为顶点坐标画一个方框，圈住字符串。

cs  = 8 
dc  = 2 -- D2
res = 0 -- D0
spi.setup(1, spi.MASTER, spi.CPOL_LOW, spi.CPHA_LOW, 8, 8)
gpio.mode(8, gpio.INPUT, gpio.PULLUP)
disp = u8g.ssd1306_128x64_hw_spi(cs, dc, res)
disp:setFont(u8g.font_6x10)
disp:setFontPosTop()
disp:setFontRefHeightExtendedText()

str = "Hello NodeMCU!"
h = disp:getFontAscent() - disp:getFontDescent()
w = disp:getStrWidth(str)

function draw()     
    disp:setDefaultForegroundColor()
    disp:drawStr(2, 1, str)
    disp:drawFrame(0, 0, w + 2, h + 2)
end

disp:begin()
disp:firstPage()
repeat 
    draw()
    print("draw")
until (disp:nextPage() ~= true)

首先，设置成PosTop，将参照设置成为顶点，这样.drawStr()函数的坐标就变成字符串的顶点坐标了。接着，在用函数得到字符串的宽度和高度。最后画一个frame和显示一个字符串。

另外，修复了一个显示上的bug。u8glib是分区域刷新屏幕的，.nextPage()会将缓存设置成下一个区域。因此，这里的picture loop应该使用 do while循环才合适。在lua中，有个repeat until与do while循环对应。改用循环后，便可以解决先前显示的问题。

除了上面的几个函数，u8glib还有其他有趣的函数，配合着使用实现一些高级效果。比如u8g.disp:setDefaultBackgroundColor()和u8g.disp:setDefaultForegroundColor()。从名字看，前者是背景色，后者是前景色。说得更简单一点，在只有单色的液晶里面，前者可以擦除像素，后者可以点亮像素。配合着使用可以实现反显效果。只需要把上面例子的draw函数改一改就可以了。

function draw()     
    disp:setDefaultForegroundColor()
    disp:drawStr(2, 1, str)
    disp:drawFrame(0, 0, w + 2, h + 2)

    disp:drawBox(0, 20, w + 2, h + 2)    
    disp:setDefaultBackgroundColor()
    disp:drawStr(2, 21, str)
end

这里画了一个Box，然后设置成背景色，再显示字符串（实际上是 ）。效果如开头的图标所显示的那样。

在多行文本的环境下，设置下一行文本的Y坐标总是要计算才能知道。u8glib提供了两个函数可以快速得到行距。分别是u8g.disp:setFontLineSpacingFactor()和u8g.disp:getFontLineSpacing()。前者用于设置行距缩放因子，后者返回行距。如果放大因子是1倍的话，返回的行距等于上例子中的h值。

还有两个函数也有点意思，u8g.disp:setScale2x2()和u8g.disp:undoScale()将像素放大。需要注意的是，disp:getHeight()和getWidth()返回的屏幕大小会比实际的小一倍。但是disp:getFontLineSpacing()的返回值还是一样的。所以这个放大可以理解为，在屏幕物理大小没变化的情况下，改变像素的物理大小。

function draw()     
    disp:setScale2x2()
    disp:drawStr(2, 0, str)
    disp:undoScale()
    disp:drawStr(2, 20, str)
end

放大，没拍清晰

上面啰啰嗦嗦的介绍了几个函数，内容有些零散。最后来看一个复杂一点的例子——实现一个菜单。原理其实很简单，就是利用第二个例子，实现对选中选进行反显。

menu = {"nodeMCU", "Xiemingmin", "u8glib"}
ls = disp:getFontLineSpacing()
w = disp:getWidth()
function draw(index)     
    for i, v in ipairs(menu)
    do
        disp:setDefaultForegroundColor()
        if index == i then
            disp:drawBox(0, (i - 1)*ls + 16, w, ls)
            disp:setDefaultBackgroundColor()
        end
        disp:drawStr(10, (i - 1)*ls + 16, v)
    end
end
local select = 1
disp:begin()
tmr.alarm(0, 2000, tmr.ALARM_AUTO, function()
    disp:firstPage()
    print(select)
    repeat 
        draw(select)
    until (disp:nextPage() ~= true)
    if select ~= 3 then
        select = select + 1
    else
        select = 1
    end    
end)

代码有点长，隐去了驱动和初始化设置。draw函数用于描绘菜单项，正常下使用前景色来显示字符串。选中项，则先绘制一个Box，再设置背景色显示字符串。简书知道怎么上动态图，这里就不上图了。直接下载进去看效果吧。

更多内容

↑ 点击上面的标题可用查看同文集的其它文章。

简书评论不能贴图, 如有需要可以到我的GitHub上提issues