<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DF Storyteller</title>
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#9e2b25">
<link href="main.css" media="screen" rel="stylesheet" />
<link href="icon/css/materialdesignicons.min.css" rel="stylesheet" />
</head>
<body>
<div class="main">
<div class="sidebar">
<section class="info">
<a href="/"><img id="logo" src="logo.svg" /></a>
<h1>Welcome to Dwarf Fortress Storyteller</h1>
<div class="info-icons">
<a href="https://gitlab.com/df_storyteller/df-storyteller" title="GitLab" target="_blank">
<span class="mdi mdi-gitlab"></span>
</a>
<a href="https://discord.gg/aAXt6uu" title="Discord" target="_blank">
<span class="mdi mdi-discord"></span> Need help?
</a>
<a href="https://dfstoryteller.com" title="Our Website" target="_blank">
<span class="mdi mdi-earth"></span> Website
</a>
<a href="https://gitlab.com/df_storyteller/df-storyteller/issues" title="Report a bug" target="_blank">
<span class="mdi mdi-bug"></span> Report Bug
</a>
</div>
<footer>
<p>DF Storyteller was created under the
<a href="https://choosealicense.com/licenses/agpl-3.0/" target="_blank">AGPLv3 license</a>.<br />
</p>
</footer>
</section>
</div>
<div class="content">
<section>
<h2>Open Visualizer</h2>
<p>
After you have a visualizer installed/placed in the right folder.
You can access the visualizer by starting DF Storyteller using the "start" subcommand.
After the service has stated go to:
<a href="http://127.0.0.1:20350/paintings/" target="_blank">http://127.0.0.1:20350/paintings/</a>
( Note the URL might be slightly different depending on your configurations. )
Here you can find you personal collection of paintings/visualizers.
You can always at more visualizers later on. It will work automatically with all (already) imported worlds.
</p>
<h3>Direct opening</h3>
<p>
If your don't want to use your private gallery you can always go to the following URL depending
on the visualizer.
</p>
<p>
<pre>
http://127.0.0.1:20350/paintings/[foldername]/
</pre>
[foldername] should be replaced with the exact name of the folder inside the "serve-paintings" folder.
</p>
<h3>Non static visualizers</h3>
<p>
The case above assumes that the visualizer you are using is build using
default web technologies like
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS</a> and
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">JS</a> or even
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly" target="_blank">Web Assembly</a>.
But there could be visualizer that are written more like desktop applications.
In these cases you have to follow the instructions on the website or post you downloaded it from.
</p>
<p>
<small>
Note for developers: We might add the ability to execute native application visualizers
from the gallery in the future. Please give us your suggestions
<a href="https://gitlab.com/df_storyteller/df-storyteller/issues/63" target="_blank">here</a>.
For more info for painters:
<a href="https://gitlab.com/df_storyteller/df-storyteller/-/blob/master/docs/become_a_painter.md"
target="_blank">Become a painter</a>.
</small>
</p>
<div class="info-icons">
<a href="done.html" title="Done">
<span class="mdi mdi-play"></span> Done!
</a>
<a href="https://gitlab.com/df_storyteller/df-storyteller/-/blob/master/docs/become_a_painter.md"
target="_blank" title="Create visualizer">
<span class="mdi mdi-brush"></span> Create your own visualizer!
</a>
</div>
</section>
</div>
</div>
</body>
</html>
