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