Erste Seiten mit mkdocs
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 159 KiB |
After Width: | Height: | Size: 7.2 KiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 129 KiB |
After Width: | Height: | Size: 122 KiB |
After Width: | Height: | Size: 132 KiB |
|
@ -0,0 +1,12 @@
|
||||||
|
h1.title {
|
||||||
|
text-align: center;
|
||||||
|
color: #363636;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
h2.subtitle {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #4a4a4a;
|
||||||
|
margin-top: -.25rem;
|
||||||
|
margin-bottom: -1.25rem;
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block tabs %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
{% block footer %}{% endblock %}
|
|
@ -0,0 +1,43 @@
|
||||||
|
|
||||||
|
<figure markdown>
|
||||||
|
![Zeichenmaschine.xyz](assets/icon_512.png){ width=128 }
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<h1 class="title">Zeichenmaschine.xyz</h1>
|
||||||
|
<h2 class="subtitle">Eine kleine Java-Bibliothek für grafische Programmierung im
|
||||||
|
Informatikunterricht.</h2>
|
||||||
|
|
||||||
|
## Projektidee
|
||||||
|
|
||||||
|
Die **Zeichenmaschine** ist eine für den Informatikunterricht entwickelte Bibliothek,
|
||||||
|
die unter anderem an [Processing](https://processing.org/) angelehnt ist. Die
|
||||||
|
Bibliothek soll einige der üblichen Anfängerschwierigkeiten mit Java vereinfachen
|
||||||
|
und für Schülerinnen und Schüler im Unterricht nutzbar machen.
|
||||||
|
|
||||||
|
!!! warning
|
||||||
|
|
||||||
|
Das Projekt befindet sich noch in der Entwicklungsphase und auch wenn die
|
||||||
|
aktuelle Version schon funktionsfähig ist und einen Großteil der angestrebten
|
||||||
|
Funktionen enthält, ist noch keine stabile Version 1.0 erreicht. Vor allem
|
||||||
|
am Umfang und konsistenten Design der APIs gilt es noch zu arbeiten und es
|
||||||
|
können sich Änderungen ergeben.
|
||||||
|
|
||||||
|
Feedback und Vorschläge zu diesem Prozess (oder auch eine Beteiligung an der
|
||||||
|
Entwicklung) können sehr gerne über [Github](https://github.com/jneug) oder
|
||||||
|
[Mastodon](https://bildung.social/@ngb) an mich kommuniziert werden.
|
||||||
|
|
||||||
|
(Gleiches gilt für diese Webseite zum Projekt.)
|
||||||
|
|
||||||
|
## Dokumentation
|
||||||
|
* [Schnellstart](quickstart.md)
|
||||||
|
* [Installation](install.md)
|
||||||
|
* {{ javadoc_link() }}
|
||||||
|
|
||||||
|
## Über die Zeichenmaschine
|
||||||
|
|
||||||
|
!!! info
|
||||||
|
|
||||||
|
In der Zeichenmaschine werden bewusst nur englischsprachige Bezeichner für
|
||||||
|
Klassen, Methoden und Variablen verwendet. Ausnahme sind einzelne Klassen,
|
||||||
|
die im Zusammnehang mit dem Namen der Bibliothek stehen, wie die
|
||||||
|
Hauptklasse `Zeichenmaschine`.
|
|
@ -0,0 +1,44 @@
|
||||||
|
# Installation
|
||||||
|
|
||||||
|
Um ein einfaches Projekt mit der **Zeichenmaschine** aufzusetzen ist nicht mehr
|
||||||
|
nötig, als
|
||||||
|
die [JAR-Datei der aktuellen Version](https://github.com/jneug/zeichenmaschine/release/latest)
|
||||||
|
herunterzuladen und dem *Classpath* des Projekts hinzuzufügen. Beschreibungen
|
||||||
|
für
|
||||||
|
verschiedene Entwicklungsumgebungen sind hier aufgelistet.
|
||||||
|
|
||||||
|
## Integration in Entwicklungsumgebungen
|
||||||
|
|
||||||
|
### BlueJ
|
||||||
|
|
||||||
|
[BlueJ](https://bluej.org) sucht an drei Orten nach Bibliotheken, die für ein
|
||||||
|
Projekt in den Classpath aufgenommen werden:
|
||||||
|
|
||||||
|
- Für ein einzelnes Projekt im Projektordner im Unterordner `+libs`.
|
||||||
|
- Im Reiter "Bibliotheken" der BlueJ-Einstellungen.
|
||||||
|
|
||||||
|
Hier können Programmbibliotheken hinzugefügt werden, die dann allen Projekten
|
||||||
|
zur Verfügung stehen.
|
||||||
|
|
||||||
|
- Für alle Projekte und alle Nutzer dieser BlueJ-Version im
|
||||||
|
Unterordner `userlib` des Programmordners.
|
||||||
|
|
||||||
|
Auf Windows-Systemen ist dieser im Order `lib` des Installationsordners von BlueJ zu finden.
|
||||||
|
|
||||||
|
Auf macos-Systemen muss via Rechtsklick auf die Programmdatei `BlueJ.app` über den Menüpunkt "Paketinhalt zeigen" in den Ordner `Contents/Resources/Java/` navigiert werden.
|
||||||
|
|
||||||
|
### VSCode / VSCodium
|
||||||
|
|
||||||
|
> Coming soon
|
||||||
|
|
||||||
|
### IntelliJ
|
||||||
|
|
||||||
|
> Coming soon
|
||||||
|
|
||||||
|
### Eclipse
|
||||||
|
|
||||||
|
> Coming soon
|
||||||
|
|
||||||
|
### NetBeans
|
||||||
|
|
||||||
|
> Coming soon
|
|
@ -0,0 +1,63 @@
|
||||||
|
import re
|
||||||
|
from typing import List
|
||||||
|
|
||||||
|
|
||||||
|
def define_env(env):
|
||||||
|
@env.macro
|
||||||
|
def javadoc(clazz: str = None, target: str = None) -> str:
|
||||||
|
if not "javadoc_url" in env.variables:
|
||||||
|
return clazz
|
||||||
|
|
||||||
|
if not clazz:
|
||||||
|
return f"{env.variables['javadoc_url'].rstrip('/')}/index.html"
|
||||||
|
else:
|
||||||
|
if "javadoc_default_package" in env.variables and not clazz.startswith(env.variables['javadoc_default_package']):
|
||||||
|
clazz = f"{env.variables['javadoc_default_package'].rstrip('.')}.{clazz}"
|
||||||
|
javadoc_url = env.variables["javadoc_url"].rstrip("/")
|
||||||
|
path = clazz.replace(".", "/") + ".html"
|
||||||
|
if target:
|
||||||
|
path = f"{path}#{target}"
|
||||||
|
return f"{javadoc_url}/{path}"
|
||||||
|
|
||||||
|
@env.macro
|
||||||
|
def javadoc_link(
|
||||||
|
clazz: str = None, target: str = None, strip_package: bool = True, strip_clazz: bool = False, title: str = None
|
||||||
|
) -> str:
|
||||||
|
name = clazz or "Javadoc"
|
||||||
|
if strip_package:
|
||||||
|
if clazz and clazz.rfind(".") > -1:
|
||||||
|
name = clazz[clazz.rfind(".") + 1 :]
|
||||||
|
if target:
|
||||||
|
# _target = re.sub(r"([^(][^,]*?\.)*?([^)]+)", lambda m: m.group(2), target)
|
||||||
|
_target = target
|
||||||
|
if strip_clazz:
|
||||||
|
name = _target
|
||||||
|
else:
|
||||||
|
name = f"{name}.{_target}"
|
||||||
|
if title:
|
||||||
|
name = title
|
||||||
|
|
||||||
|
return f"[{name}]({javadoc(clazz, target)})"
|
||||||
|
|
||||||
|
@env.macro
|
||||||
|
def javadoc_signature(
|
||||||
|
clazz: str = None,
|
||||||
|
member: str = None,
|
||||||
|
package: str = None,
|
||||||
|
params: List[str] = list(),
|
||||||
|
) -> str:
|
||||||
|
sig = clazz or ""
|
||||||
|
if clazz and package:
|
||||||
|
sig = f"{package}.{sig}"
|
||||||
|
if member:
|
||||||
|
sig = f"{sig}#{member}"
|
||||||
|
|
||||||
|
pparams = ",".join(params)
|
||||||
|
sig = f"{sig}({pparams})"
|
||||||
|
|
||||||
|
return sig
|
||||||
|
|
||||||
|
|
||||||
|
# schule/ngb/zm/Zeichenmaschine.html#setCursor(java.awt.Image,int,int)
|
||||||
|
# schule/ngb/zm/Zeichenmaschine.html#getLayer(java.lang.Class)
|
||||||
|
# schule/ngb/zm/DrawableLayer.html#add(schule.ngb.zm.Drawable...)
|
|
@ -0,0 +1,130 @@
|
||||||
|
# Schnellstart mit der Zeichenmaschine
|
||||||
|
|
||||||
|
Um ein einfaches Projekt mit der **Zeichenmaschine** aufzusetzen ist nicht mehr
|
||||||
|
nötig, als die [JAR-Datei der aktuellen Version](https://github.com/jneug/zeichenmaschine/release/latest)
|
||||||
|
herunterzuladen und dem *Classpath* des Projekts hinzuzufügen. Eine Beschreibung
|
||||||
|
für verschiedene Entwicklungsumgebungen findet sich im Abschnitt [Installation](install.md).
|
||||||
|
|
||||||
|
## Die Basisklasse
|
||||||
|
|
||||||
|
Um eine Zeichenmaschine zu erstellen, muss eine Unterklasse von {{ javadoc_link("schule.ngb.zm.Zeichenmaschine") }}
|
||||||
|
erstellt werden.
|
||||||
|
|
||||||
|
```java
|
||||||
|
public class Shapes extends Zeichenmaschine {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Die gezeigte Klasse ist schon eine lauffähige Zeichenmaschine und kann gestartet
|
||||||
|
werden.
|
||||||
|
|
||||||
|
!!! note
|
||||||
|
|
||||||
|
Bei einigen Entwicklungsumgebungen muss noch eine `main`-Methode erstellt
|
||||||
|
werden, um die Zeichenmaschine zu starten:
|
||||||
|
|
||||||
|
```java
|
||||||
|
public static void main(String[] args) {
|
||||||
|
new Shapes();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Es öffnet sich ein Zeichenfenster in einer vordefinierten Größe. Um die Größe und
|
||||||
|
den Titel des Fensters zu ändern, legen wir einen Konstruktor an.
|
||||||
|
|
||||||
|
```java
|
||||||
|
public class Shapes extends Zeichenmaschine {
|
||||||
|
|
||||||
|
public Shapes() {
|
||||||
|
super(800, 800, "Shapes");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Starten wir das Projekt nun, wird das Zeichenfenster in der Größe 800x800 mit
|
||||||
|
dem Titel "Shapes" angezeigt.
|
||||||
|
|
||||||
|
<figure markdown>
|
||||||
|
![Shapes 2](assets/quickstart/shapes_2.png){ width=400 }
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
### Formen zeichnen
|
||||||
|
|
||||||
|
Eine Zeichenmaschine hat verschiedene Möglichkeiten, Inhalte in das Zeichenfenster
|
||||||
|
zu zeichnen. Um einfach nur ein statisches Bild zu erzeugen, überschreiben wir die
|
||||||
|
{{ javadoc_link("schule.ngb.zm.Zeichenmaschine", "draw()") }} Methode.
|
||||||
|
|
||||||
|
```java
|
||||||
|
public class Shapes extends Zeichenmaschine {
|
||||||
|
|
||||||
|
public Shapes() {
|
||||||
|
super(800, 800, "Shapes");
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void draw() {
|
||||||
|
background.setColor(43, 128, 243);
|
||||||
|
|
||||||
|
drawing.setFillColor(255, 223, 34);
|
||||||
|
drawing.noStroke();
|
||||||
|
drawing.circle(400, 400, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Nun haben wir einen gelben Kreis (ohne Konturlinie) auf einem blauen Hintergrund
|
||||||
|
gezeichnet.
|
||||||
|
|
||||||
|
<figure markdown>
|
||||||
|
![Shapes 3](assets/quickstart/shapes_3.png){ width=400 }
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
### Vorbereitung der Zeichenfläche
|
||||||
|
|
||||||
|
Im Beispiel oben setzen wir die Hintergrundfarbe auf Blau, die Füllfarbe auf Gelb
|
||||||
|
und deaktivieren die Konturlinie. Wenn diese Einstellungen für alle Zeichenobjekte
|
||||||
|
gleich sind, können wir sie statt in `draw()` auch in die `setup()` Methode schreiben.
|
||||||
|
Diese bereitet die Zeichenfläche vor dem ersten Zeichnen vor.
|
||||||
|
|
||||||
|
```java
|
||||||
|
public class Shapes extends Zeichenmaschine {
|
||||||
|
|
||||||
|
public Shapes() {
|
||||||
|
super(800, 800, "Shapes");
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void setup() {
|
||||||
|
background.setColor(43, 128, 243);
|
||||||
|
|
||||||
|
drawing.setFillColor(255, 223, 34);
|
||||||
|
drawing.noStroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void draw() {
|
||||||
|
for( int i = 0; i < 10; i++ ) {
|
||||||
|
drawing.circle(
|
||||||
|
random(0, canvasWidth),
|
||||||
|
random(0, canvasHeight),
|
||||||
|
random(50, 200)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Im Beispiel setzen wir nun die Grundeinstellungen in der `setup()` Methode. In
|
||||||
|
`draw()` werden zehn gelbe Kreise an Zufallskoordinaten gezeichnet.
|
||||||
|
|
||||||
|
<figure markdown>
|
||||||
|
![Shapes 4](assets/quickstart/shapes_4.1.png){ width=400 }
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
!!! tip ""
|
||||||
|
|
||||||
|
Mit {{ javadoc_link("Constants", "canvasWidth", title="canvasWidth") }} und {{ javadoc_link("Constants", "canvasHeight", strip_clazz=True) }} kannst du in der Zeichenmaschine auf
|
||||||
|
die aktuelle Größe der Zeichenfläche zugreifen. {{ javadoc_link("Constants", "random(int,int)") }}
|
||||||
|
erzeugt eine Zufallszahl innerhalb der angegebenen Grenzen.
|
|
@ -0,0 +1,76 @@
|
||||||
|
site_name: Zeichenmaschine.xyz
|
||||||
|
site_description: Eine kleine Java-Bibliothek für grafische Programmierung im Informatikunterricht.
|
||||||
|
site_author: J. Neugebauer
|
||||||
|
repo_url: https://github.com/jneug/zeichenmaschine
|
||||||
|
repo_name: jneug/zeichenmaschine
|
||||||
|
|
||||||
|
site_dir: build/docs/site
|
||||||
|
|
||||||
|
theme:
|
||||||
|
name: material
|
||||||
|
custom_dir: docs/home_override/
|
||||||
|
language: de
|
||||||
|
logo: assets/icon_64.png
|
||||||
|
favicon: assets/icon_32.png
|
||||||
|
features:
|
||||||
|
- content.code.annotate
|
||||||
|
- navigation.top
|
||||||
|
- navigation.tracking
|
||||||
|
- search.suggest
|
||||||
|
font: false
|
||||||
|
palette:
|
||||||
|
- media: "(prefers-color-scheme: light)"
|
||||||
|
scheme: default
|
||||||
|
primary: blue
|
||||||
|
accent: deep orange
|
||||||
|
toggle:
|
||||||
|
icon: material/weather-sunny
|
||||||
|
name: Dunkles Design aktivieren
|
||||||
|
- media: "(prefers-color-scheme: dark)"
|
||||||
|
scheme: slate
|
||||||
|
primary: blue
|
||||||
|
accent: deep orange
|
||||||
|
toggle:
|
||||||
|
icon: material/weather-night
|
||||||
|
name: Helles Design aktivieren
|
||||||
|
extra_css:
|
||||||
|
- assets/zmstyles.css
|
||||||
|
|
||||||
|
nav:
|
||||||
|
- Einführung: index.md
|
||||||
|
- Schnellstart: quickstart.md
|
||||||
|
- Installation: install.md
|
||||||
|
|
||||||
|
markdown_extensions:
|
||||||
|
- admonition
|
||||||
|
- attr_list
|
||||||
|
- def_list
|
||||||
|
- footnotes
|
||||||
|
- md_in_html
|
||||||
|
- toc:
|
||||||
|
permalink: true
|
||||||
|
- pymdownx.magiclink
|
||||||
|
- pymdownx.betterem:
|
||||||
|
smart_enable: all
|
||||||
|
- pymdownx.caret
|
||||||
|
- pymdownx.smartsymbols
|
||||||
|
- pymdownx.emoji:
|
||||||
|
emoji_index: !!python/name:materialx.emoji.twemoji
|
||||||
|
emoji_generator: !!python/name:materialx.emoji.to_svg
|
||||||
|
- pymdownx.highlight:
|
||||||
|
anchor_linenums: true
|
||||||
|
- pymdownx.inlinehilite
|
||||||
|
- pymdownx.snippets
|
||||||
|
- pymdownx.details
|
||||||
|
- pymdownx.superfences
|
||||||
|
|
||||||
|
plugins:
|
||||||
|
- search:
|
||||||
|
lang: de
|
||||||
|
separator: '[\s\-\.]'
|
||||||
|
- macros:
|
||||||
|
module_name: docs/macros
|
||||||
|
|
||||||
|
extra:
|
||||||
|
javadoc_url: https://zeichenmaschine.xyz/docs/
|
||||||
|
javadoc_default_package: schule.ngb.zm
|
|
@ -0,0 +1,25 @@
|
||||||
|
certifi==2022.9.24
|
||||||
|
charset-normalizer==2.1.1
|
||||||
|
click==8.1.3
|
||||||
|
ghp-import==2.1.0
|
||||||
|
idna==3.4
|
||||||
|
Jinja2==3.1.2
|
||||||
|
Markdown==3.3.7
|
||||||
|
MarkupSafe==2.1.1
|
||||||
|
mergedeep==1.3.4
|
||||||
|
mkdocs==1.4.1
|
||||||
|
mkdocs-macros-plugin==0.7.0
|
||||||
|
mkdocs-material==8.5.6
|
||||||
|
mkdocs-material-extensions==1.0.3
|
||||||
|
packaging==21.3
|
||||||
|
Pygments==2.13.0
|
||||||
|
pymdown-extensions==9.6
|
||||||
|
pyparsing==3.0.9
|
||||||
|
python-dateutil==2.8.2
|
||||||
|
PyYAML==6.0
|
||||||
|
pyyaml_env_tag==0.1
|
||||||
|
requests==2.28.1
|
||||||
|
six==1.16.0
|
||||||
|
termcolor==2.0.1
|
||||||
|
urllib3==1.26.12
|
||||||
|
watchdog==2.1.9
|