Hako设备 箱
计算机的线条图和3D视图，你把它们放到一个页面上，然后把零件组装起来。
主板、帽子、机箱、NAS盒、台式机、笔记本电脑、平板电脑、游戏机、旧手机等 .svg 和一个 .glb 对于每台机器，都有一个web组件，首先显示图纸，然后交叉渐变为3D，还有一个类型模型，用于检查机器是否真的组装在一起。
一分钟
npm install @johnmorrisdotca/hako-devices three
<script type="module">
import "@johnmorrisdotca/hako-devices/element";
</script>
<hako-device key="pi4"></hako-device>
<hako-device build='{"board":"pi4","case":"armor","hat":"pitft-28"}'></hako-device>
这就是页面需要捆绑器的全部内容。这幅画立刻就显示出来了；当元素出现在屏幕上并且浏览器可以绘制WebGL时，3D视图就会毫不犹豫地接管。拖动以翻转它，或使用方向键。如果没有WebGL，在Save-Data下，或者出现任何故障，绘图将保留。
在Node或浏览器中通过脚本构建一个：
import { build } from "@johnmorrisdotca/hako-devices/build";
const machine = build({ board: "pi4", case: "armor", hat: "pitft-28" });
machine.report.ok; // true
machine.glb().bytes; // a .glb file's bytes
machine.svg("thin"); // the drawing
问问它是否适合没有构建，没有三个。js：
import { check } from "@johnmorrisdotca/hako-devices";
const report = check({ board: "pi4", case: "argon", hat: "pitft-28" });
report.ok; // false
report.issues[0].message; // "Faceted metal case (Argon ONE style) closes over the header, so a hat cannot reach it."
里面有什么？
| 条目 | 什么 | 需要 |
|---|---|---|
@johnmorrisdotca/hako-devices | 目录(DEVICES， catalogue()， statusOf)、零件(PARTS)、配合检查(check)、相机规则(frameFor)、映射助手(piKey， macKey， nasKey， pcKey， deviceKeyOf)，样式，缩放助手，屏幕图片 | 没有什么 |
.../tags | FACETS， tagsOf(key)， matchesPicks(key, picks)， facetCounts(keys, picks)：对机器进行分类。它有自己的表项，因为表很大 | 没有什么 |
.../build | build(description)， buildDevice(key)， buildPart(id)：一个网格和一个绘图。 toGlb， Drawing， Box | three |
.../element | <hako-device> 和 <hako-lineup>:加载 three 只有当需要3D视图时 | three 对3 d |
.../react | 一层薄薄的 <HakoDevice> 包装器 | react |
.../machines.json | 机器列表为静态JSON：密钥，名称，制造商，家族，状态，标签，对于绘制的设备，大小和端口 | 没有什么 |
.../assets/* | 准备文件: pi4.glb， pi4.svg， pi4.thick.svg， parts/armor.glb， coming-soon.svg | 没有什么 |
用零件制造计算机
一个描述会命名一个基地，以及在基地上做什么。通过安装方式连接的部件有：一顶帽子在一个40针的接头上，一个外壳围绕着电路板的插座，一个屏幕模块在帽子的显示接头上，一块电路板在显示器的背面，一个驱动器在托架上，一个平板电脑下面的支架。每一个都是通过真实的毫米和安装类型进行检查，一个描述使网格和图纸，所以他们从来没有不一致。
import { build } from "@johnmorrisdotca/hako-devices/build";
build({ board: "pi3b", hat: "oled-bonnet" });
build({ board: "pi-zero-2w", case: "unipi" });
build({ board: "pi-zero-2w", solderHeader: true, hat: "oled-bonnet" });
build({ board: "pi5", cooler: "active-cooler", hat: "poe-plus" });
build({ base: "nas-4bay", drives: ["hdd-35", "hdd-35", null, null] });
build({ base: "ipad", stand: null });
文档/ parts.md 有每个部分和每个规则。
风格
绘画风格是一个小的设置表：线条粗细，颜色，填充。 thin 为默认值，并且 thick 另一个，每个设备和部件都是在每个里面制造的，所以另一种风格是一个入口。看到 文档/ styles.md.
<hako-device key="pi4" drawing-style="thick"></hako-device>
style="thick" 也可以，但是 style 是HTML的全局属性，并且严格的内容安全策略会报告它，所以呢 drawing-style 是要用的。
规模
默认情况下，每张图都占满了自己的图片，所以一个小棋盘看起来像一座塔一样大。与 scale="real" 它有它的真实尺寸，而且 <hako-lineup> 把机器并排放在一条基线上。线条保持其样式设置的宽度为任意大小。看到 文档/ scale.md.
<hako-device key="pi-zero" scale="real" unit="2px/mm"></hako-device>
<hako-lineup keys="pi-zero,pi5,nas-2bay" unit="1px/mm" ruler labels></hako-lineup>
实时屏幕
用你自己的文字或画布绘制设备的屏幕。看到 文档/ element.md.
const device = document.querySelector("hako-device");
device.paintScreen({ title: "Kitchen", lines: ["3 screens are on"], status: "good" });
device.paintScreen((ctx, width, height) => ctx.fillRect(0, 0, width, height));
反应
反应使 key 对于它自己，所以包装器的prop是 device：
import { HakoDevice } from "@johnmorrisdotca/hako-devices/react";
<HakoDevice device="pi4" drawingStyle="thick" />;
<HakoDevice build={{ board: "pi4", case: "armor", hat: "pitft-28" }} />;
没有商标，商标上有字
没有网格或图纸带有标志，标记或品牌印刷。 有一个中性词 print 选项，这样你就可以在设备上绘制自己的文字，风险自负：
<hako-device key="mac-studio" print="Studio One"></hako-device>
在目录和文档中，产品名称仅作为普通的描述性词语出现。所有商标归其所有者所有，本项目不隶属于任何一方，不受任何一方的赞助或认可。图纸和网格是从平面几何和出版尺寸绘制的原创作品。
通过机器是什么来过滤
名单上的每台机器都有品牌和型号，大多数都是十年。在一个来源给出它们的地方，它也有它的CPU和CPU制造商，核心，内存，操作系统，屏幕，端口，无线，重量，生成和部件。没有来源的事实被遗漏了，从来没有猜测过，所以CPU的过滤器会遗漏没有人来源的机器。
import { catalogue } from "@johnmorrisdotca/hako-devices";
import { matchesPicks } from "@johnmorrisdotca/hako-devices/tags";
const intelLaptops = catalogue().filter(({ key }) => matchesPicks(key, { type: ["Laptop"], cpuMaker: ["Intel"] }));
机器列表为JSON
每台机器也是一个静态文件，对于一个页面或脚本来说，需要列表而不需要代码： @johnmorrisdotca/hako-devices/machines.json, https://johnmorrisdotca.github.io/hako-devices/machines.json 在演示站点上（它允许其他站点读取它）。每台机器都有它的 key， name， maker， family， status， mesh， tags 对于一个绘制的装置， size 单位为毫米及 ports. 文档/ machines.md 拥有每一个领域，以及遗漏了什么和为什么。
当添加机器时，将重新生成列表并与它们一起发布。 运行 pnpm wishlist 然后 pnpm machines，并承诺 data/machines.json 用机器。 pnpm check 当文件过期时失效，因此没有它机器无法运行；构建将文件放在包中，每次推送到 main 把它放在演示网站上。
分组和颜色
groupLayout 和 groupSample 摆出一个集团的照片，把它的几台机器放在一起。 FINISHES 列出一台机器的其他颜色，每一种颜色都是它自己的设备。看到 文档/ assets.md.
即将到来的
该目录还列出了尚未安装网格的机器。status: "planned"）. 它们只有名字，没有形状：画廊和 <hako-device key="..."> 显示一个“即将到来”的图片为每个，和 catalogue()， statusOf(key) 和 catalogueCounts() 说哪个是哪个。 文档/ wishlist.md 是列表。
帮助填写
这个列表有一些差距，你可以帮助弥补它们。 列出了数千台机器，许多机器缺少尺寸、CPU、年份或日期。大多数仍在等待图纸，有些图纸缺少真正的主人会立即发现的细节。如果你知道一台机器，或者你的桌子上有一台机器，你可以做得更好：
- 添加一个你可以引用的事实： 尺寸，CPU，发布或终止支持日期，或者按钮或相机的真正位置。
- 纠正错误： 一个错误的事实比一个缺失的事实更重要，所以这些是第一位的。
- 添加一台缺失的机器， 或者整个产品线还没有人列出。
- 看看实物旁边的画 告诉我们什么是关闭的。
空白总是好的。猜测从来都不是：每个事实都命名了它来自的页面，所以请链接你的。 打开一个问题 与机器，事实和链接，或发送一个拉请求以下 CONTRIBUTING.md.
想要画机器？ 建筑机械 具有将编码代理引导到相同标准的步骤、要避免的错误和准备好的提示。
其余的
CONTRIBUTING.md · SECURITY.md · CHANGELOG.md · NOTICE.md ·MIT许可证