mirror of
https://github.com/Tooloop/Tooloop-Packages.git
synced 2026-04-27 20:41:37 +02:00
Add initial onboarding app package
This commit is contained in:
Binary file not shown.
@@ -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
|
||||||
|
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
Binary file not shown.
@@ -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." }
|
||||||
|
]
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
pkill chrome &
|
||||||
|
|
||||||
|
exit 0
|
||||||
Reference in New Issue
Block a user