search

Lixie-Labs / Emotiscope

Let your eyes enjoy the music too ✨ Extremely low-latency audio processing lets LEDs perfectly synchronize to your music's notation and tempo.
GNU General Public License v3.0
27 stars 5 forks source link

Main menu can display stats for nerds at the bottom, like current CPU/GPU FPS, F... #100

Closed github-actions[bot] closed 1 month ago

github-actions[bot] commented 1 month ago

https://github.com/Lixie-Labs/Emotiscope/blob/66ed5fcd54b7758db949a5f5a49741b49a7b3f5c/data/remote.html#L165


<html>

<head>
    <title>Emotiscope by Lixie Labs</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link rel="stylesheet" href="css/app.css?v=110">
    <link rel="manifest" href="img/icons.json">

    <link rel="apple-touch-icon" href="img/ios/1024.png">
    <meta name="apple-mobile-web-app-title" content="Emotiscope">

    <script>
        var scripts = [
            "js/discovery.js",
            "js/fetch_mac.js",
            "js/touch_calibration.js",
            "js/info.js",
            "js/alerts.js",
            "js/utilities.js",
            "js/sliders.js",
            "js/toggles.js",
            "js/menu_toggles.js",
            "js/render_controls.js",
            "js/websockets_connection.js",
            "js/pages.js",
            "js/spin_ui.js"
        ];

        var loaded_scripts = 0;

        var url_params = new URLSearchParams(window.location.search);
        var url_version_param = url_params.get('v');

        for (var i = 0; i < scripts.length; i++) {
            var script = document.createElement('script');
            script.src = scripts[i] + "?v=" + url_version_param;
            script.onload = function() {
            };
            document.head.appendChild(script);

            console.log("Loading script: " + script.src);
        }

        setInterval(function() {
            //console.log("Dispatching APP_LOADED event");
            document.dispatchEvent(new Event('APP_LOADED'));
        }, 100);
    </script>

</head>

