ConnectionSplash.qml 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import QtQuick 2.15
  2. import QtQuick.Controls 2.15
  3. import QtQuick.Layouts 1.15
  4. import "." as Components
  5. Rectangle {
  6. id: root
  7. anchors.fill: parent
  8. color: Components.ThemeManager.backgroundColor
  9. property string statusText: "Connecting to backend..."
  10. property bool showRetryButton: false
  11. signal retryConnection()
  12. ColumnLayout {
  13. anchors.centerIn: parent
  14. spacing: 30
  15. width: Math.min(parent.width * 0.8, 400)
  16. // Logo/Title Area
  17. Rectangle {
  18. Layout.alignment: Qt.AlignHCenter
  19. width: 120
  20. height: 120
  21. radius: 60
  22. color: Components.ThemeManager.cardColor
  23. border.color: "#4a90e2"
  24. border.width: 3
  25. Text {
  26. anchors.centerIn: parent
  27. text: "DW"
  28. font.pixelSize: 36
  29. font.bold: true
  30. color: "#4a90e2"
  31. }
  32. }
  33. Text {
  34. Layout.alignment: Qt.AlignHCenter
  35. text: "Dune Weaver Touch"
  36. font.pixelSize: 32
  37. font.bold: true
  38. color: Components.ThemeManager.textPrimary
  39. }
  40. // Status Area
  41. Rectangle {
  42. Layout.alignment: Qt.AlignHCenter
  43. Layout.preferredWidth: parent.width
  44. Layout.preferredHeight: 80
  45. color: Components.ThemeManager.cardColor
  46. radius: 10
  47. border.color: Components.ThemeManager.borderColor
  48. border.width: 1
  49. RowLayout {
  50. anchors.fill: parent
  51. anchors.margins: 20
  52. spacing: 15
  53. // Spinning loader
  54. Rectangle {
  55. width: 40
  56. height: 40
  57. radius: 20
  58. color: "transparent"
  59. border.color: "#4a90e2"
  60. border.width: 3
  61. Rectangle {
  62. width: 8
  63. height: 8
  64. radius: 4
  65. color: "#4a90e2"
  66. anchors.top: parent.top
  67. anchors.horizontalCenter: parent.horizontalCenter
  68. anchors.topMargin: 2
  69. visible: !root.showRetryButton
  70. }
  71. RotationAnimation on rotation {
  72. running: !root.showRetryButton
  73. loops: Animation.Infinite
  74. from: 0
  75. to: 360
  76. duration: 2000
  77. }
  78. }
  79. Text {
  80. Layout.fillWidth: true
  81. text: root.statusText
  82. font.pixelSize: 16
  83. color: Components.ThemeManager.textSecondary
  84. wrapMode: Text.WordWrap
  85. verticalAlignment: Text.AlignVCenter
  86. }
  87. }
  88. }
  89. // Retry Button (only show when connection fails)
  90. Button {
  91. Layout.alignment: Qt.AlignHCenter
  92. visible: root.showRetryButton
  93. text: "Retry Connection"
  94. font.pixelSize: 16
  95. background: Rectangle {
  96. color: parent.pressed ? "#3a7bc8" : "#4a90e2"
  97. radius: 8
  98. border.color: "#5a9ff2"
  99. border.width: 1
  100. Behavior on color {
  101. ColorAnimation { duration: 150 }
  102. }
  103. }
  104. contentItem: Text {
  105. text: parent.text
  106. font: parent.font
  107. color: "white"
  108. horizontalAlignment: Text.AlignHCenter
  109. verticalAlignment: Text.AlignVCenter
  110. }
  111. onClicked: {
  112. root.showRetryButton = false
  113. root.retryConnection()
  114. }
  115. }
  116. // Connection Help Text
  117. Text {
  118. Layout.alignment: Qt.AlignHCenter
  119. Layout.preferredWidth: parent.width
  120. text: "Waiting for backend connection... Make sure the Dune Weaver backend is running on this device."
  121. font.pixelSize: 14
  122. color: Components.ThemeManager.textTertiary
  123. horizontalAlignment: Text.AlignHCenter
  124. wrapMode: Text.WordWrap
  125. }
  126. }
  127. // Background animation - subtle pulse
  128. Rectangle {
  129. anchors.fill: parent
  130. color: "#4a90e2"
  131. opacity: 0.05
  132. SequentialAnimation on opacity {
  133. running: !root.showRetryButton
  134. loops: Animation.Infinite
  135. NumberAnimation { to: 0.1; duration: 2000 }
  136. NumberAnimation { to: 0.05; duration: 2000 }
  137. }
  138. }
  139. }