Responsive version of the Standard skin

[Darryn Capes-Davis]

Hi All,

I have just finished converting the standard skin to be a responsive version so the one set of HTML pages can work across all devices from desktop to mobile.

I have used the latest version of bootstrap. See Carlingford Weather.

I would like any feedback. One thing I would like to do is leave all images as placeholders till they are viewed. This way the download traffic ill be minimised on smaller devices should you not scroll etc.

You will noticed that on smaller devices, the graphs push the readings down. I made this decision based on the graphs being the wow factor should someone stumble onto the site.

For now I have tried to make the skin contain all elements of the standard skin, although mobile, smartphone would now be redundant.

If this all looks good, I am happy to package up as a 'Responsive' skin to include in weewx. Let me know your thoughts.

Should I be packaging this up, can someone let me know the best way to do it? Do I used source control software? Do I just provide a patch. Info/instructions for a Linux newbie would be much appreciated.

Regards

Darryn

[Vince Skahan]

On Saturday, January 24, 2015 at 3:20:23 AM UTC-8, Darryn Capes-Davis wrote:

I would like any feedback. One thing I would like to do is leave all images as placeholders till they are viewed. This way the download traffic ill be minimised on smaller devices should you not scroll etc. 

 

Looks pretty nice - one thing I noticed is that the monthly/yearly summary buttons look to my eyes as being clickable when of course the idea is to click the arrows to get the selectable popup list of months or years, which worked fine.

For a smartphone, it sure requires a lot of clicking.  Normally when I use my phone I just want to click one link on my desktop, have the browser come up, and see the 'meat' of the data in a quick glance.  The one I came up with is http://www.skahan.net/weewx/phone.html (looks good on a phone, I didn't worry the autoresizing much for the laptop).  My bootstrap-driven version took a different tact - http://www.skahan.net/weewx/bootstrap-day.html - I used tabs to select day/week/month/etc. and didn't worry the phone interface at all.

Re: packaging, if you want to make it available for others, put it up on github or the like.  Ideally you'd have it packaged up as an extension folks could easily install and uninstall via the weewx extension mechanism.  Pick an extension name nobody else will use ('bootstrap' would be a bad name to pick), perhaps something with your name or initials or something.  That would let other folks use your skin as an add-on without breaking (or being broken by) other skins/extensions/etc.

Packaging a skin up as an extension is very easy.  There are lots of examples out there.  Poke around the google groups a little bit and use other folks' examples and cut/paste/edit to fit.  My bootstrap-driven skin is on github at https://github.com/vinceskahan/vds-weewx-bootstrap-skin if you wanted to see one example that works with the installer.

[Thomas Keffer]

Very elegant, Darryn! I like it.

Vince: I tried it on my smartphone (Chrome browser) and it only required a click to open up a section. That's reasonable. What are you seeing?

-tk

[Vince Skahan]

On Saturday, January 24, 2015 at 5:22:06 PM UTC-8, Thomas Keffer wrote:

Vince: I tried it on my smartphone (Chrome browser) and it only required a click to open up a section. That's reasonable. What are you seeing?

Oh, I agree it's pretty slick.  Definitely resized nicely on multiple devices and was very fast.  I'm sure I'll be looking at the sources to see what I can learn about making my bootstrap mojo a bit less lame :-)

My typical use case for the phone is just a little different, I tend to take very quick glances at numbers that are in big-honkin'-old-eyes fonts rather than needing to click or scroll on the phone.

[Amanda & Darryn Capes-Davis]

Tom, Vince,

 

Thanks for the feedback. I was hoping to develop a plug in replacement to the default skin for those who want to tweak, but not tweak too much. I found currently with the standard skin I would be changing the desktop and then the smartphone version, especially when adding in my ‘apparent temp’. Then I stumbled across bootstrap, thought I would give it a go, was pretty easy.

 

I think there is still plenty of need for having different desktop vs mobile vs smartphone. One thing with this skin on a smartphone is that everything loads together, though since you think it is fast, maybe that it not an issue J

 

I am still thinking of where to put the Almanac. It could be a panel below the graphs since it looks like you get a bit of Almanac data if you have the extension loaded, or it could be another panel on the side. Any thoughts?

 

Cheers

 

Darryn

[Simon]

Hi Darryn,

must say I love the layout, very nice. hoping to see a Skin available for download soon!

Simon

[mwall]

On Saturday, January 24, 2015 at 6:20:23 AM UTC-5, Darryn Capes-Davis wrote:

If this all looks good, I am happy to package up as a 'Responsive' skin to include in weewx. Let me know your thoughts.

Should I be packaging this up, can someone let me know the best way to do it? Do I used source control software? Do I just provide a patch. Info/instructions for a Linux newbie would be much appreciated.

darryn,

are you still interested to package your work for distribution?

this is what you do:

1) create the directory structure.  your hierarchy would look something like this:

Responsive/
Responsive/changelog
Responsive/readme
Responsive/install.py
Responsive/skins/
Responsive/skins/skin.conf
Responsive/skins/ (all of the files required for the skin)

2) edit install.py, changelog, readme.  in the install.py file, enter the meta-data, version, and all of the files for the skin.

3) create a tarball.

tar cvfz responsive-x.y.z.tgz Responsive

4) put the tarball somewhere people can download it

examples:

in the weewx distribution, look at extensions/basic for an example of how to structure a skin for distribution.  or take a look at other skins on the weewx wiki:

https://github.com/weewx/weewx/wiki

m

[Amanda and Darryn Capes-Davis]

Thanks for the info. I have been putting in local forecast and other local tweaks which I will need to make generic or remove to a shareable skin. Once that is done I will package it up as shown.

I am a but time poor with work at the moment so this may be an Easter task.

Cheers

Darryn

[Manfred Larcher]

Hi Darryn,

I would like to use your modified skin for my own page - is it possible to get a copy?

Thx
Manfred

[Ebbe Dehn]

Hi Darryn

I thinks yors skin is great - is it possible to download ?
I havn't been able to find it anywhere.

thx
ebbe

[Amanda and Darryn Capes-Davis]

Ebbe,

Not yet. Have not found time to put it together. Will try soon.

Cheers

Darryn