Planning

[schmidma]

Moments OpenWall 2 (aka WallING, WallE) Pictu-rs

Stakeholder

Kiosk

• fullscreen support
• update latency: should be "fast enough" when uploader stand in front of the kiosk, maybe 10 seconds? if possible: instantly
• polls storage for changes
• recommendation for images to display
• Primary UI screen
  • one large image on the left
  • multiple thumbnails on the right
  • QR code + authorization code near the screen

Uploader on mobile, desktop

• single/multiple image
• add image description/caption (optional)
• image annotation (emoji, text, drawing) (optional)
• maybe delete? (next iteration)
• Authorization is cached (like register)
• Primary UI screen
  • Maybe authorization UI
  • Upload button, opens file dialog, uploads the selected image

On-site setup

• Hardware? Maybe Raspberry Pi? Maybe old PC? Maybe Smart-TV that can display webpages?
• Network setup, access to webserver

Deployment

• Storage
  • Local filesystem as storage
  • WebDAV via FUSE?
  • SSH via FUSE?
• Does not need TLS, because terminated by someone else

Future updater

• Easy to update
• Hopefully no breaking changes

Malicious/external user

• Cannot post images?
• upload authorization? TOTP from kiosk? Drawback: Only people in front of kiosk can authorize
• Cannot fill up storage

Viewer mobile, desktop (low priority)

• large image (highlight)
• small image overview
• fast loading images (maybe thumbnails?)
• responsive layout
• Primary UI screen
  • thumbnails, click on them to open an image large

PhotovoltMaik

• archives photos of the event
• can delete, sort, etc images (optional)

Responsibilities

Server

• AuthorizING
• Storage: images
  • DownloadING
  • EventING
  • UploadING

Client

• Kiosk
  • Image presentation/display
  • (Hightlighted) Image recommendation/selection
  • Listen for updates
  • StorageING interface
• Uploader
  • Upload button + logic

Technology

Server

• Implementation Language
  • Rust (it is)
  • Python
  • JavaScript
  • Golang
  • Ruby
• Axum

Client

• JavaScript
• TypeScript (too much effort for build step)
• WebAssembly (too experimental)
• UI: Plain JavaScript + CSS

UI

• Fixed sized columns
• Different widths of columns
• Different heights within one column
• Replacing/(fading) images

Authorization

• Query parameters

Milestones

• Hello World: Skeleton
• Interfaces
  • HTTP endpoints
    • Authorization
    • UploadING
    • DownloadING
      • Some index?
      • Actual images
  • Maybe WebSocket/Server Sent Events/...?
• Server
  • Static downloadING (Static file serving)
  • DownloadING from image storage
  • UploadING
  • EventING
  • AuthenticatING
• Client
  • Uploader
    • JUST DO IT
  • Kiosk
    • LayoutING: skeleton, columns, image wireframes
    • Hardcoding images
    • DisplayING images via JavaScript (static selection)
    • Dynamic selection of images
    • Replacing images and dynamic content

[PasGl]

For inspiration (test for free) or as commercial alternative (39$ one-time-fee)
https://www.kululu.me/

[h3ndrk]

For the frontend, it would be helpful to get some kind of index with the following information:

• List of images, each:
  • Filename/URL
  • Resolution
  • Timestamp (preferred from EXIF or from filesystem as fallback)

This index should be accessible under a well-known endpoint s.t. the JavaScript can retrieve it.

Proposal:

GET /images/index.json should yield the following JSON:

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "array",
  "comment": "all available images",
  "items": [
    {
      "type": "object",
      "comment": "one available image",
      "properties": {
        "filename": {
          "type": "string",
          "comment": "relative to `/images/`, e.g. `foo.jpg` refers to `/images/foo.jpg`"
        },
        "resolution": {
          "type": "object",
          "properties": {
            "width": {
              "type": "integer",
              "comment": "pixels"
            },
            "height": {
              "type": "integer",
              "comment": "pixels"
            }
          },
          "required": [
            "width",
            "height"
          ]
        },
        "timestamp": {
          "type": "number",
          "description": "fractional UTC seconds since 1970"
        }
      },
      "required": [
        "filename",
        "resolution",
        "timestamp"
      ]
    }
  ]
}