Jump to content


Photo

HTML5 Experiment: SidClock [Version 1.00 Finally!]

  • Please log in to reply
24 replies to this topic

#1 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 28 June 2013 - 05:43 PM

Not sure if I have ever mentioned this on the CN forums before, but some of you might be interested in my humble attempts to develop a somewhat specialized astronomy app built with platform-agnostic HTML5. I started down my self-education path back in 2011, and today I hit v1.00 (!). Yes, I did what I set out to do -- learn a bit of HTML5/javascript/canvas programming with something 'fun' :)

I continue to host this on my own server, but for speed/reliability it works better to use Google Drive:

Dare's HTML5 SidClock App (regular version)
Dare's HTML5 SidClock App [no cache] (for Chrome)

I haven't tried Internet Explorer higher than v9, and HTML5 compliance was very poor with those that I tried. Perhaps v10 or higher would work better (?).

#2 germana1

germana1

    Viking 1

  • *****
  • Posts: 560
  • Joined: 14 May 2009
  • Loc: New Jersey

Posted 29 June 2013 - 09:59 AM

Nice app but the non cache version not found on server I'd like to download it.
Pete

#3 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 29 June 2013 - 10:11 AM

Nice app but the non cache version not found on server I'd like to download it.
Pete


I'm not sure what difficulty you may be having, but the link for the 'no cache' version works fine for me in both Firefox (works OK) and Chrome (where it was intended). Can you elaborate? What browser/OS are you using? Does the regular link work for you?

Thanks for trying it :)

#4 germana1

germana1

    Viking 1

  • *****
  • Posts: 560
  • Joined: 14 May 2009
  • Loc: New Jersey

Posted 29 June 2013 - 10:19 AM

It comes up on the site but won't download want to install on the iPad ,wow really fast response.
Pete

#5 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 29 June 2013 - 10:31 AM

It comes up on the site but won't download want to install on the iPad ,wow really fast response.
Pete


Sorry, still not sure what you are experiencing. Can you post a screen image? This is an HTML5 app, so you don't "download" it in the traditional sense. It is just javascript, etc. that runs in your browser (it is not a Windows/Mac/Linux computer app). HTML5 does support the concept of running 'offline', which I also tried to build into this app -- but I haven't experimented a lot with that particular feature.

Does the regular (cache) version work any better or different on your iPad? Maybe someone else with one can try it as well to elaborate on the situation (?).

#6 germana1

germana1

    Viking 1

  • *****
  • Posts: 560
  • Joined: 14 May 2009
  • Loc: New Jersey

Posted 29 June 2013 - 10:38 AM

Ok works fine when I click on the link I was mistaken and thought it was a Stand alone app both links work on the iPad ,thanks for getting back so quick looks interesting and will play around with it latter.
Thanks Pete

#7 Raginar

Raginar

    Fly Me to the Moon

  • *****
  • Posts: 6138
  • Joined: 19 Oct 2010
  • Loc: Rapid CIty, SD

Posted 30 June 2013 - 11:40 AM

That is very cool.

#8 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 30 June 2013 - 12:25 PM

That is very cool.


Thanks for saying so! A possible downside is that it takes a bit of poking around to find out what all the features are. For example, some have mentioned that how 'tiny' the sky circle map is, and I had to point out that it is completely re-sizable to whatever you are comfortable with. For the initial view, the circle is made smaller so that minimal page scrolling is needed to set the options desired.

#9 Raginar

Raginar

    Fly Me to the Moon

  • *****
  • Posts: 6138
  • Joined: 19 Oct 2010
  • Loc: Rapid CIty, SD

Posted 30 June 2013 - 04:36 PM

It's fairly in-depth :) What a great project to learn HTML5 on though.

#10 Scott Janssens

Scott Janssens

    Lift Off

  • -----
  • Posts: 13
  • Joined: 12 Jul 2013

Posted 12 July 2013 - 10:41 AM

The regular version doesn't work in IE10, but the chrome link runs fine in IE10.

#11 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 12 July 2013 - 10:58 AM

The regular version doesn't work in IE10, but the chrome link runs fine in IE10.


Thanks for letting me know! I don't have a version of Windows that let's me run a newer version of IE like that :)

#12 BPO

BPO

    Ranger 4

  • -----
  • Posts: 377
  • Joined: 23 Feb 2010
  • Loc: South Island, NZ

Posted 13 July 2013 - 05:32 AM

Nice app, although a couple issues.

Both versions appear to work well in Opera 12.16, except that the Local Date, Local Time and Precession Year field boxes are all too narrow by one digit, and cannot be resized. (The drag arrows are missing.)

Interestingly the field boxes are correctly displayed within Chrome (latest version), but the fields are always unpopulated (no data) and the drag arrows don't work. (Maybe that's just because there is no data in the fields.)

Hope this can be remedied, because these look very useful.

#13 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 13 July 2013 - 09:43 AM

