Mobile Web App with Screenshots (Updated)

[Samer]

@Zapp Rain sensor, if it is on or off (the current status). While, urs, is the use rain sensor option in the configuration.

[Samer]

Kinda love this update I just pushed (https://github.com/salbahra/OpenSprinkler-Controller/commit/7affc27cc2cc41908fb5a9dd8301454e7e7d9e2d) which replaces the station names using @media queries in CSS with numbers on narrow screens for the program preview page. Rotating the screen instantly changes the names back!

Let me know if it works for everyone.

Update: I added some images to demonstrate what I mean.

[Zapp]

Ok, some feedback (feature requests).

It would be great to have some GUI feedback on that the location entered in settings actually can be looked up. Best of all would be if the resulting WOEID could be displayed somewhere in the webapp. Could be a green check mark next to location setting and the WOEID printed out there too.

How about having the latest received current weather condition, with icon, temperature and time acquired, displayed somewhere in the webapp?

Maybe where the tip section is today would be a great place to have current weather data. BTW, please let us toggle the tip section in settings.

Is there a way to reformat the date based on the local browser locale? I’m from Sweden and I really don’t like the way it’s presented right now. It’s sort of ok in Device Time (Thu, 27 Jun 2013 10:20:44), not perfect but ok, but the Logs section (Thu, 6/27/2013 5:15 AM) is not. I’m ok with running the webapp in en or us-en, in fact i prefer that, but the short date format and AM/PM times are not easy on my eyes.

EDIT: Right, to complicate things even more we use Celsius here… 😉

/Jonas…

[Samer]

Thank you @Zapp for your feedback. I am going to try and address some of your requests:

1) I don’t think the user needs to know what the WOEID is because this is unique to Yahoo! and honestly gibberish otherwise. I do think it would be nice to verify the location however historically this was only passed to the OpenSprinkler. Since I use it for weather now, it would be nice to verify it and I will look into that.

2) Originally, when I designed the auto-delay’s I intended to add current weather page but then decided most people have weather app’s that will be far better then anything I can design. So I canceled that idea. But, what you are suggesting is a nice idea. I plan on adding this at this point, to show the weather where the current tip information is. The tips don’t really show much information so I will just replace the tips with the weather removing the need to disable tips. By the way, Yahoo reports the weather in Fahrenheit, at least using the API link I am using. I suppose I could have javascript convert the number to Celsius but I would have to add an option for that, which we will see about.

3) The dates, especially the logs, were picked on purpose. I needed the most compact date so on the iPhone the whole log line would only take one line of space. To be honest with you I don’t want to make the time format configurable, at least not any time soon. With that said, I have no problem changing the default method to something more people would enjoy. If that is 24 hour time format, let me know and I will make the change. I can’t use the status page’s method because it is too large.

Thank you!

Edit: I pushed an update that shows the weather information (including an image of the current type of weather). This replaces the tips section on the top of the main page. I also cache the WOEID now to prevent the extra HTTP request each time (since the lookup will be frequent). The lookup is done via AJAX so it should not slow down initial page load, waiting for the weather data from Yahoo. I also parse the location from Yahoo and display it, this can be used as a validation for now. I think this addresses points 1 and 2 and leaves point 3 which I am still trying to decide how to address.

Also, the temperature is in Fahrenheit right now but I think I will address the locale issues altogether (time format and measurement units).

The below screenshot shows the new weather as well as the redesigned home menu. Look forward to your feedback!

[Zapp]

@salbahra wrote:

Thank you @Zapp for your feedback. I am going to try and address some of your requests:

1) I don’t think the user needs to know what the WOEID is because this is unique to Yahoo! and honestly gibberish otherwise. I do think it would be nice to verify the location however historically this was only passed to the OpenSprinkler. Since I use it for weather now, it would be nice to verify it and I will look into that.

