Equalmass
/
ArdupilotCustomFirmwareBuilder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!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">
            <label for="branch">Choose a branch:
                <select name="branch" id="branch" onchange="requestBoardsAndFeatures(this.value);">
                    {% for branch in get_branches() %}
                    <option value="{{branch}}" {% if branch == get_default_branch() %} selected {% endif %}>{{get_branches()[branch]}}</option>
                    {% endfor %}
                </select>
            </label>
            <p></p>
            <label for="vehicle">Choose a vehicle:
                <select name="vehicle" id="vehicle">
                    {% for vehicle in get_vehicles() %}
                    <option value="{{vehicle}}" {% if vehicle == get_default_vehicle() %} selected {% endif %}>{{vehicle}}</option>
                    {% endfor %}
                </select>
            </label>
            <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();
            requestBoardsAndFeatures(document.getElementById('branch').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;

            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;
                }
            }
            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;
            }
        }
    </script>
</div>
</body>

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