Both versions appear to work well in Opera 12.16, except that the Local Date, Local Time and Precession Year field boxes are all too narrow by one digit, and cannot be resized. (The drag arrows are missing.)


I'll have to check out Opera to see what it looks like, but I can tell you that even comparing the 'default' font size (and field box widths) between Firefox and Chrome was a bit surprising (and frustrating) to me, since they are fairly different -- at least how things look on the screen.

Interestingly the field boxes are correctly displayed within Chrome (latest version), but the fields are always unpopulated (no data) and the drag arrows don't work. (Maybe that's just because there is no data in the fields.)


One of the behaviors of Chrome (at least the Linux version) is that when the app is started not everything is filled in -- because Chrome *thinks* that there might be a security risk. In the Linux version, there is a 'shield' symbol in the upper right menu bar. When clicked, it says "This page includes script from unauthenticated sources". In the past, this was due to my use of Google Maps (!). In any case, there is no security risk, and when you then click "Load unsafe script" everything is filled in and starts to work properly. Can you try this and confirm?

P.S. I have a slightly newer version that I intend to upload soon that removes some extra screen junk that should not be displaying in all modes.

EDIT: Uploaded v 1.01, which makes the display fields larger for the sake of Opera (looks like I have to declare the fields 2 characters wider than they actually require, which makes it look a bit ugly for Firefox). Thanks to BPO for pointing out Opera glitches. Also did that small display info fix that I mentioned above.

#14 BPO

BPO

    Ranger 4

  • -----
  • Posts: 377
  • Joined: 23 Feb 2010
  • Loc: South Island, NZ

Posted 13 July 2013 - 06:23 PM

Okay, that tip about the little shield in Chrome sorted out the empty data fields and all looks good, but unfortunately the Opera problem persists.

Screenshot:

SidClock in Opera

#15 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 13 July 2013 - 07:05 PM

Okay, that tip about the little shield in Chrome sorted out the empty data fields and all looks good, but unfortunately the Opera problem persists.

Screenshot:

SidClock in Opera


Yep, I had two versions of 1.01, and I uploaded the wrong one :/ Anyways, this should be OK now. Thanks for taking the time to verify this at your end :)

#16 skysurfer

skysurfer

    Ranger 4

  • -----
  • Posts: 302
  • Joined: 05 Oct 2009
  • Loc: NL, N 52 E 6

Posted 17 July 2013 - 04:50 AM

In Firefox Linux it works fine and even on the Boat Browser (webkit) for Android it seems to work fine.
It looks like the old Maemo version which I had on the N810 in 2009 but it a lot faster and better, including on Android ! Even dragging on the map works on an Android browser (unlike many other sites), great !

A few issues:

- 'Get Location' always sets to 49N 98W and not the GPS location (this bug was already in the 2009 Maeome version).
- Zooming on the map does not work by pinching on a touchscreen and not by a scroll wheel on the computer.
- Fields for positions and time somewhat small. Maybe a jQuery date/time picker and a slider for the position is an option. I have a working example of a jQuery slider for position field and a date *and time* picker (the latter can be found on the internet as well). WOrks on touchscreens as well.



#17 skysurfer

skysurfer

    Ranger 4

  • -----
  • Posts: 302
  • Joined: 05 Oct 2009
  • Loc: NL, N 52 E 6

Posted 17 July 2013 - 04:51 AM

Nice app but the non cache version not found on server I'd like to download it.
Pete


Try to 'wget' it and you have it locally.

#18 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 17 July 2013 - 07:46 AM

In Firefox Linux it works fine and even on the Boat Browser (webkit) for Android it seems to work fine.


Great! I don't yet have an Android tablet myself (waiting for Nexus 7 HD anytime now), but part of my plan for doing the whole HTML5 thing was cross-platform compatibility with no hassles.

It looks like the old Maemo version which I had on the N810 in 2009 but it a lot faster and better, including on Android ! Even dragging on the map works on an Android browser (unlike many other sites), great !


Are you referring to my MEphemeris or MChronos apps on Maemo? If so, I am amazed that anyone in the astronomy community here is even aware of them! Yea, I tried to combine the easiest parts of each for SidClock. I had hoped that Android would have a nice complete Python-GTK implementation that could run my code effortlessly, but since it does not, I decided to try HTML5 this time :)

A few issues:

- 'Get Location' always sets to 49N 98W and not the GPS location (this bug was already in the 2009 Maeome version).


Take note of the help notes at the bottom part of the app, but 'Get Location' does not use GPS location. The 'Guess Location' option is the one that uses geolocation code in HTML5 to guess your location. The 'get' and 'save' options, in general, are for you to save values of parms i.e. for startup the next time, or whatever. Whether or not the geolocation HTML5 code works with GPS devices (in, say, Android) is something that I have not investigated yet. It would be great if GPS is used first, and then IP location second.

