分类归档 产品策划

通过孟繁永

自制热敏打印机连接器始末(7)

其实之前参考过这篇文章

https://www.printnode.com/en/docs/what-is-raw-printing

但是他们提供的api没有命令式的,只能打文件,现在回头来看,打印机确实可以这么连接,直接安装为raw的方式就可以用程序打印了,并不需要找驱动。

当然,为了简化cups的操作,对普通用户来说,提供一个tsc的驱动在传统的打印机界面上安装会更简单一些。

在cups中添加的raw打印机只能在cups中可见,打印机与扫描仪管理中是看不见的,当然,node-printer中可以调用到这个打印机。

梳理一下基本概念:

标签打印机:重点当然在标签,每次打印一小截,标签一般是固定大小,指令如TSPL

票据打印机:重点当然是票据,按需打印长度,然后撕掉。指令如EOP。

面单打印机:快递单那种,应该是跟标签打印机差不多,只不过更大。

其实对于打印机厂商来说,很多都已经兼容多种指令了,当然不包括得力这种OEM还不提供开发文档的。

要做一个跨平台的连接器,需要满足几个条件:

(1)能够构建跨平台的发布,所以范围就锁定在electron、xamarin这样的方案上,js和c#虽然都熟悉,但最近用的多的还是js,所以有限选electron,但是其实对node不够熟悉,所以造成了上一篇关于buffer类型的困惑。

(2)搞清楚打印机在不同的操作系统如何连接,目前还没尝试usb直驱这种,在mac上还是通过cups来连接,windows上都有相应的驱动,可以不单独讨论。

(3)指令集兼容性,目前只尝试了TSPL这一种,后续还需要其他的ZPL之类的测试一下,还需要在各种指令之间转换,方便原来用某个指令集编写的程序直接对接。

(4)接入方式的兼容性,至少应该支持socket和http。

(5)统一的api,尤其是友好的RestFul模式的api,便于开发对接。

通过孟繁永

自制热敏打印机连接器始末(4)

都调试起来以后,连接打印机,发现打印机根本没反应,网上找到的相关资料很少,大部分都是在windows或者linux上做的,难道是mac的osx有一些安全限制,导致打印的指令被拦截了。

于是照着这个思路查下去,终于找到了一个新的东西:CUPS。其实这个东西支持linux也支持mac,按照说明添加上打印机之后,确实能在mac的打印机列表中看到了,而且在系统打开一个文件用这个打印机打印,是有动作的,尽管是瞎走纸,没有真正的输出。但至少说明是有希望了。

那么为什么用electron-escpos还是无法打印呢,甚至依然连走纸反应都没有。

无奈又去得力的官网看了看,找到888B这个打印机的说明书,仔细瞅了一眼,竟然发现它说他的编程语言是TSPL,不兼容ESCPOS,擦,过于相信刚找到escpos这个神奇的协议的时候它所说的几乎所有的打印机都支持了。

https://blog.csdn.net/weixin_34355881/article/details/89543300这篇文章介绍了打印机主流的指令类型(ESC命令集+CPCL命令集+TSPL命令集)之间的区别。这就解释了上面我对打印机类型的模糊认识

好了,标签打印机一般用TSPL命令集,票据打印机一般用ESCPOS。而我用的得力888B(NEW)是标签打印机。

那么,就需要将原来的escpos换成tspl来写打印命令。

通过孟繁永

自制热敏打印机连接器始末(3)

接上一篇,分清楚了两种模块的规范,那么怎么解决两种规范的不同呢,似乎可以通过配置babel来实现,于是我在babel.config.js中尝试了很多办法,都没有收效,归根结底是还没有搞清楚vue和electron之间是如何各自适用这些规范的。

按照某种说法,最新的vue是遵循ES6,而electron或者说node模块是CommonJs,但是,在项目中,npm install进来的模块都放在node_modules中,怎么区分呢,如果不是babel.config.js来负责,那就应该是electron相关的,于是我找到了electronBuilder这个配置。

在vue.config.js(如果没有则在项目根目录新建)中:

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ["escpos", "escpos-usb"]
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
    }
  }
  // chainWebpack: config => {
  //   config.module
  //     .rule("js")
  //     .test(/\.jsx?$/)
  //     .exclude.clear()
  //     .end()
  //     .include.add(function() {
  //       return ["./node_modules/escpos", "./node_modules/escpos-usb", "src"];
  //     })
  //     .end();
  // }
};

这个发现得益于https://medium.com/@nyorikakar/printing-with-vue-electron-and-node-f52a730e63e7这篇文章,而且我还在后面的评论中发现了https://github.com/song940/node-escpos/issues/297,最终靠这些信息搞清楚了逻辑。

(1)对于用于node的模块,需要在vue.config.js的externals那里列出,这样,vue就不会让babel啥的那些loader去处理了。

(2)负责和node打交道的代码要放在background.js中,这在前面第二个连接中可以看到,而且最关键的是在vue的代码因为是通过BrowserWindow加载的,在其初始化是webPreferences中的nodeIntegration这个属性需要配置为true,const { ipcRenderer } = window.require(“electron”);才能用。而且,这个true如果是放在.env中不能直接给process.env.ELECTRON_NODE_INTEGRATION=true,那样,调到的是字符串,不是布尔值,会出现下面的报错:

