diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..4aa24c1 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,6 @@ +docs/tutorial/broadcaster/sign_in.png filter=lfs diff=lfs merge=lfs -text +docs/tutorial/broadcaster/add_admin.png filter=lfs diff=lfs merge=lfs -text +docs/tutorial/broadcaster/canvas_resolution.png filter=lfs diff=lfs merge=lfs -text +docs/tutorial/broadcaster/client_empty.png filter=lfs diff=lfs merge=lfs -text +docs/tutorial/broadcaster/client_startup.png filter=lfs diff=lfs merge=lfs -text +docs/tutorial/broadcaster/download_client.png filter=lfs diff=lfs merge=lfs -text diff --git a/docs/index.md b/docs/index.md index e6de389..c955860 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1 +1,7 @@ # Imgfloat + +Imgfloat is a real-time interactive OBS stream overlay. It allows channel administrators to display [images](./console/assets/images.md) and [videos](./console/assets/videos.md), play [audio](./console/assets/audio.md) and [anything else that you can code](./console/assets/scripts/overview.md) on the broadcast. Updates happen in real time so you can immediately see the changes on stream. + +Want to get started? Checkout out the simple guide [as a broadcaster](./tutorial/broadcaster/overview.md) or [as a channel administrator](./tutorial/channel_admin/overview.md) or check out [https://imgflo.at](https://imgflo.at) to jump in right away. + +Imgfloat is a free and open source project and you are free to host it yourself if you prefer. You can find the source code on [GitHub](https://github.com/imgfloat). diff --git a/docs/tutorial/broadcaster/add_admin.png b/docs/tutorial/broadcaster/add_admin.png new file mode 100644 index 0000000..9b87840 --- /dev/null +++ b/docs/tutorial/broadcaster/add_admin.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:21d44c36669c8fda634a6e8066fd05beabd2bb831c7d536df0e561ff7ce7c16f +size 67664 diff --git a/docs/tutorial/broadcaster/canvas_resolution.png b/docs/tutorial/broadcaster/canvas_resolution.png new file mode 100644 index 0000000..9d20921 --- /dev/null +++ b/docs/tutorial/broadcaster/canvas_resolution.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3b4bab156b6d6a924f2f52c07a3881d9b42176b5d72f83cbfee70fc53cea8e5e +size 25347 diff --git a/docs/tutorial/broadcaster/client_empty.png b/docs/tutorial/broadcaster/client_empty.png new file mode 100644 index 0000000..99d7a23 --- /dev/null +++ b/docs/tutorial/broadcaster/client_empty.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aa2cd4bc4f17201d6ab4e9274f2d998bc6d80840c56b8018e1a5c64eabcd197e +size 24598 diff --git a/docs/tutorial/broadcaster/client_startup.png b/docs/tutorial/broadcaster/client_startup.png new file mode 100644 index 0000000..9269f39 --- /dev/null +++ b/docs/tutorial/broadcaster/client_startup.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:50cdfce45b31cd6f068b38c8d20b972062c273601b93a06c008e4db44ad1574c +size 152078 diff --git a/docs/tutorial/broadcaster/download_client.png b/docs/tutorial/broadcaster/download_client.png new file mode 100644 index 0000000..9ee41e5 --- /dev/null +++ b/docs/tutorial/broadcaster/download_client.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5a4ab34c70b25b2bc03b99da5f150aed42abeffa5976da8344f5d75fdf9e73b9 +size 66530 diff --git a/docs/tutorial/broadcaster/integrations.md b/docs/tutorial/broadcaster/integrations.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/tutorial/broadcaster/obs.md b/docs/tutorial/broadcaster/obs.md index e69de29..1d51146 100644 --- a/docs/tutorial/broadcaster/obs.md +++ b/docs/tutorial/broadcaster/obs.md @@ -0,0 +1,5 @@ +# Configuring OBS + +To add the Imgfloat client window to OBS, start by opening OBS and adding a new source. Select "Window Capture" as the source type. + + diff --git a/docs/tutorial/broadcaster/overview.md b/docs/tutorial/broadcaster/overview.md index e69de29..44c7bc8 100644 --- a/docs/tutorial/broadcaster/overview.md +++ b/docs/tutorial/broadcaster/overview.md @@ -0,0 +1,27 @@ +# Getting started as a broadcaster + +Sign in with your Twitch account on [imgflo.at](https://imgflo.at) (or on your own instance) to register with the application. + +![Sign in with Twitch](./sign_in.png) + +Once signed in, you can add a channel administrator by entering their Twitch username. There is also a list of recommended channel administrators that you can add with a single click pulled from your Twitch moderator list. + +If you just want to test things out, you can skip this step for now, as you have access to your own channel admin dashboard (if you decide to go this route it is recommended that you check out [Getting started as a channel admin](../channel_admin/overview.md)). + +![Add admin](./add_admin.png) + +Finally, make sure to configure the canvas resolution to match your OBS settings. This ensures that the canvas covers the entire stream. + +![Canvas resolution](./canvas_resolution.png) + +Now you're ready to download the client. The download link can be found on the index page or on your dashboard. Make sure you pick the right version for your operating system (currently Windows 10/11, MacOS (ARM) and GNU/Linux via appimage). + +![Download client](./download_client.png) + +Once installed, simply enter your Twitch username in the client (optionally change the domain if using a self-hosted solution) and connect. This will create a transparent window with a title bar (assuming you didn't yet add any assets). + +![Client startup](./client_startup.png) + +![Client empty](./client_empty.png) + +Now we're ready to add the window to OBS. diff --git a/docs/tutorial/broadcaster/sign_in.png b/docs/tutorial/broadcaster/sign_in.png new file mode 100644 index 0000000..aafefe8 --- /dev/null +++ b/docs/tutorial/broadcaster/sign_in.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:caae2a5d24cdc52de7b56c29ab6581888ae94a349058674fd41dca88ee1b03c0 +size 98016 diff --git a/mkdocs.yml b/mkdocs.yml index db9618e..7f1ab77 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -13,11 +13,11 @@ nav: - Home: index.md - Getting Started: - Broadcaster: - - Overview: tutorial/broadcaster/overview.md + - Getting Started: tutorial/broadcaster/overview.md - OBS setup: tutorial/broadcaster/obs.md - Integrations: tutorial/broadcaster/integrations.md - Channel Admin: - - Overview: tutorial/channel_admin/overview.md + - Getting Started: tutorial/channel_admin/overview.md - Register: tutorial/channel_admin/register.md - Admin Console: - Overview: console/overview.md diff --git a/uv.lock b/uv.lock index d9ebc3d..def2c46 100644 --- a/uv.lock +++ b/uv.lock @@ -25,7 +25,7 @@ wheels = [ [[package]] name = "docs" -version = "0.1.0" +version = "1.0.0" source = { virtual = "." } dependencies = [ { name = "markdown-include" },