[pimatic-weather] Reimplement on basis of forecast.io

[andig]

I've started the implementation; it could deliver things like this:

[andig]

@josecastroleon would you be interested in this rewrite? IMHO we should only have a single weather module, not two competing ones?

[wutu]

:+1:

[Yves911]

:+1: i find it very cool what about predicates?

[p4co86]

Nice!

[n3roGit]

Cool!

[andig]

@sweetpi I need to display air pressure in hPa which is converted to khPa. Pls advise how to supress the automatic unit conversion.

[incmve]

Wasn't that controlled by:

"unit": "hPa"

[sweetpi]

@sweetpi I need to display air pressure in hPa which is converted to khPa. Pls advise how to supress the automatic unit conversion.

With the new frontend version its deactivated by default. I reworking the whole thing.

[andig]

@sweetpi I need another pointer, sorry for bothering you. To display the custom skycon svg image I need to interact with the template. I have weather-item.jade:

script#weather-device-template(type='text/template')

I have weather-item.coffee:

$(document).on( "templateinit", (event) ->
  class WeatherWidget extends pimatic.DeviceItem
    constructor: (templData, @device) ->
      super(templData, @device)
      @remote = @getAttribute('remote').value()

  class WeatherDevice extends pimatic.DeviceItem
    constructor: (templData, @device) ->
      super(templData, @device)

  # register the item-classes
  pimatic.templateClasses['weather-widget'] = WeatherWidget
  pimatic.templateClasses['weather-device'] = WeatherDevice
)

Now I'd need to make WeatherDevice change the skycon when the observable changes:

  var skycons = new Skycons({"color": "pink"});
  // on Android, a nasty hack is needed: {"resizeClear": true}

  // you can add a canvas by it's ID...
  skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);

  // ...or by the canvas DOM element itself.
  skycons.add(document.getElementById("icon2"), Skycons.RAIN);

Could you kindly give me a pointer which part of the picture I'm missing? One the jade or knockout side?

[sweetpi]

script#weather-device-template(type='text/template')

Your template should at least contain a li-element.

@remote = @getAttribute('remote').value()

Be careful, probably you wanted to hold a reference to the observable (value) itself and not to its value (value()) ?

Now I'd need to make WeatherDevice change the skycon when the observable changes:

The easy way would be to use subscribe to the observable and update the icon on change (http://knockoutjs.com/documentation/observables.html#explicitly-subscribing-to-observables):

@getAttribute('remote').value.subscribe( (newValue) =>
   # remove old icon?
   skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
)

Setup the icon the first time in the afterRender-function like here: https://github.com/pimatic/pimatic-mobile-frontend/blob/master/app/pages/index-items.coffee#L158 The html may does not exist when the constructor is called.

The better but harder way would be to create a custom knockout binding for skycons like I did for sparkline: https://github.com/pimatic/pimatic-mobile-frontend/blob/master/app/knockout-custom-bindings.coffee#L107-L131

If you are missing any info, feel free to ask.

[andig]

Be careful, probably you wanted to hold a reference to the observable (value) itself and not to its value (value()) ?

In this case, the value can't change, so holding on to the value was my intention.

The easy way would be to use subscribe to the observable and update the icon on change

Excellent, got that working. Needed to understand that afterRender is a knockOut functionality, not jade.

Now, one more question. The WeatherDevice needs to render lots of data. Most of it is just data-bound in jade. Do I need to (manually) @getAttribute for all these or are the attributes automatically available in the model for binding?

Also, what is the difference of data-bind="text: name .." for some attributes and data-bind="text: $data. ..." for others?

And, regarding coffee syntax, why does this error when written without the enclosing brackets:

@getAttribute('icon').value.subscribe, (icon) =>
  @skycons.set @skycon, icon if @skycons and @skycon

error: unexpected ,
@getAttribute('icon').value.subscribe, (icon) =>                   
                                     ^

Isn't it regular coffeescript syntax??

[sweetpi]

Now, one more question. The WeatherDevice needs to render lots of data. Most of it is just data-bound in jade. Do I need to (manually) @getAttribute for all these or are the attributes automatically available in the model for binding?

Also, what is the difference of data-bind="text: name .." for some attributes and data-bind="text: $data. ..." for others?

In the template the data-bind context is your WeatherDevice ViewModel. So you can access all its properties by just naming them (data-bind="text: name"). The form data-bind="text: $data.name" is equivalent for properties. But if you want to call a function from data-bind, then the this pointer inside the function matters and so use $data.someFunc() to get the right this in someFunc. Docs about the binding context: http://knockoutjs.com/documentation/binding-context.html

For @getAttribute just do @foo = @getAttribute('foo') in your constructor and you can use foo directly in the template bindings.

And, regarding coffee syntax, why does this error when written without the enclosing brackets:

Because of the ,. The syntax for a function call is: func arg1, arg2 and not func, arg1, arg2. So in this case:

@getAttribute('icon').value.subscribe (icon) =>
  @skycons.set @skycon, icon if @skycons and @skycon

would be correct.

[josecastroleon]

Sorry for the late reply, I was quite busy at this moment. I have no problem in merge them. If you want to take it over, I can transfer the ownership of the pimatic-weather npm package

[Yves911]

Hi @andig now Microsoft has restricted the access to the former weather plugin https://github.com/pimatic/pimatic/issues/414 maybe it could be useful to reactivate the work around your plugin. Is there an address to download what you've done so far?

[Icesory]

https://github.com/andig/pimatic-weather-max

[andig]

https://github.com/andig/pimatic-weather-max

Not so good right now. The basics, that is current weather is working. Forecast to be done.

I didn't release anything as the UI is a mess. If you want to try it or have good design/ css skills feel free to make a suggestion.

@josecastroleon thanks for your reply. I'm not interested on forking and have very little time right now. If you want feel free to open a development branch that I can participate in and I'd gladly push to your repo? Its very much wip and I'd be happy for a helping hand.

[josecastroleon]

I've just add you as collaborator on the pimatic-weather repo. I've also created a development branch. Feel free to push it there

[andig]

Excellent. I'll cleanup and push to dev. Would then appreciate help with the UI. I'm a little short on time right now.

[thost96]

@andig How do you switch your Guest Wifi on and off?

[andig]

@thost96 off-topic ;) Check the pimatic-fritz plugin.