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.
https://emotiscope.rocks/
GNU General Public License v3.0
27 stars 5 forks source link

Long press mode buttons to reveal description #59

Closed github-actions[bot] closed 2 months ago

github-actions[bot] commented 3 months ago

https://github.com/Lixie-Labs/Emotiscope/blob/ddb03d0e907e5b2c1ed7d03abe5364dd719e8e60/data/remote.html#L133


<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
    <div id="header">
        <span onclick="show_page('page_menu');" class="buzz">
            <img id="left_header_item" src="svg/menu.svg" class="header_icon"/>
        </span>

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

        <span onclick="show_page('page_info');" class="buzz">
            <img src="svg/info.svg" class="footer_icon"/>
        </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">
            <!--SLIDERS SPAWN HERE -->
        </span>
    </div>
    <div id="gallery_right_edge_fade"></div>

    <div id="footer">
        <span onclick="show_page('page_calibration');" class="buzz">
            <img id="right_header_item" src="svg/microphone.svg" class="header_icon"/>
        </span>

        <span onclick="show_page('page_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"/>
        </span>
    </div>

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

        <img src="svg/lixielabs.svg" style="height: 120px;"/>
        <div class="page_title">ABOUT</div>
        <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>
        <div class="page_paragraph">
            (It only works in portait mode at this time.)
        </div>
    </div>

    <div id="page_menu">
        <span onclick="hide_page('page_menu');" class="icon_top_left buzz">
            <img src="svg/close.svg" class="footer_icon"/>
        </span>
        <div id="menu_container">
            <div id="menu_toggles">
            </div>
            <div class="menu_item buzz">
                <span class="menu_item_label">Check Firmware Update</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz" onclick="transmit('reset'); set_ui_locked_state(true);">
                <span class="menu_item_label">Reset Emotiscope</span>
                <span class="menu_item_content"></span>
            </div>
            <div class="menu_item buzz" onclick="transmit('wifi_config_reboot'); set_ui_locked_state(true);">
                <span class="menu_item_label">Reboot into WiFi Config Mode</span>
                <span class="menu_item_content"></span>
            </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>
    </div>

    <div id="page_calibration">
        <span onclick="hide_page('page_calibration');" class="icon_bottom_left buzz">
            <img src="svg/close.svg" class="footer_icon" />
        </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_title">CALIBRATION</div>
        <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" />
        </span>

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

    <div id="page_modes">
        <div class="page_title">LIGHT MODE</div>

        <!-- TODO: Long press mode buttons to reveal description -->
        <div id="mode_bin"></div>

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

    <div id="info_panel">
        <div id="info_panel_title">INFORMATION</div>
        <div id="info_panel_description"></div>

        <span onclick="hide_setting_information();" class="buzz" style="display:inline-block;">
            <img src="svg/close.svg" class="footer_icon"/>
        </span>
    </div>

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

    <!--<script src="js/accelerometer.js"></script>-->
    <script src="js/discovery.js"></script>
github-actions[bot] commented 2 months ago

Closed in 13196168e51fe345657f9a544228771eabffebbc