FlatZ Frontpage

[mvveelen]

You have to change the URL's it in the settings.js in the subfolder js

[bickel]

Tnx for the menu options and the webcamsupport!

[jec_44]

Hi guys,

Wonderfull ! i have a suggestion, could you add a traffic page based on google map ?

I added a new traffic.html page with

Code: Select all

<script>
if ($.Traffic) 
{document.write('<li class="active" ><a class="stay" href="traffic.html"><i class="icon-th icon-white"></i> Traffic</a></li>');}
</script>

Most difficult is to add correct javascript. It can be useful !

Thk

[jec_44]

I do it, not most beautiful coding but it works !

Code: Select all

<!-- DONUT CHART -->
            <div class="col-sm-3 col-lg-3" style="width:75%;float: right">
               <div class="dash-unit " style="height:610px;overflow-y:scroll">
                  <dtitle>Traffic</dtitle>
                  <hr>
                  <!--<div class="info-user" style="float:right;padding-right:20px;">
                     <span aria-hidden="true" class="li_news fs2"></span>
                  </div>-->
                  <p id="map" style="width:100%; height:100%"></p>
               </div>
            </div>
         </div>
         <!-- /row -->
      </div>
      <!-- /container -->
	  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" charset="utf-8">  
var address = 'Nantes, FR';

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 12
   });
	var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
  
   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
      else {
         // Google couldn't geocode this request. Handle appropriately.
      }
   });
</script>

[jec_44]

See the result

[galadril]

See the result

Looks good

[SweetPants]

Hi,

Where do I set the screen size?
I have an old Nexus 7 tablet but can't get it to fit this screen size

[jec_44]

galadril, i'am lokking for integrate it into settings.js to be able to enter parameters :

Code: Select all

$.traffic = "Paris, France";
$.zoom = "15";

bu i 'don't how to do and how to use it on traffic.html

Thanks

[galadril]

but i 'don't how to do and how to use it on traffic.html

Thanks for the help.
I've added the Traffic page to the github project with two new settings in the settings.js

[PeterFleur]

Very nice indeed. The traffic part is very good!

Is it possible to add the variable "Refresh interval" on the settings.js file?
The graphs doesn't seem to work anymore (only 1 graph working) or is it a problem in my settings?

Peter

[jec_44]

Hi,

Yes it's very nice Frontpage, congratulations. Some improvement ideas :

• Change language for the Weather, for exemple, i know with openweathermap, you add &lang=fr in the javascript

• An issue : on tablet or Smartphone : menu button (on top right) doesn't work

• Add button to switch on Full Screen

Thanks

[SweetPants]

Hi,

Where do I set the screen size?
I have an old Nexus 7 tablet but can't get it to fit this screen size

nobody??

[galadril]

Where do I set the screen size?
I have an old Nexus 7 tablet but can't get it to fit this screen size

You could try to make your own mainNexus7.css

change/add:

Code: Select all

.container {
    width: 1170px;
}

and set the width to your needs.


change settings.js to use your mainNexus7.css as the theme.

[SwordFish]

@galadril
How youre doing with the implitation of scenes in the frontpage?
Just asking no rush

[dijkdj]

I run it my RPI but my screen stays empty. I also tried to run from my laptop, also no result. I turned for example the camera page on, but no result.

Do some file need extra rights?

I Entered the right url and a few IDX switches.

[Ierlandfan]

I love the design!

Do you know if it's possible to add mjpeg streams to the camera page?

[mikeoo]

Very nice template and started today with it and have 2 questions and input.

1. How to combine Temp en Humidity in the frontpage. I have some Cresta Sensors the measure both.
2. I cannot find any weather info in settings.js

Maybe nice to add buienrader info (http://gratisweerdata.buienradar.nl/#Buienradar )

[Brutus]

Very nice template and started today with it and have 2 questions and input.

1. How to combine Temp en Humidity in the frontpage. I have some Cresta Sensors the measure both.
2. I cannot find any weather info in settings.js

Maybe nice to add buienrader info (http://gratisweerdata.buienradar.nl/#Buienradar )

Change one of the camera URL's with this link:
http://api.buienradar.nl/image/1.0/Rada ... 6&h=256&t=



Greetings

[mikeoo]

Very nice template and started today with it and have 2 questions and input.

1. How to combine Temp en Humidity in the frontpage. I have some Cresta Sensors the measure both.
2. I cannot find any weather info in settings.js

Maybe nice to add buienrader info (http://gratisweerdata.buienradar.nl/#Buienradar )

Change one of the camera URL's with this link:
http://api.buienradar.nl/image/1.0/Rada ... 6&h=256&t=



Greetings

Indeed good one, but it's nice to get all weather things on it's own page. But for now indeed a good tip tnx.

[mikeoo]

I love the design!

Do you know if it's possible to add mjpeg streams to the camera page?

Just replace the webcam url in Settins.js with your stream url.

For Foscam streams you can try this way the get the stream working.
http://www.ipcam-shop.nl/media/Foscam%2 ... I9821W.pdf