Interface

The Anthias interface is the web-based administration component that provides the user with the capability to configure and manage the system.

Architecture

The Anthias interface is built on a layered architecture:

  • Frontend: The frontend is responsible for rendering the user interface and interacting with the backend.
  • Backend: The backend is responsible for handling user requests, interacting with the database, and managing the system.
  • API: The API is a set of endpoints that allow the frontend to communicate with the backend.

Components:

  • NGINX: NGINX is used as a reverse proxy to forward requests from the user to the backend.
  • WebSocket: The anthias-websocket component is used for forwarding requests from NGINX to the backend.
  • Redis: redis is used as a database, cache, and message broker.
  • Database: The database component uses SQLite to store asset information.
  • Celery: anthias-celery is used for handling asynchronous tasks.
  • Viewer: The anthias-viewer is responsible for displaying the content on the screen.

Communication

The various components communicate using the following mechanisms:

  • DBus: DBus is used for communication between the webview and the backend. The webview registers the screenly.webview object at /Screenly on the session bus. It provides two methods: loadPage and loadImage.
  • HTTP/HTTPS: HTTP/HTTPS is used for communication between the frontend, backend, and other components.

Examples

  • Loading a web page:
from pydbus import SessionBus
          
          bus = SessionBus()
          browser_bus = bus.get('screenly.webview', '/Screenly')
          
          browser_bus.loadPage("www.example.com")
          
  • Getting the device name:
                        
                                  
                                      Option
                                      Value
                                      Description
                                  
                                  
                                  
                                  
                                      Device Name
                                      {{ balena_device_name_at_init }}
                                      The name of the device on first initialisation.
                                  
          

Key Features

  • Asset Management: Upload, manage, and schedule assets such as images, videos, and web pages.
  • Content Scheduling: Create and manage schedules for displaying content.
  • Display Management: Manage multiple displays and assign content to them.
  • User Management: Manage users and their permissions.
  • Integrations: Integrate with other systems and services.

Resources


          ## Top-Level Directory Explanations
          
          <a class='local-link directory-link' data-ref=".github/" href="#.github/">.github/</a> - This directory contains GitHub-specific configuration files and workflows for the project.
          
          <a class='local-link directory-link' data-ref=".github/workflows/" href="#.github/workflows/">.github/workflows/</a> - This directory contains YAML files defining continuous integration and deployment workflows for GitHub Actions.
          
          <a class='local-link directory-link' data-ref="ansible/" href="#ansible/">ansible/</a> - Ansible is an open-source configuration management and automation tool. This directory contains Ansible playbooks and roles for managing and configuring the project.
          
          <a class='local-link directory-link' data-ref="ansible/roles/" href="#ansible/roles/">ansible/roles/</a> - This directory contains Ansible roles, which are reusable collections of tasks and configurations for managing specific aspects of a system.
          
          <a class='local-link directory-link' data-ref="ansible/roles/network/" href="#ansible/roles/network/">ansible/roles/network/</a> - This role manages network configurations.
          
          <a class='local-link directory-link' data-ref="ansible/roles/splashscreen/" href="#ansible/roles/splashscreen/">ansible/roles/splashscreen/</a> - This role manages the configuration of a splash screen.
          
          <a class='local-link directory-link' data-ref="anthias_app/" href="#anthias_app/">anthias_app/</a> - This directory contains the main application codebase for the project, likely written in Django.
          
          <a class='local-link directory-link' data-ref="anthias_app/migrations/" href="#anthias_app/migrations/">anthias_app/migrations/</a> - This directory contains database migration files for the Django application.
          
          <a class='local-link directory-link' data-ref="anthias_django/" href="#anthias_django/">anthias_django/</a> - This directory may contain additional Django-specific configuration files and code.
          
          <a class='local-link directory-link' data-ref="api/" href="#api/">api/</a> - This directory contains the API codebase for the project.
          
          <a class='local-link directory-link' data-ref="api/serializers/" href="#api/serializers/">api/serializers/</a> - This directory contains Django REST Framework serializers for converting data between Python objects and JSON.
          
          <a class='local-link directory-link' data-ref="api/views/" href="#api/views/">api/views/</a> - This directory contains Django views for handling HTTP requests and rendering responses.
          
          <a class='local-link directory-link' data-ref="bin/" href="#bin/">bin/</a> - This directory contains executable scripts for the project.
          
          <a class='local-link directory-link' data-ref="lib/" href="#lib/">lib/</a> - This directory contains reusable Python modules and libraries for the project.
          
          <a class='local-link directory-link' data-ref="static/" href="#static/">static/</a> - This directory contains static files, such as images, CSS, and JavaScript, that are served directly to the user by the web server.
          
          <a class='local-link directory-link' data-ref="static/css/" href="#static/css/">static/css/</a> - This directory contains CSS files.
          
          <a class='local-link directory-link' data-ref="static/fontawesome/" href="#static/fontawesome/">static/fontawesome/</a> - This directory contains Font Awesome icons and styles.
          
          <a class='local-link directory-link' data-ref="static/fontawesome/css/" href="#static/fontawesome/css/">static/fontawesome/css/</a> - This directory contains Font Awesome CSS files.
          
          <a class='local-link directory-link' data-ref="static/js/" href="#static/js/">static/js/</a> - This directory contains JavaScript files.
          
          <a class='local-link directory-link' data-ref="static/spec/" href="#static/spec/">static/spec/</a> - This directory contains test files for the static files.
          
          <a class='local-link directory-link' data-ref="static/spec/jasmine/" href="#static/spec/jasmine/">static/spec/jasmine/</a> - This directory contains Jasmine test files.
          
          <a class='local-link directory-link' data-ref="templates/" href="#templates/">templates/</a> - This directory contains HTML templates used to render dynamic content.
          
          <a class='local-link directory-link' data-ref="tests/" href="#tests/">tests/</a> - This directory contains test files for the project.
          
          <a class='local-link directory-link' data-ref="tools/" href="#tools/">tools/</a> - This directory contains tools and scripts used to develop and maintain the project.
          
          <a class='local-link directory-link' data-ref="tools/image_builder/" href="#tools/image_builder/">tools/image_builder/</a> - This tool likely builds and optimizes images for the project.
          
          <a class='local-link directory-link' data-ref="website/" href="#website/">website/</a> - This directory contains the website codebase.
          
          <a class='local-link directory-link' data-ref="website/assets/" href="#website/assets/">website/assets/</a> - This directory contains website assets, such as images, CSS, and JavaScript.
          
          <a class='local-link directory-link' data-ref="website/assets/styles/" href="#website/assets/styles/">website/assets/styles/</a> - This directory contains website styles.
          
          <a class='local-link directory-link' data-ref="webview/" href="#webview/">webview/</a> - This directory likely contains configuration files and code for a webview component.
          
          <a class='local-link directory-link' data-ref="webview/src/" href="#webview/src/">webview/src/</a> - This directory contains webview source code.