use repeater for colors

components/WebSocket.qml

@@ -55,7 +55,7 @@ Item {
     }
 
     WebSocket {
-        property int total_slides: 5
+        property int total_slides: 150
 
         id: socket
         url: "wss://wscasa.especificosba.com.ar"
@@ -63,9 +63,8 @@ Item {
         property bool isOpen: false
 
         onTextMessageReceived: {
-            /*if (message.indexOf("snowmix") > -1)
+            if (message.indexOf("snowmix") > -1)
                 return
-            */
             var obj = JSON.parse(message)
             switch (obj.type) {
             case "diapo":
@@ -74,7 +73,7 @@ Item {
                 item1.curImage = obj.slide //automagically change_image
                 if (obj.total_slides === undefined){
                     console.log(obj);
-                    total_slides = 3
+                    total_slides = 300
                 } else {
                     total_slides = obj.total_slides
                 }

main.qml

@@ -83,7 +83,7 @@ ApplicationWindow {
 
                     property color strokeStyle: Qt.darker(fillStyle, 1.2)
                     property color fillStyle: "#6400aa"
-                    property string curColor: "#ff0000"
+                    property string curColor: "#f00"
 
                     property real px: width / 2
                     property real py: height / 2 + 10
@@ -104,9 +104,7 @@ ApplicationWindow {
                     }
 
                     function clean_path() {
-                        //points_array = []
                         points_array.length=0
-                        console.log("clean")
                         full_repaint()
                     }
 
@@ -172,7 +170,6 @@ ApplicationWindow {
                             ctx.strokeStyle = color;
                             console.log("Changing colors");
                         }
-                        console.log(points.length)
                         ctx.beginPath()
                         ctx.moveTo(points[0].x, points[0].y)
                         var i = 0;
@@ -277,6 +274,7 @@ ApplicationWindow {
                             id: image2
                             width: parent.width/2
                             height: 70
+
                             Image {
                                 anchors.centerIn: parent.Center
                                 height: parent.height
@@ -320,93 +318,38 @@ ApplicationWindow {
                     id: column1
                     width: parent.width
                     height: parent.height / 2 - 60
-
-                    Row {
-                        id: row3
-                        width: parent.width
-                        height: 70
-
-                        Button {
-                            height: 70
-                            width: parent.width/3
-                            id: color3
-                            checkable: true
-                            onClicked: {
-                                color1.checked = false
-                                color2.checked = false
-                                checked = true
-                                canvas.curColor = "#0000ff"
-                            }
-                            style: ButtonStyle {
-                                background: Rectangle {
-                                    implicitWidth: 100
-                                    implicitHeight: 25
-                                    border.width: 3
-                                    border.color: color3.checked?"#000":"#FFF"
-                                    radius: 8
-                                    gradient: Gradient {
-                                        GradientStop { position: 0 ; color: "#00f" }
-                                        GradientStop { position: 1 ; color: "#00f" }
-                                    }
-                                }
-                            }
-                        }
-
-                        Button {
+                    Repeater{
+                        model: [ ["#00f", "#0f0", "#f00"], ["#ff0", "#0ff", "#000"] ]
+                        Row {
+                            width: parent.width
                             height: 70
-                            width: parent.width/3
-                            id: color2
-                            checkable: true
-                            onClicked: {
-                                color1.checked = false
-                                color3.checked = false
-                                checked = true
-                                canvas.curColor = "#00ff00"
-                            }
-                            style: ButtonStyle {
-                                background: Rectangle {
-                                    implicitWidth: 100
-                                    implicitHeight: 25
-                                    border.width: 3
-                                    border.color: color2.checked?"#000":"#FFF"
-                                    radius: 8
-                                    gradient: Gradient {
-                                        GradientStop { position: 0 ; color: "#0f0" }
-                                        GradientStop { position: 1 ; color: "#0f0" }
-                                    }
-                                }
-                            }
-                        }
-
-                        Button {
-                            width: parent.width/3
-                            height: 70
-                            id: color1
-                            checked: true
-                            checkable: true
-                            onClicked: {
-                                color2.checked = false
-                                color3.checked = false
-                                checked = true
-                                canvas.curColor = "#ff0000"
-                            }
-                            style: ButtonStyle {
-                                background: Rectangle {
-                                    implicitWidth: 100
-                                    implicitHeight: 25
-                                    border.width: 3
-                                    border.color: color1.checked?"#000":"#FFF"
-                                    radius: 8
-                                    gradient: Gradient {
-                                        GradientStop { position: 0 ; color: "#f00" }
-                                        GradientStop { position: 1 ; color: "#f00" }
+                            Repeater {
+                                model: modelData
+                                Button {
+                                    height: 70
+                                    width: parent.width/3
+                                    checkable: true
+                                    checked: canvas.curColor === modelData
+                                    onClicked: canvas.curColor = modelData
+
+                                    style: ButtonStyle {
+                                        background: Rectangle {
+                                            implicitWidth: 100
+                                            implicitHeight: 25
+                                            border.width: 3
+                                            border.color: canvas.curColor === modelData ?"#000":"#FFF"
+                                            radius: 8
+                                            gradient: Gradient {
+                                                GradientStop { position: 0 ; color: modelData }
+                                                GradientStop { position: 1 ; color: modelData }
+                                            }
+                                        }
                                     }
                                 }
                             }
                         }
-
-
                     }
+
                     Button {
                         height: 70
                         width: parent.width