{"id":18647649,"url":"https://github.com/artcom/webapp-display","last_synced_at":"2025-10-08T11:48:05.860Z","repository":{"id":38422042,"uuid":"113287622","full_name":"artcom/webapp-display","owner":"artcom","description":"An electron based app loading/rendering an external webapp in fullscreen.","archived":false,"fork":false,"pushed_at":"2024-11-27T13:55:09.000Z","size":1226,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-12-27T12:21:48.740Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artcom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-06T08:10:21.000Z","updated_at":"2024-11-27T13:55:14.000Z","dependencies_parsed_at":"2022-08-09T04:00:27.101Z","dependency_job_id":"d99aaaac-14a9-4b7d-8ecd-f2ad8a3239c5","html_url":"https://github.com/artcom/webapp-display","commit_stats":null,"previous_names":[],"tags_count":98,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fwebapp-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fwebapp-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fwebapp-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artcom%2Fwebapp-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artcom","download_url":"https://codeload.github.com/artcom/webapp-display/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239449649,"owners_count":19640555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T06:27:16.863Z","updated_at":"2025-10-08T11:48:05.840Z","avatar_url":"https://github.com/artcom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webapp Display\n\nA stand-alone display loading a webApp. Based on [Electron](http://electron.atom.io/) and tested on Windows and Mac OS X.\n\n## Setup\n\n- Install [Node.js](http://nodejs.org)\n- Install dependencies: `npm install`\n\n## Configuration\n\n### Command line arguments\n\nCommand line arguments:\n\n| Argument          | Description                            | Default         |\n| ----------------- | -------------------------------------- | --------------- |\n| -c --configFile   | Use a specific config file             | `./config.json` |\n| -l --logDir       | Use a specific path for logging        | `./logs`        |\n| -i --inlineConfig | Use the given parameter as JSON config |                 |\n| -h --help         | Show usage information                 |                 |\n| -v --version      | Show version information               |                 |\n\n### Configuration File\n\nThe configuration is provided as a `.json` file. The webapp-display supports a `single window` and a `multi window` configuration.\n\n#### Single Window\n\n- Make a copy of `config.json.singleWindowTemplate` and rename it to `./config.json`\n- it contains these options\n  - `bootstrapUrl`\n  - `webAppUrl`\n  - `displayIndex` optional, default: `0`\n  - `bounds` optional, if not set the window mode will be fullscreen, example: `{ x: 0, y: 0, width: 800, height: 600 }`\n  - `deviceEmulation` optional, example: `{ type: \"desktop\", bounds: { width: 3840, height: 2160 } }`\n\n#### Multi Window\n\n- Make a copy of `config.json.multiWindowTemplate` and rename it to `config.json`\n- it contains these options\n  - `bootstrapUrl`\n  - `windows` it contains all options of `single window` plus:\n    - `deviceSuffix` optional, default: `null`\n\nWhen using multiple windows each window should get a `deviceSuffix`. This suffix will be appended to the device name from the bootstrap server using `-` as a separator. This results in a unique `device` and `deviceTopic` for each window (e.g. `bootstrapUrl=\"http://example.com/device-P1\"` and `deviceSuffix=\"Left\"` results in `device=\"device-P1-Left\"` and `deviceTopic=\"devices/device-P1-Left\"`).\n\n## Logs\n\nLogs are created in the path specified via the command line arguments. The log files are named `webapp-display-YYYY-MM-DD.log`. The logs are rotated daily and the number of log files is limited to 7. In case that the browser window (chromium) becomes unresponsive, performance metrics will be logged.\n\n## Usage\n\nStart the application with `npm start`\n\n### Clear Cache via MQTT API\n\nThe app subscribes to the topic `devices/\u003cdevice\u003e/doClearCacheAndRestart`. Messages on this topic cause the disk cache to be cleared and the app window to be restarted. The restart is necessary so that the memory cache is also discarded in addition to the deleted disk cache.\n\n### Mouse Events via MQTT API\n\nYou can send mouse events to the topic `devices/\u003cdevice\u003e/doSendMouseEvent` to programmatically control mouse interactions:\n\nThe payload should be a JSON object ([MouseInputEvent](https://www.electronjs.org/docs/latest/api/structures/mouse-input-event) extended by the 'mouseClick' type) with the following structure:\n\n```json5\n{\n  \"type\": \"mouseDown\" | \"mouseMove\" | \"mouseUp\" | \"mouseClick\",\n  \"x\": number,\n  \"y\": number,\n  \"button\": \"left\" | \"right\" | \"middle\", // optional, defaults to \"left\"\n  \"clickCount\": number // optional, defaults to 1\n}\n```\n\nExample:\n\n```json\n{\n  \"type\": \"mouseClick\",\n  \"x\": 100,\n  \"y\": 200\n}\n```\n\nThese events will be injected into the window as if a real mouse interaction occurred at those coordinates.\n\n### Automatic Website Interactions\n\nSome websites require login credentials or cookie accecption (cookie banner). These interactions can be automated with an interaction configuration.\nexamples:\n\n```\n  {\n    \"url\": \"https://live.relution.io/\",\n    \"interactions\": [\n      {\n        \"selector\": \"input#mat-input-1\",\n        \"input\": \"name\"\n      },\n      {\n        \"selector\": \"input#mat-input-0\",\n        \"input\": \"password\"\n      },\n      {\n        \"selector\": \"[id=BTN_LOGIN]\"\n      }\n    ]\n  },\n  {\n    \"url\": \"https://www.telekom-beethoven-competition.de/itbcb-de\",\n    \"interactions\": [\n      {\n        \"delay\": 2500,\n        \"selector\": \"[data-cookie-optin-set=all]\",\n        \"index\": 1\n      }\n    ]\n  }\n```\n\n- _selector_ is the element to be clicked on.\n- _input_ value is used for input fields.\n- _index_ is used to get the right selector, because sometimes there are multiple selectors without an specific id. Default index is 0.\n\n- _delay_ is needed when cookiebanners just appear after a few seconds.\n\n## Build\n\n### Windows with Docker\n\nRun from inside the project directory:\n\n```bash\ndocker run --rm -ti \\\n  --env-file \u003c(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \\\n  --env ELECTRON_CACHE=\"/root/.cache/electron\" \\\n  --env ELECTRON_BUILDER_CACHE=\"/root/.cache/electron-builder\" \\\n  -v ${PWD}:/project \\\n  -v ${PWD##*/}-node-modules:/project/node_modules \\\n  -v ~/.cache/electron:/root/.cache/electron \\\n  -v ~/.cache/electron-builder:/root/.cache/electron-builder \\\n  electronuserland/builder:wine\n```\n\nRun from inside the container:\n\n```\nnpm i\nnpm run package:win\n```\n\n### Install on OS X\n\n```\nnpm i\nnpm run package:mac\nopen -n -a \"webapp-display.app\" --args -c path/to/config.json\n```\n\nFinal build output is located at `build/win-unpacked`.\n\n## Performance Improvements\n\nThis is a list of some command line arguments (Chromium flags) that can have a positive impact on the app's performance.\n\n```\n--force-gpu-rasterization\n--enable-native-gpu-memory-buffers\n--enable-zero-copy\n```\n\n### Troubleshoot Hints\n\nReset app permissions on macOS:\n\n- sudo tccutil reset Microphone webapp-display\n- sudo tccutil reset Camera webapp-display\n\nIn the follwing cases the credentials fill-in functionality is not working correctly:\n\n- When devtools are opened, the window is resized and the second input field can't be found.\n- When the same site is loaded instantly again without logging in before. The credentials are filled in the elements of the \"old\" disappearing iframe in this case.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartcom%2Fwebapp-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartcom%2Fwebapp-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartcom%2Fwebapp-display/lists"}