diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 000000000..e69de29bb diff --git a/archive/index.html b/archive/index.html new file mode 100644 index 000000000..542462562 --- /dev/null +++ b/archive/index.html @@ -0,0 +1,202 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Project Archive Overview +   +

+
+ +
+ + +

Explore the projects of previous semesters - or see + a complete archive overview.

+ + +
+ +
+ +

+ + + Complete Project Archive. + +

+
+ +
+
+ + + + + + + + + + + +

SUMMER SEMESTER 2024

+ + + +

BACHELOR SS24

+ + + + +

MASTER SS24

+ + + + + + +

WINTER SEMESTER 2023

+ + + +

WS23

+ + + + +

BACHELOR WS23

+ + + + +

MASTER WS23

+ + + + + + +
+ + + + + diff --git a/categories/index.html b/categories/index.html new file mode 100644 index 000000000..4c8e6329f --- /dev/null +++ b/categories/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +

Categories

+ + + + + + diff --git a/categories/index.xml b/categories/index.xml new file mode 100644 index 000000000..fb001a2e8 --- /dev/null +++ b/categories/index.xml @@ -0,0 +1,11 @@ + + + + Categories on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/categories/ + Recent content in Categories on IMI Showtime + Hugo + de-de + + + diff --git a/contact/index.html b/contact/index.html new file mode 100644 index 000000000..d75fe72a9 --- /dev/null +++ b/contact/index.html @@ -0,0 +1,121 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Contact + +

+
+
+

The IMIxShowtime is a showcase +of the term-long practical projects in the International Media and Computing +Bachelor’s and +Master’s programs. +It takes place every term on the Friday of the +last week of lectures.

+ +
+
+
+ +
+

Supervising Projects

+

+ If you are interested in supervising a project: Great! We are always looking for partners in industry for projects. +

+

+ Studiengangsprecher IMI - Prof. Dr. Barne Kleinen + barne.kleinen@htw-berlin.de +

+
+
+ +
+

Questions about IMI⨯ST

+

+ The Showtime is organized by the students themselves. The coordination team can be reached using this email: +

+

+ IMI⨯SHOWTIME Organisation + showtime-orga@lists.htw-berlin.de +

