<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beiträge von Jakob Laschober - Mobile USTP MKL</title>
	<atom:link href="https://mobile.fhstp.ac.at/author/it251508/feed/" rel="self" type="application/rss+xml" />
	<link>https://mobile.fhstp.ac.at/author/it251508/</link>
	<description>Die &#34;Mobile Forschungsgruppe&#34; der USTP, sie  sammelt hier alles zu den Themen Design, UX und Entwicklung mobiler Applikationen</description>
	<lastBuildDate>Thu, 17 Sep 2026 07:02:11 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://mobile.fhstp.ac.at/wp-content/uploads/2025/03/icon-120x120.webp</url>
	<title>Beiträge von Jakob Laschober - Mobile USTP MKL</title>
	<link>https://mobile.fhstp.ac.at/author/it251508/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Creating your own custom Agent Harness like Claude Code and why it matters</title>
		<link>https://mobile.fhstp.ac.at/development/ai-agent-harness-claude-code/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Thu, 17 Sep 2026 06:50:00 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Agent Harness]]></category>
		<category><![CDATA[AI Agents]]></category>
		<category><![CDATA[AI Automation]]></category>
		<category><![CDATA[AI Development]]></category>
		<category><![CDATA[AI Memory Management]]></category>
		<category><![CDATA[Anthropic]]></category>
		<category><![CDATA[Claude Code]]></category>
		<category><![CDATA[Generative AI]]></category>
		<category><![CDATA[Large Language Models]]></category>
		<category><![CDATA[LLM Architecture]]></category>
		<category><![CDATA[Model Context Protocol]]></category>
		<category><![CDATA[Open Source AI]]></category>
		<category><![CDATA[Software Engineering]]></category>
		<category><![CDATA[Softwareentwicklung]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15914</guid>

					<description><![CDATA[<p>Have you ever typed something into Claude Code and wondered how it actually works? It’s not too hard to find out, after all, Anthropic accidentally released the Claude Code codebase back in March (The Verge). But what exactly is going on under the hood? How does the architecture function? And how can you build your <a class="read-more" href="https://mobile.fhstp.ac.at/development/ai-agent-harness-claude-code/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/ai-agent-harness-claude-code/">Creating your own custom Agent Harness like Claude Code and why it matters</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Have you ever typed something into Claude Code and wondered how it actually works? It’s not too hard to find out, after all, Anthropic accidentally released the Claude Code codebase back in March (<a href="https://www.theverge.com/ai-artificial-intelligence/904776/anthropic-claude-source-code-leak">The Verge</a>). But what exactly is going on under the hood? How does the architecture function? And how can you build your own bespoke version of such a system? And do you even want to?</p>



<h2 class="wp-block-heading">What Is an Agent Harness?</h2>



<p class="wp-block-paragraph">Finding a clear-cut definition of an &#8220;agent harness&#8221; isn&#8217;t easy. This is largely because many AI companies are reluctant to give away the exact approach of how their agents work, often disguising the technical definition in marketing jargon that sounds cool or magical (definitions e.g.: <a href="https://cloud.google.com/discover/what-are-ai-agents">Google</a>, <a href="https://developers.openai.com/api/docs/guides/agents/define-agents">OpenAi</a>, <a href="https://www.anthropic.com/engineering/building-effective-agents">Anthropic</a>).</p>



<p class="wp-block-paragraph">The best difinition I could find was one I stumbled over reading a Github repo about &#8220;<a href="https://github.com/RyanAlberts/best-of-Agent-Harnesses">Best of Agent Harnesses and Harness Techniques</a>&#8221; which quoted a Blog entry from <a href="https://simonwillison.net/2025/Sep/18/agents/">Simon Willison’s Weblog</a>: &#8220;An LLM agent runs tools in a loop to achieve a goal.&#8221; (6)</p>



<p class="wp-block-paragraph">Technically speaking, an agent harness is the infrastructure and control layer built around a Large Language Model (LLM). A base model (like Claude 3.7 or GPT-4o) cannot natively search your local files, execute terminal commands, or iteratively fix code—it only generates text. The harness is what grants the LLM autonomy. It provides the model with tools, enforces permissions, manages state, and orchestrates the overarching loop of an agentic session. (1)</p>



<h2 class="wp-block-heading">Inside Claude Code: Architecture Overview</h2>



<p class="wp-block-paragraph">When we examine the architecture of a sophisticated harness like Claude Code, it reveals a highly structured system that goes far beyond a simple chat interface.</p>



<p class="wp-block-paragraph">At its core, the architecture relies on a continuous evaluation loop. The model isn&#8217;t just generating an answer; it&#8217;s navigating a Gather-Act-Verify cycle. (2)</p>



<pre class="wp-block-code"><code>graph TD
    A&#91;User Input / Prompt] --> B(Agent Harness Control Loop)
    B --> C{LLM Decision Engine}
    
    C -- Needs Context --> D&#91;Gather]
    D --> D1(Search Files, Read Memory)
    D1 --> B
    
    C -- Ready to Execute --> E&#91;Act]
    E --> E1(Write Code, Run Terminal)
    E1 --> B
    
    C -- Needs Validation --> F&#91;Verify]
    F --> F1(Run Tests, Check Linting)
    F1 -- Error Found --> B
    F1 -- Success --> G&#91;Final Response to User]</code></pre>



<p class="wp-block-paragraph">Another crucial component of this architecture is Memory Management. Developer Simon Willison highlighted a fascinating architectural detail in a recent blog post comparing the memory implementations of Claude and ChatGPT. (2)<br><br>Claude’s harness philosophy prioritizes extreme transparency. Unlike OpenAI, which often injects user profiles or past context into the background automatically, Claude Code starts every conversation as a blank slate. Memory is implemented as explicit tools (specifically conversation_search and recent_chats).</p>



<pre class="wp-block-code"><code>sequenceDiagram
    participant User
    participant Harness
    participant LLM
    participant MemoryDB
    
    User->>Harness: "Continue where we left off yesterday"
    Harness->>LLM: Pass user prompt
    LLM->>Harness: Tool Call: conversation_search()
    Harness->>MemoryDB: Query past logs
    MemoryDB-->>Harness: Return relevant context
    Harness-->>LLM: Inject context into prompt
    LLM->>User: "Ah yes, we were fixing the routing bug..."</code></pre>



<p class="wp-block-paragraph">Because the model decides when to pull from memory via a visible tool call, you avoid the issue of old &#8220;bug loops&#8221; silently poisoning a fresh workspace.</p>



<h2 class="wp-block-heading">Building Your Own Agent Harness and the benefits</h2>



<p class="wp-block-paragraph">But why should you build your own agent harness when they already exist and work fine? I think its just the same reason why open source software exists. Closed-source systems like Claude Code are incredibly powerful, but they are highly opinionated and tailored to specific workflows (like general software development). By building your own, you gain maximum flexibility.</p>



<p class="wp-block-paragraph">You can customize the exact tools the agent has access to, perhaps integrating it directly with your company&#8217;s proprietary databases, Jira ticketing systems, or internal APIs. Or you can just adjust it for your needs for software developement or general purpose use. Fortunately, you don&#8217;t have to start from scratch. An excellent starting point is the GitHub repository <code>RyanAlberts/best-of-Agent-Harnesses</code>. (4) This curated, weekly-updated list ranks over 100 open-source agent harnesses. Notably, it even includes an MCP (Model Context Protocol) server, <code>llms.txt</code>, and JSON data, allowing agents themselves to read the repository and recommend the best harness framework for your specific needs.</p>



<h2 class="wp-block-heading">For what would i use a &#8220;Harness&#8221; for?</h2>



<p class="wp-block-paragraph">To understand the practical value, let’s look at a real-world project I am doing at work: a system designed to fully automate the production of AI-generated videos.<br>To be honest, the architecture diagram below represents a highly structured pipeline rather than a full-blown autonomous harness, because I have to make it highly predictable. However, it perfectly illustrates the foundational steps. By giving the central &#8220;Orchestrator&#8221; more flexibility and decision-making power, this pipeline could easily evolve into a true agentic harness.</p>



<figure class="wp-block-image size-full is-resized"><img fetchpriority="high" decoding="async" width="6194" height="5176" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Diagram-1.png" alt="" class="wp-image-15943" style="aspect-ratio:1.1966900063653725;width:487px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Diagram-1.png 6194w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Diagram-1-1536x1284.png 1536w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Diagram-1-2048x1711.png 2048w" sizes="(max-width: 6194px) 100vw, 6194px" /></figure>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph">How would this be agentic then if we give it more freedom to be &#8220;creative&#8221;. If we apply the <strong>Gather-Act-Verify</strong> principles discussed earlier to this exact diagram, the system becomes truly autonomous:</p>



<ul class="wp-block-list">
<li><strong>Gather (Data &amp; Script Prep):</strong> Instead of just following a static script, the agent uses tools to autonomously query the <em>AWS Database</em> for the latest product stats and fetches the correct <em>Presentation Assets</em> (potentially using the Model Context Protocol, MCP, to search through company directories).</li>



<li><strong>Verify (Validation &amp; Creation):</strong> This is where a harness shines. In a rigid pipeline, if the <em>Small compliance/Legal check</em> fails, the system just throws an error and stops. In an agent harness, the LLM catches this error, analyzes <em>why</em> the script failed compliance, and autonomously rewrites it until it passes the check.</li>



<li><strong>Act (Audio, Sync &amp; Rendering):</strong> Once the agent verifies the script is perfect, it triggers the text-to-speech tools, gathers the exact audio timestamps, and hands everything over to the rendering engine before finally publishing it.</li>
</ul>



<h2 class="wp-block-heading">Challenges and Best Practices</h2>



<p class="wp-block-paragraph">If you decide to build a custom harness, keep these best practices in mind:</p>



<ol start="1" class="wp-block-list">
<li><strong>Cost and Latency Control:</strong> Because the agent runs in continuous loops (sending accumulating context back to the model), API costs can skyrocket. Implementing effective <strong>Prompt Caching</strong> is mandatory. (5)</li>



<li><strong>Robust Error Handling:</strong> If a tool (e.g., a terminal command) fails, the harness must not crash. It needs to gracefully catch the error (like a stack trace) and feed it back to the LLM during the <em>Verify</em> phase so the agent can self-correct. (5)</li>



<li><strong>Transparency:</strong> Follow Claude’s example. Don&#8217;t hide memory injections in the system prompt. Implement memory and context retrieval as visible tool calls so users can audit what the agent is doing. (6)</li>



<li><strong>Sandboxing:</strong> Because the <em>Act</em> phase allows the execution of commands, your harness must enforce strict security boundaries (e.g., running actions inside Docker containers) to prevent an autonomous agent from accidentally deleting critical system files. (5)</li>
</ol>



<h2 class="wp-block-heading">Conclusion</h2>



<p class="wp-block-paragraph">An agent harness is much more than an API wrapper, it is the vital infrastructure that gives a language model the tools it needs. While leaks and teardowns of commercial tools like Claude Code give us a glimpse into high-end, proprietary architectures, the vast open-source community proves that custom, bespoke solutions are more accessible than ever. By mastering the <em>Gather-Act-Verify</em> loop and maintaining clean, transparent tool management, you can transform a simple text generator into an autonomous, specialized digital colleague. </p>



<p class="wp-block-paragraph">Btw: There is also a very good video if you want to know more about harnesses from Langchain: <a href="https://www.youtube.com/watch?v=HI2q3ci3Iuc&amp;t=409s">https://www.youtube.com/watch?v=HI2q3ci3Iuc&amp;t=409s</a></p>



<h3 class="wp-block-heading">Sources</h3>



<ol class="wp-block-list">
<li><a href="https://vrungta.substack.com/p/claude-code-architecture-reverse">https://vrungta.substack.com/p/claude-code-architecture-reverse</a></li>



<li><a href="https://michaellivs.com/blog/architecture-behind-claude-code">https://michaellivs.com/blog/architecture-behind-claude-code</a></li>



<li><a href="https://www.mindstudio.ai/blog/claude-code-source-leak-memory-architecture">https://www.mindstudio.ai/blog/claude-code-source-leak-memory-architecture</a></li>



<li><a href="https://github.com/RyanAlberts/best-of-Agent-Harnesses">https://github.com/RyanAlberts/best-of-Agent-Harnesses</a></li>



<li><a href="https://resources.anthropic.com/building-effective-ai-agents">https://resources.anthropic.com/building-effective-ai-agents</a></li>



<li><a href="https://simonwillison.net/2025/Sep/18/agents/">https://simonwillison.net/2025/Sep/18/agents/</a></li>
</ol>
<p>The post <a href="https://mobile.fhstp.ac.at/development/ai-agent-harness-claude-code/">Creating your own custom Agent Harness like Claude Code and why it matters</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Gymetrics: A Self-Hostable Fitness App with Kotlin Multiplatform, NestJS, and Dockerization</title>
		<link>https://mobile.fhstp.ac.at/allgemein/gymetrics-a-self-hostable-fitness-app/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Thu, 17 Sep 2026 06:49:00 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Native Development]]></category>
		<category><![CDATA[AI Coding Agents]]></category>
		<category><![CDATA[Claude Code]]></category>
		<category><![CDATA[Compose Multiplatform]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Fitness App]]></category>
		<category><![CDATA[KMP]]></category>
		<category><![CDATA[Koin Dependency Injection]]></category>
		<category><![CDATA[Kotlin Multiplatform]]></category>
		<category><![CDATA[MCP Server]]></category>
		<category><![CDATA[Mobile Architecture]]></category>
		<category><![CDATA[Model Context Protocol]]></category>
		<category><![CDATA[NestJs]]></category>
		<category><![CDATA[offline-first]]></category>
		<category><![CDATA[Self-Hosted App]]></category>
		<category><![CDATA[Software Engineering]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15928</guid>

					<description><![CDATA[<p>I set out to build this app in my first semester as a simple replacement for the Excel spreadsheet I used for workout tracking. But in the process of making it, it became so much more. And if you want to check it out you can on gymetrics.at (yeah I&#8217;ve already bought a Domain &#8230;). <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/gymetrics-a-self-hostable-fitness-app/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/gymetrics-a-self-hostable-fitness-app/">Gymetrics: A Self-Hostable Fitness App with Kotlin Multiplatform, NestJS, and Dockerization</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">I set out to build this app in my first semester as a simple replacement for the Excel spreadsheet I used for workout tracking. But in the process of making it, it became so much more. And if you want to check it out you can on <a href="https://gymetrics.at/">gymetrics.at</a> (yeah I&#8217;ve already bought a Domain &#8230;).</p>



<p class="wp-block-paragraph">When I started out, I decided to make an application that was really worth trying. I designed a database structure and a system architecture that I meant to be perfect. But for my first frontend (tbh not only the frontend), I was struggling. I am no designer myself and couldn&#8217;t really create a smooth user flow, so I used AI to help me with that. After I was done, I wasn&#8217;t very happy with either the scalability or the look and feel. I had used Ionic, a web framework that ran in a WebView on the device. The touch inputs didn&#8217;t feel instant or responsive enough, and for what was basically a simple CRUD app, it felt a little bit sluggish (or maybe that’s just me).</p>



<p class="wp-block-paragraph">So, in my second semester, I focused on refining that whole experience and making it better in every way.</p>



<h3 class="wp-block-heading">The Rewrite: Embracing Kotlin Multiplatform</h3>



<p class="wp-block-paragraph">I decided on a new frontend framework: Kotlin Multiplatform (KMP), which allows you to build apps for nearly any platform using a shared codebase. I also added new features, like self-hosted AI solutions to generate content and a posibility to choose your  current Gym.</p>



<p class="wp-block-paragraph">Implementing my app with Kotlin was challenging because it was a completely new programming language to me. After learning the fundamentals and coding on my own for the first week, I brought in some AI coding agents to help speed up the process. At first, I used a local model called <code>qwen3-coder:30b</code>, which I quantized to run on constrained hardware. My setup was a Mac Book Air M1 from the USTP rental service running <a href="https://omlx.ai/" data-type="link" data-id="https://omlx.ai/">OMLX</a> (which was especially built for Macs to take advantage of their unified memory). Running in my IDE was the open-source AI code agent <a href="https://marketplace.visualstudio.com/items?itemName=Continue.continue">Continue</a>, which allowed me to implement MCP servers and feed code context from my project to the model. Later I learned that this extention or IDE whatever you wanna call it, is no longer being developed and was acquired by Cursor.</p>



<p class="wp-block-paragraph">After I sadly had to return the rental Mac (originally i wanted to use it for building the App for IOS as well but just failed to finish the App in time <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f641.png" alt="🙁" class="wp-smiley" style="height: 1em; max-height: 1em;" /> ) , I switched to Claude Code. For me, it was essential to double-check Claude’s work and architectural decisions. Honestly, I was a little bit shocked by some of the choices it made, like trying to store API keys or passwords in plain text just somewhere in the Code! To be fair, I wasn&#8217;t using their frontier model to avoid spending too many tokens (as I argued a lot with it during the development process), but still. However, it was particularly handy for creating the frontend layer with Jetpack Compose, thanks to the vast documentation available for Android&#8217;s UI framework.</p>



<p class="wp-block-paragraph">To avoid hallucinations and provide the model with up-to-date documentation, I added an MCP Server called <a href="https://context7.com/">Context7</a>. It allowed me to filter exactly what documentation the model received and what it had access to &#8230; a really handy tool.</p>



<figure class="wp-block-image size-full is-resized"><img decoding="async" width="960" height="2142" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Screenshot_20260916-220509.png" alt="" class="wp-image-16013" style="aspect-ratio:0.4481865284974093;width:289px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Screenshot_20260916-220509.png 960w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Screenshot_20260916-220509-688x1536.png 688w, https://mobile.fhstp.ac.at/wp-content/uploads/2026/09/Screenshot_20260916-220509-918x2048.png 918w" sizes="(max-width: 960px) 100vw, 960px" /></figure>



<h3 class="wp-block-heading">Frontend Challenges: Caching, Offline Sync, and Navigation</h3>



<p class="wp-block-paragraph"><br>The hardest part of my frontend implementation was the caching logic. I wanted the app to always instantly display the relevant information you need in the moment. To achieve this, I decided to cache the first 10 items of every category (e.g., Templates, Trainings, UserData).</p>



<p class="wp-block-paragraph">All of this is stored in a Key-Value database called <a href="https://github.com/xxfast/KStore">KStore</a>, a small library that works great for simple data storage on Android and iOS devices. The absolute hardest part was defining the behavior for when I saved something offline, ensuring that the moment I got back online, it would post to the backend so the two storages would &#8220;sync&#8221; up again. We now have a (mostly) robust network-first cache strategy with offline fallbacks.</p>



<p class="wp-block-paragraph">I also completely revamped the app&#8217;s navigation and UI architecture using Compose Multiplatform: </p>



<ul class="wp-block-list">
<li><strong>Two-Level Navigation:</strong> We have an outer navigation graph for the Auth-Flow (Login/Register) and an inner graph wrapped in a <code>Scaffold</code> for the main tabs. This allows for a persistent BottomBar that stays visible while you switch tabs.</li>
</ul>



<ul class="wp-block-list">
<li><strong>Profile Dialog:</strong> Instead of routing to a new screen, the user profile opens as a clean Dialog Card over the current screen, making it feel much faster.</li>
</ul>



<ul class="wp-block-list">
<li><strong>Security:</strong> Tokens are stored securely using <code>KVault</code> (Keychain for iOS, EncryptedSharedPreferences for Android).</li>
</ul>



<ul class="wp-block-list">
<li><strong>Dependency Injection:</strong> I used Koin to keep the architecture clean (MVVM), allowing the UI to remain logic-free.</li>
</ul>



<h3 class="wp-block-heading">The Backend: Keeping it Clean &amp; Adding a Scraping Service</h3>



<p class="wp-block-paragraph">For my backend (a self-hosted NestJS API), I tried to make major improvements to security and code cleanliness. Most of my backend wasn&#8217;t even touched by AI &#8230; I mean aside from a few MongoDB queries &#8230; they&#8217;re just really weird to write ok? &#8230; so I could assure everything was up to my expectations.</p>



<p class="wp-block-paragraph">For extended features, I added a custom scraping service using a separate Python server. It scrapes all the fitness studios listed on my gym&#8217;s website and writes everything about their equipment directly into my database. It&#8217;s scheduled to run on startup and then one time per Month (don&#8217;t want to get accused of creating to much net traffic for them). I deployed this service in a separate Docker container within the same Docker network to ensure minimal downtime in case the scraper ever crashes.</p>



<h3 class="wp-block-heading">Building a Local AI Agent for Training Templates</h3>



<p class="wp-block-paragraph">Having the exact context of my gym&#8217;s equipment in the database was especially helpful for my next big feature: Local AI Training Template generation.</p>



<p class="wp-block-paragraph">To be honest, I initially wanted to use the MCP server I had programmed earlier for this task. But by the time I got to implementing the AI feature, I realized that Ollama doesn&#8217;t actually support MCP natively because it lacks an MCP client.</p>



<p class="wp-block-paragraph">So, I built an Agentic loop directly in my NestJS backend to act as a middleman between Ollama and my server. I <em>could</em> have gone the route of calling my MCP server through my backend and called it a day. But after a short &#8220;question battle&#8221; with Claude Code, I decided that wasn&#8217;t feasible due to the unnecessary network requests I could save by just implementing the agent loop directly in the backend.</p>



<p class="wp-block-paragraph">My custom MCP Server now exists on its own and isn&#8217;t connected to anything just yet. But building it was a fantastic learning experience regarding how these systems work. It lays the groundwork for future implementations, as I eventually plan to integrate external MCP-capable AI tools like Claude or ChatGPT.</p>



<h3 class="wp-block-heading">Technical Deep Dive: Gymetrics Feature List</h3>



<p class="wp-block-paragraph">For those interested in the exact tech stack and architectural decisions, here is a breakdown of what’s running under the hood:</p>



<p class="wp-block-paragraph"><strong>The Stack</strong></p>



<ul class="wp-block-list">
<li><strong>Frontend:</strong> Kotlin Multiplatform, Compose Multiplatform (Shared UI), targeting Android (first priority) and iOS.</li>



<li><strong>Backend:</strong> Self-hosted NestJS API with Dockerized microservices.</li>



<li><strong>Auth:</strong> Short-lived Bearer tokens + Refresh tokens.</li>
</ul>



<p class="wp-block-paragraph"><strong>Core Implementations</strong></p>



<ul class="wp-block-list">
<li><strong>Ktor Client &amp; Auto-Refresh:</strong> Centralized HTTP client handling JSON serialization, timeouts, and dynamic base URLs. Used the Ktor <code>Auth</code> plugin to automatically attach tokens and trigger a silent refresh route (<code>POST /auth/refresh</code>) on 401 errors.</li>



<li><strong>Offline-First Capabilities:</strong> Built a custom <code>ConnectivityObserver</code> that tracks network state app-wide. The app displays an offline badge in the TopBar and handles offline Auth checks by optimistically trusting the securely stored token.</li>



<li><strong>App-Wide Theming:</strong> Implemented a custom <code>GymetricsTheme</code> wrapper around MaterialTheme, featuring a sleek, app-wide dark mode and adaptive Android icons.</li>



<li><strong>State Management &amp; DI:</strong> Strict MVVM architecture. State is handled via <code>sealed interfaces</code> and exhaustive <code>when</code> statements (Idle/Loading/Success/Error). Dependency Injection is handled entirely by <strong>Koin</strong> (using <code>appModule</code>, <code>single</code>, and <code>viewModelOf</code>).</li>
</ul>



<p class="wp-block-paragraph">It’s been a massive journey from a simple Ionic prototype to a fully-fledged, offline-capable KMP application with agentic AI workflows. It started as a way to replace a spreadsheet, but it taught me modern mobile architecture, backend, and how to effectively wrangle AI coding assistants.</p>



<p class="wp-block-paragraph"></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/gymetrics-a-self-hostable-fitness-app/">Gymetrics: A Self-Hostable Fitness App with Kotlin Multiplatform, NestJS, and Dockerization</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Technical Revolution &#8211; On-Device AI</title>
		<link>https://mobile.fhstp.ac.at/allgemein/technical-revolution-on-device-ai-mobile-llms/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Wed, 21 Jan 2026 22:09:42 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15347</guid>

					<description><![CDATA[<p>Introduction On-device artificial intelligence (AI) is a system that works on mobile devices, such as smartphones and laptops, as well as other wearables. It is more independent because it can be used on the go without an internet connection. This is just one of the advantages of these systems. Another is the privacy benefits of <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/technical-revolution-on-device-ai-mobile-llms/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/technical-revolution-on-device-ai-mobile-llms/">Technical Revolution &#8211; On-Device AI</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-large-font-size wp-block-paragraph"><strong>Introduction</strong></p>



<p class="wp-block-paragraph">On-device artificial intelligence (AI) is a system that works on mobile devices, such as smartphones and laptops, as well as other wearables. It is more independent because it can be used on the go without an internet connection. This is just one of the advantages of these systems. Another is the privacy benefits of local processing, as there is no outgoing data traffic or need to store user or sensitive data on remote servers. Local AI also has the advantage of lower latency compared to cloud models. Due to its built-in nature, it can be very fast (of course, depending on the device), and eliminates the additional costs that a cloud model would inevitably incur. </p>



<p class="wp-block-paragraph">Another use case for local models would be assistance through &#8220;ambient computing&#8221;, where the device anticipates user needs based on on-screen context.An example is Magic Cue on Android 16, which runs locally to offer relevant actions based on the user&#8217;s current activity.</p>



<p class="has-large-font-size wp-block-paragraph"><strong>Technical Background:</strong></p>



<p class="wp-block-paragraph">Deploying Large Language Models (LLMs) locally requires overcoming significant hardware constraints, specifically limited memory or RAM, battery life, and thermal limits. To run models larger than the device&#8217;s physical RAM, frameworks use flash storage to store the needed data, dynamically loading only the &#8220;active&#8221; weights needed for the current token generation into RAM. This allows devices with limited RAM (e.g., 8GB) to run larger models. Also specific cpus with dedicated Neural Processing Units (NPUs) like the Snapdragon 8 Gen 3 utilizing these to squeeze out a little bit more performance to run even bigger complexer models. They are also faster in delivering higher token-per-second rates. Google famously focused their chips called Tensor to have Tensor Processing Units which results in even better performance and efficiency for their models across the board. </p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Quantization</strong></p>



<p class="wp-block-paragraph">But how can you fit large models onto such a tiny device while taking hardware concerns into account? It works with quantisation. This technique compresses a model to a much smaller size. It&#8217;s much like compressing a folder or file into a zip file on your PC. AI models are normally trained using a format called FP32. If you have a &#8216;7 billion parameter&#8217; model (such as Llama 3 or Qwen), each parameter requires 4 bytes. However, when you do the maths with such a model: 7 billion x 4 bytes = 28 GB of RAM. However, most smartphones only have 8 or 12 GB of RAM in total, and even if they share some of the normal SSD memory, the model simply will not fit. Quantisation is the process of converting these large models from FP32 to INT8 or INT4. Going from 32-bit to 4-bit usually results in very little loss of intelligence, often less than a 1% drop in accuracy. Alternatively, you can think of the process as compressing an image. Most of the detail remains; only the extreme details are lost in the process.</p>



<p class="has-large-font-size wp-block-paragraph"><strong>Software and Ecosystem:</strong></p>



<p class="wp-block-paragraph" style="font-size:18px">Local AI is supported by a software stack designed to abstract hardware complexities.<br>Google&#8217;s Gemini Nano is a prime example of a multimodal model developed specifically for on-device efficiency. It comes in different sizes to accommodate different devices and their performance capabilities. Frameworks such as LiteRT-LM enable developers to create custom LLM pipelines that can be used on Android, iOS and web platforms. LiteRT-LM is a relatively low-level tool that is not commonly used by developers. The ML Kit GenAI API is a more commonly used tool for this purpose, leveraging local models. It offers native APIs for Kotlin/Java, Swift and JavaScript, enabling deployment of the same model across different platforms. However, there are also different options available for each ecosystem.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Android</strong></p>



<p class="wp-block-paragraph" style="font-size:18px">ML Kit GenAI API is probably the most straightforward and user-friendly toolset to implement for Android developers in particular. It completely abstracts away model management by interfacing with Android AICore. As it uses the built-in Gemini Nano model, there is no need to bundle a large model with your app. It offers pre-built APIs for common tasks, so there is no need to design prompts. These include summarising text passages, proofreading, rewriting, and providing smart replies. If you require greater flexibility than that offered by the above-mentioned specific tasks, the GenAI Prompt API enables you to send natural language requests directly to Gemini Nano.</p>



<p class="wp-block-paragraph" style="font-size:18px"><strong>Web<br></strong>For web applications, Google is integrating high-level AI capabilities directly into the Chrome browser. Similar to the Android approach, this allows web developers to access on-device Gemini Nano models through JavaScript APIs without requiring the user to download heavy libraries or models for each site.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>iOS</strong></p>



<p class="wp-block-paragraph" style="font-size:18px">For iOS 18+, developers can use system-level APIs to access Apple&#8217;s on-device foundation models for text generation and embeddings, removing the need for third-party libraries</p>



<p class="wp-block-paragraph">While Google promotes the ML Kit GenAI API for Gemini, the API explicitly supports &#8220;other open models&#8221; and &#8220;open-weight models&#8221; like mistral, llama or gemma. It  just abstracts the complexity of the low-level LiteRT-LM engine to be accessible to more developers.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Conclusion:</strong></p>



<p class="wp-block-paragraph">On-device AI represents a critical step forward for user sovereignty. By processing data locally on dedicated NPUs, we eliminate the need to send sensitive information to remote servers, solving the twin challenges of latency and privacy in one go. While tasks requiring immense computational power will remain in the cloud, the &#8220;thinking&#8221; that happens on our smartphones is getting smarter, faster, and more personal. For the end user, this means a device that is not just a portal to the internet, but a truly intelligent assistant that works anywhere, anytime.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>References:</strong></p>



<ul class="wp-block-list">
<li><a href="https://www.applivery.com/blog/news/google-pixel-10/">https://www.applivery.com/blog/news/google-pixel-10/</a></li>



<li><a href="https://www.researchgate.net/profile/Dwith-Chenna/publication/373329073_EDGE_AI_QUANTIZATION_AS_THE_KEY_TO_ON-DEVICE_SMARTNESS/links/64e627b60453074fbda950d6/EDGE-AI-QUANTIZATION-AS-THE-KEY-TO-ON-DEVICE-SMARTNESS.pdf">https://www.researchgate.net/profile/Dwith-Chenna/publication/373329073_EDGE_AI_QUANTIZATION_AS_THE_KEY_TO_ON-DEVICE_SMARTNESS/links/64e627b60453074fbda950d6/EDGE-AI-QUANTIZATION-AS-THE-KEY-TO-ON-DEVICE-SMARTNESS.pdf</a></li>



<li><a href="https://arxiv.org/html/2512.06490v1">https://arxiv.org/html/2512.06490v1</a></li>



<li><a href="https://developers.googleblog.com/on-device-genai-in-chrome-chromebook-plus-and-pixel-watch-with-litert-lm/">https://developers.googleblog.com/on-device-genai-in-chrome-chromebook-plus-and-pixel-watch-with-litert-lm/</a></li>



<li><a href="https://nearform.com/digital-community/ai-beyond-the-cloud-the-current-and-future-state-of-on-device-generative-ai/">https://nearform.com/digital-community/ai-beyond-the-cloud-the-current-and-future-state-of-on-device-generative-ai/</a></li>
</ul>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/technical-revolution-on-device-ai-mobile-llms/">Technical Revolution &#8211; On-Device AI</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Gymetrics &#124; self-hostable fitness tracker: semester one progress</title>
		<link>https://mobile.fhstp.ac.at/allgemein/gymetrics-self-hostable-fitness-tracker-semester-one-progress/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Wed, 21 Jan 2026 18:16:09 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15307</guid>

					<description><![CDATA[<p>Here, I would like to present the progress I have made over the past semester. My objective was a rather simple idea: to build a simple application that could be used to track performance and progress at the gym. The challenge was that the application had to be deployable by anyone on a server via <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/gymetrics-self-hostable-fitness-tracker-semester-one-progress/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/gymetrics-self-hostable-fitness-tracker-semester-one-progress/">Gymetrics | self-hostable fitness tracker: semester one progress</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Here, I would like to present the progress I have made over the past semester. My objective was a rather simple idea: to build a simple application that could be used to track performance and progress at the gym. The challenge was that the application had to be deployable by anyone on a server via Docker. The container should contain the database and the entire backend of the application, making it easy to set up and use.<br></p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Goals</strong></p>



<p class="wp-block-paragraph">As the Key Goals I identified some Basic Functionality I wanted to have completed at the end of the Semester:</p>



<ul class="wp-block-list">
<li>Help people to store their own data on their own systems</li>



<li>Develop a functional App with Ionic and Angular</li>



<li>Build a good foundation that could be expanded with other features later</li>
</ul>



<p class="has-medium-font-size wp-block-paragraph"><strong>Progress</strong></p>



<p class="wp-block-paragraph">During development, I encountered some setbacks which slowed down the process slightly. However, I fundamentally achieved everything I set out to do. I developed and implemented a really good RESTful backend foundation that can be used to build future features on top of, and it was designed with expansion in mind. Furthermore, I developed a coherent design language for my Ionic frontend application.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Features</strong></p>



<p class="wp-block-paragraph">The fundamental concept of my app is creating and tracking workouts. This is achieved as follows:</p>



<p class="wp-block-paragraph">First, you can create a template in the Workout section. Then you can assign a title and description with a specific character limit. Then you can plan different exercises, each with a distinct weight and number of repetitions. In future, I also want to include options for choosing the length or time of a single exercise instead of the weight or reps. Once you have created the template, you can save or discard it, or delete it completely.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img decoding="async" width="510" height="1140" data-id="15323" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-175450_hyprshot-4.png" alt="" class="wp-image-15323"/></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="515" height="1143" data-id="15324" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-175634_hyprshot-2.png" alt="" class="wp-image-15324"/></figure>
</figure>



<p class="wp-block-paragraph"></p>



<p class="wp-block-paragraph">Once you have created the different templates, you can assign them to different dates in the Calendar tab. This tab is currently under construction and will be improved for better readability in the future, but it is like this for reasons of time constraints. Here, you can select a template and a workout, which will then be added to the calendar on this date.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="515" height="1141" data-id="15328" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-183908_hyprshot.png" alt="" class="wp-image-15328"/></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="512" height="1135" data-id="15327" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-183740_hyprshot.png" alt="" class="wp-image-15327"/></figure>
</figure>



<p class="wp-block-paragraph">Once you have created the training, you can go to the &#8216;Home&#8217; page to see when your next training session is scheduled and to start it. While started you can edit the done weight and reps and save it after you are done with the exercise:</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="511" height="1143" data-id="15330" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-175427_hyprshot.png" alt="" class="wp-image-15330"/></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="511" height="1143" data-id="15334" src="https://mobile.fhstp.ac.at/wp-content/uploads/2026/01/2026-01-21-184345_hyprshot.png" alt="" class="wp-image-15334"/></figure>
</figure>



<p class="has-medium-font-size wp-block-paragraph"><strong>Conclusion:</strong></p>



<p class="wp-block-paragraph">I was surprised by how much effort it took to get to this point. Building something from the ground up with many future features in mind broadened the scope of the initial project setup, and this wasn&#8217;t easy for me. The backend in particular took some time because I wasn&#8217;t very familiar with the framework and the concept as a whole. Setting up everything in Docker containers and making them communicate with each other also took some time, but it wasn&#8217;t as challenging as the other parts because I have some experience with this technology already. So what have I completed from my inital Goals and what have i learned? In my project description, I stated that my app should contain account creation, repetition scheduling for training sessions, and a customisable point system.</p>



<ul class="wp-block-list">
<li>Creating an account was not really a problem. I also enhanced the security of the application by implementing authentication via a short-lived JWT (JSON Web Token) and a refresh token that could be used to refresh the JWT and extend the active session, thereby preventing the user from having to log in constantly.</li>



<li>During the development process, I questioned the point of having recurring training sessions, as I prefer to plan my training in advance, but my schedule changes every week. I would also like to be able to adapt the template or adjust the weights or repetitions according to my performance in the previous session. As this feature didn&#8217;t make much sense, I changed it so that I can create training sessions by clicking on the calendar.</li>



<li>Sadly, the customisable point system fell a little short due to my limited time, but I still want to implement a good statistics system in the future. I&#8217;ve also prepared everything for the factor that I can apply to each exercise to alter the &#8216;score weight&#8217;.</li>
</ul>



<p class="wp-block-paragraph">But what have I learned?<br>I&#8217;ve learned the hard way that planning is absolutely everything, no matter how big your project is. The database structure and the architecture of an application are important things to consider when starting a new project, and will save so much time during development. I&#8217;ve also gained a good understanding of NestJS and its use with MongoDB, although there&#8217;s still a lot more to learn.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Outlook and future Features</strong></p>



<p class="wp-block-paragraph">Not only because i want to use this application for myself in the future but also because i really had fun programming it i have many Ideas for the next features.</p>



<ul class="wp-block-list">
<li>Firstly, I would like to create a better calendar page for creating new workouts and viewing a weekly overview of future training sessions.</li>



<li>Another important feature would be the ability to reset your own password and confirm your email address.</li>



<li>I want to implement scoring and analytics for my workouts to track</li>



<li>I also want to add a locally connected LLM through Ollama to recommend training, exercises or tips based on completed workouts and user profiles containing all the relevant health data.</li>



<li>Improve the security within the Docker Network and the instances itself</li>
</ul>



<p class="wp-block-paragraph"></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/gymetrics-self-hostable-fitness-tracker-semester-one-progress/">Gymetrics | self-hostable fitness tracker: semester one progress</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>SOTA &#124; Modern Web Accessibility</title>
		<link>https://mobile.fhstp.ac.at/allgemein/sota-modern-web-accessibility/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Wed, 21 Jan 2026 16:50:25 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=15304</guid>

					<description><![CDATA[<p>Abstract With the enforcement of the European Accessibility Act (EAA), digital accessibility has shifted for many companies from just a recommendation to a necessity. This article provides an overview of the current state of web accessibility grounded in Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2, the gold standard for the EAA. The article lists <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/sota-modern-web-accessibility/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/sota-modern-web-accessibility/">SOTA | Modern Web Accessibility</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph" style="font-size:29px"><strong>Abstract</strong></p>



<p class="wp-block-paragraph">With the enforcement of the European Accessibility Act (EAA), digital accessibility has shifted for many companies from just a recommendation to a necessity. This article provides an overview of the current state of web accessibility grounded in Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2, the gold standard for the EAA. The article lists the core principles and conformance levels, examines the limitations of current testing methodologies, and identifies weaknesses. Specifically, it addresses the reliance on human evaluation and the related expert problem due to automated tools’ inability to detect more than 20 to 50 percent of violations. The article also reviews modern implementation strategies, such as integrating testing engines like Axe-Core into CI/CD pipelines, and addresses the lack of inherent accessibility support in modern front-end frameworks. Finally, the paper offers an outlook on the evolving WCAG 3.0 standard and explores the transformative potential of AI and large language models (LLMs) in assisting developers and improving assistive technologies.</p>



<h2 class="wp-block-heading">1. Introduction</h2>



<p class="wp-block-paragraph">The topic of accessibility in modern web technologies is more relevant than ever. With the European Accessibility Act (EAA) already in effect, many companies must take action [4]. The goal is for every company with more than ten employees and a turnover of over two million euros to comply with these rules. This ensures that the web is accessible to everyone. However, there are many challenges to implementing web accessibility after a website or web app has been developed; it can be very costly and time-consuming to do so. To address these challenges, this article analyzes the current landscape of web accessibility under WCAG 2.2, specifically identifying weaknesses in testing methodologies and the reliance on human evaluation. Furthermore, it outlines future advancements by exploring the flexible WCAG 3.0 standard and the transformative potential of AI and Large Language Models in development.</p>



<h2 class="wp-block-heading">2. Web Accessibility Definition</h2>



<p class="wp-block-paragraph">As stated by Petrie, Savva, and Power (2015), accessibility on the web is a set of rules that, when followed, ensures that all people, particularly those with disabilities and the elderly, can use websites in a variety of contexts, including mainstream and assistive technologies [7].</p>



<h3 class="wp-block-heading">2.1 WCAG</h3>



<p class="wp-block-paragraph">A cornerstone in the realm of accessibility are the Web Content Accessibility Guidelines (WCAG). Developed by the World Wide Web Consortium (W3C), these guidelines provide a standardized procedure for creating accessible internet offerings.</p>



<p class="wp-block-paragraph">Over the years, the standards have been reworked several times. The current standard required by the EU in the EAA is WCAG 2.1 [8]. For uniformity purposes, this article focuses on the more current WCAG 2.2. This standard relies on four base principles that are summarized by the acronym &#8220;POUR&#8221; and contain the following points:</p>



<ul class="wp-block-list">
<li><strong>Perceivable:</strong> The information and user interface components must be presented to users in a way that they can perceive.</li>



<li><strong>Operable:</strong> The user must be able to handle the user interface components and the navigation.</li>



<li><strong>Understandable:</strong> The information and the handling of the user interface must be understandable.</li>



<li>Robust: The content must be robust enough that it can be reliably interpreted by a wide variety of user agents, including assistive technologies.[8]</li>
</ul>



<h3 class="wp-block-heading">2.2 The WCAG 2.2 Guidelines in Detail</h3>



<p class="wp-block-paragraph">To fully grasp the topic and its inherent challenges, it is essential to understand the core principles. To ensure a positive experience for every user, evaluations should use specific Success Criteria. This creates a repeatable test to verify that a product conforms to WCAG rules [13]. The key criteria for each principle are as follows:</p>



<h4 class="wp-block-heading">2.2.1 Perceivable</h4>



<ul class="wp-block-list">
<li><strong>Text Alternatives:</strong> Requires providing text alternatives for any non-text content (such as images, icons, or input elements) so that it can be transformed into other forms people need, such as large print, Braille, speech, or symbols.</li>



<li><strong>Time-based Media:</strong> Requires providing alternatives for time-based media. This includes providing captions, audio descriptions, and potentially sign language interpretation.</li>



<li><strong>Adaptable:</strong> Content must be created in a way that allows it to be presented in different formats without losing information or structure. This can be achieved with different layout options, for example. Ensuring that the information and structure can be programmatically determined by assistive technology is key.</li>



<li><strong>Distinguishable:</strong> This ensures that it is possible for every user to distinguish the different elements of a digital product from others. That could be achieved by a good contrast ratio, providing the controls attribute for audio elements, and enabling users to change the size of displayed text.</li>
</ul>



<h4 class="wp-block-heading">2.2.2 Operable</h4>



<ul class="wp-block-list">
<li><strong>Keyboard Accessible:</strong> All functionality must be available from a keyboard interface. Providing universal keyboard input is crucial because no other input form offers the same flexibility or is universally supported by people with different disabilities.</li>



<li><strong>Enough Time:</strong> Users must be provided enough time to read and use content, since many users with disabilities require more time to respond, read, or use assistive technology. This can be a problem with automatically disappearing popups or toast messages.</li>



<li><strong>Seizures and Physical Reactions:</strong> Content must be designed to avoid causing seizures or physical reactions, primarily by restricting flashing visual content.</li>



<li><strong>Navigable:</strong> Users must have ways to help them navigate, find content, and determine where they are. This includes ensuring logical focus order, clearly defined headings and labels, and the ability to bypass blocks of repeated content. A good test for this would be trying to navigate a webpage with just the tab key.</li>



<li><strong>Input Modalities:</strong> This requires making the functionality operable through various inputs beyond the keyboard, such as touch, a stylus, or a mouse pointer. This includes providing alternatives for complex pointer gestures, such as drag-and-drop, and ensuring that target sizes are large enough for touch input.</li>
</ul>



<h4 class="wp-block-heading">2.2.3 Understandable</h4>



<ul class="wp-block-list">
<li><strong>Readable:</strong> This aims to ensure that text can be read by screen readers and other assistive technologies.</li>



<li><strong>Predictable:</strong> This guideline focuses on achieving a consistent, repeatable way to interact with webpages.</li>



<li><strong>Input Assistance:</strong> Must help users avoid and correct mistakes. Since people with disabilities may have more difficulty creating or detecting input errors, this guideline requires effective error identification, providing instructions and labels, and error prevention features, particularly for legal or financial transactions. Logical error messages and suggestive labels are a good way to start.</li>
</ul>



<h4 class="wp-block-heading">2.2.4 Robust</h4>



<ul class="wp-block-list">
<li><strong>Compatible:</strong> Due to the rapid changes in modern technology, developers of assistive technologies are struggling to keep up. Thus, the primary focus of this guideline is maximizing compatibility with current and future user agents.</li>



<li>Technical Compliance: Robustness means ensuring content adheres to conventions so that assistive technologies can reliably recognize and interact with elements.[15]</li>
</ul>



<h2 class="wp-block-heading">3. Compliance via WCAG 2.2</h2>



<p class="wp-block-paragraph">Compliance via Web Content Accessibility Guidelines is determined by satisfying its success criteria, which were explained previously [12].</p>



<h3 class="wp-block-heading">3.1 Conformance Level</h3>



<p class="wp-block-paragraph">To achieve full compliance, the content must meet five conformance requirements. It is possible to conform at different levels and in different categories. However, to fulfill each level, all associated rules must be applied.</p>



<ul class="wp-block-list">
<li><strong>Level A:</strong> Contains, for example, all necessary labels and tags that can be associated with the HTML code. No conformance to WCAG is possible without at least satisfying all the Level A success criteria.</li>



<li><strong>Level AA:</strong> The content must satisfy all the Level A and Level AA success criteria. This is the industry standard and the minimum requirement for a WCAG-compliant webpage. It also meets the standards of the EAA because they are based on WCAG Level AA [4].</li>



<li><strong>Level AAA:</strong> All content must satisfy the Level A, Level AA, and Level AAA success criteria. One example of a required service is providing sign language interpretation for all videos and audio content.</li>
</ul>



<p class="wp-block-paragraph">For any of these levels, conformance can alternatively be achieved if a conforming alternate version is provided [12].</p>



<h3 class="wp-block-heading">3.2 Testing Procedures</h3>



<p class="wp-block-paragraph">While accessibility testing is frequently conducted manually through human inspection [1], standardized automated tools also play a valuable role. However, human evaluation remains the best practice, as automation alone is often insufficient. Although automated tests offer significant advantages regarding scalability and integration into the development lifecycle, they frequently fail to detect crucial compliance issues [14]. Consequently, directives such as the European Accessibility Act explicitly require human involvement for validation [3].</p>



<h2 class="wp-block-heading">4. Challenges in the Current Guidelines</h2>



<p class="wp-block-paragraph">The current Web Content Accessibility Guidelines pose several significant challenges related to their objective testability, consistent implementation, and overall scope.</p>



<p class="wp-block-paragraph">The fundamental issue with the reliability of the WCAG 2.0 guidelines is its review and testing process. Although the process is partially automated, it still relies heavily on human judgment [1].</p>



<p class="wp-block-paragraph">The current rules define reliable human testing as when 80 percent of evaluators agree on a website’s compliance. However, empirical studies have shown that approximately 50 percent of WCAG 2.0 success criteria fail to reach this threshold, even when evaluated by accessibility experts. Another issue is the high level of expertise needed to assess conformity [1].</p>



<p class="wp-block-paragraph">Another significant challenge in passing some tests is the binary approach of WCAG 2.0. Evaluators can only give a pass or fail for each level of conformance [10].</p>



<h2 class="wp-block-heading">5. The Future Standard: WCAG 3.0</h2>



<p class="wp-block-paragraph">To address these issues, the W3C began developing a new standard called WCAG 3.0. Although it has not yet been released, the first working draft was published in September 2025. The finished guidelines are expected to be released in a few years [5].</p>



<h3 class="wp-block-heading">5.1 Shift in Philosophy</h3>



<p class="wp-block-paragraph">The new standard aims to move away from rigid rule sets and the traditional &#8220;pass/fail&#8221; paradigm. Instead, it focuses on a user-centered approach that prioritizes core functionality and the specific needs of individuals using assistive technology. Additionally, the guidelines are intended to support a wider range of disabilities by providing more personalized and adaptable experiences. This flexibility helps it remain relevant as technology evolves over time [11].</p>



<p class="wp-block-paragraph">Moreover, the standard is designed to regulate not only web applications but also software in general, including smartphone apps and desktop programs. The guidelines cover accessibility across a variety of hardware, ranging from desktops, laptops, and tablets to wearables and Internet of Things (IoT) devices. They also apply to diverse content types, such as static, dynamic, interactive, and streaming media, as well as virtual and augmented reality [11].</p>



<p class="wp-block-paragraph">WCAG 3.0 intends to build on the current foundations and incorporate accessibility overlays. These overlays can make websites more accessible without redoing previous work, thereby simplifying implementation [10]. However, it is important to acknowledge that this technological approach under the current WCAG 2.2 faces significant criticism within the community. Many experts argue that it does not replace the necessity of intrinsic accessible design [6].</p>



<h3 class="wp-block-heading">5.2 New Scoring System</h3>



<p class="wp-block-paragraph">The new conformance model will fundamentally change how things are evaluated, building upon similar requirements to the current norm. Since the ruleset and evaluation criteria are still being developed, only a few details are known about how it will work.</p>



<p class="wp-block-paragraph">The proposed model for WCAG 3.0 conformance is based on three main components:</p>



<ul class="wp-block-list">
<li><strong>Foundational Requirements:</strong> These constitute the most basic level of conformance.</li>



<li><strong>Supplemental Requirements:</strong> These are used, alongside Assertions, to define and meet higher levels of conformance.</li>



<li><strong>Assertions:</strong> These are defined as a formal claim of fact, attributed to a person or organization, regarding documented procedures practiced in the development and maintenance of the content or product to improve accessibility.</li>
</ul>



<p class="wp-block-paragraph">The main differences and similarities can be seen in Table 1.</p>



<p class="wp-block-paragraph"><strong>Table 1: Comparison of Conformance: WCAG 2.2 vs. WCAG 3.0</strong></p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><td><strong>Feature</strong></td><td><strong>WCAG 2.0/2.2</strong></td><td><strong>WCAG 3.0 Draft</strong></td></tr></thead><tbody><tr><td><strong>Structure</strong></td><td>Fixed system based on hierarchical levels: A, AA, and AAA. Conformance requires satisfying all success criteria at the chosen level.</td><td>Flexible structure based on three components: Foundational Requirements, Supplemental Requirements, and Assertions.</td></tr><tr><td><strong>Minimum Conformance</strong></td><td>Level A is the minimum conformance level.</td><td>The minimum level requires meeting all Foundational Requirements (which is basically Level A conformance).</td></tr><tr><td><strong>Equivalence of Levels</strong></td><td>Fixed criteria where Level AA builds upon all criteria from Level A.</td><td>The minimum foundational level of conformance in WCAG 3.0 is expected to be somewhat comparable to WCAG 2.2 Level AA.</td></tr><tr><td><strong>Scoring Mechanism</strong></td><td>Determined by meeting a fixed list of success criteria; no fractional score or points system.</td><td>Higher levels of conformance are being explored based on a system utilizing points, percentages, or predefined sets of requirements (modules).</td></tr><tr><td><strong>Evaluation Focus</strong></td><td>Focused on testable technical success criteria (functional testing), though usability testing is recommended in addition to functional testing.</td><td>Incorporates explicit concepts like Assertions which focus on formal claims about development and maintenance procedures that improve accessibility.</td></tr></tbody></table></figure>



<p class="wp-block-paragraph"><em>Sources: [5, 10, 12]</em></p>



<h2 class="wp-block-heading">6. State-of-the-Art Implementation</h2>



<h3 class="wp-block-heading">6.1 Modern Tooling and CI/CD</h3>



<p class="wp-block-paragraph">To ensure inclusivity from the beginning, the best practice is to include automated tests in CI/CD processes. These approaches can identify common issues early on, provide continuous feedback, and are easily scalable [9].</p>



<p class="wp-block-paragraph">Ci-Accessibility stated that there are many accessibility tools available and suitable for integration into automated testing frameworks:</p>



<ul class="wp-block-list">
<li><strong>Deque Systems’ Axe-Core CLI:</strong> This open-source accessibility testing engine is designed to work across modern web techniques and supports WCAG 2.0, 2.1, and 2.2 levels A, AA, and AAA. Axe was found to be among the easiest tools to integrate into a CI/CD workflow, such as using GitHub Actions. It provides good descriptions, precise locations for errors, and links to further documentation, making it highly valuable.</li>



<li><strong>Squiz Labs’ HTML_CodeSniffer:</strong> This tool checks HTML documents for accessibility violations based on rule-sets encompassing the three conformance levels of WCAG 2.2. It can be integrated into a CI pipeline, although it may require additional configuration and coding compared to tools like Axe.</li>



<li><strong>IBM’s Equal Access Accessibility Checker:</strong> This tool consists of open-source components that validate web code against accessibility concerns, complying with WCAG 2.2 levels A and AA. Along with Axe, it was noted as one of the easiest tools to integrate into a CI/CD pipeline.</li>
</ul>



<p class="wp-block-paragraph">A comparative study on integrating tools into a GitHub Actions CI/CD workflow found that Axe demonstrated the best overall performance in detecting WCAG violations among the tools tested [9].</p>



<p class="wp-block-paragraph">All of these options can also be used on the client side to provide easy verification of finished products or to support human evaluations. Despite the advancements in tool integration, automated accessibility tools have significant limitations, underscoring why human expertise, as discussed before, remains critical to comprehensive success. Automated tools can only detect a fraction of Web Accessibility guideline violations. A study found that selected open-source evaluation tools detected, on average, approximately 20 percent of all errors present on a given web page. This falls within the expected range, as accessibility experts note that only 20 percent to 50 percent of all accessibility issues can be automatically detected. Automated tools can produce false positives or false negatives, further reducing the accuracy of the results [9].</p>



<h3 class="wp-block-heading">6.2 Role of Modern Frontend Frameworks</h3>



<p class="wp-block-paragraph">While specialized tools (often integrated as linters or automated testing components) are essential for checking WCAG conformance, modern frontend frameworks themselves currently provide minimal inherent accessibility support during the development process, as shown in the study of Support-Webframeworks. The testing of modern front-end frameworks (Angular, React, and Vue) was an empirical study designed to evaluate the extent to which they support developers with automated accessibility features during the development process. The study focused on creating inaccessible web applications on purpose and observing whether the frameworks generated internal feedback about the violations. Each framework was configured using its default settings at installation. All development was carried out in Visual Studio Code. The study concluded that the three frameworks offered almost no feedback regarding accessibility violations. React was the only framework able to detect an issue, generating a single warning for the WCAG 1.1.1 Non-text Content violation. This violation occurred due to the absence of a label for non-text content.</p>



<p class="wp-block-paragraph">The current draft of WCAG 3.0 acknowledges this issue and aims to address it through a holistic, technology-agnostic approach [11].</p>



<h3 class="wp-block-heading">6.3 Role of Artificial Intelligence</h3>



<p class="wp-block-paragraph">In the study of AI, AI coding assistants, such as GitHub Copilot, are being explored for their potential in creating more accessible user interfaces. A prototype Visual Studio Code extension has been introduced that integrates an LLM to help developers identify and resolve accessibility issues. Similarly, the CodeA11y GitHub Copilot Extension has been developed to make AI coding assistants useful for accessible web development. The most frequent use case leverages LLMs to automatically generate high-quality alternative text for complex web images or labels for different actions in the HTML code. AI-based techniques can also significantly reduce the need for manual checks in accessibility testing by integrating seamlessly into automated environments.</p>



<p class="wp-block-paragraph">AI can also be integrated into assistive technologies and conversational agents to offer new opportunities for improving accessibility. For instance, AI-assisted speech recognition and conversational AI have demonstrated the ability to overcome the limitations of traditional screen readers, thereby increasing the inclusivity of web resources for blind and visually impaired users [2].</p>



<h2 class="wp-block-heading">7. Conclusion and Outlook</h2>



<p class="wp-block-paragraph">As of now, the current WCAG 2.2 standard has many weaknesses due to rapid changes in modern technologies, but it remains a very important milestone in making the digital world accessible for everyone. The testability of some applications is slowed down or becomes impossible when human evaluators disagree. Additionally, the binary ‘pass or fail’ nature of the criteria stated, often leads to failed tests. The future of digital accessibility lies in the W3C Accessibility Guidelines (WCAG) 3.0. This new approach, which is currently under development, is a significant evolution toward a framework that is more user-centric, flexible, and not dependent on a specific technology. It tries to address issues with the scoring system and enables better support from frontend web frameworks and AI-driven CI/CD tools, to warn developers from non-compliant code. Complementing this evolution, AI coding assistants and LLMs are becoming essential for automating tasks like alt-text generation, while AI-integrated assistive technologies are overcoming screen reader limitations to further enhance inclusivity for visually impaired users.</p>



<h2 class="wp-block-heading">References</h2>



<p class="wp-block-paragraph">[1] Brajnik, G., Yesilada, Y., &amp; Harper, S. (2010). Testability and validity of WCAG 2.0: the expertise effect. <em>In Proceedings of the 12th international ACM SIGACCESS conference on computers and accessibility</em> (p. 43–50). New York, NY, USA: Association for Computing Machinery. <a target="_blank" rel="noreferrer noopener" href="https://doi.org/10.1145/1878803.1878813">https://doi.org/10.1145/1878803.1878813</a></p>



<p class="wp-block-paragraph">[2] Campoverde-Molina, M., &amp; Luján-Mora, S. (2025). Artificial intelligence in web accessibility: A systematic mapping study. <em>Computer Standards &amp; Interfaces</em>, 96, 104055. <a target="_blank" rel="noreferrer noopener" href="https://www.google.com/search?q=https://doi.org/10.1016/j.csi.2025.104055">https://doi.org/10.1016/j.csi.2025.104055</a></p>



<p class="wp-block-paragraph">[3] European Commission. (2025). Web accessibility shaping europe’s digital future. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">https://digital-strategy.ec.europa.eu/en/policies/web-accessibility</a></p>



<p class="wp-block-paragraph">[4] European Union. (2019). Richtlinie (EU) 2019/882 des europäischen parlaments und des rates vom 17. april 2019 über die barrierefreiheitsanforderungen für produkte und dienstleistungen (Vol. 151). Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="http://data.europa.eu/eli/dir/2019/882/oj">http://data.europa.eu/eli/dir/2019/882/oj</a></p>



<p class="wp-block-paragraph">[5] Initiative (WAI), W. W. A. (2025). WCAG 3 introduction. Retrieved 2025-12-04, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/">https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/</a></p>



<p class="wp-block-paragraph">[6] Makati, T., Tigwell, G. W., &amp; Shinohara, K. (2024). The promise and pitfalls of web accessibility overlays for blind and low vision users. <em>In Proceedings of the 26th international ACM SIGACCESS conference on computers and accessibility</em> (pp. 1–12). New York, NY, USA: Association for Computing Machinery. <a target="_blank" rel="noreferrer noopener" href="https://www.google.com/search?q=https://doi.org/10.1145/3663548.3675650">https://doi.org/10.1145/3663548.3675650</a></p>



<p class="wp-block-paragraph">[7] Petrie, H., Savva, A., &amp; Power, C. (2015). Towards a unified definition of web accessibility. <em>In Proceedings of the 12th international web for all conference</em> (pp. 1–13). Association for Computing Machinery. <a target="_blank" rel="noreferrer noopener" href="https://doi.org/10.1145/2745555.2746653">https://doi.org/10.1145/2745555.2746653</a></p>



<p class="wp-block-paragraph">[8] Routledge Open Research. (2022). The EU accessibility act and web. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://routledgeopenresearch.org/articles/1-30">https://routledgeopenresearch.org/articles/1-30</a></p>



<p class="wp-block-paragraph">[9] Sane, P. (2021). A brief survey of current software engineering practices in continuous integration and automated accessibility testing. <em>In 2021 sixth international conference on wireless communications, signal processing and networking (wispnet)</em> (p. 130-134). <a target="_blank" rel="noreferrer noopener" href="https://doi.org/10.1109/WiSPNET51692.2021.9419464">https://doi.org/10.1109/WiSPNET51692.2021.9419464</a></p>



<p class="wp-block-paragraph">[10] Sikder, A. S. (2023). The evolution of web accessibility guidelines: A comparative analysis of WCAG 2.0 and WCAG 3.0 in ensuring inclusivity on the web. <em>International Journal of Information Science and Technology</em>, 1(1), 170–185. <a target="_blank" rel="noreferrer noopener" href="https://www.google.com/search?q=https://doi.org/10.70774/ijist.v1i1.18">https://doi.org/10.70774/ijist.v1i1.18</a></p>



<p class="wp-block-paragraph">[11] W3C. (2025). W3C accessibility guidelines (WCAG) 3.0. Retrieved 2025-12-04, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/TR/wcag-3.0/">https://www.w3.org/TR/wcag-3.0/</a></p>



<p class="wp-block-paragraph">[12] W3C Web Accessibility Initiative (WAI). (2025a). Understanding conformance. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/WAI/WCAG22/Understanding/conformance">https://www.w3.org/WAI/WCAG22/Understanding/conformance</a></p>



<p class="wp-block-paragraph">[13] W3C Web Accessibility Initiative (WAI). (2025b). Understanding techniques for WCAG 2.2 success criteria. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-techniques">https://www.w3.org/WAI/WCAG22/Understanding/understanding-techniques</a></p>



<p class="wp-block-paragraph">[14] W3C Web Accessibility Initiative (WAI). (2025c). Understanding test rules for WCAG 2.2 success criteria. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/WAI/WCAG22/Understanding/understanding-act-rules">https://www.w3.org/WAI/WCAG22/Understanding/understanding-act-rules</a></p>



<p class="has-medium-font-size wp-block-paragraph">[15] W3C Web Accessibility Initiative (WAI). (2025d). Understanding WCAG 2.2. Retrieved 2025-12-03, from <a target="_blank" rel="noreferrer noopener" href="https://www.w3.org/WAI/WCAG22/Understanding/">https://www.w3.org/WAI/WCAG22/Understanding/</a></p>



<p class="wp-block-paragraph"></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/sota-modern-web-accessibility/">SOTA | Modern Web Accessibility</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Print2Mobile &#124; AR &#8211; Web Application to project 3D Objects onto a Catalog</title>
		<link>https://mobile.fhstp.ac.at/development/webdevelopment/print2mobile-ar-web-application-to-project-3d-objects-onto-a-catalog/</link>
		
		<dc:creator><![CDATA[Jakob Laschober]]></dc:creator>
		<pubDate>Thu, 16 Oct 2025 12:43:41 +0000</pubDate>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[AR]]></category>
		<category><![CDATA[Augmented Reality]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[mobile web]]></category>
		<category><![CDATA[Print-to-mobile]]></category>
		<category><![CDATA[Print2Mobile]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<guid isPermaLink="false">https://mobile.fhstp.ac.at/?p=14874</guid>

					<description><![CDATA[<p>Have you ever seen a cool piece of furniture in a furniture store catalog? Maybe you wondered how the couch looks from behind, or how to view the table in 3D to better estimate its dimensions. Idea I tried to use the well-known store IKEA and its Catalog to implement my idea. This project aims <a class="read-more" href="https://mobile.fhstp.ac.at/development/webdevelopment/print2mobile-ar-web-application-to-project-3d-objects-onto-a-catalog/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/webdevelopment/print2mobile-ar-web-application-to-project-3d-objects-onto-a-catalog/">Print2Mobile | AR &#8211; Web Application to project 3D Objects onto a Catalog</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Have you ever seen a cool piece of furniture in a furniture store catalog? Maybe you wondered how the couch looks from behind, or how to view the table in 3D to better estimate its dimensions.</p>



<p class="has-medium-font-size wp-block-paragraph"><strong>Idea</strong></p>



<p class="wp-block-paragraph">I tried to use the well-known store IKEA and its Catalog to implement my idea. This project aims to bridge the gap between physical catalogs and digital visualization. The core concept involves using QR codes placed on the product pages to link to an external web application. Once the user scans the code, this application can display a 3D model of the product above its corresponding picture in the physical catalog.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full is-resized is-style-default"><img loading="lazy" decoding="async" width="4080" height="3072" data-id="14937" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/PXL_20251016_083759829-3.jpg" alt="" class="wp-image-14937" style="width:519px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/PXL_20251016_083759829-3.jpg 4080w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/PXL_20251016_083759829-3-1536x1157.jpg 1536w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/PXL_20251016_083759829-3-2048x1542.jpg 2048w" sizes="auto, (max-width: 4080px) 100vw, 4080px" /></figure>



<figure class="wp-block-image size-full is-resized is-style-default"><img loading="lazy" decoding="async" width="960" height="2142" data-id="14932" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103642.jpg" alt="" class="wp-image-14932" style="width:221px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103642.jpg 960w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103642-688x1536.jpg 688w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103642-918x2048.jpg 918w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>
</figure>



<p class="has-medium-font-size wp-block-paragraph"><strong>Implementation</strong></p>



<p class="wp-block-paragraph">For technologies, I used HTML, CSS and JavaScript. For the purpose of pattern recognition and tracking, I used the framework <a href="https://hiukim.github.io/mind-ar-js-doc/">mindAR.js</a>. For displaying the 3D Objects, I used the framework <a href="https://aframe.io/">A-Frame</a>. Sadly, the 3D objects that I used are very high fidelity and that impacts the performance of the application. So when you want to scan the furniture elements on the page, you have to be very careful, not to move too much or too quickly. It&#8217;s hosted on my own server as a docker instance using a Nginx web server.</p>



<figure class="wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full is-resized"><img decoding="async" data-id="14910" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103732.jpg" alt="" class="wp-image-14910" style="width:306px;height:auto"/></figure>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="960" height="2142" data-id="14928" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103711-1.png" alt="" class="wp-image-14928" style="width:305px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103711-1.png 960w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103711-1-688x1536.png 688w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103711-1-918x2048.png 918w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="960" height="2142" data-id="14929" src="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103739.jpg" alt="" class="wp-image-14929" style="width:321px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103739.jpg 960w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103739-688x1536.jpg 688w, https://mobile.fhstp.ac.at/wp-content/uploads/2025/10/Screenshot_20251016-103739-918x2048.jpg 918w" sizes="auto, (max-width: 960px) 100vw, 960px" /></figure>
</figure>



<p class="wp-block-paragraph">Link to the Webapplication: <a href="https://ikea-scanner.laschober.eu/">https://.ikea-scanner.laschober.eu</a></p>



<p class="wp-block-paragraph"><strong>Disclaimer:</strong> This project is <strong>not affiliated with, endorsed by, or in any way officially connected with IKEA</strong>. The use of IKEA&#8217;s name and catalog images is solely for illustrative purposes as a practical example for the proof of concept.</p>



<p class="wp-block-paragraph"></p>
<p>The post <a href="https://mobile.fhstp.ac.at/development/webdevelopment/print2mobile-ar-web-application-to-project-3d-objects-onto-a-catalog/">Print2Mobile | AR &#8211; Web Application to project 3D Objects onto a Catalog</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