2) Originally, when I designed the auto-delay’s I intended to add current weather page but then decided most people have weather app’s that will be far better then anything I can design. So I canceled that idea. But, what you are suggesting is a nice idea. I plan on adding this at this point, to show the weather where the current tip information is. The tips don’t really show much information so I will just replace the tips with the weather removing the need to disable tips. By the way, Yahoo reports the weather in Fahrenheit, at least using the API link I am using. I suppose I could have javascript convert the number to Celsius but I would have to add an option for that, which we will see about.

3) The dates, especially the logs, were picked on purpose. I needed the most compact date so on the iPhone the whole log line would only take one line of space. To be honest with you I don’t want to make the time format configurable, at least not any time soon. With that said, I have no problem changing the default method to something more people would enjoy. If that is 24 hour time format, let me know and I will make the change. I can’t use the status page’s method because it is too large.

Thank you!

Edit: I pushed an update that shows the weather information (including an image of the current type of weather). This replaces the tips section on the top of the main page. I also cache the WOEID now to prevent the extra HTTP request each time (since the lookup will be frequent). The lookup is done via AJAX so it should not slow down initial page load, waiting for the weather data from Yahoo. I also parse the location from Yahoo and display it, this can be used as a validation for now. I think this addresses points 1 and 2 and leaves point 3 which I am still trying to decide how to address.

Also, the temperature is in Fahrenheit right now but I think I will address the locale issues altogether (time format and measurement units).

The below screenshot shows the new weather as well as the redesigned home menu. Look forward to your feedback!

Wow! First I have to give you credit for listening and being so helpful. I didn’t actually believe in getting any of my requests fullfilled… This is like early Christmas…

1. Great, have yet to test the new version, will do that soon.

2. Image looks great, will have a look after this reply.

3. Time format and units in configuration would be fantastic and yes, I do like 24h time format.

I can also confirm that the rain delay is working. We have had rain here and the delay is active in my setup right now. 😀

EDIT: Looks perfect (except for my current weather, it could have been better…). Attached a screenshot…

EDIT 2: I have no idea of where my screenshot went! I’ll try again

EDIT 3: I totally suck on getting this screenshot to stick. How do you make it happen? I try Upload attachment but nothing happens… Better as in like sunshine 😆

EDIT 4: Last try then.

/Jonas…

[Samer]

@Zapp Very excited to hear the automatic rain delay is working!!! 🙂

I love feedback because it helps improve the app for everyone, myself included. For example, I honestly never thought of putting the weather right on the home screen but it has become my new favorite thing!

Glad you enjoy the new changes and keep the feedback coming!

Thanks!

Edit: I pushed an update now to change the format of the log times, it is now exactly like the status page without the seconds.

Edit 2: Your screenshot isn’t showing up, better how? Also, it is probably too large and being blocked, use imgur.com or similar.

Edit 3: Haha! Had me on my toes there 😛

[Zapp]

@salbahra wrote:

Edit: I pushed an update now to change the format of the log times, it is now exactly like the status page without the seconds.

Yepp, much better. I like!

/Jonas…

[Samer]

@momanz wrote:

3) On the program preview graph, it would be really slick if each program bar was a hyperlink to the program edit screen for that program. you would probably need a way to keep attempts to zoom or scroll from activating the hyperlink. Perhaps a tap and hold or double tap? Maybe a configuration switch to disable the feature all together (for those who aren’t interested)?

I just added this feature. One bug, it doesn’t work on iOS, yet. But tested it on desktop and Android and it works great! I will see what I can do about getting it fixed for iOS, not sure whats causing the problem (probably the touch handler for the timeline scrolling).

[dman]

Hi Samer – love OS and this app!
I’m trying to get weather working – if I use my towns name ‘Geelong’ I get this:
[attachment=1:nvuqxnn9]os2.PNG[/attachment:nvuqxnn9]
– no weather icon. I checked Yahoo and Geelong comes up fine, and the woeid in config looks correct as well – any ideas.
If I change via the app to Melbourne (which is nearby) it works fine:
[attachment=0:nvuqxnn9]os3.PNG[/attachment:nvuqxnn9]
Not a big deal – but a bit weird.

