Skip to content
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions edge-apps/welcome-app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules/
dist/
*.log
.DS_Store
1 change: 1 addition & 0 deletions edge-apps/welcome-app/.ignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
9 changes: 0 additions & 9 deletions edge-apps/welcome-app/.vscode/extensions.json

This file was deleted.

148 changes: 31 additions & 117 deletions edge-apps/welcome-app/README.md
Original file line number Diff line number Diff line change
@@ -1,153 +1,67 @@
# # Screenly Welcome App

A customizable welcome screen app that lets users display a personalized greeting or message on their digital signage. Easily configure the heading and body text via the Screenly dashboard, making it ideal for receptions, events, or branded displays.

![Welcome Message App](./static/images/welcome-app-preview.png)

## Tweaking the settings

### `welcome_heading`

To configure the heading of the message app, utilize the `welcome_heading` settings.

```bash
$ screenly edge-app setting set welcome_heading='Welcome'
# A relatively long console output...
Edge app setting successfully set.
```

The welcome app's heading should be defined as a string in the format: "This is message head".

### `welcome_message`

To configure the heading of the message app, utilize the `welcome_message` settings.

```bash
$ screenly edge-app setting set welcome_message='to the team'
# A relatively long console output...
Edge app setting successfully set.
```

The welcome app's message should be defined as a string in the format: "This is message body".

### `theme` (optional)

Specifies the application's theme color and logo style. Available options are 'light' or 'dark'.

This setting determines the overall theme appearance and adjusts the logo accordingly and you can change your default value in the Screenly settings page.

```bash
$ screenly edge-app setting set theme='light'
# A relatively long console output...
Edge app setting successfully set.
```

### `override_timezone` (optional)

For instance, if you want to clock app to display the current date and time in London,
run the following command:

```bash
$ screenly edge-app setting set override_timezone='Europe/Paris'
# A relatively long console output...
Edge app setting successfully set.

$ screenly edge-app setting set override_locale='fr'
# A relatively long console output...
Edge app setting successfully set.
```

See [this page](https://momentjs.com/) for the list of all possible values for the time zone.
Alternatively, you can call `moment.locales()`, which returns all the supported locale values.

Setting invalid values for the timezone won't crash the app itself, it'll just fall back to the default time.

## Development Prerequisites

- [Bun (1.2.2+)](https://bun.sh/docs/installation)
- [Screenly Edge App CLI (v1.0.3+)](https://github.com/Screenly/cli?tab=readme-ov-file#installation)
# Welcome App

## Getting Started

```bash
bun install
screenly edge-app create \
--name=EDGE_APP_NAME \
--in-place
```

## Create an Edge App Instance via CLI

```bash
screenly edge-app instance create --name=EDGE_APP_INSTANCE_NAME
```

## Deployment

Create and deploy the Edge App:

```bash
screenly edge-app create --name welcome-app --in-place
bun run deploy
screenly edge-app instance create
```

> [!NOTE]
> The `deploy` command takes care of building the app as well.

## Development
## Configuration

Install the dependencies for the first run:
The app accepts the following settings via `screenly.yml`:

```bash
bun install
```
| Setting | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------- |
| `enable_analytics` | Enable or disable Sentry and Google Analytics integrations | optional | `true` |
| `override_locale` | Override the default locale with a supported language code (e.g., `en_US`, `fr_FR`, `de_DE`) | optional | `en` |
| `override_timezone` | Override the default timezone with a supported timezone identifier (e.g., `Europe/London`, `America/New_York`). Defaults to the system timezone if left blank | optional | - |
| `tag_manager_id` | Google Tag Manager container ID to enable tracking and analytics | optional | `GTM-P98SPZ9Z` |
| `theme` | Visual theme for the application (`light` or `dark`) | required | `light` |
| `welcome_heading` | Heading text displayed as the welcome message title | required | `Welcome` |
| `welcome_message` | Body text displayed as the welcome message content | required | `to the team` |

Run the following on a terminal to start the build process in watch mode:
## Development

```bash
bun run build:dev
bun install # Install dependencies
bun run dev # Start development server
```

Open another terminal and run the following:
## Build

```bash
bun run dev
bun run build # Build for production
```

This will start the development server via the [Screenly CLI](https://github.com/Screenly/cli).

```plaintext
$ screenly edge-app run --path=dist/
Edge App emulator is running at http://127.0.0.1:38085/edge/1/index.html
```

Copy the URL and paste it in the browser to see the app in action.

## Unit Tests

To run unit tests:
## Lint & Format

```bash
bun run test:unit
bun run lint # Lint and auto-fix
bun run format # Format source files
```

Press `q` to quit the test runner.

## E2E Tests

Install dependencies for the first run:
## Testing

```bash
bun run playwright install-deps
bun run playwright install
bun test # Run unit tests
```

To run E2E tests:

```bash
bun run test:e2e
```
## Screenshots

### Linting and Formatting
Generate screenshots at all supported resolutions:

```bash
bun run lint
bun run format
bun run screenshots
```

Screenshots are saved to the `screenshots/` directory.
Loading