+
+
+ +
+ + + + + diff --git a/css/style.min.7dfda1a28d3bfb1292b2e58507440f977e4aa2b867c94abc10288874ef570805.css b/css/style.min.7dfda1a28d3bfb1292b2e58507440f977e4aa2b867c94abc10288874ef570805.css new file mode 100644 index 000000000..077dec8f0 --- /dev/null +++ b/css/style.min.7dfda1a28d3bfb1292b2e58507440f977e4aa2b867c94abc10288874ef570805.css @@ -0,0 +1 @@ +@charset "UTF-8";@font-face{src:url(https://JonasTrenkler.github.io/showtime-website/fonts/JetBrainsMono-Regular.woff2)format("woff2");font-family:jetbrains mono}@font-face{src:url(https://JonasTrenkler.github.io/showtime-website/fonts/JetBrainsMono-Italic.woff2)format("woff2");font-family:jetbrains mono;font-style:italic}@font-face{src:url(https://JonasTrenkler.github.io/showtime-website/fonts/JetBrainsMono-Light.woff2)format("woff2");font-family:jetbrains mono;font-weight:100 300}@font-face{src:url(https://JonasTrenkler.github.io/showtime-website/fonts/JetBrainsMono-Bold.woff2)format("woff2");font-family:jetbrains mono;font-weight:700}@font-face{src:url(https://JonasTrenkler.github.io/showtime-website/fonts/JetBrainsMono-ExtraBold.woff2)format("woff2");font-family:jetbrains mono;font-weight:800 900}*{box-sizing:border-box}html{font:14px/200% jetbrains mono;color:#3e2d4a;background-color:#fff6f6;scroll-behavior:smooth;transition:2s ease-in-out}html.roll{transform:rotate(360deg)}body{margin:0}h1{font-size:6rem;font-weight:900;color:#3e2d4a;text-transform:uppercase;margin:0;line-height:100%}h1 .underscore-spacer{display:block;font-weight:900;text-transform:inherit;line-height:100%}h3{color:#ff7578;font-weight:900;font-size:2.5rem;line-height:1.25;margin-top:0}h3::after{display:block;content:"_"}h3.no-underscore::after{display:none}h4{font-weight:900}a{color:#29d09f;text-decoration:none}a:visited{color:#0ad0a1}strong{font-weight:900}ul{list-style:none;margin:0;padding:0}img{max-width:100%}button{margin-top:2.5rem;background-color:#67ffd2;border:none;height:3rem;font-family:jetbrains mono;font-size:1.2rem;text-transform:uppercase;border-radius:1.5rem;padding-right:3rem;padding-left:3rem}button:hover{background-color:#29d09f}button:active{background-color:#1ca37b}.light{font-weight:100}.select-wrapper{background-color:#67ffd2;border-radius:5px;position:relative}.select-wrapper::after{content:"↓";display:inline;position:absolute;right:1.5rem;top:0;bottom:0;font-size:1.5rem;line-height:2.5;border-left:2px solid #fff6f6;padding-left:1.3rem;pointer-events:none}.select-wrapper select{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:none;background:0 0;font:inherit;text-transform:uppercase;padding:.8rem 1.2rem;width:100%;height:100%}nav{color:#fff6f6;background-color:#ff7578;padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;width:100%;z-index:1}nav>a{font-size:1.5rem}nav ul{display:flex}nav li{margin:0 1rem}nav li:last-of-type{margin-right:0}nav a,nav a:visited{color:inherit}nav a:hover{color:#fdfe83}nav input{display:none}footer{background-color:#ff7578;color:#fff6f6;padding:3rem;display:flex;flex-direction:column;margin-top:15rem}footer section{display:flex;justify-content:space-between}footer section>a{font-size:1.5rem}footer ul{list-style:none;padding:0;display:flex}footer li{margin:0 1rem}footer li:last-of-type{margin-right:0}footer a{color:inherit}footer a:visited{color:inherit}footer img{max-width:15rem;align-self:flex-end;margin-top:7rem}main,header{margin-left:16.66666667%;margin-right:16.66666667%}.home-content{padding-top:14rem}header{margin-top:14rem;margin-bottom:14rem;display:flex}header.project-header{margin-top:0;margin-bottom:0;padding:6rem 0}header.project-header .type{line-height:100%}header h1{flex:5;position:relative}header h1::after{content:"_";position:absolute;bottom:0;left:0}header .type{margin-bottom:1rem}header section{flex:3;position:relative;display:flex;flex-direction:column;vertical-align:bottom}header section p{padding-top:1rem}header section.underscore::before{content:"_";font-size:6rem;font-weight:900;color:#3e2d4a;line-height:1;margin-top:-5.5rem;position:absolute;right:0}header section p{margin-top:8rem;margin-bottom:0}hr{border:none;height:2px;background-color:#ff7578;position:relative}hr::after{display:block;content:"";height:10px;width:30px;background-color:#ff7578;position:absolute;bottom:0;right:0}hr.alternate:nth-of-type(even)::after{left:0}span.type{text-transform:uppercase;color:#ff7578;font-weight:100;font-size:1rem;display:block}span.type::after{content:" PROJECT"}.block{display:block}.spacer{flex:1}.gist{margin-left:37.5%}.background{background-color:#ff7578}.background.master{background-color:#3e2d4a;color:#ff7578}.background.master h1{color:inherit}.background.master a{color:#fff6f6}.background .type{color:inherit}.background-dark{background-color:#3e2d4a}.teaser{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:12rem}.teaser h3{width:37.5%;font-size:4rem}.teaser hr{margin-top:4rem;width:100%}.teaser div{width:50%}.teaser a{display:block;margin-top:2rem;text-transform:uppercase}.teaser:nth-child(even) h4,.teaser:nth-child(even) h3{text-align:right}.teaser:nth-child(even) div{order:1}.teaser:nth-child(even) h3{order:2}.teaser:nth-child(even) hr{order:3}.teaser:nth-child(even) hr::after{left:0}.category{text-transform:uppercase;color:#ff7578;font-weight:100;width:100%}.call-to-action{display:flex;flex-wrap:wrap;background-color:#ff7578}.call-to-action h3{margin:0;height:100%;width:37.5%;padding:3rem;color:#3e2d4a;font-size:3.5rem;text-transform:uppercase}.call-to-action div{width:62.5%;padding:3rem;text-align:center;background-color:#fdfe83}.call-to-action p{margin:0;text-align:left;font-size:1.5rem;line-height:200%}.start{background:#ff7578 0 repeat fixed url(/img/start-background.svg);height:100vh}.start .content{display:flex;flex-direction:column;justify-content:space-between;width:calc(4/6 * 100%);height:100%;margin:auto;padding-top:10rem}.start .content h1{font-size:5rem}.start .content p{margin-top:3rem;margin-left:.4rem;margin-bottom:0}.start .content .live{flex-direction:column;align-items:center}.start .content .live .keyvisual-live{width:calc(3/8 * 100%);margin-bottom:0;padding-top:4rem}.start .content .live h1{margin-top:4rem;text-align:center}.start .content .live div{margin-top:4rem;text-align:center}.start .content .live div::after{content:none}.start .content .live a{color:#fff6f6;margin:0 1rem}.start .content .live a:hover{color:#fdfe83}.start .content .live a button{margin-top:0}.start .content div{display:flex;justify-content:space-between;align-items:flex-end}.start .content div div{display:block;margin-top:0}.start .content div div::after{content:"_";font-size:5rem;font-weight:800}.start .content div:first-child img{width:calc(3/8 * 100%)}.start .content div:last-child{margin-bottom:3rem}.start .content div:last-child h1{padding-top:0;color:#fdfe83;text-align:right}.start .deco-01{position:absolute;left:calc(1/12 * 100%);top:25vh}.start .deco-02{position:absolute;right:calc(1/12 * 100%);top:75vh}.projects-list-entry{display:flex;justify-content:space-between;margin:15rem 0 7rem}.projects-list-entry:first-of-type{margin-top:8rem}.projects-list-entry p{margin:4rem 0 2rem}.projects-list-entry a{text-transform:uppercase}.projects-list-entry img{width:37.5%;height:auto;align-self:center;margin-left:12.5%;box-shadow:10px 10px #3e2d4a}.projects-list-entry:nth-of-type(even){flex-direction:row-reverse}.projects-list-entry:nth-of-type(even) img{margin-left:0;margin-right:12.5%}.project-menu{position:sticky;z-index:1;top:5rem;margin-bottom:8rem}.project-menu ul{margin:0 16.66666667%;display:flex}.project-menu li{padding:.5rem 1.2rem;white-space:nowrap}.project-menu li a{color:#fff6f6}.project-menu li.active{background:#fff6f6}.project-menu li.active a{color:#3e2d4a}.mobile-menu{display:none}.project>*:first-child{margin-top:0}.project .project-link{display:inline-flex;align-items:center;text-transform:uppercase;text-decoration:none;margin:0 4rem 3rem 0}.project .project-link:last-of-type{margin-right:0}.project .project-link img{margin-right:1rem}.project .intro,.project blockquote{font-size:2rem;line-height:1.666;color:#ff7578}.project .intro{margin-left:0;margin-bottom:6rem}.project>p{margin:2rem 0 2rem 37.5%}.project a{text-decoration:underline}.project ul{list-style:none;margin:0}.project ul li{margin-left:2rem;margin-top:.5rem}.project ul li::before{content:"-> ";color:#ff7578;margin-left:-2rem}.project section,.project figure,.project .mediathek-embed{margin:6rem 0}.project section{display:flex}.project section h3{flex:2}.project section .content{flex:5}.project section .content p:first-of-type{margin-top:0}.project section .content p:last-of-type{margin-bottom:0}.project blockquote{font-style:italic;margin:0 12.5% 0 25%}.project .mediathek-embed .mediathek-player{position:relative}.project .mediathek-embed .mediathek-player img{display:block;width:100%;height:auto}.project .mediathek-embed .mediathek-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}.project figure figcaption{margin-top:1rem;color:#ff7578;text-align:right;text-transform:uppercase}.project figure img{display:block;margin:0 auto}.project figure img+figcaption{margin-left:37.5%;text-align:left}.project .gallery{display:flex;flex-wrap:wrap;justify-content:center}.project .gallery figure{width:33.33333333%;padding:0 4rem;margin:0 0 6rem}.project .gallery figure figcaption{margin:1rem 0 0;text-align:center}.project .gallery figure.team-member img{border-radius:50%}.project .gallery figure.team-member figcaption{text-transform:none;font-weight:700}.project .infobox{border:.3rem solid #ff7578;padding:1.5rem}.schedule>section ul>li{display:flex;margin-top:1rem}.schedule>section ul>li p{padding-top:.4rem;width:12.5%}.schedule>section ul>li div{flex-grow:2;display:flex;justify-content:space-between;flex-direction:column;box-sizing:border-box;min-height:8rem;padding:1rem;width:87.5%}.schedule>section ul>li div h3{margin:0 0 1rem;font-size:1.6rem}.schedule>section ul>li div a{color:#fff6f6;text-transform:uppercase;line-height:100%}.schedule>section ul>li div a:hover{color:#fdfe83}.schedule>section ul>li .general{border-top:#ff7578 2px solid;background-color:rgba(255,117,120,.1)}.schedule>section ul>li .bachelor{border-top:#3e2d4a 2px solid;background-color:#ff7578}.schedule>section ul>li .bachelor h3{color:#3e2d4a}.schedule>section ul>li .master{color:#ff7578;border-top:#ff7578 2px solid;background-color:#3e2d4a}.dates>section{display:flex;margin:3rem 0}.dates>section div:first-of-type{flex:3}.dates>section div:last-of-type{flex:5;color:#ff7578}.dates>section div:last-of-type h3{margin-top:0;margin-bottom:1rem}.contacts>section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:3rem 0}.contacts>section h3{margin-top:0;margin-bottom:1rem;width:100%}.contacts>section p{margin:0}.contacts>section p:first-of-type{color:#ff7578;width:50%}.contacts>section p:last-of-type{width:37.5%;font-weight:900;position:relative}.contacts>section p:last-of-type::before{content:"->";position:absolute;left:-2rem}.contacts>section a{display:block;font-weight:400}@media(max-width:576px){main,header,.project-menu ul{margin-left:5.55555556%;margin-right:5.55555556%}h1{font-size:3rem}h3{font-size:2rem}nav{padding:1rem 5.55555556%;flex-wrap:wrap}nav ul{width:100%;display:block;overflow:hidden;height:0;transition:height .3s cubic-bezier(.37,0,.63,1)}nav ul li{text-align:right;font-size:1.1rem;line-height:350%;margin:1rem 0 0;border-bottom:2px solid #fff6f6}nav ul li:first-of-type{margin-top:2rem}nav ul li::after{display:block;content:"";height:8px;width:30px;background-color:#fff6f6;position:relative;bottom:0;left:0;z-index:99}nav label{cursor:pointer;padding:3px 0;user-select:none}nav label span{background:#fff6f6;display:block;height:2px;position:relative;width:16px;transition:background .2s ease-out}nav label span::before,nav label span::after{background:#fff6f6;content:'';display:block;height:100%;width:100%;position:absolute;transition:all .2s ease-out}nav label span::before{top:-5px}nav label span::after{top:5px}nav input:checked~ul{height:100vh}nav input:checked~label>span{background:0 0}nav input:checked~label>span::before{transform:rotate(-45deg);top:0}nav input:checked~label>span::after{transform:rotate(45deg);top:0}.home-content{padding-top:5rem}header{display:block;margin-top:8rem;margin-bottom:5rem}header section{display:block}header section.underscore::before{content:""}header section p{margin-top:3rem}footer{margin-top:5.55555556%;padding:5.55555556%}footer ul{display:block}footer ul li{text-align:right;margin-right:0;margin-bottom:.5rem}.start{background-image:none}.start .content{display:block;width:auto;margin-left:5.55555556%;margin-right:5.55555556%;padding-top:6rem}.start .content .live{flex-direction:column;align-items:center}.start .content .live .keyvisual-live{width:calc(6/8 * 100%)}.start .content .live h1{padding-top:0;text-align:center}.start .content .live a{display:block}.start .content .live div:last-child{margin-top:4rem;width:100%;position:relative;bottom:auto}.start .content h1{font-size:2.5rem}.start .content div:first-child{display:block;margin:0}.start .content div:first-child div:after{content:""}.start .content div:first-child img{display:block;width:90%;margin:2rem auto}.start .content div:last-child{width:88.88888889%;position:absolute;bottom:2rem;margin:0}.start .content div:last-child a{height:5rem}.start .content div:last-child a img{height:100%}.start .content p{margin-top:1rem;margin-left:0}.start .deco-01,.start .deco-02{display:none}.teaser{display:block;margin-bottom:3rem}.teaser h3,.teaser p{width:auto}.teaser h3{font-size:2rem}.teaser hr{margin-top:3rem;margin-bottom:0}.teaser div{width:auto}.teaser:nth-child(even) h4,.teaser:nth-child(even) h3{text-align:inherit}.teaser:nth-child(even) hr::after{left:auto}.call-to-action{display:block}.call-to-action h3,.call-to-action div{padding:5.55555556%}.call-to-action h3{width:auto;font-size:2.5rem}.call-to-action div{width:auto}.call-to-action p{font-size:1rem}.schedule>section ul>li{display:block}.schedule>section ul>li div{width:inherit}.dates>section{display:block}.dates>section div:last-of-type h3{margin-top:.5rem}.contacts>section{display:block}.contacts>section p,.contacts>section p:last-of-type,.contacts>section p:first-of-type{width:auto}.contacts>section p:last-of-type{margin-top:2rem;margin-left:2rem}.projects-list-entry{display:block;margin-top:4rem;margin-bottom:5rem}.projects-list-entry:first-of-type{margin-top:0}.projects-list-entry p{margin-top:2rem}.projects-list-entry img{margin-top:2rem;margin-left:0;width:100%}.project .intro,.project blockquote{font-size:1.5rem;line-height:1.666}.project section,.project figure,.project .mediathek-embed{margin:4rem 0}.project .intro{margin-bottom:4rem}.project section{display:block}.project blockquote{margin:0}.project p{margin:2rem 0}.project figure img+figcaption{margin-left:0}.project .gist{margin-left:0}.project .gallery figure.team-member{width:60%;padding:0;margin-bottom:3rem}.project .project-link{display:flex;margin-bottom:1rem}.project .project-link img{width:3rem}.project .project-link:last-of-type{margin-bottom:4rem}.project-menu{top:4rem;margin-bottom:6rem}.desktop-menu{display:none}.mobile-menu{display:flex;align-items:center;justify-content:space-between}.mobile-menu input{display:none}.mobile-menu input:checked~.dropdown-menu{display:block}.mobile-menu label{cursor:pointer;padding:10px 5.55555556%;user-select:none}.mobile-menu label span{background:#fff6f6;display:block;height:4px;width:4px;border-radius:50%;position:relative;transition:background .2s ease-out}.mobile-menu label span::before,.mobile-menu label span::after{background:#fff6f6;content:'';display:block;height:100%;width:100%;border-radius:50%;position:absolute;transition:all .2s ease-out}.mobile-menu label span::before{top:-6px}.mobile-menu label span::after{top:6px}.mobile-menu .dropdown-menu{display:none;position:absolute;top:2.5rem;right:1rem;width:50%;padding:.5rem 0;background-color:#fff6f6}.mobile-menu .dropdown-menu ul{display:flex;flex-direction:column;text-align:right;margin:0}.mobile-menu .dropdown-menu ul li{width:100%;padding:.5rem 1.5rem}.mobile-menu .dropdown-menu a{color:#29d09f}.mobile-menu.bachelor .dropdown-menu{border:1px solid #ff7578}.mobile-menu.bachelor .dropdown-menu li a{color:#ff7578}.mobile-menu.bachelor .dropdown-menu li.active{background-color:#ff7578}.mobile-menu.bachelor .dropdown-menu li.active a{color:#fff6f6}.mobile-menu.master .dropdown-menu{border:1px solid #3e2d4a}.mobile-menu.master .dropdown-menu li a{color:#3e2d4a}.mobile-menu.master .dropdown-menu li.active{background-color:#3e2d4a}.mobile-menu.master .dropdown-menu li.active a{color:#ff7578}}.warn{color:#fdfe83;font-weight:700;font-size:2rem}.warn.small{font-size:1rem} \ No newline at end of file diff --git a/dates/index.html b/dates/index.html new file mode 100644 index 000000000..bfea43823 --- /dev/null +++ b/dates/index.html @@ -0,0 +1,128 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Important Dates +   +

+
+
+

After Showtime is just before the next Showtime - upcoming events:

+ +
+
+
+ +
+
2024-08-02, 10:00-16:00
+
+

IMI Showtime Summer 24

+ Friday, August 2, 2024 +
+
+
+ +
+
TBA via IMI-FAQs, usually on the first Wednesday afternoon
+
+

Bachelor's Project Signup for Winter 24/25

+ (Projektvergabe) TBA +
+
+
+ +
+
TBA
+
+

Master's Project Signup for Winter 24/25

+ TBA +
+
+
+ +
+
2024-08-02, 10:00-16:00
+
+

IMI Showtime Winter 24

+ Friday, February 7, 2025 +
+
+
+ +
+ + + + + diff --git a/fonts/JetBrainsMono-Bold.woff2 b/fonts/JetBrainsMono-Bold.woff2 new file mode 100644 index 000000000..07fe5d757 Binary files /dev/null and b/fonts/JetBrainsMono-Bold.woff2 differ diff --git a/fonts/JetBrainsMono-ExtraBold.woff2 b/fonts/JetBrainsMono-ExtraBold.woff2 new file mode 100644 index 000000000..9ba04e646 Binary files /dev/null and b/fonts/JetBrainsMono-ExtraBold.woff2 differ diff --git a/fonts/JetBrainsMono-Italic.woff2 b/fonts/JetBrainsMono-Italic.woff2 new file mode 100644 index 000000000..cf9e8ef7b Binary files /dev/null and b/fonts/JetBrainsMono-Italic.woff2 differ diff --git a/fonts/JetBrainsMono-Light.woff2 b/fonts/JetBrainsMono-Light.woff2 new file mode 100644 index 000000000..a456787c5 Binary files /dev/null and b/fonts/JetBrainsMono-Light.woff2 differ diff --git a/fonts/JetBrainsMono-Regular.woff2 b/fonts/JetBrainsMono-Regular.woff2 new file mode 100644 index 000000000..cc9a1ae35 Binary files /dev/null and b/fonts/JetBrainsMono-Regular.woff2 differ diff --git a/img/16x9.png b/img/16x9.png new file mode 100644 index 000000000..87572b339 Binary files /dev/null and b/img/16x9.png differ diff --git a/img/arrow-down.svg b/img/arrow-down.svg new file mode 100644 index 000000000..1961d3912 --- /dev/null +++ b/img/arrow-down.svg @@ -0,0 +1,9 @@ + + + -> + + + + + + \ No newline at end of file diff --git a/img/code.svg b/img/code.svg new file mode 100644 index 000000000..b8d7e91cd --- /dev/null +++ b/img/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/deco-rect-01.svg b/img/deco-rect-01.svg new file mode 100644 index 000000000..f8f5a73eb --- /dev/null +++ b/img/deco-rect-01.svg @@ -0,0 +1,12 @@ + + + deco_rect_01 + + + + + + + + + \ No newline at end of file diff --git a/img/deco-rect-02.svg b/img/deco-rect-02.svg new file mode 100644 index 000000000..7f7f733f4 --- /dev/null +++ b/img/deco-rect-02.svg @@ -0,0 +1,14 @@ + + + deco_rect_02 + + + + + + + + + + + \ No newline at end of file diff --git a/img/demo.svg b/img/demo.svg new file mode 100644 index 000000000..535a90008 --- /dev/null +++ b/img/demo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/diagonal.svg b/img/diagonal.svg new file mode 100644 index 000000000..0ec81068a --- /dev/null +++ b/img/diagonal.svg @@ -0,0 +1,9 @@ + + + Line + + + + + + \ No newline at end of file diff --git a/img/htw-logo.png b/img/htw-logo.png new file mode 100644 index 000000000..bae6a4508 Binary files /dev/null and b/img/htw-logo.png differ diff --git a/img/showtime-keyvisual-live.svg b/img/showtime-keyvisual-live.svg new file mode 100644 index 000000000..97453ef7b --- /dev/null +++ b/img/showtime-keyvisual-live.svg @@ -0,0 +1,27 @@ + + + Group + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/showtime-keyvisual.svg b/img/showtime-keyvisual.svg new file mode 100644 index 000000000..0ab0e123e --- /dev/null +++ b/img/showtime-keyvisual.svg @@ -0,0 +1,31 @@ + + + Keyvisual + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/start-background.svg b/img/start-background.svg new file mode 100644 index 000000000..77fe618a1 --- /dev/null +++ b/img/start-background.svg @@ -0,0 +1,17 @@ + + + Home Copy 3 + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/website.svg b/img/website.svg new file mode 100644 index 000000000..28c256f0c --- /dev/null +++ b/img/website.svg @@ -0,0 +1,3 @@ + + + diff --git a/imprint/index.html b/imprint/index.html new file mode 100644 index 000000000..6c9af0290 --- /dev/null +++ b/imprint/index.html @@ -0,0 +1,114 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Imprint +   +

+
+ +
+
+
+

Diese Seite präsentiert Praxisprojekte der Studiengänge Internationale Medieninformatik Bachelor und Internationale Medieninformatik Master der HTW Berlin und ergänzt diese Webseiten.

+

Redaktionelle Verantwortung und verantwortliche Ansprechperson

+

Studiengangssprecher der Studiengänge Internationale Medieninformatik (Bachelor & Master)

+

Prof. Dr. Barne Kleinen
+HTW Berlin, Fachbereich 4
+Wilhelminenhofstr. 75A
+12495 Berlin

+

barne.kleinen#64;htw-berlin.de

+

https://www.htw-berlin.de/impressum/

+

Telefon: +49 30 5019 - 3738

+

Urheberschutz und Nutzung

+

Die Urheber räumen Ihnen ganz konkret das Nutzungsrecht ein, sich eine private Kopie für persönliche Zwecke anzufertigen. Nicht berechtigt sind Sie dagegen, die Materialien zu verändern und/oder weiter zu geben oder gar selbst zu veröffentlichen. Wenn nicht ausdrücklich anders vermerkt, liegen die Urheberrechte für Texte bei den Studierenden.

+

Datenschutzerklärung

+

Vielen Dank für Ihr Interesse an unserer Hochschule. Der Schutz Ihrer Daten ist uns ein wichtiges Anliegen. Deshalb verarbeiten wir die Daten, die Sie beim Besuch auf unseren Webseiten hinterlassen, nur nach den Vorgaben der relevanten datenschutzrechtlichen Bestimmungen, insbesondere der Datenschutzgrundverordnung und des Bundesdatenschutzgesetzes. Unter https://www.htw-berlin.de/datenschutz/ erfahren Sie mehr.

+

Keine Haftung

+

Die Inhalte dieses Webprojektes wurden sorgfältig geprüft und nach bestem Wissen erstellt. Aber für die hier dargebotenen Informationen wird kein Anspruch auf Vollständigkeit, Aktualität, Qualität oder Richtigkeit erhoben. Es kann keine Verantwortung für Schäden übernommen werden, die durch das Vertrauen auf die Inhalte dieser Website oder deren Gebrauch entstehen.

+

Schutzrechtsverletzung

+

Falls Sie vermuten, dass von dieser Website aus eines Ihrer Schutzrechte verletzt wird, teilen Sie das bitte umgehend per elektronischer Post an gefei.zhang@htw-berlin.de mit, damit zügig Abhilfe geschafft werden kann. Bitte nehmen Sie zur Kenntnis: Die zeitaufwändigere Einschaltung eines Anwaltes zur für den Diensteanbieter kostenpflichtigen Abmahnung entspricht nicht dessen wirklichen oder mutmaßlichen Willen.

+

Anmerkungen

+

Theme-Design: Tobi Hoffmann
+Theme-Development: Luis Hankel

+

Die Icons demo, code und website auf den Projektseiten sind aus dem Material-Design-Projekt entnommen und unter der Apache License 2.0 lizensiert.

+

Die auf der Website verwendete Schriftfamilie JetBrains Mono ist unter der Open Font License lizensiert.

+

Copyright (c) 2021: Some rights reserved CC-BY-NC-SA

+ +
+ + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..92a3951fe --- /dev/null +++ b/index.html @@ -0,0 +1,196 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+ decorative element + decorative element +
+ +
+
+

+ IMI×Showtime
+ + + + + + + summer + + + + + + 2024 + + + +

+

+ + Projects showcase
+ + + + + + + Summer semester + + + + + + 2024 + + + +

+ International Media and Computing B/M
+ HTW Berlin +

+
+ IMI-Showtime keyvisual +
+ +
+ arrow down + +

+ _
+ + + save the date!!
+ 02/08/2024
+ WH H001 +

+ +
+
+
+
+
+ + + + + + +
+

about showtime

+

Project Fair & Presentations

+
+ The Bachelor and Master students of the International Media and Computing Study Programs present their Practice Projects with presentations and a Project Fair. +It’ll be great to see you on 02/08/2024 at 10:00 am for the presentations or between 12:00 and 15:00 for the fair in Room H001 on our Campus Wilhelminenhof! +-> check_the_schedule +
+
+
+ + + + + + + +
+

projects

+

One Term Ten Projects

+
+ During their studies, each Bachelor student needs to do one, each Master student two practical projects. This term, we are happy to present six projects in the Bachelor’s and four in the Master’s program. +-> discover_the_projects +
+
+
+ + +
+

Work with
our students

+
+

+ We’re always looking for new exciting partners for new projects. + Browse through the current projects + or former ones in the archive to get an idea + what might be possible. +

+ +
+
+
+
+ + + + + diff --git a/index.xml b/index.xml new file mode 100644 index 000000000..f65ee1ac5 --- /dev/null +++ b/index.xml @@ -0,0 +1,410 @@ + + + + IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ + Recent content on IMI Showtime + Hugo + de-de + + + Challanges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/challanges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/challanges/ + Ideation Struggles The extensive ideation phase challenged the team as each member brought different perspectives, which led to difficulties in agreeing on a unified vision for mov.io. Uncertainty about the most appropriate technology required thorough research to make an informed decision. In addition, each team member brought unique insights, requiring additional effort to synthesize ideas and define key features, which impacted the initial stages of project build. Learning Curve of New Technologies Incorporating a range of new technologies, each assigned to a specific team member, presented a multi-faceted challenge. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/features/ + Features Visualisation through Charts Each Key existing in the documents of your collection receives their own chart window. In it, all the values of that key from the documents will be displayed in an aggregated way. Depending on the type of the key that aggregation may be in form of a pie chart, bar chart or list. That gives you a quick overview of the existing values and their occurrences. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/features/ + Dos And Don&#39;ts Guide Introducing our Dos and Don&rsquo;ts Guide: a specialized feature designed exclusively for parents in the Hypno Buddy app. This guide, created by therapists and linked directly to the patient, offers practical tips for daily life, categorizing advice to address common challenges. Unlike resources for children, parents access personalized recommendations, ensuring relevance to their unique situation. The feature, derived from therapist interviews, reflects a concise suggestion to enhance the overall effectiveness of the therapeutic process. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/features/ + Features Keyword extraction: Moodle Course: By reading keywords from course names, course descriptions and keywords added by the educators we remove common words, which are stored in a blacklist, such as &ldquo;a,&rdquo; &ldquo;an,&rdquo; etc. (Functionality and blacklist sourced from beliefmedia.com). SmartLibrary constructs SQL queries from the extracted keywords to read material names and links associated with the keywords from the database. Crawler: We built a crawler which can extract learning material names and keywords from the HTML code of websites such as Coursera. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/features/ + Communication Wi-Fi To ensure that our hardware can communicate smoothly in the same network, we use a Raspberry Pi as a WLAN hotspot. This ensures an uninterrupted connection and enables our devices to work together optimally. MQTT Communication takes place via MQTT, an open network protocol for machine-to-machine communication. The Arduino uses the MQTT protocol to send messages to the Raspberry Pi, which acts as an MQTT broker. At the same time, the HoloLens glasses subscribe to these messages to receive real-time information. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/features/ + Efficient automated semester planning With just a few clicks, faculty staff can effortlessly generate a complete schedule for each course of study throughout the entire semester. Taking into account factors from module duration and rhythm to teacher&rsquo;s mandatory events, availability, and preferences, LEP utilizes Timefold to makes sure everything fits together well, making planning simple and hassle-free. Role-Based UI for seamless collaboration Say goodbye to mailing back and forth spreadsheets! + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/features/ + Interactive WebApp Engaging Virtual Collaboration Step into a world of seamless collaboration with our Interactive Web - App, an engaging and responsive platform designed to facilitate user interaction in a virtual environment. Our focus is on creating a dynamic space that encourages effortless collaboration and enhances the overall user experience. Virtual Office Replicating Physical Office Online Bring the essence of a physical office into the digital realm with our Virtual Office. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/future/ + As we look to the future of mov.io, our vision goes beyond a simple virtual office platform - we envision a dynamic and customisable ecosystem that truly adapts to the individual preferences and needs of our users. Unleash personalisation A key aspect of our future plans revolves around providing users with an unprecedented level of customisation. Imagine having the freedom to design and personalize your virtual office space, from room layout to overall aesthetics. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/process/ + Process Since our project had a lot do to with displaying data so it&rsquo;s easy to understand, we first created a concept of what our application should look like in Figma. The user should be able to navigate the interface easily, without immediately being overwhelmed. To do that, we decided that the application should have a simple login interface and once logged in, the user should be presented with only the necessary options first, navigating deeper into the interface as needed. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/process/ + Organization The project began with a kick-off meeting in which the basic project idea was explained and requirements defined. We also immediately set weekly meeting times that fit into everyone&rsquo;s schedule. In the weeks that followed, we collected ideas for implementation and entered them as issues in our issue tracker, set up the individual parts of the project and started implementing solutions. In the weekly meetings, we informed each other about the project status and discussed our next steps. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/process/ + Initial Meetings Discussed the project with the product owners to identify the core problem related to water scarcity in Brandenburg. Received relevant documents from Rebecca for further understanding. Communication and Iteration We engaged in back-and-forth communication with product owners to refine the project details every week. Flow Charts Developed flow charts to map out the game. Then we created initial prototypes and designs using Figma to visualize the project. Programming We programmed mostly in Unity. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/process/ + Research At the start of our development journey, we devoted a significant amount of time to in-depth research. Our goal? To get inside the user&rsquo;s world, to understand the challenges they face on a daily basis, whether in a traditional office or in the rapidly evolving landscape of remote working. We dug deep to uncover the pros and cons and shed light on the finer details of their working environment. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/techstack/ + Communication Discord Zoom Planning Notion Figma Programming Visual Studio Code React NextJS ExpressJS GitHub Utility MongoDB Docker Image Sources https://es.logodownload.org/discord-logo/ https://es.logodownload.org/zoom-logo/ https://logos-download.com/40130-notion-app-logo-download.html https://es.logodownload.org/?s=figma https://logospng.org/logo-visual-studio-code/ https://logos-download.com/9747-react-logo-download.html https://creazilla.com/nodes/3244252-nextjs-icon https://www.mementotech.in/nodejs-development-company-rajkot.html https://logodix.com/github-resume https://www.kindpng.com/imgv/hhJbRxJ_mongodb-logo-png-transparent-png/ https://iconduck.com/icons/94225/docker-icon + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ + Project Management In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily. To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/ + Project Management In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily. To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/techstack/ + Projektmanagement Miro Github Discord Zoom Whatsapp Design / Styling Figma SCSS &amp; CSS Bootstrap Frontend TypeScript React Vite Backend NodeJS Express JS TypeScript Mongo DB Passport JS DevOps &amp; Deployment Docker Github Actions Jest (Unit Testing) Cypress (End-to-End Tests) Firebase Terraform Google Cloud Platform + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/technology/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/technology/ + Organisation and Communication We used Mattermost for our internal communication and for issue tracking. Mattermost Development HoloLens To develop the AR/XR App that is running on the HoloLens 2 we used Visual Studio (Code) and Unity with MRTK2. Programming Language: C# Raspberry The Raspberry Pi runs the Debian Raspberry Distribution and is the communication middleware. It serves as the MQTT broker and the Wi-Fi hotspot that the Arduino and HoloLens connect too. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/techstack/ + Tech Stack For this project we used mainly the Unity Engine to develop the game. Other programs that we used were Figma,Photoshop. Sometimes we had to use Blender as well. Coding was done in Rider or Visual Studio. Music was produced with Fl Studo and Garageband. Discord and Zoom were used for communication. Tech Stack + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/techstack/ + Organization GitLab NX Gather.town Figma &amp; FigJam Zoom Frontend Vue3 Nuxt3 TailwindCSS PhaserJS WebRTC Backend Express Socket.IO MongoDB + + + Terminology + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/terminology/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/terminology/ + Terminology Even though we&rsquo;ve spent a lot of time working with extended reality, we sometimes find ourselves questioning the precise terms used in this field. So, we thought it couldn&rsquo;t be different for you and decided to create a brief guide to some of the most frequently used terms in the world of XR: Virtual Reality (VR) Virtual Reality is a fully immersive digital environment where the user is completely surrounded by a computer-generated world. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/ + Getting to Grips with Unity Our journey into game development kicked off with Unity, and it was a learning curve. Understanding the ropes of this platform required time and effort, especially as we shifted from conventional programming mindsets. Yet, the more we dived in, the more we discovered Unity&rsquo;s flexibility and the wealth of pre-packaged tools it offered, turning our initial challenges into stepping stones for growth. Mastering Multitouch In our quest to make games accessible to mobile players, we encountered the challenge of implementing multitouch functionality. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/future/ + Future Our project is very open and creates a basis for extended reality. You can consider incorporating new interactions, such as switches or touch panels, or changing the platform and running the project on a tablet or VR glasses. New use cases can also be devised and tested. This project could be used very well in industry for maintenance work on machines and establish communication from the machine to the goggles. + + + Gameplay + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/ + Bringing Bobola to Life It all started with a sweet idea - a cute main character, and you, the player, saving it. No time to waste, so we jumped into Unity, made our main character, Bobola, and got into coding. Urgency was our guide to keep things moving. Bobola&#39;s Story To make the game more engaging, we introduced falling objects to save Bobola. Originally, we planned to use coconuts, but we stumbled upon spike shields in the Unity Asset Store. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/process/ + Our development journey can be broken down into distinct phases, each contributing to the evolution of our vision. Let&rsquo;s explore the key milestones that shaped our project from its inception to the current stage. Preparation: Setting the Foundation Before diving into the technicalities, our team initiated the project by agreeing on a concrete problem within the realm of therapy that we aimed to solve. We defined major responsibilities, sharing our preferences and experiences to foster effective collaboration. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/process/ + Process We dedicated initial time to conceptualising the idea for the plugin, exploring its potential impact and benefits. This involved learning from Moodle Academy about building Moodle plugins and creating first drafts to outline key functionalities. With a clearer vision, we strategically divided the overall idea into smaller, manageable tasks. Each task was designed to contribute to the overarching goal of the plugin. Adopting agile methodologies, we embraced a collaborative and iterative approach. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/process/ + Collecting ideas At the beginning of our project, we had a clear goal in mind: to create a game using the Meta Quest 3 headsets provided by HTW, with a focus on multiplayer elements and mixed reality features. To get our project off the ground, we started with some hands-on exploration. We tested various games that were compatible with the Quest 3, and we even took a trip to Cosmic. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/process/ + Research In the project&rsquo;s initial phase, we conducted thorough research to establish a robust foundation for our web application. This involved exploring diverse technology stacks, evaluating programming languages, databases, and frameworks. We studied similar applications for inspiration and best practices. The implementation of timetable and schedule-solving algorithms was a key focus, with a careful assessment of existing solutions. We directly engaged with the planning team, gaining insights into manual planning methods and specific requirements. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/challenges/ + UX-UI Design In the initial stages of development, one key challenge our team faced was designing a user interface (UI) that effectively accommodates the input of constraints and preferences from teachers. None of us is a professional UX-UI designer, therefore, creating an appealing and simple UI for admin or teachers to specify their requirements posed a significant hurdle, as it required striking a balance between complexity and user-friendliness. We undertook several brainstorming sessions ensuring that the UI could be used efficiently without overwhelming the user. + + + Gameplay + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/gameplay/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/gameplay/ + Put your headset on and enter another world Pop on the Meta Quest headset and jump into a different world that&rsquo;s full of fun and surprises. You&rsquo;ll find yourself surronded by a virtual forest behind your own walls where you can explore, discover, and just have a good time with your friends. It&rsquo;s not just about playing; it&rsquo;s about stepping into a whole new place that feels as real as your sourroundings. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/techstack/ + Tech Stack Our tech stack consists of the following tools &amp; technologies: + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/challenges/ + Integrating Meta SDKs with Unity Integrating the Meta XR All-in-One SDK from Oculus wasn&rsquo;t as seamless as we hoped it would be. The setup process for this package was complex and sometimes inconsistent. We were required to adhere to a strict implementation with limited flexibility for customization. Additionally, the SDK tends to generate a lot of debug messages in the console, which are often unnecessary and can hide more critical information. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/future/ + Future NLP Integration: As part of our ongoing development, we are planning to extract keywords from learning materials on Moodle by converting PDF Files with educator’s learning materials into searchable text using a PDF Reader Library. Subsequently, we analyse the text for keywords using Natural Language Processing. This comprehensive approach ensures that the SmartLibrary plugin not only remains cutting-edge but also addresses diverse content formats, including PDF materials. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/techstack/ + App Development Java &amp; Spring Boot The backbone of our back-end, chosen for its powerful suite of features that simplify the development of stand-alone applications with minimal configuration. MongoDB Our NoSQL database of choice, allowing for flexible data schema and efficient, scalable storage of application data. TimeFold Integrated as the core engine for intelligent and automated scheduling, ensuring optimal allocation of resources and efficient timetabling. ReactJS &amp; TypeScript Our core frontend framework, enabling us to build a dynamic, interactive user interface with type-checking for a reliable and scalable application. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/future/ + Consideration of further Rhythm Types In our current version, we&rsquo;ve handled regulations dealing with the most common rhythms, ensuring LEP factors in weekly and biweekly module planning for time collisions as well as special constraints. We understand that exceptions, demand more consideration and code restructuring in future to enhance adaptability. Especially one-time events like introductions at the start of semester have to be handled differently as well as unique faculty-specific rhythms like 3x6, where the module starts slightly delayed in the semester, initially five times every two weeks and then ends on a single day during the penultimate month of the semester. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/future/ + Future Prospect: Add visualisation of biodiversity aspects Further development of different levels Improvement of tile influence algorithm Further implementation of localization Gameplay improvement Where we’re at: Currently, Gaming for Future only contains one level for presentation purpose Algorithm for influence of each biome tile is developed Achieved our goal, which is to emphasize the crucial issue of water scarcity E-Mail collector is implemented Available only in 2 languages + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/tech-stack/ + VR Headsets Oculus We used the Meta Quest 3 VR headsets and the Oculus software with Unity for running and testing our application. Game Engine Unity Unity provided the core framework for developing our game, offering both 2D and 3D capabilities essential for our project. Networking Photon Fusion 2 We chose Photon Fusion 2 for its handling capabilities of multiplayer game synchronization and networking. XR Interactions Meta XR All-in-One SDK The Meta XR All-in-One SDK was our key asset for implementing immersive XR interactions in our game. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/future/ + Further Potential of our Game During the initial stages of our game development, we brainstormed numerous ideas that, due to the fact that we spent a lot of time working on the colocation, couldn&rsquo;t be realized in the current version. This section highlights some of these concepts to showcase the underlying potential and future directions our game could take. Collecting upgrades and special skills One idea we have is to introduce a system where players can collect upgrades and special skills throughout the game. + + + Process + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/process/ + Process Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Process + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/process/ + Process Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Features + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/features/ + Features Roles Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Game-Flow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Voting Systems Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Features + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/features/ + Features Roles Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Game-Flow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Voting Systems Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/techstack/ + Tech Stack Hugo offers a couple of options to include diagrams right in the source code, see https://gohugo.io/content-management/diagrams/ Here&rsquo;s a mermaid example: (note the hasMermaid = true parameter in the front matter!) classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Future Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/techstack/ + Tech Stack Hugo offers a couple of options to include diagrams right in the source code, see https://gohugo.io/content-management/diagrams/ Here&rsquo;s a mermaid example: (note the hasMermaid = true parameter in the front matter!) classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Future &amp; A M S i o i q f b B x u j o e a ( - x d r a &gt; e f R &gt; c o C n u o b ( n r ) ) d n e e J d r o s i n N o R D t o i u a a n g d d l o i t n e D i a g o n a l s C V u e r r v t e i d c a l n o t A N C : o u l d r r i A a / I v n s i n e e h s t d - e - t r l B i h i i s i o n ' s r e q n . + + + ws23 + https://JonasTrenkler.github.io/showtime-website/ws23/debug/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/debug/ + + + + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/review/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/review/ + Für alle Projekte: bitte überprüfen, ob alle Bilddateien notwendig sind und sich nicht doch noch verkleinern lassen. (und es ggfs. Auch tun) die Texte nochmal durchgehen und straffen. Bei Team reicht z.B. wir waren 5 IMI-Master: Namen und Bilder. (evtl. Noch Aufteilung von Verantwortlichkeiten, wenn Sie nicht woanders stehen) M4 Sehr schöne Seite! Dateigrössen alles ok. wenn Sie wollen, könnten Sie prüfen, ob sich die Größe der Bilder weiter reduzieren lässt, z. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/challenges/ + Challenges: User Management: Balancing Complexity and Simplicity The intricacies of managing users across three categories—therapists, patients, and parents—demanded a delicate balance. Based on therapists&rsquo; recommendations, we opted to allow patients and parents to share the same account, simplifying the user experience. However, creating a secure yet straightforward connection between therapists and patients posed a unique challenge. To streamline this, we implemented connection codes, enabling therapists to effortlessly initiate and secure connections with their patients during the first therapy session. + + + Contact + https://JonasTrenkler.github.io/showtime-website/contact/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/contact/ + The IMIxShowtime is a showcase of the term-long practical projects in the International Media and Computing Bachelor&rsquo;s and Master&rsquo;s programs. It takes place every term on the Friday of the last week of lectures. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/features/ + The VR Testing Environment One goal of our project was to construct a virtual test environment where the interaction between a user and the instructor could be examined. The challenge consisted of creating such an environment while not making it distracting enough to turn the focus away from the character that has to be evaluated. For a majority of our testers this was the first time experiencing a surrounding in Virtual Reality Scene 1 Introduction inside the Apartment In this scene the player is greeted by the instructor, and asked to point out some different uses of electric current in a regular household. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/future/ + As we reflect on our current achievements, we envision a future where our web application evolves into an essential tool for diverse forms of mental therapy. Here are key areas where we see potential for improvement: Therapy Session Calendar Streamlining Appointment Management To streamline the therapeutic process, we plan to incorporate a comprehensive Therapy Session Calendar. This feature would empower therapists and clients to create or request new appointments directly within the app. + + + IMI-Showtime via Zoom + https://JonasTrenkler.github.io/showtime-website/zoom-help/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/zoom-help/ + 1. Install or update Zoom If you do not have the Zoom client installed yet, you can get it here: Windows | Other platforms If you already have the client installed, please make sure it is up to date. 2. Join the Zoom session Simply follow this link: https://htw-berlin.zoom.us/j/97320821203 3. Switching rooms To switch from the main session into breakout rooms you first need to click on the „Breakout Rooms“ button (1) and then click „Join“ for the desired room (2) and confirm with „Yes“ (3). + + + Important Dates + https://JonasTrenkler.github.io/showtime-website/dates/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/dates/ + After Showtime is just before the next Showtime - upcoming events: + + + Imprint + https://JonasTrenkler.github.io/showtime-website/imprint/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/imprint/ + Diese Seite präsentiert Praxisprojekte der Studiengänge Internationale Medieninformatik Bachelor und Internationale Medieninformatik Master der HTW Berlin und ergänzt diese Webseiten. Redaktionelle Verantwortung und verantwortliche Ansprechperson Studiengangssprecher der Studiengänge Internationale Medieninformatik (Bachelor &amp; Master) Prof. Dr. Barne Kleinen HTW Berlin, Fachbereich 4 Wilhelminenhofstr. 75A 12495 Berlin barne.kleinen#64;htw-berlin.de https://www.htw-berlin.de/impressum/ Telefon: +49 30 5019 - 3738 Urheberschutz und Nutzung Die Urheber räumen Ihnen ganz konkret das Nutzungsrecht ein, sich eine private Kopie für persönliche Zwecke anzufertigen. + + + Privacy Policy + https://JonasTrenkler.github.io/showtime-website/privacy-policy/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/privacy-policy/ + Es gilt die Datenschutzerklärung der HTW Berlin. Diese Website verwendet keine Cookies und speichert keine Informationen, die über die üblichen Server-Logs der Webserver unter https://htw-berlin.de/ und https://github.com/ für https://htw-imi-showtime.github.io/preview/ und https://htw-imi-showtime.github.io/staging/ hinausgehen. + + + Project Archive Overview + https://JonasTrenkler.github.io/showtime-website/archive/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/archive/ + + + + Projects + https://JonasTrenkler.github.io/showtime-website/projects/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/projects/ + The Project Pitches and Group Selection will take place soon! See Dates for upcoming dates. Infos on the upcoming projects can be found in the Wiki (only for IMI Students &amp; Staff with HTW Login). To get an idea of the scope and characteristics of our projects, visit the archive. + + + Schedule + https://JonasTrenkler.github.io/showtime-website/schedule/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/schedule/ + There will be brief project presentations with a quick Q&amp;A in the morning (very brief presentations, the odd times are real, we might even be a bit quicker than this) and a project fair in the afternoon. The Schedule below is subject to change during the detailed Showtime planning! + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/tech-stack/ + The Oculus Headsets Thanks to the &ldquo;Institut für Kultur und Informatik an der HTW Berlin&rdquo;, which provided us with access to cutting-edge Oculus Headsets. The Quest 2 and Quest Pro, equipped with hand sensors, offered a seamless tracking experience, eliminating the need for external scanning setups. While these headsets proved to be revolutionary, navigating through app testing during the development phase presented its own set of challenges. Oculus Quest App Meta Developer Hub Building the VR Environment Due to the implementation of the OpenXR Library into the Game Engine Unity, we were able to develop an app that is able to be played on most of the VR Headsets available. + + + diff --git a/js/secret.js b/js/secret.js new file mode 100644 index 000000000..bf4cbbffd --- /dev/null +++ b/js/secret.js @@ -0,0 +1,22 @@ +const code = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "KeyB", "KeyA"]; +let currentIndex = 0; + +document.addEventListener("keydown", (event) => { + if (event.code !== code[currentIndex]) { + currentIndex = 0; + return; + } + currentIndex++; + if (currentIndex === code.length) { + complete(); + currentIndex = 0; + } +}); + +function complete() { + const classList = document.querySelector("html").classList; + if (classList.contains("roll")) + classList.remove("roll"); + else + classList.add("roll"); +} diff --git a/js/semester-select.js b/js/semester-select.js new file mode 100644 index 000000000..31bc160ff --- /dev/null +++ b/js/semester-select.js @@ -0,0 +1,7 @@ +window.addEventListener("DOMContentLoaded", () => + document.querySelector("#semester-select")?.addEventListener("change", changeSemester) +); + +function changeSemester(event) { + window.location.href = `${event.target.value}`; +} diff --git a/js/title-animate.js b/js/title-animate.js new file mode 100644 index 000000000..43c1df3da --- /dev/null +++ b/js/title-animate.js @@ -0,0 +1,70 @@ +const titleStates = new Map(); + +window.addEventListener("DOMContentLoaded", () => { + const titles = document.querySelectorAll(".animate-trigger"); + titles.forEach(title => { + const animatingTitle = title.querySelector(".animate"); + titleStates.set(animatingTitle, { show: false, shown: false }); + title.addEventListener("mouseenter", () => showFullTitle(animatingTitle)); + title.addEventListener("mouseleave", () => hideFullTitle(animatingTitle)); + }); +}); + +async function showFullTitle(title) { + const titleState = titleStates.get(title); + if (titleState.show) return; + + titleState.show = true; + titleStates.set(title, titleState); + + title.innerText = "SHTI"; + await wait(20); + title.innerText = "SHOTIM"; + await wait(20); + title.innerText = "SHOWTIME"; + await wait(20); + title.innerText = "SHOWTIME_"; + + titleState.shown = true; + titleStates.set(title, titleState); + await blink(true, title); +} + +async function hideFullTitle(title) { + const titleState = titleStates.get(title); + if (!titleState.show) return; + + if (!titleState.shown) { + titleState.shown = false; + titleStates.set(title, titleState); + await wait(200); + } + titleState.shown = false; + titleStates.set(title, titleState); + + title.innerText = "SHOTIM"; + await wait(20); + title.innerText = "SHTI"; + await wait(20); + title.innerText = "ST"; + + titleState.show = false; + titleStates.set(title, titleState); +} + +async function blink(shown, title) { + if (!titleStates.get(title).shown) return; + console.log(titleStates.get(title)); + + if (shown) + title.innerText = title.innerText.replace("_", " "); + else + title.innerText = title.innerText.replace(" ", "_"); + + await wait(400); + await blink(!shown, title); +} + +async function wait(milliseconds) { + return new Promise(resolve => setTimeout(resolve, milliseconds)); +} diff --git a/licenses/jetbrains-mono.txt b/licenses/jetbrains-mono.txt new file mode 100644 index 000000000..821a3dac2 --- /dev/null +++ b/licenses/jetbrains-mono.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. + +This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/licenses/material-icons.txt b/licenses/material-icons.txt new file mode 100644 index 000000000..7a4a3ea24 --- /dev/null +++ b/licenses/material-icons.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/privacy-policy/index.html b/privacy-policy/index.html new file mode 100644 index 000000000..54b845b95 --- /dev/null +++ b/privacy-policy/index.html @@ -0,0 +1,93 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Privacy Policy +   +

+
+ +
+
+
+

Es gilt die Datenschutzerklärung der HTW Berlin.

+

Diese Website verwendet keine Cookies und speichert keine Informationen, die über die üblichen Server-Logs der Webserver unter https://htw-berlin.de/ und https://github.com/ für +https://htw-imi-showtime.github.io/preview/ und https://htw-imi-showtime.github.io/staging/ hinausgehen.

+ +
+ + + + + diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 000000000..e3eb72b2e --- /dev/null +++ b/projects/index.html @@ -0,0 +1,192 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + + + + + + + + + + + + + + + +
+

+ Projects + + + + + + + + summer + + + + + + 2024 + + + +   +

+ +
+
+ +

The Project Pitches and Group Selection will take place soon! +See Dates for upcoming dates. Infos on the upcoming projects +can be found in the Wiki (only for IMI Students & Staff with HTW Login).

+ +

To get an idea of the +scope and characteristics of our projects, visit the archive.

+
+ +
+ + + + + + +
+ +

+
+
+ B0 Bachelor + +

Bachelor Project Template

+
+

This is only a template

+ -> Details +
+ + + + + Bachelor Project Template +
+
+ +

+
+
+ B0 Bachelor + +

Minimal Template

+
+

This is only a template

+ -> Details +
+ + + + + Minimal Template +
+
+ +

+
+
+ M0 Master + +

Master Project Template

+
+

This is only a template

+ -> Details +
+ + + + + Master Project Template +
+
+ +
+ + + + + + diff --git a/schedule/index.html b/schedule/index.html new file mode 100644 index 000000000..732940270 --- /dev/null +++ b/schedule/index.html @@ -0,0 +1,225 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ Schedule + + + + + + + summer + + + + + + 2024 + + + +   +

+
+
+

There will be brief project presentations with a quick Q&A in the morning (very brief presentations, the odd times are real, we might even be a bit quicker than this) and +a project fair in the afternoon.

+

The Schedule below is subject to change during the detailed Showtime planning!

+ +
+
+
+
+ +
+
+ + + + + diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 000000000..300babb9d --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,163 @@ + + + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/challanges/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/technology/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/terminology/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/process/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/challenges/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/gameplay/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/challenges/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/tech-stack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/future/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/process/ + + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/process/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/features/ + + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/features/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/techstack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/ + + https://JonasTrenkler.github.io/showtime-website/ws23/debug/ + + https://JonasTrenkler.github.io/showtime-website/ss24/ + + https://JonasTrenkler.github.io/showtime-website/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/ + + https://JonasTrenkler.github.io/showtime-website/ss24/master/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/review/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/ + + https://JonasTrenkler.github.io/showtime-website/categories/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/challenges/ + + https://JonasTrenkler.github.io/showtime-website/contact/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/features/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/future/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/ + + https://JonasTrenkler.github.io/showtime-website/zoom-help/ + + https://JonasTrenkler.github.io/showtime-website/dates/ + + https://JonasTrenkler.github.io/showtime-website/imprint/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/ + + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/ + + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template-minimal/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/ + + https://JonasTrenkler.github.io/showtime-website/privacy-policy/ + + https://JonasTrenkler.github.io/showtime-website/archive/ + + https://JonasTrenkler.github.io/showtime-website/projects/ + + https://JonasTrenkler.github.io/showtime-website/schedule/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/ + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/ + + https://JonasTrenkler.github.io/showtime-website/tags/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/tech-stack/ + + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/ + + diff --git a/ss24/bachelor/b0-template-minimal/cat.jpg b/ss24/bachelor/b0-template-minimal/cat.jpg new file mode 100644 index 000000000..86c21e3cd Binary files /dev/null and b/ss24/bachelor/b0-template-minimal/cat.jpg differ diff --git a/ss24/bachelor/b0-template-minimal/index.html b/ss24/bachelor/b0-template-minimal/index.html new file mode 100644 index 000000000..b0521f3d7 --- /dev/null +++ b/ss24/bachelor/b0-template-minimal/index.html @@ -0,0 +1,504 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B0 Bachelor + Minimal Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ This is only a template +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
+

+ + Product + +

+
+
+ (What we built) Praesent dignissim dolor vel augue pellentesque imperdiet. Proin congue tellus sed nunc porttitor, eu maximus augue cursus. Donec aliquam pharetra tempus. +
+
+ +
+

+ + Process + +

+
+
+ (How we built it) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + + + +
+ + + + + diff --git a/ss24/bachelor/b0-template-minimal/index.xml b/ss24/bachelor/b0-template-minimal/index.xml new file mode 100644 index 000000000..24481a05f --- /dev/null +++ b/ss24/bachelor/b0-template-minimal/index.xml @@ -0,0 +1,11 @@ + + + + Minimal Template on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template-minimal/ + Recent content in Minimal Template on IMI Showtime + Hugo + de-de + + + diff --git a/ss24/bachelor/b0-template-minimal/kitty.jpg b/ss24/bachelor/b0-template-minimal/kitty.jpg new file mode 100644 index 000000000..05fc8d033 Binary files /dev/null and b/ss24/bachelor/b0-template-minimal/kitty.jpg differ diff --git a/ss24/bachelor/b0-template/cat.jpg b/ss24/bachelor/b0-template/cat.jpg new file mode 100644 index 000000000..86c21e3cd Binary files /dev/null and b/ss24/bachelor/b0-template/cat.jpg differ diff --git a/ss24/bachelor/b0-template/features/index.html b/ss24/bachelor/b0-template/features/index.html new file mode 100644 index 000000000..b78da3764 --- /dev/null +++ b/ss24/bachelor/b0-template/features/index.html @@ -0,0 +1,498 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B0 Bachelor + Bachelor Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Features + +

+
+
+
    +
  • Roles
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
    +
  • Game-Flow
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
    +
  • Voting Systems
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+ +
+
+ + +
+ + + + + diff --git a/ss24/bachelor/b0-template/index.html b/ss24/bachelor/b0-template/index.html new file mode 100644 index 000000000..b71031cff --- /dev/null +++ b/ss24/bachelor/b0-template/index.html @@ -0,0 +1,514 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B0 Bachelor + Bachelor Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ This is only a template +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
+

+ + Our Goal + +

+
+
+ Praesent dignissim dolor vel augue pellentesque imperdiet. Proin congue tellus sed nunc porttitor, eu maximus augue cursus. Donec aliquam pharetra tempus. +
+
+ +
+

+ + The team + +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + + + +
+ + + + + diff --git a/ss24/bachelor/b0-template/index.xml b/ss24/bachelor/b0-template/index.xml new file mode 100644 index 000000000..a84ef60c4 --- /dev/null +++ b/ss24/bachelor/b0-template/index.xml @@ -0,0 +1,32 @@ + + + + Bachelor Project Template on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/ + Recent content in Bachelor Project Template on IMI Showtime + Hugo + de-de + + + Process + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/process/ + Process Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Features + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/features/ + Features Roles Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Game-Flow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Voting Systems Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/b0-template/techstack/ + Tech Stack Hugo offers a couple of options to include diagrams right in the source code, see https://gohugo.io/content-management/diagrams/ Here&rsquo;s a mermaid example: (note the hasMermaid = true parameter in the front matter!) classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Future Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + diff --git a/ss24/bachelor/b0-template/kitty.jpg b/ss24/bachelor/b0-template/kitty.jpg new file mode 100644 index 000000000..05fc8d033 Binary files /dev/null and b/ss24/bachelor/b0-template/kitty.jpg differ diff --git a/ss24/bachelor/b0-template/process/index.html b/ss24/bachelor/b0-template/process/index.html new file mode 100644 index 000000000..15dc7098e --- /dev/null +++ b/ss24/bachelor/b0-template/process/index.html @@ -0,0 +1,486 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B0 Bachelor + Bachelor Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Process + +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + +
+ + + + + diff --git a/ss24/bachelor/b0-template/techstack/index.html b/ss24/bachelor/b0-template/techstack/index.html new file mode 100644 index 000000000..bdd0edf34 --- /dev/null +++ b/ss24/bachelor/b0-template/techstack/index.html @@ -0,0 +1,529 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B0 Bachelor + Bachelor Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Tech Stack + +

+
+
+

Hugo offers a couple of options to include diagrams right in the source code, see +https://gohugo.io/content-management/diagrams/

+

Here’s a mermaid example: (note the hasMermaid = true parameter in the front matter!)

+
classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+
+ + +
+
+ +
+

+ + Future + +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + +
+ + + + + + + diff --git a/ss24/bachelor/index.html b/ss24/bachelor/index.html new file mode 100644 index 000000000..5b7569266 --- /dev/null +++ b/ss24/bachelor/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ ss24 + +   + + + +

+
+
+ + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ +

+ + +
+ + + + + diff --git a/ss24/bachelor/index.xml b/ss24/bachelor/index.xml new file mode 100644 index 000000000..7a2ab583c --- /dev/null +++ b/ss24/bachelor/index.xml @@ -0,0 +1,11 @@ + + + + IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/bachelor/ + Recent content on IMI Showtime + Hugo + de-de + + + diff --git a/ss24/index.html b/ss24/index.html new file mode 100644 index 000000000..cb926c2fb --- /dev/null +++ b/ss24/index.html @@ -0,0 +1,201 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + + + + + + + + + + + +
+

+ Archive + + + + + + + + summer + + + + + + 2024 + + + +   +

+ +
+
+ + + + +

Explore the projects of previous semesters - or see + a complete archive overview.

+ + +
+ +
+ + +
+ +
+ + + + + + +
+ +

+
+
+ B0 Bachelor + +

Bachelor Project Template

+
+

This is only a template

+ -> Details +
+ + + + + Bachelor Project Template +
+
+ +

+
+
+ B0 Bachelor + +

Minimal Template

+
+

This is only a template

+ -> Details +
+ + + + + Minimal Template +
+
+ +

+
+
+ M0 Master + +

Master Project Template

+
+

This is only a template

+ -> Details +
+ + + + + Master Project Template +
+
+ +
+ + + + + + diff --git a/ss24/index.xml b/ss24/index.xml new file mode 100644 index 000000000..9deb4537a --- /dev/null +++ b/ss24/index.xml @@ -0,0 +1,11 @@ + + + + ss24 on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/ + Recent content in ss24 on IMI Showtime + Hugo + de-de + + + diff --git a/ss24/master/index.html b/ss24/master/index.html new file mode 100644 index 000000000..edbe51435 --- /dev/null +++ b/ss24/master/index.html @@ -0,0 +1,128 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ ss24 + +   + + + +

+
+
+ + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ +

+ + +
+ + + + + diff --git a/ss24/master/index.xml b/ss24/master/index.xml new file mode 100644 index 000000000..3c7dd60fe --- /dev/null +++ b/ss24/master/index.xml @@ -0,0 +1,11 @@ + + + + IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/master/ + Recent content on IMI Showtime + Hugo + de-de + + + diff --git a/ss24/master/m0-template/cat.jpg b/ss24/master/m0-template/cat.jpg new file mode 100644 index 000000000..86c21e3cd Binary files /dev/null and b/ss24/master/m0-template/cat.jpg differ diff --git a/ss24/master/m0-template/features/index.html b/ss24/master/m0-template/features/index.html new file mode 100644 index 000000000..543385364 --- /dev/null +++ b/ss24/master/m0-template/features/index.html @@ -0,0 +1,498 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M0 Master + Master Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Features + +

+
+
+
    +
  • Roles
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
    +
  • Game-Flow
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
    +
  • Voting Systems
  • +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+ +
+
+ + +
+ + + + + diff --git a/ss24/master/m0-template/index.html b/ss24/master/m0-template/index.html new file mode 100644 index 000000000..4e1d08da8 --- /dev/null +++ b/ss24/master/m0-template/index.html @@ -0,0 +1,514 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M0 Master + Master Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ This is only a template +

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis.

+
+

+ + Our Goal + +

+
+
+ Praesent dignissim dolor vel augue pellentesque imperdiet. Proin congue tellus sed nunc porttitor, eu maximus augue cursus. Donec aliquam pharetra tempus. +
+
+ +
+

+ + The team + +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + + + +
+ + + + + diff --git a/ss24/master/m0-template/index.xml b/ss24/master/m0-template/index.xml new file mode 100644 index 000000000..78ae51c44 --- /dev/null +++ b/ss24/master/m0-template/index.xml @@ -0,0 +1,32 @@ + + + + Master Project Template on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/ + Recent content in Master Project Template on IMI Showtime + Hugo + de-de + + + Process + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/process/ + Process Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Features + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/features/ + Features Roles Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Game-Flow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. Voting Systems Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ss24/master/m0-template/techstack/ + Tech Stack Hugo offers a couple of options to include diagrams right in the source code, see https://gohugo.io/content-management/diagrams/ Here&rsquo;s a mermaid example: (note the hasMermaid = true parameter in the front matter!) classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } Future &amp; A M S i o i q f b B x u j o e a ( - x d r a &gt; e f R &gt; c o C n u o b ( n r ) ) d n e e J d r o s i n N o R D t o i u a a n g d d l o i t n e D i a g o n a l s C V u e r r v t e i d c a l n o t A N C : o u l d r r i A a / I v n s i n e e h s t d - e - t r l B i h i i s i o n ' s r e q n . + + + diff --git a/ss24/master/m0-template/kitty.jpg b/ss24/master/m0-template/kitty.jpg new file mode 100644 index 000000000..05fc8d033 Binary files /dev/null and b/ss24/master/m0-template/kitty.jpg differ diff --git a/ss24/master/m0-template/process/index.html b/ss24/master/m0-template/process/index.html new file mode 100644 index 000000000..50afb50f4 --- /dev/null +++ b/ss24/master/m0-template/process/index.html @@ -0,0 +1,486 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M0 Master + Master Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Process + +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis neque id vulputate malesuada. Quisque dignissim finibus urna sed sagittis. +
+
+ + +
+ + + + + diff --git a/ss24/master/m0-template/techstack/index.html b/ss24/master/m0-template/techstack/index.html new file mode 100644 index 000000000..f02f151e0 --- /dev/null +++ b/ss24/master/m0-template/techstack/index.html @@ -0,0 +1,953 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M0 Master + Master Project Template +   + + + +

+
+
+ +

Team

+
    + +
  • Member 1
  • + +
  • Member 2
  • + +
+ + +

Supervision

+ Supervisor + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Tech Stack + +

+
+
+

Hugo offers a couple of options to include diagrams right in the source code, see +https://gohugo.io/content-management/diagrams/

+

Here’s a mermaid example: (note the hasMermaid = true parameter in the front matter!)

+
classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+
+ + +
+
+ +
+

+ + Future + +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +& +A +M +S +i +o +i +q +f +b +B +x +u +j +o +e +a +( +- +x +d +r +a +> +e +f +R +> +c +o +C +n +u +o +b +( +n +r +) +) +d +n +e +e +J +d +r +o +s +i +n +N +o +R +D +t +o +i +u +a +a +n +g +d +d +l +o +i +t +n +e +D +i +a +g +o +n +a +l +s +C +V +u +e +r +r +v +t +e +i +d +c +a +l +n +o +t +A +N +C +: +o +u +l +d +r +r +i +A +a +/ +I +v +n +s +i +n +e +e +h +s +t +d +- +e +- +t +r +l +B +i +h +i +i +s +i +o +n +' +s +r +e +q +n +. +u +* +o +o +b +t +t +o +e +l +a +s +d +' +* +l +i +n +e +D +o +n +S +e +e +? +a +r +c +3 +h + + + + +
+

Goat Diagrams are also supported :)

+
+
+ + +
+ + + + + + + diff --git a/tags/index.html b/tags/index.html new file mode 100644 index 000000000..e5eb925a1 --- /dev/null +++ b/tags/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +

Tags

+ + + + + + diff --git a/tags/index.xml b/tags/index.xml new file mode 100644 index 000000000..dadb0752a --- /dev/null +++ b/tags/index.xml @@ -0,0 +1,11 @@ + + + + Tags on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/tags/ + Recent content in Tags on IMI Showtime + Hugo + de-de + + + diff --git a/ws23/bachelor/b1-peek/alexej.png b/ws23/bachelor/b1-peek/alexej.png new file mode 100644 index 000000000..d83b56813 Binary files /dev/null and b/ws23/bachelor/b1-peek/alexej.png differ diff --git a/ws23/bachelor/b1-peek/app-concept.jpg b/ws23/bachelor/b1-peek/app-concept.jpg new file mode 100644 index 000000000..3f4da935b Binary files /dev/null and b/ws23/bachelor/b1-peek/app-concept.jpg differ diff --git a/ws23/bachelor/b1-peek/app_functionality.gif b/ws23/bachelor/b1-peek/app_functionality.gif new file mode 100644 index 000000000..c139c313c Binary files /dev/null and b/ws23/bachelor/b1-peek/app_functionality.gif differ diff --git a/ws23/bachelor/b1-peek/cat.jpg b/ws23/bachelor/b1-peek/cat.jpg new file mode 100644 index 000000000..3ee30f58c Binary files /dev/null and b/ws23/bachelor/b1-peek/cat.jpg differ diff --git a/ws23/bachelor/b1-peek/discord-icon.png b/ws23/bachelor/b1-peek/discord-icon.png new file mode 100644 index 000000000..c71fe213c Binary files /dev/null and b/ws23/bachelor/b1-peek/discord-icon.png differ diff --git a/ws23/bachelor/b1-peek/docker-icon.png b/ws23/bachelor/b1-peek/docker-icon.png new file mode 100644 index 000000000..5617b701c Binary files /dev/null and b/ws23/bachelor/b1-peek/docker-icon.png differ diff --git a/ws23/bachelor/b1-peek/expressjs-icon.png b/ws23/bachelor/b1-peek/expressjs-icon.png new file mode 100644 index 000000000..4bb15f67b Binary files /dev/null and b/ws23/bachelor/b1-peek/expressjs-icon.png differ diff --git a/ws23/bachelor/b1-peek/features/index.html b/ws23/bachelor/b1-peek/features/index.html new file mode 100644 index 000000000..4abbeba12 --- /dev/null +++ b/ws23/bachelor/b1-peek/features/index.html @@ -0,0 +1,510 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B1 Bachelor + Peek +   + + + +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Features + +

+
+
+
    +
  • Visualisation through Charts
  • +
+

Each Key existing in the documents of your collection receives their own chart window. In it, all the values of that key from the documents will be displayed in an aggregated way. Depending on the type of the key that aggregation may be in form of a pie chart, bar chart or list. That gives you a quick overview of the existing values and their occurrences.

+
    +
  • Interaction with Charts
  • +
+

The charts are not only there to display the values but you can also interact with them. By selecting or deselecting values you can filter your data and have these changes shown in your charts in real time. This way you can easily get the data you need and get immediate visual feedback on what each click actually does to your data set.

+
    +
  • Schema Chart
  • +
+

Each existing key of the selected collection gets displayed in the schema chart. Next to it you can see which percentage of the documents include that key and therefore follow the schema. If a key is a nested document or object array you can unfold it to see its keys. By clicking on the keys’ eye-icons you can make their chart window visible.

+
    +
  • Query Builder
  • +
+

The user is able to get an automatically generated query corresponding to the data changes.

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b1-peek/figma-icon.png b/ws23/bachelor/b1-peek/figma-icon.png new file mode 100644 index 000000000..8173824d3 Binary files /dev/null and b/ws23/bachelor/b1-peek/figma-icon.png differ diff --git a/ws23/bachelor/b1-peek/github-icon.png b/ws23/bachelor/b1-peek/github-icon.png new file mode 100644 index 000000000..a013b44e9 Binary files /dev/null and b/ws23/bachelor/b1-peek/github-icon.png differ diff --git a/ws23/bachelor/b1-peek/index.html b/ws23/bachelor/b1-peek/index.html new file mode 100644 index 000000000..f18f27af2 --- /dev/null +++ b/ws23/bachelor/b1-peek/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B1 Bachelor + Peek +   + + + +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Tired of looking through thousands of documents to get the data you need? Well, we are here to help! With Peek you simply connect to your MongoDB database and let our interactive charts do the filtering. All query-free! +

+ + + + + + + + + +
+ Portrait of App Functionality +
App Functionality
+
+ +
+

+ + Our Goal + +

+
+
+

There’s no denying that MongoDB is a powerful database with a lot of use cases but as powerful as it is - it is also a little tedious to go through once your collections and documents become bigger. And it’s not very helpful to only see a list of documents and key-value pairs, if you’ve got a long list to go through, is it?

+

Our goal with this project is to simplify the way you interact with your Mongo database. We want to eliminate the need to use queries to get the data you need. Visually representing key-value pairs as informative graphs and charts that you can interact with to filter your data is supposed to make MongoDB more manageable and enhance your experience when working with it.

+ +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b1-peek/index.xml b/ws23/bachelor/b1-peek/index.xml new file mode 100644 index 000000000..29ccc5855 --- /dev/null +++ b/ws23/bachelor/b1-peek/index.xml @@ -0,0 +1,32 @@ + + + + Peek on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/ + Recent content in Peek on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/features/ + Features Visualisation through Charts Each Key existing in the documents of your collection receives their own chart window. In it, all the values of that key from the documents will be displayed in an aggregated way. Depending on the type of the key that aggregation may be in form of a pie chart, bar chart or list. That gives you a quick overview of the existing values and their occurrences. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/process/ + Process Since our project had a lot do to with displaying data so it&rsquo;s easy to understand, we first created a concept of what our application should look like in Figma. The user should be able to navigate the interface easily, without immediately being overwhelmed. To do that, we decided that the application should have a simple login interface and once logged in, the user should be presented with only the necessary options first, navigating deeper into the interface as needed. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b1-peek/techstack/ + Communication Discord Zoom Planning Notion Figma Programming Visual Studio Code React NextJS ExpressJS GitHub Utility MongoDB Docker Image Sources https://es.logodownload.org/discord-logo/ https://es.logodownload.org/zoom-logo/ https://logos-download.com/40130-notion-app-logo-download.html https://es.logodownload.org/?s=figma https://logospng.org/logo-visual-studio-code/ https://logos-download.com/9747-react-logo-download.html https://creazilla.com/nodes/3244252-nextjs-icon https://www.mementotech.in/nodejs-development-company-rajkot.html https://logodix.com/github-resume https://www.kindpng.com/imgv/hhJbRxJ_mongodb-logo-png-transparent-png/ https://iconduck.com/icons/94225/docker-icon + + + diff --git a/ws23/bachelor/b1-peek/kitty.jpg b/ws23/bachelor/b1-peek/kitty.jpg new file mode 100644 index 000000000..dc5254fa9 Binary files /dev/null and b/ws23/bachelor/b1-peek/kitty.jpg differ diff --git a/ws23/bachelor/b1-peek/laura.png b/ws23/bachelor/b1-peek/laura.png new file mode 100644 index 000000000..7d80ca1c7 Binary files /dev/null and b/ws23/bachelor/b1-peek/laura.png differ diff --git a/ws23/bachelor/b1-peek/leaf-eye.jpeg b/ws23/bachelor/b1-peek/leaf-eye.jpeg new file mode 100644 index 000000000..a32c1a10a Binary files /dev/null and b/ws23/bachelor/b1-peek/leaf-eye.jpeg differ diff --git a/ws23/bachelor/b1-peek/leif.png b/ws23/bachelor/b1-peek/leif.png new file mode 100644 index 000000000..da95e76c3 Binary files /dev/null and b/ws23/bachelor/b1-peek/leif.png differ diff --git a/ws23/bachelor/b1-peek/marlin.png b/ws23/bachelor/b1-peek/marlin.png new file mode 100644 index 000000000..4df8da204 Binary files /dev/null and b/ws23/bachelor/b1-peek/marlin.png differ diff --git a/ws23/bachelor/b1-peek/matthis.png b/ws23/bachelor/b1-peek/matthis.png new file mode 100644 index 000000000..bd31d77d6 Binary files /dev/null and b/ws23/bachelor/b1-peek/matthis.png differ diff --git a/ws23/bachelor/b1-peek/mongodb-icon.png b/ws23/bachelor/b1-peek/mongodb-icon.png new file mode 100644 index 000000000..eb4bc40aa Binary files /dev/null and b/ws23/bachelor/b1-peek/mongodb-icon.png differ diff --git a/ws23/bachelor/b1-peek/nextjs-icon.png b/ws23/bachelor/b1-peek/nextjs-icon.png new file mode 100644 index 000000000..436bb8c3a Binary files /dev/null and b/ws23/bachelor/b1-peek/nextjs-icon.png differ diff --git a/ws23/bachelor/b1-peek/notion-icon.png b/ws23/bachelor/b1-peek/notion-icon.png new file mode 100644 index 000000000..266595f85 Binary files /dev/null and b/ws23/bachelor/b1-peek/notion-icon.png differ diff --git a/ws23/bachelor/b1-peek/process/index.html b/ws23/bachelor/b1-peek/process/index.html new file mode 100644 index 000000000..5f7554721 --- /dev/null +++ b/ws23/bachelor/b1-peek/process/index.html @@ -0,0 +1,499 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B1 Bachelor + Peek +   + + + +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Process + +

+
+
+

Since our project had a lot do to with displaying data so it’s easy to understand, we first created a concept of what our application should look like in Figma. The user should be able to navigate the interface easily, without immediately being overwhelmed. To do that, we decided that the application should have a simple login interface and once logged in, the user should be presented with only the necessary options first, navigating deeper into the interface as needed.

+

Using this logic, we also decided on which team member would code what part of the interface and also which components were needed for the rest of the team to start working on their parts. We devided the team into sub-groups to work on different components and also had specialists for frontend and backend.

+

The backend was developed prior to and alongside the frontend. We needed some backend functionality and initial reading data from the database to build the frontend on top of this functionality.

+

While that initial backend development was happening, frontend members started reading into React and components, so they could start working immediately once the backend functionality was implemented.

+

Then, everyone began working on their part and the team came together to update each other, suggest improvements or merge branches. During the process we always adapted our concept little by little - adding or removing certain features - and there was a lot of work involved in finding the right approach to display our charts correctly while giving the user maximum freedom in selecting or deselecting values.

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b1-peek/react-icon.png b/ws23/bachelor/b1-peek/react-icon.png new file mode 100644 index 000000000..ccaed68ed Binary files /dev/null and b/ws23/bachelor/b1-peek/react-icon.png differ diff --git a/ws23/bachelor/b1-peek/techstack/index.html b/ws23/bachelor/b1-peek/techstack/index.html new file mode 100644 index 000000000..4ddb310d2 --- /dev/null +++ b/ws23/bachelor/b1-peek/techstack/index.html @@ -0,0 +1,604 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B1 Bachelor + Peek +   + + + +

+
+
+ +

Team

+
    + +
  • Alexej Bormatenkow
  • + +
  • Marlin Pohl
  • + +
  • Leif Rehtanz
  • + +
  • Tobias Bayer
  • + +
  • Laura Bärtschi
  • + +
  • Matthis Ehrhardt
  • + +
+ + +

Supervision

+ Prof. Dr.-Ing. David Strippgen + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Communication + +

+
+
+ + +
+
+ +
+

+ + Planning + +

+
+
+ + +
+
+ +
+

+ + Programming + +

+
+
+ + +
+
+ +
+

+ + Utility + +

+
+
+ + +
+
+ +
+

+ + Image Sources + +

+
+ +
+ + +
+ + + + + diff --git a/ws23/bachelor/b1-peek/tobias.png b/ws23/bachelor/b1-peek/tobias.png new file mode 100644 index 000000000..72bb835e6 Binary files /dev/null and b/ws23/bachelor/b1-peek/tobias.png differ diff --git a/ws23/bachelor/b1-peek/vsc-icon.png b/ws23/bachelor/b1-peek/vsc-icon.png new file mode 100644 index 000000000..8c7067859 Binary files /dev/null and b/ws23/bachelor/b1-peek/vsc-icon.png differ diff --git a/ws23/bachelor/b1-peek/zoom-icon.png b/ws23/bachelor/b1-peek/zoom-icon.png new file mode 100644 index 000000000..02020b87e Binary files /dev/null and b/ws23/bachelor/b1-peek/zoom-icon.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/aidai.jpg b/ws23/bachelor/b2-mobile-multitouch-multiplayer/aidai.jpg new file mode 100644 index 000000000..d41e69c0f Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/aidai.jpg differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/altogether.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/altogether.png new file mode 100644 index 000000000..077e74e45 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/altogether.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/index.html b/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/index.html new file mode 100644 index 000000000..ffa3d012d --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/index.html @@ -0,0 +1,516 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B2 Bachelor + Mobile Multitouch Multiplayer - Spike Shielders +   + + + +

+
+
+ +

Team

+
    + +
  • David Voetterl
  • + +
  • Aidai Kalmamatova
  • + +
+ + +

Supervision

+ Prof. Dr. Tobias Lenz + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Getting to Grips with Unity + +

+
+
+ Our journey into game development kicked off with Unity, and it was a learning curve. Understanding the ropes of this platform required time and effort, especially as we shifted from conventional programming mindsets. Yet, the more we dived in, the more we discovered Unity’s flexibility and the wealth of pre-packaged tools it offered, turning our initial challenges into stepping stones for growth. +
+
+ +
+

+ + Mastering Multitouch + +

+
+
+ In our quest to make games accessible to mobile players, we encountered the challenge of implementing multitouch functionality. Our goal was to craft multiplayer experiences that seamlessly responded to multiple touch inputs. Despite scouring the internet for solutions, finding a platform that supported both multitouch and multiplayer proved to be a daunting task, testing our resolve and problem-solving skills. +
+
+ +
+

+ + Team Size Dilemma + +

+
+
+ Our project began as a duo effort, and with the abundance of tasks and questions, we briefly pondered the benefits of a larger team. Yet, the reality of navigating the project with just two members unfolded. Surprisingly, this limitation fueled our motivation. With no one to rely on but ourselves, every hurdle we overcame felt like a shared victory, making the journey uniquely rewarding. +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/communication.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/communication.png new file mode 100644 index 000000000..055990718 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/communication.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/david.jpg b/ws23/bachelor/b2-mobile-multitouch-multiplayer/david.jpg new file mode 100644 index 000000000..14abcd667 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/david.jpg differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/design.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/design.png new file mode 100644 index 000000000..161ae318c Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/design.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/development.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/development.png new file mode 100644 index 000000000..8e148d400 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/development.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/first design.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/first design.png new file mode 100644 index 000000000..36f584e48 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/first design.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/first_design.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/first_design.png new file mode 100644 index 000000000..36f584e48 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/first_design.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/index.html b/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/index.html new file mode 100644 index 000000000..6c7df4f32 --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/index.html @@ -0,0 +1,537 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B2 Bachelor + Mobile Multitouch Multiplayer - Spike Shielders +   + + + +

+
+
+ +

Team

+
    + +
  • David Voetterl
  • + +
  • Aidai Kalmamatova
  • + +
+ + +

Supervision

+ Prof. Dr. Tobias Lenz + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Bringing Bobola to Life + +

+
+
+

It all started with a sweet idea - a cute main character, and you, the player, saving it. No time to waste, so we jumped into Unity, made our main character, Bobola, and got into coding. Urgency was our guide to keep things moving.

+
+ +
+
+
+ +
+

+ + Bobola's Story + +

+
+
+

To make the game more engaging, we introduced falling objects to save Bobola. Originally, we planned to use coconuts, but we stumbled upon spike shields in the Unity Asset Store.

+

Bobola’s original Enchanting Tale:

+

“In a magical jungle, Bobola, a unique creature, lives in a beautiful garden filled with enchanting flowers. His home is peaceful, but earthquakes disturb it, causing coconuts to fall from palm trees.

+

Your mission is to protect Bobola’s garden, saving the magical flowers and keeping the ecosystem safe. Tap the falling coconuts to protect Bobola and his home.”

+

As time passed, we couldn’t replace the spike shields with coconuts, but that’s okay. They became a part of our game’s identity. With our story, character, and objects in place, we turned our attention to making the game multiplayer.

+ +
+
+ +
+

+ + Embracing Multiplayer - Split Screens and Counting Clicks + +

+
+
+

Now, we wanted everyone to enjoy our game together. So, we decided to make it multiplayer. We divided the screen in two and created a smart counter, counting clicks for each player.

+

While trying to make our game work well for mobile players, we faced a tough challenge: getting multitouch to work. Our goal was to allow multiple touches on the screen at once for multiplayer gaming. We searched the internet for ideas, but finding the right code for both multiplayer and multitouch was tough. It tested our determination and problem-solving skills.

+

After several rounds of trial and error, we came up with a promising solution.

+

We stored all touches in an array for multitouch. For multiplayer, we used game objects assigned to each player. So, when a game object got destroyed, we knew which player to count it for.

+
+ +
+
+ +
+
+ +
+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.html b/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.html new file mode 100644 index 000000000..1923cb527 --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.html @@ -0,0 +1,537 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B2 Bachelor + Mobile Multitouch Multiplayer - Spike Shielders +   + + + +

+
+
+ +

Team

+
    + +
  • David Voetterl
  • + +
  • Aidai Kalmamatova
  • + +
+ + +

Supervision

+ Prof. Dr. Tobias Lenz + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Introducing the Mobile Multitouch Multiplayer Project - Spike Shielders: Dive into the jungle with Bobola and save the day! +

+ +

This innovative game challenges players to collaborate on tablets, exploring the limits of multitouch and multiplayer dynamics. +Grab your device, tap swiftly, and immerse yourself in this magical adventure. How many fingers can you use to save Bobola and the jungle life? Let’s find out!

+
+

+ + Our Goal + +

+
+
+ Ever wondered how many friends can join in on the fun simultaneously? Are we capturing all the touchpoints needed for an epic gaming experience? Can we ensure each touch is correctly attributed to the right player? And what about the seamless adaptation to various screen sizes? These intriguing questions form the heart of our Mobile Multitouch Multiplayer Project. +
+
+ +
+

+ + Technology + +

+
+
+ The engine behind our game is Unity, a versatile and robust game development platform. Unity empowers developers to craft top-notch interactive experiences for different platforms like mobile devices, consoles, and computers. With Unity, we crafted the graphics, made things work, and brought our game vision into reality! +
+
+ +
+

+ + The team + +

+
+
+ We are a small team of two dedicated IMI Students - David Voetterl and Aidai Kalmamatova. +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.xml b/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.xml new file mode 100644 index 000000000..d607328fc --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/index.xml @@ -0,0 +1,39 @@ + + + + Mobile Multitouch Multiplayer - Spike Shielders on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/ + Recent content in Mobile Multitouch Multiplayer - Spike Shielders on IMI Showtime + Hugo + de-de + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/ + Project Management In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily. To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/ + Project Management In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily. To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/challenges/ + Getting to Grips with Unity Our journey into game development kicked off with Unity, and it was a learning curve. Understanding the ropes of this platform required time and effort, especially as we shifted from conventional programming mindsets. Yet, the more we dived in, the more we discovered Unity&rsquo;s flexibility and the wealth of pre-packaged tools it offered, turning our initial challenges into stepping stones for growth. Mastering Multitouch In our quest to make games accessible to mobile players, we encountered the challenge of implementing multitouch functionality. + + + Gameplay + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/gameplay/ + Bringing Bobola to Life It all started with a sweet idea - a cute main character, and you, the player, saving it. No time to waste, so we jumped into Unity, made our main character, Bobola, and got into coding. Urgency was our guide to keep things moving. Bobola&#39;s Story To make the game more engaging, we introduced falling objects to save Bobola. Originally, we planned to use coconuts, but we stumbled upon spike shields in the Unity Asset Store. + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/logo.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/logo.png new file mode 100644 index 000000000..b5a36ed5b Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/logo.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/project management.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/project management.png new file mode 100644 index 000000000..27fd00521 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/project management.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/project_management.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/project_management.png new file mode 100644 index 000000000..27fd00521 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/project_management.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/index.html b/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/index.html new file mode 100644 index 000000000..03930079e --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech-stack/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B2 Bachelor + Mobile Multitouch Multiplayer - Spike Shielders +   + + + +

+
+
+ +

Team

+
    + +
  • David Voetterl
  • + +
  • Aidai Kalmamatova
  • + +
+ + +

Supervision

+ Prof. Dr. Tobias Lenz + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Project Management + +

+
+
+

In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily.

+

To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. And when it was time for Showtime Preparation, Confluence was our reliable guide, making sure every detail was in the right place.

+
+ Apps for Project management: Notion, Google Apps, Confluence, Miro +
+ +
+
+ +
+

+ + Communication + +

+
+
+

In the world of project communication, keeping a smooth flow was crucial for our progress. We usually had our sprint meetings with Supervisor Prof. Tobias Lenz at the university, which allowed for direct communication and quick updates.

+

When faced with disruptions like strikes, bad weather, or holidays, we switched our communication to platforms like WhatsApp and Discord to maintain continuous connection and exchange information. For collaborative work and screen-sharing, we relied on Zoom, making teamwork and shared insights more effective.

+
+ communication apps: Zoom, WhatsApp, Discord +
+ +
+
+ +
+

+ + Development + +

+
+
+

In the world of game development, we used Unity as our main platform to create our game. We harnessed the strength of C# coding and used Visual Studio Code for detailed programming tasks. For smooth collaboration and version control, we depended on Git and GitHub to manage and share our code with each other.

+
+ Development Tools: Unity, C Sharp, Git, Visual Studio Code +
+
+
+ +
+

+ + Design + +

+
+
+

In our design work, we focused on creating characters using Photoshop, along with additional design elements from the Unity Asset Store. Building the website required us to use Markdown and Hugo as our design tools, which helped us achieve a stylish and visually appealing online presence. For presentations and other design tasks, we used Canva to add creativity and finesse to our visuals.

+
+ Design Tools: Photoshop, Canva, Hugo +
+
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/index.html b/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/index.html new file mode 100644 index 000000000..80aa09d23 --- /dev/null +++ b/ws23/bachelor/b2-mobile-multitouch-multiplayer/tech_stack/index.html @@ -0,0 +1,544 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B2 Bachelor + Mobile Multitouch Multiplayer - Spike Shielders +   + + + +

+
+
+ +

Team

+
    + +
  • David Voetterl
  • + +
  • Aidai Kalmamatova
  • + +
+ + +

Supervision

+ Prof. Dr. Tobias Lenz + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Project Management + +

+
+
+

In our project toolkit, we used various tools to keep things organized and clear. Notion was our main hub, providing flexibility along with the helpful Education Abo Option. Google Apps, such as TaskBoard for daily tasks and Calendar for sprint scheduling, helped us stay on course easily.

+

To see our progress visually, we created a lively Miro board connected to our Gantt Chart, adding color and energy to our project tracking. And when it was time for Showtime Preparation, Confluence was our reliable guide, making sure every detail was in the right place.

+
+ Apps for Project management: Notion, Google Apps, Confluence, Miro +
+ +
+
+ +
+

+ + Communication + +

+
+
+

In the world of project communication, keeping a smooth flow was crucial for our progress. We usually had our sprint meetings with Supervisor Prof. Tobias Lenz at the university, which allowed for direct communication and quick updates.

+

When faced with disruptions like strikes, bad weather, or holidays, we switched our communication to platforms like WhatsApp and Discord to maintain continuous connection and exchange information. For collaborative work and screen-sharing, we relied on Zoom, making teamwork and shared insights more effective.

+
+ communication apps: Zoom, WhatsApp, Discord +
+ +
+
+ +
+

+ + Development + +

+
+
+

In the world of game development, we used Unity as our main platform to create our game. We harnessed the strength of C# coding and used Visual Studio Code for detailed programming tasks. For smooth collaboration and version control, we depended on Git and GitHub to manage and share our code with each other.

+
+ Development Tools: Unity, C Sharp, Git, Visual Studio Code +
+
+
+ +
+

+ + Design + +

+
+
+

In our design work, we focused on creating characters using Photoshop, along with additional design elements from the Unity Asset Store. Building the website required us to use Markdown and Hugo as our design tools, which helped us achieve a stylish and visually appealing online presence. For presentations and other design tasks, we used Canva to add creativity and finesse to our visuals.

+
+ Design Tools: Photoshop, Canva, Hugo +
+
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity counter.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity counter.png new file mode 100644 index 000000000..03af550eb Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity counter.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity screen division.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity screen division.png new file mode 100644 index 000000000..cfd8e56d9 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity screen division.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_counter.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_counter.png new file mode 100644 index 000000000..03af550eb Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_counter.png differ diff --git a/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_scr_div.png b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_scr_div.png new file mode 100644 index 000000000..cfd8e56d9 Binary files /dev/null and b/ws23/bachelor/b2-mobile-multitouch-multiplayer/unity_scr_div.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/DaDFeature.png b/ws23/bachelor/b4-hypnobuddy/DaDFeature.png new file mode 100644 index 000000000..9d6c839c2 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/DaDFeature.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/DaDP.png b/ws23/bachelor/b4-hypnobuddy/DaDP.png new file mode 100644 index 000000000..3237191a9 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/DaDP.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/FT.png b/ws23/bachelor/b4-hypnobuddy/FT.png new file mode 100644 index 000000000..717c0416a Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/FT.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/FearOverview.png b/ws23/bachelor/b4-hypnobuddy/FearOverview.png new file mode 100644 index 000000000..ade641b90 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/FearOverview.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/JournalingFeat.png b/ws23/bachelor/b4-hypnobuddy/JournalingFeat.png new file mode 100644 index 000000000..00f6d9d72 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/JournalingFeat.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/Reflexion.png b/ws23/bachelor/b4-hypnobuddy/Reflexion.png new file mode 100644 index 000000000..9ea3e030b Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/Reflexion.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/ReflexionNew.png b/ws23/bachelor/b4-hypnobuddy/ReflexionNew.png new file mode 100644 index 000000000..f5e7f0c12 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/ReflexionNew.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/bootstrap.png b/ws23/bachelor/b4-hypnobuddy/bootstrap.png new file mode 100644 index 000000000..3643b912e Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/bootstrap.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/bunnyCard.png b/ws23/bachelor/b4-hypnobuddy/bunnyCard.png new file mode 100644 index 000000000..1de5cc1f9 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/bunnyCard.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/challenges/index.html b/ws23/bachelor/b4-hypnobuddy/challenges/index.html new file mode 100644 index 000000000..c309257f9 --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/challenges/index.html @@ -0,0 +1,519 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Challenges: + +

+
+
+
    +
  • User Management: Balancing Complexity and Simplicity
  • +
+

The intricacies of managing users across three categories—therapists, patients, and parents—demanded a delicate balance. Based on therapists’ recommendations, we opted to allow patients and parents to share the same account, simplifying the user experience. However, creating a secure yet straightforward connection between therapists and patients posed a unique challenge. To streamline this, we implemented connection codes, enabling therapists to effortlessly initiate and secure connections with their patients during the first therapy session.

+
+
    +
  • Feature Implementation: A Dual Perspective
  • +
+

Developing features from both therapists’ and patients’ perspectives presented a dual challenge. Meeting the requirements of these distinct user groups required careful consideration and collaboration. As we collected a myriad of feature ideas from interviews, deciding on the most crucial features, prioritizing them, and ensuring their feasibility became a complex yet pivotal task. Balancing these perspectives allowed us to create a holistic solution that addressed the diverse needs of both therapists and patients.

+
+
    +
  • Designing a Mental Health Concept: Sensitivity and Empathy
  • +
+

Crafting an appropriate mental health concept demanded a heightened level of sensitivity. Mental health is a profoundly personal and delicate topic, necessitating a design approach infused with care and empathy. Our process involved multiple refinement cycles, incorporating expert views from psychology professionals and in-depth research. We strived to ensure that our design not only met functional requirements but also created a positive emotional association for users, fostering a sense of comfort and trust.

+
+
    +
  • Backend-Frontend Independence: Harmonizing the Symphony
  • +
+

Developing the backend and frontend independently brought its own set of challenges. Ensuring seamless communication between these components required meticulous planning and agreement on common interfaces. The team worked collaboratively to align the frontend and backend effectively, overcoming the complexities associated with parallel development. This synchronization was vital to achieving a cohesive and efficient final product.

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/cypress.png b/ws23/bachelor/b4-hypnobuddy/cypress.png new file mode 100644 index 000000000..64e220c52 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/cypress.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/discord.png b/ws23/bachelor/b4-hypnobuddy/discord.png new file mode 100644 index 000000000..af79cbe49 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/discord.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/docker.png b/ws23/bachelor/b4-hypnobuddy/docker.png new file mode 100644 index 000000000..ce79dc6ec Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/docker.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/express.png b/ws23/bachelor/b4-hypnobuddy/express.png new file mode 100644 index 000000000..548b397ad Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/express.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/features/index.html b/ws23/bachelor/b4-hypnobuddy/features/index.html new file mode 100644 index 000000000..798f13dcd --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/features/index.html @@ -0,0 +1,541 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Dos And Don'ts Guide + +

+
+
+

Introducing our Dos and Don’ts Guide: a specialized feature designed exclusively for parents in the Hypno Buddy app. This guide, created by therapists and linked directly to the patient, offers practical tips for daily life, categorizing advice to address common challenges. Unlike resources for children, parents access personalized recommendations, ensuring relevance to their unique situation. The feature, derived from therapist interviews, reflects a concise suggestion to enhance the overall effectiveness of the therapeutic process. It provides concise, targeted insights for parents, contributing to the success and continuity of their child’s therapeutic journey.

+
+ Dos And Don'ts Feature +
Patient View of Dos And Don'ts
+
+
+ Dos And Don'ts Feature +
Overview over Dos And Don'ts Categories (Therapist's View)
+
+
+
+ +
+