UPDATE: Been doing some more digging.
yahoo.com is now showing an “N/A” image (an actual image of a globe with NA on it), but correct data and forecasts
yahoo.com.au is showing correct icon as well as details.
Obviously a Yahoo API thing (and nothing to do with the app) – but a bit annoying. Maybe an option for other weather sources?

[Samer]

If the weather is returning code 3200 (undefined) then no icon is shown. Try this:

http://weather.yahooapis.com/forecastrss?w=WOEID

Replace WOEID with the code you have (if you know it) and paste the line similar to the one below:

Update: I just resolved your area’s WOEID and got 1102170, which does indeed report 3200. I will see about re-centering the temperature on code 3200 so it at least doesn’t look weird.

Update 2: I pushed an update to remove the allocated space for the image if code 3200 is reported. This should re-center the temperature right above the location and make it look more appropriate.

[Samer]

@momanz By the way, I don’t have to worry about interpreting scrolling vs click on the program ID. The operating system does that for me. Normally, iOS has a 300ms delay to decide which gesture your trying to preform. For most of the app, I override that but on the preview page I leave it enabled. Still working on the iOS bug though.

[Samer]

I just pushed an update for the preview program that properly shows if a rain delay is preventing a program from running (red and struck out). Figure with all the emphasis on automatic rain delay, I should emphasize rain delay information everywhere.

I enabled master station on the program preview page as well.

Update: I added the program coloring scheme that Ray employes in his program preview. Almost the exact same colors too (minor tweaks for the ones that clashed). I think this brings the program preview all the features Ray’s includes!

[dman]

Thanks for that fix – it looks better centred. I’ll do some searching to see what Yahoo are up to as the icon looks nice! -maybe I should move house 😉
Also as a quickie, I edited main.php and added “&u=c” to the yahoo api call to get degress celsius. (saw this during one of my searches, so don’t know about API documentation for this). Still prints F – but the displayed data is C. Maybe a setup option for this?

[Samer]

@dman Tomorrow, ill add a region detection to the program and use Celsius for anywhere except the US, Bezile, Bermuda, and Palau (Wikipedia listed countries). Should solve the problem without adding another option. I will update when the fix is done.

[dman]

Seeing I was giving the new version a full workout thought I’d let you know some program preview issues I’ve seen.

Bugs in program preview on Win7 & Chrome
On the program previous screen I get this:[attachment=2:2odwybk8]os4.PNG[/attachment:2odwybk8]
Don’t see this on phone (Android/Chrome) or PC Firefox. Anyway the up/down button advance/decrement the displayed date. If I advance to 31 Juy (not a date!) I get a screen with Nan for columns:[attachment=1:2odwybk8]preview1.PNG[/attachment:2odwybk8]
I also get this if I press the blue X next to up/down button – but it then displays:[attachment=0:2odwybk8]preview2.PNG[/attachment:2odwybk8]
Pressing the up/down button still advances the dd part, but leaves the other parts of the format string eg: 02/mm/yyyy
On Firefox (PC) there is no way to change date apart from actual edit the date on the screen and refresh.
And I on Android the only way seems to bring up date picker (no advance 1 day feature?).
Also on Android the scroll left/right does’nt work to see the full hours of the day – so I can only see a 2-hour window of the preview.

[dman]

@salbahra wrote:

If the weather is returning code 3200 (undefined) then no icon is shown. Try this:

http://weather.yahooapis.com/forecastrss?w=WOEID

Replace WOEID with the code you have (if you know it) and paste the line similar to the one below:

Update: I just resolved your area’s WOEID and got 1102170, which does indeed report 3200. I will see about re-centering the temperature on code 3200 so it at least doesn’t look weird.

Update 2: I pushed an update to remove the allocated space for the image if code 3200 is reported. This should re-center the temperature right above the location and make it look more appropriate.

This sorts out the display, but I’m not sure what happens if AutomaticRainDelay is enabled and gets a 3200 back. I guess as its not either a reset code or a delay code it falls out and does a reset?

[Samer]

Haha everyone wakes up when I goto sleep 😛

If it doesn’t match a code then nothing happens. The only thing that’ll reset is the code for hot.

