首页 › 点灯·blinker › blinker中图标库使用方法

coloz 发表于 2019-10-28 02:12

blinker中图标库使用方法

# 图标库使用方法
在图标库 (https://fontawesome.com) 中找到要使用的图标，点击进入该图标页面，可以看到其html调用形式，如
```html
<i class="far fa-lightbulb"></i>
```
其中class内容即是我们设备端程序需要的参数。
arduino程序中调用方法如下：
```cpp
Button1.icon("far fa-lightbulb");
```

####开关LED(开关按键)，并改变APP UI:

```cpp
#define BLINKER_WIFI

#include <Blinker.h>

char auth[] = "Your Device Secret Key";
char ssid[] = "Your WiFi network SSID or name";
char pswd[] = "Your WiFi network WPA password or WEP key";

// 新建组件对象
BlinkerButton Button1("btn-abc");

int counter = 0;

// 按下按键即会执行该函数
void button1_callback(const String & state)
{
    BLINKER_LOG("get button state: ", state);
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));

    if (state == BLINKER_CMD_BUTTON_TAP) {
      BLINKER_LOG("Button tap!");

      // Button1.icon("icon_1");
      Button1.color("#FF0000");
      Button1.text("Your button name or describe");
      Button1.print();
    }
    else if (state == BLINKER_CMD_BUTTON_PRESSED) {
      BLINKER_LOG("Button pressed!");

      // Button1.icon("icon_1");
      Button1.color("#FFFF00");
      Button1.text("Your button name or describe");
      Button1.print();
    }
    else if (state == BLINKER_CMD_BUTTON_RELEASED) {
      BLINKER_LOG("Button released!");

      // Button1.icon("icon_1");
      Button1.color("#FFFFFF");
      Button1.text("Your button name or describe");
      // Button1.text("Your button name", "describe");
      Button1.print();
    }
    else if (state == BLINKER_CMD_ON) {
      BLINKER_LOG("Toggle on!");

      // Button1.icon("icon_1");
      Button1.color("#0000FF");
      Button1.text("Your button name or describe");
      // Button1.text("Your button name", "describe");
      Button1.print("on");
    }
    else if (state == BLINKER_CMD_OFF) {
      BLINKER_LOG("Toggle off!");

      // Button1.icon("icon_1");
      Button1.color("#00FFFF");
      Button1.text("Your button name or describe");
      // Button1.text("Your button name", "describe");
      Button1.print("off");
    }
    else {
      BLINKER_LOG("Get user setting: ", state);

      // Button1.icon("icon_1");
      Button1.color("#FFFFFF");
      Button1.text("Your button name or describe");
      // Button1.text("Your button name", "describe");
      Button1.print();
    }
}

void setup()
{
    // 初始化串口
    Serial.begin(115200);
    BLINKER_DEBUG.stream(Serial);
   
    // 初始化有LED的IO
    pinMode(LED_BUILTIN, OUTPUT);
    digitalWrite(LED_BUILTIN, HIGH);
    // 初始化blinker
    Blinker.begin(auth, ssid, pswd);

    Button1.attach(button1_callback);
}

void loop() {
    Blinker.run();
}
```

xiongjiaxiao 发表于 2022-2-12 19:33

为什么我调用了之后图标是空白的啊

coloz 发表于 2022-2-12 22:16

xiongjiaxiao 发表于 2022-2-12 19:33
为什么我调用了之后图标是空白的啊

贴下你调用的代码
app中自带的图标库版本是5.x，可能有些最新的图标不支持。

xiongjiaxiao 发表于 2022-2-14 15:10

coloz 发表于 2022-2-12 22:16
贴下你调用的代码
app中自带的图标库版本是5.x，可能有些最新的图标不支持。 ...

啊？我用的是6.0版本的，难怪，感谢管理员，不过我在5.x.x的版本里没有数字，只有字母，求解决方案！

xiongjiaxiao 发表于 2022-2-14 15:11

我调用的是这个：
Button5.icon("fa-solid fa-0");

xiongjiaxiao 发表于 2022-2-14 15:12

把里面的地址换成例程里的就可以

查看完整版本: blinker中图标库使用方法