Toise: generic object to center current mark

qml/ScaleToise.qml

@@ -6,100 +6,35 @@ import QtQuick 2.0
  * Display notes from scale, with current note centered.
  */
 
-Item {
+Toise {
 	id: scale
 
-	property QtObject theme
-	
 	// note or note + 12 * octave
 	property int note: 1
+	// en or fr
+	property int notes_style: 0
 
 	property variant notes_fr: [
 		"do", "do#", "ré", "mib", "mi", "fa", "fa#", "sol", "sol#", "la", "sib", "si"]
 	property variant notes_en: [
 		"C", "C#", "D", "Eb", "E", "F", "F#", "G", "G#", "A", "Bb", "B"]
 	property variant notes: [notes_en, notes_fr]
-	property int notes_style: 0
 
+	// case colors
 	property color colorAltered: "#40888888"
 	property color colorNatural: "transparent"
 
-	property int h_margin: Math.max(height / 8, main_note.border_d)
+	// Toise parameters
+	index: note
+	marks: notes[notes_style]
+	nb_marks_displayed: Math.min(nb_marks, width / theme.fontSizeLarge * 0.8)
 
-	property int nb_notes: 12
+	mark_color: function(note) {
-	property int nb_notes_displayed: Math.min(nb_notes, width / theme.fontSizeLarge * 0.8)
+		if (isAltered(note)) return colorAltered;
-
+		else return colorNatural;
-	/// current note is on the middle
-	property double position: note - (nb_notes_displayed - 1) / 2
-
-	property int first_note: Math.floor(position) % nb_notes
-	property double delta: position - Math.floor(position)
-
-	onFirst_noteChanged: console.log(first_note + " " + note + " " + nb_notes_displayed + " " + position)
-
-	function note_name(i) {
-		return notes[notes_style][i];
 	}
 
 	function isAltered(i) {
 		return (i < 4 && (i & 1)) || (i > 5 && !(i & 1))
 	}
-
-	Behavior on position {
-		NumberAnimation {
-			duration: 200
-			easing.amplitude: nb_notes
-		}
-	}
-
-	Row {
-		id: toise
-		anchors.top: parent.top
-		anchors.left: parent.left
-		anchors.leftMargin: - cellWidth * delta
-		anchors.bottom: parent.bottom
-		anchors.right: parent.right
-		anchors.topMargin: h_margin
-		anchors.bottomMargin: h_margin
-		property double cellWidth: parent.width / nb_notes_displayed
-
-		Repeater {
-			model: nb_notes_displayed + 1
-			Rectangle {
-				width: toise.cellWidth
-				height: toise.height
-				border.width: 1
-				property int note: (index + nb_notes + first_note) % nb_notes
-				color: isAltered(note) ? colorAltered : colorNatural
-
-				Text {
-					anchors.horizontalCenter: parent.horizontalCenter
-					anchors.verticalCenter: parent.verticalCenter
-					text: note_name(note)
-					color: theme.primaryColor
-					font.pixelSize: parent.height / 2
-				}
-			}
-		}
-	}
-
-	// Screen for actual note
-	Rectangle {
-		id: main_note
-		y: 0
-		x: toise.cellWidth * (parent.nb_notes_displayed - 1) / 2  - border_d
-		width: toise.cellWidth + border_d * 2
-		height: parent.height
-
-		property int border_d: 10
-
-		color: "transparent"
-		border.width: border_d
-		border.color: "#a0777777"
-	}
-
-/*
-	onPositionChanged: {
-		console.log("note " + note_name(note % nb_notes) + " pos " + position + " first note " + first_note + " delta " + delta)
-	}*/
 }

qml/Toise.qml

@@ -0,0 +1,86 @@
+import QtQuick 2.0
+
+/**
+ * Toise
+ *
+ * Display marks with current centered
+ */
+
+Item {
+	id: scale
+
+	property QtObject theme
+	
+	// mark index
+	property int index: 1
+	// array of marks
+	property variant marks: []
+	// function to get mark color
+	property var mark_color: function (id) { return "transparent" }
+
+	property int h_margin: Math.max(height / 8, main_mark.border_d)
+
+	property int nb_marks: marks.length
+
+	property int nb_marks_displayed: nb_marks
+
+	/// current mark is on the middle
+	property double position: index - (nb_marks_displayed - 1) / 2
+
+	property int first_mark: Math.floor(position) % nb_marks
+	property double delta: position - Math.floor(position)
+
+	Behavior on position {
+		NumberAnimation {
+			duration: 200
+			easing.amplitude: nb_marks
+		}
+	}
+
+	Row {
+		id: toise
+		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.leftMargin: - cellWidth * delta
+		anchors.bottom: parent.bottom
+		anchors.right: parent.right
+		anchors.topMargin: h_margin
+		anchors.bottomMargin: h_margin
+
+		property double cellWidth: parent.width / nb_marks_displayed
+
+		Repeater {
+			model: nb_marks_displayed + 1
+			Rectangle {
+				width: toise.cellWidth
+				height: toise.height
+				border.width: 1
+				property int idx: (index + nb_marks + first_mark) % nb_marks
+				color: mark_color(idx)
+
+				Text {
+					anchors.horizontalCenter: parent.horizontalCenter
+					anchors.verticalCenter: parent.verticalCenter
+					text: marks[idx]
+					color: theme.primaryColor
+					font.pixelSize: parent.height / 2
+				}
+			}
+		}
+	}
+
+	// Screen for actual mark
+	Rectangle {
+		id: main_mark
+		y: 0
+		x: toise.cellWidth * (parent.nb_marks_displayed - 1) / 2  - border_d
+		width: toise.cellWidth + border_d * 2
+		height: parent.height
+
+		property int border_d: 10
+
+		color: "transparent"
+		border.width: border_d
+		border.color: "#a0777777"
+	}
+}

qml/TunerScreen.qml

@@ -6,6 +6,7 @@ import QtQuick 2.0
  */
 
 Item {
+	id: main
 	/// tuner object
 	property QtObject tuner
 	/// theme corresponding to Silica Theme object
@@ -28,13 +29,18 @@ Item {
 		level: tuner.found ? tuner.deviation * 100 : -50
 	}
 
+	Item {
+		anchors.top: meter.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+
 		ScaleToise {
 			id: toise
-		theme: parent.theme
+			theme: main.theme
 
-		anchors.top: meter.bottom
-		anchors.topMargin: h_margin * 2
 			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.verticalCenter: parent.verticalCenter
 
 			width: meter.width
 			height: Math.max(width / 10, theme.fontSizeLarge * 1.8)
@@ -42,3 +48,4 @@ Item {
 			note: tuner.note + toise.nb_notes * tuner.octave
 		}
 	}
+}

qml/desktop.qrc

@@ -6,5 +6,6 @@
 <file>TunerScreen.qml</file>
 <file>CircleMeter.qml</file>
 <file>ScaleToise.qml</file>
+<file>Toise.qml</file>
 </qresource>
 </RCC>

qml/sailfish.qrc

@@ -5,5 +5,6 @@
 <file>TunerScreen.qml</file>
 <file>CircleMeter.qml</file>
 <file>ScaleToise.qml</file>
+<file>Toise.qml</file>
 </qresource>
 </RCC>