<body>
    <div id="header">
        <span onclick="show_page('page_menu','menu');" class="buzz">
            <img id="left_header_item" src="svg/menu.svg" class="header_icon tint_accent"/>
        </span>

        <span id="header_logo" class="buzz">emotiscope</span>

        <span onclick="show_page('page_info','about');" class="buzz">
            <img src="svg/info.svg" class="footer_icon tint_accent"/>
        </span>
    </div>

    <div id="device_preview">
        <div id="device_nickname">IP ADDRESS</div>
        <img src="svg/emotiscope.svg" id="device_icon" class="buzz" style="max-width:85%; padding:10px"/>
    </div>

    <div id="gallery_left_edge_fade"></div>

    <div id="setting_gallery">
        <span id="setting_container">
            <!--<span class="toggle"><div class="toggle_label" onclick="show_setting_information('mirror_mode');">MIRROR MODE</div><div class="toggle_track" id="mirror_mode" style="background-image: linear-gradient(to top, var(--secondary) 0%, var(--secondary) 100%, transparent 0%, transparent 100%);"></div></span>-->
            <!--
            <span class="slider"><span class="slider_track" id="brightness"></span></span>
            <span class="slider"><span class="slider_track" id="hue"></span></span>
            <span class="slider"><span class="slider_track" id="speed"></span></span>
            <span class="slider"><span class="slider_track" id="saturation"></span></span>
            -->
        </span>
    </div>
    <div id="gallery_right_edge_fade"></div>

    <!--<div id="mode_bin"></div>-->

    <div id="footer">
        <span onclick="show_page('page_presets', 'presets');" class="buzz" style="opacity:0.0;">
            <img id="right_header_item" src="svg/wand.svg" class="header_icon tint_accent"/>
        </span>

        <span onclick="show_page('page_modes', 'light modes');" style="margin-bottom: 30px;">
            <span id="current_mode" class="buzz">LOADING</span>
        </span>

        <span onclick="toggle_fullscreen();" class="" id="fullscreen_button">
            <img src="svg/expand.svg" class="footer_icon tint_accent"/>
        </span>
    </div>

    <div id="page_info">
        <!--<span id="spin_container">-->
            <span onclick="hide_page('page_info');" class="icon_top_right buzz">
                <img src="svg/close.svg" class="footer_icon tint_accent"/>
            </span>

            <img src="svg/lixielabs.svg" style="height: 120px;"/>
            <div class="page_paragraph">
                Emotiscope was developed<br>by <a href="https://github.com/connornishijima">Connor Nishijima</a> for <a href="https://lixielabs.com/">Lixie Labs</a><br>(2023-2024)
            </div>
            <div class="page_paragraph">
                The documentation, open source<br>hardware/software, and more are<br>available at <a href="https://emotiscope.rocks/">www.emotiscope.rocks</a>.
            </div>
            <div class="page_paragraph">
                Please be patient if there are any bugs or issues - I'm a solo developer who created this app, the hardware, the algorithms, the modes, and the website. If anything is broken, please report it to me on GitHub or via email.
            </div>
        <!--</span>-->
    </div>

    <!-- TODO: Add main menu content -->
    <!-- Nickname your device? Advanced settings? Check firmware update? -->
    <div id="page_menu">
        <span onclick="hide_page('page_menu');" class="icon_top_left buzz">
            <img src="svg/close.svg" class="footer_icon tint_accent"/>
        </span>
        <div id="menu_container">
            <div id="menu_toggles">
            </div>
            <div class="menu_item buzz" onclick="transmit('check_update');">
                <span class="menu_item_label">Check Firmware Update</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz" onclick="transmit('reboot'); set_ui_locked_state(true);">
                <span class="menu_item_label">Reboot Emotiscope</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz" onclick="transmit('reboot_wifi_config'); set_ui_locked_state(true);">
                <span class="menu_item_label">Enter WiFi Config Mode</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz" onclick="transmit('self_test');">
                <span class="menu_item_label">Start Self Test</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz">
                <div id="mac_address" onload="get_mac_address();">
                    MAC: LOADING...
                </div>
            </div>
            <div class="menu_item buzz">
                <div id="version_number">
                    VERSION: LOADING...
                </div>
            </div>
        </div>

        <div id="menu_stats">
            <span class="menu_stat" id="CPU_FPS">LOADING</span>
            <span class="menu_stat" id="GPU_FPS">LOADING</span>
            <span class="menu_stat" id="HEAP">LOADING</span>
        </div>

            <!-- TODO: Main menu can display stats for nerds at the bottom, like current CPU/GPU FPS, Free Heap, VCC level -->
    </div>

    <div id="page_calibration">
        <span onclick="hide_page('page_calibration');" class="icon_bottom_left buzz">
            <img src="svg/close.svg" class="footer_icon tint_accent" />
        </span>

        <!-- TODO: Implement frequency response calibration -->
        <!-- Via white noise broadcasted from JS in web-app, measure (and compensate for) the frequency response of both the speaker and mic -->
        <!-- Calibration should result in equal representation of all bins in the DFT when white noise is played afterward -->
        <!-- When calibration starts, white noise should fade in for 0.5 seconds, be measured for 2 seconds, then fade out for 0.5 seconds -->
        <div class="page_paragraph">
            <button onclick="start_noise_calibration();" class="buzz">REMOVE BACKGROUND NOISE</button>
            <!--
            <br>
            <button onclick="start_frequency_calibration();" class="buzz">CALIBRATE FREQUENCY RESPONSE</button>
            -->
        </div>
    </div>

    <div id="page_presets">
        <span onclick="hide_page('page_presets');" class="icon_bottom_left buzz">
            <img src="svg/close.svg" class="footer_icon tint_accent" />
        </span>

        <div class="page_paragraph">
            THIS IS UNFINISHED CONTENT
        </div>
    </div>

    <div id="page_modes">
        <div class="modes_half_wrap">
            <div class="modes_half">
                <div class="mode_title">active</div>
                <div id="active_mode_bin"></div>
            </div>
            <div class="modes_half">
                <div class="mode_title">inactive</div>
                <div id="inactive_mode_bin"></div>
            </div>
        </div>

        <span onclick="hide_page('page_modes');" class="icon_bottom_center buzz">
            <img src="svg/close.svg" class="footer_icon tint_accent"/>
        </span>
    </div>

    <div id="info_panel">
        <div id="info_panel_title">INFORMATION</div>
        <div id="info_panel_description">
            Applies a filter to the display which limits the brightness of blue colors, similar to retro tinted holiday bulbs
        </div>
        <span onclick="hide_setting_information();" class="buzz" style="display:inline-block;">
            <img src="svg/close.svg" class="footer_icon tint_accent"/>
        </span>
    </div>

    <div id="alert_panel">
        <div id="alert_panel_title">ALERT</div>
        <div id="alert_panel_description">
            This is an alert, which can be used for critical or non-critical messages and allows for a button
        </div>
        <button class="buzz" id="alert_panel_button">OK</button>
    </div>

    <div id="alert_dimmer"></div>

    <div id="dimmer">
        <div class="lds-ellipsis">
            <div></div><div></div><div></div><div></div>
        </div>
    </div>
</body>

</html>