wangzixiang
/
lerobot
mirror of https://github.com/huggingface/lerobot.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Vizualization] Better UI on small screens (like in smartphones) (#423)

This commit is contained in:
Mishig 2024-09-09 15:39:40 +02:00 committed by GitHub
parent 4255655618
commit 9c463661c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
lerobot/templates/visualize_dataset_template.html
View File

@ -14,7 +14,7 @@
<!-- Use [Alpin.js](https://alpinejs.dev), a lightweight and easy to learn JS framework --> <!-- Use [Alpin.js](https://alpinejs.dev), a lightweight and easy to learn JS framework -->
<!-- Use [tailwindcss](https://tailwindcss.com/), CSS classes for styling html --> <!-- Use [tailwindcss](https://tailwindcss.com/), CSS classes for styling html -->
<!-- Use [dygraphs](https://dygraphs.com/), a lightweight JS charting library --> <!-- Use [dygraphs](https://dygraphs.com/), a lightweight JS charting library -->
<body class="flex h-screen max-h-screen bg-slate-950 text-gray-200" x-data="createAlpineData()" @keydown.window="(e) => { <body class="flex flex-col md:flex-row h-screen max-h-screen bg-slate-950 text-gray-200" x-data="createAlpineData()" @keydown.window="(e) => {
// Use the space bar to play and pause, instead of default action (e.g. scrolling) // Use the space bar to play and pause, instead of default action (e.g. scrolling)
const { keyCode, key } = e; const { keyCode, key } = e;
if (keyCode === 32 || key === ' ') { if (keyCode === 32 || key === ' ') {
@ -30,7 +30,7 @@
} }
}"> }">
<!-- Sidebar --> <!-- Sidebar -->
<div x-ref="sidebar" class="w-60 bg-slate-900 p-5 break-words max-h-screen overflow-y-auto"> <div x-ref="sidebar" class="bg-slate-900 p-5 break-words overflow-y-auto shrink-0 md:shrink md:w-60 md:max-h-screen">
<h1 class="mb-4 text-xl font-semibold">{{ dataset_info.repo_id }}</h1> <h1 class="mb-4 text-xl font-semibold">{{ dataset_info.repo_id }}</h1>
<ul> <ul>
@ -46,7 +46,8 @@
</ul> </ul>
<p>Episodes:</p> <p>Episodes:</p>
<ul class="ml-2"> <!-- episodes menu for medium & large screens -->
<ul class="ml-2 hidden md:block">
{% for episode in episodes %} {% for episode in episodes %}
<li class="font-mono text-sm mt-0.5"> <li class="font-mono text-sm mt-0.5">
<a href="episode_{{ episode }}" class="underline {% if episode_id == episode %}font-bold -ml-1{% endif %}"> <a href="episode_{{ episode }}" class="underline {% if episode_id == episode %}font-bold -ml-1{% endif %}">
@ -56,16 +57,27 @@
{% endfor %} {% endfor %}
</ul> </ul>
<!-- episodes menu for small screens -->
<div class="flex overflow-x-auto md:hidden">
{% for episode in episodes %}
<p class="font-mono text-sm mt-0.5 border-r last:border-r-0 px-2 {% if episode_id == episode %}font-bold{% endif %}">
<a href="episode_{{ episode }}" class="">
{{ episode }}
</a>
</p>
{% endfor %}
</div>
</div> </div>
<!-- Toggle sidebar button --> <!-- Toggle sidebar button -->
<button class="flex items-center opacity-50 hover:opacity-100 mx-1" <button class="flex items-center opacity-50 hover:opacity-100 mx-1 hidden md:block"
@click="() => ($refs.sidebar.classList.toggle('hidden'))" title="Toggle sidebar"> @click="() => ($refs.sidebar.classList.toggle('hidden'))" title="Toggle sidebar">
<div class="bg-slate-500 w-2 h-10 rounded-full"></div> <div class="bg-slate-500 w-2 h-10 rounded-full"></div>
</button> </button>
<!-- Content --> <!-- Content -->
<div class="flex-1 max-h-screen flex flex-col gap-4 overflow-y-auto"> <div class="max-h-screen flex flex-col gap-4 overflow-y-auto md:flex-1">
<h1 class="text-xl font-bold mt-4 font-mono"> <h1 class="text-xl font-bold mt-4 font-mono">
Episode {{ episode_id }} Episode {{ episode_id }}
</h1> </h1>