Tooloop/Tooloop-Packages
2
0
Fork 0
mirror of https://github.com/Tooloop/Tooloop-Packages.git synced 2026-04-27 20:41:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add initial onboarding app package

Browse Source
This commit is contained in:
Daniel Stock
2023-12-19 09:13:33 +01:00
parent 4663645212
commit 70dd482276
9 changed files with 369 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
onboarding/media/onboarding-thumbnail.jpg
LFS
BIN
View File
Binary file not shown.
onboarding/package/DEBIAN/control
+14
View File
@@ -0,0 +1,14 @@
Package: tooloop-onboarding
Version: 1.0.0
Maintainer: Tooloop Multimedia
Homepage: https://www.tooloop.de
Bugs: https://github.com/Tooloop/Tooloop-Packages
Section: tooloop/presentation
Architecture: amd64
Depends: chromium-browser
Suggests: tooloop-nginx
Name: Onboarding
Description: Tipps and first steps
Learn how to find your way in Tooloop OS.
Thumbnail: onboarding-thumbnail.jpg
onboarding/package/assets/data/Slider.js
+90
View File
@@ -0,0 +1,90 @@
class Slider {
element;
slides;
template;
data;
activeSlide = 0;
slideDuration;
autoplayInterval;
ip;
constructor(element, template, data, slideDuration = 10000) {
this.element = document.querySelector(element);
this.template = document.querySelector(template);
this.data = data;
this.slideDuration = slideDuration;
this.ip = location.host;
// append slides
for (let i = 0; i < this.data.length; i++) {
let slide = this.template.content.cloneNode(true);
let type = this.data[i].image.split('.').pop().toLowerCase();
switch (type) {
// image
case "png":
case "jpg":
case "webp":
case "gif":
let img = document.createElement("img");
img.src = this.data[i].image;
slide.querySelector(".image").appendChild(img);
break;
case "mp4":
case "webm":
let video = document.createElement("video");
video.autoplay = true;
video.loop = true;
video.muted = true;
video.src = "./slides/" + this.data[i].image;
slide.querySelector(".image").appendChild(video);
break;
default:
break;
}
// texts
let hasText = this.data[i].title || this.data[i].description;
if (hasText) {
let title = slide.querySelector(".description h1");
let description = slide.querySelector(".description p");
title.textContent = this.data[i].title;
description.textContent = this.data[i].description;
}
// slide
let newslide = this.element.appendChild(slide);
let slideNode = document.querySelector(element + " .slide:last-child");
slideNode.id = "slide-" + i;
slideNode.classList.toggle("no-text", !hasText);
}
// observe scroll position
this.element.onscroll = e => this.onScroll(e);
// start auto play
this.autoplayInterval = setInterval(() => { this.next(); }, this.slideDuration);
}
onScroll(e) {
this.activeSlide = Math.round(e.target.scrollLeft / 640);
}
next() {
let targetSlide = this.activeSlide >= (this.data.length - 1) ? 0 : this.activeSlide + 1;
this.element.scrollTo(targetSlide * 640, 0);
}
previous() {
let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1
this.element.scrollTo(targetSlide * 640, 0);
}
stop() {
clearInterval(this.autoplayInterval);
}
}
onboarding/package/assets/data/index.html
+66
View File
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Tooloop OS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="slider"></div>
<template id="slide-template">
<div class="slide">
<section class="image"></section>
<section class="description">
<h1></h1>
<p></p>
</section>
</div>
</template>
<nav>
<button class="slide-button previous" onclick="slider.previous(); slider.stop();">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
stroke-linejoin="miter">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M15 6l-6 6l6 6" />
</svg>
</button>
<button class="slide-button next" onclick="slider.next(); slider.stop();">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
stroke-linejoin="miter">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 6l6 6l-6 6" />
</svg>
</button>
<button class="close-button" onclick="window.close();">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
</button>
</nav>
<script src="slides/slides.js"></script>
<script src="Slider.js"></script>
<script>
var slider = new Slider("#slider", "#slide-template", slides, 12000);
// var scale = document.querySelector("html").clientWidth > 1920 ? 2.0 : 1.0;
// document.querySelector(':root').style.setProperty("--scale", scale);
</script>
</body>
</html>
onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4
LFS
BIN
View File
Binary file not shown.
onboarding/package/assets/data/slides/slides.js
+8
View File
@@ -0,0 +1,8 @@
var slides = [
{ image: "../../../../../media-player/package/assets/data/Tooloop Greeter Intro.mp4", title: "", description: "" },
{ image: "../../../../../gpu-benchmark/media/glmark2-buffer.jpg", title: "Desktop", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
{ image: "../../../../../gpu-benchmark/media/glmark2-jellyfish.jpg", title: "Menu", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
{ image: "../../../../../gpu-benchmark/media/glmark2-refract.jpg", title: "Control Center", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
{ image: "../../../../../gpu-benchmark/media/glmark2-shadow.jpg", title: "Files", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
{ image: "../../../../../gpu-benchmark/media/glmark2-thumbnail.jpg", title: "Remote control", description: "Lorem ipsum dolor hit me. Mommy says knock you out." }
]
onboarding/package/assets/data/styles.css
+156
View File
@@ -0,0 +1,156 @@
:root {
--font-size: 18px;
--light-grey: #f2f2f2;
--medium-grey: #999999;
--dark-grey: #333333;
--pink: #E6004C;
--width: 800px;
--height: 600px;
--scale: 1.0;
}
html {
background-color: var(--dark-grey);
}
body {
width: var(--width);
height: var(--height);
transform: scale(var(--scale));
transform-origin: 0 0;
background-color: white;
margin: 0;
padding: 0;
font-size: var(--font-size);
position: absolute;
inset: 0;
font-family: 'Clear Sans', system-ui, sans-serif;
}
nav {
position: absolute;
inset: 0;
pointer-events: none;
}
button {
pointer-events: all;
position: absolute;
padding: 0;
width: 2rem;
height: 2rem;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
}
button:hover {
background: var(--light-grey);
}
button:active {
background: var(--medium-grey);
}
button.close-button {
top: 1rem;
right: 1rem;
}
button.close-button:hover {
background-color: rgba(255,255,255, 0.1);
}
button.close-button svg {
stroke: white;
}
button.slide-button {
bottom: calc((var(--height) / 4 - 2rem) / 2);
}
button.slide-button svg {
stroke: var(--pink);
}
button.slide-button.previous {
left: 1rem;
}
button.slide-button.next {
right: 1rem;
}
#slider {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: none;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
#slider::-webkit-scrollbar {
display: none;
}
.slide {
scroll-snap-align: center;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: var(--width);
height: var(--height);
}
.slide .image {
background-color: var(--light-grey);
height: calc(var(--height) * 3 / 4);
}
.slide.no-text .image {
height: var(--height);
}
.slide .image img,
.slide .image video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slide.no-text .description {
display: none;
}
.slide .description {
position: relative;
padding: 1rem 8rem;
height: calc(var(--height) / 4);
overflow: auto;
}
.slide .description h1,
.slide .description p {
margin: 0.5rem 0;
}
.slide .description h1 {
font-size: 1.5rem;
}
.slide .description h1:first-child {
margin-top: 0;
}
.slide .description p:last-of-type {
margin-bottom: 0;
}
onboarding/package/assets/presentation/start-presentation.sh
+24
View File
@@ -0,0 +1,24 @@
#!/bin/bash
# List of Chromium Command Line Switches
# https://peter.sh/experiments/chromium-command-line-switches/
COMMAND="chromium-browser \
--disable-features=Translate,Infobars \
--no-default-browser-check \
--no-first-run \
--noerrdialogs \
--class=TooloopOnboarding \
--app=file:///media/assets/data/index.html"
if [ $EUID == 0 ]; then
pkill chrome
sleep 0.1
su tooloop -c "$COMMAND" &
else
pkill chrome
sleep 0.1
$COMMAND &
fi
exit 0
onboarding/package/assets/presentation/stop-presentation.sh
+5
View File
@@ -0,0 +1,5 @@
#!/bin/bash
pkill chrome &
exit 0