FicsIt-Networks

<div><style>
.fin-header {
display: grid;
}
.fin-header > div {
grid-column: 1;
grid-row: 1;
}
.fin-banner {
position: relative;
display: inline-block;
width: 100%;
opacity: 1;
z-index: 0;
}
.fin-header .content {
display: flex;
flex-direction: column;
max-width: 35rem;
margin: 0 auto 0 auto;
opacity: 1;
z-index: 2;
text-align: center;
}
.fin-header .content .filler {
flex: 1;
min-height: 15rem;
}
.fin-banner > img {
display: block;
width: 100%;
mask-image: linear-gradient(to bottom, #000f 30%, #0005 50%, #0000);
}
.fin-title {
--bg: #0008;
position: absolute;
top: 10%;
right: 10%;
transform: scale(0);
box-shadow: 0 0 10px 10px var(--bg);
background-color: var(--bg);
animation: entry 1s 2s, continous 2s 3s ease-in-out infinite alternate;
}
@keyframes entry {
0% {
transform: scale(0, 0) rotate(-1turn);
}
100% {
transform: scale(1, 1) rotate(0.03turn);
}
}
@keyframes continous {
0% {
transform: rotate(0.03turn);
}
100% {
transform: rotate(0.01turn);
}
}
svg {
--primary: orange;
--steel: #666;
--cable: yellow;
--rubber: #111;
}
</style></div>
<div class="fin-header">
<div class="fin-banner">
<img src="https://github.com/Panakotta00/FicsIt-Networks/blob/development/Resources/InGameBanner.jpg?raw=true" />
<div class="fin-title">
<img style="height: 5rem;" src="https://github.com/Panakotta00/FicsIt-Networks/blob/development/Resources/Ficsit_Logo_White.png?raw=true" />
<h1 style="width: 100%; text-align: center;">Networks</h1>
</div>
</div>
<div class="content" style="/text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;/">
<div class="filler"></div>

FicsIt-Networks allows you to control, mointor, manage and automate each process of your factory by providing a network system and programmable computers, aswell as other I/O.

Checkout the [Repository](https://ficsit-networks-repository.panakotta00.dev/) to find existing programs and examples.

If you want to learn more:
[please visit the Documentation](https://docs.ficsit.app/ficsit-networks/latest)

<div style="display: flex; justify-content: center;">

<a href="https://discord.gg/3VfZ6Da" target="_blank" rel="noopener noreferrer"><img style="height: 50px; margin: 10px;" src="https://gotpa.ws/img/join_discord.png" /></a>
<a href="https://patreon.com/ficsitnetworks" target="_blank" rel="noopener noreferrer"><img style="height: 36px; margin: 10px;" src="https://raw.githubusercontent.com/Panakotta00/FicsIt-Networks/refs/heads/development/Resources/patreon_banner.png" /></a>
<a href='https://ko-fi.com/X8X51D8D13' target="_blank" rel="noopener noreferrer"><img style='height:50px; margin: 10px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

</div>

</div>
</div>

<div><style>
.net-container {
display: grid;
grid-template-columns: [l] 10% [cl] 10% [c] 70% [r] 10% [e];
grid-template-rows: 5rem auto 5rem auto;
}
.net-container > div {
z-index: 2;
opacity: 1;
}
.net-container svg {
overflow: visible;
position: relative;
z-index: 0;
opacity: 1;
}
path {
vector-effect: non-scaling-stroke;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1rem;
}
.gallery a {
width: 15rem;
padding: 0.2rem;
margin: auto;
}
</style></div>
<div class="net-container">

<svg class="cable" style="left: 5%; top: 1rem; grid-row: 1; grid-column: l / r;" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
<path stroke="var(--cable)" stroke-width="5" fill="none" d="M 0 0 Q 50 100 100 0" />
</svg>

<svg class="cable" style="left: 50%; top: 1rem; grid-row: 1 / 3; grid-column: r;" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
<path stroke="var(--cable)" stroke-width="5" fill="none" d="M 0 0 C 50 33 -50 66 0 100" />
</svg>

<svg class="cable" style="left: 7.5%; top: 1rem; grid-row: 3; grid-column: l / r;" width="97.5%" height="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
<path stroke="var(--cable)" stroke-width="5" fill="none" d="M 0 0 Q 50 100 100 0" />
</svg>

<svg class="pole" style="left: 50%; top: 1rem; grid-row: 1; grid-column: l;" width="1" height="1">
<g>
<path fill="var(--rubber)" d="M -10 -10 L 10 -10 L 10 10 L -10 10 Z" />
<path fill="var(--primary)" d="M -15 -15 L 15 -15 L 15 -10 L -15 -10 Z M -15 15 L 15 15 L 15 10 L -15 10" />
</g>
<path fill="var(--steel)" d="M -6 15 L 6 15 L 6 300 L -6 300 Z" />
<path fill="var(--primary)" d="M -8 300 L 8 300 L 8 310 L 15 350 L 15 370 L -15 370 L -15 350 L -8 310 Z" />
</svg>

<svg class="computer" style="left: 35%; top: 1rem; grid-row: 3; grid-column: l / c;" width="1" height="1">
<g>
<path fill="var(--rubber)" d="M -10 -10 L 10 -10 L 10 10 L -10 10 Z" />
<path fill="var(--primary)" d="M -15 -15 L 15 -15 L 15 -10 L -15 -10 Z M -15 15 L 15 15 L 15 10 L -15 10" />
</g>
<path fill="var(--steel)" d="M -50 15 L 100 15 L 100 250 L -50 250 Z M 80 250 L 80 300 L 10 300 L 10 250 Z M 100 300 L 100 320 L -50 320 L -50 300 Z" />
<path fill="var(--primary)" d="M -45 20 L 95 20 L 95 245 L -45 245 Z" />
<path fill="var(--rubber)" d="M -30 35 L 30 35 L 30 170 L -30 170 Z" />
</svg>

<svg class="plug" style="right: -50%; top: 1rem; grid-row: 1; grid-column: r;" width="1" height="1">
<circle r="20" fill="var(--primary)" />
<circle r="15" fill="var(--rubber)" />
<circle r="5" fill="var(--steel)" />
</svg>

<svg class="plug" style="right: -50%; top: 1rem; grid-row: 3; grid-column: r;" width="1" height="1">
<circle r="20" fill="var(--primary)" />
<circle r="15" fill="var(--rubber)" />
<circle r="5" fill="var(--steel)" />
</svg>

<div class="first" style="grid-column: cl / r; grid-row: 2">

<style>
#features {
}
#features .feature {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#features .feature:nth-child(odd) {
flex-direction: row-reverse;
justify-content: left;
}
#features .feature:nth-child(even) {
text-align: right;
justify-content: right;
}
#features .feature > * {
margin: 0.1rem 0.3rem 0.1rem 0.3rem;
flex: 1 1;
}
#features video, #features img {
width: 40%;
max-width: 20rem;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
border: 5px solid orange;
box-shadow: 0px 10px 50px #ba660d;
background-color: #333;
}
#features .content {
min-width: 20rem;
max-width: 50rem;
}
</style>