- Zooming on the map does not work by pinching on a touchscreen and not by a scroll wheel on the computer.


Maybe once I have a touchscreen device to experiment/test with, I can try the pinch/zoom thing. The scroll wheel idea is tricky, since it would have to differentiate between scrolling the screen and zooming the map.

- Fields for positions and time somewhat small. Maybe a jQuery date/time picker and a slider for the position is an option. I have a working example of a jQuery slider for position field and a date *and time* picker (the latter can be found on the internet as well). WOrks on touchscreens as well.


Yea, once I have a tablet I can see if there is a way to size stuff better for it. Right now on regular computer/laptop screens, the default widgets look OK to me.

Thanks for your good input!

#19 skysurfer

skysurfer

    Ranger 4

  • -----
  • Posts: 302
  • Joined: 05 Oct 2009
  • Loc: NL, N 52 E 6

Posted 17 July 2013 - 12:27 PM

OK, I tested the app now without internet connection and it did not work, because it requires online maps.
About Maemo ? It was the Mephemeris app which is rather similar to this app.
I did slight modifications where I check the online status and if not, the maps are not loaded and the app runs flawlessly.
I have a simple routine to retrieve the GPS position by Javascript.
If you are interested I'll send you this version with a few modifications in the 'main' module sidclock.html.

There *is* a Python implementation for Android but I think HTML5 / Javascript is a lot faster and can just run in a browser.


#20 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 17 July 2013 - 12:35 PM

OK, I tested the app now without internet connection and it did not work, because it requires online maps.
About Maemo ? It was the Mephemeris app which is rather similar to this app.
I did slight modifications where I check the online status and if not, the maps are not loaded and the app runs flawlessly.
I have a simple routine to retrieve the GPS position by Javascript.
If you are interested I'll send you this version with a few modifications in the 'main' module sidclock.html.

There *is* a Python implementation for Android but I think HTML5 / Javascript is a lot faster and can just run in a browser.


Sure, it would be cool to see your suggested enhancements! BTW, are you saying that HTML5's geolocation code doesn't automatically use GPS if it is present?

HTML5 Geolocation

Note: Geolocation is much more accurate for devices with GPS, like iPhone.


I would have hoped to not require any special coding to take advantage of GPS devices :(

#21 skysurfer

skysurfer

    Ranger 4

  • -----
  • Posts: 302
  • Joined: 05 Oct 2009
  • Loc: NL, N 52 E 6

Posted 17 July 2013 - 01:51 PM

private email sent to the mail address stated in the source code

#22 BPO

BPO

    Ranger 4

  • -----
  • Posts: 377
  • Joined: 23 Feb 2010
  • Loc: South Island, NZ

Posted 17 July 2013 - 04:28 PM

All seems to be working well within Opera now. Good job.

#23 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 17 July 2013 - 04:38 PM

All seems to be working well within Opera now. Good job.


Thanks for confirming at your end, and for suggesting I look into Opera functionality in the first place :)

#24 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 28 August 2013 - 10:19 AM

Update: Now version 1.14. The most recent change was to allow one to set which windows are open/closed, and to remember them for the next time the app is started. I thought that maybe some folks would like to have a 'minimal' option like this e.g. just show the lunar phase and nothing else.

Now that I have an Android tablet to test this app with, I have discovered something odd about some of the dynamic DNS and URL-shrinkers that point to my HTML -- some of them detrimentally affect (ignore?) the HTML5 'viewport' meta tag, resulting in a very tiny appearance on small browser screens.

Dynamic DNS Providers: no-ip.org (OK), dyndns.org (broken), freedns.afraid.org (OK), duckdns.org (OK)
URL Shrinkers: gdriv.es (broken), gweb.io (OK)

Because of this, I now recommend the following Google Drive hosted pretty URL for testing my app:

http://darethehair.g...o/sidclock.html

I also remain puzzled by the need for a 'nocache' version of my app (chrome? IE 10?) but here is a link just in case:

http://darethehair.g...e/sidclock.html

Using the 'gweb.io' URL shrinker appears to preserve the 'viewport' meta tag, so that the SidClock windows nicely fill my Android browser screens (Chrome and Firefox). It would be cool if you folks could confirm that for other browsers/devices e.g. iOS, etc.. Thanks!

#25 darethehair

darethehair

    Explorer 1

  • -----
  • Posts: 69
  • Joined: 11 Sep 2009

Posted 06 November 2013 - 04:05 PM

Update: Now version 1.33. Lots of changes, but the most recent one was to provide an 'equirectangular' display style in addition to the original 'polar' one. This takes it beyond the original mandate of providing a visual 'clock' metaphor, but I wanted it to complete my dream of graphical star chart generation, and to mimic the functionality of some older Python code that I wrote :)

Yep, it is a bit bloated by now -- over 10k lines of HTML5 and Javascript :)






Cloudy Nights LLC
Cloudy Nights Sponsor: Astronomics