Like-O-Meter

A like-o-meter is used when a user shall rate content. In this case it’s a series of stars a user can give.

This time we begin with the desired output. Here is the a screenshot of the final example:

Defining the Star

We begin to sketch our star in a Star.qml file.

import Qt 4.6

Item {
  id: container
  width: 24
  height: 24
  
  property int rating
  property bool on
  signal clicked
  
  Image {
    id: starImage
    source: "images/star.png"
    x: 6
    y: 7
    opacity: 0.4
    scale: 0.5
  }
  MouseRegion {
    anchors.fill: container
    onClicked: { container.clicked() }
  }
  states: [
  State {
    name: "on"
    when: container.on == true
    PropertyChanges {
      target: starImage
      opacity: 1
      scale: 1
      x: 1
      y: 0
    }
  }
  ]
  transitions: [
  Transition {
    NumberAnimation {
      matchProperties: "opacity,scale,x,y"
      easing: "easeOutBounce"
    }
  }
  ]
}

The star.png image looks like this:

The Star.qml component consist mainly of an Image element, the star.png file, which is displayed at 50% scale and 40% opacity.

The star changes when the property on is set to true. This is controlled by the state "on". It changes the opacity to 100% and scale to 100%, additional the position is adjusted. A transition makes the state switch smooth.

Using the Star

The Star.qml component is used inside the LikeOMeter.qml file.

import Qt 4.6

Item {
  id: container
  
  property int rating: 2
  
  Row {
    Star {
      rating: 0
      onClicked: { container.rating = rating }
      on: container.rating >= 0
    }
    Star {
      rating: 1
      onClicked: { container.rating = rating }
      on: container.rating >= 1
    }
    Star {
      rating: 2
      onClicked: { container.rating = rating }
      on: container.rating >= 2
    }
    Star {
      rating: 3
      onClicked: { container.rating = rating }
      on: container.rating >= 3
    }
    Star {
      rating: 4
      onClicked: { container.rating = rating }
      on: container.rating >= 4
    }
  }
}

The LikeOMeter consist of a row of stars. Each star’s on property is set when the rating hits a specific threshold, which then results into painting the star image at 100% scale and 100% opacity based on the star "on" state.

When the star’s mouse region is pressed the clicked signal is emitted and handled in the onClicked handler, in this case it’s updates the container rating property. Which is bound by the threshold to the on property of the star again. So star clicked leads to container rating changes, leads to property on evaluation, can lead to star "on" state. Nice chain!

Using the LikeOMeter

You would use the LikeOMeter similar like this:

import Qt 4.6

Rectangle {
  id: container
  width: 200
  height: 200
  Column {
    anchors.centerIn: parent;
    spacing: 16
    LikeOMeter {
      id: likeOMeter
      width: 150; height: 30
    }
    Text { text: "Rating: " +likeOMeter.rating }
  }
}

The Text is updated, when the rating changes. The rating changes, when a star is clicked. Sweet!