diff --git a/.gitignore b/.gitignore index 153a081..25ab2bc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,8 @@ *.swp +*.pyc +*.log js/mobile.js js/init_plot.js css/mobile.css +cache.manifest +tiles/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..0fdfd9a --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (c) 2012-2016 Rossen Georgiev + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 6252466..8da1f65 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,27 @@ -# Habitat Mobile Tracker +# Habhub tracker -A tracker webapp specifically crafted for use on mobile devices. -But, works on any other device - desktops, laptops or netbooks. -The aim is to provide all key features in a compact package useful -on a mobile device. And yet, not feel stripped down on a desktop pc. -The mobile tracker is a continuation of [spacenear.us/tracker](http://spacenear.us/tracker). +![mobile tracker screenshot](resources/mobiletracker-screencap.png "mobile tracker screenshot") -[Live version](http://habhub.org/mt/) +A webapp for tracking high altitude balloons. Works an desktop and mobile devices. +The habhub tracker is a continuation of [spacenear.us/tracker](http://spacenear.us/tracker). + +Checkout the [Live version](http://habhub.org/mt/) ## Features * HAB tracking with [Habitat](http://habitat.habhub.org/) ([@github/ukhas/habitat](https://github.com/ukhas/habitat)) -* Map tracker with Google Maps API 3 +* Telemetry graph for each balloon * Chase Car functionality +* Near realtime weather overlays * [Daylight cycle overlay](https://github.com/rossengeorgiev/nite-overlay), for long flights +* Available to embed on any website +* Map tracker with Google Maps API 3 +* Run the app natively on `iOS` or with Chrome's 'add to screen' on `Android` ### Geo position +Available only on mobile devices. + The app will ask for permission to use your location. This is required for some of the features. It is **important** to note that your location will not be made available or send to anyone. Unless, you enable @@ -31,6 +36,17 @@ even when there is no network coverage. Latest position data will also be stored and used when you start up with no network. When you get back online, the app will fetch the latest position data. +## Browser requirements + +Any modern browser should be able to run the app. Including the latest version of IE. +This is also true for mobile, some build-in browsers may not work. + +## Contribute + +Don't hesitate to report any issues, or suggest improvements. Just visit the [issues page](https://github.com/rossengeorgiev/habitat-mobile-tracker/issues). +Pull requests are welcome. + + ## Installation Requirements: __Java__ and (Linux or Cygwin environment) @@ -45,21 +61,8 @@ For __applicationCache__ to work your server needs to send the correct MIME type Author: Daniel Saul [@danielsaul](https://github.com/danielsaul) -[See concept for phone portrait mode](https://github.com/rossengeorgiev/habitat-mobile-tracker/blob/master/resources/concept-app-portrait.png) +[See concept for phone portrait mode](https://github.com/rossengeorgiev/habitat-mobile-tracker/blob/master/resources/concept-app-portrait.png) [See concept for tablets](https://github.com/rossengeorgiev/habitat-mobile-tracker/blob/master/resources/concept-app-tablet.png) -## Currently Supported Devices - -### iOS, Android, Deskstops - -* Modern browser required (IE not supported) -* Browsers supporting _Geolocation API_ will have `Chase car mode` available -* For best experience on _iOS devices_, add the webapp to your home screen. -This will hide Safari's UI and make it look like a native app. I think it also allows it to run in the background. - - -## iPhone demo page - -Portrait and landscape test. Just open `test-iphone3g.html` in your browser of choice diff --git a/build.sh b/build.sh index a51d1f8..778275b 100755 --- a/build.sh +++ b/build.sh @@ -5,7 +5,7 @@ echo -n "Compiling CSS... " cd css rm -f mobile.css cat base.css skeleton.css layout.css habitat-font.css main.css > mobile.tmp -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=css mobile.tmp > mobile.css +java -jar "../tools/yuicompressor-2.4.8.jar" --type=css mobile.tmp > mobile.css rm -f mobile.tmp cd .. echo "Done!" @@ -15,31 +15,29 @@ echo -n "Compiling JavaScript... " cd js rm -f mobile.js init_plot.js # precompiled libs -cat jquery* iscroll.js >> mobile.js +cat jquery* >> mobile.js VERSION="`git rev-parse --short HEAD`" # compile the rest -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge chasecar.lib.js | sed "s/{VER}/$VERSION/" >> mobile.js -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge nite-overlay.js >> mobile.js -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge app.js >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge gmaps_extentions.js >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge iscroll.js >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge chasecar.lib.js | sed "s/{VER}/$VERSION/" >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge nite-overlay.js >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge app.js >> mobile.js #compile plot lib and config -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge _jquery.flot.js >> init_plot.js -java -jar "../tools/yuicompressor-2.4.8pre.jar" --type=js --disable-optimizations --nomunge plot_config.js >> init_plot.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge _jquery.flot.js >> init_plot.js +java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge plot_config.js >> init_plot.js cd .. echo "Done!" -echo -n "Increment cache version... " +echo -n "Generate cache.manifest..." -CACHE_VERSION=`grep "# version" cache.manifest | grep -Po "\d+"` -CACHE_VERSION=`expr $CACHE_VERSION + 1` -mv cache.manifest cache.manifest.tmp -sed "s/^\(# version\) [0-9]\+/\1 $CACHE_VERSION/" cache.manifest.tmp > cache.manifest -rm -f cache.manifest.tmp + +sed "s/^\(# version\) .*$/\1 $VERSION `date +%s`/" cache.manifest-dev > cache.manifest echo "Done!" -echo "Cache version: $CACHE_VERSION" echo "Build version: $VERSION" diff --git a/cache.manifest b/cache.manifest-dev similarity index 63% rename from cache.manifest rename to cache.manifest-dev index e729f00..701d56c 100644 --- a/cache.manifest +++ b/cache.manifest-dev @@ -1,26 +1,26 @@ CACHE MANIFEST -# version 127 +# version {VERSION} # gogole maps files -http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg -http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bcommon,map,util,geometry,poly,overlay%7D.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bcommon,util,stats%7D.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bcommon,map,util,geometry,poly,overlay,stats%7D.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bstats%7D.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bonion%7D.js -http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/10/20/%7Bcontrols%7D.js -http://maps.gstatic.com/mapfiles/openhand_8_8.cur -http://maps.gstatic.com/mapfiles/transparent.png +http://maps.google.com/maps/api/js?v=3.22&sensor=false&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg +http://fonts.googleapis.com/css?family=Roboto:300,400,500,700 http://maps.gstatic.com/mapfiles/undo_poly.png -http://maps.gstatic.com/mapfiles/arrow-down.png -http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png +http://maps.gstatic.com/mapfiles/mv/imgs8.png +http://maps.gstatic.com/mapfiles/transparent.png +http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png +http://maps.gstatic.com/mapfiles/api-3/images/google_white2_hdpi.png +http://maps.gstatic.com/mapfiles/api-3/images/google_white2.png +http://maps.gstatic.com/mapfiles/openhand_8_8.cur # app files +img/closedhand.cur +img/openhand.cur img/logo.png img/blank.png img/marker-you.png img/apple-touch-icon.png +img/markers/hab_nyan.gif +img/markers/nyan.gif img/markers/antenna-green.png img/markers/balloon-red.png img/markers/balloon-blue.png @@ -29,6 +29,7 @@ img/markers/balloon-purple.png img/markers/balloon-cyan.png img/markers/balloon-orange.png img/markers/balloon-yellow.png +img/markers/balloon-rpi.png img/markers/car-blue.png img/markers/car-green.png img/markers/car-red.png @@ -40,6 +41,7 @@ img/markers/parachute-yellow.png img/markers/parachute-cyan.png img/markers/parachute-orange.png img/markers/parachute-purple.png +img/markers/parachute-rpi.png img/markers/payload-blue.png img/markers/payload-cyan.png img/markers/payload-green.png @@ -47,6 +49,7 @@ img/markers/payload-orange.png img/markers/payload-purple.png img/markers/payload-red.png img/markers/payload-yellow.png +img/markers/payload-rpi.png img/markers/shadow.png img/markers/target-blue.png img/markers/target-cyan.png @@ -55,6 +58,7 @@ img/markers/target-orange.png img/markers/target-purple.png img/markers/target-red.png img/markers/target-yellow.png +img/hab-spinner.gif css/mobile.css js/mobile.js js/init_plot.js @@ -62,6 +66,7 @@ font/HabitatFont.eot font/HabitatFont.svg font/HabitatFont.ttf font/HabitatFont.woff +font/Roboto-regular.woff NETWORK: * diff --git a/css/layout.css b/css/layout.css index bff1ee1..2c811f3 100644 --- a/css/layout.css +++ b/css/layout.css @@ -42,10 +42,6 @@ header h1{ float: left; } -header span#app_name { - float: right; -} - /* Grey Area */ #grey-section{ width: 100%; diff --git a/css/main.css b/css/main.css index e3e21e8..c9df9e4 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,12 @@ * Main style sheet * */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto Regular'), local('Roboto-Regular'), url(../font/Roboto-regular.woff) format('woff'); +} html, body { margin: 0; @@ -9,10 +15,34 @@ html, body { width: 100%; height: 100%; overflow: hidden; + -webkit-touch-action: none; + -khtml-touch-action: none; + -moz-touch-action: none; + -ms-touch-action: none; + touch-action: none; +} +body { + font-family: "Roboto", Ariel, sans-serif; } -.scrollStyleV { - z-index: 100; +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rfloat { + float: right; +} +.lfloat { + float: left; +} + +.iScrollVerticalScrollbar { + z-index: 49; width: 5px; bottom: 6px; top: 6px; @@ -20,14 +50,92 @@ html, body { position: absolute; } -.scrollStyleV > div { +.iScrollVerticalScrollbar > div { position: absolute; background: none repeat scroll 0 0 padding-box rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 3px 3px 3px 3px; position: absolute; width: 100%; - z-index: 100; + z-index: 49; +} + +.slickbox { + z-index: 49; + background-color: #fff; + position: absolute; + height: 28px; + width: 195px; + border-radius: 20px; + box-shadow: 0 0 5px #888; + font-size: 11px; +} + +.slickbox svg { + width: 28px; + height: 28px; +} + +.slickbox span { + line-height: 14px; +} + +.slickbox div { + font-size: 14px; + margin-top: 3px; + width: 150px; + text-align: center; +} + +.slickbox svg path { + -webkit-transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + fill: #00a3d3; +} + +#timebox { + top: 7px; + right: 5px; +} + +#lookanglesbox { + top: 40px; + right: 5px; +} + +#timebox.past svg path { + fill: #c00; +} +#timebox .current { + margin-left: 11px; +} +#timebox .local { + margin-left: 5px; +} + +.slickbox .azimuth { + margin-left: 9px; + width: 91px; +} +.slickbox .bearing { + margin-right: 5px; + width: 60px; +} +.slickbox .elevation { + margin-left: 5px; + width: 95px; +} +.slickbox .range { + margin-right: 5px; + width: 60px; +} + +#mapscreen { + float: right; + position: relative; } #map img { @@ -69,6 +177,9 @@ html, body { } header { + position: fixed; + top: 0; + left; 0; padding: 0; margin: 0; height: 50px; @@ -76,20 +187,27 @@ header { max-height: 50px; line-height: normal; border-bottom: 5px solid #33b5e5; - box-shadow: 0px 3px 3px #888; + box-shadow: 0px 1px 3px #555; z-index: 5; - position: relative; } #app_name { line-height: normal; - margin-top: 10px; - position: relative; + margin-top: 6px; + position: absolute; + left: 225px; height: 40px; + text-align: left; + cursor: pointer; } header > div { position: relative; height: 50px; } + +#mapscreen { + margin-top: 55px; +} + #map, #main { position: relative; @@ -101,6 +219,39 @@ header > div { height: 100%; width: 100%; } +#main { + float: left; + overflow: hidden; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +header .search { + float: left; + width: 190px; + margin-top: 10px; +} + +header .search form { + position: relative; +} +header .search form input { + position: absolute; + border-radius: 100px; +} +header .search form input[type='text'] { + left: 0; + padding-left: 10px; + padding-right: 35px; + width: 143px; +} +header .search form input[type='submit'] { + right: 0; +} .nav { list-style: none outside none; @@ -110,17 +261,18 @@ header > div { display: block; min-width: 40px; width: auto; - float: left; + float: right; margin: 5px 0px; } #locate-me { - float: right; + position: absolute; + left: 195px; + top: 12px; font-size: 25px; - height: 45px; - line-height: 50px; - margin-top: 5px; - margin-left: 5px; + height: 25px; + width: 25px; + line-height: 25px; cursor: pointer; } @@ -129,6 +281,7 @@ header > div { padding: 0 5px;; float: left; height: 40px; + width: 35px; border-right: 1px solid #33b5e5; cursor: pointer; color: #fff; @@ -139,21 +292,40 @@ header > div { .nav > li:active { background-color: #33b5e5; } .nav > li:hover { border-bottom: 5px solid #fff; } -.header .arrow { - font-weight: normal; - float: right; - color: #aaa; - } + +#main .data { + cursor: url('../img/openhand.cur'), row-resize; +} + +#main.drag, +#main.drag .data, +#main.drag .header { + cursor: url('../img/closedhand.cur'), row-resize; +} + #main .header { height: 20px; padding: 10px; padding-right: 3px; + padding-left: 5px; border-bottom: 1px solid #33b5e5; position: relative; - z-index: 4; + z-index: 51; cursor: pointer; background-color: #fff; + border-left: 5px solid #fff; +} +#main .row.selected { + border-left: 5px solid #00A3D3; +} +#main .row:hover .header { + border-left: 5px solid #00A3D3; +} + +#main .row:hover .data { + border-left: 5px solid #ccc; } + #main .vehicle0 .header { border-top: 1px solid #33b5e5; } @@ -164,14 +336,58 @@ header > div { line-height: 100px; border: 0; } +#main .header.empty:hover { + border:0; +} #main .header span { overflow: hidden; display: block; width: 90%; float: left; + white-space: nowrap; +} + +.header .arrow { + font-weight: normal; + float: right; + color: #aaa; + display: block; + height: 14px; + width: 16px; + line-height: 11px; + font-size: 16px; + margin-top: 4px; + -webkit-transition: 0.2s linear; + -moz-transition: 0.2s linear; + -ms-transition: 0.2s linear; + -o-transition: 0.2s linear; + transition: 0.2s linear; + -webkit-transform-origin: center; + -moz-transform-origin: center; + -ms-transform-origin: center; + -o-transform-origin: center; + transform-origin: center; +} + + +.row .header .arrow:after { + content: "▲"; +} +.row:hover .arrow { + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); + color: #00a3d3; +} +.row.active .header .arrow { + -webkit-transform: rotate(-180deg); + -moz-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + -o-transform: rotate(-180deg); + transform: rotate(-180deg); } -.row .header .arrow:after { content: "▲"; } -.row.active .header .arrow:after { content: "▼"; } #main .row { background-color: #f4f4f4; @@ -181,33 +397,83 @@ header > div { } #main .row .header { } -#main .row:hover .header { color: #33b5e5; font-weight: bold; } -#main .row .data { display: none; width: 100%; } +#main .row .data { + display: none; + width: 100%; + border-left: 5px solid #F4F4F4; +} + +#main .row .icon-target:before { + display: none; +} +#main .row.follow .icon-target:before { + display: inline-block; +} #main .row.active .data { display: inline-block; } #main .row .data .left, #main .row .data .right { position: relative; z-index: 4; } +#main .row .data .vbutton { + position: absolute; + background-color: #fff; + right: 5px; + top: 150px; + padding-left: 3px; + padding-right: 3px; + font-size: 10px; + border-radius: 5px; + border: 1px solid #ccc; + cursor: pointer; + z-index: 5; +} + +#main .row .data .vbutton.active { + background-color: #33b5e5; + border: 1px solid #33b5e5; + color: #fff; +} + +#main .row .data .vbutton:hover { + border: 1px solid #5E5E5E; +} + +#main .portrait .row .data .vbutton { + display: none; +} + #main .row .data img { position: absolute; z-index: 2; bottom: 40%; - right: 25%; + right: 30%; opacity: 0.6; width: 46px; height: 84px; + -webkit-transition: 0.2s ease; + -moz-transition: 0.2s ease; + -ms-transition: 0.2s ease; + -o-transition: 0.2s ease; + transition: 0.2s ease; } #main .row .data img.car { width: 55px; height: 25px; } +#main .row:hover .data img { + opacity: 0.8; +} +#main .row.follow .data img { + opacity: 1.0; +} #main .row .header .graph { position: absolute; bottom: -1px; - right: 18px; + right: 22px; width: 60px; height: 40px; + z-index: 1; } #main .row .data dt > i { font-size: 12px; @@ -216,15 +482,33 @@ header > div { text-decoration: none; color: #00A3D3; } +#main .data dl > dt.receivers { + font-size: 12px; + font-weight: normal; +} -#chasecarbox, -#aboutbox { +.flatpage { + margin-top: 55px; + overflow: auto; position: absolute; width: 100%; - z-index: 4; + z-index: 100; background: #fff; } -#aboutbox span { + +.topanel { + float: right; + position: relative; + width: auto; + padding: 0; + padding-left: 10px; + padding-right: 20px; + box-shadow: 2px 0px 8px 0px #555; + overflow-x: hidden; + z-index: 3; +} + +.flatpage p { display: block; text-align: justify; margin-bottom: 15px; @@ -235,18 +519,19 @@ header > div { margin: 0; } .slimContainer { + position: relative; margin: 20px auto; - width: 300px; - height: 100%; + width: 290px; } .slimContainer hr { margin-bottom: 10px; } .slimContainer .row { - width: 100%; + width: 280px; display: block; margin: 5px; vertical-align: middle; + position: relative; } .slimContainer .row.info { margin-top: 10px; @@ -254,6 +539,9 @@ header > div { .slimContainer .row > span { float: left; } +.slimContainer .row.option > span { + width: 200px; +} .slimContainer .row.option > span { line-height: 30px; } @@ -264,7 +552,8 @@ header > div { /* iOS styled switch buttons */ .switch { - float: right; + position: absolute; + right: 0px; height: 28px; width: 77px; border: 1px solid #979797; @@ -296,7 +585,7 @@ header > div { height: 26px; position: relative; top: 0; - z-index: 3; + z-index: 51; border: solid 1px #919191; border-radius: 28px; box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white; @@ -304,17 +593,23 @@ header > div { background-image: -webkit-linear-gradient(#CECECE, #FBFBFB); background-image: -moz-linear-gradient(#CECECE, #FBFBFB); background-image: -o-linear-gradient(#CECECE, #FBFBFB); - -o-transition: all 0.125s ease-in-out; -webkit-transition: all 0.125s ease-in-out; -moz-transition: all 0.125s ease-in-out; - -o-transform: translateX(0px); + -ms-transition: all 0.125s ease-in-out; + -o-transition: all 0.125s ease-in-out; + transition: all 0.125s ease-in-out; -webkit-transform: translate3d(0,0,0); -moz-transform: translateX(0px); + -ms-transform: translateX(0px); + -o-transform: translateX(0px); + transform: translateX(0px); } .switch.on > .thumb { -webkit-transform: translate3d(49px,0,0); - -o-transform: translateX(49px); -moz-transform: translateX(49px); + -ms-transform: translateX(49px); + -o-transform: translateX(49px); + transform: translateX(49px); } .switch:hover > .thumb { box-shadow: inset 0 2px 1px #fff, inset 0 -2px 1px #fff; @@ -349,7 +644,41 @@ header > div { display: none; } -@media only screen and (min-width: 361px) { +.nav .home { + display: none; +} + +@media only screen and (min-width: 900px) { +} + +@media only screen and (max-width: 600px) { + #app_name { + left: 150px; + } + #locate-me { + left: 120px; + } + header .search { + width: 110px; + } + header .search form input[type='text'] { + width: 63px; + } +} + +@media only screen and (max-width: 500px) { + #app_name { + left: 30px; + } + #locate-me { + left: 0px; + } + header .search { + display: none; + } +} + +@media only screen and (min-width: 481px) { .portrait { display: none; } .landscape { display: block; } #telemetry_graph { @@ -359,13 +688,17 @@ header > div { width: 280px; background: #fff; position: relative; + z-index: 2; + } + #telemetry_graph .holder { + border-left: 1px solid #ddd; } #telemetry_graph .graph_label { position: absolute; - top: -21px; + top: -26px; left: 0px; - height: 21px; - padding: 0px 5px; + height: 20px; + padding: 3px 5px; background: #00a3d3; z-index: 20; font-weight: bold; @@ -376,7 +709,6 @@ header > div { cursor: pointer; } #map { - float: right; height: 245px; width: 280px; } @@ -384,8 +716,8 @@ header > div { float: left; height: 245px; width: 199px; - border-right: 1px solid #ddd; - overflow: hidden; + margin-top: 55px; + box-shadow: -2px 0px 6px 0px #555; } #main .data { height: 100%; @@ -394,7 +726,7 @@ header > div { #main .data .left { float: left; width: 160px; - padding-left: 10px; + padding-left: 5px; } #main .data dl > dt { color: #000; @@ -410,45 +742,37 @@ header > div { line-height: 11px; font-size: 11px; } - #main .data dl > dt.receivers { - font-size: 10px; - font-weight: normal; - } - #main .data dl > dd.receivers { - font-size: 10px; - } #main .row .data img { right: 5%; top: 50px; } } -@media only screen and (max-width: 360px) { +@media only screen and (max-width: 480px) { .portrait { display: block; } .landscape { display: none; } #map{ height: 225px; } #main { - height: 180px; + height: 150px; } #main .data { - height: 140px; + min-height: 108px; } #main .data .left { float: left; width: 65%; - padding-left: 10px; - padding-right: 20px; + padding-left: 5px; } #main .data .right { float: right; padding-right: 10px; - width: 20%; + width: 25%; } #main .data dl > dt { color: #000; line-height: 11px; - margin-top: 15px; + margin-top: 7px; font-weight: bold; font-size: 14px; } @@ -459,16 +783,15 @@ header > div { line-height: 11px; font-size: 11px; } - #main .data dl > dt.receivers { - font-size: 10px; - font-weight: normal; - } - #main .data dl > dd.receivers { - font-size: 10px; - } #main .row .header .graph { - width: 150px; + width: 180px; height: 40px; } + #locate-me { + display: none; + } + #app_name { + left: 0px; + } } diff --git a/embed-preview.html b/embed-preview.html new file mode 100644 index 0000000..ed7a94e --- /dev/null +++ b/embed-preview.html @@ -0,0 +1,263 @@ + + + Preview of embedded habhub tracker + + + + + + + +
+

