OpenBMC
WEB
用户界面内容: 如何定制化,构建,运行 OpenBMC
WEB UI
受众: 熟悉 HTML
,CSS
,JS
的开发者
前提: 系统是 Linux
,Mac
或 Windows
webui-vue git
仓库将会在未来替代原本使用的 phosphor-webui
,webui-vue 使用 Vue.js 框架,通过 Redfish API
与 BMC
进行交互。
查看 README.md 来了解为什么 Vue.js 框架被创建,需要维持的特性,以及为什么要替换掉 Angular JS
。
查看 CONTRIBUTING.md 来了解项目配置、涉及信息以及如何为框架做贡献。
查看 OpenBMC Web UI Style Guide 找到如下的相关信息:
查看 OpenBMC Web UI Themes Guide - How to customize 来学习如何创建定制化构建,用来满足你的分支以及定制化需求:
QEMU
加载 WEB 界面在 QEMU
中链接到 WEB 界面:
QEMU
中默认的 HTTPS
2443
会话端口,那么你可以通过浏览器访问 https://localhost:2443
注意: 你需要允许浏览器提示的安全异常链接来访问到BMC界面
phosphor-webui 仓库为 OpenBMC
提供以为基于web的界面。它使用 AngularJS 框架通过 REST API
与 BMC
进行交互。它允许用户查看硬件信息,更新固件,设置网络等。
AngularJS
框架在 2021 年 6 月 30 日停止维护。
Phosphor-webui
git clone https://github.com/openbmc/phosphor-webui.git
^C
杀死之前步骤的 npm
。从下面的路径下拉取一个 .png 文件:wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png复制这个新的 .png 文件到合适的目录下:
cp Free-PNG-Transparent-Image.png app/assets/images/修改web界面对应的
HTML
文件,指向新的图片:vi app/login/controllers/login-controller.html # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png <img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC logo" role="img"/>现在,再次启动你的服务吧。
npm run-script server登入web浏览器 https://localhost:8080 并查看新的图片是否在界面上。
^C
杀死运行的 npm
。HTML
指向新的图片:vi app/common/directives/app-header.html # Replace logo.svg with Free-PNG-Transparent-Image.png again <div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="header__logo" alt="company logo"/></div>重新启动你的服务:
npm run-script server使用浏览器登录 https://localhost:8080 验证新图片是否位于界面顶部。