By the way, the UI issues with preview I will help address tomorrow however the major thing that bothers me is the scrolling on Android. The others are browser independent issues and are lower priority since the focus is mobile. I will take a look and see what I can do. At the very least I can and will add simple checks for a valid date to get rid of those pesky NaN errors! Will update tomorrow!

Thank you!

[Zapp]

@salbahra wrote:

I just pushed an update…

😮 At this rate of updates I’d better put this in my crontab:

0 * * * * cd /OpenSprinklerPi/webapp; git pull

😀

Thanks aging for all you efforts. It’s really coming together and starting to look very nice. In fact I have already decided that this webapp will be my primary tool to control OSPi.

/Jonas…

[Zapp]

Things that keeps me awake at night…

Well, having a hard time to sleep I’ve got lots of time to think and last night I merged my PVR system with OSPi. Just in my mind that is! 😆

I’m running a PVR system called MediaPortal with a TV server called ARGUS TV. To make a long story short(er)… ARGUS has the ability to connect to MSN/Skype and you can chat with the system…

ARGUS has it’s own MSN/Skype account and I have it added to my contacts. Whenever a TV recording starts or ends it will text me via MSN/Skype. I can also ask about ‘status’ and it will return the next few upcoming recordings and the current state of the system like if someone is watching live TV or a recording is active. I can also schedule new recordings through this MSN/Skype chat.

Now, merge the above with OSPi and you’ll probably find it to be quite similar in many respects.

💡
Wouldn’t it be great if you could chat with your OSPi, get info when a program is starting or ending and be able to create new programs?

It’s a thought anyway… It’s been almost 20 years since I wrote some code 😯 but I might do something about that, maybe… If anyone else is up for the challange, feel free.

To get a better idea of what you can do, here is a ‘List of commands:’ from ARGUS on MSN/Skype:

List of commands:



● ?,status



● al,alerts [ on | off ]



● ca,cancel 



● del,delete schedule 



● h,help



● m,more



● not,notifications [ on | off ]



● r,record  { o,once | d,daily | w,weekly | wd,workingdays | we,weekends | a,anytime } [ new | all ]



(default is all episodes)



● s,search  |  (start with  to search for numbers, e.g. 's 24')



● ch,show channels 



● gr,show groups



● g,show guide  [day-number]



● up,show upcoming { r,recordings | a,alerts | s,suggestions }



● tv,television | radio



● un,uncancel 

EDIT: Looks like there at least is a Python msn lib to use :hint: http://packages.debian.org/wheezy/python-msnlib

/Jonas…

[dman]

@salbahra wrote:

Haha everyone wakes up when I goto sleep 😛

You have lots of fans in Australia!!
PS: Yahoo have about 50 codes for snow/rain etc and only one for hot! If they were Aussies it’d be the other way round 😀 (missing ones for very hot, extremely hot and stinkong hot and a few other words!)

[Samer]

@dman wrote:

You have lots of fans in Australia!!
PS: Yahoo have about 50 codes for snow/rain etc and only one for hot! If they were Aussies it’d be the other way round 😀 (missing ones for very hot, extremely hot and stinkong hot and a few other words!)

Thanks! And in Texas I wish the same thing existed! Pretty darn hot around here.

By the way, the temperature system based on region has been pushed and tested. Seems to be working well, let me know.

@Zapp I actually have done something like that before but since then I have quit instant messaging completely and stopped caring about things like that. The good news is I am actually in talks with Ray to *MAYBE* bring an XMPP protocol to the OpenSprinkler which would open all of the doors your discussing now. Since that would allow alerts to be pushed out it would just be the web app’s coding that would be left. I know Apple has Safari push notifications now that work even if the browser is closed, for web apps. This is an exciting time and hopefully all this tech comes together correctly to allow us notifications without relying on MSN/AIM.

[Zapp]

@salbahra wrote:

