From 0aa3de078e6bbd8ec312b0542988163e93ad405c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Kr=C3=BCger?=
 <rene.krueger@studium.uni-hamburg.de>
Date: Wed, 14 Jan 2026 14:01:29 +0100
Subject: [PATCH 1/4] Adaptive displaying of motor heat component

---
 bitbots_misc/bitbots_education/templates/base.html   |  1 +
 .../bitbots_education/templates/pages/dashboard.html | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/bitbots_misc/bitbots_education/templates/base.html b/bitbots_misc/bitbots_education/templates/base.html
index 7b961b334..f5941a23c 100644
--- a/bitbots_misc/bitbots_education/templates/base.html
+++ b/bitbots_misc/bitbots_education/templates/base.html
@@ -8,6 +8,7 @@
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/resize@3.x.x/dist/cdn.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
   <script type="text/javascript" >
diff --git a/bitbots_misc/bitbots_education/templates/pages/dashboard.html b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
index 487349098..39fae6bf6 100644
--- a/bitbots_misc/bitbots_education/templates/pages/dashboard.html
+++ b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
@@ -44,7 +44,10 @@
 
 {{ components.textbox("Willkommen!", "Klicke auf eine der Boxen oder eines der Icons in der Leiste, um mehr Informationen zu bekommen.", true, true, true) }}
 
-<div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr">
+<div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr"
+x-data="{ width: window.innerWidth, height: window.innerHeight, 
+  get isMobileDevice() { return ((this.width <= 640) && (this.height <= 480)); } }"
+x-resize="width = $width; height = $height">
   <a href="imu" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
     <div class="flex justify-between flex-col h-full">
       <div class="flex justify-center">
@@ -62,10 +65,13 @@
       </div>
     </a>
     <a href="motors" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
-      <div class="flex justify-between flex-col h-full">
-        <div class="flex justify-center h-full flex-col">
+      <div class="flex justify-between flex-col h-full" >
+        <div class="flex justify-center h-full flex-col" x-show="isMobileDevice">
           {{ heat_components.motor_heat_component(true) }}
         </div>
+        <div class="flex justify-center h-full flex-col"  x-show="!isMobileDevice">
+          {{ heat_components.motor_heat_component(false) }}
+        </div>
         <p class="pb-4 px-2 text-center font-medium">Motoren</p>
       </div>
     </a>

From d2c7c13d9604e35ea5dcf400e61d82f67cf73b95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Kr=C3=BCger?=
 <rene.krueger@studium.uni-hamburg.de>
Date: Sat, 17 Jan 2026 14:04:05 +0100
Subject: [PATCH 2/4] Round edges for motor heat component

---
 .../bitbots_education/templates/components/motor_heat.html      | 2 +-
 bitbots_misc/bitbots_education/templates/pages/dashboard.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bitbots_misc/bitbots_education/templates/components/motor_heat.html b/bitbots_misc/bitbots_education/templates/components/motor_heat.html
index f1717090d..822182ea9 100644
--- a/bitbots_misc/bitbots_education/templates/components/motor_heat.html
+++ b/bitbots_misc/bitbots_education/templates/components/motor_heat.html
@@ -93,7 +93,7 @@
     <span x-text="max_temperature"></span> °C
 </div>
 {% else %}
-<div x-data="temperature_state()" class="p-6 overflow-hidden bg-sky-100 flex flex-row justify-evenly">
+<div x-data="temperature_state()" class="p-6 overflow-hidden bg-sky-100 flex flex-row justify-evenly rounded-2xl">
     <div class="relative" style="width: 60%;">
         <img src="{{url_for('static', filename='abstract_robot.svg') }}" class="w-full">
         <div x-html="render_blobs()"></div>
diff --git a/bitbots_misc/bitbots_education/templates/pages/dashboard.html b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
index 39fae6bf6..d0a581f64 100644
--- a/bitbots_misc/bitbots_education/templates/pages/dashboard.html
+++ b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
@@ -46,7 +46,7 @@
 
 <div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr"
 x-data="{ width: window.innerWidth, height: window.innerHeight, 
