B2: Fix tryout (htw-imi-showtime#401)

* Change fixed missing section tag and cleaned up structure + removed content from features, content & techstack

* Change text content

* Add inserted images

* Fixed spelling and phrasing of discarding old tech

* new file:   content/ss24/bachelor/b2-makesign/Airon.png
	new file:   content/ss24/bachelor/b2-makesign/Hyun.png
	new file:   content/ss24/bachelor/b2-makesign/Nemo.png
	new file:   content/ss24/bachelor/b2-makesign/Nikki.png
	new file:   content/ss24/bachelor/b2-makesign/rudi.png

* deleted:    "content/ss24/bachelor/b2-makesign/Gru\303\237karte.jpg"

* new file:   Airon.jpg
	deleted:    Airon.png
	new file:   Hyun.jpg
	deleted:    Hyun.png
	new file:   Nemo.jpg
	deleted:    Nemo.png
	new file:   Nikki.jpg
	deleted:    Nikki.png
	new file:   Rudi.jpg
	deleted:    rudi.png

* Change filenames

* Fixed file names to fit convention

* Change makerspace lower case -> upper case

* Process+Features Prototype

* Techstack Update

* new github logo

* fixed a mistake

* Update process.md

* Update features.md

* Update process.md

* Update _index.md

* Delete content/ss24/bachelor/b2-makesign/discord-logo.jpg

* Add files via upload

* Delete content/ss24/bachelor/b2-makesign/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png

* Add files via upload

* Update techstack.md

* Delete content/ss24/bachelor/b2-makesign/google-docs.jpg

* Add files via upload

* Update techstack.md

* Delete content/ss24/bachelor/b2-makesign/css-logo.png

* Add files via upload

* Update techstack.md

* Delete content/ss24/bachelor/b2-makesign/Google-docs-logo.png

* Delete content/ss24/bachelor/b2-makesign/bootstrap-logo.png

* Delete content/ss24/bachelor/b2-makesign/css-logo.png

* Delete content/ss24/bachelor/b2-makesign/discord-logo.png

* Delete content/ss24/bachelor/b2-makesign/docker-logo.png

* Delete content/ss24/bachelor/b2-makesign/figma-logo.png

* Delete content/ss24/bachelor/b2-makesign/github-logo.png

* Delete content/ss24/bachelor/b2-makesign/js-logo.png

* Delete content/ss24/bachelor/b2-makesign/rails-logo.png

* Delete content/ss24/bachelor/b2-makesign/rubymine-logo.jpg

* Delete content/ss24/bachelor/b2-makesign/shell-logo.png

* Delete content/ss24/bachelor/b2-makesign/signal-logo.png

* Delete content/ss24/bachelor/b2-makesign/ubuntu-logo.jpg

* Delete content/ss24/bachelor/b2-makesign/vsc-logo.jpg

* Delete content/ss24/bachelor/b2-makesign/whatsapp-logo.jpg

* Delete content/ss24/bachelor/b2-makesign/zoom-logo.jpg

* Update techstack.md

* Add files via upload

* Add files via upload

* Change text of features.md and process.md

* Edit _index.md + setting other md drafts to true

---------

Co-authored-by: nemo <[email protected]>
Co-authored-by: ai-j <[email protected]>
Co-authored-by: ai-j <[email protected]>
Co-authored-by: Hyun Bin <[email protected]>
Co-authored-by: Barne Kleinen <[email protected]>

content/ss24/bachelor/b2-makesign/_index.md

@@ -1,7 +1,7 @@
 +++
 project_id = "B2"
 
-title = "Makesign"
+title = "MakeSign"
 subtitle = "Digital Signage for the IDiA Makerspace"
 claim = "A digital signage solution to promote events, projects, and schedules, simply and conveniently"
 
@@ -20,20 +20,15 @@ study_focus = ['Web Technology']
 
 
 {{<section title="Overview">}}
-If you have an event or project you want to share or invite people to, the current method is to elaborately and painstakingly hang posters throughout the campus. This problem has also plagued [IDiA](https://entrepreneurship.htw-berlin.de/ueber-uns/ideas-in-action-idia/ueber-idia/) in the past. In collaboration with IDiA, our project aims to digitize this process by using old monitors and TVs as digital signage boards that can be placed throughout the campus to display information in real-time, enabling the university to repurpose its old hardware. For the end-users, we offer a simple web application through which users can upload their content to the screens across campus.
 
-We have developed a system for the IDiA [Makerspace](https://entrepreneurship.htw-berlin.de/ueber-uns/ideas-in-action-idia/idia-spaces/maker-space/), to graphically display the booking system for the machines in Makerspace, such as the 3D Printers and the CNC routers. This system allows the booking schedule of these machines to be reviewed by the students at the Makerspace in real-time on digital signage boards.
-{{</section>}}
-
-
-{{<section title="Future">}}
-
-The technology offers numerous expansion possibilities. For example, monitors could be put up as digital signage boards across the campus on varios high traffic spots and the system could be opened up to allow students and professors to upload their project or event posters. Another potential expansion would be to integrate the BVGs Api and to display tram arrival and departure times in real-time across different areas of the campus.
-The possibilities for our project are limited only by the users' creativity in generating content for the screens. We aim to help IDiA and their Makerspace more effectively promote their events and provide a user-friendly system that allows for easy expansion. In the future, we hope to increase university students' awareness of campus offerings, thereby encouraging greater participation in projects and events, whether organized by IDiA, other students, or professors.
+In collaboration with [IDiA](https://entrepreneurship.htw-berlin.de/ueber-uns/ideas-in-action-idia/ueber-idia/), we developed a project that aims to create a digital signage solution for the [Makerspace](https://entrepreneurship.htw-berlin.de/ueber-uns/ideas-in-action-idia/idia-spaces/maker-space/).
+MakeSign will be used to display adverts and reservations for tools.
 
+Key features include a well-structured dashboard for displaying time slots of 3D printers, laser cutters and CNC machines, as well as a system for uploading images to be displayed on monitors using micro computers.
 
 {{</section>}}
 
+
 {{<gallery>}}
 {{<team-member image="rudi.jpg" name="Rudolfs Spridis">}} 
 {{<team-member image="nikki.jpg" name="Niklas Aporius">}}

content/ss24/bachelor/b2-makesign/features.md

@@ -1,11 +1,16 @@
 +++
 title = "Features"
-weight = 20
+weight = 1
+
 draft = true
+
 +++
 
 {{<section title="Features">}}
 
-
+Using Makesign, you can project your own pictures, posters and GIFs on a screen and manage your content with an easy-to-use interface at any time.
+Create slideshows, choosing how long each of the images are being displayed. 
+For dynamic displays, such as the dashboard, where you can see what tool is booked for how long, you can simply create a website and connect it with the system.
+The projection runs via a Raspberry Pi, which means you can connect them to basically any screen you have lying around and give them a new life.
 
 {{</section>}}

content/ss24/bachelor/b2-makesign/process.md

@@ -1,10 +1,20 @@
 +++
 title = "Process"
-weight = 10
+weight = 1
+
 draft = true
 +++
 
 {{<section title="Process">}}
 
+At the beginning of the project, we had a kick-off meeting with Prof. Dr. Barne, our project supervisor, and Martin Holzhauer, our lead connection to the IDiA Makerspace. Martin explained his needs for the digital signage, which considers showing ads for the Makerspace and most importantly, the booking reservations of the IDiA booking website. 
+To get a general idea on digital signage, we looked around the campus for already existing digital signage use cases for inspiration, as well as possible cases, in which it might be practical to implement. After that, we looked at the IDiA booking website and selected the most important information necessary for the viewers to see on a separate “dashboard”. In addition, each of us sketched wireframes to find the necessary functions and the designs we needed. We researched which hardware, software, and frameworks we could use for the implementation. 
+For the hardware, Martin already used a Raspberry Pi for his prototype digital signage version, which simply cycled through some pictures of IDiA ads. A Raspberry Pi is a minicomputer, with a Linux based operating system, a small build, and that is pretty affordable, which makes it a practical use case for our project. The Raspberry Pi’s performance was sufficient for our needs. After talking with experts in the matter, we settled on the “Raspberry Pi 3 Model B+”, being the most practical for our project, and borrowed 3 Raspberry Pis on the spot. 
+At first, we divided up the team into 3 parts, with each working on a general task. The first, worked on setting up the operating system of the Raspberry Pi. The second, worked on the overall designs for the dashboard to get a feeling for Martin on how it will look like, as well as a smooth implementation on HTML/CSS/JS. The third, worked on finding a way to connect to the API of the IDiA booking website.
+We managed to run Linux on the Raspberry Pis relatively quickly, but had problems connecting them to the universities' internet, Eduroam, as well as getting them past the HTW-Firewall to work remotely on our notebooks. For the API, we had to write some E-Mails back and forth to the corresponding developer of the IDiA booking website, until we received our very own API-Key to fetch data from the booking website and convert them to JSON objects and display them on the dashboard.
+As we finished up the internet connection of the Raspberry Pis, as well as finishing up the dashboard with HTML/CSS/JS, the corresponding teams moved on to researching open-source software solutions, to change the contents on the digital signage. We came across a software called [Concerto](https://www.concerto-signage.org/overview), which would be able to handle all our necessities for the software. Multiple problems occurred, as we dove more deeply into the software. Concerto is fully written in the programming language Ruby and the framework Rails, which we collectively had no experience with. Furthermore, the last update was 7 years ago, which is why the UI and Code were not only extremely outdated but also did not work properly due to the changes to the Framework. So it was our task to update and improve Concerto. 
+Our supervisor supported us in this process, as it was difficult to improve the code without much "Ruby on Rails" knowledge. We struggled with this for a long time and had weekly meetings with our supervisor.
+In the following weeks, we were able to configure our Raspberry Pi, so that it could automatically run and project a website on a monitor. Additionally, we finished up the dashboard connecting our design with the API via a server.
+In the last weeks of the project, we sadly had to decide against further fixing Concerto and use the knowledge we gained from the process to set up our own rails application which fulfills the tasks we defined at the beginning. Our last job was to set up a web server with "Docker" to host the website, in which the user can upload the files they want to display.
 
 {{</section>}}

content/ss24/bachelor/b2-makesign/techstack.md

@@ -1,19 +1,47 @@
 +++
 title = "Tech Stack"
-weight = 30
+weight = 1
+
 draft = true
-hasMermaid = true
 +++
 
-
-{{<section title="Tech Stack">}}
-
+{{<section title="Communication">}}
+{{<gallery>}}
+{{<image src="zoom.jpg" alt="Zoom-Logo" caption="Zoom">}}
+{{<image src="whatsapp.jpg" alt="Whatsapp-Logo" caption="Whatsapp">}}
+{{<image src="signal.png" alt="Signal-Logo" caption="Signal">}}
+{{<image src="discord.png" alt="Discord-Logo" caption="Discord">}}
+{{</gallery>}}
 {{</section>}}
 
+{{<section title="Organization">}}
+{{<gallery>}}
+{{<image src="github.png" alt="Github-Logo" caption="Github">}}
+{{<image src="Googledocs.png" alt="Google-Docs-Logo" caption="Google-Docs">}}
+{{</gallery>}}
+{{</section>}}
 
-{{<section title="Future">}}
-
-
+{{<section title="Programming">}}
+{{<gallery>}}
+{{<image src="bootstrap.png" alt="Bootstrap-Logo" caption="Bootstrap">}}
+{{<image src="js.png" alt="Javascript-Logo" caption="Javascript">}}
+{{<image src="rails.png" alt="Rails-Logo" caption="Ruby on Rails">}}
+{{<image src="rubymine.jpg" alt="Rubymine-Logo" caption="Rubymine">}}
+{{<image src="shell.png" alt="Shell-Logo" caption="Shell">}}
+{{<image src="ubuntu.jpg" alt="Ubuntu-Logo" caption="Ubuntu">}}
+{{<image src="vsc.jpg" alt="Visual Studio Code-Logo" caption="Visual Studio Code">}}
+{{<image src="css.png" alt="CSS-Logo" caption="CSS">}}
+{{</gallery>}}
+{{</section>}}
 
+{{<section title="Design">}}
+{{<gallery>}}
+{{<image src="figma.png" alt="Figma-Logo" caption="Figma">}}
+{{</gallery>}}
 {{</section>}}
 
+{{<section title="Utility">}}
+{{<gallery>}}
+{{<image src="docker.png" alt="Docker-Logo" caption="Docker">}}
+{{</gallery>}}
+{{</section>}}