maemo.org - Talk
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

maemo.org - Talk (https://talk.maemo.org/index.php)
-   SailfishOS (https://talk.maemo.org/forumdisplay.php?f=52)
-   -   Weather temperature as colour (https://talk.maemo.org/showthread.php?t=100452)

Markkyboy 2018-09-04 09:40
Weather temperature as colour
 
Hi,
as the title suggests, I'm trying to associate colours to weather temperature, mostly it seems to work until I get to single figures and minus temperatures.

Here is my clunky code, this code is used in `/usr/lib/qt5/qml/Sailfish/Weather/WeatherDetailsHeader.qml`

Code:
slotted in @ line: 124
         
    Rectangle {
        id: colorTemperature
        width: 100; height: 140
        radius: 12
        anchors.centerIn: temperatureHighLabel
        color: {
            ((temperatureHighLabel.text  >= '38'  && '#b20012' || // dark red
              temperatureHighLabel.text  >= '32'  && '#bd0014' || // red
              temperatureHighLabel.text  >= '27'  && '#ec0019' || // scarlet
              temperatureHighLabel.text  >= '21'  && '#ec9649' || // orange
              temperatureHighLabel.text  >= '16'  && '#f7c200' || // yellow
              temperatureHighLabel.text  >= '10'  && '#9ad346' || // rich green
              temperatureHighLabel.text  >= '4'  && '#47b04b' || // green
              temperatureHighLabel.text  >= '-1'  && '#4293ff' || // sky blue
              temperatureHighLabel.text  >= '-7'  && '#3c00ff' || // blue
              temperatureHighLabel.text  >= '-12' && '#6a28a3' || // purple
              temperatureHighLabel.text  >= '-18' && '#8d009a' || // pinky purple
              temperatureHighLabel.text  >= '-23' && '#ff00ff' )) // magenta
        }
    }
    Label {
        id: temperatureHighLabel
The colour shows correctly until I get down to single and minus figures, for example, a day that is '8º' which should be shown as 'green' but is shown as 'dark red', in fact 'dark red' is the colour of all single figures, yet 'dark red' is associated with temps greater than or equal to 38º. I have also tried using plus+ and minus- symbols with temps but to no avail.

I've played with this extensively, originally it was in if/else format but the same problem occurred. I've tried different java operators, I've tried adding plus/minus symbols to temp figures, but still I get dark red for single and minus figures. Any ideas appreciated.

The format used for laying out my code, was taken directly from harbour-nationalrail used for associating rail operator colours. Originally, the code was laid out in the same way as my windDirection patch, that being inthe style of 'if/else' statements, but that yielded the same problem as does the above.

coderus 2018-09-04 10:01
Re: Weather temperature as colour
 
you can try to learn qml basics.

if () else if () ...

Markkyboy 2018-09-04 10:50
Re: Weather temperature as colour
 
Quote:
Originally Posted by coderus (Post 1547977)
you can try to learn qml basics.

if () else if () ...
I have already mentioned in the last paragraph of my original question, that I have already tried using if/else and it does work....until I hit minus or single figures.

I am always learning, it is fine and right for you to say, 'learn qml basics', what do you think I am trying to do?, I am constantly reading doc.qt QML documents online, I have nearly all saved as browser favourites. I also try as much as I can to solve the problems I create before asking questions here. What is clearly obvious to you in many cases, isn't so obvious to me.

Most of the examples set out by Qt, is basic stuff I have already learned, basic Text, Image, Rectangle,Color and more, many of the examples do not go into any detail and what may work on a QtCreator SDK, doesn't always work in Sailfish, as we know, org.nemomobile.configuration 1.0 replaces Settings 1.0. ...when I say "doesn't always work" actually means "I don't fully understand what I'm doing" <------from that, I take cues from stuff I know that works, like reusing the contents of my WindDirection.patch, which used 'if/else' and works correctly.

Code:
           
    Rectangle {
        id: colorTemperature
        width: 100; height: 140
        radius: 12
        anchors.centerIn: temperatureHighLabel
        color: {
            if      (temperatureHighLabel.text >= "38" )  "#b20012" // dark red
            else if (temperatureHighLabel.text >= "32" )  "#bd0014" // red
            else if (temperatureHighLabel.text >= "27" )  "#ec0019" // scarlet
            else if (temperatureHighLabel.text >= "21" )  "#ec9649" // orange
            else if (temperatureHighLabel.text >= "16" )  "#f7c200" // yellow
            else if (temperatureHighLabel.text >= "10" )  "#9ad346" // rich green
            else if (temperatureHighLabel.text >= "4"  )  "#47b04b" // green
            else if (temperatureHighLabel.text <= "-1" )  "#4293ff" // sky blue
            else if (temperatureHighLabel.text <= "-7" )  "#3c00ff" // blue
            else if (temperatureHighLabel.text <= "-12")  "#6a28a3" // purple
            else if (temperatureHighLabel.text <= "-18")  "#8d009a" // pinky purple
            else if (temperatureHighLabel.text <= "-23")  "#bd009a" // magenta
      }
}
the use of if/else above is the same as I used in windDirection, I wrongly assumed it would work, but it does work until minus or single figures occur. I don't know how to solve it, so I ask for help.

Did you never ask for help while learning your trade?

pichlo 2018-09-04 10:50
Re: Weather temperature as colour
 
^^^ That and trying not to confuse comparing strings with numbers.

"8" > "32" or even "32000", just like "z" > "aaaaaaaaa".

Ancelad 2018-09-04 10:53
Re: Weather temperature as colour
 
Quote:
Originally Posted by pichlo (Post 1547981)
^^^ That and trying not to confuse comparing strings with numbers.

"8" > "32" or even "32000", just like "z" > "aaaaaaaaa".
It doesn't matter if text returns numbers

pichlo 2018-09-04 10:54
Re: Weather temperature as colour
 
Quote:
Originally Posted by Ancelad (Post 1547982)
It doesn't matter if text returns numbers
Really? I stand corrected. But it means I dislike QML even more than before.

Being Old Skool, I would convert temperatureHighLabel.text to a number and work with that. It would be faster anyway if you do the conversion only once and not at the background for each comparison.

It would also give you a lovely opportunity to change the colour continuously rather than in discreet steps like in your example ;)

Markkyboy 2018-09-04 11:19
Re: Weather temperature as colour
 
Quote:
Originally Posted by pichlo (Post 1547983)
Really? I stand corrected. But it means I dislike QML even more than before.

Being Old Skool, I would convert temperatureHighLabel.text to a number and work with that. It would be faster anyway if you do the conversion only once and not at the background for each comparison.

It would also give you a lovely opportunity to change the colour continuously rather than in discreet steps like in your example ;)
temperatureHighLabel.text is converted to a number, that being the same number you see in the app but as temperature. I wholly agree about the way I'm using the code, I know its ugly, but for now, it's worked in previous applications/patches.
I don't yet know how else to actually tackle it. My WindDirection patch uses the same method, it gets windDirection as a number and converts to a given heading as text, so I know it works.....at least in that instance.

thanks,

wdehoog 2018-09-04 11:50
Re: Weather temperature as colour
 
Quote:
Originally Posted by Ancelad (Post 1547982)
It doesn't matter if text returns numbers
Really? So (-2 > -1) returns the same as ("-2" > "-1")?

velox 2018-09-04 12:17
Re: Weather temperature as colour
 
Try something like:
Code:
         
Rectangle {
    id: colorTemperature
    width: 100; height: 140
    radius: 12
    property int temperatureInt: {
        return parseInt(temperatureHighLabel.text)
    }
    anchors.centerIn: temperatureHighLabel
    color: {
        if (temperatureInt >= 38 ) {
            return "#b20012" // dark red
        }
        else if (temperatureInt >= 32 ) {
            return "#bd0014" // red
        }
        else if (temperatureInt >= 27 ) {
            return "#ec0019" // scarlet
        }
        else if (temperatureInt >= 21 ) {
            return "#ec9649" // orange
        }
        else if (temperatureInt >= 16 ) {
            return "#f7c200" // yellow
        }
        else if (temperatureInt >= 10 ) {
            return "#9ad346" // rich green
        }
        else if (temperatureInt >= 4  ) {
            return "#47b04b" // green
        }
        else if (temperatureInt >= -1 ) {
            return "#4293ff" // sky blue
        }
        else if (temperatureInt >= -7 ) {
            return "#3c00ff" // blue
        }
        else if (temperatureInt >= -12) {
            return "#6a28a3" // purple
        }
        else if (temperatureInt >= -18) {
            return "#8d009a" // pinky purple
        }
        else return "#bd009a" // magenta
    }
}
I have not tested it in any way, just quickly written it down, so I may have missed something or it may not be correct syntax (I may or may not have even added errors on purpose to help you learn – just kidding). More or less interesting points are:
  • there is a new property with an integer type, this should fix the negative comparisons
  • You had a gap (no colours between -1 and 4) between where you switched to "<=" – it's easier to just stick with ">=" and make an else for everything that does not match.

Keep in mind:
Long lists of if/else almost always are a sign that something could be better thought out.

Edit: The number conversion, of course, is exactly what pichlo pointed out earlier. I just wrote it down. ;)

Ancelad 2018-09-04 12:40
Re: Weather temperature as colour
 
Quote:
Originally Posted by wdehoog (Post 1547988)
Really? So (-2 > -1) returns the same as ("-2" > "-1")?
I mean "clear" numbers without " obviously :)


All times are GMT. The time now is 05:09.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vBulletin® Version 3.8.8