canal_lock, fix layout issues

src/activities/canal_lock/CanalLock.qml

@@ -33,9 +33,12 @@ ActivityBase {
 
     property string url: "qrc:/gcompris/src/activities/canal_lock/resource/"
 
-    pageComponent: Item {
+    pageComponent: Image {
         id: background
+        source: activity.url + "sky.svg"
         anchors.fill: parent
+        sourceSize.width: width
+        sourceSize.height: height
 
         property int running: 0
 
@@ -46,7 +49,7 @@ ActivityBase {
             activity.start.connect(start)
             activity.stop.connect(stop)
         }
-        
+
         IntroMessage {
             id: message
             anchors {
@@ -58,7 +61,7 @@ ActivityBase {
                 leftMargin: 5
             }
             z: 100
-            intro: [      
+            intro: [
                 qsTr("Your goal is to get Tux across the canal lock to get the wooden logs, "
                      +"using the different types of water locks available."),
                 qsTr("The vertical colored bars represent the water locks, which can be operated by clicking them. "
@@ -70,14 +73,6 @@ ActivityBase {
 
         onStart: water.state = 'down'
 
-        Image {
-            id: sky
-            source: activity.url + "sky.svg"
-            sourceSize.width: parent.width
-            anchors.top: parent.top
-            height: (background.height - canal.paintedHeight) / 2 + canal.paintedHeight * 0.6
-        }
-
         Image {
             source: activity.url + "sun.svg"
             sourceSize.width: Math.min(120 * ApplicationInfo.ratio, parent.width * 0.15)
@@ -103,40 +98,58 @@ ActivityBase {
             anchors.topMargin: parent.height * 0.02
         }
 
-        Image {
-            source: activity.url + "ground.svg"
-            sourceSize.width: parent.width
-            anchors.bottom: parent.bottom
-            height: (background.height - canal.paintedHeight) / 2 + canal.paintedHeight * 0.3
+        Rectangle {
+            color: "#805451"
+            anchors.left: background.left
+            anchors.right: background.right
+            anchors.top: canal.bottom
+            anchors.topMargin: -boat.leftPositionY
+            anchors.bottom: background.bottom
+        }
+
+        Item {
+            id: canalArea
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: bar.top
         }
 
         Image {
             id: canal
             source: activity.url + "canal_lock.svg"
-            anchors.fill: parent
-            sourceSize.width: parent.width
+            anchors.centerIn: canalArea
+            height: canalArea.height
+            width: canalArea.width
+            sourceSize.width: width
+            sourceSize.height: height
             fillMode: Image.PreserveAspectFit
 
             Image {
+                id: canalLeft
                 source: activity.url + "canal_left.svg"
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
+                anchors.top: canal.top
+                anchors.left: canal.left
                 width: (background.width - parent.paintedWidth) / 2 + 1
-                sourceSize.height: parent.paintedHeight
+                height: parent.height
+                sourceSize.height: height
+                fillMode: Image.TileHorizontally
             }
 
             Image {
                 source: activity.url + "canal_right.svg"
-                anchors.verticalCenter: parent.verticalCenter
+                anchors.top: canal.top
                 anchors.right: parent.right
-                width: (background.width - parent.paintedWidth) / 2 + 1
-                sourceSize.height: parent.paintedHeight
+                width: canalLeft.width
+                height: parent.height
+                sourceSize.height: height
+                fillMode: Image.TileHorizontally
             }
 
             Rectangle {
                 id: water
                 anchors.bottom: parent.bottom
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.23
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.horizontalCenterOffset: parent.paintedWidth * 0.035
@@ -145,7 +158,7 @@ ActivityBase {
                 height: minHeight
                 state: "undef"
 
-                property int maxHeight: parent.paintedHeight * 0.33
+                property int maxHeight: canal.paintedHeight * 0.328
                 property int minHeight: canal.paintedHeight * 0.15
                 property int duration: 3500
 
@@ -180,11 +193,11 @@ ActivityBase {
             Lock {
                 id: lock1
                 color: "#dfb625"
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.03
-                anchors.horizontalCenterOffset: - parent.paintedWidth * 0.16
+                anchors.horizontalCenterOffset: - canal.paintedWidth * 0.16
                 minHeight: canal.paintedHeight * 0.05
-                maxHeight: parent.paintedHeight * 0.18
+                maxHeight: canal.paintedHeight * 0.18
                 duration: 0
 
                 MouseArea {
@@ -214,11 +227,11 @@ ActivityBase {
             Lock {
                 id: lock2
                 color: "#dfb625"
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.03
-                anchors.horizontalCenterOffset: parent.paintedWidth * 0.22
+                anchors.horizontalCenterOffset: canal.paintedWidth * 0.22
                 minHeight: canal.paintedHeight * 0.05
-                maxHeight: parent.paintedHeight * 0.18
+                maxHeight: canal.paintedHeight * 0.18
                 duration: 0
 
                 MouseArea {
@@ -248,9 +261,9 @@ ActivityBase {
             Lock {
                 id: door1
                 color: "#31cb25"
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.2
-                anchors.horizontalCenterOffset: - parent.paintedWidth * 0.07
+                anchors.horizontalCenterOffset: - canal.paintedWidth * 0.07
                 minHeight: canal.paintedHeight * 0.05
                 maxHeight: canal.paintedHeight * 0.4
                 duration: 0
@@ -281,9 +294,9 @@ ActivityBase {
             Lock {
                 id: door2
                 color: "#31cb25"
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.2
-                anchors.horizontalCenterOffset: parent.paintedWidth * 0.14
+                anchors.horizontalCenterOffset: canal.paintedWidth * 0.14
                 minHeight: canal.paintedHeight * 0.15
                 maxHeight: canal.paintedHeight * 0.4
                 duration: 0
@@ -314,12 +327,12 @@ ActivityBase {
             Image {
                 id: leftLight
                 source: activity.url + "light_red.svg"
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottom: canal.bottom
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.46
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: - parent.paintedWidth * 0.18
-                sourceSize.height: parent.paintedHeight * 0.1
+                anchors.horizontalCenter: canal.horizontalCenter
+                anchors.horizontalCenterOffset: - canal.paintedWidth * 0.18
+                sourceSize.height: canal.paintedHeight * 0.1
 
                 states: [
                     State {
@@ -342,12 +355,12 @@ ActivityBase {
             Image {
                 id: rightLight
                 source: activity.url + "light_red.svg"
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: (background.height - canal.paintedHeight) / 2 +
+                anchors.bottom: canal.bottom
+                anchors.bottomMargin: (canal.height - canal.paintedHeight) / 2 +
                                       canal.paintedHeight * 0.60
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: parent.paintedWidth * 0.20
-                sourceSize.height: parent.paintedHeight * 0.1
+                anchors.horizontalCenter: canal.horizontalCenter
+                anchors.horizontalCenterOffset: canal.paintedWidth * 0.20
+                sourceSize.height: canal.paintedHeight * 0.1
                 mirror: true
 
                 states: [
@@ -373,13 +386,14 @@ ActivityBase {
                 source: activity.url + "boat1.svg"
                 sourceSize.width: water.width * 0.74
                 anchors {
-                    bottom: parent.bottom
+                    bottom: canal.bottom
                     bottomMargin: leftPositionY
-                    horizontalCenter: parent.horizontalCenter
+                    horizontalCenter: canal.horizontalCenter
                     horizontalCenterOffset: leftPositionX
 
                     onHorizontalCenterOffsetChanged: {
-                        if(boat.anchors.horizontalCenterOffset == boat.rightPositionX) {
+                        if(boat.anchors.horizontalCenterOffset == boat.rightPositionX &&
+                            boat.source == activity.url + "boat1.svg") {
                             boat.source = activity.url + "boat2.svg"
                             bonus.good("flower")
                         } else if(boat.anchors.horizontalCenterOffset == boat.leftPositionX) {
@@ -389,13 +403,13 @@ ActivityBase {
                 }
                 state: 'left'
 
-                property int leftPositionX: - (parent.paintedWidth / 2) * 0.8
-                property int leftPositionY: (background.height - canal.paintedHeight) / 2 +
+                property int leftPositionX: - (canal.paintedWidth / 2) * 0.8
+                property int leftPositionY: (canal.height - canal.paintedHeight) / 2 +
                                             canal.paintedHeight * 0.37
                 property int middlePositionX: canal.paintedWidth * 0.035
-                property int rightPositionX: (parent.paintedWidth / 2) * 0.7
-                property int rightPositionY: (background.height - canal.paintedHeight) / 2 +
-                                            canal.paintedHeight * 0.55 // > 0.5  < 0.6
+                property int rightPositionX: (canal.paintedWidth / 2) * 0.7
+                property int rightPositionY: (canal.height - canal.paintedHeight) / 2 +
+                                            canal.paintedHeight * 0.55
                 property int duration: 0
 
                 Behavior on anchors.horizontalCenterOffset {

src/activities/canal_lock/resource/canal_left.svg

@@ -13,7 +13,7 @@
    height="590.30927"
    id="svg2"
    sodipodi:version="0.32"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
    version="1.0"
    sodipodi:docname="canal_left.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
@@ -31,17 +31,17 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="2.8284272"
-     inkscape:cx="-222.46525"
-     inkscape:cy="172.90504"
+     inkscape:cx="-0.43372593"
+     inkscape:cy="206.76207"
      inkscape:document-units="px"
      inkscape:current-layer="BACKGROUND"
      showgrid="false"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:window-width="1880"
-     inkscape:window-height="1060"
-     inkscape:window-x="-3"
-     inkscape:window-y="-3"
+     inkscape:window-width="1884"
+     inkscape:window-height="1054"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -56,7 +56,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
         <dc:date>2015</dc:date>
         <dc:creator>
           <cc:Agent>
@@ -88,15 +88,9 @@
      id="BACKGROUND"
      inkscape:label="BACKGROUND"
      style="display:inline"
-     transform="translate(77.828423,58.93059)">
-    <path
-       style="fill:#4f76d6;fill-opacity:1;stroke:none;display:inline;stroke-width:1.02;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m -79.873753,298.26224 18.046723,-0.61619 -0.01046,102.02075 -18.101376,0 z"
-       id="rect5246"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccc" />
+     transform="translate(77.828423,58.930595)">
     <g
-       style="stroke:none;display:inline"
+       style="display:inline;stroke:none"
        id="g8068"
        transform="matrix(1.0047582,0,0,1.0047582,8.296667,40.54157)" />
     <g
@@ -107,9 +101,15 @@
          id="g8511" />
     </g>
     <path
-       style="fill:#999999;fill-opacity:1;stroke:none;stroke-width:1.02;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
-       d="m -62.153306,293.60694 -17.488109,0 0,13.78447 17.488109,0 z"
-       id="rect5241"
+       style="display:inline;fill:#4f76d6;fill-opacity:1;stroke:none;stroke-width:1.01999998;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m -79.873753,298.26224 18.046723,-0.61619 -0.01046,101.44362 h -18.101376 z"
+       id="rect5246-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="display:inline;fill:#999999;fill-opacity:1;stroke:none;stroke-width:1.01999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m -62.153306,293.99967 h -17.488109 v 12.999 h 17.488109 z"
+       id="rect5241-6"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccccc" />
   </g>
@@ -118,5 +118,5 @@
      id="FRONT"
      style="display:inline"
      inkscape:label="FRONT"
-     transform="translate(77.828423,58.93059)" />
+     transform="translate(77.828423,58.930595)" />
 </svg>

src/activities/canal_lock/resource/canal_right.svg

@@ -13,7 +13,7 @@
    height="590.30927"
    id="svg2"
    sodipodi:version="0.32"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
    version="1.0"
    sodipodi:docname="canal_right.svg"
    inkscape:output_extension="org.inkscape.output.svg.inkscape"
@@ -30,18 +30,18 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="4.0000001"
-     inkscape:cx="-30.361444"
+     inkscape:zoom="2.8284272"
+     inkscape:cx="-86.861443"
      inkscape:cy="246.46782"
      inkscape:document-units="px"
      inkscape:current-layer="BACKGROUND"
      showgrid="false"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:window-width="1880"
-     inkscape:window-height="1060"
-     inkscape:window-x="-3"
-     inkscape:window-y="-3"
+     inkscape:window-width="1884"
+     inkscape:window-height="1054"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
      inkscape:window-maximized="1"
      fit-margin-top="0"
      fit-margin-left="0"
@@ -56,7 +56,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
         <dc:date>2015</dc:date>
         <dc:creator>
           <cc:Agent>
@@ -90,26 +90,15 @@
      style="display:inline"
      transform="translate(77.828423,58.93059)">
     <path
-       style="fill:#4f76d6;fill-opacity:1;stroke:none;stroke-width:1.0200001;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
-       d="m -79.873753,202.00045 18.046723,-1.20113 -0.01046,198.86745 -18.101376,0 z"
-       id="rect5246"
+       style="display:inline;fill:#4f76d6;fill-opacity:1;stroke:none;stroke-width:1.0200001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m -79.87375,202.00045 18.04672,-1.20113 -0.0105,198.29036 h -18.10138 z"
+       id="rect5246-7"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccccc" />
-    <g
-       style="stroke:none;display:inline"
-       id="g8068"
-       transform="matrix(1.0047582,0,0,1.0047582,8.296667,40.54157)" />
-    <g
-       transform="translate(87.780878,94.819668)"
-       id="g8509">
-      <g
-         transform="translate(-9.5,-16)"
-         id="g8511" />
-    </g>
     <path
-       style="fill:#999999;fill-opacity:1;stroke:none;stroke-width:1.01999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
-       d="m -62.153306,189.60694 -17.488109,0 0,13.78447 17.488109,0 z"
-       id="rect5241"
+       style="display:inline;fill:#999999;fill-opacity:1;stroke:none;stroke-width:1.01999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m -62.15331,189.50068 h -17.4881 v 13 h 17.4881 z"
+       id="rect5241-6"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="ccccc" />
   </g>

src/activities/canal_lock/resource/ground.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="800"
-   height="400"
-   id="svg4509"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="ground.svg">
-  <defs
-     id="defs4511" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="-225.57143"
-     inkscape:cy="281.14286"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="975"
-     inkscape:window-height="630"
-     inkscape:window-x="0"
-     inkscape:window-y="14"
-     inkscape:window-maximized="0" />
-  <metadata
-     id="metadata4514">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-        <dc:date>2015</dc:date>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Timothée Giet</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-83.428574,-412.07648)">
-    <rect
-       style="fill:#805451;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
-       id="rect4485"
-       width="800"
-       height="400"
-       x="83.428574"
-       y="412.07648" />
-  </g>
-</svg>