Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zlgopen/awtk-widget-qr

qrcode widget, generated by awtk-widget-generator
https://github.com/zlgopen/awtk-widget-qr

awtk qrcode

Last synced: 4 days ago
JSON representation

qrcode widget, generated by awtk-widget-generator

Awesome Lists containing this project

README 

        
# awtk-widget-qr



qr 控件。用于显示二维码控件。



![](docs/images/ui.jpg)



* 本项目使用 [libqrencode](https://github.com/fukuchi/libqrencode) 生成二维码。



* 本项目使用 [awtk-widget-generator](https://github.com/zlgopen/awtk-widget-generator) 生成代码框架。



## 准备



1. 获取 awtk 并编译



```

git clone https://github.com/zlgopen/awtk.git

cd awtk; scons; cd -

```



2. 获取 awtk-widget-qr 并编译

```

git clone https://github.com/zlgopen/awtk-widget-qr.git

cd awtk-widget-qr; scons

```



## 运行



1. 生成示例代码的资源



```

python scripts/update_res.py all

```

> 也可以使用 Designer 打开项目，之后点击 “打包” 按钮进行生成；

> 如果资源发生修改，则需要重新生成资源。



如果 PIL 没有安装，执行上述脚本可能会出现如下错误：

```cmd

Traceback (most recent call last):

...

ModuleNotFoundError: No module named 'PIL'

```

请用 pip 安装：

```cmd

pip install Pillow

```



2. 编译



* 编译PC版本



```

scons

```



* 编译LINUX FB版本



```

scons LINUX_FB=true

```



> 完整编译选项请参考[编译选项](https://github.com/zlgopen/awtk-widget-generator/blob/master/docs/build_options.md)



3. 运行



```

./bin/demo

```



## 如何使用二维码控件



### 设置需要转成二维码的字符串



qr 控件 `value` 属性内容就是转成二维码的字符串内容。



在界面描述文件设置：



```xml



  



```



或在代码中设置：



```c

widget_t* win = window_open("main");

widget_t* qr = widget_lookup(win, "qr", TRUE);

qr_set_value(qr, "https://github.com/zlgopen/awtk");

```



按照上述例子设置完成后，用手机扫该二维码就会打开[ https://github.com/zlgopen/awtk ](https://github.com/zlgopen/awtk)网址。



### 设置二维码中的颜色与图片



添加图片资源到项目中：



![](./design/default/images/x1/message.png)



在样式文件中设置 qr 控件样式在对应状态设置 `fg_color` ，`bg_color`，`bg_image` 属性：



```xml



  

    <!-- fg_color 为二维码颜色，bg_color 为二维码背景色 -->

    <normal fg_color="black" bg_color="white" bg_image="message"/>



    <!-- disable 状态用于模拟 被扫描 状态 -->

    <!-- 不设置 bg_image 属性，则该状态二维码中间没有图片 -->

    <disable fg_color="gray" bg_color="#f0f0f0"/>

  



```



从上述例子得到的效果为：



正常状态：



![](./docs/images/normal_style.png)



被扫描状态：



![](./docs/images/scanned_style.png)



**注意**：图片大小不可以大于二维码的 `45%` ，否则图片将会被裁剪：



图片资源：



![](./design/default/images/x3/message.png)



得到的二维码：



![](./docs/images/clip_image.png)



qr 控件的属性名及作用如下表所示：



| 属性名 | 作用                   |

| ------ | ---------------------- |

| value  | 要转换为二维码的字符串 |



## 文档



[完善自定义控件](https://github.com/zlgopen/awtk-widget-generator/blob/master/docs/improve_generated_widget.md)