-  get isMobileDevice() { return ((this.width <= 640) && (this.height <= 480)); } }"
+  get isMobileDevice() { return ((this.width <= 800) && (this.height <= 600)); } }"
 x-resize="width = $width; height = $height">
   <a href="imu" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
     <div class="flex justify-between flex-col h-full">

From 0d2275dcb5001672010924f3f5df33b2050188a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Kr=C3=BCger?=
 <rene.krueger@studium.uni-hamburg.de>
Date: Sat, 17 Jan 2026 14:43:19 +0100
Subject: [PATCH 3/4] Display behavior stack on dashboard

---
 .../templates/components/behavior_stack.html              | 4 +++-
 .../templates/components/motor_heat.html                  | 2 +-
 .../bitbots_education/templates/pages/behavior.html       | 2 +-
 .../bitbots_education/templates/pages/dashboard.html      | 8 ++++++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/bitbots_misc/bitbots_education/templates/components/behavior_stack.html b/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
index 273e20c07..fe6fa0cbd 100644
--- a/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
+++ b/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
@@ -1,4 +1,4 @@
-{% macro behavior_stack_component() %}
+{% macro behavior_stack_component(is_dashboard_view) %}
 
 <script type="text/javascript">
 
@@ -66,6 +66,7 @@
         </div>
       </div>
     </div>
+    {% if is_dashboard_view == False %}
     <button id="play_button" x-on:click="toggle()" class="border-2 border-zinc-800 rounded-md bg-zinc-50 shadow-md p-1 mt-4 grid place-items-center" >
       <div x-show="run">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -78,6 +79,7 @@
         </svg>
       </div>
     </button>
+    {% endif %}
 </div>
 
 {% endmacro %}
diff --git a/bitbots_misc/bitbots_education/templates/components/motor_heat.html b/bitbots_misc/bitbots_education/templates/components/motor_heat.html
index 822182ea9..b3864b02f 100644
--- a/bitbots_misc/bitbots_education/templates/components/motor_heat.html
+++ b/bitbots_misc/bitbots_education/templates/components/motor_heat.html
@@ -93,7 +93,7 @@
     <span x-text="max_temperature"></span> °C
 </div>
 {% else %}
-<div x-data="temperature_state()" class="p-6 overflow-hidden bg-sky-100 flex flex-row justify-evenly rounded-2xl">
+<div x-data="temperature_state()" class="p-6 overflow-hidden flex flex-row justify-evenly rounded-2xl">
     <div class="relative" style="width: 60%;">
         <img src="{{url_for('static', filename='abstract_robot.svg') }}" class="w-full">
         <div x-html="render_blobs()"></div>
diff --git a/bitbots_misc/bitbots_education/templates/pages/behavior.html b/bitbots_misc/bitbots_education/templates/pages/behavior.html
index d2a19b989..f0accc22d 100644
--- a/bitbots_misc/bitbots_education/templates/pages/behavior.html
+++ b/bitbots_misc/bitbots_education/templates/pages/behavior.html
@@ -35,7 +35,7 @@
     </div>
 
     <div x-show="stack">
-        {{ behavior_stack_component.behavior_stack_component() }}
+        {{ behavior_stack_component.behavior_stack_component(false) }}
     </div>
     <div x-show="!stack">
         {{ behavior_tree_minimal.behavior_tree_minimal_component() }}
diff --git a/bitbots_misc/bitbots_education/templates/pages/dashboard.html b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
index d0a581f64..456ab70ae 100644
--- a/bitbots_misc/bitbots_education/templates/pages/dashboard.html
+++ b/bitbots_misc/bitbots_education/templates/pages/dashboard.html
@@ -4,6 +4,7 @@
 {% import "components/textbox.html" as components %}
 {% import "components/motor_heat.html" as heat_components %}
 {% import "components/icon_footer.html" as icon_components %}
+{% import "components/behavior_stack.html" as behavior_stack_component %}
 
 
 
@@ -46,7 +47,7 @@
 
 <div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr"
 x-data="{ width: window.innerWidth, height: window.innerHeight, 
