{"id":5311,"date":"2024-10-09T21:14:15","date_gmt":"2024-10-09T21:14:15","guid":{"rendered":"https:\/\/mixedrealitynow.com\/?p=5311"},"modified":"2024-10-20T23:52:02","modified_gmt":"2024-10-20T23:52:02","slug":"building-a-simple-app-with-meta-horizon-os-ui-set","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/building-a-simple-app-with-meta-horizon-os-ui-set","title":{"rendered":"How to build a simple spatial panel app with Meta Horizon OS UI Set"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">NASA Mars Rover Image Viewer App<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1839\" height=\"1065\" src=\"http:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut.png\" alt=\"\" class=\"wp-image-5376\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut.png 1839w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut-300x174.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut-1024x593.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut-768x445.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut-1536x890.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut-18x10.png 18w\" sizes=\"auto, (max-width: 1839px) 100vw, 1839px\" \/><\/figure>\n\n\n\n<p>This article demonstrates how to quickly build a simple spatial panel app using newly released <strong><a href=\"https:\/\/developers.meta.com\/horizon\/documentation\/unity\/unity-isdk-uiset\" target=\"_blank\" rel=\"noopener\" title=\"\">Meta Horizon OS UI Set<\/a><\/strong>. The app shows list of the photo images taken by Mars Rover Curiosity, provided by NASA Open API. When the user selects one of the image, it displays selected photo on a large curved panoramic window.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Meta Horizon OS UI Set?<\/h2>\n\n\n\n<p><strong><a href=\"https:\/\/developers.meta.com\/horizon\/documentation\/unity\/unity-isdk-uiset\" target=\"_blank\" rel=\"noopener\" title=\"\">Meta Horizon OS UI Set<\/a><\/strong> is a collection of UI components built with Unity canvas UI and Interaction SDK components based on Meta Quest Design System. By using these UI components, you can quickly build common UI patterns for spatial apps with consistent input modality support, visual quality, and consistent interaction behaviors. Now you don\u2019t have to spend time configuring things to get proper input support such as hand tracking and controllers.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"480\" style=\"aspect-ratio: 854 \/ 480;\" width=\"854\" autoplay controls src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet_HL_480p.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Where to find the UI Set<\/h2>\n\n\n\n<p>UI Set is available in the latest Meta XR Interaction SDK Essentials package v69 which can be downloaded from the Unity Asset Store. It is recommended install Meta XR Interaction SDK package which automatically installs Essentials package together.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/id.unity.com\/en\/conversations\/0734a968-c0e6-4d40-bdc6-e9b993c7566d004f\" target=\"_blank\" rel=\"noopener\" title=\"\">Unity Asset Store \u2013 Meta XR Interaction SDK<\/a> <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Documentation <\/h2>\n\n\n\n<p>You can find comprehensive documentation on Meta\u2019s Horizon developer website and learn about the details of the UI components and Theme Manager.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developers.meta.com\/horizon\/documentation\/unity\/unity-isdk-uiset\" target=\"_blank\" rel=\"noopener\" title=\"\">Development Guideline<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.meta.com\/horizon\/design\/buttons\" target=\"_blank\" rel=\"noopener\" title=\"\">UI Components Design Guideline<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Figma design resources<\/h2>\n\n\n\n<p>With Meta Horizon OS <strong>UISet <\/strong>Figma file, you can easily sketch out ideas on spatial app experiences.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/community\/file\/1425877250001997196\">https:\/\/www.figma.com\/community\/file\/1425877250001997196<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Location of the UI Set in the package<\/h2>\n\n\n\n<p>UI Set folder is located at <strong>Packages > Meta XR Interaction SDK Essentials > Runtime > Sample > Objects > UISet<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1641\" height=\"689\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder.png\" alt=\"\" class=\"wp-image-5364\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder.png 1641w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder-300x126.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder-1024x430.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder-768x322.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder-1536x645.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-folder-18x8.png 18w\" sizes=\"auto, (max-width: 1641px) 100vw, 1641px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Example scenes<\/h2>\n\n\n\n<p>Due to Unity\u2019s restrictions, example scenes located in the Packages folder cannot be opened directly. To access and modify these scenes, simply drag and drop them into the Assets folder. This will enable you to open and edit the scenes as needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1812\" height=\"918\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes.png\" alt=\"\" class=\"wp-image-5365\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes.png 1812w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes-300x152.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes-1024x519.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes-768x389.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes-1536x778.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-unity-uiset-examplescenes-18x9.png 18w\" sizes=\"auto, (max-width: 1812px) 100vw, 1812px\" \/><\/figure>\n\n\n\n<p><strong>UISet <\/strong>example scene shows entire library of the UI components. You can also try changing the theme using the ThemeManager\u2019s inspector.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-1024x520.png\" alt=\"\" class=\"wp-image-5314\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-1024x520.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-300x152.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-768x390.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-1536x780.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-2048x1040.png 2048w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-library-18x9.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>UISetPatterns <\/strong>example scenes shows widely used UI patterns built with UI components such as menus, simple settings page, and some of the common navigation layout patterns that you can find on Quest.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2153\" height=\"1093\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns.png\" alt=\"\" class=\"wp-image-5315\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns.png 2153w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-300x152.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-1024x520.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-768x390.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-1536x780.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-2048x1040.png 2048w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/isdk-uiset-examples-patterns-18x9.png 18w\" sizes=\"auto, (max-width: 2153px) 100vw, 2153px\" \/><\/figure>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Building a simple app using existing UI pattern \u2013 NASA Mars Rover Image Viewer<\/h2>\n\n\n\n<p>By leveraging provided UI patterns, you can easily build common app experiences. In this example, I chose this pattern (<strong>ContentUIExample-HorizonOS1.prefab<\/strong>) to make a simple photo image feed and viewer using NASA\u2019s Mars Rover API.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1350\" height=\"721\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1.png\" alt=\"\" class=\"wp-image-5316\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1.png 1350w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1-300x160.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1-1024x547.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1-768x410.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet-Pattern1-18x10.png 18w\" sizes=\"auto, (max-width: 1350px) 100vw, 1350px\" \/><\/figure>\n\n\n\n<p>As you can see, it is constructed many nested Horizonal Layout Groups and Scroll View components. From this pattern example, I have removed unnecessary search bar and content tile buttons. Since I wanted to dynamically populate the content area with image tile buttons, I removed all objects under main content area Scroll View.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2198\" height=\"1273\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png\" alt=\"\" class=\"wp-image-5317\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png 2198w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-300x174.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1024x593.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-768x445.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1536x890.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-2048x1186.png 2048w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_24_51-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-18x10.png 18w\" sizes=\"auto, (max-width: 2198px) 100vw, 2198px\" \/><\/figure>\n\n\n\n<p>I have modified <strong>TextTileButton_IconAndLabel_Regular<\/strong>.prefab to meet my app\u2019s requirements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2058\" height=\"930\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png\" alt=\"\" class=\"wp-image-5319\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png 2058w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-300x136.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1024x463.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-768x347.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1536x694.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-2048x925.png 2048w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-12_27_06-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-18x8.png 18w\" sizes=\"auto, (max-width: 2058px) 100vw, 2058px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">NASA Open API <\/h2>\n\n\n\n<p>You can easily signup for NASA\u2019s Open APIs and get API Key through this website: <a href=\"https:\/\/api.nasa.gov\/\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/api.nasa.gov\/ <\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1636\" height=\"1813\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs.png\" alt=\"\" class=\"wp-image-5320\" style=\"object-fit:cover\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs.png 1636w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs-271x300.png 271w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs-924x1024.png 924w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs-768x851.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs-1386x1536.png 1386w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-08-16_57_54-NASA-Open-APIs-11x12.png 11w\" sizes=\"auto, (max-width: 1636px) 100vw, 1636px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Script for retrieving images through API<\/h2>\n\n\n\n<p>Prepared a simple script that retrieves JSON data from the NASA\u2019s Mars Rover API. When parsing the image URL, it assigns the image texture into the Tile Button\u2019s Image component. Since they are Unity UI\u2019s Toggle buttons, I have added listeners so that when one of the image buttons are pressed, it displays the image on a separate window.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\nusing UnityEngine.Networking;\nusing UnityEngine.UI;\nusing TMPro;\n\npublic class MarsRoverImageFetcher : MonoBehaviour\n{\n    public string marsRoverApiUrl = &quot;https:\/\/api.nasa.gov\/mars-photos\/api\/v1\/rovers\/&quot;; \/\/ Base URL for Mars Rover API\n    public string roverName = &quot;curiosity&quot;; \/\/ Default rover name, can be changed\n    public string apiKey = &quot;YOUR_NASA_API_KEY&quot;; \/\/ NASA API Key\n    public GameObject tileButtonPrefab; \/\/ Prefab for the tile button\n    public Transform contentPanel; \/\/ Content panel of the ScrollView\n    public Image TargetImageDisplay; \/\/ Target Image component to display selected image\n\n    private string currentCategory = &quot;&quot;;\n\n    void Start()\n    {\n        \/\/ Optionally, load initial photos from the Curiosity rover on a specific date\n        StartCoroutine(GetMarsRoverImages(&quot;curiosity&quot;, &quot;2022-10-02&quot;));\n    }\n\n    public void OnRoverButtonClick(string roverName)\n    {\n        this.roverName = roverName;\n        \/\/ Fetch rover images for a specific date (e.g., Earth date)\n        StartCoroutine(GetMarsRoverImages(roverName, &quot;2022-10-02&quot;));\n    }\n\n    IEnumerator GetMarsRoverImages(string roverName, string earthDate)\n    {\n        string url = $&quot;{marsRoverApiUrl}{roverName}\/photos?earth_date={earthDate}&api_key={apiKey}&quot;;\n        UnityWebRequest request = UnityWebRequest.Get(url);\n\n        yield return request.SendWebRequest();\n\n        if (request.result == UnityWebRequest.Result.ConnectionError || request.result == UnityWebRequest.Result.ProtocolError)\n        {\n            Debug.LogError(request.error);\n        }\n        else\n        {\n            \/\/ Clear existing content\n            foreach (Transform child in contentPanel)\n            {\n                Destroy(child.gameObject);\n            }\n\n            \/\/ Parse JSON response\n            string jsonResponse = request.downloadHandler.text;\n            MarsRoverApiResponse response = JsonUtility.FromJson<MarsRoverApiResponse>(jsonResponse);\n\n            \/\/ Instantiate buttons for each photo\n            foreach (Photo photo in response.photos)\n            {\n                GameObject button = Instantiate(tileButtonPrefab, contentPanel);\n                TextMeshProUGUI buttonText = button.GetComponentInChildren<TextMeshProUGUI>();\n                buttonText.text = $&quot;{photo.rover.name} - {photo.camera.full_name}&quot;;\n\n                \/\/ Load and set rover image\n                if (!string.IsNullOrEmpty(photo.img_src))\n                {\n                    StartCoroutine(LoadImage(photo.img_src, button));\n                }\n\n                \/\/ Add a toggle event listener\n                Toggle toggleComponent = button.GetComponent<Toggle>();\n                toggleComponent.onValueChanged.AddListener((isOn) => OnToggleValueChanged(isOn, button));\n\n            }\n        }\n    }\n\n    IEnumerator LoadImage(string imageUrl, GameObject button)\n    {\n        UnityWebRequest request = UnityWebRequestTexture.GetTexture(imageUrl);\n        yield return request.SendWebRequest();\n\n        if (request.result == UnityWebRequest.Result.ConnectionError || request.result == UnityWebRequest.Result.ProtocolError)\n        {\n            Debug.LogError(request.error);\n        }\n        else\n        {\n            Texture2D texture = ((DownloadHandlerTexture)request.downloadHandler).texture;\n            Image buttonImage = button.GetComponentInChildren<Image>();\n            buttonImage.sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));\n        }\n    }\n\n    void OnToggleValueChanged(bool isOn, GameObject toggleObj)\n    {\n        \/\/ Implement functionality to display photo details\n        \/\/ Get the Image component from the selected Toggle\n        Image toggleImage = toggleObj.GetComponentInChildren<Image>();\n\n        \/\/ If the Toggle is selected, assign the image to TargetImageDisplay\n        if (toggleImage != null && TargetImageDisplay != null)\n        {\n            TargetImageDisplay.sprite = toggleImage.sprite;\n            Debug.Log(&quot;Selected image assigned to TargetImageDisplay.&quot;);\n        }\n    }\n}\n\n[System.Serializable]\npublic class MarsRoverApiResponse\n{\n    public List<Photo> photos;\n}\n\n[System.Serializable]\npublic class Photo\n{\n    public string img_src; \/\/ URL to the image\n    public Rover rover; \/\/ Rover information\n    public Camera camera; \/\/ Camera information\n}\n\n[System.Serializable]\npublic class Rover\n{\n    public string name; \/\/ Name of the rover (e.g., &quot;Curiosity&quot;)\n}\n\n[System.Serializable]\npublic class Camera\n{\n    public string full_name; \/\/ Full name of the camera (e.g., &quot;Mast Camera&quot;)\n}\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #D8DEE9FF\">.Collections<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #D8DEE9FF\">.Collections.Generic<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityEngine<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityEngine<\/span><span style=\"color: #D8DEE9FF\">.Networking<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityEngine<\/span><span style=\"color: #D8DEE9FF\">.UI<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">using<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">TMPro<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MarsRoverImageFetcher<\/span><span style=\"color: #D8DEE9FF\"> : <\/span><span style=\"color: #8FBCBB\">MonoBehaviour<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> marsRoverApiUrl <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/api.nasa.gov\/mars-photos\/api\/v1\/rovers\/<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Base URL for Mars Rover API<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> roverName <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">curiosity<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Default rover name, can be changed<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> apiKey <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">YOUR_NASA_API_KEY<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ NASA API Key<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">GameObject<\/span><span style=\"color: #D8DEE9FF\"> tileButtonPrefab<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Prefab for the tile button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Transform<\/span><span style=\"color: #D8DEE9FF\"> contentPanel<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Content panel of the ScrollView<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Image<\/span><span style=\"color: #D8DEE9FF\"> TargetImageDisplay<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Target Image component to display selected image<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">private<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> currentCategory <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Start<\/span><span style=\"color: #ECEFF4\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Optionally, load initial photos from the Curiosity rover on a specific date<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">StartCoroutine<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">GetMarsRoverImages<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">curiosity<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">2022-10-02<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">OnRoverButtonClick<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">roverName<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">roverName<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">roverName<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Fetch rover images for a specific date (e.g., Earth date)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">StartCoroutine<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">GetMarsRoverImages<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">roverName<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">2022-10-02<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">IEnumerator<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">GetMarsRoverImages<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">roverName<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">earthDate<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">$<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">{marsRoverApiUrl}{roverName}\/photos?earth_date={earthDate}&api_key={apiKey}<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Get<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">yield<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">SendWebRequest<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">result<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Result<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ConnectionError<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">result<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Result<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ProtocolError<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">Debug<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">LogError<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">else<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">            <\/span><span style=\"color: #616E88\">\/\/ Clear existing content<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">foreach<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">Transform<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">child<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">in<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">contentPanel<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #88C0D0\">Destroy<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">child<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">gameObject<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">            <\/span><span style=\"color: #616E88\">\/\/ Parse JSON response<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">jsonResponse<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">downloadHandler<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">text<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">MarsRoverApiResponse<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">JsonUtility<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">FromJson<\/span><span style=\"color: #ECEFF4\"><<\/span><span style=\"color: #D8DEE9FF\">MarsRoverApiResponse<\/span><span style=\"color: #ECEFF4\">><\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">jsonResponse<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">            <\/span><span style=\"color: #616E88\">\/\/ Instantiate buttons for each photo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">foreach<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">Photo<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">photo<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">in<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">photos<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">GameObject<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Instantiate<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">tileButtonPrefab<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">contentPanel<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">TextMeshProUGUI<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">buttonText<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">GetComponentInChildren<\/span><span style=\"color: #ECEFF4\"><<\/span><span style=\"color: #D8DEE9FF\">TextMeshProUGUI<\/span><span style=\"color: #ECEFF4\">><\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">buttonText<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">text<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">$<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">{photo.rover.name} - {photo.camera.full_name}<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">                <\/span><span style=\"color: #616E88\">\/\/ Load and set rover image<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">IsNullOrEmpty<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">photo<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">img_src<\/span><span style=\"color: #D8DEE9FF\">))<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #88C0D0\">StartCoroutine<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #88C0D0\">LoadImage<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">photo<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">img_src<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">                <\/span><span style=\"color: #616E88\">\/\/ Add a toggle event listener<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">Toggle<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleComponent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">GetComponent<\/span><span style=\"color: #ECEFF4\"><<\/span><span style=\"color: #D8DEE9FF\">Toggle<\/span><span style=\"color: #ECEFF4\">><\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">toggleComponent<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">onValueChanged<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">AddListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">isOn<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=><\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">OnToggleValueChanged<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">isOn<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">IEnumerator<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">LoadImage<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">imageUrl<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">GameObject<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequestTexture<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">GetTexture<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">imageUrl<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">yield<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">SendWebRequest<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">result<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Result<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ConnectionError<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">||<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">result<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">==<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">UnityWebRequest<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Result<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">ProtocolError<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">Debug<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">LogError<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">error<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">else<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">Texture2D<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">texture<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> ((<\/span><span style=\"color: #D8DEE9\">DownloadHandlerTexture<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #D8DEE9\">request<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">downloadHandler<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">texture<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">Image<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">buttonImage<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">button<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">GetComponentInChildren<\/span><span style=\"color: #ECEFF4\"><<\/span><span style=\"color: #D8DEE9FF\">Image<\/span><span style=\"color: #ECEFF4\">><\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">buttonImage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">sprite<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Sprite<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Create<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">texture<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Rect<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">texture<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">texture<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Vector2<\/span><span style=\"color: #D8DEE9FF\">(0<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">5<\/span><span style=\"color: #D8DEE9\">f<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> 0<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9FF\">5<\/span><span style=\"color: #D8DEE9\">f<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">OnToggleValueChanged<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">bool<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">isOn<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">GameObject<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleObj<\/span><span style=\"color: #ECEFF4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Implement functionality to display photo details<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Get the Image component from the selected Toggle<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">Image<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleImage<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleObj<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">GetComponentInChildren<\/span><span style=\"color: #ECEFF4\"><<\/span><span style=\"color: #D8DEE9FF\">Image<\/span><span style=\"color: #ECEFF4\">><\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ If the Toggle is selected, assign the image to TargetImageDisplay<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">toggleImage<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">null<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&&<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">TargetImageDisplay<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">!=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">null<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">TargetImageDisplay<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">sprite<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleImage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">sprite<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">Debug<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">Log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Selected image assigned to TargetImageDisplay.<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Serializable<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MarsRoverApiResponse<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">List<\/span><span style=\"color: #81A1C1\"><<\/span><span style=\"color: #D8DEE9\">Photo<\/span><span style=\"color: #81A1C1\">><\/span><span style=\"color: #D8DEE9FF\"> photos<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Serializable<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Photo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> img_src<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ URL to the image<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Rover<\/span><span style=\"color: #D8DEE9FF\"> rover<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Rover information<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Camera<\/span><span style=\"color: #D8DEE9FF\"> camera<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Camera information<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Serializable<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Rover<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> name<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Name of the rover (e.g., &quot;Curiosity&quot;)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #D8DEE9\">System<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">Serializable<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Camera<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">string<\/span><span style=\"color: #D8DEE9FF\"> full_name<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ Full name of the camera (e.g., &quot;Mast Camera&quot;)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>To display the selected photo, I added another window in the scene. Since I wanted to have a large curved cinematic screen for photo image display, I grabbed a curved video player panel that exist in <strong>ComprehensiveRigExample <\/strong>scene. I have removed everything in it because I will use it only to display an image which can be simply assigning a texture to the Image component.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20-1024x573.png\" alt=\"\" class=\"wp-image-5334\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20-1024x573.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20-300x168.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20-768x429.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20-18x10.png 18w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_39_04-FLUID-NASAImageViewer-ComprehensiveRigExample-Windows-Mac-Linux-Unity-20.png 1379w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1024x475.png\" alt=\"\" class=\"wp-image-5335\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1024x475.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-300x139.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-768x356.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1536x713.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-18x8.png 18w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-16_44_44-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png 1851w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>One small addition was to adding colliders to both windows\u2019 title bar area to make it grabbable and movable with Interaction SDK\u2019s <strong>Hand Grab<\/strong> Interactor and <strong>Ray Grab<\/strong> Interactor. You can easily add these interactions by right clicking and using the Quick Actions menu under <strong>Interaction SDK<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"938\" height=\"1153\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11.png\" alt=\"\" class=\"wp-image-5336\" style=\"width:595px;height:auto\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11.png 938w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11-244x300.png 244w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11-833x1024.png 833w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11-768x944.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-10-18_13_52-FLUID-NASAImageViewer-MarsRoverImageViewer-Android-Unity-2021.3.26f1-_DX11-10x12.png 10w\" sizes=\"auto, (max-width: 938px) 100vw, 938px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2353\" height=\"873\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png\" alt=\"\" class=\"wp-image-5323\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021.png 2353w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-300x111.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1024x380.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-768x285.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-1536x570.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-2048x760.png 2048w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-09-13_34_05-FLUID-NASAImageViewer-MarsRoverImageViewer-Windows-Mac-Linux-Unity-2021-18x7.png 18w\" sizes=\"auto, (max-width: 2353px) 100vw, 2353px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using Meta XR Simulator for design & development iterations<\/h2>\n\n\n\n<p>With <a href=\"https:\/\/developers.meta.com\/horizon\/documentation\/unity\/xrsim-intro\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Meta XR Simulator<\/a>, you can quickly test out your app in the context of simulated environments. It supports all available input modalities such as hands and controllers which allows you test out interactions.<\/p>\n\n\n\n<p>Here is an example of using Meta XR Simulator for testing out my app\u2019s functionalities and interactions \u2013 how the image data retrieved from NASA API are populated with instantiated tile buttons, how pressing a image tile button displays selected image on a large curved panel, etc.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"480\" style=\"aspect-ratio: 854 \/ 480;\" width=\"854\" controls loop src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/XRSim.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Result<\/h2>\n\n\n\n<p>The app is running on the device in passthrough Mixed Reality. As you can see, by using UI Set components, all input modalities are supported by default such as direct hand interactions \u2013 poke, scroll \u2013 and indirect interactions with hand ray or controller rays. All UI components provides proper visual feedback for different interaction states such as hover and select. For example, you can see scaling button size on hand poke interactions.<\/p>\n\n\n\n<p>This app shows an example of theme switching between default Quest Design System\u2019s dark & light theme using the Theme Manager.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"480\" style=\"aspect-ratio: 854 \/ 480;\" width=\"854\" controls src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/MRIV_Rev2_480p.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Multitasking Support<\/h2>\n\n\n\n<p>With experimental feature <strong>Seamless Multitasking<\/strong> (available from Horizon OS v69) enabled, you can interact with the app along with other system apps. It supports natural input switching with select action \u2013 pinch gesture with hand or button on controller. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"480\" style=\"aspect-ratio: 854 \/ 480;\" width=\"854\" controls src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/UISet_MT_480p_Sh.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>NASA Mars Rover Image Viewer App This article demonstrates how to quickly build a simple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5376,"comment_status":"closed","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31,6,21],"tags":[37,13],"class_list":["post-5311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-featured","category-projects","tag-metaquest","tag-mixed-reality"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/10\/2024-10-12-17_49_12-CapCut.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/5311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/comments?post=5311"}],"version-history":[{"count":34,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/5311\/revisions"}],"predecessor-version":[{"id":5456,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/5311\/revisions\/5456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media\/5376"}],"wp:attachment":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media?parent=5311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=5311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=5311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}