+ + Roadmap + +

+
+
+ Our Roadmap feature is a dynamic tool that seamlessly merges patient autonomy with therapist support. On their Roadmap, patients can set daily life goals—whether integrated into therapy sessions or pursued individually. Therapists leverage these insights to gauge therapy effectiveness and observe real-life progress. +The comment feature encourages ongoing communication, enabling therapists to offer guidance and motivation. Actively engaging, patients share thoughts, creating a dynamic dialogue beyond formal therapy sessions. Through this interactive tool, our goal is to motivate patients, aiding them in recognizing and celebrating their successes. In doing so, it enhances patient awareness and fosters a deeper appreciation for their progress on the therapeutic journey. +
+
+ +
+

+ + Journal and Mood Tracking + +

+
+
+

Our Journaling and Mood Tracking feature in Hypno Buddy is a personalized tool to enhance self-reflection and positive focus. This feature allows users to track their emotions through a simple yet effective journal, emphasizing positive aspects of their day. With an uncomplicated text field, users can easily document their thoughts, aided by sample questions for inspiration. Emoji-buttons provide a quick and expressive way to capture daily moods. Entries are saved chronologically, fostering reflection by allowing users to revisit and visualize their progress. This feature serves as a valuable resource for users to not only track their feelings but also celebrate achievements, creating a dynamic and empowering aspect of their therapeutic journey.

