Commit 7654b4c2 authored by Adrian Wuillemet's avatar Adrian Wuillemet
Browse files

#35 Fix some layouting

parent 1213f299
......@@ -2,7 +2,7 @@
# Beads - A tool to generate code from state machines
_**2019** <sup>®</sup> Jakob Baatz, Rico Possienka, Pavel Nepke, Marco Wenning, Adrian Wuillemet_<br>
_**2019** <sup>©</sup> Jakob Baatz, Rico Possienka, Pavel Nepke, Marco Wenning, Adrian Wuillemet_<br>
<br>
<br>
......@@ -14,20 +14,20 @@ buisness processes.<br>
In whatever form, state machines are cumbersome to code, as the written code is
very repetitive and it is quite easy to loose oversight as the machine gets bigger.<br>
<br>
For this purpose **Beads<sup>®</sup>** can aid you in consistently generating that
For this purpose **Beads<sup>©</sup>** can aid you in consistently generating that
code from textfiles or drawings that you provide. Simply write a **.json**
representation of your machine or use our simplified _**.bead**_ format to write
representation of your machine or use our simplified _**.bead**_ format to write
down the logic.<br>
<br>
**Beads<sup>®</sup>** is an open source python and webtech tool that can be used
**Beads<sup>©</sup>** is an open source python and webtech tool that can be used
from the command line and is easy to incorporate into scripts for project builds.
Additionally the Graphical User Interface (GUI) provides means to draw visual
representations of your machines and will persist them as _**.svg**_, _**.png**_
and _**.json**_ files.<br>
**Beads<sup>®</sup>** comes with a validaten logic for simple state machines,
and _**.json**_ files.<br>
**Beads<sup>©</sup>** comes with a validaten logic for simple state machines,
that can be turned off if needed.<br>
<br>
All further informations and details on writing state machines and using **Beads<sup>®</sup>**
All further informations and details on writing state machines and using **Beads<sup>©</sup>**
can be found below!<br>
<br>
<br>
......@@ -46,7 +46,7 @@ can be found below!<br>
### 1. Dependencies
<a name="deps"></a>
**Beads<sup>®</sup>** is a commandline tool built with Python for the backend and
**Beads<sup>©</sup>** is a commandline tool built with Python for the backend and
web technologies for the GUI. To run beads you need to have<br>
<br>
......@@ -61,13 +61,13 @@ can get it from [here](https://www.python.org/downloads/).<br>
The tool is usable without any web browser, however only from the commandline.
<br>
As listed in the section [Used technologies](#techs), **Beads<sup>®</sup>** is
As listed in the section Used technologies, **Beads<sup>©</sup>** is
built with the python library [Eel](https://pypi.org/project/Eel/) which utilizes Chrome / Chromium
in app-mode to display our GUI. We do not want to force a user that wants to work with the
GUI to install chrome/chromium, neither do we want to package a distribution of them for users
that do not care about the GUI.<br>
<br>
Chrome or Chromium is only a soft dependency, with which **Beads<sup>®</sup>** - GUI
Chrome or Chromium is only a soft dependency, with which **Beads<sup>©</sup>** - GUI
works best. Alternatively any other modern web browser will suffice and the system standard
browser will be used, if no chrome is detected.
<br>
......@@ -76,7 +76,7 @@ browser will be used, if no chrome is detected.
### 2. Download and Installation
<a name="download"></a>
Dowloading and installing **Beads<sup>®</sup>** is extremely easy:<br>
Dowloading and installing **Beads<sup>©</sup>** is extremely easy:<br>
We deploy the tool and all updates via the [Python Package Index](https://pypi.org). So to get your
hands on the tool simply install it with _pip_ and you are good to go.
......@@ -95,12 +95,12 @@ Any usage described in the sections below may differ if you install the tool thi
### 3. Commandline usage
<a name="cmd"></a>
**Beads<sup>®</sup>** follows standard conventions on commandline usage. A list of
**Beads<sup>©</sup>** follows standard conventions on commandline usage. A list of
available commands and options, as well as documentation for them can be found below.<br>
Alternatively running
```shell
$ beads --help
$ beads --help
#or
$ beads [command] --help
```
......
......@@ -176,7 +176,7 @@ def load_resource(subdir: str, name: str) -> dict:
elif name.endswith(".md"):
with open(resource_path, encoding=STANDARD_ENCODING) as resource:
content: str = md.markdown(resource.read())
content: str = md.markdown(resource.read(), extensions=['fenced_code'])
logging.debug(f'READER: Read content: {content}')
res[CONTENT] = content
......
......@@ -12,5 +12,38 @@
p {
margin-top: 5px;
}
strong {
font-weight: 400;
}
ul, ol {
margin-left: 20px;
}
ul li {
list-style-type: none;
}
pre {
margin-top: 20px;
margin-bottom: 20px;
background-color: color("circle-fill");
padding-left: 5px;
padding-right: 5px;
padding-bottom: 40px;
}
a {
pointer-events: none;
}
em {
font-style: normal;
}
img:first-of-type {
width: 100%;
}
}
}
......@@ -105,9 +105,4 @@ function setVersion(version: string) {
d3.select("#version-span").html("Version: " + version);
}
function setInfo(info: string) {
d3.select("#info").html(`<article>${info.replace(/\\n|"/g, "")}</article>`);
}
EEL.getVersion(setVersion);
EEL.getInfo(setInfo);
function setInfo(info: string) {
info = info.replace(/\\n|"/g, "");
info = info.replace(/\\u00a9/g, '&copy;');
let article = d3.create("article")
.html(`<article>${info}</article>`)
.node();
article.querySelectorAll("pre").forEach(pre => {
let replacement = pre.innerHTML;
replacement.replace(/ /g, " ");
replacement = replacement.replace(/ -/g, "\n\n -");
replacement = replacement.replace(/#/g, "\n#");
pre.innerHTML = replacement.replace(/\$/g, "\n\n$");
});
article.querySelectorAll("p a").forEach(a => {
let link = a as HTMLLinkElement;
link.innerHTML = link.href.replace(/http:\/\/localhost:[0-9]*\//g, "");
});
let logo = article.querySelector("img") as HTMLImageElement;
logo.src = "/media/logo.png";
let allImages = article.querySelectorAll("img");
for (let index = 1; index < allImages.length; index++) {
const image = allImages[index];
let p = d3.create('p')
.html(`${image.alt.replace(/\\/g, "")}`)
.node();
image.parentNode.append(p);
image.remove();
}
document.getElementById("info").appendChild(article);
}
EEL.getInfo(setInfo);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment