Add starfield bg, adjust collection/grid views, fix fonts

Note: fonts do not seem to load reliably on windows, defaulting to Pegasus defaults for now :-(
asdfgasfhsn · May 9, 2019 · c72e08e · c72e08e
1 parent 790af41
commit c72e08e
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 45 deletions.
diff --git a/Carousel.qml b/Carousel.qml
@@ -6,7 +6,7 @@ PathView {
     id: root
 
     property int itemWidth // set this on the calling site
-    readonly property int pathWidth: pathItemCount * itemWidth
+    readonly property int pathWidth: pathItemCount * itemWidth 
 
     signal itemSelected
 

diff --git a/CollectionLogo.qml b/CollectionLogo.qml
@@ -1,6 +1,6 @@
 import QtQuick 2.8
 import QtGraphicalEffects 1.12
-
+import "utils.js" as Utils
 // The collection logo on the collection carousel. Just an image that gets scaled
 // and more visible when selected. Also has a fallback text if there's no image.
 Item {
@@ -16,8 +16,8 @@ Item {
 
     Image {
         id: controllerImage
-        width: vpx(364)
-        height: vpx(364)
+        width: vpx(320)
+        height: vpx(320)
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         fillMode: Image.PreserveAspectFit
@@ -27,23 +27,4 @@ Item {
         scale: selected ? 1.0 : 0.555
         Behavior on scale { NumberAnimation { duration: 333 } }
     }
-    layer.enabled: selected ? true : false
-    layer.effect: DropShadow {
-      fast: true
-      horizontalOffset: 0
-      verticalOffset: 0
-      spread: 0.333
-      radius: vpx(40)
-      samples: 20
-      color: "#909932CC"
-      transparentBorder: true
-      SequentialAnimation on color {
-            loops: Animation.Infinite
-            ColorAnimation { from: "#909932CC"; to: "#900000FF"; duration: 10000 }
-            ColorAnimation { from: "#900000FF"; to: "#909932CC"; duration: 10000 }
-        }
-    }
-
-
-
 }
diff --git a/CollectionsView.qml b/CollectionsView.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.8
 import QtGraphicalEffects 1.12
+import "utils.js" as Utils // some helper functions
 // The collections view consists of two carousels, one for the collection logo bar
 // and one for the background images. They should have the same number of elements
 // to be kept in sync.
@@ -69,7 +70,7 @@ FocusScope {
             id: logoAxis
 
             anchors.fill: parent
-            itemWidth: vpx(500)
+            itemWidth: vpx(460)
 
             model: api.collections
             delegate: CollectionLogo {
@@ -97,6 +98,24 @@ FocusScope {
         }
     }
 
+    LinearGradient {
+      width: parent.width
+      height: parent.height
+      anchors {
+        top: parent.top
+        right: parent.right
+        bottom: parent.bottom
+      }
+      start: Qt.point(0, 0)
+      end: Qt.point(0, height)
+      gradient: Gradient {
+        GradientStop { position: 0.0; color: "#ff000000" }
+        GradientStop { position: 0.2; color: "#6017569b" }
+        GradientStop { position: 0.4; color: "#3017569b" }
+        GradientStop { position: 0.6; color: "#00000000" }
+      }
+    }
+
     Item {
       id: collectionHeader
       width: parent.width
@@ -125,11 +144,11 @@ FocusScope {
           }
         text: "%1".arg(currentCollection.name) || "Not Found"
         color: "black"
-        font.family: "cabin"
+        font.family: globalFonts.sansFont
         fontSizeMode: Text.Fit; minimumPixelSize: vpx(30); font.pixelSize: vpx(52)
         font.capitalization: Font.AllUppercase
         font.weight: Font.Bold
-        
+
         Behavior on text {
           FadeAnimation {
               target: systemNameHeader
@@ -145,7 +164,7 @@ FocusScope {
           text: "≡ %1 TITLES AVAILABLE".arg(currentCollection.games.count)
           color: "black"
           font.pixelSize: vpx(20)
-          font.family: "cabin"
+          font.family: globalFonts.condensed
           Behavior on text {
             FadeAnimation {
                 target: systemItemCount

diff --git a/DetailsView.qml b/DetailsView.qml
@@ -131,7 +131,6 @@ FocusScope {
               height: GridView.view.cellHeight
               selected: GridView.isCurrentItem
               systemColor: Utils.systemColor(currentCollection.shortName)
-              //transform: Rotation { origin.x: parent.width/2; origin.y: parent.width/2; axis { x: 0; y: 1; z: 0 } angle: selected ? 5 : 0 }
 
               game: modelData
 
@@ -221,7 +220,7 @@ LinearGradient {
         text: "≡ %1".arg(currentCollection.name) || "Not Found"
         color: "#f3f3f3"
         font.pixelSize: vpx(18)
-        font.family: "cabin"
+        font.family: globalFonts.condensed
         font.capitalization: Font.AllUppercase
         Behavior on text {
           FadeAnimation {

diff --git a/GameDetailsText.qml b/GameDetailsText.qml
@@ -17,7 +17,7 @@ import QtQuick.Layouts 1.11
       Text {
           id: metaData
           text: metatext
-          font.family: "cabin"
+          font.family: globalFonts.condensed
           font.pixelSize: vpx(14)
           font.capitalization: Font.AllUppercase
           color: "#f3f3f3"

diff --git a/GameGridItem.qml b/GameGridItem.qml
@@ -25,8 +25,8 @@ Rectangle {
     property var game
     property var systemColor
 
-    border.color: systemColor //"#99FFFFFF"
-    border.width: selected ? vpx(3) : 0
+    border.color: selected ? systemColor : "transparent"//"#99FFFFFF"
+    border.width: vpx (6) // selected ? vpx(3) : 0
     color: selected ? "#000000" : "transparent"
 
     property alias imageWidth: boxFront.paintedWidth
@@ -41,7 +41,7 @@ Rectangle {
     signal imageLoaded(int imgWidth, int imgHeight)
 
     scale: selected ? 1.5 : 1.0
-    opacity: selected ? 1 : 0.666
+    opacity: 1 //selected ? 1 : 0.666
     z: selected ? 3 : 1
 
     Behavior on scale { PropertyAnimation { duration: 333 } }
@@ -68,7 +68,7 @@ Rectangle {
 
         source: game.assets.boxFront || ""
         sourceSize { width: 256; height: 256 }
-        fillMode: selected ? Image.PreserveAspectFit : Image.PreserveAspectCrop
+        fillMode: Image.PreserveAspectFit
         smooth: true
 
         onStatusChanged: if (status === Image.Ready) {
@@ -91,8 +91,19 @@ Rectangle {
         }
     }
 
+    Rectangle {
+      id: textBox
+      width: boxFront.width
+      height: boxFront.height
+      anchors.centerIn: parent
+      // anchors.margins: vpx(4)
+      visible: !game.assets.boxFront
+      color: "#000000"
+    }
+
     Text {
-        width: parent.width - vpx(64)
+        width: parent.width - vpx(10)
+        height: parent.height - vpx(10)
         anchors.centerIn: parent
 
         visible: !game.assets.boxFront
@@ -103,7 +114,7 @@ Rectangle {
         color: "#eee"
         font {
             pixelSize: vpx(16)
-            family: globalFonts.sans
+            family: globalFonts.condensed
         }
     }
 

diff --git a/GameInfoText.qml b/GameInfoText.qml
@@ -5,7 +5,7 @@ import QtQuick 2.8
 
 Text {
     font.pixelSize: vpx(12)
-    font.family: "cabin"
+    font.family: globalFonts.condensed
     font.weight: Font.Bold
     elide: Text.ElideRight
 }
diff --git a/HeaderText.qml b/HeaderText.qml
@@ -9,7 +9,7 @@ import QtQuick.Layouts 1.11
     color: "#f3f3f3"
 
     property real textWidth: {
-        if (textMetrics.width > parent.width) return vpx(1230);
+        if (textMetrics.width > vpx(1230)) return vpx(1230);
                 return textMetrics.width;
     }
 
@@ -20,10 +20,9 @@ import QtQuick.Layouts 1.11
     Text {
         id: textMetrics
         font.capitalization: Font.AllUppercase
-        font.family: "cabin"
+        font.family: globalFonts.sansFont
         font.pixelSize: vpx(52)
         font.weight: Font.Bold
-        //font.letterSpacing: vpx(2)
         text: titletext
         visible: false
     }

diff --git a/MetaBox.qml b/MetaBox.qml
@@ -24,7 +24,7 @@ import QtQuick.Layouts 1.11
       text: metaTitle
       color: "black"
       width: parent.width
-      font.family: "cabin"
+      font.family: globalFonts.condensed
       fontSizeMode: Text.Fit; minimumPixelSize: vpx(8); font.pixelSize: vpx(8)
       font.weight: Font.Bold
       font.capitalization: Font.AllUppercase
@@ -42,7 +42,8 @@ import QtQuick.Layouts 1.11
       color: "black"
       width: parent.width
       height: parent.height
-      font.family: "cabin"
+      font.family: globalFonts.sans
+      font.weight: Font.Bold
       font.capitalization: Font.AllUppercase
       fontSizeMode: Text.Fit; minimumPixelSize: vpx(10); font.pixelSize: vpx(44)
       horizontalAlignment: Text.AlignHCenter

diff --git a/RatingDot.qml b/RatingDot.qml
@@ -12,7 +12,7 @@ Item {
     }
     Text {
       text: 'RATING'
-      font.family: "coolvetica" //coolvetica.name
+      font.family: globalFonts.condensed
       font.pixelSize: vpx(10)
       font.weight: Font.Bold
       anchors {
@@ -23,7 +23,7 @@ Item {
     Text {
       id: ratingValue
       text: (game.rating == "") ? "N/A" : Math.round(game.rating * 100) + '%'
-      font.family: "coolvetica" //coolvetica.name
+      font.family: globalFonts.condensed
       fontSizeMode: Text.Fit; minimumPixelSize: vpx(30); font.pixelSize: vpx(36)
       anchors {
         verticalCenter: ratingCircle.verticalCenter

diff --git a/StarField.qml b/StarField.qml
@@ -0,0 +1,76 @@
+import QtQuick 2.8
+import QtQuick.Particles 2.8
+import QtGraphicalEffects 1.12
+
+
+Item {
+  id: starFieldAF
+  width: vpx(1280)
+  height: vpx(720)
+
+  ParticleSystem {
+      id: particlesystemSmall
+      anchors.fill: starFieldAF
+
+      ImageParticle {
+          id: stars
+          source: "assets/starfield/star.png"
+          groups: ["stars"]
+          opacity: 0.3
+          scale: 1
+      }
+
+      Emitter {
+          id: starsemitter
+          anchors.fill: parent
+          emitRate: 100 // parent.width / 10
+          lifeSpan: 20000
+          group: "stars"
+          endSize: vpx(10)
+      }
+  }
+
+  ParticleSystem {
+      id: particlesystemBig
+      anchors.fill: parent
+
+      ImageParticle {
+          id: starsBig
+          source: "assets/starfield/star.png"
+          groups: ["starsBig"]
+          opacity: 0.8
+          scale: 1
+      }
+
+      Emitter {
+          id: starsemitterBig
+          anchors.fill: parent
+          emitRate: 5
+          lifeSpan: 35000
+          group: "starsBig"
+          endSize: vpx(15)
+      }
+  }
+
+  ParticleSystem {
+      id: particlesystemBigger
+      anchors.fill: parent
+
+      ImageParticle {
+          id: starsBigger
+          source: "assets/starfield/star.png"
+          groups: ["starsBigger"]
+          opacity: 1
+          scale: 1
+      }
+
+      Emitter {
+          id: starsemitterBigger
+          anchors.fill: parent
+          emitRate: 0.2
+          lifeSpan: 50000
+          group: "starsBigger"
+          endSize: vpx(30)
+      }
+  }
+}
diff --git a/assets/starfield/star.png b/assets/starfield/star.png
diff --git a/theme.cfg b/theme.cfg
@@ -1,2 +1,5 @@
 name: Homage
 author: asdfgasfhsn
+version: 0.1
+summary: A theme paying a modern Homage to great console and game box art
+homepage: https://github.com/asdfgasfhsn/pegasus-theme-homage/
diff --git a/theme.qml b/theme.qml
@@ -6,7 +6,7 @@ FocusScope {
         collectionsView.currentCollectionIndex = api.memory.get('collectionIndex') || 0;
     }
 
-    FontLoader {id: coolvetica; source: "fonts/coolvetica.regular.ttf" }
+    FontLoader {id: coolveticaRegular; source: "fonts/coolvetica.regular.ttf" }
     FontLoader {id: cabin; source: "fonts/Cabin-Bold.ttf" }
     FontLoader {id: changa; source: "fonts/ChangaOne-italic.ttf" }
     FontLoader {id: contrail; source: "fonts/ContrailOne-Regular.ttf" }
@@ -39,6 +39,25 @@ FocusScope {
         }
       }
 
+      property real fps : 15
+      property int frame : 0
+      property bool running : true
+      property int pixelDim : 6
+
+      Timer {
+          id: timer
+          repeat: true
+          interval: 1000 / fps
+          onTriggered: { frame += 1 }
+          running: parent.running
+      }
+
+      StarField {
+          anchors {
+            left: parent.left
+          }
+      }
+
     // TODO: Possibly use this method for performance reasons...
     // Image {
     //   source: 'assets/backgrounds/grid.png'