+
+ Journaling Feature +
Moodtracking Feature
+
+
+ Journaling Feature +
Journaling
+
+
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/figma.webp b/ws23/bachelor/b4-hypnobuddy/figma.webp new file mode 100644 index 000000000..bb22d07d1 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/figma.webp differ diff --git a/ws23/bachelor/b4-hypnobuddy/firebase.png b/ws23/bachelor/b4-hypnobuddy/firebase.png new file mode 100644 index 000000000..08a3c8a7c Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/firebase.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/future/index.html b/ws23/bachelor/b4-hypnobuddy/future/index.html new file mode 100644 index 000000000..1965f91b3 --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/future/index.html @@ -0,0 +1,547 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Therapy Session Calendar + +

+
+
+

Streamlining Appointment Management

+

To streamline the therapeutic process, we plan to incorporate a comprehensive Therapy Session Calendar. This feature would empower therapists and clients to create or request new appointments directly within the app. This ensures that therapists have all relevant information about their patients consolidated in one platform, fostering a more efficient and organized workflow.

+ +
+
+ +
+

+ + Roadmap Experience + +

+
+
+

Gamifying the User Experience

+

Improving the intuitiveness of our roadmap is a key focus. We aim to make the interface more user-friendly, introducing features such as drag-and-drop functionality for seamless navigation. Inspired by gamification principles, we aspire to make the UI more engaging, drawing inspiration from platforms like Duolingo to create a visually appealing and interactive experience.

+ +
+
+ +
+

+ + Exercise Feature + +

+
+
+

Flexibility and Feedback

+

Our Exercise Feature will be refined to provide therapists with the capability to create/upload exercises within the app. Patients can then upload their results, allowing therapists to offer feedback or make notes for subsequent sessions. This feature will prioritize flexibility, ensuring therapists can customize exercises for various formats, including audio files for meditation recorded by the therapists themselves. The goal is to save time and enhance the overall effectiveness of therapeutic exercises.

+ +
+
+ +
+

+ + Feature Connection + +

+
+
+

Seamless Integration for Holistic Insights

+

Connecting different features will be a pivotal improvement to create a more seamless user experience. For instance, integrating therapists’ notes from the Exercise, Roadmap, and Journal features into the calendar will provide therapists with a consolidated view of important information. This interconnected approach aims to enhance the overall therapeutic process, providing a holistic understanding of the patient’s journey.

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/github-actions.png b/ws23/bachelor/b4-hypnobuddy/github-actions.png new file mode 100644 index 000000000..150864e00 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/github-actions.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/github.png b/ws23/bachelor/b4-hypnobuddy/github.png new file mode 100644 index 000000000..e28a83730 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/github.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/google-cloud.png b/ws23/bachelor/b4-hypnobuddy/google-cloud.png new file mode 100644 index 000000000..2de79d9ad Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/google-cloud.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/index.html b/ws23/bachelor/b4-hypnobuddy/index.html new file mode 100644 index 000000000..2b7bfd49b --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/index.html @@ -0,0 +1,564 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ + + + + Demo Link Icon + Source_Code + + + +

+ Hypno Buddy, an innovative app, enhances hypnotherapy effectiveness, especially for children and adolescents. Facilitating seamless communication between therapists, young clients, and parents, it empowers all parties. +

+ +
+

+ + Hypno Buddy + +

+
+ +
+ +
+

+ + Our Goal + +

+
+
+ Despite the rapid success achievable through hypnotherapy, the challenge lies in sustaining positive behavioral changes beyond therapy sessions, especially for complex issues like social phobias or school anxiety. Hypno Buddy addresses this gap by providing a child-friendly solution that extends the benefits of hypnotherapy into clients’ daily lives. The app serves as a bridge between hypnotherapists, children, and parents, fostering continuous communication and support. Hypno Buddy aims to create a long-lasting, profound positive behavioral change. The ultimate goal is to empower young clients to overcome deep-rooted fears, identify the roots of their anxieties, and develop healthier responses to life’s challenges. +
+
+ +
+

+ + The team + +

+
+
+ Our team consists of six developers currently pursuing our IMI bachelor’s studies, each bringing distinct skills and expertise to create, together with our supervisor, a well-coordinated unit. Throughout our collaboration, we’ve fostered a culture of continuous learning, expanding our skillsets and gaining new perspectives. Regular weekly updates have been crucial in keeping everyone informed about individual progress, sharing feedback, and providing mutual support, resulting in a dynamic and collaborative environment. Our journey not only involved technical development but also a deep exploration of hypnotherapy, showcasing our commitment to the success of the HypnoBuddy app. +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/index.xml b/ws23/bachelor/b4-hypnobuddy/index.xml new file mode 100644 index 000000000..a1a8b1d16 --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/index.xml @@ -0,0 +1,46 @@ + + + + HypnoBuddy on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/ + Recent content in HypnoBuddy on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/features/ + Dos And Don&#39;ts Guide Introducing our Dos and Don&rsquo;ts Guide: a specialized feature designed exclusively for parents in the Hypno Buddy app. This guide, created by therapists and linked directly to the patient, offers practical tips for daily life, categorizing advice to address common challenges. Unlike resources for children, parents access personalized recommendations, ensuring relevance to their unique situation. The feature, derived from therapist interviews, reflects a concise suggestion to enhance the overall effectiveness of the therapeutic process. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/techstack/ + Projektmanagement Miro Github Discord Zoom Whatsapp Design / Styling Figma SCSS &amp; CSS Bootstrap Frontend TypeScript React Vite Backend NodeJS Express JS TypeScript Mongo DB Passport JS DevOps &amp; Deployment Docker Github Actions Jest (Unit Testing) Cypress (End-to-End Tests) Firebase Terraform Google Cloud Platform + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/process/ + Our development journey can be broken down into distinct phases, each contributing to the evolution of our vision. Let&rsquo;s explore the key milestones that shaped our project from its inception to the current stage. Preparation: Setting the Foundation Before diving into the technicalities, our team initiated the project by agreeing on a concrete problem within the realm of therapy that we aimed to solve. We defined major responsibilities, sharing our preferences and experiences to foster effective collaboration. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/challenges/ + Challenges: User Management: Balancing Complexity and Simplicity The intricacies of managing users across three categories—therapists, patients, and parents—demanded a delicate balance. Based on therapists&rsquo; recommendations, we opted to allow patients and parents to share the same account, simplifying the user experience. However, creating a secure yet straightforward connection between therapists and patients posed a unique challenge. To streamline this, we implemented connection codes, enabling therapists to effortlessly initiate and secure connections with their patients during the first therapy session. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b4-hypnobuddy/future/ + As we reflect on our current achievements, we envision a future where our web application evolves into an essential tool for diverse forms of mental therapy. Here are key areas where we see potential for improvement: Therapy Session Calendar Streamlining Appointment Management To streamline the therapeutic process, we plan to incorporate a comprehensive Therapy Session Calendar. This feature would empower therapists and clients to create or request new appointments directly within the app. + + + diff --git a/ws23/bachelor/b4-hypnobuddy/jest.jpeg b/ws23/bachelor/b4-hypnobuddy/jest.jpeg new file mode 100644 index 000000000..48bda575f Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/jest.jpeg differ diff --git a/ws23/bachelor/b4-hypnobuddy/justin.png b/ws23/bachelor/b4-hypnobuddy/justin.png new file mode 100644 index 000000000..0c033de4e Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/justin.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/mai.png b/ws23/bachelor/b4-hypnobuddy/mai.png new file mode 100644 index 000000000..3fc548d0d Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/mai.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/marwa.png b/ws23/bachelor/b4-hypnobuddy/marwa.png new file mode 100644 index 000000000..812414bd5 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/marwa.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/miro.png b/ws23/bachelor/b4-hypnobuddy/miro.png new file mode 100644 index 000000000..ecb903f21 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/miro.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/mongodb.png b/ws23/bachelor/b4-hypnobuddy/mongodb.png new file mode 100644 index 000000000..74eba7b14 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/mongodb.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/nathaliia.jpeg b/ws23/bachelor/b4-hypnobuddy/nathaliia.jpeg new file mode 100644 index 000000000..edbe6d1d0 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/nathaliia.jpeg differ diff --git a/ws23/bachelor/b4-hypnobuddy/nodejs.svg b/ws23/bachelor/b4-hypnobuddy/nodejs.svg new file mode 100644 index 000000000..6cf2b379d --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/nodejs.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/ws23/bachelor/b4-hypnobuddy/passportjs.png b/ws23/bachelor/b4-hypnobuddy/passportjs.png new file mode 100644 index 000000000..c887dac83 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/passportjs.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/pia.jpeg b/ws23/bachelor/b4-hypnobuddy/pia.jpeg new file mode 100644 index 000000000..6d7bcc269 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/pia.jpeg differ diff --git a/ws23/bachelor/b4-hypnobuddy/process/index.html b/ws23/bachelor/b4-hypnobuddy/process/index.html new file mode 100644 index 000000000..ba1718708 --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/process/index.html @@ -0,0 +1,539 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Preparation: Setting the Foundation + +

+
+
+ Before diving into the technicalities, our team initiated the project by agreeing on a concrete problem within the realm of therapy that we aimed to solve. We defined major responsibilities, sharing our preferences and experiences to foster effective collaboration. Establishing a solid groundwork, we set basic rules and guidelines for teamwork, using tools like Git to streamline our development process. Weekly meetings were scheduled to keep everyone on the same page, and we built an infrastructure using GitHub, Discord, Miro, Google Docs, WhatsApp, and Zoom for seamless communication. +
+
+ +
+

+ + Research: Deepening Insights + +

+
+
+ To develop a comprehensive understanding of hypnosis therapy, our team delved into extensive research. We reached out to hypnosis therapists, engaging in insightful interviews with potential users to gather valuable feedback. Constant communication with therapists allowed us to evaluate our findings and refine our direction, ensuring our solution aligned with their needs. +
+
+ +
+

+ + Conception: Shaping the Vision + +

+
+
+ Agreeing on the app’s structure and initial features, we built a common understanding and vision for our project. The selection of the MERN tech stack (MongoDB, Express.JS, React, Node.js + Typescript) and additional tools such as Bootstrap, SASS, Docker, and Figma laid the foundation for our development. Crafting features and user stories, we meticulously structured our backlog, using Miro to visualize data structures and model connections. This phase provided the blueprint for the upcoming development process. +
+
+ +
+

+ + Development: Bringing Ideas to Life + +

+
+
+ Adopting a SCRUM-like workflow with one-week sprints, our team held weekly meetings to synchronize progress and address challenges. We began by constructing the basic application structure and implementing a user management concept. Choosing the most critical features, we formed development groups, working towards delivering the first version before the holiday season. Alongside the implementation, we emphasized writing unit tests for both backend and frontend components, ensuring the reliability and stability of our application. As the first version came together, we conducted retrospectives, identifying areas for improvement and planning for additional features. +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/react.png b/ws23/bachelor/b4-hypnobuddy/react.png new file mode 100644 index 000000000..403c3a8b0 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/react.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/scss.png b/ws23/bachelor/b4-hypnobuddy/scss.png new file mode 100644 index 000000000..b1d5e5fe0 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/scss.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/sina.png b/ws23/bachelor/b4-hypnobuddy/sina.png new file mode 100644 index 000000000..1dca63195 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/sina.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/techstack/index.html b/ws23/bachelor/b4-hypnobuddy/techstack/index.html new file mode 100644 index 000000000..36d113016 --- /dev/null +++ b/ws23/bachelor/b4-hypnobuddy/techstack/index.html @@ -0,0 +1,650 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B4 Bachelor + HypnoBuddy +   + + + +

+
+
+ +

Team

+
    + +
  • Pia Dünow
  • + +
  • Justin Gebert
  • + +
  • Sina Han
  • + +
  • Marwa Hariz
  • + +
  • Mai Le Phuong
  • + +
  • Nataliia Remezova
  • + +
+ + +

Supervision

+ Andreas Lehner + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Projektmanagement + +

+
+
+ + +
+
+ +
+

+ + Design / Styling + +

+
+
+ + +
+
+ +
+

+ + Frontend + +

+
+
+ + +
+
+ +
+

+ + Backend + +

+
+
+ + +
+
+ +
+

+ + DevOps & Deployment + +

+
+
+ + +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b4-hypnobuddy/terraform.png b/ws23/bachelor/b4-hypnobuddy/terraform.png new file mode 100644 index 000000000..b7745f67c Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/terraform.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/typescript.png b/ws23/bachelor/b4-hypnobuddy/typescript.png new file mode 100644 index 000000000..c78e2d1e6 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/typescript.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/vite.png b/ws23/bachelor/b4-hypnobuddy/vite.png new file mode 100644 index 000000000..ef943601b Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/vite.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/whatsapp.png b/ws23/bachelor/b4-hypnobuddy/whatsapp.png new file mode 100644 index 000000000..b6ee3f762 Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/whatsapp.png differ diff --git a/ws23/bachelor/b4-hypnobuddy/zoom.avif b/ws23/bachelor/b4-hypnobuddy/zoom.avif new file mode 100644 index 000000000..f33ae610e Binary files /dev/null and b/ws23/bachelor/b4-hypnobuddy/zoom.avif differ diff --git a/ws23/bachelor/b5-smartlibrary/ayman.jpg b/ws23/bachelor/b5-smartlibrary/ayman.jpg new file mode 100644 index 000000000..7321ee3fd Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/ayman.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/bassel.jpg b/ws23/bachelor/b5-smartlibrary/bassel.jpg new file mode 100644 index 000000000..d0c0611f3 Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/bassel.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/diagram.jpg b/ws23/bachelor/b5-smartlibrary/diagram.jpg new file mode 100644 index 000000000..09db4e4cb Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/diagram.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/eva.jpg b/ws23/bachelor/b5-smartlibrary/eva.jpg new file mode 100644 index 000000000..ee271e305 Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/eva.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/features/index.html b/ws23/bachelor/b5-smartlibrary/features/index.html new file mode 100644 index 000000000..50088ab4f --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/features/index.html @@ -0,0 +1,529 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B5 Bachelor + SmartLibrary - It's A Match! +   + + + +

+
+
+ +

Team

+
    + +
  • Ayman Abou Hashem
  • + +
  • Eva El Sakka
  • + +
  • Thi Thu Hien Tran
  • + +
  • Natalia Marth
  • + +
  • Bassel Samo
  • + +
+ + +

Supervision

+ Linda Fernsel + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Features + +

+
+
+

Keyword extraction:

+
    +
  • Moodle Course:
  • +
+

By reading keywords from course names, course descriptions and keywords added by the educators we remove common words, which are stored in a blacklist, such as “a,” “an,” etc. (Functionality and blacklist sourced from beliefmedia.com). SmartLibrary constructs SQL queries from the extracted keywords to read material names and links associated with the keywords from the database.

+
    +
  • Crawler:
  • +
+

We built a crawler which can extract learning material names and keywords from the HTML code of websites such as Coursera.org and Codecademy.com. We parsed the HTML code to a DOM Object. Then we save learning material name, link and keywords in a SQL database. +The matching results are displayed on the website.

+
+ Platforms +
+

Real-time Updates: +Whenever educators modify the course description or add new keywords, SmartLibrary dynamically updates, ensuring students have immediate access to the most current and relevant supplementary resources.

+ +
+
+ + + + + + + +
+ +

Promo Video

+ +
+ video placeholder + +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b5-smartlibrary/future/index.html b/ws23/bachelor/b5-smartlibrary/future/index.html new file mode 100644 index 000000000..540f8beff --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/future/index.html @@ -0,0 +1,500 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B5 Bachelor + SmartLibrary - It's A Match! +   + + + +

+
+
+ +

Team

+
    + +
  • Ayman Abou Hashem
  • + +
  • Eva El Sakka
  • + +
  • Thi Thu Hien Tran
  • + +
  • Natalia Marth
  • + +
  • Bassel Samo
  • + +
+ + +

Supervision

+ Linda Fernsel + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Future + +

+
+
+

NLP Integration:

+

