标签：WEB 界面 web webui OpenBMC png

开发 OpenBMC WEB 用户界面

内容: 如何定制化，构建，运行 OpenBMC WEB UI
受众: 熟悉 HTML，CSS，JS 的开发者
前提: 系统是 Linux，Mac 或 Windows

Webui-vue

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 界面:

1. 假设你按照 dev-environment 文件配置了你的仿真环境
2. 假设你使用 QEMU 中默认的 HTTPS 2443 会话端口，那么你可以通过浏览器访问 https://localhost:2443
3. 使用默认的用户名、密码登录系统

注意: 你需要允许浏览器提示的安全异常链接来访问到BMC界面

Phosphor-webui

phosphor-webui 仓库为 OpenBMC 提供以为基于web的界面。它使用 AngularJS 框架通过 REST API 与 BMC 进行交互。它允许用户查看硬件信息，更新固件，设置网络等。

AngularJS 框架在 2021 年 6 月 30 日停止维护。

定制化 Phosphor-webui

1. 克隆仓库

   git clone https://github.com/openbmc/phosphor-webui.git
   

2. 安装合适的包并启动web界面
   按照 README 中的提示来安装需要的包，并启动web界面。你也可以使用在 dev-environment 中建立的开发环境或你自己的系统。
3. 定制化web界面登入界面以及验证
   使用 ^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。
4. 定制化界面顶部图片，并验证是否每一个web界面中都使用了这个图片
   与之前的步骤类似，调整合适的 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 验证新图片是否位于界面顶部。

标签：WEB,界面,web,webui,OpenBMC,png
来源： https://www.cnblogs.com/arvin-blog/p/15664733.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。