Verified Commit 32129f0f authored by Bart Ribbers's avatar Bart Ribbers
Browse files

Initial commit

This takes the Plasma Mobile website as a base and transforms it into a
Plasma Bigscreen one. To keep the history clear and for Bigscreen
relevant changes only this is setup as a new repository rather than
forking the old one.
It removes unused images and all blog posts (Plasma Bigscreen doesn't
have blog posts yet, but should be easy to add now for the future).
It also changes all texts to be relevant for Bigscreen rather than Mobile.

Translations are also removed for now since almost all text has changed,
and thus requires translations to be redone.

What has to be done still:

- fix up Markdown codeblocks to be readable, ones that define what file
  type they are displaying are completely unreadable currently
- add some proper screenshots for the screenshot (and other) page(s)
- probably add relevant info from the current site that I might have
  missed
parents
public/
resources/
# Plasma Bigscreen Website
[![Build Status](https://binary-factory.kde.org/buildStatus/icon?job=Website_plasma-bigscreen-org)](https://binary-factory.kde.org/job/Website_plasma-bigscreen-org/)
This is the git repository for plasma-bigscreen.org, the website for Plasma Bigscreen.
As a (Hu)Go module, it requires both Hugo and Go to work.
### Development
Read about the shared theme at [kde-hugo wiki](https://invent.kde.org/websites/aether-sass/-/wikis/Hugo)
### I18n
See [hugoi18n](https://invent.kde.org/websites/hugo-i18n)
#!/usr/bin/env bash
export FILENAME="plasma-mobile-org_www"
function export_pot_file # First parameter is the path of the pot file we have to create, containing $FILENAME
{
potfile=$1
hugoi18n extract $potfile
}
function import_po_files # First parameter is the path of a directory containing several .po files named as $lang.po
{
export LANG=en_US.UTF-8
podir=$1
hugoi18n -q compile $podir
hugoi18n -q generate
}
// SPDX-FileCopyrightText: 2021 Carl Schwan <carlschwan@kde.org>
// SPDX-License-Identifier: CC0-1.0
main figure {
width: 4rem;
}
@charset "utf-8";
.post-content > p > img {
max-width: 100%;
}
section.home {
background:radial-gradient(circle,#c203c5 0%,#4e02a7 80%);
color:#fff;
.container {
display: flex;
}
.screen-height {
height: 100vh;
}
.h1 {
font-size: 6rem;
line-height: .9;
color: white !important;
margin-bottom: 40px;
}
h3 {
color: white !important;
font-weight: bold;
}
@media (max-width: 1024px) {
.h1 {
font-size: 3rem;
line-height: 1;
}
h3 {
font-size: 1.75rem;
font-weight: normal;
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.h1 {
font-size: 2rem;
line-height: 1;
}
h3 {
font-size: 1.5rem;
}
}
}
section.openup {
text-align: center;
p {
max-width: 700px;
margin: 0 auto;
}
}
.applications-section {
line-height: 1.3;
padding: 50px 0;
h2 {
margin-bottom: 50px;
}
.application-name {
display: block;
margin-top: 10px;
}
@media (max-width: 768px) {
font-size: 15px;
line-height: 1.1;
padding: 20px 0;
h2 {
margin-bottom: 20px;
}
}
}
.features-section {
margin-top: 100px;
.feature {
margin: 50px 0;
}
@media (max-width: 768px) {
margin-top: 50px;
.feature {
margin: 25px 0;
}
}
}
.wayland {
display: flex;
}
.opensource {
display: flex;
}
.adapting {
max-width: 300px;
height: auto;
display: block;
@media (max-width: 768px) {
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 300px) {
max-width: 100%;
}
}
body {
background-color: white;
@media (prefers-color-scheme: dark) {
background-color: black;
}
}
.app-announcement {
display: flex;
flex-direction: row;
margin-top: 3rem;
margin-bottom: 3rem;
}
.app-announcement.right {
flex-direction: row-reverse;
}
.app-announcement img {
max-width: 100%;
min-width: 300px;
flex-basis: 42%;
height: auto;
align-self: flex-start;
}
.app-announcement div {
flex-basis: 58%;
}
.app-announcement img.shadow-true {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.app-announcement h2 {
margin-top: 0;
}
.app-announcement.left img {
margin-right: 2rem;
}
.app-announcement.right img {
margin-left: 2rem;
}
@media (max-width: 900px) {
.app-announcement, .app-announcement.right {
flex-direction: column-reverse;
}
.app-announcement img, .app-announcement.left img, .app-announcement.right img {
margin-bottom: 2rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
width: 400px;
min-width: initial;
display: block;
}
}
// SPDX-FileCopyrightText: 2021 Carl Schwan <carlschwan@kde.org>
// SPDX-License-Identifier: CC0-1.0
main li img, main li figure {
width: 2rem;
display: inline-block;
}
.swiper-container, .swiper-slide img, .screenshot img {
height: 50vw;
min-height: 300px;
max-height: 500px
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
}
.swiper-slide {
flex-shrink: initial;
}
main {
overflow-y: hidden
}
baseURL: https://plasma-bigscreen.org/
canonifyURLs: true
defaultContentLanguage: en
enableGitInfo: true
enableRobotsTXT: true
i18n:
content:
default:
files:
- content/_index.md
- content/screenshots.md
- content/vision.md
- content/faq.md
- content/get.md
- content/join.md
- content/blog/_index.md
excludedKeys: konqi url
genToOtherDir: true
others:
- menu
- strings
languages:
en:
contentDir: content/
languageCode: en
languageName: English
menu:
main:
- identifier: project
name: Project
weight: 2
- name: Documentation
parent: project
url: /docs
weight: 3
- identifier: community
name: Community
weight: 3
- identifier: apps
name: Apps
weight: 4
url: https://apps.plasma-bigscreen.org/
title: Plasma Bigscreen
weight: 1
markup:
goldmark:
renderer:
unsafe: true
highlight:
style: tango
module:
imports:
- path: invent.kde.org/websites/aether-sass
outputs:
home:
- HTML
- RSS
section:
- HTML
params:
logo: /img/logo.png
madeByKDE: true
repoName: plasma-bigscreen-org
permalinks:
blog: /:year/:month/:day/:filename/
summaryLength: 30
module:
imports:
- path: invent.kde.org/websites/aether-sass
- path: github.com/thednp/bootstrap.native
replacements: invent.kde.org/websites/aether-sass -> ../../aether-sass
---
title: Plasma Bigscreen
menu:
main:
weight: 1
---
---
title: Contributing
menu:
main:
parent: community
weight: 1
---
This article describes how you can contribute to Plasma Bigscreen, take part in its design and development.
This page addresses a wider range of skills, each paragraph explains how to get you going from a different
starting point.
Where else do you have the opportunity to shape a complete TV software environment?
Consider joining the Plasma Bigscreen [Matrix channel](https://matrix.to/#/#plasma-bigscreen:kde.org) in order to get in touch with other developers.
# I found a bug
Reporting bugs is an helpful way to help making Plasma Bigscreen better without the need to know how to code.
You can report bugs for Plasma Bigscreen applications in their respective [invent project](https://invent.kde.org/).
Some base components like Plasma or KWin are using [bugs.kde.org](https://bugs.kde.org) instead.
Please report bugs there.
# I am a designer
For designers, the Visual Design Group [Matrix channel](https://matrix.to/#/#kde-vdg:kde.org) is a great place to start discussions about designs, and getting in touch with other designers.
You can pick up ideas from there, and post feedback or even your own designs to get input from others.
# I want to write an app
There are multiple ways to bring your application to Plasma Bigscreen.
Consider checking out the [Kirigami documentation](https://develop.kde.org/frameworks/kirigami/).
- Write a native app: You can bring a new app that is already using KDE Frameworks to Plasma Bigscreen.
Make the UI touch-friendly, and talk to us how it can best be integrated.
- Port an existing app: Plasma Bigscreen is an inclusive system, allowing to run different apps.
If your application is ready for the use on touchscreens and high-dpi displays, it's usually possible to install it using the package manager.
A first step is to try it and fix possible issues.
- Android apps: Support for Android apps is currently work-in-progress.
Talk to us about its status.
Ultimately, you will need it to be packaged for the relevant distributions that offer Plasma Bigscreen (ex. [postmarketOS](https://postmarketos.org/)).
# I want to work on the Plasma Bigscreen system
If you want develop on the Plasma Bigscreen “core” system or functionality, join the [Matrix channel](https://matrix.to/#/#plasma-bigscreen:kde.org) to discuss it with other developers.
If you're up for picking up any other task, let us know and we'll get you going.
# I want to make Plasma Bigscreen available on my Linux distribution
We love your effort to bring Plasma Bigscreen to a wider audience, and we're ready to help you with that.
If you would like to offer Plasma Bigscreen on a not-yet supported Linux distribution, the following information is useful:
- The source code is hosted on [Gitlab](https://invent.kde.org)
- KDE provides a reference image based on KDE Neon, you can use this to test against, look at integration-level solutions and borrow its tricks to get Plasma Bigscreen running
- If you want to improve things in an existing system, get in touch with us via the Plasma mailing list, or talk directly to the people working on the distro and packaging.
Do let us know of your efforts on the [Plasma mailing list](https://mail.kde.org/mailman/listinfo/plasma-devel), so we can help you to get going and provide advice that may save yourself time and headaches.
# I have this great idea for a new feature...
...but I can't do it all by myself.
A great way to find like-minded people that may be able to help you make your idea a reality is to post
it to the [Matrix channel](https://matrix.to/#/#plasma-bigscreen:kde.org) to gather feedback on it.
Maybe someone else has a similar goal, or you find people who want to help you.
#I just want to help, throw a task at me!
Great!
We always need help.
In order to find something that you find fun and rewarding to work on, a good first step is to find out which itch you have with Plasma Bigscreen, and how it can be scratched.
What's nagging you? Now give us a shout-out, best via the [Plasma mailing list](https://mail.kde.org/mailman/listinfo/plasma-devel).
You can also make yourself known in the [Matrix channel](https://matrix.to/#/#plasma-bigscreen:kde.org).
There's plenty to do, tasks for every skill and level, and you'll find it's fun to work on and learn from each other.
Consider also checking out open issues for Plasma Bigscreen projects on [Gitlab](https://invent.kde.org/).
---
title: Documentation
weight: 1
---
---
title: Develop For Plasma Bigscreen
weight: 3
---
# Getting Started
All Voice Applications for Mycroft AI, start out as simple voice skills with a graphical user interface.
This documentation will provide you with all the basics of creating new voice applications and also converting your existing voice skills or gui skills to complete voice applications.
This tutorial requires Mycroft-Core, Mycroft-GUI and Mycroft-Skill-Installer.
We are in this tutorial going to create a graphic user interface skill for Mycroft-AI which can be installed as a Voice Applications on the Plasma Bigscreen Platform.
# Developing a skill for Mycroft AI
Skills for Mycroft are written using the Python programming language.
Creating a skill requires at least basic python experience, a mycroft installation or device, and an idea of what your skill will do, and how people will use it.
We will showcase a simple hello-world example skill below.
# Skill Structure
- “myexampleskill” should be replaced with name of your skill
- “authorname” should be replaced with your git repository username
Your directory structure should now be as follows:
```
myexampleskill.authorname/requirements.txt
myexampleskill.authorname/dialog/en-us/example-speak.dialog
myexampleskill.authorname/vocab/en-us/example-one.voc
myexampleskill.authorname/ui/example.qml
myexampleskill.authorname/res/desktop/myexampleskill.desktop
myexampleskill.authorname/res/desktop/myexampleskill_icon.png
myexampleskill.authorname/res/desktop/skill.json
```
# Skill Sample _init.py_ file
This file is where most of the Skill is defined using Python code.
This file will be referenced through out this tutorial as we move along different sections of this tutorial.
To learn more in-depth about concepts of Vocab, Dialogs and creating Mycroft AI skills refer to: https://mycroft-ai.gitbook.io/docs/skill-development/introduction
```python
import sys
from adapt.intent import IntentBuilder
from mycroft import MycroftSkill, intent_handler
class MyExampleSkill(MycroftSkill):
def __init__(self):
super().__init__("MyExampleSkill")
def initialize(self):
self.add_event('myexampleskill.authorname.home', self.homepage)
self.gui.register_handler("ExampleSkill.ButtonClicked", self.handleButtonClick)
def homepage(self):
self.gui['exampleText'] = "Hello World"
self.gui.show_page("example.qml")
self.speak("Welcome To Hello World")
@intent_handler('handle_example_helloWorld').require('example-one')
def handle_example_helloWorld(self, message):
self.gui['exampleText'] = "Hello World"
self.gui.show_page("example.qml")
self.speak("Welcome To Hello World")
def handleButtonClick(self):
self.speak_dialog("example-speak")
def stop(self):
pass
def create_skill():
return MyExampleSkill()
```
# Adding a Graphical User Interface to the skill
Skill Graphical User Interfaces are written using QML user interface markup language.
## Skill Sample example.qml file
This file is where one can design the UI for the skill, the skill can have multiple pages or a single page to display.
- A skill page can be called from the Mycroft Skill with `self.gui.show_page(pagename)` where `pagename` is replaced by the page that you want to display
- Skill page can be provided data from the skill with `self.gui[‘exampleText’] = ‘Hello World’` where `exampleText` key, value is replaced by the data you want to show on your skill page
For more in-depth tutorial on creating skill graphical user interfaces, understanding Mycroft-GUI modules, available delegates and more detailed examples refer to: https://mycroft-ai.gitbook.io/docs/skill-development/displaying-information/mycroft-gui
```python
import Mycroft 1.0 as Mycroft
Mycroft.Delegate {
ColumnLayout {
anchors.fill: parent
Label {
id: labelId
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 4
text: sessionData.exampleText
}
Button {
id: buttonExample
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
text: "Speak"
onClicked: triggerGuiEvent("ExampleSkill.ButtonClicked", {})
}
}
}
```
# Updating a GUI Skill to a Voice Application
Mycroft voice skills with a GUI can easily be made into a full Voice Application by adding the following to your skill:
- A homepage **entry point**: a main page to the skill that can show an inital page of the skill or list of voice commands a skill can use for example when the voice application is started
- **Desktop File**: defines the skill as an voice application with an entry point
```
myexampleskill.authorname/res/desktop/myexampleskill.desktop
```
- **Voice Application Icon**: icon for the voice application
```
myexampleskill.authorname/res/desktop/myexampleskill_icon.png
```
- **Skill.json**: required for uploading to the store and making the voice application available to the skill installer
```
myexampleskill.authorname/res/desktop/skill.json
```
# Creating an entry point / homepage for your GUI skill
The homepage for skills is the starting point of an voice application.
In the example below we see the corresponding function defined in the `__init__.py` file that is called when the application is opened.
_Part of the `__init__.py` example above:_
```python
def initialize(self):
###
- Adding an event to the skill to display the homepage when start voice application event is sent by mycroft-gui
- The start event will always be called "yourskillname.authorname.home"
- In this example the event is liked to a function defined: self.homepage
###
self.add_event('myexampleskill.authorname.home', self.homepage)
...
def homepage(self):
###
- Function called when asked to display homepage
- Sends sample data 'exampleText' to hompage
- Shows the 'example.qml' file as the homapage
- Speaks the welcome message
###
self.gui['exampleText'] = "Hello World"
self.gui.show_page("example.qml")
self.speak("Welcome To Hello World")
```
# Creating a desktop file for your skill
The desktop file provides the application launcher with all the information about the voice application, it also defines the starting entry point of the skill.
The desktop file can be customized as per the skill author / application developers requirements, but the desktop file must contain the following keys and values for the voice application to launch correctly:
- Exec: This contains how the voice application will be executed.
All voice applications are executed inside of the Mycroft GUI skill-view and hence are required to start using the following exec:
```
Exec=mycroft-gui-app --hideTextInput --skill=myexampleskill.authorname.home
```
- Categories: This contains the application category the voice application is part of.
To display it correctly under the voice applications section, the value of this category must be set to:
```
Categories=VoiceApp
```
- StartupNotify: As the voice application is started inside the mycroft-gui skill view, the generic desktop version of startup notifications do no work with voice applications and hence must always be disabled or set to false to avoid empty windows from being created
A Complete example of how a desktop file must be formatted for the voice application:
```
[Desktop Entry]
Terminal=false
Type=Application
Name=MyExampleSkill
Exec=mycroft-gui-app --hideTextInput --skill=myexampleskill.authorname.home
Icon=myexampleskill_icon
Categories=VoiceApp
StartupNotify=false
X-DBUS-StartupType=None
X-KDE-StartupNotify=false
```