{"id":1184,"date":"2024-01-24T11:04:51","date_gmt":"2024-01-24T10:04:51","guid":{"rendered":"https:\/\/osiris.itabc.cnr.it\/aton\/?page_id=1184"},"modified":"2025-10-06T12:26:58","modified_gmt":"2025-10-06T10:26:58","slug":"apps","status":"publish","type":"page","link":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/","title":{"rendered":"Apps"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"944\" src=\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png\" alt=\"\" class=\"wp-image-1393\" style=\"width:163px;height:auto\" srcset=\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png 693w, https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps-220x300.png 220w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/figure>\n\n\n\n<p>ATON architecture allows to <strong>plug&amp;play<\/strong> custom web-apps, built on top of framework functionalities. This is when the built-in <a href=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/hathor\/\">Hathor <\/a>front-end does not fit your requirements and you need a customized solution in terms of UI, logic, etc&#8230; For background and more details about the apps architecture, you can refer to the open-access publication <a href=\"https:\/\/doi.org\/10.2312\/dh.20253055\" target=\"_blank\" rel=\"noreferrer noopener\">Shaping a Web3D framework for different scientific communities: ATON as a service in H2IOSC<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">App structure<\/h2>\n\n\n\n<p>You can start from the<a href=\"https:\/\/github.com\/phoenixbf\/aton\/tree\/master\/wapps\/app_template\" target=\"_blank\" rel=\"noreferrer noopener\"> app template here<\/a> as reference structure.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"125\" src=\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/10\/app-struct.png\" alt=\"\" class=\"wp-image-1424\" style=\"width:409px;height:auto\" srcset=\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/10\/app-struct.png 668w, https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/10\/app-struct-300x56.png 300w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Every ATON app is a <a href=\"https:\/\/web.dev\/learn\/pwa\/progressive-web-apps\" target=\"_blank\" rel=\"noreferrer noopener\">PWA<\/a> located in <strong>wapps\/<\/strong> folder<\/li>\n\n\n\n<li>The subfolder name is the <strong>app ID<\/strong>: for example the <a href=\"https:\/\/github.com\/phoenixbf\/aton\/tree\/master\/wapps\/app_template\" target=\"_blank\" rel=\"noreferrer noopener\">app template<\/a> ID is actually &#8220;<strong>app_template<\/strong>&#8220;<\/li>\n\n\n\n<li>The bare miminum for the app folder is a <strong>PWA manifest<\/strong> (see <a href=\"https:\/\/github.com\/phoenixbf\/aton\/blob\/master\/wapps\/app_template\/app.webmanifest\" target=\"_blank\" rel=\"noreferrer noopener\">the template one<\/a>), a classic <strong>index.html<\/strong>, a <strong>main js<\/strong> entry (if not inlined in the index.html) and &#8220;<strong>appicon.png<\/strong>&#8221; representing the app icon<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Creating an App<\/h2>\n\n\n\n<p>You can clone the app template and modify accordingly all resources indeed, but you can create very quickly (in a few seconds) a new app via<em> command-line<\/em> using the built-in <strong>app generator tool<\/strong>. After the <a href=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/getting-started\/run-deploy\/\">basic setup<\/a>, from the main ATON folder you can type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">node tools\/app.js<\/code><\/pre>\n\n\n\n<p>Then follow instructions and built-in help. The above tool will create everything for you &#8211; otherwise, if you prefer starting from scratch, this is how the <strong>main js entry file<\/strong> for your app looks like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Realize our app\nlet APP = ATON.App.realize();<\/code><\/pre>\n\n\n\n<p>This will create our main <strong>APP <\/strong>object (you can indeed pick other names), with several built-in feature and PWA routines to facilitate and boost the development process.<\/p>\n\n\n\n<p>The basic routines are <strong>setup <\/strong>and <strong>update<\/strong>: <em>setup <\/em>routine is used to initialize the app and setup event handlers, UI, logic, etc.. while <em>update <\/em>(optional) is called on every frame. Let&#8217;s have a look at a sample setup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">APP.setup = ()=&gt;{\n  \/\/ Realize base ATON and add base UI events\n  ATON.realize();\n  ATON.UI.addBasicEvents();\n\n  \/\/ Load sample 3D model\n  ATON.createSceneNode(\"sample\").load(\"samples\/models\/skyphos\/skyphos.gltf\").attachToRoot();\n};<\/code><\/pre>\n\n\n\n<p>Here we realize base ATON and add a few minimal UI events (loading spinner, etc.). Then we create a scene node called &#8220;sample&#8221; and load a sample glTF model (an etruscan skyphos).<\/p>\n\n\n\n<p>That&#8217;s it! You app will be accessible on<code> &lt;your-ATON-instance&gt;\/a\/<strong>&lt;your-AppID&gt;<\/strong><\/code><\/p>\n\n\n\n<iframe style='height:500px; margin:0;' src=\"https:\/\/aton.ispc.cnr.it\/a\/app_template\/\" width='100%' height='500px' frameborder='0' allow='autoplay; fullscreen; xr-spatial-tracking' xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share allowfullscreen mozallowfullscreen='true' webkitallowfullscreen='true'><\/iframe>\n\n\n\n<p>Here a few practical built-in routines or variables:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ load an ATON scene via SceneID, optional onSuccess routine\nAPP.loadScene(sid, onSuccess)\n\n\/\/ This contains URL parameters: you can use APP.params.get() to retrieve a specific parameter\nAPP.params\n\n\/\/ This read-only variable contains the full path to the APP\n\/\/ (e.g. if you require local resources, like icons, specific 3D assets, media, etc.)\nAPP.basePath<\/code><\/pre>\n\n\n\n<p>For complete <strong>App API<\/strong> refer to <a href=\"https:\/\/aton.ispc.cnr.it\/apidoc\/client\/App.html\" target=\"_blank\" rel=\"noreferrer noopener\">official documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Git integration<\/h2>\n\n\n\n<p>A very common app development workflow involves git. A single ATON app typically refers to a git repository (e.g. on github or elsewhere) &#8211; see for instance <a href=\"https:\/\/github.com\/phoenixbf\/merkhet-app\">Merkhet app<\/a>. You can safely update the main ATON instance with recent commits, since the <strong>wapps\/<\/strong> folder is <em>masked<\/em> (it is ignored and it wont be affected &#8211; except the app_template) &#8211; so you as a developer or team can focus specifically on app development progress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ATON architecture allows to plug&amp;play custom web-apps, built on top of framework functionalities. This is when the built-in Hathor front-end does not fit your requirements and you need a customized solution in terms of UI, logic, etc&#8230; For background and more details about the apps architecture, you can refer to the open-access publication Shaping a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":71,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1184","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Apps - ATON<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apps - ATON\" \/>\n<meta property=\"og:description\" content=\"ATON architecture allows to plug&amp;play custom web-apps, built on top of framework functionalities. This is when the built-in Hathor front-end does not fit your requirements and you need a customized solution in terms of UI, logic, etc&#8230; For background and more details about the apps architecture, you can refer to the open-access publication Shaping a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/\" \/>\n<meta property=\"og:site_name\" content=\"ATON\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-06T10:26:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png\" \/>\n\t<meta property=\"og:image:width\" content=\"693\" \/>\n\t<meta property=\"og:image:height\" content=\"944\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/\",\"url\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/\",\"name\":\"Apps - ATON\",\"isPartOf\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png\",\"datePublished\":\"2024-01-24T10:04:51+00:00\",\"dateModified\":\"2025-10-06T10:26:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage\",\"url\":\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png\",\"contentUrl\":\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png\",\"width\":693,\"height\":944},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/osiris.itabc.cnr.it\/aton\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overview\",\"item\":\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#website\",\"url\":\"https:\/\/osiris.itabc.cnr.it\/aton\/\",\"name\":\"ATON\",\"description\":\"open-source Web3D\/WebXR framework by CNR ISPC\",\"publisher\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/osiris.itabc.cnr.it\/aton\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#organization\",\"name\":\"ATON\",\"url\":\"https:\/\/osiris.itabc.cnr.it\/aton\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png\",\"contentUrl\":\"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png\",\"width\":100,\"height\":100,\"caption\":\"ATON\"},\"image\":{\"@id\":\"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apps - ATON","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/","og_locale":"en_US","og_type":"article","og_title":"Apps - ATON","og_description":"ATON architecture allows to plug&amp;play custom web-apps, built on top of framework functionalities. This is when the built-in Hathor front-end does not fit your requirements and you need a customized solution in terms of UI, logic, etc&#8230; For background and more details about the apps architecture, you can refer to the open-access publication Shaping a [&hellip;]","og_url":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/","og_site_name":"ATON","article_modified_time":"2025-10-06T10:26:58+00:00","og_image":[{"width":693,"height":944,"url":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/","url":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/","name":"Apps - ATON","isPartOf":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#website"},"primaryImageOfPage":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage"},"image":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage"},"thumbnailUrl":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png","datePublished":"2024-01-24T10:04:51+00:00","dateModified":"2025-10-06T10:26:58+00:00","breadcrumb":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#primaryimage","url":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png","contentUrl":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2025\/09\/ATON-apps.png","width":693,"height":944},{"@type":"BreadcrumbList","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/osiris.itabc.cnr.it\/aton\/"},{"@type":"ListItem","position":2,"name":"Overview","item":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/overview\/"},{"@type":"ListItem","position":3,"name":"Apps"}]},{"@type":"WebSite","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#website","url":"https:\/\/osiris.itabc.cnr.it\/aton\/","name":"ATON","description":"open-source Web3D\/WebXR framework by CNR ISPC","publisher":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/osiris.itabc.cnr.it\/aton\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#organization","name":"ATON","url":"https:\/\/osiris.itabc.cnr.it\/aton\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/","url":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png","contentUrl":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png","width":100,"height":100,"caption":"ATON"},"image":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/1184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/comments?post=1184"}],"version-history":[{"count":36,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/1184\/revisions"}],"predecessor-version":[{"id":1433,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/1184\/revisions\/1433"}],"up":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/71"}],"wp:attachment":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/media?parent=1184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}