Dynamic Weather Sphere - Revision history

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T20:35:39Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T19:45:47Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T02:10:44Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T02:09:44Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T02:08:12Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T02:01:32Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T01:57:12Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T01:56:03Z

Dynamic Weather Sphere

Vishwa: /* Dynamic Weather Sphere */

2025-06-04T01:51:47Z

Dynamic Weather Sphere

Vishwa: Created page with "== Dynamic Weather Sphere == '''Description:''' The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a s..."

2025-06-03T23:45:34Z

Created page with "== Dynamic Weather Sphere == '''Description:''' The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a s..."

New page

== Dynamic Weather Sphere ==

'''Description:'''
The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a sphere based on the temperature. This works due to ZCubes' native support for technologies like jQuery and AJAX.
''(Note: To run this code, you need your own API key from OpenWeatherMap.)''

<pre>
const api_key = "";

function fetchWeather(city) {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${api_key}&units=metric`;

return new Promise((resolve, reject) => {
$.ajax({
url: url,
method: "GET",
success: function(data) {
resolve(data);
},
error: function(error) {
reject(error);
}
});
});
}

function displayWeather(data) {
if (!data) return;
const temp = data.main.temp;
let tempr = temp.toString();
const description = data.weather[0].main;
const city_name = data.name;

const weatherTextures = {
"Clear": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRhrFFyI_ZsQxhtPPloslzBSIvQVTknnWnxg&s",
"Clouds": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQiHiLG5-_rbp2DB8M7QqUJkoF8SU7Bql4xQ&s",
"Rain": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&s",
"Drizzle": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&",
"Thunderstorm": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSt_N3mgajhyeHZ15XcG0_VdnybnmYlb0E-qQ&",
"Snow": "https://hips.hearstapps.com/countryliving/assets/16/49/gettyimages-85786660-1.jpg",
};

const textureURL = weatherTextures[description] || "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRhrFFyI_ZsQxhtPPloslzBSIvQVTknnWnxg&s";

RENDER3D([
["type", "settings", "coordinates", "size", "stroke", "fill", "helper", "material"],
["sphere", "", [1, 3, 3], [5, 20, 20], "black", textureURL, false, "phong"],
["text", temp.toString(), [100, 100, 100], [5, 2, 20], 0x00ff00, 0x00ff00, true, "backgroundreflection"]
]);
}

async function run() {
const data = await fetchWeather("Minneapolis");
displayWeather(data);
}

run();
</pre>

← Older revision		Revision as of 20:35, 4 June 2025
Line 68:		Line 68:
	* [https://wiki.zcubes.com/Z_API_Functions Learn more about APIs in the Z^3 Code Editor]		* [https://wiki.zcubes.com/Z_API_Functions Learn more about APIs in the Z^3 Code Editor]
	* [https://wiki.zcubes.com/Array.jq() Array.jq()] to learn more about Jquery in Z^3 Code Editor.		* [https://wiki.zcubes.com/Array.jq() Array.jq()] to learn more about Jquery in Z^3 Code Editor.
		+	* [https://wiki.zcubes.com/Render3D More examples using Render3D()]

@@ Line 2: / Line 2: @@
 '''Description:'''
-The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a sphere based on the temperature. This works due to ZCubes' native support for technologies like jQuery and AJAX.
+This weather sphere uses JavaScript jQuery/AJAX to fetch real-time weather data from the OpenWeatherMap API and render a 3D scene based on ZCubes' `RENDER3D()` function. The `fetchWeather()` function sends an AJAX request and retrieves temperature and weather conditions for a given city. Once the data is received, `displayWeather()` maps the weather condition (like "Clear" or "Rain") to a texture image, then uses `RENDER3D()` to create a 3D sphere with that texture and a temperature label as 3D text.
 [[File:London-example.png|thumb]]
-[[File:Minneapolis-example.png|thumb]]
+The `RENDER3D()` function follows a tabular structure where the first row defines column names (such as "type", "coordinates", "fill", etc.), and each following row describes a 3D object.
 [[File:Xiayi-example.png |thumb]]
 ''(Note: To run this code, you need your own API key from OpenWeatherMap.)''
@@ Line 60: / Line 64: @@
 run();
 </pre>

@@ Line 5: / Line 5: @@
 [[File:London-example.png|thumb]]
 [[File:Minneapolis-example.png|thumb]]
 ''(Note: To run this code, you need your own API key from OpenWeatherMap.)''

@@ Line 4: / Line 4: @@
 The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a sphere based on the temperature. This works due to ZCubes' native support for technologies like jQuery and AJAX.
 <gallery>
-[[File:Planets-clock-ex.png ‎|left]]
+[[File:Planets-clock-ex.png|left|thumb|Planets clock example]]
 </gallery>
 ''(Note: To run this code, you need your own API key from OpenWeatherMap.)''

@@ Line 4: / Line 4: @@
 The following code uses real-time weather data from OpenWeatherMap.org and uses it to display the temperature and update a sphere based on the temperature. This works due to ZCubes' native support for technologies like jQuery and AJAX.
 <gallery>
-[[Planets-clock-ex.png:File.jpg]]
+[[File:Planets-clock-ex.png ‎|left]]
 </gallery>
 ''(Note: To run this code, you need your own API key from OpenWeatherMap.)''