Adaptive web design

src/bitbots_misc/bitbots_education/templates/base.html

@@ -7,6 +7,7 @@
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/lib/eventemitter2.min.js"></script>
   <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 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" >

src/bitbots_misc/bitbots_education/templates/components/behavior_stack.html

@@ -1,9 +1,12 @@
-{% macro behavior_stack_component() %}
+{% macro behavior_stack_component(is_dashboard_view) %}
 
 <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,14 +68,18 @@
   }
 </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">
         </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 +92,7 @@
         </svg>
       </div>
     </button>
+    {% endif %}
 </div>
 
 {% endmacro %}

src/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 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>

src/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() }}

src/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 %}
 
 
 
@@ -44,7 +45,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 <= 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">
       <div class="flex justify-center">
@@ -62,19 +66,25 @@
       </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>
     <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>