-  get isMobileDevice() { return ((this.width <= 800) && (this.height <= 600)); } }"
+  get isMobileDevice() { return ((this.width <= 800) || (this.height <= 600)); } }"
 x-resize="width = $width; height = $height">
   <a href="imu" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
     <div class="flex justify-between flex-col h-full">
@@ -78,9 +79,12 @@
     <a href="behavior" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
       <div class="flex justify-between flex-col h-full">
         <div class="flex justify-center h-full flex-col">
-          <div class="border-2 border-zinc-800 rounded-2xl p-2 m-6 bg-sky-100 to-teal-200">
+          <div class="border-2 border-zinc-800 rounded-2xl p-2 m-6 bg-sky-100 to-teal-200" x-show="isMobileDevice">
             {{ current_action_components.current_action_component() }}
           </div>
+          <div x-show="!isMobileDevice">
+            {{ behavior_stack_component.behavior_stack_component(true) }}
+          </div>
         </div>
         <p class="pb-4 px-2 text-center font-medium">Verhalten</p>
       </div>

From 4059912cd6b58c72dbdfcc636382568c1a1f9701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Kr=C3=BCger?=
 <rene.krueger@studium.uni-hamburg.de>
Date: Sat, 17 Jan 2026 15:48:18 +0100
Subject: [PATCH 4/4] Display a minimal behavior stack on dashboard (only)

---
 .../templates/components/behavior_stack.html  | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/bitbots_misc/bitbots_education/templates/components/behavior_stack.html b/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
index fe6fa0cbd..426151fc7 100644
--- a/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
+++ b/bitbots_misc/bitbots_education/templates/components/behavior_stack.html
@@ -2,8 +2,11 @@
 
 <script type="text/javascript">
 
-  function render_stack(subtree) {
-    if(subtree.type === "sequence")
+  function render_stack(subtree, max_stack_depth) {
+    if (max_stack_depth !== null && max_stack_depth > 0 && !!subtree.next) {
+      return render_stack(subtree.next, max_stack_depth - 1);
+    }
+    else if (subtree.type === "sequence")
     {
       return `<div class="border-2 border-zinc-800 rounded-xl bg-zinc-100 p-2 text-center">${behavior_translate(subtree.current_action.name)}</div>`;
     }
@@ -21,14 +24,15 @@
         </svg>
         ${behavior_translate(subtree.next.activation_reason)}
       </div>
-      ${render_stack(subtree.next)}`;
+      ${render_stack(subtree.next, max_stack_depth - 1)}`;
     }
   };
 
-  function behavior_stack_state() {
+  function behavior_stack_state(max_stack_depth) {
     return {
       listener: null,
       run: true,
+      stack_depth: 0,
       init() {
         this.listener = new ROSLIB.Topic({
           ros : ros,
@@ -39,7 +43,13 @@
       },
       behavior_stack_callback(message) {
         const behavior_stack = JSON.parse(message.data);
-        this.$refs.stack.innerHTML = render_stack(behavior_stack);
+        // count the stack depth
+        this.stack_depth = 0;
+        for (let elem = behavior_stack; !!elem; elem = elem.next) {
+          this.stack_depth++;
+        }
+        this.$refs.stack.innerHTML = render_stack(behavior_stack, 
+          (max_stack_depth === null) ? null : this.stack_depth - max_stack_depth);
       },
       toggle() {
         this.run = !this.run;
@@ -58,8 +68,11 @@
   }
 </script>
 
-
-<div x-data="behavior_stack_state()" class="flex justify-center flex-col grid place-items-center pt-6">
+{% if is_dashboard_view == False %}
+<div x-data="behavior_stack_state(null)" class="flex justify-center flex-col grid place-items-center pt-6">
+{% else %}
+<div x-data="behavior_stack_state(3)" class="flex justify-center flex-col grid place-items-center pt-6">
+{% endif %}
     <div class="text-center w-full">
       <div class="flex justify-center flex-col">
         <div class="overflow-scroll" x-ref="stack">