|
| 1 | + |
| 2 | +require([ |
| 3 | + "esri/WebScene", |
| 4 | + "esri/core/reactiveUtils", |
| 5 | + "esri/views/SceneView", |
| 6 | + |
| 7 | + "esri/widgets/Daylight/DaylightViewModel", |
| 8 | + "esri/widgets/Weather/WeatherViewModel", |
| 9 | +], function( |
| 10 | + WebScene, |
| 11 | + reactiveUtils, |
| 12 | + SceneView, |
| 13 | + |
| 14 | + DaylightViewModel, |
| 15 | + WeatherViewModel, |
| 16 | +) { |
| 17 | + |
| 18 | + // Weather UI elements |
| 19 | + const weatherContainer = document.getElementById("weather-container"); |
| 20 | + const weatherButtons = weatherContainer.querySelectorAll("button"); |
| 21 | + const weatherSettingsInputs = weatherContainer.querySelectorAll("input"); |
| 22 | + |
| 23 | + // Add "click" event listeners for each weather button. |
| 24 | + weatherButtons.forEach((button) => (button.onclick = () => onWeatherButtonClick(button))); |
| 25 | + |
| 26 | + // Add "input" event listeners for each weather input. |
| 27 | + weatherSettingsInputs.forEach((input) => { |
| 28 | + input.addEventListener("input", (event) => onWeatherInputChange(event.target)) |
| 29 | + }); |
| 30 | + |
| 31 | + // Daylight UI elements |
| 32 | + const timeInput = document.getElementById("time-input"); |
| 33 | + const playButton = document.getElementById("play"); |
| 34 | + |
| 35 | + // Add "input" event listener to the time 'range input'. |
| 36 | + timeInput.addEventListener("input", (event) => onTimeInputChange(event.target)); |
| 37 | + |
| 38 | + // Add "click" event listener to toggle time animation. |
| 39 | + playButton.onclick = () => animateTimeChange(); |
| 40 | + |
| 41 | + // Seasons UI elements |
| 42 | + const seasonsContainer = document.getElementById("seasons-container"); |
| 43 | + const seasonsButtons = seasonsContainer.querySelectorAll("button"); |
| 44 | + |
| 45 | + // Add "click" event listeners for each season button. |
| 46 | + seasonsButtons.forEach((button) => button.onclick = () => onSeasonsButtonClick(button)); |
| 47 | + |
| 48 | + const scene = new WebScene({ |
| 49 | + portalItem: { |
| 50 | + id: "6358da611a9342dbba1ec22ffcdaf62a" |
| 51 | + } |
| 52 | + }); |
| 53 | + |
| 54 | + const view = new SceneView({ |
| 55 | + map: scene, |
| 56 | + timeZone: "America/New_York", |
| 57 | + container: "viewDiv", |
| 58 | + environment: { |
| 59 | + lighting: { |
| 60 | + type: "sun", |
| 61 | + cameraTrackingEnabled: false, |
| 62 | + directShadowsEnabled: true |
| 63 | + } |
| 64 | + } |
| 65 | + }); |
| 66 | + |
| 67 | + // Add UI containers to the view. |
| 68 | + view.ui.add("environment-container", "top-right"); |
| 69 | + |
| 70 | + const daylightVM = new DaylightViewModel({ view }); |
| 71 | + |
| 72 | + const weatherVM = new WeatherViewModel({ view }); |
| 73 | + |
| 74 | + // Update icon based on DaylightViewModel animating. |
| 75 | + reactiveUtils.watch( |
| 76 | + () => daylightVM.dayPlaying, |
| 77 | + (playing) => { |
| 78 | + const iconNode = playButton.firstElementChild; |
| 79 | + |
| 80 | + // Show either "play" or "pause" icon depending on animation state. |
| 81 | + iconNode.classList.toggle("bi-play", !playing); |
| 82 | + iconNode.classList.toggle("bi-pause", playing); |
| 83 | + } |
| 84 | + ); |
| 85 | + |
| 86 | + // Sync HTML range input with expected position when animating. |
| 87 | + reactiveUtils.watch( |
| 88 | + () => daylightVM.timeSliderPosition, |
| 89 | + (value) => { |
| 90 | + // Avoid update if input element is already in sync with DaylightViewModel. |
| 91 | + // Ensure proper data types are compared; 'timeInput.value' is a string. |
| 92 | + if (timeInput.value !== value.toString()) { |
| 93 | + timeInput.value = value; |
| 94 | + } |
| 95 | + } |
| 96 | + ); |
| 97 | + |
| 98 | + // Update 'current time' label based on environment time |
| 99 | + reactiveUtils.watch( |
| 100 | + () => view.environment.lighting.date, |
| 101 | + (date) => { |
| 102 | + // Ensures the time displayed in the UI reflects the data's |
| 103 | + // timeZone instead of the browser's current timeZone. |
| 104 | + const label = date.toLocaleTimeString('en-US', { timeZone: view.timeZone }); |
| 105 | + |
| 106 | + document.getElementById("time-label").textContent = label; |
| 107 | + } |
| 108 | + ); |
| 109 | + |
| 110 | + // Update weather slider interactivity based on current weather type. |
| 111 | + reactiveUtils.watch( |
| 112 | + () => view.environment.weather, |
| 113 | + () => { |
| 114 | + const weather = view.environment.weather; |
| 115 | + const defaultValue = 0.5; |
| 116 | + |
| 117 | + // Ensure only the targeted item is 'active' |
| 118 | + weatherButtons.forEach((item) => item.classList.toggle("active", item.name === weather.type)); |
| 119 | + |
| 120 | + weatherSettingsInputs.forEach((input) => { |
| 121 | + const supports = input.name in weather; |
| 122 | + |
| 123 | + // Adds the 'disabled' attribute to each input if the current |
| 124 | + // weather type does not support this particular setting. |
| 125 | + // Reset 'value' back to the default if the input is disabled. |
| 126 | + input.toggleAttribute("disabled", !supports); |
| 127 | + input.value = supports ? weather[input.name] : defaultValue; |
| 128 | + }); |
| 129 | + }, |
| 130 | + // Ensure the watcher runs immediately. |
| 131 | + { initial: true } |
| 132 | + ); |
| 133 | + |
| 134 | + // Update weather slider interactivity based on current weather type. |
| 135 | + reactiveUtils.watch( |
| 136 | + () => daylightVM.currentSeason, |
| 137 | + (season) => { |
| 138 | + seasonsButtons.forEach((button) => { |
| 139 | + button.classList.toggle("active", button.name === season); |
| 140 | + }); |
| 141 | + }, |
| 142 | + // Ensure the watcher runs immediately. |
| 143 | + { initial: true } |
| 144 | + ); |
| 145 | + |
| 146 | + // Update the view's current weather using WeatherViewModel utility method. |
| 147 | + function onWeatherButtonClick(button) { |
| 148 | + weatherVM.setWeatherByType(button.name); |
| 149 | + } |
| 150 | + |
| 151 | + // Sync the current weather settings when an input changes. |
| 152 | + function onWeatherInputChange(input) { |
| 153 | + view.environment.weather[input.name] = parseFloat(input.value); |
| 154 | + } |
| 155 | + |
| 156 | + // Adjust the view's current time using DaylightViewModel. |
| 157 | + // This is typically activated whenever 'timeInput' changes. |
| 158 | + // Current value of the input represents "minutes since midnight". |
| 159 | + function onTimeInputChange(input) { |
| 160 | + daylightVM.timeSliderPosition = parseFloat(input.value); |
| 161 | + } |
| 162 | + |
| 163 | + // Update the view's season via DaylightViewModel. |
| 164 | + function onSeasonsButtonClick(button) { |
| 165 | + daylightVM.currentSeason = button.name; |
| 166 | + } |
| 167 | + |
| 168 | + // Update associated UI when animation is toggled. |
| 169 | + function animateTimeChange() { |
| 170 | + daylightVM.dayPlaying = !daylightVM.dayPlaying; |
| 171 | + } |
| 172 | + |
| 173 | +}); |
| 174 | + |
0 commit comments