[Interest] Change image.source onClicked with if statement function

[Jérôme Godbout]

Take care, image source is an url (QUrl) and the property are string. You
should try to put a State here, would be nicer to control the image source
and other behavior.

a *'red', 'green', 'yellow', 'off'* state would be nice. You could even use
the image name with the state name:




*Item{ id:traffic_light states: [*
*     State{ name: 'off' }*

*   , State{ name: 'green' }*
*   , State{ name: 'yellow' }*
*   , State{ name: 'red' }*
* ]*
*...*
* Image *
* {*
*   ...*
*   source: 'vector-traffic-light-' + traffic_light.state.name
<http://traffic_light.state.name> + '.png'*
*   ...*
* }*
*}*

http://doc.qt.io/qt-5/qml-qtquick-state.html

Seem easier to maintain, less code if a new state is added. Image have a
better naming to maintain too.


On Wed, Apr 20, 2016 at 10:45 AM, Ramy Atalla via Interest <
interest at qt-project.org> wrote:

> Hello
> I am trying to emulate a traffic light,I have four images to toggle
> between,I made a function to check the equality of the source image and
> change it on click,but it doesn't work,I think the problem in checking the
> equality of the source. Any ideas...
> Thanks
> Ramy
>
> import QtQuick 2.4
>
>
> Item{
>
>     id:traffic_light
>
>
>     property string property3: "vector-traffic-light-3.png" //green
>
>     property string property2: "vector-traffic-light-2.png" //yellow
>
>     property string property1: "vector-traffic-light-1.png" //red
>
>     property string property0: "vector-traffic-light-0.png" //off
>
>
>     function toggle()
>
>     {
>
>         if (trafficlight.source == property0)
>
>              trafficlight.source = property1;
>
>         else if
>
>             (trafficlight.source == property1)
>
>               trafficlight.source = property2;
>
>         else if
>
>             (trafficlight.source == property2)
>
>               trafficlight.source = property3;
>
>         else if
>
>             (trafficlight.source  == property3)
>
>               trafficlight.source =property0;
>
>     }
>
>
>
>     Image {
>
>         id: trafficlight
>
>         x: 30
>
>         y: 30
>
>         width: 43
>
>         height: 140
>
>         opacity: 0.7
>
>         source: property1
>
>
>         MouseArea {
>
>             x: 0
>
>             y: 0
>
>
>             width: 43
>
>             height: 140
>
>             hoverEnabled: true
>
>             onClicked:toggle()
>
>         }
>
>
>     }
>
>
> }
>
>
>
> _______________________________________________
> Interest mailing list
> Interest at qt-project.org
> http://lists.qt-project.org/mailman/listinfo/interest
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20160420/2d7ef673/attachment.html>