misc/theme_editor.html
author Simon McVittie <smcv@debian.org>
Mon, 12 Sep 2022 10:40:53 -0400
branch1.0.0
changeset 15881 7b1d6dfa3173
parent 13606 ba6648614cd7
permissions -rw-r--r--
Remove FindSDL2 find-module, use sdl2-config.cmake instead This requires SDL >= 2.0.4. Since <https://bugzilla.libsdl.org/show_bug.cgi?id=2464> was fixed in SDL 2.0.4, SDL behaves as a CMake "config-file package", even if it was not itself built using CMake: it installs a sdl2-config.cmake file to ${libdir}/cmake/SDL2, which tells CMake where to find SDL's headers and library, analogous to a pkg-config .pc file. As a result, we no longer need to copy/paste a "find-module package" to be able to find a system copy of SDL >= 2.0.4 with find_package(SDL2). Find-module packages are now discouraged by the CMake developers, in favour of having upstream projects behave as config-file packages. This results in a small API change: FindSDL2 used to set SDL2_INCLUDE_DIR and SDL2_LIBRARY, but the standard behaviour for config-file packages is to set <name>_INCLUDE_DIRS and <name>_LIBRARIES. Use the CONFIG keyword to make sure we search in config-file package mode, and will not find a FindSDL2.cmake in some other directory that implements the old interface. In addition to deleting redundant code, this avoids some assumptions in FindSDL2 about the layout of a SDL installation. The current libsdl2-dev package in Debian breaks those assumptions; this is considered a bug and will hopefully be fixed soon, but it illustrates how fragile these assumptions can be. We can be more robust against different installation layouts by relying on SDL's own CMake integration. When linking to a copy of CMake in a non-standard location, users can now set the SDL2_DIR or CMAKE_PREFIX_PATH environment variable to point to it; previously, these users would have used the SDL2DIR environment variable. This continues to be unnecessary if using matching system-wide installations of CMake and SDL2, for example both from Debian.

<!doctype html>
<html>
    <head>
        <title>Hedgewars Theme Editor</title>
        <script type="text/javascript">
            var sky, clouds, horizont, water, land, border;
            var skyColor, waterTopColor, waterBottomColor;
            var elements = 7;
            var landArray;

            function landFunction(x){
                return 384 - 192 * Math.sin(x * Math.PI/512);
            }

            function tryToDraw(){
                if (--elements <= 0) {
                    draw();
                }
            }

            function load(){
                    var canvas = document.getElementById('preview');
                    if (canvas.getContext){
                        var ctx = canvas.getContext('2d');

                        ctx.fillStyle = '#0b294b';
                        ctx.fillRect(0, 0, 512, 384);

                        ctx.font = "40pt Arial";
                        ctx.fillStyle = '#2b7bd5';
                        ctx.fillText('Loading Images...', 32, 212);
                    }

                    sky = new Image();
                    sky.onload = tryToDraw;
                    sky.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Sky.png';

                    clouds = new Image();
                    clouds.onload = tryToDraw;
                    clouds.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Clouds.png';

                    horizont = new Image();
                    horizont.onload = tryToDraw;
                    horizont.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/horizont.png';

                    land = new Image();
                    land.onload = tryToDraw;
                    land.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/LandTex.png';

                    border = new Image();
                    border.onload = tryToDraw;
                    border.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Border.png';

                    water = new Image();
                    water.onload = tryToDraw;
                    water.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/BlueWater.png';

                    landArray = new Array(512);
                    for (var x = 0; x < landArray.length; x++)
                        landArray[x] = landFunction(x);

                    skyColor = '#131252';
                    document.getElementById('skyColor').value = skyColor;

                    waterTopColor = '#555C9D';
                    document.getElementById('waterTopColor').value = waterTopColor;

                    waterBottomColor = '#343C7D';
                    document.getElementById('waterBottomColor').value = waterBottomColor;

                    tryToDraw();
            }

            function draw(){
                var canvas = document.getElementById('preview');
                if (canvas.getContext){
                    var ctx = canvas.getContext('2d');

                    ctx.fillStyle = skyColor;
                    ctx.fillRect(0, 0, 512, 384);

                    ctx.drawImage(sky, 0, 64, 512, 256);

                    for (var i = 0; i < 4; i++)
                        ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64);

                    ctx.drawImage(horizont, 0, 192, 512, 128);

                    ctx.save();

                    ctx.beginPath();
                    ctx.moveTo(0, 384);
                    for (var x = 0; x < landArray.length; x++)
                        ctx.lineTo(x, landArray[x]);
                    ctx.clip();

                    for (var i = 0; i < 2; i++)
                        for (var k = 0; k < 2; k++)
                            ctx.drawImage(land, i * 320, k * 240, 320, 240);

                    ctx.restore();

                    var k = 0;
                    for (var x = 0; x < landArray.length; x++) {
                        if (++k == 64)
                            k = 0;
                        ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8);
                    }


                    var gradient = ctx.createLinearGradient(0, 320, 0, 384);
                    gradient.addColorStop(0, waterTopColor);
                    gradient.addColorStop(1, waterBottomColor);
                    ctx.fillStyle = gradient;
                    ctx.fillRect(0, 320, 512, 384);

                    for (var i = 0; i < 8; i++)
                        ctx.drawImage(water, i * 64, 308, 64, 24);
                }
            }
        </script>
        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>
    <body onload="load();">
        <h1>Hedgewars Theme editor</h1>
        <canvas id="preview" width="512" height="384">Sorry, your browser does not support Canvas.</canvas><br>
        <table>
        <tr><td>Sky:</td><td>
        <input id="sky" type="file" accept="image/png" onchange="sky.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Sky Color:</td><td>
        <input id="skyColor" type="color" onchange="skyColor = this.value; draw()"></input>
        </td></tr>
        <tr><td>Clouds:</td><td>
        <input id="clouds" type="file" accept="image/png" onchange="clouds.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Horizont:</td><td>
        <input id="horizont" type="file" accept="image/png" onchange="horizont.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Land:</td><td>
        <input id="land" type="file" accept="image/png" onchange="land.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Border:</td><td>
        <input id="border" type="file" accept="image/png" onchange="border.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Water:</td><td>
        <input id="water" type="file" accept="image/png" onchange="water.src = window.URL.createObjectURL(this.files[0])"></input>
        </td></tr>
        <tr><td>Water Top Color:</td><td>
        <input id="waterTopColor" type="color" onchange="waterTopColor = this.value; draw()"></input>
        </td></tr>
        <tr><td>Water Bottom Color:</td><td>
        <input id="waterBottomColor" type="color" onchange="waterBottomColor = this.value; draw()"></input>
        </td></tr>
        </table>
    </body>
</html>