Embed habhub tracker on your page

+

1. Options

+
+ + +
+ + +
+ + +
+ + +
+

2. Style

+
+ + + + +
+ + + + +
+

3. HTML code

+ + +

4. Live preview

+
+ +
+
+ + + diff --git a/font/Roboto-regular.woff b/font/Roboto-regular.woff new file mode 100644 index 0000000..ebea051 Binary files /dev/null and b/font/Roboto-regular.woff differ diff --git a/glyphs/icon-clock.svg b/glyphs/icon-clock.svg new file mode 100644 index 0000000..a6d8537 --- /dev/null +++ b/glyphs/icon-clock.svg @@ -0,0 +1,144 @@ + + + + + Clock Icon + + + + + + image/svg+xml + + Clock Icon + + 2014-06-11 + + + Rossen Georgiev + + + + + Rossen Georgiev + + + + + + + + + + + + + + + + + + + diff --git a/glyphs/icon-clock_simple.svg b/glyphs/icon-clock_simple.svg new file mode 100644 index 0000000..3631242 --- /dev/null +++ b/glyphs/icon-clock_simple.svg @@ -0,0 +1,60 @@ + + + + + + + Clock Icon + + + + + + + + image/svg+xml + + + + Clock Icon + + + + 2014-06-11 + + + + + + Rossen Georgiev + + + + + + + + + + Rossen Georgiev + + + + + + + + + + + + + + + + + + + + + diff --git a/glyphs/icon-code.svg b/glyphs/icon-code.svg new file mode 100644 index 0000000..bf2bec3 --- /dev/null +++ b/glyphs/icon-code.svg @@ -0,0 +1,72 @@ + + + + + Code Icon + + + + + + image/svg+xml + + Code Icon + + 2014-06-06 + + + Rossen Georgiev + + + + + Rossen Georgiev + + + + + + + diff --git a/glyphs/icon-compass.svg b/glyphs/icon-compass.svg new file mode 100644 index 0000000..30c2129 --- /dev/null +++ b/glyphs/icon-compass.svg @@ -0,0 +1,192 @@ + + + + + Clock Compass + + + + + + + + + + + + image/svg+xml + + Clock Compass + + 2014-07-09 + + + Rossen Georgiev + + + + + Rossen Georgiev + + + + + + + + + + + + + N + W + E + S + + + diff --git a/glyphs/icon-compass_simple.svg b/glyphs/icon-compass_simple.svg new file mode 100644 index 0000000..69ef31a --- /dev/null +++ b/glyphs/icon-compass_simple.svg @@ -0,0 +1,29 @@ + + +Clock Compass + + + +image/svg+xml + +Clock Compass + +2014-07-09 + + +Rossen Georgiev + + + + +Rossen Georgiev + + + + + + + + + + diff --git a/glyphs/icon-weather.svg b/glyphs/icon-weather.svg new file mode 100644 index 0000000..7ea62c8 --- /dev/null +++ b/glyphs/icon-weather.svg @@ -0,0 +1,74 @@ + + + + + Weather Icon + + + + + + image/svg+xml + + Weather Icon + + 2013 + + + KickstandApps (kickstandapps.com). + + + + + KickstandApps (kickstandapps.com). + + + https://github.com/kickstandapps/WeatherIcons + + + + + diff --git a/img/closedhand.cur b/img/closedhand.cur new file mode 100644 index 0000000..ef36639 Binary files /dev/null and b/img/closedhand.cur differ diff --git a/img/fluidicon.png b/img/fluidicon.png new file mode 100755 index 0000000..9345aed Binary files /dev/null and b/img/fluidicon.png differ diff --git a/img/hab-spinner.gif b/img/hab-spinner.gif new file mode 100755 index 0000000..48eac54 Binary files /dev/null and b/img/hab-spinner.gif differ diff --git a/img/markers/antenna-green.png b/img/markers/antenna-green.png index 62e267b..37ffbd2 100644 Binary files a/img/markers/antenna-green.png and b/img/markers/antenna-green.png differ diff --git a/img/markers/balloon-rpi.png b/img/markers/balloon-rpi.png new file mode 100644 index 0000000..c340631 Binary files /dev/null and b/img/markers/balloon-rpi.png differ diff --git a/img/markers/balloon-xmark.png b/img/markers/balloon-xmark.png new file mode 100644 index 0000000..6e8c201 Binary files /dev/null and b/img/markers/balloon-xmark.png differ diff --git a/img/markers/car-blue.png b/img/markers/car-blue.png index d9a0e68..09192f0 100644 Binary files a/img/markers/car-blue.png and b/img/markers/car-blue.png differ diff --git a/img/markers/car-green.png b/img/markers/car-green.png index 974dd77..c42da50 100644 Binary files a/img/markers/car-green.png and b/img/markers/car-green.png differ diff --git a/img/markers/car-red.png b/img/markers/car-red.png index 5a4dc85..ce44c92 100644 Binary files a/img/markers/car-red.png and b/img/markers/car-red.png differ diff --git a/img/markers/car-yellow.png b/img/markers/car-yellow.png index 79f5cdc..5c35476 100644 Binary files a/img/markers/car-yellow.png and b/img/markers/car-yellow.png differ diff --git a/img/markers/hab_nyan.gif b/img/markers/hab_nyan.gif new file mode 100644 index 0000000..bfb6876 Binary files /dev/null and b/img/markers/hab_nyan.gif differ diff --git a/img/markers/nyan-afro.gif b/img/markers/nyan-afro.gif new file mode 100644 index 0000000..62cf2d7 Binary files /dev/null and b/img/markers/nyan-afro.gif differ diff --git a/img/markers/nyan-coin.gif b/img/markers/nyan-coin.gif new file mode 100644 index 0000000..7bde0a2 Binary files /dev/null and b/img/markers/nyan-coin.gif differ diff --git a/img/markers/nyan-cool.gif b/img/markers/nyan-cool.gif new file mode 100644 index 0000000..82260e2 Binary files /dev/null and b/img/markers/nyan-cool.gif differ diff --git a/img/markers/nyan-gameboy.gif b/img/markers/nyan-gameboy.gif new file mode 100644 index 0000000..a3389e6 Binary files /dev/null and b/img/markers/nyan-gameboy.gif differ diff --git a/img/markers/nyan-mon.gif b/img/markers/nyan-mon.gif new file mode 100644 index 0000000..afb9806 Binary files /dev/null and b/img/markers/nyan-mon.gif differ diff --git a/img/markers/nyan-mummy.gif b/img/markers/nyan-mummy.gif new file mode 100644 index 0000000..6221b5f Binary files /dev/null and b/img/markers/nyan-mummy.gif differ diff --git a/img/markers/nyan-pirate.gif b/img/markers/nyan-pirate.gif new file mode 100644 index 0000000..7e47916 Binary files /dev/null and b/img/markers/nyan-pirate.gif differ diff --git a/img/markers/nyan-pumpkin.gif b/img/markers/nyan-pumpkin.gif new file mode 100644 index 0000000..8952601 Binary files /dev/null and b/img/markers/nyan-pumpkin.gif differ diff --git a/img/markers/nyan-tothemax.gif b/img/markers/nyan-tothemax.gif new file mode 100644 index 0000000..e978749 Binary files /dev/null and b/img/markers/nyan-tothemax.gif differ diff --git a/img/markers/nyan.gif b/img/markers/nyan.gif new file mode 100644 index 0000000..fc230a1 Binary files /dev/null and b/img/markers/nyan.gif differ diff --git a/img/markers/parachute-rpi.png b/img/markers/parachute-rpi.png new file mode 100644 index 0000000..ad421b6 Binary files /dev/null and b/img/markers/parachute-rpi.png differ diff --git a/img/markers/payload-rpi.png b/img/markers/payload-rpi.png new file mode 100644 index 0000000..9f533fb Binary files /dev/null and b/img/markers/payload-rpi.png differ diff --git a/img/openhand.cur b/img/openhand.cur new file mode 100644 index 0000000..cb444f9 Binary files /dev/null and b/img/openhand.cur differ diff --git a/index.html b/index.html index b4033fe..ef149c0 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,20 @@ - habitat mobile tracker - + habhub tracker (high altitude balloons) + - - + + + + + + + + - @@ -31,43 +36,87 @@
-
    +
    +
    + + +
    +
    +
      3. +
    3. + + + +
      4. +
    4. + + + +
    - mobile
    tracker     + no
    location
-