Features
========

<div id="features">

<div class="feature" id="networks">
<div class="content">
<h4>Networks</h4>
This is a basic network like the existing power network allowing you to connect buildings with a network connector to the network.
When placing a network cable you're also able to automatically add a network adapter to existing Satisfactory Machines to connect them to the network.
These networks then allow you to access function from machines and get automatically send signals from machines e.g. no need of polling.
</div>
<img src="https://i.imgur.com/2eXXsH4.jpg">
</div>

<div class="feature" id="modular-computer">
<div class="content">
<h4>Modular Computer</h4>
The modular computer is a building wich has network connector and a power connector.
The basic concept is, that you have panele were you can place different modules like the cpu, ram-bars or a drive enabling different features for your computer.
There is currently one type of processor, the Lua Processor. It allows you to run complex Lua code which uses the network to interact with your factory.
</div>
<img src="https://preview.redd.it/ficsit-networks-showcase-v0-kn3oufxobo9a1.png?width=1918&format=png&auto=webp&s=61dbb26b08de5d906ccd3f95c94b185185e2f245" />
</div>

<div class="feature" id="modular-io">
<div class="content">
<h4>Modular I/O Panels</h4>
The modular I/O Panel is basically a control panel were you can attach different I/O modules like buttons, levers, LEDs, displays and so on. To read and write data to and from a computer.
</div>
<img src="https://preview.redd.it/i-am-addicted-to-ficsit-networks-v0-8d2ukihcmema1.jpg?width=1080&crop=smart&auto=webp&s=13401dd3c9e581f905876cc36931bac4d85b8e4f" />
</div>

<div class="feature" id="screens">
<div class="content">
<h4>Screens</h4>
Monitors/Monitors and GPUs allow you to visualize data in multiple different forms. They also allow you to use montiors as user inputs like Keyboard, Mouse and Touch.
</div>
<img src="https://preview.redd.it/ficsit-networks-showcase-v0-w4whz2lyao9a1.png?width=1920&format=png&auto=webp&s=7bee39bc77b42a7efc404b2047af2f4ebda71324" />
</div>

<div class="feature" id="api">
<div class="content">
<h4>Extensive API</h4>
Most of the games mechanics are exposed to the script environment using the reflection system. The in-game reflection viewer allows you to easily discover exposed functionallity for every machine and most buildings. Even other mods that do not explicity support FicsIt-Networks have some API available to work with.
</div>
<img src="https://i.redd.it/ficsit-networks-showcase-v0-j3js32yobo9a1.png?width=1917&format=png&auto=webp&s=3f739b6e7cf069a37e12bcb0447a8da8cc065eee" />
</div>

<div class="feature" id="lua">
<div class="content">
<h4>Lua Scripting</h4>
Lua is a first-class-citizen and is used to programm in-game computers. The reflection system and even more API is exposed to the Lua runtime giving you a lot of freedom on how to control your factory.
</div>
<img src="https://external-preview.redd.it/i-made-scrolling-text-with-ficsit-networks-v0-7Nd6yfaqqp1oH2IPkEzMNBh12egdDK26lNimTRH0YFk.png?format=pjpg&auto=webp&s=f7c78795db4bdaaba12ac00be833e64d64ec028c" />
</div>

</div>

</div>

<div class="seccond" style="grid-column: c / e; grid-row: 4;">

<div class="gallery">
<a class="vid" href="https://youtu.be/EErI0OiWttw"><img src="https://img.youtube.com/vi/EErI0OiWttw/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/EtybEOkgJ4o"><img src="https://img.youtube.com/vi/EtybEOkgJ4o/maxresdefault.jpg" /></a>
<a class="vid" href="https://www.youtube.com/playlist?list=PLKTdAeAt_BilFGjKoIG9GObwjqmxdSoeE"><img src="https://img.youtube.com/vi/Pp8prMF9pno/maxresdefault.jpg" /></a>
</div>

<br />

Contributors
============
<div class="columns">
<style>.columns ul { margin-block: 0; column-count: 3; }</style>

- [Panakotta00](https://panakotta00.dev)
- [Roze](https://github.com/RozeDoyanawa)
- [RosszEmber](https://www.deviantart.com/ronsemberg)
- Coffeediction
- Deantendo
- [Raysh](https://www.artstation.com/raysh)

</div>

<br />

</div>
</div>