Uncaught TypeError: window.require is not a function
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (App.vue:22)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue?vue&type=script&lang=js& (App.vue?c53a:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue (App.vue:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/main.js (HelloWorld.vue?adfd:1)
通过孟繁永

自制热敏打印机连接器始末(2)

接上一篇,选择vue+electron之后,那就按electron-vue这个来。虽然能跑起来,但是代码上传到git以后,收到很多高危报警,https://github.com/futuremeng/electron-vue-escpos-bridge

尝试升级一下,结果发现因为版本已经差太多,需要花很多时间修,遂放弃。通过检索,发现有一个新的方案,https://nklayman.github.io/vue-cli-plugin-electron-builder/

于是,开启新的https://github.com/futuremeng/vue-electron-builder-escpos-printer-bridge

先用vue cli4创建一个新的项目,再vue add electron-builder。尝试运行yarn electron:serve 的时候提示Vue Devtools下载失败,需要翻墙跑成功一遍才行。

接下来分析打印机如何连接,通过检索发现escpos这个协议,据说是大部分打印机都支持的。那么是否可以用escpos直接驱动打印机呢,网上有树莓派的示范。

在寻找合适的escpos驱动的时候,发现了各种版本的,除了java、python,还有php和node,我决定选择node版的https://www.npmjs.com/package/escpos

但是,当然当我尝试引入到项目的时候,悲剧发生了。

ERROR Failed to compile with 1 errors 16:30:59

error in ./node_modules/escpos/statuses.js

Module parse failed: Unexpected token (7:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| class DeviceStatus {

byte = ”;
| bits = [];
| bitsAsc = [];

@ ./node_modules/escpos/index.js 12:17-38
@ ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.3.139:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

见到是loader的问题,我就尝试配置babel-loader script-loader file-loader。都没有解决问题,实际上,我也不是很了解这些loader到底是干什么的。

在这个过程中,了解到CommonJS和ES6这些区别,还有,在网页版的vue项目和electron中还涉及到运行环境的问题,网页中没有办法直接调用node接口。

通过孟繁永

自制热敏打印机连接器始末(1)

前情回顾:做了一个网站,需要在网页上打印二维码,将热敏打印机连到电脑上,在网页上直接用print打印出来的二维码完全无法识别,应该是分辨率的问题,因为屏幕的分辨率和打印机的分辨率差太多。所以寻找解决方案,找到了c-lodop.com这个网站提供的中间件,需要付费,而且只有win版。

需求分析:现在重构网站,计划做成saas模式,在打印模块上,需要尽量摆脱第三方的束缚,所以构思如何自己实现。

网页到打印机,这中间是网页-浏览器-操作系统-usb-打印机,这样一个路径。经过确认,网页直接连打印机是不显示的,有一个比较接近的办法是通过chrome的app方案,但通用性不高,放弃,那就只剩下跟lodop一样的模式了,要么把整个网站构建成桌面程序,要么通过中间件来连打印机,网页再通过http或者socket驱动中间件。

当然,选择一个中间件是比较合适的,整个后台构建成桌面程序,没有必要,维护起来也太笨重。

接下来,就是选择跨平台的桌面程序方案来做这个中间件了。需要实现几个部分,一是http或者socket,二是打印机连接,中间的打印机连接管理。

当然,首选相对比较熟悉的vue+electron的方案。

通过孟繁永

期待产品原型、UI设计与开发统一版本管理工具

目前产品原型到UI设计,再到开发测试上线,是分离的,目前尚未发现有一统天下的工具和平台。

我倒是非常渴望有这么一个工具,尤其对于小团队而言。具体的需求就是将产品原型、UI设计、开发测试三者的版本管理集中在一起,每个阶段的某个版本有若干状态,如设计中/已推送/已交付/已验收。墨刀实现了产品经理与UI设计之间的协同,如果再能与开发协同一下则更棒。

对一个项目而言,有这么几个部分,页面树、工作流、页面。页面是基本元素,页面数上可以标注该页面存在的生命周期,如从v1到v4,或者从v3到v5,并且设定发布的url,可以包括测试版地址和发布版地址,工具根据url自动快照,获取当前版本,并通过图像识别对比差异,只保留变更的版本,存入版本库。而产品原型和UI设计的版本分别由产品经理和UI设计师标注和提交。查看时,可以查看最新版,也可以专门查看某一版本的执行情况。

通过孟繁永

融媒体出版物《全民经典朗读范本》

所谓融媒体,无非相对传统的图书来说,除了平面的图文,又多了音频视频和app式的用户交互。不过这些组合带来的是投资的极大增加,一本几万块钱可以搞定的书,也因此需要数百万的投入。

这种形式,适合一定类型的阅读,比如一本讲朗读艺术的书,如果只是用文字来描述,一定不如这些朗诵艺术家亲身示范来得有用,再加上用户自己可以录音并回放,甚至上传到网上参与分享和比赛,那才是一个与实践相结合的学习过程。

这本书定价118元,想买的话自己淘宝吧。

通过孟繁永

城市家用电动三轮车应该是什么样的

1. 车身涂成校车风格,黄色为主 2. 后座加装安全带 3. 加装行车记录仪,当然这个可以自己装,如果能预装更好,好走线 4. 电池安装位设计位方便拆卸的,如果能内置一个小拖车更好,方便带到楼上充电 5. 后背可以参考汽车两厢改成掀背式,方便折叠后座后拉点东西,这样也可以作为取下电池的方式。

通过孟繁永

智能足球

将足球内部安置智能控制平台,靠摄像头或其他探测设备判断位置感知环境,来应对主人的追赶或拦截,至少可以开发出追球游戏,或守门游戏。

通过孟繁永

基于微信的社交导盲系统设计

在Arduino中文论坛上,看到不少关于导盲系统设计的帖子,多数集中在导盲杖或者类似设备的设计上,GPS只能提供粗略的定位功能(10米级别),精确定位(对盲人来说至少需要到10厘米级别,迈步还是不迈步的问题)是难题,于是我决定引入社交网络来解决这个问题。
20140505-181934.jpg

阅读更多