1# OpenBMC Web User Interface Development 2 3**Document Purpose:** How to customize, build, and run the OpenBMC Web UI 4 5**Audience:** Programmer familiar with HTML and AngularJS 6 7**Prerequisites:** Current Linux, Mac, or Windows system 8 9## Overview 10 11The [phosphor-webui](https://github.com/openbmc/phosphor-webui) repository 12provides a web-based interface for an OpenBMC. The phosphor-webui uses the 13AngularJS framework to interact with the BMC via REST API calls. It allows users 14to view hardware information, update firmware, set network settings, and much 15more. 16 17A common use case for changes to the web UI is to put some system specific 18branding into it. This lesson will focus on how to do that. 19 20## Load web UI against QEMU 21 221. Connect to web UI in QEMU 23 24 You will need the QEMU session running per instructions in section 25 "Download and Start QEMU Session" of [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md) 26 27 Assuming you used the default of 2443 for the https port in your QEMU 28 session, you will point your web browser to https://localhost:2443. 29 Login with default userid and password and verify basic web UI features are 30 working as expected. 31 32 **Note** You will need to approve the security exception in your browser to 33 connect. OpenBMC is running with a self-signed SSL certificate. Accepting 34 this is key for the next steps. 35 36## Customize web UI code 37 381. Clone the repository 39 40 ``` 41 git clone https://github.com/openbmc/phosphor-webui.git 42 ``` 43 442. Install appropriate packages and start web UI 45 46 Follow the directions in the phosphor-webui [README](https://github.com/openbmc/phosphor-webui/blob/master/README.md) 47 to install the required packages and start the web UI. You can use the 48 development environment created in [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md) 49 or your own system assuming you install the required packages noted in the 50 README. 51 523. Customize the web UI login screen and verify 53 54 Kill your npm run from the previous step using Ctrl^C. Grab a png that you 55 will use to represent your customized version of OpenBMC. Feel free to use 56 any .png you wish for this step. 57 ``` 58 wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png 59 ``` 60 61 Copy your new .png into the appropriate directory 62 ``` 63 cp Free-PNG-Transparent-Image.png app/assets/images/ 64 ``` 65 66 Point to that new image in the web UI HTML 67 ``` 68 vi app/login/controllers/login-controller.html 69 # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png 70 <img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC logo" role="img"/> 71 ``` 72 73 Start up the server with your change 74 ``` 75 npm run-script server 76 ``` 77 78 Load web browser at https://localhost:8080 and verify your new image is on 79 the login screen. 80 81 Kill your npm run using Ctrl^C. 82 834. Customize the header with the new image and verify 84 85 The header is on every page in the web UI. It has a smaller version of the 86 logo in it which we are changing with this step. 87 88 Similar to the previous step, modify the appropriate HTML for the header: 89 ``` 90 vi app/common/directives/app-header.html 91 # Replace logo.svg with Free-PNG-Transparent-Image.png again 92 <div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="header__logo" alt="company logo"/></div> 93 ``` 94 95 Start up the server with your change 96 ``` 97 npm run-script server 98 ``` 99 Browse to https://localhost:8080 and verify your new image is on the header. 100 Note that you will need to log in to view the header. Point the web UI to your 101 QEMU session by typing the QEMU session (e.g. localhost:2443) in the "BMC HOST 102 OR BMC IP ADDRESS" field. 103 104Note that in the HTML where you're replacing the images, there is also the 105corresponding text that goes with the images. Changing the text to match 106with your logo is also something you can easily do to customize your creation 107of an OpenBMC system. 108 109And that's it! You've downloaded, customized, and run the OpenBMC phosphor-webui 110code! 111
