README.md 3.08 KB
Newer Older
Lucio Zambon's avatar
Lucio Zambon committed
1
# web
Lucio Zambon's avatar
Lucio Zambon committed
2
3
4
This is the web part of PUMA.
It requires the server part (canone3) and is implemented in HTML, JavaScript, 
JQuery, Bootstrap and PHP
Lucio Zambon's avatar
Lucio Zambon committed
5

Lucio Zambon's avatar
Lucio Zambon committed
6
## prerequisites
Lucio Zambon's avatar
Lucio Zambon committed
7
8
Prerequisites are Canone3, a web server (Apache or NGINX) with SSL certificate, 
PHP and PostgreSQL (MySQL isn't officialy supported but may be an alternative).
Lucio Zambon's avatar
Lucio Zambon committed
9

Lucio Zambon's avatar
Lucio Zambon committed
10
A user authentication system (only keycloak and LDAP are supported).
Lucio Zambon's avatar
Lucio Zambon committed
11
12
13

## installation
- Download all files
Lucio Zambon's avatar
Lucio Zambon committed
14
- Setup the database (use file init_pg.sql)
Lucio Zambon's avatar
Lucio Zambon committed
15
16
- fill all required configurations in conf.php, in js/conf.js, in spa/js/conf.js
and in lib/conf_jive.js
Lucio Zambon's avatar
Lucio Zambon committed
17
18

## authentication
Lucio Zambon's avatar
Lucio Zambon committed
19
20
PUMA emphasize user customization, that's why authentication is important.

Lucio Zambon's avatar
Lucio Zambon committed
21
There is a module to authenticate using keycloak or LDAP, please insert your method in file 
Lucio Zambon's avatar
Lucio Zambon committed
22
auth.php.
Lucio Zambon's avatar
Lucio Zambon committed
23
24
25
26
27
28

Only for test/quick start pourpose, there is a trivial method which allows all 
non empty usernames without password.

Any non trivial authentication require SSL certificate.

Lucio Zambon's avatar
Lucio Zambon committed
29
30
## SPA (single-page application)
in folder spa, index.html is used as a loader of some JavaScript files and a
Lucio Zambon's avatar
Lucio Zambon committed
31
configurable html file.
Lucio Zambon's avatar
Lucio Zambon committed
32
This loaded file can be pure HTML or can include some JavaScript and is referred as a _screen_.
Lucio Zambon's avatar
Lucio Zambon committed
33
34
35
36

Every HTML tag can be animated by inserting 'puma' (for older versions 'pwma') 
in the class list and a valid epics or tango attribute naming in the data-src 
attribute, e.g.
Lucio Zambon's avatar
Lucio Zambon committed
37
```html
Lucio Zambon's avatar
Lucio Zambon committed
38
<span id="myid" class="puma other-optional-classes" data-src="localhost:20000/test/device/1/long_scalar"></span>
Lucio Zambon's avatar
Lucio Zambon committed
39
```
Lucio Zambon's avatar
Lucio Zambon committed
40

Lucio Zambon's avatar
Lucio Zambon committed
41
42
43
the same method can be used also in SVG tags, for example:

```html
Lucio Zambon's avatar
Lucio Zambon committed
44
45
46
<rect x='0' y='0' width='110' height='12' style='fill:white; stroke:gray; stroke-width:1;' id="rect1" class="puma" data-src="datasrc1" data-onupdate="updateStateColor"></rect>
<use id='cam1' xlink:href="#cam" x='1800' y='5' style='stroke:gray;' class="puma" data-src="datasrc2" data-onupdate="updateCam" />	
<text x='2' y='14' style='fill:black' font-family="sans-serif" font-size="6" id="bpm1" class="puma hidden" data-src="datasrc3" data-onupdate="updateBpm"></text>
Lucio Zambon's avatar
Lucio Zambon committed
47
```
Lucio Zambon's avatar
Lucio Zambon committed
48
Screens can be saved on filesystem, database or a GIT repository as configured on server side.
Lucio Zambon's avatar
Lucio Zambon committed
49

Lucio Zambon's avatar
Lucio Zambon committed
50
More detail are described in page spa/index.html?version=template
Lucio Zambon's avatar
Lucio Zambon committed
51

Lucio Zambon's avatar
Lucio Zambon committed
52
## Designer
Lucio Zambon's avatar
Lucio Zambon committed
53
A designer produce adaptive screens using CSS3 flexbox. All saved screens can be imported as a widget.
Lucio Zambon's avatar
Lucio Zambon committed
54
55

## Text editor
Lucio Zambon's avatar
Lucio Zambon committed
56
For HTML and SVG files there is a text editor with automatic and instant preview.Files can be stored on filesystem, database or gitlab repository.
Lucio Zambon's avatar
Lucio Zambon committed
57
58
59
60

## SVG editor
The SVG part of any file is extracted and sent to the SVG editor.On save the edited SVG part is inserted again in the same file substituting the old SVG part.
_id_ and _class_ attribute are editable in evidence,also two non custom attributes are editable: _data-src_ and _data-onupdate_.
Lucio Zambon's avatar
Lucio Zambon committed
61
62
There is the possibility to pick up and drop on the plot some custom SVG easy elements (paths).
A _precision_ parameter discretize position of drogged elements 
Lucio Zambon's avatar
Lucio Zambon committed
63

Lucio Zambon's avatar
Lucio Zambon committed
64
65
## Demo
A few demos are available on Youtube [channel](https://www.youtube.com/channel/UCumWGWvXvlTbomoO88rWh7g/videos)
Lucio Zambon's avatar
Lucio Zambon committed
66

Lucio Zambon's avatar
Lucio Zambon committed
67

Lucio Zambon's avatar
Lucio Zambon committed
68
69