本篇来介绍在OK3568开发板上运行一个Qt彩色氛围灯控制程序。

1 设计Qt滑条控制LED界面

先来看一下最终设计的界面效果：

有一个按键作为LED的总开关，控制LED的点亮与熄灭。下面的3个滑条，控制3种颜色LED以不同的亮度点亮。右边是一个颜色混合显示面板，模拟RGB三种颜色的LED以不同亮度点亮后的混合亮度。

1.1 滑条控件

Qt Creator的UI设置界面中，有水平滑条和竖直滑条控件，可以直接使用：

右侧的属性窗户可以设置滑条的取值范围和初始值。

1.2 控件颜色

使用****QPalette可以对界面颜色和控件的颜色进行自定义设置

• QPalete::Window——通常指窗口部件的背景色
• QPalette::WindowText——通常指窗口不见的前景色
• QPalette::Base——底色
• QPalette::Button——指按钮窗口部件的背景色
• QPalette::ButtonText——指按钮窗口部件的前景色
• QPalette::Text——文本输入窗口的前景色
• QPalette::Background——背景色
• QPalette::Foreground——前景色(界面中文字的统一颜色)

1.2.1 界面的颜色

整个UI界面的颜色可以这样设置：

QPalette color = palette();//控制窗体颜色
color.setColor(QPalette::Background, QColor(255,255,255));//背景颜色
//color.setColor(QPalette::Foreground, QColor(0,0,255,255));//前景颜色
setPalette(color);

这里就是把整个界面的颜色设置为纯白色

1.2.2 控件的颜色

**例如文本标签控件（**QLabel）的文字颜色可以这样设置：

QPalette pal;
pal.setColor(QPalette::WindowText,Qt::red);
ui->label_R->setPalette(pal); //设置滑条左侧的R字体为红色
pal.setColor(QPalette::WindowText,Qt::green);
ui->label_G->setPalette(pal);
pal.setColor(QPalette::WindowText,Qt::blue);
ui->label_B->setPalette(pal);

**颜色混合面板控件（**QTextBrowser）的面板颜色可以这样设置：

QColor color;
int R = ui->Slider_R->value(); //读取滑条的当前值
int G = ui->Slider_G->value();
int B = ui->Slider_B->value();
color.setRgb(R, G, B); //颜色混合
QPalette pal;
pal.setColor(QPalette::Base, color);
ui->textBrowser->setPalette(pal); //显示到面板上

1.3 滑条UI界面代码编写

构造函数

LedWidget::LedWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::LedWidget)
{
    ui->setupUi(this);
    ui->Value_R->setText(QString::number(ui->Slider_R->value()));
    ui->Value_G->setText(QString::number(ui->Slider_G->value()));
    ui->Value_B->setText(QString::number(ui->Slider_B->value()));
​
    QPalette color = palette();//控制窗体颜色
    color.setColor(QPalette::Background, QColor(255,255,255));//背景颜色
    setPalette(color);
}

滑条滑动时的槽函数

void LedWidget::on_Slider_R_valueChanged(int value)
{
    ui->Value_R->setText(QString::number(value));
    UpdateShowColor();
}
​
void LedWidget::on_Slider_G_valueChanged(int value)
{
    ui->Value_G->setText(QString::number(value));
    UpdateShowColor();
}
​
void LedWidget::on_Slider_B_valueChanged(int value)
{
    ui->Value_B->setText(QString::number(value));
    UpdateShowColor();
}

更新RGB三种颜色的混合显示

void LedWidget::UpdateShowColor()
{
    QColor color;
    int R = ui->Slider_R->value();
    int G = ui->Slider_G->value();
    int B = ui->Slider_B->value();
    color.setRgb(R, G, B);
    QPalette pal;
    pal.setColor(QPalette::Base, color);
    ui->textBrowser->setPalee(pal);
}

2 实验演示

在Ubuntu中使用RK3568的编译工具链进行交叉编译，然后将编译文件放到OK3568板子中运行。实际测试效果如下。

显示蓝色

显示绿色

显示红色

显示RGB三种颜色的混合色

后期可以将RGB的控制之利用起来，控制实际的RGB彩灯硬件进行RGB调光。

3 总结

本篇实现了在OK3568开发板上运行一个编写Qt RGB氛围灯程序。可以进行红绿蓝三种颜色的组合。