From 70dd482276866d665353922b208c1abef16ee6b4 Mon Sep 17 00:00:00 2001 From: Daniel Stock Date: Tue, 19 Dec 2023 09:13:33 +0100 Subject: [PATCH] Add initial onboarding app package --- onboarding/media/onboarding-thumbnail.jpg | 3 + onboarding/package/DEBIAN/control | 14 ++ onboarding/package/assets/data/Slider.js | 90 ++++++++++ onboarding/package/assets/data/index.html | 66 ++++++++ .../data/slides/Tooloop Greeter Intro.mp4 | 3 + .../package/assets/data/slides/slides.js | 8 + onboarding/package/assets/data/styles.css | 156 ++++++++++++++++++ .../assets/presentation/start-presentation.sh | 24 +++ .../assets/presentation/stop-presentation.sh | 5 + 9 files changed, 369 insertions(+) create mode 100644 onboarding/media/onboarding-thumbnail.jpg create mode 100644 onboarding/package/DEBIAN/control create mode 100644 onboarding/package/assets/data/Slider.js create mode 100644 onboarding/package/assets/data/index.html create mode 100644 onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4 create mode 100644 onboarding/package/assets/data/slides/slides.js create mode 100644 onboarding/package/assets/data/styles.css create mode 100644 onboarding/package/assets/presentation/start-presentation.sh create mode 100644 onboarding/package/assets/presentation/stop-presentation.sh diff --git a/onboarding/media/onboarding-thumbnail.jpg b/onboarding/media/onboarding-thumbnail.jpg new file mode 100644 index 0000000..36522f7 --- /dev/null +++ b/onboarding/media/onboarding-thumbnail.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4656c13ba092b330cf03dc5e8544051307a83681f6dc7755d1fa4e8d33187d68 +size 19664 diff --git a/onboarding/package/DEBIAN/control b/onboarding/package/DEBIAN/control new file mode 100644 index 0000000..e9c7172 --- /dev/null +++ b/onboarding/package/DEBIAN/control @@ -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 + diff --git a/onboarding/package/assets/data/Slider.js b/onboarding/package/assets/data/Slider.js new file mode 100644 index 0000000..037e987 --- /dev/null +++ b/onboarding/package/assets/data/Slider.js @@ -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); + } + +} \ No newline at end of file diff --git a/onboarding/package/assets/data/index.html b/onboarding/package/assets/data/index.html new file mode 100644 index 0000000..99c466f --- /dev/null +++ b/onboarding/package/assets/data/index.html @@ -0,0 +1,66 @@ + + + + + + + Welcome to Tooloop OS + + + + + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4 b/onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4 new file mode 100644 index 0000000..076b836 --- /dev/null +++ b/onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:17b2639ace8a11e1233884ac20064e4a723266740a23c7ce2fe92f172f5d9f39 +size 5885065 diff --git a/onboarding/package/assets/data/slides/slides.js b/onboarding/package/assets/data/slides/slides.js new file mode 100644 index 0000000..c59113f --- /dev/null +++ b/onboarding/package/assets/data/slides/slides.js @@ -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." } +] \ No newline at end of file diff --git a/onboarding/package/assets/data/styles.css b/onboarding/package/assets/data/styles.css new file mode 100644 index 0000000..df8ba59 --- /dev/null +++ b/onboarding/package/assets/data/styles.css @@ -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; +} \ No newline at end of file diff --git a/onboarding/package/assets/presentation/start-presentation.sh b/onboarding/package/assets/presentation/start-presentation.sh new file mode 100644 index 0000000..337b93b --- /dev/null +++ b/onboarding/package/assets/presentation/start-presentation.sh @@ -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 \ No newline at end of file diff --git a/onboarding/package/assets/presentation/stop-presentation.sh b/onboarding/package/assets/presentation/stop-presentation.sh new file mode 100644 index 0000000..3ad6172 --- /dev/null +++ b/onboarding/package/assets/presentation/stop-presentation.sh @@ -0,0 +1,5 @@ +#!/bin/bash + +pkill chrome & + +exit 0