1# OpenBMC Web User Interface Development 2 3**Document Purpose:** How to customize, build, and run the OpenBMC Web UI 4 5**Audience:** Developer familiar with HTML, CSS and JS 6 7**Prerequisites:** Current Linux, Mac, or Windows system 8 9# Webui-vue 10 11The [webui-vue](https://github.com/openbmc/webui-vue) repository 12will replace phosphor-webui once it is deprecated. Webui-vue uses the 13[Vue.js](https://vuejs.org/) framework to interact with the BMC via the 14Redfish API. 15 16Visit [README.md](https://github.com/openbmc/webui-vue/blob/master/README.md) to 17learn more about why the Vue.js application was created, features needed to reach parity and why it is 18replacing the Angular.JS application. 19 20Visit [CONTRIBUTING.md](https://github.com/openbmc/webui-vue/blob/master/CONTRIBUTING.md) 21to find information on project set-up, design information, and contributing processes. 22 23Visit the [OpenBMC Web UI Style Guide](https://openbmc.github.io/webui-vue/) 24to find information on: 25 26- Coding Standards 27- Guidelines 28- Unit Testing 29- Components Usage 30- Quick Start References 31 32Visit the [OpenBMC Web UI Themes Guide - How to customize](https://openbmc.github.io/webui-vue/themes/customize.html) 33to learn how to create custom builds to meet your branding and customization 34needs for: 35 36- Routing 37- Navigation 38- State Store 39- Theming 40 41## Load Web UI against QEMU 42 43Connect to Web UI in QEMU 44 451. You will need the QEMU session running per instructions in the 46 "Download and Start QEMU Session" section of 47 [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md). 48 492. Assuming you used the default of 2443 for the HTTPS port in your QEMU 50 session, you will point your web browser to https://localhost:2443. 51 523. Login with default username and password and verify basic Web UI features are 53 working as expected. 54 55**Note** You will need to approve the security exception in your browser to 56connect. OpenBMC is running with a self-signed SSL certificate. 57 58# Phosphor-webui 59 60The [phosphor-webui](https://github.com/openbmc/phosphor-webui) repository 61provides a web-based interface for an OpenBMC. It uses the 62[AngularJS](https://angularjs.org/) framework to interact with the BMC via REST API calls. It allows users 63to view hardware information, update firmware, set network settings, and much 64more. 65 66See directions below to learn [how to customize 67phosphor-webui](#customize-phosphor-webui). 68 69Phosphor-webui was built on AngularJS and AngularJS goes End of Life June 30, 702021. 71 72## Customize Phosphor-webui 73 741. Clone the repository 75 76 ``` 77 git clone https://github.com/openbmc/phosphor-webui.git 78 ``` 79 802. Install appropriate packages and start web UI 81 82 Follow the directions in the phosphor-webui [README](https://github.com/openbmc/phosphor-webui/blob/master/README.md) 83 to install the required packages and start the web UI. You can use the 84 development environment created in [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md) 85 or your own system assuming you install the required packages noted in the 86 README. 87 883. Customize the web UI login screen and verify 89 90 Kill your npm run from the previous step using Ctrl^C. Grab a png that you 91 will use to represent your customized version of OpenBMC. Feel free to use 92 any .png you wish for this step. 93 94 ``` 95 wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png 96 ``` 97 98 Copy your new .png into the appropriate directory 99 100 ``` 101 cp Free-PNG-Transparent-Image.png app/assets/images/ 102 ``` 103 104 Point to that new image in the web UI HTML 105 106 ``` 107 vi app/login/controllers/login-controller.html 108 # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png 109 <img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC logo" role="img"/> 110 ``` 111 112 Start up the server with your change 113 114 ``` 115 npm run-script server 116 ``` 117 118 Load web browser at https://localhost:8080 and verify your new image is on 119 the login screen. 120 121 Kill your npm run using Ctrl^C. 122 1234. Customize the header with the new image and verify 124 The header is on every page in the web UI. It has a smaller version of the 125 logo in it which we are changing with this step. 126 127 Similar to the previous step, modify the appropriate HTML for the header: 128 129 ``` 130 vi app/common/directives/app-header.html 131 # Replace logo.svg with Free-PNG-Transparent-Image.png again 132 <div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="header__logo" alt="company logo"/></div> 133 ``` 134 135 Start up the server with your change 136 137 ``` 138 npm run-script server 139 ``` 140 141 Browse to https://localhost:8080 and verify your new image is on the header. 142 143 Note that you will need to log in to view the header. Point the web UI to your 144 QEMU session by typing the QEMU session (e.g. localhost:2443) in the "BMC HOST 145 OR BMC IP ADDRESS" field. 146 147 Note that in the HTML where you're replacing the images, there is also the 148 corresponding text that goes with the images. Changing the text to match 149 with your logo is also something you can easily do to customize your creation 150 of an OpenBMC system. 151 152 And that's it! You've downloaded, customized, and run the OpenBMC 153 phosphor-webui code! 154
