差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- 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

创客百科

用户工具

站点工具

差别

页面工具