logging

Friday, November 1, 2024

Installing Apache2 and configuring a virtual domain on Ubuntu 22.04

Install and configure Apache2

Install apache2 and configure the firewall:
sudo apt install apache2
sudo ufw app list
sudo ufw allow 'Apache Full'
systemctl status apache2
Apache2 status should look like:
<user>@<hostname>:~$ sudo systemctl status apache2
● apache2.service - The Apache HTTP Server
     Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor prese>
     Active: active (running) since Thu 2022-07-14 11:27:14 UTC; 1h 7min ago
       Docs: https://httpd.apache.org/docs/2.4/
   Main PID: 1749 (apache2)
      Tasks: 55 (limit: 956)
     Memory: 5.4M
        CPU: 268ms
     CGroup: /system.slice/apache2.service
             ├─1749 /usr/sbin/apache2 -k start
             ├─1751 /usr/sbin/apache2 -k start
             └─1752 /usr/sbin/apache2 -k start
Firewall status should now look like:
<user>@<hostname>:~$ sudo ufw app list
Available applications:
  Apache
  Apache Full
  Apache Secure
  OpenSSH
Append a ServerName to /etc/apache2/apache2.conf:
# ServerName
ServerName <hostname>
Disable directory listings:
sudo a2dismod --force autoindex
That should look like:
sudo a2dismod --force autoindex
Module autoindex disabled.
To activate the new configuration, you need to run:
  systemctl restart apache2
Restart:
sudo systemctl restart apache2
Within Apache create a virtual domain:
sudo mkdir /var/www/<YOUR_DOMAIN>
sudo chown -R $USER:$USER /var/www/<YOUR_DOMAIN>
sudo chmod -R 755 /var/www/<YOUR_DOMAIN>
Create a test index.html for this domain:
cat << EOT > /var/www/<YOUR_DOMAIN>/index.html
<html>
    <head>
        <title>Welcome to <YOUR_DOMAIN>!</title>
    </head>
    <body>
        <h1>Success!  The <YOUR_DOMAIN> virtual host is working!</h1>
    </body>
</html>
EOT
Configure the domain:
cat  << EOT > /tmp/<YOUR_DOMAIN>.conf
<VirtualHost *:80>
    ServerAdmin <YOUR_MAIL>
    ServerName <YOUR_DOMAIN>
    ServerAlias www.<YOUR_DOMAIN>
    DocumentRoot /var/www/<YOUR_DOMAIN>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
