527 lines
20 KiB
HTML
527 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OBUS Catalog</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://meyerweb.com/eric/tools/css/reset/reset.css"
|
|
/>
|
|
<link rel="stylesheet" href="assets/css/main.css" />
|
|
</head>
|
|
<body>
|
|
<div class="back-to-top" onclick="window.scrollTo(0,0);">
|
|
<div class="button">
|
|
<i class="fas fa-arrow-up"></i>
|
|
</div>
|
|
</div>
|
|
<header>
|
|
<div class="hrd-left">
|
|
<div class="hdr-img-container">
|
|
<img src="assets/img/logo.svg" alt="Zeus logo" />
|
|
</div>
|
|
</div>
|
|
<div class="hdr-center">
|
|
<p class="hdr-title">O.B.U.S. Catalog</p>
|
|
</div>
|
|
<div class="hdr-right">
|
|
<p class="hdr-p">August 2020</p>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<h1>OBUS catalog</h1>
|
|
<div class="img-container">
|
|
<img src="assets/img/shell.jpeg" alt="" />
|
|
</div>
|
|
<article>
|
|
<h2>Introduction</h2>
|
|
<section>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis adipisci ullam dolor, distinctio rem perferendis culpa dicta quod recusandae aut, nulla minima non dolore unde nobis. Perferendis perspiciatis laudantium distinctio!</p>
|
|
<p>Ratione fugiat nisi ut aspernatur nulla. Temporibus libero eaque, obcaecati omnis quidem autem ipsum unde provident ea corrupti praesentium quam hic debitis doloribus? Ea eum illo adipisci iusto molestiae blanditiis.</p>
|
|
<p>Omnis ratione itaque deserunt eum harum aspernatur alias, a quasi quod praesentium modi! Sequi accusantium, blanditiis ut reiciendis obcaecati autem nihil ullam aliquid eaque sunt iure id numquam minus ex!</p>
|
|
<p>Similique veritatis sequi quam atque consequuntur beatae earum consequatur esse repellat, aut minus autem illo incidunt aliquam doloribus laboriosam explicabo sed veniam. Aperiam doloribus eos obcaecati repellendus saepe, pariatur illo.</p>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<h2>overview</h2>
|
|
<section>
|
|
<h3>controllers</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
|
|
laudantium neque beatae, eligendi magnam doloribus doloremque
|
|
corporis aliquam alias assumenda, repudiandae explicabo minima nihil
|
|
placeat! Earum nobis quidem repudiandae. Unde.
|
|
</p>
|
|
<p>
|
|
A alias vitae doloribus ipsam consequuntur ea ab molestiae nobis,
|
|
est porro officiis? Dignissimos corporis suscipit exercitationem
|
|
voluptatem reiciendis vitae atque magni cupiditate, architecto
|
|
corrupti facilis repudiandae minima sapiente necessitatibus.
|
|
</p>
|
|
<p>
|
|
Quis cupiditate exercitationem temporibus laboriosam eligendi earum
|
|
facilis consectetur aspernatur aliquid numquam omnis maxime, ab sed
|
|
dolor velit, veniam hic. Perferendis facilis ducimus ea beatae
|
|
accusantium, doloremque qui iste tempora.
|
|
</p>
|
|
<p>
|
|
Aspernatur, numquam quam commodi ipsam iusto nisi quos autem
|
|
praesentium non provident illo voluptate expedita aperiam natus
|
|
vitae in quaerat aliquid sint. Atque ipsa nostrum repellat facere
|
|
voluptate ab molestias!
|
|
</p>
|
|
<a href="#controllers">Read more</a>
|
|
</section>
|
|
<section>
|
|
<h3>input modules</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam
|
|
unde fugit magni error voluptates esse eveniet a vitae totam
|
|
aliquid. Natus inventore a quo, cupiditate culpa reprehenderit
|
|
tenetur modi illum.
|
|
</p>
|
|
<p>
|
|
Eum neque temporibus ratione, necessitatibus id rerum? Officia ipsum
|
|
eius molestiae ut beatae, impedit odio accusamus, dolore adipisci
|
|
nostrum doloribus laborum odit nihil at aut optio quod repellat quia
|
|
aliquid?
|
|
</p>
|
|
<p>
|
|
Qui incidunt impedit tenetur est? Deleniti excepturi ipsum, modi nam
|
|
debitis temporibus quisquam corrupti veritatis voluptatum molestias
|
|
architecto in expedita provident, velit cumque fugit consectetur
|
|
doloremque delectus porro corporis maxime.
|
|
</p>
|
|
<p>
|
|
Doloremque reiciendis libero, quia nostrum nam tempora sed voluptas
|
|
sunt dicta voluptatibus deserunt sint tempore! Laboriosam eum
|
|
officiis ratione reiciendis numquam quas, magni ab ut
|
|
necessitatibus, earum, error nobis at.
|
|
</p>
|
|
<a href="#input-modules">Read more</a>
|
|
</section>
|
|
<section>
|
|
<h3>output modules</h3>
|
|
<p>
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia magni
|
|
commodi id quae corporis nam cumque distinctio voluptatibus unde,
|
|
officiis ad, illo veritatis veniam aut repudiandae laboriosam
|
|
perferendis excepturi aperiam!
|
|
</p>
|
|
<p>
|
|
Modi nesciunt sit cupiditate nulla animi dolor, officiis natus
|
|
nostrum vel temporibus tempora deleniti voluptate, ut culpa. Minima
|
|
ex expedita at consequuntur placeat id, in commodi culpa consequatur
|
|
repudiandae! Libero.
|
|
</p>
|
|
<p>
|
|
Exercitationem eveniet aut quisquam ad, obcaecati rem facere quam
|
|
aliquam consequuntur sint, nemo similique asperiores, minima nisi
|
|
alias perspiciatis deserunt! Similique accusantium provident
|
|
doloremque aut obcaecati deleniti natus tempora facilis!
|
|
</p>
|
|
<p>
|
|
Ratione, esse iure quibusdam in facilis odit a possimus consequatur,
|
|
sit commodi voluptatem beatae nemo quisquam numquam dolorum ut animi
|
|
accusamus officiis. Non, itaque. Modi aliquid quas architecto nihil
|
|
quae?
|
|
</p>
|
|
<a href="#output-modules">Read more</a>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<div class="anchor" id="controllers"></div>
|
|
<h2>Controllers</h2>
|
|
</article>
|
|
<article>
|
|
<div class="anchor" id="input-modules"></div>
|
|
<h2>input modules</h2>
|
|
<section>
|
|
<h3>DPAD</h3>
|
|
<div class="module-info">
|
|
<div class="img-container">
|
|
<div class="square-img">
|
|
<div class="aspect-img-wrapper">
|
|
<img src="assets/img/DPAD_v1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<p class="caption">DPAD module</p>
|
|
</div>
|
|
<div class="module-intro">
|
|
<h5>Features</h5>
|
|
<ul>
|
|
<li>4 directional buttons</li>
|
|
<li>1 enter button</li>
|
|
<li>2 LED's</li>
|
|
</ul>
|
|
<h5>Description</h5>
|
|
<p>
|
|
A box with 4 directional buttons and one enter/confirm button.
|
|
Two status LED's give an easy overview of the module's state.
|
|
</p>
|
|
<h5>Applications</h5>
|
|
<ul>
|
|
<li>HID</li>
|
|
<li>Industrial control</li>
|
|
<li>Bomb-defusal devices</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="module-specs">
|
|
<h4>electrical specs</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th rowspan="2" class="bt-bord">Characteristic</th>
|
|
<th colspan="2">Limits</th>
|
|
<th rowspan="2" class="bt-bord">unit</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="bt-bord">min</th>
|
|
<th class="bt-bord">max</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply voltage</td>
|
|
<td>4.5</td>
|
|
<td>5.5</td>
|
|
<td>V</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply current</td>
|
|
<td>50</td>
|
|
<td>500</td>
|
|
<td>mA</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<h4>Application note</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Repudiandae nisi expedita sapiente inventore iste? Nulla, illo
|
|
totam eaque beatae possimus rem voluptatum quae, mollitia in
|
|
facilis dolore, perspiciatis harum fuga?
|
|
</p>
|
|
<p>
|
|
Praesentium, esse! Maiores iusto rem fuga quis enim doloremque
|
|
facilis molestias voluptatibus vitae culpa recusandae quibusdam
|
|
provident delectus aliquam deleniti, deserunt perferendis dolore
|
|
laborum quasi unde! Nulla doloremque vero totam.
|
|
</p>
|
|
<p>
|
|
Mollitia beatae, ipsa libero corrupti tempore excepturi
|
|
perspiciatis dolore dicta. Fugit, repudiandae! Incidunt doloribus
|
|
vel ratione aspernatur debitis nobis cupiditate, harum alias optio
|
|
ea eligendi in qui architecto est ipsam.
|
|
</p>
|
|
<p>
|
|
Animi repellendus eaque magnam beatae, sunt temporibus nam debitis
|
|
eligendi exercitationem quisquam ea, nihil, vitae sequi illum
|
|
cumque minus velit vel consequuntur? Officia a, quibusdam natus
|
|
perspiciatis doloribus laudantium eveniet.
|
|
</p>
|
|
</div>
|
|
<div class="module-documents">
|
|
<h4>documents</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="#datasheet"><i class="fas fa-file"></i>Datasheet</a>
|
|
</li>
|
|
<li>
|
|
<a href="#pinout"
|
|
><i class="fas fa-file-alt"></i>pinout diagram</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#mech-drawing"
|
|
><i class="fas fa-drafting-compass"></i>Mechanical drawing</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="order-codes">
|
|
<h4>order codes</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th class="bt-bord">Description</th>
|
|
<th class="bt-bord">code</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Base unit</td>
|
|
<td>DPAD1BASE</td>
|
|
</tr>
|
|
<tr>
|
|
<td>green buttons</td>
|
|
<td>DPAD1GREEN</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3>Joysticks</h3>
|
|
<div class="module-info">
|
|
<div class="img-container">
|
|
<div class="square-img">
|
|
<div class="aspect-img-wrapper">
|
|
<img src="assets/img/joystick_v1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<p class="caption">Joystick module</p>
|
|
</div>
|
|
<div class="module-intro">
|
|
<h5>Features</h5>
|
|
<ul>
|
|
<li>2 analog joysticks</li>
|
|
<li>2 clicky joystick buttons</li>
|
|
<li>2 LED's</li>
|
|
</ul>
|
|
<h5>Description</h5>
|
|
<p>
|
|
A box with 2 analog joysticks, the joysticks can be pushed down
|
|
for an extra contact. Two status LED's give an easy overview of
|
|
the module's state.
|
|
</p>
|
|
<h5>Applications</h5>
|
|
<ul>
|
|
<li>HID</li>
|
|
<li>Industrial control</li>
|
|
<li>Bomb-defusal devices</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="module-specs">
|
|
<h4>electrical specs</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th rowspan="2" class="bt-bord">Characteristic</th>
|
|
<th colspan="2">Limits</th>
|
|
<th rowspan="2" class="bt-bord">unit</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="bt-bord">min</th>
|
|
<th class="bt-bord">max</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply voltage</td>
|
|
<td>4.5</td>
|
|
<td>5.5</td>
|
|
<td>V</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply current</td>
|
|
<td>50</td>
|
|
<td>500</td>
|
|
<td>mA</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<h4>Application note</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
|
|
mollitia quo aliquam nihil reiciendis autem beatae error dolorem
|
|
inventore adipisci. Odit fugit exercitationem doloribus earum vel
|
|
laudantium illo, ea ad!
|
|
</p>
|
|
<p>
|
|
Aut totam doloribus rerum quas nemo eum dolorem, soluta placeat
|
|
dolore similique unde eveniet sapiente nesciunt repudiandae
|
|
blanditiis cupiditate architecto nobis repellat enim adipisci esse
|
|
aliquid ab. Quis, rerum dicta.
|
|
</p>
|
|
<p>
|
|
Corporis inventore, delectus laborum consectetur illum nihil,
|
|
omnis dolores in cumque pariatur quisquam molestiae ea facilis
|
|
placeat, laboriosam obcaecati voluptatibus ipsam? Qui, voluptate
|
|
magni? Excepturi minus blanditiis distinctio atque ab?
|
|
</p>
|
|
<p>
|
|
Quibusdam aut id molestiae similique enim quia inventore, ratione
|
|
commodi amet sapiente unde, sed deleniti suscipit, eum repudiandae
|
|
velit hic a perspiciatis totam beatae fuga. Magni, repellat? Id,
|
|
cupiditate totam!
|
|
</p>
|
|
</div>
|
|
<div class="module-documents">
|
|
<h4>documents</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="#datasheet"><i class="fas fa-file"></i>Datasheet</a>
|
|
</li>
|
|
<li>
|
|
<a href="#pinout"
|
|
><i class="fas fa-file-alt"></i>pinout diagram</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#mech-drawing"
|
|
><i class="fas fa-drafting-compass"></i>Mechanical drawing</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="order-codes">
|
|
<h4>order codes</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th class="bt-bord">Description</th>
|
|
<th class="bt-bord">code</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Base unit</td>
|
|
<td>JOY1BASE</td>
|
|
</tr>
|
|
<tr>
|
|
<td>green buttons</td>
|
|
<td>JOY1GREEN</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<article>
|
|
<div class="anchor" id="output-modules"></div>
|
|
<h2>output modules</h2>
|
|
<section>
|
|
<h3>LCD</h3>
|
|
<div class="module-info">
|
|
<div class="img-container">
|
|
<div class="square-img">
|
|
<div class="aspect-img-wrapper">
|
|
<img src="assets/img/LCD_v1.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<p class="caption">LCD module</p>
|
|
</div>
|
|
<div class="module-intro">
|
|
<h5>Features</h5>
|
|
<ul>
|
|
<li>1 LCD</li>
|
|
<li>2 LED's</li>
|
|
</ul>
|
|
<h5>Description</h5>
|
|
<p>
|
|
An LCD to show varying information! A bright back-light ensures
|
|
readability under all conditions.
|
|
</p>
|
|
<h5>Applications</h5>
|
|
<ul>
|
|
<li>HID</li>
|
|
<li>Industrial control</li>
|
|
<li>Bomb-defusal devices</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="module-specs">
|
|
<h4>electrical specs</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th rowspan="2" class="bt-bord">Characteristic</th>
|
|
<th colspan="2">Limits</th>
|
|
<th rowspan="2" class="bt-bord">unit</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="bt-bord">min</th>
|
|
<th class="bt-bord">max</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply voltage</td>
|
|
<td>4.5</td>
|
|
<td>5.5</td>
|
|
<td>V</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Supply current</td>
|
|
<td>50</td>
|
|
<td>500</td>
|
|
<td>mA</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<h4>Application note</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
|
|
doloribus, quia illum quibusdam porro nostrum qui earum sed.
|
|
Cupiditate at odit minus aliquam dolorem ipsum reiciendis, tempora
|
|
non voluptas pariatur.
|
|
</p>
|
|
<p>
|
|
Optio ea at ad nobis iusto officiis hic voluptate numquam aperiam,
|
|
eligendi sint, voluptas voluptatibus aspernatur magnam non
|
|
molestiae doloremque quam eveniet blanditiis architecto repellat
|
|
possimus sapiente? Accusamus, iure similique!
|
|
</p>
|
|
<p>
|
|
Perspiciatis quod porro dolores dolorum eos consequatur, hic animi
|
|
corrupti eius cum voluptatum ratione suscipit illo quasi eligendi.
|
|
Vero harum cupiditate dolor voluptatibus consequuntur rem
|
|
molestiae aperiam nisi reiciendis quae!
|
|
</p>
|
|
<p>
|
|
Deleniti beatae quam dolor! Vero at pariatur voluptas dolor eos
|
|
nostrum corrupti aspernatur, quam eum nam autem ipsum
|
|
exercitationem, rem tenetur possimus aut, nulla dolorum
|
|
repellendus expedita! Earum, quam a?
|
|
</p>
|
|
</div>
|
|
<div class="module-documents">
|
|
<h4>documents</h4>
|
|
<ul>
|
|
<li>
|
|
<a href="#datasheet"><i class="fas fa-file"></i>Datasheet</a>
|
|
</li>
|
|
<li>
|
|
<a href="#pinout"
|
|
><i class="fas fa-file-alt"></i>pinout diagram</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#mech-drawing"
|
|
><i class="fas fa-drafting-compass"></i>Mechanical drawing</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="order-codes">
|
|
<h4>order codes</h4>
|
|
<div class="table-container">
|
|
<table>
|
|
<tr>
|
|
<th class="bt-bord">Description</th>
|
|
<th class="bt-bord">code</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Base unit</td>
|
|
<td>LCD1BASE</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
<!-- <div style="height: 1200px;"></div> -->
|
|
</main>
|
|
<footer>
|
|
<div class="hdr-left">
|
|
<p>[Catalog is still a PoC]</p>
|
|
</div>
|
|
<div class="hdr-center"></div>
|
|
<div class="hdr-right">
|
|
<p>
|
|
All images in this catalog are for reference only, actual products may
|
|
vary.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|