As part of our ongoing development, we are planning to extract keywords from learning materials on Moodle by converting PDF Files with educator’s learning materials into searchable text using a PDF Reader Library. Subsequently, we analyse the text for keywords using Natural Language Processing. This comprehensive approach ensures that the SmartLibrary plugin not only remains cutting-edge but also addresses diverse content formats, including PDF materials.

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b5-smartlibrary/hien.jpg b/ws23/bachelor/b5-smartlibrary/hien.jpg new file mode 100644 index 000000000..597a4a31f Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/hien.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/index.html b/ws23/bachelor/b5-smartlibrary/index.html new file mode 100644 index 000000000..9c42f5dd9 --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/index.html @@ -0,0 +1,546 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B5 Bachelor + SmartLibrary - It's A Match! +   + + + +

+
+
+ +

Team

+
    + +
  • Ayman Abou Hashem
  • + +
  • Eva El Sakka
  • + +
  • Thi Thu Hien Tran
  • + +
  • Natalia Marth
  • + +
  • Bassel Samo
  • + +
+ + +

Supervision

+ Linda Fernsel + +
+
+
+
+ +
+
+ + + + +
+
+ + + + + Demo Link Icon + Source_Code + + + +

+ SmartLibrary is an innovative Moodle plugin developed to promote self-regulated learning by delivering educational resources from online learning platforms such as Coursera and Codecademy. +

+ +
+

+ + Our Goal + +

+
+
+ The goal of SmartLibrary is to enhance the learning experience within Moodle by automating the discovery of relevant and high-quality educational resources. It aims to address the challenges associated with manual searches for learning materials, such as time constraints and inefficiencies. +
+
+ +
+

+ + The team + +

+
+
+ We are a dedicated team of five people united in a creation of a Moodle Plugin. Each team member brought a unique skill set and a shared enthusiasm for educational technology, making our development process dynamic and efficient. +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b5-smartlibrary/index.xml b/ws23/bachelor/b5-smartlibrary/index.xml new file mode 100644 index 000000000..b46732426 --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/index.xml @@ -0,0 +1,39 @@ + + + + SmartLibrary - It's A Match! on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/ + Recent content in SmartLibrary - It's A Match! on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/features/ + Features Keyword extraction: Moodle Course: By reading keywords from course names, course descriptions and keywords added by the educators we remove common words, which are stored in a blacklist, such as &ldquo;a,&rdquo; &ldquo;an,&rdquo; etc. (Functionality and blacklist sourced from beliefmedia.com). SmartLibrary constructs SQL queries from the extracted keywords to read material names and links associated with the keywords from the database. Crawler: We built a crawler which can extract learning material names and keywords from the HTML code of websites such as Coursera. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/process/ + Process We dedicated initial time to conceptualising the idea for the plugin, exploring its potential impact and benefits. This involved learning from Moodle Academy about building Moodle plugins and creating first drafts to outline key functionalities. With a clearer vision, we strategically divided the overall idea into smaller, manageable tasks. Each task was designed to contribute to the overarching goal of the plugin. Adopting agile methodologies, we embraced a collaborative and iterative approach. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/techstack/ + Tech Stack Our tech stack consists of the following tools &amp; technologies: + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b5-smartlibrary/future/ + Future NLP Integration: As part of our ongoing development, we are planning to extract keywords from learning materials on Moodle by converting PDF Files with educator’s learning materials into searchable text using a PDF Reader Library. Subsequently, we analyse the text for keywords using Natural Language Processing. This comprehensive approach ensures that the SmartLibrary plugin not only remains cutting-edge but also addresses diverse content formats, including PDF materials. + + + diff --git a/ws23/bachelor/b5-smartlibrary/natalia.jpg b/ws23/bachelor/b5-smartlibrary/natalia.jpg new file mode 100644 index 000000000..de233c7ad Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/natalia.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/platforms.jpg b/ws23/bachelor/b5-smartlibrary/platforms.jpg new file mode 100644 index 000000000..6d79e0b92 Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/platforms.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/process/index.html b/ws23/bachelor/b5-smartlibrary/process/index.html new file mode 100644 index 000000000..e166b7d8a --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/process/index.html @@ -0,0 +1,516 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B5 Bachelor + SmartLibrary - It's A Match! +   + + + +

+
+
+ +

Team

+
    + +
  • Ayman Abou Hashem
  • + +
  • Eva El Sakka
  • + +
  • Thi Thu Hien Tran
  • + +
  • Natalia Marth
  • + +
  • Bassel Samo
  • + +
+ + +

Supervision

+ Linda Fernsel + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Process + +

+
+
+

We dedicated initial time to conceptualising the idea for the plugin, exploring its potential impact and benefits. This involved learning from Moodle Academy about building Moodle plugins and creating first drafts to outline key functionalities.

+

With a clearer vision, we strategically divided the overall idea into smaller, manageable tasks. Each task was designed to contribute to the overarching goal of the plugin.

+

Adopting agile methodologies, we embraced a collaborative and iterative approach. This involved regular team meetings, feedback loops, and adjustments to the plan based on evolving insights and progress.

+

Recognizing the diverse skill set within our team, we assigned specific tasks to team members based on their expertise. This allowed for efficient utilisation of individual strengths, ensuring a well-rounded development process.

+ +
+
+ + + + + + + + + + +
+ Diagram + +
+ + +
+ + + + + diff --git a/ws23/bachelor/b5-smartlibrary/smartlibrary.jpg b/ws23/bachelor/b5-smartlibrary/smartlibrary.jpg new file mode 100644 index 000000000..95d982987 Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/smartlibrary.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/tech_stack.jpg b/ws23/bachelor/b5-smartlibrary/tech_stack.jpg new file mode 100644 index 000000000..51fc2c2db Binary files /dev/null and b/ws23/bachelor/b5-smartlibrary/tech_stack.jpg differ diff --git a/ws23/bachelor/b5-smartlibrary/techstack/index.html b/ws23/bachelor/b5-smartlibrary/techstack/index.html new file mode 100644 index 000000000..00ed9e0f8 --- /dev/null +++ b/ws23/bachelor/b5-smartlibrary/techstack/index.html @@ -0,0 +1,512 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B5 Bachelor + SmartLibrary - It's A Match! +   + + + +

+
+
+ +

Team

+
    + +
  • Ayman Abou Hashem
  • + +
  • Eva El Sakka
  • + +
  • Thi Thu Hien Tran
  • + +
  • Natalia Marth
  • + +
  • Bassel Samo
  • + +
+ + +

Supervision

+ Linda Fernsel + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Tech Stack + +

+
+
+ Our tech stack consists of the following tools & technologies: +
+
+ + + + + + + + + + +
+ Tech Stack + +
+ + +
+ + + + + diff --git a/ws23/bachelor/b6-avatavr/cover.jpg b/ws23/bachelor/b6-avatavr/cover.jpg new file mode 100644 index 000000000..2553ef5ab Binary files /dev/null and b/ws23/bachelor/b6-avatavr/cover.jpg differ diff --git a/ws23/bachelor/b6-avatavr/danylo.jpg b/ws23/bachelor/b6-avatavr/danylo.jpg new file mode 100644 index 000000000..34884303b Binary files /dev/null and b/ws23/bachelor/b6-avatavr/danylo.jpg differ diff --git a/ws23/bachelor/b6-avatavr/features/index.html b/ws23/bachelor/b6-avatavr/features/index.html new file mode 100644 index 000000000..81e5b1e50 --- /dev/null +++ b/ws23/bachelor/b6-avatavr/features/index.html @@ -0,0 +1,563 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B6 Bachelor + AvataVR +   + + + +

+
+
+ +

Team

+
    + +
  • Robert Dolibog
  • + +
  • Vladyslav Kyselov
  • + +
  • Imanuel Leiserowitz
  • + +
  • Nathalie Claire Huppert
  • + +
  • Karolina Serova
  • + +
  • Danylo Vovochok
  • + +
+ + +

Supervision

+ Martin Steinicke & Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +

The VR Testing Environment

+

One goal of our project was to construct a virtual test environment where the interaction between a user and the instructor could be examined. The challenge consisted of creating such an environment while not making it distracting enough to turn the focus away from the character that has to be evaluated. For a majority of our testers this was the first time experiencing a surrounding in Virtual Reality

+
+

+ + Scene 1 + +

+
+
+

Introduction inside the Apartment

+

In this scene the player is greeted by the instructor, and asked to point out some different uses of electric current in a regular household. +To learn about the transformation from electric current to heat, the player needs to interact with the toaster. +To activate an electric magnet one needs to point out the Toy Crane, and by using the lamp, the player can light up the scene. +Supported by some amusing voicelines the player is playfully introduced into the topic of electric energy, before being confronted with more complex topics.

+
+ Room 1 +
+
+
+ +
+

+ + Scene 2 + +

+
+
+

Lesson in the Workshop

+

In this workshop setting, the avatar guides the user through the differences between a basic circuit diagram, as commonly known from physics classes, and an electrician’s circuit diagram. Not only do the symbols differ, but now there are also ciruits switches included in the drawings. The instructor emphasizes a fundamental rule in the electrician’s craft: always disable the circuit switches before working on the electrical components!

+

The instructor then challenges the user to reconstruct the circuit. Various 3D assets, including a switch, a lamp, and cables, are laid out on the table in front of the player. A template next to them allows the components to be placed and snapped into place. The power source and fuse switches are already mounted on the edge of the template, animated to signify electrical flow.

+

Ideally, the user starts building without deactivating the fuse switches. If a component under power is touched, a loud bang surprises the player, and the environment disappears. The instructor’s voice from offscreen explains that the first and most important safety rule has been overlooked.

+

Now, the user has the opportunity to try again, earning the instructor’s praise once they successfully build the circuit without causing an explosion.

+
+ Room 2 +
+ +
+
+ +
+

+ + the study + +

+
+
+

Conducting the Study Using Different Avatar Representations

+

In order to examine if the difference in character design had an impact on the relationship with the teacher, we conducted tests on two groups of participants during the span of two days on campus. The participants filled out questionnaires to provide insights into their experience and perception.

+
+ Testing Procedure +
+

The study aimed to explore the impact of avatar design on the relationship between the user and the virtual instructor. Two distinct avatar representations were used, and participants were divided into two groups, each exposed to a different representation.

+

To measure the effectiveness of the different avatars, we drew inspiration from existing research methodologies:

+

Telepresence, Copresence, and Social Presence:

+
    +
  • The study drew inspiration from Kristine L. Nowak and Frank Biocca’s work on the effect of agency and anthropomorphism on users’ sense of telepresence, copresence, and social presence in virtual environments. 1
  • +
+

Emotion Measurement:

+
    +
  • The Self-Assessment Manikin and the Semantic Differential, as introduced by Margaret M. Bradley and Peter J. Lang, were employed to measure the emotional responses of participants during the virtual interactions. 2
  • +
+

Impact on Learning Environment:

+
    +
  • The study considered the impact of avatar trust on learners’ perceived participation intentions in an e-learning environment, based on the research by Seong Wook Chae, Kun Chang Lee, and Young Wook Seo. 3
  • +
+

The gathered data and feedback from the participants were crucial in assessing the effectiveness of different avatar representations in virtual educational settings.

+
+
+
    +
  1. +

    Kristine L. Nowak; Frank Biocca, “The Effect of the Agency and Anthropomorphism on Users’ Sense of Telepresence, Copresence, and Social Presence in Virtual Environments,” Presence (Volume: 12, Issue: 5, October 2003), Published online: October 2003, DOI: 10.1162/105474603322761289 ↩︎

    +
  2. +
  3. +

    Bradley and P. J. Lang, “Measuring Emotion: The Self-Assessment Manikin and the Semantic Differential,” Published online: 16 Mar 2016, DOI: 10.1016/0005-7916(94)90063-9 ↩︎

    +
  4. +
  5. +

    Seong Wook Chae, Kun Chang Lee, & Young Wook Seo, “Exploring the Effect of Avatar Trust on Learners’ Perceived Participation Intentions in an e-Learning Environment,” Published online: 16 Mar 2016. DOI: 10.1080/10447318.2016.1150643 ↩︎

    +
  6. +
+
+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b6-avatavr/imanuel.jpg b/ws23/bachelor/b6-avatavr/imanuel.jpg new file mode 100644 index 000000000..b1d761415 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/imanuel.jpg differ diff --git a/ws23/bachelor/b6-avatavr/index.html b/ws23/bachelor/b6-avatavr/index.html new file mode 100644 index 000000000..89e2e32f7 --- /dev/null +++ b/ws23/bachelor/b6-avatavr/index.html @@ -0,0 +1,599 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B6 Bachelor + AvataVR +   + + + +

+
+
+ +

Team

+
    + +
  • Robert Dolibog
  • + +
  • Vladyslav Kyselov
  • + +
  • Imanuel Leiserowitz
  • + +
  • Nathalie Claire Huppert
  • + +
  • Karolina Serova
  • + +
  • Danylo Vovochok
  • + +
+ + +

Supervision

+ Martin Steinicke & Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Exploring the Impact of Diverse NPC Representations in VR Learning Environments +

+ +
+

+ + Intro + +

+
+
+
+ AvataVR Logo +
+

Rapid advancements in Virtual Reality (VR) technology have transformed what was once dismissed by many as a ‘gimmick’ into a rapidly evolving realm with practical applications. +Companies like Meta and Valve now prioritize the development of VR technologies, pushing to integrate it more and more into the media landscape. +The Covid-19 pandemic further accelerated the shift of education into the virtual space, emphasizing the growing importance of immersive learning experiences. +In this context, our study focuses on examining the visual impact of VR learning, specifically exploring the potential of avatars to enhance educational experiences within this evolving virtual landscape.

+
+
+ +
+

+ + Concept + +

+
+
+

The creation of the testing environment involved the construction of an immersive VR application, between 5 to 10 minutes of Playtime, +designed to investigate the effects of different avatars on the learner. +In this application, an avatar introduces itself and provides a short instructional session, +enabling the study of various impact factors. To make this instructional session as hands-on as possible, +we partnered with the company se.services. The local electronics service provider, was a helpful partner in providing us with priceless expertise in the field of employee training.

+
+ +
se.services GmbH Logo
+
+

In collaboration with their Head Instructor Markus Zippel, who has trained countless of electricians during his career, we were able to create a scenario, deliviring a basis on which we could later evaluate the users experiences.

+ +
+
+ +

+

+ + Avatar Design + +

+
+
+ In our study, we aimed to examine potential variations in the player’s connection to the instructor based on its visual representation. One group of participants interacted with a human-looking 3D model, while the other received instructions from a more abstract representation, a robot. +
+
+ +
+

+ + Collaboration Framework + +

+
+
+ For this project, we implemented a variation of a collaboration framework, such as Scrum and Agile development. By conducting meetings every 3 to 4 days, we ensured that everyone was keeping up with the workflow and the status of the project. +
+
+

+
+

+ + Technical Implementation + +

+
+
+ To ensure that the NPCs only differ in their visual representation, we utilized identical audio speech clips and movement animations for both characters. For this purpose, we recorded a professional training supervisor in our on-campus motion capture lab. The camera-based system records the subject from eight angles and calculates a corresponding skeleton in real time. Compared to high-end systems used in professional movie productions, this setup is much easier to setup and use. However, it is also more susceptible to inaccuracies, requiring additional post-processing to clean up the recordings. The application was developed using the OpenXR Library in the Unity game engine. Thanks to the library’s unified interface, it is possible to play the scene with all common VR headsets without the need for different distributions of the application. In our case, we had access to a set of modern Oculus Quest headsets, which are relatively consumer-friendly as they do not require external sensors to be set up in the room. +
+
+ +
+

+ + Scientific Foundations + +

+
+
+ The questionnaire weve put together, in order to be used during the testing process, is built upon solid scientific principles to explore the nuanced dynamics of user-avatar interactions. Rooted in established psychological theories, we focus on key elements like social presence, trust, affect, and the immersive experience. +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b6-avatavr/index.xml b/ws23/bachelor/b6-avatavr/index.xml new file mode 100644 index 000000000..4ebca3934 --- /dev/null +++ b/ws23/bachelor/b6-avatavr/index.xml @@ -0,0 +1,25 @@ + + + + AvataVR on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/ + Recent content in AvataVR on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/features/ + The VR Testing Environment One goal of our project was to construct a virtual test environment where the interaction between a user and the instructor could be examined. The challenge consisted of creating such an environment while not making it distracting enough to turn the focus away from the character that has to be evaluated. For a majority of our testers this was the first time experiencing a surrounding in Virtual Reality Scene 1 Introduction inside the Apartment In this scene the player is greeted by the instructor, and asked to point out some different uses of electric current in a regular household. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b6-avatavr/tech-stack/ + The Oculus Headsets Thanks to the &ldquo;Institut für Kultur und Informatik an der HTW Berlin&rdquo;, which provided us with access to cutting-edge Oculus Headsets. The Quest 2 and Quest Pro, equipped with hand sensors, offered a seamless tracking experience, eliminating the need for external scanning setups. While these headsets proved to be revolutionary, navigating through app testing during the development phase presented its own set of challenges. Oculus Quest App Meta Developer Hub Building the VR Environment Due to the implementation of the OpenXR Library into the Game Engine Unity, we were able to develop an app that is able to be played on most of the VR Headsets available. + + + diff --git a/ws23/bachelor/b6-avatavr/karolina.jpg b/ws23/bachelor/b6-avatavr/karolina.jpg new file mode 100644 index 000000000..00fb11bac Binary files /dev/null and b/ws23/bachelor/b6-avatavr/karolina.jpg differ diff --git a/ws23/bachelor/b6-avatavr/nathalie.jpg b/ws23/bachelor/b6-avatavr/nathalie.jpg new file mode 100644 index 000000000..e11f783db Binary files /dev/null and b/ws23/bachelor/b6-avatavr/nathalie.jpg differ diff --git a/ws23/bachelor/b6-avatavr/robert.jpg b/ws23/bachelor/b6-avatavr/robert.jpg new file mode 100644 index 000000000..24c62d6ad Binary files /dev/null and b/ws23/bachelor/b6-avatavr/robert.jpg differ diff --git a/ws23/bachelor/b6-avatavr/room1Cropped.jpg b/ws23/bachelor/b6-avatavr/room1Cropped.jpg new file mode 100644 index 000000000..174edd608 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/room1Cropped.jpg differ diff --git a/ws23/bachelor/b6-avatavr/room2Cropped.jpg b/ws23/bachelor/b6-avatavr/room2Cropped.jpg new file mode 100644 index 000000000..f92da2f10 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/room2Cropped.jpg differ diff --git a/ws23/bachelor/b6-avatavr/se_logo.svg b/ws23/bachelor/b6-avatavr/se_logo.svg new file mode 100644 index 000000000..d1fe6c08b --- /dev/null +++ b/ws23/bachelor/b6-avatavr/se_logo.svg @@ -0,0 +1,227 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ws23/bachelor/b6-avatavr/tech-stack/index.html b/ws23/bachelor/b6-avatavr/tech-stack/index.html new file mode 100644 index 000000000..ad2959d31 --- /dev/null +++ b/ws23/bachelor/b6-avatavr/tech-stack/index.html @@ -0,0 +1,550 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B6 Bachelor + AvataVR +   + + + +

+
+
+ +

Team

+
    + +
  • Robert Dolibog
  • + +
  • Vladyslav Kyselov
  • + +
  • Imanuel Leiserowitz
  • + +
  • Nathalie Claire Huppert
  • + +
  • Karolina Serova
  • + +
  • Danylo Vovochok
  • + +
+ + +

Supervision

+ Martin Steinicke & Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + The Oculus Headsets + +

+
+
+

Thanks to the “Institut für Kultur und Informatik an der HTW Berlin”, which provided us with access to cutting-edge Oculus Headsets. The Quest 2 and Quest Pro, equipped with hand sensors, offered a seamless tracking experience, eliminating the need for external scanning setups. While these headsets proved to be revolutionary, navigating through app testing during the development phase presented its own set of challenges.

+
    +
  • Oculus Quest App
  • +
  • Meta Developer Hub
  • +
+
+
+ +
+

+ + Building the VR Environment + +

+
+
+

Due to the implementation of the OpenXR Library into the Game Engine Unity, we were able to develop an app that is able to be played on most of the VR Headsets available. +This implementation is fairly new and often times riddled with failures, especially in connection with the VR Headsets.

+
    +
  • Unity Game Engine
  • +
  • OpenXR library
  • +
+
+
+ +
+

+ + Motion Capturing + +

+
+
+

To capture the instructors movements we recorded his speech aswell as his movements, in the Lab of the creative media team of the “Institut für Kultur und Informatik an der HTW Berlin” which draws a rigged skeleton by capturing the movements from 8 angles.

+
    +
  • Captury (for real-time motion-capturing)
  • +
  • Blender (for cutting and cleaning the captured data)
  • +
  • Logic (Digital Audio Workstation for cleaning up audio clips)
  • +
+
+ +
+
+ +
+
+
+ +
+

+ + Communication and Project Management + +

+
+
+
    +
  • Citavi (literature database)
  • +
  • Mattermost (project board)
  • +
  • GitLab (repository)
  • +
  • Discord (online calls)
  • +
+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b6-avatavr/test1.jpg b/ws23/bachelor/b6-avatavr/test1.jpg new file mode 100644 index 000000000..1b923dbb6 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/test1.jpg differ diff --git a/ws23/bachelor/b6-avatavr/vladyslav.jpg b/ws23/bachelor/b6-avatavr/vladyslav.jpg new file mode 100644 index 000000000..b0dfc04e8 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/vladyslav.jpg differ diff --git a/ws23/bachelor/b6-avatavr/zippel1.jpg b/ws23/bachelor/b6-avatavr/zippel1.jpg new file mode 100644 index 000000000..a7d5eb01d Binary files /dev/null and b/ws23/bachelor/b6-avatavr/zippel1.jpg differ diff --git a/ws23/bachelor/b6-avatavr/zippel2.jpg b/ws23/bachelor/b6-avatavr/zippel2.jpg new file mode 100644 index 000000000..ce08476f2 Binary files /dev/null and b/ws23/bachelor/b6-avatavr/zippel2.jpg differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Arduino.png b/ws23/bachelor/b7-ar-interaction-city/Arduino.png new file mode 100644 index 000000000..0efbd7f39 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Arduino.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Com.png b/ws23/bachelor/b7-ar-interaction-city/Com.png new file mode 100644 index 000000000..1ca2eddb1 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Com.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Debian.png b/ws23/bachelor/b7-ar-interaction-city/Debian.png new file mode 100644 index 000000000..6d2bea04c Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Debian.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Hololens.png b/ws23/bachelor/b7-ar-interaction-city/Hololens.png new file mode 100644 index 000000000..13e90285d Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Hololens.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Logo.png b/ws23/bachelor/b7-ar-interaction-city/Logo.png new file mode 100644 index 000000000..63fea29f4 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Logo.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/MQTT.png b/ws23/bachelor/b7-ar-interaction-city/MQTT.png new file mode 100644 index 000000000..d68f974a8 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/MQTT.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/MRTK.png b/ws23/bachelor/b7-ar-interaction-city/MRTK.png new file mode 100644 index 000000000..d1aa00a03 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/MRTK.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Mattermost.svg b/ws23/bachelor/b7-ar-interaction-city/Mattermost.svg new file mode 100644 index 000000000..2fb76eaea --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/Mattermost.svg @@ -0,0 +1,84 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/RPI.png b/ws23/bachelor/b7-ar-interaction-city/RPI.png new file mode 100644 index 000000000..38da6cd96 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/RPI.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Unity.png b/ws23/bachelor/b7-ar-interaction-city/Unity.png new file mode 100644 index 000000000..60cb94022 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Unity.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/VS.png b/ws23/bachelor/b7-ar-interaction-city/VS.png new file mode 100644 index 000000000..3056911d2 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/VS.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/VSCode.png b/ws23/bachelor/b7-ar-interaction-city/VSCode.png new file mode 100644 index 000000000..6a2627431 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/VSCode.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/Wifi.png b/ws23/bachelor/b7-ar-interaction-city/Wifi.png new file mode 100644 index 000000000..444fc78d4 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/Wifi.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/chris.jpg b/ws23/bachelor/b7-ar-interaction-city/chris.jpg new file mode 100644 index 000000000..46bc75843 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/chris.jpg differ diff --git a/ws23/bachelor/b7-ar-interaction-city/features/index.html b/ws23/bachelor/b7-ar-interaction-city/features/index.html new file mode 100644 index 000000000..6ac78c9f1 --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/features/index.html @@ -0,0 +1,524 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B7 Bachelor + Vision.IO +   + + + +

+
+
+ +

Team

+
    + +
  • Christian Wolter
  • + +
  • Yasmine Haidri
  • + +
  • Jonas Mantay
  • + +
  • Timo Boomgaarden
  • + +
+ + +

Supervision

+ Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Communication + +

+
+
+

Wi-Fi

+

To ensure that our hardware can communicate smoothly in the same network, we use a Raspberry Pi as a WLAN hotspot. This ensures an uninterrupted connection and enables our devices to work together optimally.

+

MQTT

+

Communication takes place via MQTT, an open network protocol for machine-to-machine communication. +The Arduino uses the MQTT protocol to send messages to the Raspberry Pi, which acts as an MQTT broker. At the same time, the HoloLens glasses subscribe to these messages to receive real-time information. This seamless exchange enables efficient communication between the devices, with the Raspberry Pi acting as the central intermediary to establish the connection between the Arduino and the HoloLens.

+
+ Communication +
Communication Schema
+
+ +
+
+ +
+

+ + Interactions + +

+
+
+

There are an infinite number of ways to interact with objects in the real world. For our project, we decided on the three interactions of pressing, turning and removing/placing. These are represented by a button, a potentiometer and an NFC reader.

+

Button press

+

With the press of a button, we show what the industrial sector could look like in 2050. An industrial sector that is sustainable and has hardly any emissions.

+

Turn the knob

+

Decide for yourself what the energy mix will look like in 2050. You can choose between 0% and 100% sustainability in energy production using a rotary control.

+

Change of object

+

Remove a house from our city model and swap it for a different one. This allows you to decide how sustainable the housing sector will be in 2050. Should nothing change, or will everyone have solar panels on their roof?

+ +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/future/index.html b/ws23/bachelor/b7-ar-interaction-city/future/index.html new file mode 100644 index 000000000..1644189a0 --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/future/index.html @@ -0,0 +1,498 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B7 Bachelor + Vision.IO +   + + + +

+
+
+ +

Team

+
    + +
  • Christian Wolter
  • + +
  • Yasmine Haidri
  • + +
  • Jonas Mantay
  • + +
  • Timo Boomgaarden
  • + +
+ + +

Supervision

+ Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Future + +

+
+
+ Our project is very open and creates a basis for extended reality. You can consider incorporating new interactions, such as switches or touch panels, or changing the platform and running the project on a tablet or VR glasses. +New use cases can also be devised and tested. This project could be used very well in industry for maintenance work on machines and establish communication from the machine to the goggles. Further applications could be in a learning environment, where content could not only be shown, but things could be changed haptically, and you could directly see the impact. Be it in schools to present practical laboratory experiments that would otherwise not be possible in the classroom, or in medical training to practice surgical techniques. +This project creates the platform for all this and much more. +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/index.html b/ws23/bachelor/b7-ar-interaction-city/index.html new file mode 100644 index 000000000..76d26d29e --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/index.html @@ -0,0 +1,550 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B7 Bachelor + Vision.IO +   + + + +

+
+
+ +

Team

+
    + +
  • Christian Wolter
  • + +
  • Yasmine Haidri
  • + +
  • Jonas Mantay
  • + +
  • Timo Boomgaarden
  • + +
+ + +

Supervision

+ Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Vision.IO, a digital-haptic city model for information communication through XR/AR showcases the potential of merging augmented reality with physical interactions. This immersive experience transforms augmented reality into extended reality, offering an innovative way to perceive and interact with urban environments. +

+ + + + + + + + + + +
+ Logo + +
+ +
+

+ + Our Goal + +

+
+
+ With Vision.IO, we want to show that it is possible to expand augmented reality. Simple interactions, such as pressing a button, turning a knob or exchanging objects in the real world, change the augmented world. +To illustrate this interaction, our model shows what the world will look like in 2050. Based on the interactions, you can adjust the energy mix, rebuild factories or replace houses and thus decide how sustainable the individual sectors are. +
+
+ +
+

+ + The team + +

+
+
+ We are a team of four dedicated IMI students, who want to give you a new XR experience. +
+
+ + + + +
+ + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/index.xml b/ws23/bachelor/b7-ar-interaction-city/index.xml new file mode 100644 index 000000000..3c643dae0 --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/index.xml @@ -0,0 +1,39 @@ + + + + Vision.IO on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/ + Recent content in Vision.IO on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/features/ + Communication Wi-Fi To ensure that our hardware can communicate smoothly in the same network, we use a Raspberry Pi as a WLAN hotspot. This ensures an uninterrupted connection and enables our devices to work together optimally. MQTT Communication takes place via MQTT, an open network protocol for machine-to-machine communication. The Arduino uses the MQTT protocol to send messages to the Raspberry Pi, which acts as an MQTT broker. At the same time, the HoloLens glasses subscribe to these messages to receive real-time information. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/process/ + Organization The project began with a kick-off meeting in which the basic project idea was explained and requirements defined. We also immediately set weekly meeting times that fit into everyone&rsquo;s schedule. In the weeks that followed, we collected ideas for implementation and entered them as issues in our issue tracker, set up the individual parts of the project and started implementing solutions. In the weekly meetings, we informed each other about the project status and discussed our next steps. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/technology/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/technology/ + Organisation and Communication We used Mattermost for our internal communication and for issue tracking. Mattermost Development HoloLens To develop the AR/XR App that is running on the HoloLens 2 we used Visual Studio (Code) and Unity with MRTK2. Programming Language: C# Raspberry The Raspberry Pi runs the Debian Raspberry Distribution and is the communication middleware. It serves as the MQTT broker and the Wi-Fi hotspot that the Arduino and HoloLens connect too. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/b7-ar-interaction-city/future/ + Future Our project is very open and creates a basis for extended reality. You can consider incorporating new interactions, such as switches or touch panels, or changing the platform and running the project on a tablet or VR glasses. New use cases can also be devised and tested. This project could be used very well in industry for maintenance work on machines and establish communication from the machine to the goggles. + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/jonas.jpg b/ws23/bachelor/b7-ar-interaction-city/jonas.jpg new file mode 100644 index 000000000..e11a4dd9a Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/jonas.jpg differ diff --git a/ws23/bachelor/b7-ar-interaction-city/model.png b/ws23/bachelor/b7-ar-interaction-city/model.png new file mode 100644 index 000000000..343dae098 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/model.png differ diff --git a/ws23/bachelor/b7-ar-interaction-city/process/index.html b/ws23/bachelor/b7-ar-interaction-city/process/index.html new file mode 100644 index 000000000..8ce3916ee --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/process/index.html @@ -0,0 +1,539 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B7 Bachelor + Vision.IO +   + + + +

