366 lines
12 KiB
QML
366 lines
12 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import RibbonUI
|
|
|
|
/* 仅适用于DL-LN3X系列 */
|
|
|
|
Flow{
|
|
id: control
|
|
property alias text: label.text
|
|
property bool show_text: true
|
|
property bool dark_mode: RibbonTheme.dark_mode
|
|
property bool show_tooltip: true
|
|
property bool is_recieved: false
|
|
property int font_size: 13
|
|
property double component_width: 300
|
|
property int data_width: component_width - (show_text ? label.width : 0) - z_head.width - z_length.width - z_src_port.width -
|
|
z_des_port.width - z_address.width - z_tail.width - spacing*(show_text ? 13 : 12) - 6
|
|
property var data_list
|
|
padding: 5
|
|
|
|
RibbonText {
|
|
id: label
|
|
|
|
height: z_data.height + control.padding * 2
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
font.pixelSize: control.font_size
|
|
visible: control.show_text
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 5
|
|
topRightRadius: 0
|
|
bottomRightRadius: topRightRadius
|
|
implicitWidth: z_head.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
color: z_head_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
RibbonText {
|
|
id: z_head
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list[0] : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 头"
|
|
visible: z_head_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_head_hh
|
|
}
|
|
}
|
|
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 0
|
|
color: z_length_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
implicitWidth: z_length.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
RibbonText {
|
|
id: z_length
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list[1] : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 长"
|
|
visible: z_length_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_length_hh
|
|
}
|
|
}
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 0
|
|
color: z_src_port_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
implicitWidth: z_src_port.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
|
|
RibbonText {
|
|
id: z_src_port
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list[2] : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 源端口"
|
|
visible: z_src_port_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_src_port_hh
|
|
}
|
|
}
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 0
|
|
color: z_des_port_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
implicitWidth: z_des_port.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
|
|
RibbonText {
|
|
id: z_des_port
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list[3] : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 目的端口"
|
|
visible: z_des_port_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_des_port_hh
|
|
}
|
|
}
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 0
|
|
color: z_address_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
implicitWidth: z_address.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
RibbonText {
|
|
id: z_address
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list.slice(4,6).join(" ") : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 源地址"
|
|
visible: z_address_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_address_hh
|
|
}
|
|
}
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: 0
|
|
color: z_data_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
implicitWidth: z_data.width + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
RibbonText {
|
|
id: z_data
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
width: implicitWidth < control.data_width ? implicitWidth : control.data_width
|
|
wrapMode: RibbonText.Wrap
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list.slice(6,data_list.length-1).join(" ") : ""
|
|
font.pixelSize: control.font_size
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 数据"
|
|
visible: z_data_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_data_hh
|
|
}
|
|
}
|
|
|
|
Item {
|
|
height: z_data.height + control.padding * 2
|
|
width: 1
|
|
Rectangle{
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 1
|
|
height: z_data.height - control.padding * 2
|
|
color: control.dark_mode ? "#525252" : "#D4D4D4"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonRectangle{
|
|
radius: parent.radius ? parent.radius / 2 : 5
|
|
color: z_tail_hh.hovered ? control.is_recieved ? control.dark_mode ? "#262626" : "#F0F0F0" : control.dark_mode ? "#313131" : "#6099AA" : "transparent"
|
|
topLeftRadius: 0
|
|
bottomLeftRadius: topLeftRadius
|
|
implicitWidth: z_tail.contentWidth + control.padding * 2
|
|
implicitHeight: z_data.height + control.padding * 2
|
|
|
|
RibbonText {
|
|
id: z_tail
|
|
anchors.centerIn: parent
|
|
color: control.dark_mode ? "white" : control.is_recieved ? "black" : "white"
|
|
text: typeof(data_list[0]) !== "undefined" ? data_list[data_list.length-1] : ""
|
|
font.pixelSize: control.font_size
|
|
horizontalAlignment: RibbonText.AlignHCenter
|
|
verticalAlignment: RibbonText.AlignVCenter
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
text: "ZigBee帧 尾"
|
|
visible: z_tail_hh.hovered && control.show_tooltip
|
|
}
|
|
|
|
HoverHandler{
|
|
id: z_tail_hh
|
|
}
|
|
}
|
|
}
|
|
|