这里会显示出您选择的修订版和当前版本之间的差别。
note:spoony:timor-tv [2019/02/01 00:27] Spoony |
note:spoony:timor-tv [2019/02/01 00:27] |
||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 复古小电视使用文档 ====== | ||
- | 这是ssd1306复古小电视的使用文档,购买了此产品的用户可以通过阅读文档,了解复古小电视的使用方法,包括学会如何显示png图片、如何使用canvas绘图、如何使用原生api绘图。 | ||
- | 没有购买此产品的读者,可以点击上面的淘宝链接访问复古小电视介绍页面,建议在手机端打开,想直接购买,可以通过淘宝链接,或者点击右下角的与我联系,或者直接发邮件与我联系。 | ||
- | |||
- | 此文档中提到的程序代码、图片等全部资源在页面底部有下载地址 | ||
- | |||
- | ===== 如何自定义显示内容? ===== | ||
- | 自定义显示内容有3种方法,分别是: | ||
- | |||
- | - 直接显示png图片。此方式最简单 | ||
- | - 使用canvas绘图。此方式能动态显示任何内容,包括中文汉字 | ||
- | - 使用api绘图。此方式性能最好 | ||
- | |||
- | 读者可以根据自己的基础选择上面的任何一种方式。也可以同时使用。对于没有nodejs基础的读者,建议选择png图片方式,如果想动态显示内容,则可以使用canvas或者api方式,但是需要你有一点nodejs基础。因为驱动是nodejs编写的,别担心,使用它们绘图非常简单。 | ||
- | |||
- | ===== 显示png图片 ===== | ||
- | 首先准备一张png格式的图片,注意图片的分辨率最佳为128*64,因为复古小电视的屏幕分辨率就是128*64。其次,png图片的内容最好为白色,背景透明,因为复古小电视的屏幕是OLED 屏幕,只能显示单色。黑色的地方在屏幕上会显示,透明的地方则不会显示。 | ||
- | |||
- | 然后进入 watcher 的根目录,新建 show_png.js 文件,同时把 png 图片也放在根目录。我们将使用驱动提供的 drawPNG 函数来显示图片。show_png.js 文件的代码如下: | ||
- | <code> | ||
- | // oled.js 是购买产品附带的软件包,包含完整驱动,可直接使用 | ||
- | var Device = require('./oled.js'); | ||
- | |||
- | var ssd1306 = new Device({ | ||
- | description: 'test drawPNG', | ||
- | model: 'ssd1306', | ||
- | width: 128, | ||
- | height: 64, | ||
- | address: 0x3c, | ||
- | device: '/dev/i2c-1' | ||
- | }); | ||
- | |||
- | ssd1306.drawPNG('./starwars.png', false, function(error){ | ||
- | if (error) { | ||
- | console.log('png 图片显示错误,请确认图片的文件名是否正确'); | ||
- | console.log(error); | ||
- | }else{ | ||
- | console.log('显示PNG图片完成'); | ||
- | } | ||
- | }); | ||
- | </code> | ||
- | 上面第一段代码的作用是引入 onedevice 驱动包,然后我们创建了一个 SSD1306复古小电视 的驱动。这些都是必要的,并且都是相同的。创建完驱动后,我们就能用驱动提供的 api 去操作屏幕了。 | ||
- | |||
- | 我们使用 drawPNG 来显示图片。此函数第一个参数是图片的路径,第二个参数我们暂且使用 false,第三个参数是回调,显示完成或者错误的时候会调用。假如现在根目录下有一张叫 starwars.png 的图片,保存文件,然后执行 | ||
- | |||
- | node show_png.js | ||
- | 现在,你的屏幕应该会显示图片了。如果没有提示 显示PNG图片完成,而是报错了,则确认下图片的路径。好了,现在你已经学会了如何显示图片,接下来再去学习如何制作png图片吧。如果对以上文档仍有疑问,请通过开篇的联系方式与我联系。 | ||
- | |||
- | ===== 我们来点高级的,使用 canvas 动态显示内容 ===== | ||
- | 在开始之前,确保你按照软件包的安装说明安装好了全部的依赖,这其中就包括我们要用的 canvas 的安装。canvas 是 HTML5 中定义的一个用于在网页实时生成图像,并且可以操作图像内容的 api。你只需要学会如何使用 canvas,它的教程非常多。 | ||
- | |||
- | 下面,我们来学习如何使用 canvas 来动态的绘制图形。新建 show_canvas.js 文件,文件的代码如下: | ||
- | <code> | ||
- | var Device = require('./oled.js'); | ||
- | // 注意,这里多了一行,我们要使用 canvas | ||
- | var Canvas = require('canvas'); | ||
- | |||
- | var ssd1306 = new Device({ | ||
- | description: 'test drawCanvas', | ||
- | model: 'ssd1306', | ||
- | width: 128, | ||
- | height: 64, | ||
- | address: 0x3c, | ||
- | device: '/dev/i2c-1' | ||
- | }); | ||
- | |||
- | // 创建一个 canvas 画布,并且大小是 128*64 | ||
- | var canvas = new Canvas(128, 64); | ||
- | var ctx = canvas.getContext('2d'); | ||
- | |||
- | // 我们先设置字体和大小,然后把画笔的颜色设置成白色,最后显示2行文字 | ||
- | ctx.font = '18px Impact'; | ||
- | ctx.fillStyle = '#FFF'; | ||
- | ctx.fillText("hello Canvas", 0, 20); | ||
- | ctx.fillText("你好啊", 0, 50); | ||
- | |||
- | // 上面是 canvas 的操作,现在我们让屏幕显示 canvas 的内容 | ||
- | ssd1306.drawCanvas(canvas); | ||
- | </code> | ||
- | 保存文件,然后运行 | ||
- | <code> | ||
- | node show_canvas.js | ||
- | </code> | ||
- | 现在,你的屏幕上应该会显示汉字了。需要注意的是,为了达到最理想的显示效果,canvas的分辨率最好和屏幕的分辨率一致,并且使用单色绘制canvas,建议用#FFF。因为无论如何,你的OLED都是单色的屏幕,无法显示彩色。虽然有彩色的OLED,但目前还没集成驱动。后续会集成更大尺寸的彩色LCD、TFT屏幕驱动。这是个巨大的工程,希望有懂这方面的软硬件工程师协助我。 | ||
- | |||
- | 更多 canvas 内容,可以通过这个网站学习,并在线预览效果 http://www.runoob.com/html/html5-canvas.html | ||
- | |||
- | 最后我们使用原生 api 来做一个动画效果 | ||
- | 动画的效果是一个屏幕扫描动画,一条垂直的直线从屏幕的左边开始逐列扫描到右边,然后又扫描到左边,一直循环往复。这个动画很简单,先垂直画一条直线,然后在横坐标依次叠加就出来动画效果了。新建 show_api.js 文件,代码如下: | ||
- | |||
- | <code> | ||
- | /** | ||
- | * author: LanFly | ||
- | * email: bluescode@outlook.com | ||
- | * document: http://timor.tech/tv/doc.html | ||
- | */ | ||
- | |||
- | var Device = require('./oled.js'); | ||
- | |||
- | var ssd1306 = new Device({ | ||
- | description: 'test draw animation', | ||
- | model: 'ssd1306', | ||
- | width: 128, | ||
- | height: 64, | ||
- | address: 0x3c, | ||
- | device: '/dev/i2c-1' | ||
- | }); | ||
- | |||
- | // 记录当前水平位置 | ||
- | var x = 0; | ||
- | // 记录扫描方向 | ||
- | var dt = 1; | ||
- | |||
- | function render(oled) { | ||
- | // 每次都先清除屏幕 | ||
- | oled.clearDisplay(); | ||
- | // 然后画一条垂直的直线,前2个参数表示起点的横纵坐标,接下来2个参数表示终点的横纵坐标,最后一个参数表示颜色亮 | ||
- | oled.drawLine(x, 0, x, 63, 1); | ||
- | // 每次移动一个像素点 | ||
- | x = x + dt; | ||
- | // 如果到达屏幕右边界,则改变方向,向左移动扫描 | ||
- | if (x > 127) { | ||
- | x = 127; | ||
- | dt = -1; | ||
- | // 如果到达屏幕左边界,则改变方向,向右移动扫描 | ||
- | } else if (x < 0) { | ||
- | x = 0; | ||
- | dt = 1; | ||
- | } | ||
- | // 每隔30毫秒移动一次,注意不能太快 | ||
- | setTimeout(function () { | ||
- | render(oled); | ||
- | }, 30); | ||
- | } | ||
- | |||
- | // 原生 api 挂载在 oled 对象上,开始显示 | ||
- | render(ssd1306.oled); | ||
- | </code> | ||
- | 保存文件,然后运行它。现在,你的屏幕应该在显示扫描动画了。动画的原理就是先显示一帧,然后清除,然后又快速的显示下一阵。只要速度保持足够快,就会出现动画效果。学习到这里就结束了,你应该能显示任何你想要显示的内容了,你甚至可以拿canvas播放视频。 | ||
- | |||
- | 原生 api 有非常多的方法,比如画点、线、面、矩形、圆、文字、关闭屏幕、打开屏幕、调节亮度等等。合理的使用它们。全部的 api 可以在这里查看:https://www.npmjs.com/package/oled-ssd1306-i2c#available-methods | ||
- | |||
- | 此文档的代码下载地址 | ||
- | [[http://timor.tech/tv/tv_demo.zip]] | ||
- | |||
- | 出处 http://timor.tech/tv/doc.html |