+
+
+ +

Team

+
    + +
  • Christian Wolter
  • + +
  • Yasmine Haidri
  • + +
  • Jonas Mantay
  • + +
  • Timo Boomgaarden
  • + +
+ + +

Supervision

+ Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Organization + +

+
+
+ The project began with a kick-off meeting in which the basic project idea was explained and requirements defined. We also immediately set weekly meeting times that fit into everyone’s schedule. In the weeks that followed, we collected ideas for implementation and entered them as issues in our issue tracker, set up the individual parts of the project and started implementing solutions. In the weekly meetings, we informed each other about the project status and discussed our next steps. +As the project progressed, we got a better and better overview of exactly where we wanted to go and were therefore able to better define our goals and work towards them. +
+
+ +
+

+ + Concept & Story + +

+
+
+ While the concept of our project was clear from the start, we had to think more about the narrative. It was about building a good narrative to show the different interactions. +We agreed that we wanted to do something about the environment, as this is also compatible with a city model. In the end, we came up with the idea of showing how the world would change if we continued to live the way we do or relied on alternative and sustainable energy sources, built houses more sustainably and also made industry more sustainable. +
+
+ +
+

+ + Development + +

+
+
+ We initially split the development into three subprojects. We had to create a basis for the Arduino, the Raspberry had to be set up and the Unity project for the HoloLens also needed a basis. We then started to establish communication between the Arduino and the Raspberry Pi and between the Raspberry Pi and the HoloLens. +Once the communication between the hardware was working, we were able to focus on improving it and also building the Unity model so that the data sent from the Arduino to the HoloLens also controlled interactions in the HoloLens. +
+
+ + + + + + + + + + +
+ City Model + +
City Model
+ +
+ + +
+ + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/technology/index.html b/ws23/bachelor/b7-ar-interaction-city/technology/index.html new file mode 100644 index 000000000..e23ca88e6 --- /dev/null +++ b/ws23/bachelor/b7-ar-interaction-city/technology/index.html @@ -0,0 +1,595 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ B7 Bachelor + Vision.IO +   + + + +

+
+
+ +

Team

+
    + +
  • Christian Wolter
  • + +
  • Yasmine Haidri
  • + +
  • Jonas Mantay
  • + +
  • Timo Boomgaarden
  • + +
+ + +

Supervision

+ Alexander Kramer + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Organisation and Communication + +

+
+
+

We used Mattermost for our internal communication and for issue tracking.

+ +
+
+ +
+

+ + Development + +

+
+
+

HoloLens

+

To develop the AR/XR App that is running on the HoloLens 2 we used Visual Studio (Code) and Unity with MRTK2.

+
    +
  • Programming Language: C#
  • +
+

Raspberry

+

The Raspberry Pi runs the Debian Raspberry Distribution and is the communication middleware. +It serves as the MQTT broker and the Wi-Fi hotspot that the Arduino and HoloLens connect too. +The Raspberry Pi was set up with the CLI

+
    +
  • Programming Language: Bash
  • +
+

Arduino

+

The Arduino was developed using the Arduino IDE

+
    +
  • Programming Language: C++
  • +
+ + +
+
+ +
+

+ + Hardware + +

+
+
+

Interactions

+
    +
  • Arduino UNO WiFi Rev2
  • +
  • Button
  • +
  • Potentiometer
  • +
  • PN532 NFC/RFID Reader
  • +
  • LED
  • +
+

Communication

+
    +
  • Raspberry Pi 3
  • +
+

XR/AR Apps

+
    +
  • HoloLens 2
  • +
+ + +
+
+ + +
+ + + + + diff --git a/ws23/bachelor/b7-ar-interaction-city/timo.jpg b/ws23/bachelor/b7-ar-interaction-city/timo.jpg new file mode 100644 index 000000000..0b8cff764 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/timo.jpg differ diff --git a/ws23/bachelor/b7-ar-interaction-city/yasmine.jpg b/ws23/bachelor/b7-ar-interaction-city/yasmine.jpg new file mode 100644 index 000000000..afaba5d33 Binary files /dev/null and b/ws23/bachelor/b7-ar-interaction-city/yasmine.jpg differ diff --git a/ws23/bachelor/index.html b/ws23/bachelor/index.html new file mode 100644 index 000000000..c7fef6201 --- /dev/null +++ b/ws23/bachelor/index.html @@ -0,0 +1,138 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ ws23 + +   + + + +

+
+
+ + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ +

+ + +
+ + + + + diff --git a/ws23/bachelor/index.xml b/ws23/bachelor/index.xml new file mode 100644 index 000000000..1aaad4b45 --- /dev/null +++ b/ws23/bachelor/index.xml @@ -0,0 +1,11 @@ + + + + IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/bachelor/ + Recent content on IMI Showtime + Hugo + de-de + + + diff --git a/ws23/debug/index.html b/ws23/debug/index.html new file mode 100644 index 000000000..5b0e1f820 --- /dev/null +++ b/ws23/debug/index.html @@ -0,0 +1,268 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + + + + + + + + + + + + +
+

+ DEBUG + + + + + + + + winter + + + + + + 23/24 + + + +   +

+ +
+
+ + + + +

Explore the projects of previous semesters - or see + a complete archive overview.

+ + +
+ +
+ + +
+ +
+ + + + + + +
+ +

+

B1 / Bachelor /showtime-website/ws23/bachelor/b1-peek/

+ +

Supervisor: Prof. Dr.-Ing. David Strippgen

+

title = Peek

+

subtitle = Peek

+

claim = ..

+

abstract =

+ +

card_description = Tired of looking through thousands of documents to get the data you need? Well, we are here to help! With Peek you simply connect to your MongoDB database and let our interactive charts do the filtering. All query-free!

+
+ +

+

B2 / Bachelor /showtime-website/ws23/bachelor/b2-mobile-multitouch-multiplayer/

+ +

Supervisor: Prof. Dr. Tobias Lenz

+

title = Mobile Multitouch Multiplayer - Spike Shielders

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Introducing the Mobile Multitouch Multiplayer Project - Spike Shielders: Dive into the jungle with Bobola and save the day!

+
+ +

+

B4 / Bachelor /showtime-website/ws23/bachelor/b4-hypnobuddy/

+ +

Supervisor: Andreas Lehner

+

title = HypnoBuddy

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Hypno Buddy, an innovative app, enhances hypnotherapy effectiveness, especially for children and adolescents. Facilitating seamless communication between therapists, young clients, and parents, it empowers all parties.

+
+ +

+

B5 / Bachelor /showtime-website/ws23/bachelor/b5-smartlibrary/

+ +

Supervisor: Linda Fernsel

+

title = SmartLibrary - It's A Match!

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = SmartLibrary is an innovative Moodle plugin developed to promote self-regulated learning by delivering educational resources from online learning platforms such as Coursera and Codecademy.

+
+ +

+

B6 / Bachelor /showtime-website/ws23/bachelor/b6-avatavr/

+ +

Supervisor: Martin Steinicke & Alexander Kramer

+

title = AvataVR

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Exploring the Impact of Diverse NPC Representations in VR Learning Environments

+
+ +

+

B7 / Bachelor /showtime-website/ws23/bachelor/b7-ar-interaction-city/

+ +

Supervisor: Alexander Kramer

+

title = Vision.IO

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Vision.IO, a digital-haptic city model for information communication through XR/AR showcases the potential of merging augmented reality with physical interactions. This immersive experience transforms augmented reality into extended reality, offering an innovative way to perceive and interact with urban environments.

+
+ +

+

M1 / Master /showtime-website/ws23/master/m1-somethinar/

+ +

Supervisor: David Strippgen, Robert Meyer, Fabian Quosdorf

+

title = Somethin.AR

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Somethin.AR is an immersive Multiplayer Mixed-Reality Game where you and your friends can team up in real-time to capture small invading creatures while the game seamlessly blends your surroundings with an extended virtual world, transforming your room into an exciting new environment.

+
+ +

+

M3 / Master /showtime-website/ws23/master/m3-lep/

+ +

Supervisor: Prof.Dr. Gefei Zhang

+

title = LEP

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Welcome to LEP - Powered by TimeFold. Revolutionize the academic schedule planning with our smart, automated solution!

+
+ +

+

M4 / Master /showtime-website/ws23/master/m4-gamingforthefuture/

+ +

Supervisor: David Mueller

+

title = M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg)

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = Aquasolace - Gaming For Future

+
+ +

+

M5 / Master /showtime-website/ws23/master/m5-mov.io/

+ +

Supervisor: D. Koschnick

+

title = mov.io

+

subtitle =

+

claim =

+

abstract =

+ +

card_description = mov.io - a revolutionary solution designed to tackle desocialization among remote workers.

+
+ +
+ + + + + + diff --git a/ws23/index.html b/ws23/index.html new file mode 100644 index 000000000..c9a243b01 --- /dev/null +++ b/ws23/index.html @@ -0,0 +1,327 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + + + + + + + + + + + +
+

+ Archive + + + + + + + + winter + + + + + + 23/24 + + + +   +

+ +
+
+ + + + +

Explore the projects of previous semesters - or see + a complete archive overview.

+ + +
+ +
+ + +
+ +
+ + + + + + +
+ +

+
+
+ B1 Bachelor + +

Peek

+
+

Tired of looking through thousands of documents to get the data you need? Well, we are here to help! With Peek you simply connect to your MongoDB database and let our interactive charts do the filtering. All query-free!

+ -> Details +
+ + + + + Peek +
+
+ +

+
+
+ B2 Bachelor + +

Mobile Multitouch Multiplayer - Spike Shielders

+
+

Introducing the Mobile Multitouch Multiplayer Project - Spike Shielders: Dive into the jungle with Bobola and save the day!

+ -> Details +
+ + + + + Mobile Multitouch Multiplayer - Spike Shielders +
+
+ +

+
+
+ B4 Bachelor + +

HypnoBuddy

+
+

Hypno Buddy, an innovative app, enhances hypnotherapy effectiveness, especially for children and adolescents. Facilitating seamless communication between therapists, young clients, and parents, it empowers all parties.

+ -> Details +
+ + + + + HypnoBuddy +
+
+ +

+
+
+ B5 Bachelor + +

SmartLibrary - It's A Match!

+
+

SmartLibrary is an innovative Moodle plugin developed to promote self-regulated learning by delivering educational resources from online learning platforms such as Coursera and Codecademy.

+ -> Details +
+ + + + + SmartLibrary - It's A Match! +
+
+ +

+
+
+ B6 Bachelor + +

AvataVR

+
+

Exploring the Impact of Diverse NPC Representations in VR Learning Environments

+ -> Details +
+ + + + + AvataVR +
+
+ +

+
+
+ B7 Bachelor + +

Vision.IO

+
+

Vision.IO, a digital-haptic city model for information communication through XR/AR showcases the potential of merging augmented reality with physical interactions. This immersive experience transforms augmented reality into extended reality, offering an innovative way to perceive and interact with urban environments.

+ -> Details +
+ + + + + Vision.IO +
+
+ +

+
+
+ M1 Master + +

Somethin.AR

+
+

Somethin.AR is an immersive Multiplayer Mixed-Reality Game where you and your friends can team up in real-time to capture small invading creatures while the game seamlessly blends your surroundings with an extended virtual world, transforming your room into an exciting new environment.

+ -> Details +
+ + + + + Somethin.AR +
+
+ +

+
+
+ M3 Master + +

LEP

+
+

Welcome to LEP - Powered by TimeFold. Revolutionize the academic schedule planning with our smart, automated solution!

+ -> Details +
+ + + + + LEP +
+
+ +

+
+
+ M4 Master + +

M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg)

+
+

Aquasolace - Gaming For Future

+ -> Details +
+ + + + + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +
+
+ +

+
+
+ M5 Master + +

mov.io

+
+

mov.io - a revolutionary solution designed to tackle desocialization among remote workers.

+ -> Details +
+ + + + + mov.io +
+
+ +
+ + + + + + diff --git a/ws23/index.xml b/ws23/index.xml new file mode 100644 index 000000000..ee4027981 --- /dev/null +++ b/ws23/index.xml @@ -0,0 +1,18 @@ + + + + ws23 on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/ + Recent content in ws23 on IMI Showtime + Hugo + de-de + + + ws23 + https://JonasTrenkler.github.io/showtime-website/ws23/debug/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/debug/ + + + + diff --git a/ws23/master/index.html b/ws23/master/index.html new file mode 100644 index 000000000..aecf3c866 --- /dev/null +++ b/ws23/master/index.html @@ -0,0 +1,134 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ ws23 + +   + + + +

+
+
+ + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ +

+ + +
+ + + + + diff --git a/ws23/master/index.xml b/ws23/master/index.xml new file mode 100644 index 000000000..360c14ca2 --- /dev/null +++ b/ws23/master/index.xml @@ -0,0 +1,11 @@ + + + + IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/master/ + Recent content on IMI Showtime + Hugo + de-de + + + diff --git a/ws23/master/m1-somethinar/cat.jpg b/ws23/master/m1-somethinar/cat.jpg new file mode 100644 index 000000000..3ee30f58c Binary files /dev/null and b/ws23/master/m1-somethinar/cat.jpg differ diff --git a/ws23/master/m1-somethinar/challenges/index.html b/ws23/master/m1-somethinar/challenges/index.html new file mode 100644 index 000000000..e283f5fa1 --- /dev/null +++ b/ws23/master/m1-somethinar/challenges/index.html @@ -0,0 +1,559 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Integrating Meta SDKs with Unity + +

+
+
+

Integrating the Meta XR All-in-One SDK from Oculus wasn’t as seamless as we hoped it would be. The setup process for this package was complex and sometimes inconsistent. We were required to adhere to a strict implementation with limited flexibility for customization.

+

Additionally, the SDK tends to generate a lot of debug messages in the console, which are often unnecessary and can hide more critical information. Another hurdle is the SDK’s “black box” backend, which can lead to mysterious errors without a clear source or solution. The lack of comprehensive documentation further complicates troubleshooting and forced us to rewrite scripts without a clear guide.

+

We could really feel that we were working with a software that is still in its early stages and adapted simultaneously as the SDK released new updates, each bringing quite a few changes. It made us read the documentation with great attention, and even fix some bugs in the Meta Colocation Package itself.

+ +
+
+ +
+

+ + Networking with Photon Fusion V2 + +

+
+
+

We used Photon Fusion V2 to connect players together in our game. This networking tool is important as it lets everyone play in the same virtual space at the same time, no matter where they are. It’s supposed to help us make sure that all the players see the same things in the game and that everything happens at the same time for everyone.

+

But when we started to use Photon Fusion, we ran into some problems. One of the big challenges was keeping everything in the game synchronized, as the framework doesn’t handle sending a lot of game information over the internet, especially the mesh data of the room, all at once. A complicated fact was that the room data wasn’t inherently designed for a multiplayer setting. We had to make sure that the game objects didn’t end up in the wrong places and that the players didn’t see things happening at different times. We had to develop in many iterations, so that in the end all players were in synch. It took a lot of debugging and testing and the lack of documentation added an extra layer of complexity to the process, but with persistence we made it work.

+ +
+
+ +
+

+ + Creating flawless immersion for a Mixed Reality Game + +

+
+
+

When it comes to mixed reality, placing virtual objects in the same space as real-world items is crucial for maintaining the illusion. Equally important is ensuring that players don’t appear to walk through physical objects or other people, which can break the sense of immersion or even cause them harm. One solution to this is using the Depth API, which is designed to understand and map the physical space. However, the Depth API isn’t always up to the task — it can be slow, and sometimes the results don’t look quite right, which can be surprising for users and disrupt the seamless blend of virtual and real that we were aiming for. Also it did not allow us to show a virtual world behind the walls of the physical room, a feature that we knew we really wanted to have in our game. With the Depth API, the physical world would have overlapped the virtual one.

+

That’s why we decided not to use the Depth API and came up with some custom solutions, e.g. seeing a circle around the heads of the other players through which you can still see them, even if they are standing in front of other virtual objects. This assures that everyone will have a pleasant and safe game experience.

+
+
+ Picture of a virtual world mixing with the real world +
+
+ +
+
+ +
+

+ + Developing in Unity for XR + +

+
+
+

Putting together Unity and XR turned out to be more complicated than we initially expected. There’s a lot to think about, especially when it comes to getting all the interactive bits — the objects you can touch and move around — to work right. Things like adjusting colliders for XR took a lot of trial and error.

+

Then there’s the look and sound of the game. In an XR game, everything has to feel real, like it’s actually there with you. Coming from a background of making regular flat-screen games, we really had to develop a good concept in order to ensure that the 3D objects and sounds felt natural in a XR world. We had to play around with the graphics and audio to make them fit into this new kind of game. It was really about finding a balance between impressive 3D graphics in the game and a good performance and smooth gameplay experience, since the information in the world gets shared across the network with the other players. Things like adjusting the post-processing and shaders played an important part in this.

+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/concept.png b/ws23/master/m1-somethinar/concept.png new file mode 100644 index 000000000..9097d8619 Binary files /dev/null and b/ws23/master/m1-somethinar/concept.png differ diff --git a/ws23/master/m1-somethinar/cosmicVR.jpeg b/ws23/master/m1-somethinar/cosmicVR.jpeg new file mode 100644 index 000000000..e44d18eb3 Binary files /dev/null and b/ws23/master/m1-somethinar/cosmicVR.jpeg differ diff --git a/ws23/master/m1-somethinar/diro.png b/ws23/master/m1-somethinar/diro.png new file mode 100644 index 000000000..21efee05d Binary files /dev/null and b/ws23/master/m1-somethinar/diro.png differ diff --git a/ws23/master/m1-somethinar/future/index.html b/ws23/master/m1-somethinar/future/index.html new file mode 100644 index 000000000..e89dc8b23 --- /dev/null +++ b/ws23/master/m1-somethinar/future/index.html @@ -0,0 +1,581 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Further Potential of our Game + +

+
+
+ During the initial stages of our game development, we brainstormed numerous ideas that, due to the fact that we spent a lot of time working on the colocation, couldn’t be realized in the current version. This section highlights some of these concepts to showcase the underlying potential and future directions our game could take. +
+
+ +
+

+ + Collecting upgrades and special skills + +

+
+
+

One idea we have is to introduce a system where players can collect upgrades and special skills throughout the game. This would add an extra layer of strategy and customization, allowing players to add more variation to their gameplay.

+
+
+ Picture of a Ball with Points +
Extra Points
+
+
+
+
+ +
+

+ + Wider range of weapons + +

+
+
+

We’re looking to expand our range of in-game equipment by adding different types of weapons for players to use. This will bring more variety to the game. Additionally, players will have the option to take these weapons from each other, creating a strategic element where they can hinder the opposing team’s ability to score points.

+
+
+ Picture of 2 playful weapons +
More Weapon Options
+
+
+
+
+ +
+

+ + More interactable objects + +

+
+
+

Another idea is to increase the number of interactable objects within the game world. These objects would provide more opportunities for interaction and exploration, enriching the game’s environment and player engagement.

+
+
+ Picture of interactable virtual objects +
More Interactable Options
+
+
+
+
+ +
+

+ + Placing virtual barriers to promote movement + +

+
+
+

We’re also thinking about incorporating e.g. virtual walls in the game’s design. These walls would encourage players to move around more, adding a physical aspect to the gameplay and making it more dynamic and immersive.

+
+
+ Picture of virtual walls +
Virtual wall in a room
+
+
+
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/gameplay/index.html b/ws23/master/m1-somethinar/gameplay/index.html new file mode 100644 index 000000000..20f263377 --- /dev/null +++ b/ws23/master/m1-somethinar/gameplay/index.html @@ -0,0 +1,565 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Put your headset on and enter another world + +

+
+
+

Pop on the Meta Quest headset and jump into a different world that’s full of fun and surprises. You’ll find yourself surronded by a virtual forest behind your own walls where you can explore, discover, and just have a good time with your friends. It’s not just about playing; it’s about stepping into a whole new place that feels as real as your sourroundings.

+
+
+ Picture of Gameplay +
+
+
+
+ +
+

+ + Defend your space against little creatures + +

+
+
+

Get ready to guard your territory! In this game, you’ll work with others to catch cheeky little creatures that have invaded your space – your own living room that you can still see while playing the game. It’s a fun and playful way to protect your real world from the virtual – capture these intruders, and ensure they don’t end up crawling all over the place.

+
+
+ Picture of Gameplay +
+
+
+
+ +
+

+ + Play together and compete with your friends + +

+
+
+

Virtual Reality has been around for a while, but rarely in a multiplayer mode where everyone meets in the same place. Round up your friends for our mixed-reality game where you can team up or go head-to-head. Whether you’re collaborating to beat the highest score or competing against each other, it’s all about having fun and sharing the moment. Whoever catches the most creatures wins! This is a great way to connect, challenge one another, and share a laugh or two, no matter where you are.

+
+
+ Picture of Gameplay +
+
+
+
+ +
+

+ + Experience a mixed world around you + +

+
+
+

Watch as your own room transforms into a gaming zone with mixed reality. Game elements blend smoothly with your environment, turning familiar spaces into new arenas for play. You can aim at your walls to destroy them and see a virtual world behind them, a beautiful forest where the little creatures will come running from, jumping right into your living room. It’s a unique way to see the world around you come alive with virtual surprises, offering an immersive gaming experience right where you are.

+
+
+ Picture of Gameplay +
+
+
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/github.png b/ws23/master/m1-somethinar/github.png new file mode 100644 index 000000000..898121e15 Binary files /dev/null and b/ws23/master/m1-somethinar/github.png differ diff --git a/ws23/master/m1-somethinar/index.html b/ws23/master/m1-somethinar/index.html new file mode 100644 index 000000000..bb273b3c3 --- /dev/null +++ b/ws23/master/m1-somethinar/index.html @@ -0,0 +1,553 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Somethin.AR is an immersive Multiplayer Mixed-Reality Game where you and your friends can team up in real-time to capture small invading creatures while the game seamlessly blends your surroundings with an extended virtual world, transforming your room into an exciting new environment. +

+ +
+

+ + Our Goal + +

+
+
+

In recent years, the technology landscape has seen the emergence of various terms like XR, AR, and VR, all centered around a common concept: expanding and enhancing our perception of the world with virtual or mixed reality applications. While numerous XR games have already flooded the market, there has been a notable gap in offerings for shared experiences.

+

Enter Somethin.AR, our visionary project born out of the desire to create an immersive, shared virtual experience where the boundaries between the digital and the real world dissolve. Our mission was clear: to enable people to spend quality time with their friends while exploring this immersive fusion of reality and virtuality. To make that happen, we put on our Meta Quest 3 headsets and pushed the boundaries of the ever-changing technology.

+ +
+
+ +
+

+ + The Team + +

+
+
+

All of us worked together to provide the best shared experience we could, using our power as a team to tackle this challenge from different perspectives.

+

When we began this project, our team members had different levels of experience. Ruslan and Robin took charge of colocation, making multiplayer mode possible in our game. They dedicated their efforts to researching and testing methods for sharing room mesh data over the network with other players. Juri handled the implementation of enemy logic using AI and managed the game state, ensuring a seamless gaming experience. Diro was responsible for improving the game’s overall look and feel, smoothly integrating the virtual and real worlds. Meanwhile, for Julia, it marked her first venture into game development. She focused on designing UI elements and interactions in VR with the Meta Quest headsets and played a key role in project management, overseeing the organization of the project as well as the showtime.

+ +
+
+ + + + +
+ + + + + diff --git a/ws23/master/m1-somethinar/index.xml b/ws23/master/m1-somethinar/index.xml new file mode 100644 index 000000000..0f61c9cab --- /dev/null +++ b/ws23/master/m1-somethinar/index.xml @@ -0,0 +1,53 @@ + + + + Somethin.AR on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/ + Recent content in Somethin.AR on IMI Showtime + Hugo + de-de + + + Terminology + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/terminology/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/terminology/ + Terminology Even though we&rsquo;ve spent a lot of time working with extended reality, we sometimes find ourselves questioning the precise terms used in this field. So, we thought it couldn&rsquo;t be different for you and decided to create a brief guide to some of the most frequently used terms in the world of XR: Virtual Reality (VR) Virtual Reality is a fully immersive digital environment where the user is completely surrounded by a computer-generated world. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/process/ + Collecting ideas At the beginning of our project, we had a clear goal in mind: to create a game using the Meta Quest 3 headsets provided by HTW, with a focus on multiplayer elements and mixed reality features. To get our project off the ground, we started with some hands-on exploration. We tested various games that were compatible with the Quest 3, and we even took a trip to Cosmic. + + + Gameplay + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/gameplay/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/gameplay/ + Put your headset on and enter another world Pop on the Meta Quest headset and jump into a different world that&rsquo;s full of fun and surprises. You&rsquo;ll find yourself surronded by a virtual forest behind your own walls where you can explore, discover, and just have a good time with your friends. It&rsquo;s not just about playing; it&rsquo;s about stepping into a whole new place that feels as real as your sourroundings. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/challenges/ + Integrating Meta SDKs with Unity Integrating the Meta XR All-in-One SDK from Oculus wasn&rsquo;t as seamless as we hoped it would be. The setup process for this package was complex and sometimes inconsistent. We were required to adhere to a strict implementation with limited flexibility for customization. Additionally, the SDK tends to generate a lot of debug messages in the console, which are often unnecessary and can hide more critical information. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/tech-stack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/tech-stack/ + VR Headsets Oculus We used the Meta Quest 3 VR headsets and the Oculus software with Unity for running and testing our application. Game Engine Unity Unity provided the core framework for developing our game, offering both 2D and 3D capabilities essential for our project. Networking Photon Fusion 2 We chose Photon Fusion 2 for its handling capabilities of multiplayer game synchronization and networking. XR Interactions Meta XR All-in-One SDK The Meta XR All-in-One SDK was our key asset for implementing immersive XR interactions in our game. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m1-somethinar/future/ + Further Potential of our Game During the initial stages of our game development, we brainstormed numerous ideas that, due to the fact that we spent a lot of time working on the colocation, couldn&rsquo;t be realized in the current version. This section highlights some of these concepts to showcase the underlying potential and future directions our game could take. Collecting upgrades and special skills One idea we have is to introduce a system where players can collect upgrades and special skills throughout the game. + + + diff --git a/ws23/master/m1-somethinar/julia.jpg b/ws23/master/m1-somethinar/julia.jpg new file mode 100644 index 000000000..4ae4af506 Binary files /dev/null and b/ws23/master/m1-somethinar/julia.jpg differ diff --git a/ws23/master/m1-somethinar/juri.png b/ws23/master/m1-somethinar/juri.png new file mode 100644 index 000000000..280da8ee8 Binary files /dev/null and b/ws23/master/m1-somethinar/juri.png differ diff --git a/ws23/master/m1-somethinar/kitty.jpg b/ws23/master/m1-somethinar/kitty.jpg new file mode 100644 index 000000000..dc5254fa9 Binary files /dev/null and b/ws23/master/m1-somethinar/kitty.jpg differ diff --git a/ws23/master/m1-somethinar/objects.png b/ws23/master/m1-somethinar/objects.png new file mode 100644 index 000000000..11182cdc8 Binary files /dev/null and b/ws23/master/m1-somethinar/objects.png differ diff --git a/ws23/master/m1-somethinar/personas.png b/ws23/master/m1-somethinar/personas.png new file mode 100644 index 000000000..8cdbc07a1 Binary files /dev/null and b/ws23/master/m1-somethinar/personas.png differ diff --git a/ws23/master/m1-somethinar/process/index.html b/ws23/master/m1-somethinar/process/index.html new file mode 100644 index 000000000..0aff45735 --- /dev/null +++ b/ws23/master/m1-somethinar/process/index.html @@ -0,0 +1,647 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ + +
+

+ + Collecting ideas + +

+
+
+

At the beginning of our project, we had a clear goal in mind: to create a game using the Meta Quest 3 headsets provided by HTW, with a focus on multiplayer elements and mixed reality features. To get our project off the ground, we started with some hands-on exploration. We tested various games that were compatible with the Quest 3, and we even took a trip to Cosmic.VR in Berlin, a virtual reality studio where friends can meet and enjoy VR games together.

