Developing a web page to display the real-time voltage values

Use the following chart to find the time zone for your device. The following two examples will show you how to find the correct time zone value:

  • Example 1: Let's assume your device is located in Sri Jayawardenepura, the time zone is 5.5, that is, UTC +05:30 (Chennai, Kolkata, Mumbai, New Delhi, Sri Jayawardenepura)
  • Example 2: If it is located in Newfoundland, the time zone is -3.5, that is, UTC -03:30 Newfoundland

    Zone

    Place names

    UTC -11:00

    International Date Line West, Midway Island, Samoa

    UTC -10:00

    Hawaii

    UTC -09:00

    Alaska

    UTC -08:00

    Pacific Time (US & Canada), Tijuana

    UTC -07:00

    Arizona, Chihuahua, Mazatlan, Mountain Time (US & Canada)

    UTC -06:00

    Central America, Central Time (US & Canada), Guadalajara, Mexico City, Monterrey, Saskatchewan

    UTC -05:00

    Bogota, Eastern Time (US & Canada, Indiana (East)), Lima, Quito

    UTC -04:30

    Caracas

    UTC -04:00

    Atlantic Time (Canada), La Paz, Santiago

    UTC -03:30

    Newfoundland

    UTC -03:00

    Brasilia, Buenos Aires, Georgetown, Greenland

    UTC -02:00

    Mid-Atlantic

    UTC -01:00

    Azores, Cape Verde Is.

    UTC +00:00

    Casablanca, Dublin, Edinburgh, Lisbon, London, Monrovia

    UTC +01:00

    Amsterdam, Belgrade, Berlin, Bern, Bratislava, Brussels, Budapest, Copenhagen, Ljubljana, Madrid, Paris, Prague, Rome, Sarajevo, Skopje, Stockholm, Vienna, Warsaw, West Central Africa, Zagreb

    UTC +02:00

    Athens, Bucharest, Cairo, Harare, Helsinki, Istanbul, Jerusalem, Kyev, Minsk, Pretoria, Riga, Sofia, Tallinn, Vilnius

    UTC +03:00

    Baghdad, Kuwait, Moscow, Nairobi, Riyadh, St. Petersburg, Volgograd

    UTC +03:30

    Tehran

    UTC +04:00

    Abu Dhabi, Baku, Muscat, Tbilisi, Yerevan

    UTC +04:30

    Kabul

    UTC +05:00

    Ekaterinburg, Islamabad, Karachi, Tashkent

    UTC +05:30

    Chennai, Kolkata, Mumbai, New Delhi, Sri Jayawardenepura

    UTC +05:45

    Kathmandu

    UTC +06:00

    Almaty, Astana, Dhaka, Novosibirsk

    UTC +06:30

    Rangoon

    UTC +07:00

    Bangkok, Hanoi, Jakarta, Krasnoyarsk

    UTC +08:00

    Beijing, Chongqing, Hong Kong, Irkutsk, Kuala Lumpur, Perth, Singapore, Taipei, Ulaan Bataar, Urumqi

    UTC +09:00

    Osaka, Sapporo, Seoul, Tokyo, Yakutsk

    UTC +09:30

    Adelaide, Darwin

    UTC +10:00

    Brisbane, Canberra, Guam, Hobart, Melbourne, Port Moresby, Sydney, Vladivostok

    UTC +11:00

    Magadan, New Caledonia, Solomon Is.

    UTC +12:00

    Auckland, Fiji, Kamchatka, Marshall Is., Wellington

    UTC +13:00

    Nuku'alofa

Displaying data on a web page

Now, we will look at how to display the temperature data on a web page using HTML and JavaScript by connecting to the Xively cloud.

  1. Copy the following index.html file from the code folder of Chapter 5 to your computer's hard drive.
  2. Using a text editor (Notepad or Notepad++), open the file and edit the highlighted code snippets using your NearBus and Xively device configuration values. Modify the device ID, user, and password:
    var device_id = "NB101706"; // Your device ID
var user = "****"; // Your NearBus Web user
var pass = "****"; // Your NearBus Web password

    Following are the variables:

    • device_id: Your NearBus device ID
    • user: Your NearBus user name
    • pass: Your NearBus password
  3. Replace 1 with your NearBus channel ID:
    ret = NearAPIjs( "ADC_INPUT", device_id , 1, 0, "RONLY" );
  4. Replace 1910481586 with your Xively device Feed ID, 1.png with your NearBus channel ID (only replace the number part) and 5.5 with your time zone.
    <div id="div_temp_chart_cm"> <img src="https://api.cosm.com/v2/feeds/1910481586/datastreams/1.png?width=750&height=400&colour=%23f15a24&duration=3hours&show_axis_labels=true&detailed_grid=true&timezone=5.5" > </div>

    You can also modify the cosm to Xively in the preceding URL because both are working. The modified URL can be written as follows:

    <div id="div_temp_chart_cm"> <img src="https://api.xively.com/v2/feeds/1910481586/datastreams/1.png?width=750&height=400&colour=%23f15a24&duration=3hours&show_axis_labels=true&detailed_grid=true&timezone=5.5" > </div>
  5. Now, save and close the file. Then, open the file using your preferred web browser. You will see a graph displaying the real-time voltage values against the time which is continuously updating.
  6. Also, you can copy the file into your smart phone's SD card or its internal memory, and then open it with the mobile web browser to see the real time graph.
  7. The following image shows a real time graph that is plotting the output voltage of a solar cell, where the x axis represents the time (t) and the y axis represents the voltage (V):
    Displaying data on a web page
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.57.126