@Zapp I actually have done something like that before but since then I have quit instant messaging completely and stopped caring about things like that. The good news is I am actually in talks with Ray to *MAYBE* bring an XMPP protocol to the OpenSprinkler which would open all of the doors your discussing now. Since that would allow alerts to be pushed out it would just be the web app’s coding that would be left. I know Apple has Safari push notifications now that work even if the browser is closed, for web apps. This is an exciting time and hopefully all this tech comes together correctly to allow us notifications without relying on MSN/AIM.

Jaiks. I’m so excited I probably can’t sleep tonight either… 😆

XMPP is also ok. This would be great…

I started to get some issues with the last git pull I did. I often get ‘Loading Weather…’, but no weather, and the webapp sort of freezes. Give it a minute or two and it starts to respond again… I don’t know why, just wanted to give you a heads up.

I’ll do another pull now to have a look at the unit changes based on location.

/Jonas…

[Samer]

@Zapp wrote:

I started to get some issues with the last git pull I did. I often get ‘Loading Weather…’, but no weather, and the webapp sort of freezes. Give it a minute or two and it starts to respond again… I don’t know why, just wanted to give you a heads up.

When you say freezes, are the menus responding or just the weather is frozen? I pull the weather data in using AJAX as to avoid waiting on Yahoo to reply with the weather. To that end, it is entirely possible Yahoo is delaying the weather however if my menu’s are responding that’s a different issue completely. Let me know!

[Samer]

@dman wrote:

Bugs in program preview on Win7 & Chrome
On the program previous screen I get this:[attachment=2:39r2b07v]os4.PNG[/attachment:39r2b07v]

This is not a bug perse, but a feature of Chrome. Each browser gets to handle how to display an input with type date. Chrome and other desktop browsers give you what you captured above. The very right arrow drops down a monthly calendar allowing valid date selection that way.

@dman wrote:

Anyway the up/down button advance/decrement the displayed date. If I advance to 31 Juy (not a date!) I get a screen with Nan for columns:[attachment=1:39r2b07v]preview1.PNG[/attachment:39r2b07v]

The up/down arrow actually increase the values without any error checking. This is okay, normally, because javascript handles overflow on dates correctly. The problem is the way I parse the date afterwards. My app sees 6-31-2013 however javascript sees 7-1-2013.

@dman wrote:

I also get this if I press the blue X next to up/down button – but it then displays:[attachment=0:39r2b07v]preview2.PNG[/attachment:39r2b07v]
Pressing the up/down button still advances the dd part, but leaves the other parts of the format string eg: 02/mm/yyyy

I have now fixed this problem and pushed the update! The preview will not attempt to get data unless a full date is given. I still need to check if that date is valid but it at least wont give NaN for 02/m/yyyy anymore.

@dman wrote:

On Firefox (PC) there is no way to change date apart from actual edit the date on the screen and refresh.

As I said above each browser is different and unfortunately trying to support all of them would be a nightmare. I, personally, am targeting mobile devices with this application and willing to overlook FF, IE, Chrome’s slightly different date input methods.

Update: I just tested Firefox and your right there is no help whatsoever in date input. That really sucks! I could add my own but I really don’t want to load a lot of extra javascript that will only benefit one browser, plus I hate FF.

Update 2: Here is some information on what browser’s support date and other special inputs: http://www.wufoo.com/html5/

Update 3: My previous fix for the NaN issues also works for invalid dates so long the browser supports date input’s. This is because the browser will do validation and set the value to empty on invalid dates. So outside of a few odd scenarios I think I am done worrying about this issue, for now.

[Zapp]

First of a screnshot of the location based temp unit working.

I know, the picture is huge but I don’t know how to make it smaler here in the forum. 😕

Second, about the freeze. The menus does not respond either at the time when ‘Weather Loading…’, but no weather, is showing. If I try pressing a meny I just get the wheel turning in the middle of the screen and a minute of so later it will continue.

Sorry I can’t be more specific about it but I have a feeling that it started just after I read your post on AJAX and I did a new pull after that to get that in my system also.

EDIT: Here we go, got the problem again.

I think I now know how to make images smaller… 😛

/Jonas…

[Author]

Posts