+
+
+ Picture of 3 People with a VR headset +
Excursion at Cosmic.VR
+
+
+
+
+ +
+

+ + Developing a Concept + +

+
+
+

Inspired by what worked well and what didn’t after these experiences, we began to outline the essential requirements for our product. We envisioned a family-friendly game that would offer players a quick yet immersive experience that they can share together. The key idea was to introduce an extended world that would leave players with a ‘wow’ feeling, all while keeping them active and moving.

+
+
+ Picture of Brainstorming Board +
Brainstorming Session
+
+
+
+
+ +
+

+ + Understanding our Audience + +

+
+
+ Once we had a rough concept in mind, we dug deeper to understand our target audience better. We created personas and user experience maps to deepen our understanding of the players and figure out what would work best in the Showtime setting. With these insights we refined our game concept and mapped out the entire game process using a user story map and a flowchart. +
+
+ +
+ + + + + + + + +
+ Picture of Personas and User Experience Map + +
Personas & User Experience Maps
+ +
+
+
+

+ + Defining Priorities + +

+
+
+ The project was started with the mindset that we want to try out these new and fast-evolving technologies and see what is currently possible with them. Due to the fact that there were so many unanswered questions right from the start, we soon realized that we were a bit to eager with all the features we listed for our final game, so we left some for future releases, but still kept our focus on what we envisioned for the overall gameplay: a fun fast-paced mixed reality game to share with friends with focus on collaboration, movement and impressive scenery. +
+
+ +
+

+ + Conducting Technical Research + +

+
+
+

XR technology is a rapidly evolving field, as we discovered firsthand during our research into the Meta XR SDK and Oculus Integration and Interaction SDK. We delved deep into XR technology using Unity, exploring how we could use it for our project. Our focus was on synchronization across multiple headsets and creating a mixed world within the game that smoothly combined elements from both the virtual and the real world, in line with our desired effect.

+

Our research also led us to investigate the transfer and sharing of spatial data for colocation features in our game, as well as the interaction between real-world objects and virtual elements. We aimed to integrate these components for the Meta Quest 3, requiring us to understand various concecpts of XR technology to build our game.

+ +
+
+ +
+

+ + Creating a Product Backlog + +

+
+
+

Having a clear vision in mind, we got down to the task of creating our product backlog. This comprehensive list included all the features needed for our MVP (Minimum Viable Product) as well as those we planned for future releases. Building on the User Story Map we developed during the conceptual phase, we translated it into practical tickets, seen from the perspective of our users. These tickets included User Stories, Features, and specific tasks.

+

For project management we made use of project planning tools on Github. We organized our work into weekly or bi-weekly sprints, each with a different focus. Whether it was asset design, network logic, game state implementation, UI design, or other crucial aspects of the project, we assigned the tasks to the team member who wanted to tackle it for the upcoming week.

+ +
+
+ +
+ + + + + + + + +
+ Picture of User Story Map + +
User Story Map
+ +
+
+
+ + + + + + + + +
+ Picture of Github Project Board + +
Github Project Board
+ +
+
+
+

+ + Implementing and Testing our Features + +

+
+
+

It was finally time to get some actual programming work done, and let us tell you, we rolled up our sleeves and got our hands dirty! The implementation phase was quite an adventure, filled with its fair share of challenges. We encountered unexpected bugs in the SDKs we were working with and had to consistently test and reevaluate our concepts to ensure everything played nice with the Meta Quest 3 and the provided SDK, all within the Unity environment.

+

Picture this: we were all gathered in a room, each with our headsets on, gesturing and pressing invisible buttons in the air, probably looking quite strange to anyone on the outside. But in the end, all that effort paid off, and we’re thrilled to have created something awesome to share with all of you.

+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/robin.jpg b/ws23/master/m1-somethinar/robin.jpg new file mode 100644 index 000000000..e9a6f7717 Binary files /dev/null and b/ws23/master/m1-somethinar/robin.jpg differ diff --git a/ws23/master/m1-somethinar/ruslan.jpg b/ws23/master/m1-somethinar/ruslan.jpg new file mode 100644 index 000000000..552dac597 Binary files /dev/null and b/ws23/master/m1-somethinar/ruslan.jpg differ diff --git a/ws23/master/m1-somethinar/screenshot1.png b/ws23/master/m1-somethinar/screenshot1.png new file mode 100644 index 000000000..2964468dd Binary files /dev/null and b/ws23/master/m1-somethinar/screenshot1.png differ diff --git a/ws23/master/m1-somethinar/screenshot2.png b/ws23/master/m1-somethinar/screenshot2.png new file mode 100644 index 000000000..cec9aa465 Binary files /dev/null and b/ws23/master/m1-somethinar/screenshot2.png differ diff --git a/ws23/master/m1-somethinar/screenshot3.png b/ws23/master/m1-somethinar/screenshot3.png new file mode 100644 index 000000000..1fcb39944 Binary files /dev/null and b/ws23/master/m1-somethinar/screenshot3.png differ diff --git a/ws23/master/m1-somethinar/screenshot4.png b/ws23/master/m1-somethinar/screenshot4.png new file mode 100644 index 000000000..fe55b817d Binary files /dev/null and b/ws23/master/m1-somethinar/screenshot4.png differ diff --git a/ws23/master/m1-somethinar/somethinAR-logo-min.png b/ws23/master/m1-somethinar/somethinAR-logo-min.png new file mode 100644 index 000000000..66b08fd99 Binary files /dev/null and b/ws23/master/m1-somethinar/somethinAR-logo-min.png differ diff --git a/ws23/master/m1-somethinar/tech-stack/index.html b/ws23/master/m1-somethinar/tech-stack/index.html new file mode 100644 index 000000000..0c9c8c6a6 --- /dev/null +++ b/ws23/master/m1-somethinar/tech-stack/index.html @@ -0,0 +1,628 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ +
+ + + + + + + + +
+ Picture of Our Tech Stack + +
+
+
+

+ + VR Headsets + +

+
+
+

Oculus

+
    +
  • We used the Meta Quest 3 VR headsets and the Oculus software with Unity for running and testing our application.
  • +
+ +
+
+ +
+

+ + Game Engine + +

+
+
+

Unity

+
    +
  • Unity provided the core framework for developing our game, offering both 2D and 3D capabilities essential for our project.
  • +
+ +
+
+ +
+

+ + Networking + +

+
+
+

Photon Fusion 2

+
    +
  • We chose Photon Fusion 2 for its handling capabilities of multiplayer game synchronization and networking.
  • +
+ +
+
+ +
+

+ + XR Interactions + +

+
+
+

Meta XR All-in-One SDK

+
    +
  • The Meta XR All-in-One SDK was our key asset for implementing immersive XR interactions in our game.
  • +
+ +
+
+ +
+

+ + Concept & Design + +

+
+
+

Miro

+
    +
  • Miro was essential for our team’s idea sharing and visual brainstorming, enhancing our design process.
  • +
+

Figma

+
    +
  • Figma was our go-to tool for designing UI elements.
  • +
+ +
+
+ +
+

+ + Project Planning & Product Backlog + +

+
+
+

Github

+
    +
  • Github & Github Projects was our main hub for everything that had to do with project planning: writing tickets with user stories, features and tasks and creating weekly sprints.
  • +
+ +
+
+ +
+

+ + Communication + +

+
+
+

Zoom

+
    +
  • When we couldn’t meet in person, we used Zoom to make our meetings twice a week.
  • +
+

Discord

+
    +
  • Discord was our main platform for daily team communication and project coordination, including regular interactions with our supervisors.
  • +
+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/techstack.png b/ws23/master/m1-somethinar/techstack.png new file mode 100644 index 000000000..9f28e11c3 Binary files /dev/null and b/ws23/master/m1-somethinar/techstack.png differ diff --git a/ws23/master/m1-somethinar/terminology/index.html b/ws23/master/m1-somethinar/terminology/index.html new file mode 100644 index 000000000..a8d65d49b --- /dev/null +++ b/ws23/master/m1-somethinar/terminology/index.html @@ -0,0 +1,554 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M1 Master + Somethin.AR +   + + + +

+
+
+ +

Team

+
    + +
  • Ruslan Novikov
  • + +
  • Juri Wiechmann
  • + +
  • Julia Zamaitat
  • + +
  • Robin Jaspers
  • + +
  • Diro Baloska
  • + +
+ + +

Supervision

+ David Strippgen, Robert Meyer, Fabian Quosdorf + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Terminology + +

+
+
+ Even though we’ve spent a lot of time working with extended reality, we sometimes find ourselves questioning the precise terms used in this field. So, we thought it couldn’t be different for you and decided to create a brief guide to some of the most frequently used terms in the world of XR: +
+
+ +
+

+ + Virtual Reality (VR) + +

+
+
+ Virtual Reality is a fully immersive digital environment where the user is completely surrounded by a computer-generated world. Using VR headsets and sometimes hand controllers, users can interact with this virtual space as if they were physically present. +
+
+ +
+

+ + Augmented Reality (AR) + +

+
+
+ Augmented Reality overlays digital information on the real world. Unlike VR, AR does not create a fully immersive virtual world. Instead, it adds to the user’s real-world view, often through smartphones, tablets, or AR glasses, by displaying images, text, or other digital elements. +
+
+ +
+

+ + Mixed Reality (MR) + +

+
+
+ Mixed Reality blends elements of both AR and VR, where real and virtual worlds interact. MR technology anchors virtual objects to the real world, allowing for more complex interactions between physical and digital objects and environments. MR typically requires more advanced hardware like AR glasses with additional sensors to understand and interact with the physical environment. +
+
+ +
+

+ + Extended Reality (XR) + +

+
+
+ Extended Reality is an umbrella term that includes Virtual Reality, Augmented Reality and Mixed Reality. This broad category covers all types of environments and interactions where the real and virtual worlds converge, created through computer technology and wearable devices. XR represents the entire range of immersive technology experiences. +
+
+ + +
+ + + + + diff --git a/ws23/master/m1-somethinar/upgrades.png b/ws23/master/m1-somethinar/upgrades.png new file mode 100644 index 000000000..d99f520a5 Binary files /dev/null and b/ws23/master/m1-somethinar/upgrades.png differ diff --git a/ws23/master/m1-somethinar/userStoryMap.png b/ws23/master/m1-somethinar/userStoryMap.png new file mode 100644 index 000000000..fd56548e8 Binary files /dev/null and b/ws23/master/m1-somethinar/userStoryMap.png differ diff --git a/ws23/master/m1-somethinar/virtualWorld.png b/ws23/master/m1-somethinar/virtualWorld.png new file mode 100644 index 000000000..57946756c Binary files /dev/null and b/ws23/master/m1-somethinar/virtualWorld.png differ diff --git a/ws23/master/m1-somethinar/walls.png b/ws23/master/m1-somethinar/walls.png new file mode 100644 index 000000000..cf0672d37 Binary files /dev/null and b/ws23/master/m1-somethinar/walls.png differ diff --git a/ws23/master/m1-somethinar/weapons.png b/ws23/master/m1-somethinar/weapons.png new file mode 100644 index 000000000..2d17c68d1 Binary files /dev/null and b/ws23/master/m1-somethinar/weapons.png differ diff --git a/ws23/master/m3-lep/LEP.png b/ws23/master/m3-lep/LEP.png new file mode 100644 index 000000000..c1357b4f8 Binary files /dev/null and b/ws23/master/m3-lep/LEP.png differ diff --git a/ws23/master/m3-lep/admin_features.png b/ws23/master/m3-lep/admin_features.png new file mode 100644 index 000000000..b1ca9ccda Binary files /dev/null and b/ws23/master/m3-lep/admin_features.png differ diff --git a/ws23/master/m3-lep/challenges/index.html b/ws23/master/m3-lep/challenges/index.html new file mode 100644 index 000000000..ded70c45e --- /dev/null +++ b/ws23/master/m3-lep/challenges/index.html @@ -0,0 +1,578 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + UX-UI Design + +

+
+
+ In the initial stages of development, one key challenge our team faced was designing a user interface (UI) that effectively +accommodates the input of constraints and preferences from teachers. None of us is a professional UX-UI designer, therefore, creating +an appealing and simple UI for admin or teachers to specify their requirements posed a significant hurdle, as it required striking +a balance between complexity and user-friendliness. We undertook several brainstorming sessions ensuring that the UI could be used efficiently +without overwhelming the user. +
+
+ +
+

+ + Data migration & data structure + +

+
+
+ One of the first problem in our development journey revolved around efficiently reading and importing the data stored +in Excel files into our database. Handling data migration from Excel to a database format presented a unique set of challenges. +Throughout the project implementation, further key challenges included establishing effective storage solutions within our database, +defining data structures and relations, and ensuring the data integrity and consistency. Addressing these hurdles was essential +for a successful project outcome, and the devised solutions significantly enhanced the effectiveness of our data migration process. +
+
+ +
+

+ + Solving library + +

+
+
+

In our student project, the main challenge lay in developing a time planning system capable of generating a schedule +that meets all our constraints. Our search for an open-source solution led us to Timefold, a promising library for +automated schedule generation. However, integrating Timefold into our project posed its own set of challenges, +such as aligning our data structure and code implementation with Timefold’s functionality. The adaptation process +required in-depth comprehension of Timefold itself. The library proved to be transformative, becoming the backbone of our project.

+

Experimenting with different solver configurations and approaches to solve the planning issue also consumed +a considerable amount of time. We tried numerous configurations in an effort to optimize the system, but these +attempts were time-consuming and often did not yield the expected improvements in schedule optimization. In overcoming +these challenges, we not only technically integrated Timefold but also elevated the efficiency and effectiveness of our +time planning system.

+ +
+
+ +
+

+ + Implementing constraints + +

+
+
+ Implementing defined constraints was a notable challenge during the development phase. +The specified constraints were initially documented in a human-readable manner, and then our focus shifted to +transforming them into a format compatible with Timefold for scoring solutions. Timefold operates with constraints +structured in a stream-like fashion, introducing an additional layer of complexity to the translation process. +The successful implementation of the constraints allows us to generate a schedule that meets all the predefined +constraints and to ensure the feasibility of the planning. +
+
+ +
+

+ + Security + +

+
+
+ Security was also a priority in our project, especially because we dealt with sensitive personal information. +To safeguard the stored data in MongoDB and prevent any potential data leaks, we implemented an approach involving +the utilization of Java Cryptography Extension (JCE) and Java Cryptography Architecture (JCA) for data encryption +and decryption. The task became even more complex when we added the Login feature, which required the +implementation of JSON Web Token (JWT) for secure authentication and configuring Cross-Origin Resource Sharing +(CORS) to allow only known sources and block unauthorized attempts. One of the most challenging parts was integrating +everything smoothly with Spring Boot while adhering to its guidelines and conventions. Despite these challenges, +our team successfully addressed these complexities, including the seamless integration of JWT for login authentication +and ensuring that the data is stored in an anonymized format, establishing a secure foundation for the project’s +functionality. This dedication to data security ensures a safe and confidential environment for the users of our platform. +
+
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/features/index.html b/ws23/master/m3-lep/features/index.html new file mode 100644 index 000000000..e19b84ff0 --- /dev/null +++ b/ws23/master/m3-lep/features/index.html @@ -0,0 +1,579 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Efficient automated semester planning + +

+
+
+ With just a few clicks, faculty staff can effortlessly generate a complete schedule for each course of study throughout the entire semester. +Taking into account factors from module duration and rhythm to teacher’s mandatory events, availability, and preferences, LEP utilizes Timefold to makes sure everything fits together well, making planning simple and hassle-free. +
+
+ +
+

+ + Role-Based UI for seamless collaboration + +

+
+
+

Say goodbye to mailing back and forth spreadsheets!

+

With personalized access levels, teachers as well as coordinators enjoy a platform designed +to mirror the real-world process with distinct features, tailored to meet the specific requirements of each role.

+ +
+
+ +
+

+ + Features for teachers + +

+
+
+

LEP provides a centralized overview for each individual teacher of their modules and time schedule.

+

By giving the ability to flexibly manage and refine module configurations, like additional groups or preferred rooms in the module planning view or +personalize their ideal schedule with preferred time availabilities and mandatory appointments in the time planning view, +teachers can make sure that their preferences are considered while LEP finds a good solution for the semester plan.

+

After the schedule is first created, teachers can see their weekly timetable showing when and in which room the lectures and exercises will take place.

+
+ Teacher features +
+ +
+
+ +
+

+ + Features for coordinators + +

+
+
+

Streamlining planning with LEP empowers coordinators by finding a first practical solution for the complex schedules with just a few clicks in the timetable view! +Here they can also manage all modules, or look up schedules for all or specific course of study within selected semester types. +This reduces days of manual planning into minutes, leaving time to focus on the personal touch of the created plans as well as other strategic decisions.

+
+ Admin features +
+
+
+ +
+

+ + Robust security measures + +

+
+
+ LEP places a strong emphasis on security by using encrypted data for users and modules, ensuring that personal information remains private and meets compliance standards. +Additionally, with secure login measures in place, both teachers and coordinators can access the platform confidently, knowing their information is well-protected. +
+
+ +
+

+ + Dual languages support + +

+
+
+

LEP supports English and German languages, allowing users to select their preferred language for the platform, ensuring an inclusive and accessible UI for all.

+
+ Multiple languages support +
+
+
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/figma_prototype.png b/ws23/master/m3-lep/figma_prototype.png new file mode 100644 index 000000000..5f8281792 Binary files /dev/null and b/ws23/master/m3-lep/figma_prototype.png differ diff --git a/ws23/master/m3-lep/future/index.html b/ws23/master/m3-lep/future/index.html new file mode 100644 index 000000000..674b895b8 --- /dev/null +++ b/ws23/master/m3-lep/future/index.html @@ -0,0 +1,556 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Consideration of further Rhythm Types + +

+
+
+ In our current version, we’ve handled regulations dealing with the most common rhythms, ensuring LEP factors in weekly and biweekly +module planning for time collisions as well as special constraints.
+We understand that exceptions, demand more consideration and code restructuring in future to enhance adaptability. +Especially one-time events like introductions at the start of semester have to be handled differently as well as +unique faculty-specific rhythms like 3x6, where the module starts slightly delayed in the semester, initially five times +every two weeks and then ends on a single day during the penultimate month of the semester. +
+
+ +
+

+ + Adapt to various teaching approaches + +

+
+
+ Modules taught by multiple teachers introduce complexities such as splitting SWS between them as well as conflict over +time allocations for one single module. It’s also worth expanding the case of teachers who teach across multiple courses +as well as dealing with modules with longer duration over 5 hours, indicated by a higher sws number, which, as handled in manual planning, +should be divided into at least two parts.
+While our current version already takes this into account to a certain extent for some cases, these special cases +require more consideration through additional boundary constraints and database model adjustments.
+Future development iterations may go deeper into addressing these kind of cases, preparing for diverse teaching approaches, +and acknowledging the more complex and dynamic parts of our university schedule planning.
+
+
+ +
+

+ + Improving Performance + +

+
+
+ Achieving optimal performance while solving a schedule remains our top priority.
+As the demands increases on our tool with a growing number of modules and constraints, we’ve encountering +challenges in maintaining optimal performance with the default solver configuration of Timefold. Despite the initial efficiency, +the increasing complexity has led to a slowdown. +In future more time can be invested into these performance issues by trying out various optimizing algorithms and the use +of the Timefold Benchmarker to ensure a quicker and more efficient timetable-solving process. +
+
+ +
+

+ + User-Friendly Enhancements + +

+
+
+

A few small adjustments in the UI can be dealt with in future such as:

+
    +
  • Enhanced Visualization of overlapping modules in the timetable view if there are multiple modules in the same timeslot
  • +
  • Giving Coordinators power to adjust and fine-tune the resulted timetable after solving, by providing options for changing the time of the module +with an additional field in module planning or drag-and-drop options in the timetable view.
  • +
+
+
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/index.html b/ws23/master/m3-lep/index.html new file mode 100644 index 000000000..66198c325 --- /dev/null +++ b/ws23/master/m3-lep/index.html @@ -0,0 +1,543 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Welcome to LEP - Powered by TimeFold. Revolutionize the academic schedule planning with our smart, automated solution! +

+ +

Embrace simplicity in timetable planning with LehrEinsatzPlanung tool. Teachers effortlessly submit their availability +and course details, while administrators easily manage the automated, optimized timetable creation. Discover the future +of efficient and optimized academic planning.

+
+

+ + Our Goal + +

+
+
+

The task of creating university timetables is a complex work at HTW Berlin, traditionally managed by a small team facing +a huge amount of data. Each semester, faculty staffs receive Excel sheets from hundreds of faculty members, each detailing +courses, availability, and specific preferences. The work of creating a suitable, coherent schedule is often time-consuming, +complicated, and repetitive. The process, demanding intense human effort and great attention to detail, typically consumes +up to one and a half weeks per course of study and its semesters.

+

This is where LEP steps in. Our goal is to automate this manual scheduling process, transforming weeks of work into +mere minutes of efficiency. With our app, teachers can easily input their information, and administrators can then execute +an automated solution. This powerful tool intelligently considers all necessary defined constraints, producing a well-matched +and optimized schedule with remarkable speed and accuracy.

+ +
+
+ +
+

+ + The team + +

+
+
+ Our team consists of three students, each contributing a unique set of skills to this practical project. We combine front- and back-end development, database management, and unit testing to create an effective application. Our collaborative approach extends beyond our team - we actively engage with our project supervisor and the university’s scheduling staff, ensuring that our solution is well tailored to meet the actual needs of university. Together, we’re not just coding an application, we’re redefining how academic scheduling is done. +
+
+ + + + + + + + + + +
+ team pictures + +
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/index.xml b/ws23/master/m3-lep/index.xml new file mode 100644 index 000000000..753249fbc --- /dev/null +++ b/ws23/master/m3-lep/index.xml @@ -0,0 +1,46 @@ + + + + LEP on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/ + Recent content in LEP on IMI Showtime + Hugo + de-de + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/features/ + Efficient automated semester planning With just a few clicks, faculty staff can effortlessly generate a complete schedule for each course of study throughout the entire semester. Taking into account factors from module duration and rhythm to teacher&rsquo;s mandatory events, availability, and preferences, LEP utilizes Timefold to makes sure everything fits together well, making planning simple and hassle-free. Role-Based UI for seamless collaboration Say goodbye to mailing back and forth spreadsheets! + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/process/ + Research In the project&rsquo;s initial phase, we conducted thorough research to establish a robust foundation for our web application. This involved exploring diverse technology stacks, evaluating programming languages, databases, and frameworks. We studied similar applications for inspiration and best practices. The implementation of timetable and schedule-solving algorithms was a key focus, with a careful assessment of existing solutions. We directly engaged with the planning team, gaining insights into manual planning methods and specific requirements. + + + Challenges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/challenges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/challenges/ + UX-UI Design In the initial stages of development, one key challenge our team faced was designing a user interface (UI) that effectively accommodates the input of constraints and preferences from teachers. None of us is a professional UX-UI designer, therefore, creating an appealing and simple UI for admin or teachers to specify their requirements posed a significant hurdle, as it required striking a balance between complexity and user-friendliness. We undertook several brainstorming sessions ensuring that the UI could be used efficiently without overwhelming the user. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/techstack/ + App Development Java &amp; Spring Boot The backbone of our back-end, chosen for its powerful suite of features that simplify the development of stand-alone applications with minimal configuration. MongoDB Our NoSQL database of choice, allowing for flexible data schema and efficient, scalable storage of application data. TimeFold Integrated as the core engine for intelligent and automated scheduling, ensuring optimal allocation of resources and efficient timetabling. ReactJS &amp; TypeScript Our core frontend framework, enabling us to build a dynamic, interactive user interface with type-checking for a reliable and scalable application. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m3-lep/future/ + Consideration of further Rhythm Types In our current version, we&rsquo;ve handled regulations dealing with the most common rhythms, ensuring LEP factors in weekly and biweekly module planning for time collisions as well as special constraints. We understand that exceptions, demand more consideration and code restructuring in future to enhance adaptability. Especially one-time events like introductions at the start of semester have to be handled differently as well as unique faculty-specific rhythms like 3x6, where the module starts slightly delayed in the semester, initially five times every two weeks and then ends on a single day during the penultimate month of the semester. + + + diff --git a/ws23/master/m3-lep/languages.png b/ws23/master/m3-lep/languages.png new file mode 100644 index 000000000..3945c1a20 Binary files /dev/null and b/ws23/master/m3-lep/languages.png differ diff --git a/ws23/master/m3-lep/process/index.html b/ws23/master/m3-lep/process/index.html new file mode 100644 index 000000000..f3aabcba1 --- /dev/null +++ b/ws23/master/m3-lep/process/index.html @@ -0,0 +1,549 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Research + +

+
+
+

In the project’s initial phase, we conducted thorough research to establish a robust foundation for our web application. +This involved exploring diverse technology stacks, evaluating programming languages, databases, and frameworks. +We studied similar applications for inspiration and best practices. The implementation of timetable and schedule-solving +algorithms was a key focus, with a careful assessment of existing solutions. We directly engaged with the planning team, +gaining insights into manual planning methods and specific requirements. Familiarity with provided data, including subjects and +teacher preferences, guided our application design. The planning process included identifying constraints for the solver, +from basic scheduling rules to department-specific requirements. This comprehensive research laid the groundwork for +effective planning, development, and the successful implementation of our web application.

+
+ Research Board +
Library Research board
+
+
+
+ +
+

+ + Brainstorming & Prototyping: + +

+
+
+

In the second phase, our team engaged in creative brainstorming and prototyping to mold the structure and design of the project. +We utilized FigJam as a proficient platform for collaborative brainstorming sessions, where we delved into discussions regarding +the optimal structure of the database. Our focus was on defining entities and outlining the overall architecture of the database. +Transitioning to Figma, our team dedicated efforts to prototyping, with a specific emphasis on the front-end (FE) design. +This phase involved meticulously defining the user interface and experience. Our goal was to ensure a user-friendly and visually +appealing design that seamlessly aligned with the project’s objectives.

+
+ Figma Prototype +
Figma Prototype
+
+
+
+ +
+

+ + Development & Testing: + +

+
+
+ The concluding phase revolved around the actual development and testing of the application. We adopted an Agile SCRUM methodology, +fostering efficient collaboration within the development team and ensuring a streamlined workflow. The use of GitHub Project as a project +management tool played a crucial role in facilitating effective issue tracking and resolution. In this phase, the application was +implemented following a Minimum Viable Product (MVP) approach, encompassing both the front-end (FE) and back-end (BE) components. +To ensure the robustness of the application, comprehensive unit tests were conducted, with a particular focus on constraints +identified during the initial research. User testing was a collaborative effort with the coordinators to gather feedback on usability. +Simultaneously, manual testing was performed by the team to identify and fix any unforeseen issues, thereby guaranteeing +a polished and reliable final product. +
+
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/research.png b/ws23/master/m3-lep/research.png new file mode 100644 index 000000000..7777c4429 Binary files /dev/null and b/ws23/master/m3-lep/research.png differ diff --git a/ws23/master/m3-lep/teacher_features.png b/ws23/master/m3-lep/teacher_features.png new file mode 100644 index 000000000..b9e8f93f6 Binary files /dev/null and b/ws23/master/m3-lep/teacher_features.png differ diff --git a/ws23/master/m3-lep/team.png b/ws23/master/m3-lep/team.png new file mode 100644 index 000000000..5df30cec2 Binary files /dev/null and b/ws23/master/m3-lep/team.png differ diff --git a/ws23/master/m3-lep/techstack.png b/ws23/master/m3-lep/techstack.png new file mode 100644 index 000000000..a97f354ce Binary files /dev/null and b/ws23/master/m3-lep/techstack.png differ diff --git a/ws23/master/m3-lep/techstack/index.html b/ws23/master/m3-lep/techstack/index.html new file mode 100644 index 000000000..71b8b0f5e --- /dev/null +++ b/ws23/master/m3-lep/techstack/index.html @@ -0,0 +1,556 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M3 Master + LEP +   + + + +

+
+
+ +

Team

+
    + +
  • Nikol Stefanova
  • + +
  • Kim Ngan Le Dang
  • + +
  • Hikari Sophia Stölzle
  • + +
+ + +

Supervision

+ Prof.Dr. Gefei Zhang + +
+
+
+
+ +
+
+ + + + +
+
+ + + + + + + + + + +
+ Techstack + +
+ +
+

+ + App Development + +

+
+
+

Java & Spring Boot

+

The backbone of our back-end, chosen for its powerful suite of features that simplify the development of stand-alone applications with minimal configuration.

+

MongoDB

+

Our NoSQL database of choice, allowing for flexible data schema and efficient, scalable storage of application data.

+

TimeFold

+

Integrated as the core engine for intelligent and automated scheduling, ensuring optimal allocation of resources and efficient timetabling.

+

ReactJS & TypeScript

+

Our core frontend framework, enabling us to build a dynamic, interactive user interface with type-checking for a reliable and scalable application.

+

React-Bootstrap

+

Implemented for a uniform look across the web app, ensuring a good user experience with pre-built design patterns and components.

+

CSS Modules

+

Employed to locally scope CSS by automatically creating a unique class name for each style, ensuring that our styles are consistent and do not conflict with those in other parts of the application.

+ +
+
+ +
+

+ + Others + +

+
+
+

Postman

+

Utilized for testing and interacting with APIs during development, ensuring that our endpoints are well-tested, robust, and ready for integration.

+

Swagger

+