EOT
sudo mv /tmp/<YOUR_DOMAIN>.conf /etc/apache2/sites-available/
(For some reason sudo and 'here documents' don't go well together, so 2 steps.)
Enable the domain:
 sudo a2ensite <YOUR_DOMAIN>
That should look like:
<user>@<hostname>:~$ sudo a2ensite <YOUR_DOMAIN>
Enabling site <YOUR_DOMAIN>.
To activate the new configuration, you need to run:
  systemctl reload apache2
Now disable the default end reload Apache2:
sudo a2dissite 000-default.conf
sudo systemctl reload apache2
Test using a browser or by running:
curl http://127.0.0.1:80
The curl should return the index page.

Setup https using Let’s Encrypt

Requirement to use Let's Enrypt https is that your system name is resolvable in public DNS.
Follow the steps described here at letsencrypt:
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --apache
Your website should now be configured for https.

Additional security

And now... I ran:
https://developer.mozilla.org/en-US/observatory/analyze?host=jvdm.info
And it complains about Content Security Policy (CSP)... A reasonable amount of information can be found here: https://www.invicti.com/blog/web-security/content-security-policy/.
/etc/apache2/sites-available First thing is to add
Header always set Content-Security-Policy "default-src 'self'
to the sites 'conf' file in '/etc/apache2/sites-available' to prevent any cross site content (lets be blunt) and restart apache. Then also add:
Header always set Strict-Transport-Security max-age=31536000
To this config file and restart apache.
Remains:
Header always set X-Content-Type-Options nosniff
And:
Header always append X-Frame-Options SAMEORIGIN
Now the site gets 'A+ 100+' on https://developer.mozilla.org/en-US/observatory/analyze?host=jvdm.info.

Tuesday, October 22, 2024

Links related to ' Computer Art'

This is a collection o links towards items related to 'Computer Art'.

Links:

(Archology) Various old periodicals on Computer Art from the University of Bremen

COMPUTER GRAPHICS AND ART May 1976
COMPUTER GRAPHICS AND ART Aug 1976
COMPUTER GRAPHICS AND ART Nov 1976
COMPUTER GRAPHICS AND ART Feb 1977
COMPUTER GRAPHICS AND ART May 1977
COMPUTER GRAPHICS AND ART Aug 1977
COMPUTER GRAPHICS AND ART Nov 1977
COMPUTER GRAPHICS AND ART Feb 1978
COMPUTER GRAPHICS AND ART May 1978
COMPUTER GRAPHICS AND ART Aug 1978
COMPUTER GRAPHICS AND ART Nov 1978

Computers and Automation 1967
Computers and Automation 1968
Computers and Automation 1969

Georg Nees

Video: Georg Nees im ZKM
Georg Nees wiki

Manfred Mohr

Manfred Mohr wiki
Manfred Mhor

Herbert Franke

Cybernetic Serendipity (exhibition of cybernetic art)
A 21-minute video displaying Herbert W. Franke’s original MONDRIAN software
Quadrate (Squares) Print


Vera Molnár

Vera Molnár


Spirograph wiki
Open Processing
Comparison of Mondrian's ' composition with lines' and a computer generated picture
Early Digital Art At Bell Telephone Laboratories
Cybernetic Serendipity was an exhibition of cybernetic art
Cybernetic Serendipity (ICA) - Late Night Lineup (1968)
Is Photography Art? — Both Sides of the Debate Explained
Bauhaus In Graphic Design
Vasarely Museum in Budapest
the Bridget Riley website
Jeffrey Steele
Digital Canon (1960–2000) of the Netherlands
Wikipedia on Batik
Wikipedia on Islamic patterns
Site dedicated to Peter Struyken
Zomerzegels 1970
Hilma af Klint was a Swedish artist and mystic whose paintings are considered among the first abstract works known in Western art history
'Automatic drawing and painting' ludwig-wilding piero-dorazio gego lothar-charoux
Artists Rights Society

Tuesday, January 9, 2024

Introduction to OpenLayers

Introduction

What is 'OpenLayers'?

Openlayers is an open-source JavaScript library for displaying maps and map data in web browsers. It is simmilar to Google Maps, Bing Maps, Leaflet, Web Feature Service (WFS) protocols and other standards like GeoJSON, GML and many others.

It was developed by a software company MetaCarta ahead of the O'Reilly 'Where 2.0' conference in June 2006, supposedly as an alternative to Google Maps. MetaCarta seems to have disappeared from the internet. This is a screenprint of a still functioning website in 2014:

Installing

Installing build tools for developing OpenLayers based maps on Ubuntu 22.04

Prerequisites on Ubuntu 22.04

Before installing the build tools and sources for developing OpenLayers based mappings on a plain Ubuntu 22.04 system make sure 'curl' and a version of 'node.js' later than version 14 are installed, for instance by running:

sudo apt install curl sudo snap install node --classic --channel=19

Install npm:

curl -0 -L https://npmjs.org/install.sh | sudo sh

* Warning! Be aware that it is risky to pipe a shell script fetched from the internet into a root shell, only do this from a site you trust and on a system that is disposable.* Then install 'git':

sudo apt install git

OpenLayers 'Getting Started'

Now you are able to create the OpenLayers 'getting started app':

npm create ol-app <your app name> cd <your app name>

In order to make the vite development server run on IP address 0.0.0.0 instead of 'localhost' add '--host' to the "start": "vite" line in 'package.json'. And start the development server: ```

npm start ```

If you point your browser to the development server the result should look like:

The Anatomy of OpenLayers 'Getting Started'

Directory structure and files

At this moment the following directories and files will have been created in your application development directory:

myapp/
├── .github
├── .gitignore
├── <u>index.html</u>
├── <u>main.js</u>
├── <u>style.css</u>
├── node_modules
│   ├── .bin
│   .
│   .
│   ├── xml-utils
│   └── zstddec
├── package.json
├── package-lock.json
├── readme.md
├── style.css
└── vite.config.js

The most important files are:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Using OpenLayers with Vite</title> </head> <body> <div id="map"></div> <script type="module" src="./main.js"></script> </body> </html>

And

main.js

``` import './style.css'; import {Map, View} from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM';

const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); ```

Basic Concepts

The main.js file shows some basic concepts of OpenLayers:

  • Map: from the ol/map module is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed.
  • View: represents a simple 2D view of the map. This is the object to act upon to change the center, resolution, and rotation of the map. A View has a projection.
  • Source: this function gets (remote) data for a layer.
  • Layer: a map can have multiple layers of different types like Tile, Image or Vector.

Under the hood of OpenLayers 'getting started'

In order to gain some more understanding of the anatomy of the application you can look at the network traffic between your browser and the development server (depends on your browser, but in Firefox: run 'developer tools > network' and 'save as har' then filter the 'url' lines):

          ```
          "url": "http://192.168.50.97:5173/",
          "url": "http://192.168.50.97:5173/@vite/client", ............
          "url": "http://192.168.50.97:5173/main.js",
          "url": "http://192.168.50.97:5173/style.css",
          "url": "http://192.168.50.97:5173/node_modules/.vite/deps/ol.js?v=ef44a998", ........
          .
          "url": "http://192.168.50.97:5173/node_modules/.vite/deps/chunk-ZRN6TD7N.js?v=ef44a998",
          "url": "http://192.168.50.97:5173/node_modules/.vite/deps/chunk-N7KRV6Z5.js?v=ef44a998",
          "url": "http://192.168.50.97:5173/node_modules/.vite/deps/chunk-4TDXP2QV.js?v=ef44a998",
          "url": "https://tile.openstreetmap.org/3 of t/4/4.png",
          "url": "https://tile.openstreetmap.org/3/4/3.png",
          .
          "url": "https://tile.openstreetmap.org/3/5/5.png",
          "url": "https://tile.openstreetmap.org/3/2/5.png",
          "url": "https://openlayers.org/favicon.ico", .............
          "url": "https://tile.openstreetmap.org/3/6/3.png",
          "url": "https://tile.openstreetmap.org/3/6/4.png",
          .
          "url": "https://tile.openstreetmap.org/3/0/5.png",
          "url": "https://tile.openstreetmap.org/3/0/2.png",
          ```

Your browser will load the index.html, main.js javascript and then the openlayer modules followed by the map image which is build of 'png' files which are retreived from the openstreetmap website.

The OpenLayers TileLayer is a map displayed in a web browser by joining dozens of individually requested image (or vector) data files usually 256x256 pixel PNG files. The number of tiles in a map is 2 to the power of the zoom level.

Zoom level 0

Zoom level 1

Zoom level 2

Zoom level 3

(Sample created using tiles.sample.sh)

Installing Apache2 and configuring a virtual domain on Ubuntu 22.04

Install and configure Apache2 Install apache2 and configure the firewall: sudo apt install apache2 sudo ufw app list sudo ufw allow 'A...