Equalmass
/
ArdupilotCustomFirmwareBuilder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ArduPilot Custom Firmware Builder</title>
    <meta name="description"
          content="ArduPilot Custom Firmware Builder. It allows to build custom ArduPilot firmware by selecting the wanted features.">
    <meta name="author" content="ArduPilot Team">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
    <meta property="og:site_name" content="ArduPilot"/>
    <meta property="og:site" content=""/>
    <meta property="og:title" content="ArduPilot Custom Firmware Builder"/>
    <meta property="og:description"
          content="ArduPilot Custom Firmware Builder. It allows to build custom ArduPilot firmware by selecting the wanted features."/>
    <!-- description shown in the actual shared post -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://custom.ardupilot.org/">
    <meta property="og:image" content="https://ardupilot.org/application/files/6315/7552/1962/ArduPilot-Motto.png">

    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/main.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='js/CollapsibleLists.js')}}"></script>
</head>

<body onload="javascript: init()">
<div id="main">
    <a href="https://custom.ardupilot.org/">
        <div id="logo">
        </div>
    </a>

    <div id="menu">
        <h2>ArduPilot Custom Firmware Builder</h2>

        <form action="/generate" method="post">
            <div id="vehicle_list">
                <label for="vehicle">Choose a vehicle:
                    <select name="vehicle" id="vehicle" onchange="requestBranches(this.value);">
                        {% for vehicle in get_vehicle_names() %}
                        <option value="{{vehicle}}" {% if vehicle == get_default_vehicle_name() %} selected {% endif %}>{{vehicle}}</option>
                        {% endfor %}
                    </select>
                </label>
            </div>
            <p></p>
            <div id="branch_list"></div>
            <p></p>
            <div id="board_list"></div>
            <p></p>
            <div id="build_options"></div>
            <br>
            <input type="submit" value="Generate" id="submit" disabled>
        </form>
    </div>
    <hr>
    <p>Exisiting builds (click on the status of a build to view it):</p>
    <div id="build_status"></div>
    <br/>
    <script>
        function init() {
            refresh_builds();
            requestBranches(document.getElementById("vehicle").value);
        }

        function refresh_builds() {
            var output = document.getElementById('build_status');
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "/builds/status.html");

            // disable cache, thanks to: https://stackoverflow.com/questions/22356025/force-cache-control-no-cache-in-chrome-via-xmlhttprequest-on-f5-reload
            xhr.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0");
            xhr.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
            xhr.setRequestHeader("Pragma", "no-cache");

            xhr.onload = function () {
                if (xhr.status === 200) {
                    output.innerHTML = xhr.responseText;
                }
                setTimeout(refresh_builds, 5000)
            }
            xhr.send();
        }

        function requestBoardsAndFeatures(branch) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/boards_and_features/'+branch); // branch consists of both remote and branch_name in format - remote/branch_name. e.g. upstream/master
            document.getElementById('board_list').innerHTML = "<p>Please wait. Fetching boards on branch "+branch+" ...";
            document.getElementById('build_options').innerHTML = "<p>Please wait. Fetching build options on branch "+branch+" ...";            
            document.getElementById("submit").disabled = true;
            document.getElementById("branch").disabled = true;

            xhr.onload = function () {
                if (xhr.status == 200) {
                    response_json = JSON.parse(xhr.response);
                    boards = response_json['boards'];
                    default_board = response_json['default_board'];
                    features = response_json['features'];
                    fillBoards(boards, default_board);
                    fillBuildOptions(features);
                    document.getElementById("submit").disabled = false;
                } else {
                    document.getElementById('board_list').innerHTML = "Something went wrong. Please try again. (Response says: "+xhr.response+")";
                    document.getElementById('build_options').innerHTML = "";      
                }
                document.getElementById("branch").disabled = false;
            }
            xhr.send();
        }

        function fillBoards(boards, default_board) {
            var output = document.getElementById('board_list');
            output.innerHTML =  "<p>Please select the required options for the custom firmware build, then hit 'Generate'.</p>"+
                                "<label for='board'>Choose a board: "+
                                    "<select name='board' id='board'>"+
                                    "</select>"+
                                "</label>";
            boardList = document.getElementById("board")
            boards.forEach(board => {
                opt = document.createElement('option');
                opt.value = board;
                opt.innerHTML = board;
                opt.selected = (board === default_board);
                boardList.appendChild(opt);
            });
        }

        function fillBuildOptions(buildOptions) {
            var output = document.getElementById('build_options');
            output.innerHTML =  "<label for='features'>Select Features: "+
                                    "<ul class='collapsibleList' id='outer_list'></ul>"+
                                "</label>";
            outerList = document.getElementById("outer_list");
            buildOptions.forEach(category => {
                outerListItem = document.createElement('li');
                outerListItem.innerHTML = category['name'];
                innerList = document.createElement('ul');
                category['options'].forEach(option => {
                    innerListItem = document.createElement('li');
                    checkBox = document.createElement('input');
                    checkBox.type = "checkbox";
                    checkBox.name = option['label'];
                    checkBox.id = option['label'];
                    checkBox.value = "1";
                    checkBox.checked = (option['default'] == 1);
                    checkBox.addEventListener('click', function handleClick(event) {
                        dependencies(option['label'], option['dependency']);
                    });
                    innerListItem.appendChild(checkBox);
                    innerListItem.appendChild(document.createTextNode(option['description']));
                    innerList.appendChild(innerListItem);
                });
                outerListItem.appendChild(innerList);
                outerList.appendChild(outerListItem);
            });
            CollapsibleLists.apply();
        }

        function dependencies(f_label, f_dependency1) {
            cb = document.getElementById(f_label);
            switch (cb.name) {
                case f_label:
                    console.log("bol");
                    const f_dependency = f_dependency1.split(",")
                    var arrayLength = f_dependency.length;
                    for (var i = 0; i < arrayLength; i++) {
                        console.log(i);
                        if (document.getElementById(f_dependency[i]).checked == false) {
                            document.getElementById(f_dependency[i]).checked = cb.checked;
                        }
                    }
                    break;
            }
        }

        function requestBranches(vehicle) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/get_allowed_branches/'+vehicle);           
            document.getElementById("submit").disabled = true;
            document.getElementById("vehicle").disabled = true;

            xhr.onload = function () {
                if (xhr.status == 200) {
                    response = JSON.parse(xhr.response);
                    branches = response['branches'];
                    default_branch = response['default_branch'];
                    old_branch = document.getElementById("branch");
                    fillBranches(branches);
                    document.getElementById("submit").disabled = false;
                    if (old_branch == null || old_branch.value != default_branch){
                        // branch has changed
                        // fetch boards and features again
                        requestBoardsAndFeatures(default_branch);
                    }
                } else {
                    document.getElementById('branch_list').innerHTML = "Something went wrong. Please try again. (Response says: "+xhr.response+")";
                }
                document.getElementById("vehicle").disabled = false;
            }
            xhr.send();
        }

        function fillBranches(branches) {
            var output = document.getElementById('branch_list');
            output.innerHTML =  "<label for='branch'>Choose a branch: "+
                                    "<select name='branch' id='branch' onchange='requestBoardsAndFeatures(this.value);'>"+
                                    "</select>"+
                                "</label>";
            branchList = document.getElementById("branch");
            branches.forEach(branch => {
                opt = document.createElement('option');
                opt.value = branch['full_name'];
                opt.innerHTML = branch['label'];
                opt.selected = (branch['full_name'] === default_branch);
                branchList.appendChild(opt);
            });
        }
    </script>
</div>
</body>

<hr>
<footer>Created by Will Piper, <a href=https://github.com/ArduPilot/CustomBuild>Source Code</a>.</footer>
</html>