Used for API documentation, providing a clear, interactive interface for back-end services, simplifying development and integration efforts.

+ +
+
+ + + + + + + + + + +
+ Application workflow + +
Application Workflow
+ +
+ + +
+ + + + + diff --git a/ws23/master/m3-lep/workflow.png b/ws23/master/m3-lep/workflow.png new file mode 100644 index 000000000..5cdc19e92 Binary files /dev/null and b/ws23/master/m3-lep/workflow.png differ diff --git a/ws23/master/m4-gamingforthefuture/Adib.jpeg b/ws23/master/m4-gamingforthefuture/Adib.jpeg new file mode 100644 index 000000000..409385854 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Adib.jpeg differ diff --git a/ws23/master/m4-gamingforthefuture/Cong.jpeg b/ws23/master/m4-gamingforthefuture/Cong.jpeg new file mode 100644 index 000000000..4043a6b71 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Cong.jpeg differ diff --git a/ws23/master/m4-gamingforthefuture/Elliot.png b/ws23/master/m4-gamingforthefuture/Elliot.png new file mode 100644 index 000000000..bffc2c471 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Elliot.png differ diff --git a/ws23/master/m4-gamingforthefuture/Game1.png b/ws23/master/m4-gamingforthefuture/Game1.png new file mode 100644 index 000000000..3ac08a78c Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Game1.png differ diff --git a/ws23/master/m4-gamingforthefuture/Game2.png b/ws23/master/m4-gamingforthefuture/Game2.png new file mode 100644 index 000000000..e755c0b70 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Game2.png differ diff --git a/ws23/master/m4-gamingforthefuture/Kenneth.png b/ws23/master/m4-gamingforthefuture/Kenneth.png new file mode 100644 index 000000000..0274ac4d4 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Kenneth.png differ diff --git a/ws23/master/m4-gamingforthefuture/Nabu.png b/ws23/master/m4-gamingforthefuture/Nabu.png new file mode 100644 index 000000000..3c1c02990 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Nabu.png differ diff --git a/ws23/master/m4-gamingforthefuture/Tech.png b/ws23/master/m4-gamingforthefuture/Tech.png new file mode 100644 index 000000000..709d1dbc9 Binary files /dev/null and b/ws23/master/m4-gamingforthefuture/Tech.png differ diff --git a/ws23/master/m4-gamingforthefuture/future/index.html b/ws23/master/m4-gamingforthefuture/future/index.html new file mode 100644 index 000000000..1d2a52bda --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/future/index.html @@ -0,0 +1,515 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M4 Master + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +   + + + +

+
+
+ +

Team

+
    + +
  • Eliot Hoff
  • + +
  • Kenneth Englisch
  • + +
  • Cong Nguyen-Dinh
  • + +
  • Adib Ghassani Waluya
  • + +
+ + +

Supervision

+ David Mueller + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Future + +

+
+
+

Prospect: +Add visualisation of biodiversity +aspects +Further development of different +levels +Improvement of tile influence +algorithm +Further implementation of +localization +Gameplay improvement

+

Where we’re at: +Currently, Gaming for Future only +contains one level for presentation +purpose +Algorithm for influence of each +biome tile is developed +Achieved our goal, which is to +emphasize the crucial issue of +water scarcity +E-Mail collector is implemented +Available only in 2 languages

+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m4-gamingforthefuture/index.html b/ws23/master/m4-gamingforthefuture/index.html new file mode 100644 index 000000000..b7aa71230 --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/index.html @@ -0,0 +1,643 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M4 Master + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +   + + + +

+
+
+ +

Team

+
    + +
  • Eliot Hoff
  • + +
  • Kenneth Englisch
  • + +
  • Cong Nguyen-Dinh
  • + +
  • Adib Ghassani Waluya
  • + +
+ + +

Supervision

+ David Mueller + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ Aquasolace - Gaming For Future +

+ +
+

+ + Our Goal + +

+
+
+

The goal of our project was to develop a game together with the NABU about the Water Scarcity in Brandenburg. Gaming For Future, is a single-player strategy, environmental simulation, and awareness game centered around the critical issue of water scarcity. Our goal was it with this game to draw people’s attention to the crucial issue of water scarcity through +Game-Based Learning approach.

+

NABU (Naturschutzverband e.V) is an NGO with approximately 900,000 members (more than 1% of the population) +environmental education, spreading of public awareness, cooperations with local groups, +institutions and authorities to promote nature-friendly policies

+
+ Nabu +
Nabu
+
+ +
+
+ +
+

+ + Gameplay + +

+
+
+

Core elements: +Biome tiles: +Biome tiles to reconstruct ecosystem by placing different biome tiles.

+

Thresholds: +Each biome tile affects temperature and ground water level differently.

+

The player can place biome tiles on the map. Each tile has different influences on the water level. +Level Selection: +Each level visualised different initial environment conditions (ground water level & temperature) and unique threshold values

+

Challenge: +The challenge lies in the learning process, where players must discern the impact of each biome tile on the ecosystem.

+

Winning / Losing: +Players must navigate and manipulate these environmental factors, ensuring they remain within specified threshold values unique to each level

+ +
+
+ + + +
+

+ + The team + +

+
+
+ Our team included Eliot Hoff, Kenneth Englisch, Cong Nguyen-Dinh, Adib Ghassani Waluya and our supervisor David. +We divided the tasks equally and spend the first few weeks with researching and planning the game. We tracked our project progression via Github and communicated via Discord. +
+
+ + + +
+

+ + Technologies + +

+
+
+

For this project we used mainly the Unity Engine to develop the game. +Other programs that we used were Figma,Photoshop and Excel. Sometimes we had to use Blender as well. Coding was done in Rider, Visual Studio. +Discord was used for communication.

+
+ Profile screen +
Tech Stack
+
+
+
+ +
+

+ + Technologies + +

+
+
+

Aesthecially pleasing: +Our own highly stylish rework models of +assets using Blender from Kenney for an +appealing aesthetic

+

Calm music: +Our own produced music contributes to the +game’s atmosphere, creating a more immersive +and relaxing environment as well as providing +a serene backdrop for focused gameplay

+

Localisation: +built with localization in mind and currently +available in 2 languages (en & de)

+

Unity: +With Unity 2022.3.12f1, GFF is developed for +ease of development, portability, and longterm support.

+ +
+
+ +
+

+ + Keymaps + +

+
+
+ Keyboard: +1-6: select a specific biome tile. +Q-W-E: brush sizes (Q = small, W = medium, E = large). +ESC: pause menu. +Mouse: +LMB: place a tile. +Scroll wheel: camera zoom. +Mouse drag to screen border: move camera. +
+
+ + +
+ + + + + diff --git a/ws23/master/m4-gamingforthefuture/index.xml b/ws23/master/m4-gamingforthefuture/index.xml new file mode 100644 index 000000000..83dab852f --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/index.xml @@ -0,0 +1,39 @@ + + + + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/ + Recent content in M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) on IMI Showtime + Hugo + de-de + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/process/ + Initial Meetings Discussed the project with the product owners to identify the core problem related to water scarcity in Brandenburg. Received relevant documents from Rebecca for further understanding. Communication and Iteration We engaged in back-and-forth communication with product owners to refine the project details every week. Flow Charts Developed flow charts to map out the game. Then we created initial prototypes and designs using Figma to visualize the project. Programming We programmed mostly in Unity. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/techstack/ + Tech Stack For this project we used mainly the Unity Engine to develop the game. Other programs that we used were Figma,Photoshop. Sometimes we had to use Blender as well. Coding was done in Rider or Visual Studio. Music was produced with Fl Studo and Garageband. Discord and Zoom were used for communication. Tech Stack + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/future/ + Future Prospect: Add visualisation of biodiversity aspects Further development of different levels Improvement of tile influence algorithm Further implementation of localization Gameplay improvement Where we’re at: Currently, Gaming for Future only contains one level for presentation purpose Algorithm for influence of each biome tile is developed Achieved our goal, which is to emphasize the crucial issue of water scarcity E-Mail collector is implemented Available only in 2 languages + + + + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/review/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m4-gamingforthefuture/review/ + Für alle Projekte: bitte überprüfen, ob alle Bilddateien notwendig sind und sich nicht doch noch verkleinern lassen. (und es ggfs. Auch tun) die Texte nochmal durchgehen und straffen. Bei Team reicht z.B. wir waren 5 IMI-Master: Namen und Bilder. (evtl. Noch Aufteilung von Verantwortlichkeiten, wenn Sie nicht woanders stehen) M4 Sehr schöne Seite! Dateigrössen alles ok. wenn Sie wollen, könnten Sie prüfen, ob sich die Größe der Bilder weiter reduzieren lässt, z. + + + diff --git a/ws23/master/m4-gamingforthefuture/process/index.html b/ws23/master/m4-gamingforthefuture/process/index.html new file mode 100644 index 000000000..b71e2a9c1 --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/process/index.html @@ -0,0 +1,557 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M4 Master + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +   + + + +

+
+
+ +

Team

+
    + +
  • Eliot Hoff
  • + +
  • Kenneth Englisch
  • + +
  • Cong Nguyen-Dinh
  • + +
  • Adib Ghassani Waluya
  • + +
+ + +

Supervision

+ David Mueller + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Initial Meetings + +

+
+
+ Discussed the project with the product owners to identify the core problem related to water scarcity in Brandenburg. +Received relevant documents from Rebecca for further understanding. +
+
+ +
+

+ + Communication and Iteration + +

+
+
+ We engaged in back-and-forth communication with product owners to refine the project details every week. +
+
+ +
+

+ + Flow Charts + +

+
+
+ Developed flow charts to map out the game. Then +we created initial prototypes and designs using Figma to visualize the project. +
+
+ +

+

+ + Programming + +

+
+
+ We programmed mostly in Unity. Every week we had discussions with the product owners and regular meetings with each other to discuss goals for the upcoming week. We pushed our code to Gitlab. Where we worked on different branches. +
+
+ +
+

+ + Issue Assignment + +

+
+
+ Each team member selected a specific issue to work on based on their skills or preferences. +
+
+ +
+

+ + Testing + +

+
+
+ We regularly tested the game with both product owners to gather feedback and used this feedback to make necessary adjustments and improvements. +In January, we conducted testing sessions with real users from NABU. +
+
+

+ +
+ + + + + diff --git a/ws23/master/m4-gamingforthefuture/review/index.html b/ws23/master/m4-gamingforthefuture/review/index.html new file mode 100644 index 000000000..8f0fec87f --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/review/index.html @@ -0,0 +1,505 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M4 Master + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +   + + + +

+
+
+ +

Team

+
    + +
  • Eliot Hoff
  • + +
  • Kenneth Englisch
  • + +
  • Cong Nguyen-Dinh
  • + +
  • Adib Ghassani Waluya
  • + +
+ + +

Supervision

+ David Mueller + +
+
+
+
+ +
+
+ + + + +
+
+ +

Für alle Projekte:

+ +

M4

+

Sehr schöne Seite!

+

Dateigrössen

+

alles ok.

+

wenn Sie wollen, könnten Sie prüfen, ob sich die Größe der Bilder weiter reduzieren lässt, z.b. mit Imagemagick +https://imagemagick.org/script/convert.php

+

du -hs ../* +4.0K ../_index.md +2.9M ../m1-SomethinAR +2.1M ../m3-lep +704K ../m4-gamingforthefuture +580K ../m5-mov.io

+

Beispiel für alle:

+

for image in .png ; do convert “$image” “${image%.}-converted.jpg” ; done

+

for image in .jpg ; do convert “$image” -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB “${image%.}-comp.jpg” ; done

+

https://stackoverflow.com/questions/7261855/recommendation-for-compressing-jpg-files-with-imagemagick

+ +
+ + + + + diff --git a/ws23/master/m4-gamingforthefuture/techstack/index.html b/ws23/master/m4-gamingforthefuture/techstack/index.html new file mode 100644 index 000000000..bbab68d59 --- /dev/null +++ b/ws23/master/m4-gamingforthefuture/techstack/index.html @@ -0,0 +1,500 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M4 Master + M4 Aquasolace - Gaming for Future: A video game about water scarcity in Brandenburg (M4 Gaming for Future: Ein Videospiel über Wasserknappheit in Brandenburg) +   + + + +

+
+
+ +

Team

+
    + +
  • Eliot Hoff
  • + +
  • Kenneth Englisch
  • + +
  • Cong Nguyen-Dinh
  • + +
  • Adib Ghassani Waluya
  • + +
+ + +

Supervision

+ David Mueller + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Tech Stack + +

+
+
+

For this project we used mainly the Unity Engine to develop the game. +Other programs that we used were Figma,Photoshop. Sometimes we had to use Blender as well. Coding was done in Rider or Visual Studio. Music was produced with Fl Studo and Garageband. +Discord and Zoom were used for communication.

+
+ Profile screen +
Tech Stack
+
+
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/amine.jpeg b/ws23/master/m5-mov.io/amine.jpeg new file mode 100644 index 000000000..8e0225077 Binary files /dev/null and b/ws23/master/m5-mov.io/amine.jpeg differ diff --git a/ws23/master/m5-mov.io/brandon.png b/ws23/master/m5-mov.io/brandon.png new file mode 100644 index 000000000..0a814d4ab Binary files /dev/null and b/ws23/master/m5-mov.io/brandon.png differ diff --git a/ws23/master/m5-mov.io/challanges/index.html b/ws23/master/m5-mov.io/challanges/index.html new file mode 100644 index 000000000..d14987c46 --- /dev/null +++ b/ws23/master/m5-mov.io/challanges/index.html @@ -0,0 +1,535 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Ideation Struggles + +

+
+
+ The extensive ideation phase challenged the team as each member brought different perspectives, which led to difficulties in agreeing on a unified vision for mov.io. Uncertainty about the most appropriate technology required thorough research to make an informed decision. In addition, each team member brought unique insights, requiring additional effort to synthesize ideas and define key features, which impacted the initial stages of project build. +
+
+ +
+

+ + Learning Curve of New Technologies + +

+
+
+ Incorporating a range of new technologies, each assigned to a specific team member, presented a multi-faceted challenge. Integrating these technologies required an extensive research and learning process. Becoming proficient in these different technologies, while simultaneously implementing them within the project, added a layer of complexity that required a dedicated effort to master and apply the acquired knowledge. +
+
+ +
+

+ + Coding Practices + +

+
+
+ Merge Conflicts and differences in coding approaches: +Collaborative coding presented challenges in managing conflict during the merge process, particularly due to the different coding approaches adopted by team members. Each responsible for specific components, team members had different perspectives on coding styles and methodologies. Establishing uniform coding conventions and improving communication channels became critical to managing conflicts and ensuring seamless integration of different components. +
+
+ +
+

+ + Git Server Downtime + +

+
+
+ A critical setback occurred shortly before the project submission deadline when the Git server experienced downtime for two days. This unexpected interruption disrupted the team’s workflow, impacting collaboration and version control. Swift adaptation and the implementation of alternative solutions were essential to ensure the project’s continuity despite the server outage. +
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/features/index.html b/ws23/master/m5-mov.io/features/index.html new file mode 100644 index 000000000..a7a4445d3 --- /dev/null +++ b/ws23/master/m5-mov.io/features/index.html @@ -0,0 +1,556 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Interactive WebApp + +

+
+
+

Engaging Virtual Collaboration

+

Step into a world of seamless collaboration with our Interactive Web - App, an engaging and responsive platform designed to facilitate user interaction in a virtual environment. Our focus is on creating a dynamic space that encourages effortless collaboration and enhances the overall user experience.

+ +
+
+ +
+

+ + Virtual Office + +

+
+
+

Replicating Physical Office Online

+

Bring the essence of a physical office into the digital realm with our Virtual Office. It serves as a digital workspace where users can effectively collaborate, communicate, and coordinate tasks. Experience the convenience of a centralized hub that streamlines workflows and fosters efficient team interaction.

+ +
+
+ +
+

+ + Seamless UI / UX + +

+
+
+

Effortless Navigation, Delightful Experience

+

Navigate our platform with ease through a seamless user interface (UI) and user experience (UX). Enjoy an aesthetically pleasing design that prioritizes effortless navigation, making every interaction on our platform a delightful experience for users.

+ +
+
+ +
+

+ + Live Communication + +

+
+
+

Real-Time Collaboration and Connection

+

Immerse yourself in real-time collaboration through our Live Communication features. Whether it’s video, voice, or chat functionalities, our platform facilitates instant connections among users, promoting efficient and effective collaboration in a virtual environment.

+ +
+
+ +
+

+ + Spatial Audio + +

+
+
+

Immersive Communication Experience

+

Enhance your virtual interactions with our Spatial Audio feature. Experience an audio environment that simulates the natural direction and distance of voices, providing an immersive and authentic communication experience within our platform. Break down virtual barriers and bring a sense of physical presence to your interactions.

+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/future/index.html b/ws23/master/m5-mov.io/future/index.html new file mode 100644 index 000000000..05b6825fa --- /dev/null +++ b/ws23/master/m5-mov.io/future/index.html @@ -0,0 +1,535 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ +

As we look to the future of mov.io, our vision goes beyond a simple virtual office platform - we envision a dynamic and customisable ecosystem that truly adapts to the individual preferences and needs of our users.

+
+

+ + Unleash personalisation + +

+
+
+ A key aspect of our future plans revolves around providing users with an unprecedented level of customisation. Imagine having the freedom to design and personalize your virtual office space, from room layout to overall aesthetics. Users will be able to create their own office environment that reflects their unique style and preferences. Furthermore, customisation extends to personal avatars, allowing users to tailor their virtual representation and truly make mov.io a reflection of their identity. +
+
+ +
+

+ + Customize your virtual space + +

+
+
+ In the future, users will be able to customize every nook and cranny of their virtual workspace. From adjusting the lighting and decor to choosing the color scheme of each room, mov.io will become a canvas for users to express their creativity. The goal is to create an immersive and personalized environment that goes beyond the limitations of traditional virtual offices. +
+
+ +
+

+ + Seamless integration with external applications + +

+
+
+ To enhance the user experience, mov.io will seamlessly integrate with external applications, making it a central hub for productivity and entertainment. Integration with popular platforms such as Google Calendar will streamline scheduling and task management within the virtual workspace +
+
+ +
+

+ + Fun collaborations and interaction + +

+
+
+ Beyond the practical, we’re exploring partnerships and integrations that add an element of fun and collaboration. Imagine interactive features that allow users to engage in virtual team building activities, brainstorming sessions or even friendly competitions within their customised +
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/index.html b/ws23/master/m5-mov.io/index.html new file mode 100644 index 000000000..b103373e5 --- /dev/null +++ b/ws23/master/m5-mov.io/index.html @@ -0,0 +1,558 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ + + + +

+ mov.io - a revolutionary solution designed to tackle desocialization among remote workers. +

+ + + + + + + + + + +
+ mov.io + +
+ +

In the wake of the post-pandemic shift to remote work, the need for genuine social connections in professional settings has become more critical than ever. Enter mov.io, a revolutionary solution designed to tackle the growing issue of desocialization among remote workers. As the modern workforce adapts to remote environments, mov.io steps in to bridge the gap by offering a virtual office platform that prioritizes personal interactions alongside professional tasks.

+
+

+ + Our Goal + +

+
+
+

In response to the post-pandemic shift to remote work, mov.io tackles a critical challenge – the growing isolation and desocialization experienced by employees and freelancers. Traditional communication tools, primarily focused on professional tasks, have left a void in personal connections, leading to demotivation and misunderstandings in the virtual workspace.

+

mov.io aims to improve personal interconnection in the virtual workspace. By visualizing interactions, reactions, and providing accessible communication features, mov.io transcends the limitations of existing tools. The objective is not just to enhance productivity but to create a virtual office environment that prioritizes personal connections. mov.io seeks to empower remote workers, making work not only about completing tasks but also about building fulfilling and meaningful connections that transform the remote work experience.

+ +
+
+ +
+

+ + The team + +

+
+
+

Driving mov.io’s development is a team of highly motivated master’s IMI- students, each specializing in a key aspect of the platform:

+

The Frontend Development team ensures a seamless and user-friendly interface, enhancing the visual and interactive aspects of mov.io. On the backend, another team focuses on implementing robust server-side functionalities to support the platform’s core features.

+

A Team working with Phaser integration brings dynamic and engaging elements to mov.io, creating an immersive virtual office experience. Simultaneously, the Web-RTC team focuses on real-time communication features, ensuring smooth and reliable interactions within the mov.io virtual workspace.

+

This collaborative effort ensures that mov.io, from its frontend aesthetics to backend functionality and interactive elements, is meticulously crafted by a highly motivated and dedicated team of master’s students.

+ +
+
+ + + + +
+ + + + + diff --git a/ws23/master/m5-mov.io/index.xml b/ws23/master/m5-mov.io/index.xml new file mode 100644 index 000000000..d39959622 --- /dev/null +++ b/ws23/master/m5-mov.io/index.xml @@ -0,0 +1,46 @@ + + + + mov.io on IMI Showtime + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/ + Recent content in mov.io on IMI Showtime + Hugo + de-de + + + Challanges + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/challanges/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/challanges/ + Ideation Struggles The extensive ideation phase challenged the team as each member brought different perspectives, which led to difficulties in agreeing on a unified vision for mov.io. Uncertainty about the most appropriate technology required thorough research to make an informed decision. In addition, each team member brought unique insights, requiring additional effort to synthesize ideas and define key features, which impacted the initial stages of project build. Learning Curve of New Technologies Incorporating a range of new technologies, each assigned to a specific team member, presented a multi-faceted challenge. + + + Features + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/features/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/features/ + Interactive WebApp Engaging Virtual Collaboration Step into a world of seamless collaboration with our Interactive Web - App, an engaging and responsive platform designed to facilitate user interaction in a virtual environment. Our focus is on creating a dynamic space that encourages effortless collaboration and enhances the overall user experience. Virtual Office Replicating Physical Office Online Bring the essence of a physical office into the digital realm with our Virtual Office. + + + Future + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/future/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/future/ + As we look to the future of mov.io, our vision goes beyond a simple virtual office platform - we envision a dynamic and customisable ecosystem that truly adapts to the individual preferences and needs of our users. Unleash personalisation A key aspect of our future plans revolves around providing users with an unprecedented level of customisation. Imagine having the freedom to design and personalize your virtual office space, from room layout to overall aesthetics. + + + Process + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/process/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/process/ + Research At the start of our development journey, we devoted a significant amount of time to in-depth research. Our goal? To get inside the user&rsquo;s world, to understand the challenges they face on a daily basis, whether in a traditional office or in the rapidly evolving landscape of remote working. We dug deep to uncover the pros and cons and shed light on the finer details of their working environment. + + + Tech Stack + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/techstack/ + Mon, 01 Jan 0001 00:00:00 +0000 + https://JonasTrenkler.github.io/showtime-website/ws23/master/m5-mov.io/techstack/ + Organization GitLab NX Gather.town Figma &amp; FigJam Zoom Frontend Vue3 Nuxt3 TailwindCSS PhaserJS WebRTC Backend Express Socket.IO MongoDB + + + diff --git a/ws23/master/m5-mov.io/logo.png b/ws23/master/m5-mov.io/logo.png new file mode 100644 index 000000000..40a9d087e Binary files /dev/null and b/ws23/master/m5-mov.io/logo.png differ diff --git a/ws23/master/m5-mov.io/process/index.html b/ws23/master/m5-mov.io/process/index.html new file mode 100644 index 000000000..fb4efd249 --- /dev/null +++ b/ws23/master/m5-mov.io/process/index.html @@ -0,0 +1,534 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Research + +

+
+
+

At the start of our development journey, we devoted a significant amount of time to in-depth research. Our goal? To get inside the user’s world, to understand the challenges they face on a daily basis, whether in a traditional office or in the rapidly evolving landscape of remote working. We dug deep to uncover the pros and cons and shed light on the finer details of their working environment.

+

This in-depth exploration wasn’t just about understanding workflows; it was about getting to the heart of communication. We recognised a common challenge - the lack of real connection experienced in online interactions. This realization fueled our determination to build features into mov.io that went beyond mere functionality. We wanted to bridge the gap in online communication and ensure that users felt the presence and essence of their colleagues, even in the virtual realm.

+

As a result, the research phase became the compass that steered mov.io towards not just solving problems, but creating an experience that eliminates the sense of detachment often associated with online communication.

+ +
+
+ +
+

+ + Concept + +

+
+
+

During this phase, we carefully identified the essential Jobs to be Done (JTBD), gaining a deep understanding of the core tasks that mov.io had to fulfil. Complementing this, the formulation of “How Might We” (HMW) questions stimulated innovative thinking and provided a creative lens through which we approached challenges.

+

To humanise our development process, we created detailed user personas, envisioning the characteristics, needs and goals of our target users. This step ensured that mov.io would resonate authentically with real people facing real scenarios.

+

In addition, the identification of Minimum Viable Products (MVPs) was critical in strategically outlining the essential features for an initial release. This approach allowed for a focused and effective launch, with room for iterative improvements.

+

The concept phase therefore acted as a strategic blueprint, providing a comprehensive understanding of mov.io’s objectives and the user demographic it was intended to serve. This groundwork set the stage for a streamlined and focused implementation process, ensuring that every development decision was rooted in a well-defined conceptual framework.

+ +
+
+ +
+

+ + Creation + +

+
+
+

Beginning the practical journey of turning ideas into reality, the implementation phase marked a crucial chapter in the creation of mov.io. We began this phase by setting up a stable Git repository, creating a collaborative and version controlled environment that ensured smooth coordination between team members throughout the project lifecycle.

+

With Vue.js at its core, we launched the Vue project, laying the groundwork for a user-friendly interface and integrating the interactive elements essential to shaping the overall user experience. To streamline our development workflow, we chose PNPM to improve the efficiency and organisation of project dependency management.

+

Recognising the key role of a well-configured database, we carefully structured it to handle the complexity of the data critical to mov.io’s functionality. At the same time, we seamlessly integrated Phaser components to add dynamic and engaging elements that enhance the virtual office experience.

+

In tandem with these efforts, we focused on creating a seamless connection between the front-end, server, back-end and Phaser components. This strategic move was designed to ensure a responsive and cohesive user experience, creating a cohesive application.

+

At the end of this phase, a comprehensive application structure emerged with distinct front-end, server and phaser components. This concrete result represented the collaborative efforts of our team and set the stage for ongoing refinements and feature enhancements as mov.io continues to evolve.

+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/reynaldo.jpeg b/ws23/master/m5-mov.io/reynaldo.jpeg new file mode 100644 index 000000000..1c57cb934 Binary files /dev/null and b/ws23/master/m5-mov.io/reynaldo.jpeg differ diff --git a/ws23/master/m5-mov.io/techstack/index.html b/ws23/master/m5-mov.io/techstack/index.html new file mode 100644 index 000000000..955476ff9 --- /dev/null +++ b/ws23/master/m5-mov.io/techstack/index.html @@ -0,0 +1,541 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+
+

+ M5 Master + mov.io +   + + + +

+
+
+ +

Team

+
    + +
  • Brandon Mandzik
  • + +
  • Mohamed Amine Sallami
  • + +
  • Reynaldo Domenico
  • + +
  • Yosua Sentosa
  • + +
+ + +

Supervision

+ D. Koschnick + +
+
+
+
+ +
+
+ + + + +
+
+ +
+

+ + Organization + +

+
+
+
    +
  • GitLab
  • +
  • NX
  • +
  • Gather.town
  • +
  • Figma & FigJam
  • +
  • Zoom
  • +
+ +
+
+ +
+

+ + Frontend + +

+
+
+
    +
  • Vue3
  • +
  • Nuxt3
  • +
  • TailwindCSS
  • +
  • PhaserJS
  • +
  • WebRTC
  • +
+ +
+
+ +
+

+ + Backend + +

+
+
+
    +
  • Express
  • +
  • Socket.IO
  • +
  • MongoDB
  • +
+ +
+
+ + +
+ + + + + diff --git a/ws23/master/m5-mov.io/yosua.jpeg b/ws23/master/m5-mov.io/yosua.jpeg new file mode 100644 index 000000000..e31698043 Binary files /dev/null and b/ws23/master/m5-mov.io/yosua.jpeg differ diff --git a/zoom-help/index.html b/zoom-help/index.html new file mode 100644 index 000000000..d847ed595 --- /dev/null +++ b/zoom-help/index.html @@ -0,0 +1,159 @@ + + + + + + + + + + + +IMI Showtime - HTW Berlin + + + + + + + +
+

+ IMI-Showtime via Zoom +   +

+
+ +
+
+
+

1. Install or update Zoom

+

If you do not have the Zoom client installed yet, you can get it here:
+Windows | Other platforms
+If you already have the client installed, please make sure it is up to date. + + + + + + + + + +

+ Zoom Help 1 + +
+

+

2. Join the Zoom session

+

Simply follow this link: https://htw-berlin.zoom.us/j/97320821203

+

3. Switching rooms

+

To switch from the main session into breakout rooms you first need to click +on the „Breakout Rooms“ button (1) and then click „Join“ for the desired +room (2) and confirm with „Yes“ (3). + + + + + + + + + +

+ Zoom Help 2 + +
+

+

When you are inside a breakout room you can either repeat the process to join +a different room or return to the main session by clicking „Leave Room“ (1) +and „Leave Breakout Room“ (2). + + + + + + + + + +

+ Zoom Help 3 + +
+ + + + + + + + + + +
+ Zoom Help 4 + +
+

+ +
+ + + + +