Skip to content

Commit b18e740

Browse files
ayin21ayin21
authored
Adaptive web design (#733)
2 parents 1f65f17 + 87061fc commit b18e740

5 files changed

Lines changed: 40 additions & 14 deletions

File tree

‎src/bitbots_misc/bitbots_education/templates/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/lib/eventemitter2.min.js"></script>
88
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.min.js"></script>
99
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
10+
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/resize@3.x.x/dist/cdn.min.js"></script>
1011
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
1112

1213
<script type="text/javascript" >

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
{% macro behavior_stack_component() %}
1+
{% macro behavior_stack_component(is_dashboard_view) %}
22

33
<script type="text/javascript">
44

5-
function render_stack(subtree) {
6-
if(subtree.type === "sequence")
5+
function render_stack(subtree, max_stack_depth) {
6+
if (max_stack_depth !== null && max_stack_depth > 0 && !!subtree.next) {
7+
return render_stack(subtree.next, max_stack_depth - 1);
8+
}
9+
else if (subtree.type === "sequence")
710
{
811
return `<div class="border-2 border-zinc-800 rounded-xl bg-zinc-100 p-2 text-center">${behavior_translate(subtree.current_action.name)}</div>`;
912
}
@@ -21,14 +24,15 @@
2124
</svg>
2225
${behavior_translate(subtree.next.activation_reason)}
2326
</div>
24-
${render_stack(subtree.next)}`;
27+
${render_stack(subtree.next, max_stack_depth - 1)}`;
2528
}
2629
};
2730

28-
function behavior_stack_state() {
31+
function behavior_stack_state(max_stack_depth) {
2932
return {
3033
listener: null,
3134
run: true,
35+
stack_depth: 0,
3236
init() {
3337
this.listener = new ROSLIB.Topic({
3438
ros : ros,
@@ -39,7 +43,13 @@
3943
},
4044
behavior_stack_callback(message) {
4145
const behavior_stack = JSON.parse(message.data);
42-
this.$refs.stack.innerHTML = render_stack(behavior_stack);
46+
// count the stack depth
47+
this.stack_depth = 0;
48+
for (let elem = behavior_stack; !!elem; elem = elem.next) {
49+
this.stack_depth++;
50+
}
51+
this.$refs.stack.innerHTML = render_stack(behavior_stack,
52+
(max_stack_depth === null) ? null : this.stack_depth - max_stack_depth);
4353
},
4454
toggle() {
4555
this.run = !this.run;
@@ -58,14 +68,18 @@
5868
}
5969
</script>
6070

61-
62-
<div x-data="behavior_stack_state()" class="flex justify-center flex-col grid place-items-center pt-6">
71+
{% if is_dashboard_view == False %}
72+
<div x-data="behavior_stack_state(null)" class="flex justify-center flex-col grid place-items-center pt-6">
73+
{% else %}
74+
<div x-data="behavior_stack_state(3)" class="flex justify-center flex-col grid place-items-center pt-6">
75+
{% endif %}
6376
<div class="text-center w-full">
6477
<div class="flex justify-center flex-col">
6578
<div class="overflow-scroll" x-ref="stack">
6679
</div>
6780
</div>
6881
</div>
82+
{% if is_dashboard_view == False %}
6983
<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" >
7084
<div x-show="run">
7185
<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 @@
7892
</svg>
7993
</div>
8094
</button>
95+
{% endif %}
8196
</div>
8297

8398
{% endmacro %}

‎src/bitbots_misc/bitbots_education/templates/components/motor_heat.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<span x-text="max_temperature"></span> °C
9494
</div>
9595
{% else %}
96-
<div x-data="temperature_state()" class="p-6 overflow-hidden bg-sky-100 flex flex-row justify-evenly">
96+
<div x-data="temperature_state()" class="p-6 overflow-hidden flex flex-row justify-evenly rounded-2xl">
9797
<div class="relative" style="width: 60%;">
9898
<img src="{{url_for('static', filename='abstract_robot.svg') }}" class="w-full">
9999
<div x-html="render_blobs()"></div>

‎src/bitbots_misc/bitbots_education/templates/pages/behavior.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</div>
3636

3737
<div x-show="stack">
38-
{{ behavior_stack_component.behavior_stack_component() }}
38+
{{ behavior_stack_component.behavior_stack_component(false) }}
3939
</div>
4040
<div x-show="!stack">
4141
{{ behavior_tree_minimal.behavior_tree_minimal_component() }}

‎src/bitbots_misc/bitbots_education/templates/pages/dashboard.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
{% import "components/textbox.html" as components %}
55
{% import "components/motor_heat.html" as heat_components %}
66
{% import "components/icon_footer.html" as icon_components %}
7+
{% import "components/behavior_stack.html" as behavior_stack_component %}
78

89

910

@@ -44,7 +45,10 @@
4445

4546
{{ components.textbox("Willkommen!", "Klicke auf eine der Boxen oder eines der Icons in der Leiste, um mehr Informationen zu bekommen.", true, true, true) }}
4647

47-
<div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr">
48+
<div class="grid grid-cols-2 gap-3 py-12 px-6 auto-rows-fr"
49+
x-data="{ width: window.innerWidth, height: window.innerHeight,
50+
get isMobileDevice() { return ((this.width <= 800) || (this.height <= 600)); } }"
51+
x-resize="width = $width; height = $height">
4852
<a href="imu" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
4953
<div class="flex justify-between flex-col h-full">
5054
<div class="flex justify-center">
@@ -62,19 +66,25 @@
6266
</div>
6367
</a>
6468
<a href="motors" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
65-
<div class="flex justify-between flex-col h-full">
66-
<div class="flex justify-center h-full flex-col">
69+
<div class="flex justify-between flex-col h-full" >
70+
<div class="flex justify-center h-full flex-col" x-show="isMobileDevice">
6771
{{ heat_components.motor_heat_component(true) }}
6872
</div>
73+
<div class="flex justify-center h-full flex-col" x-show="!isMobileDevice">
74+
{{ heat_components.motor_heat_component(false) }}
75+
</div>
6976
<p class="pb-4 px-2 text-center font-medium">Motoren</p>
7077
</div>
7178
</a>
7279
<a href="behavior" class="flex justify-center flex-col border-2 border-zinc-800 rounded-2xl bg-zinc-100 shadow-md">
7380
<div class="flex justify-between flex-col h-full">
7481
<div class="flex justify-center h-full flex-col">
75-
<div class="border-2 border-zinc-800 rounded-2xl p-2 m-6 bg-sky-100 to-teal-200">
82+
<div class="border-2 border-zinc-800 rounded-2xl p-2 m-6 bg-sky-100 to-teal-200" x-show="isMobileDevice">
7683
{{ current_action_components.current_action_component() }}
7784
</div>
85+
<div x-show="!isMobileDevice">
86+
{{ behavior_stack_component.behavior_stack_component(true) }}
87+
</div>
7888
</div>
7989
<p class="pb-4 px-2 text-center font-medium">Verhalten</p>
8090
</div>

0 commit comments

Comments
 (0)