飘云阁

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 441|回复: 6

[原创] [Python 原创] 全AI写的大屏播控程序已经可以使用(转换成html)

[复制链接]
  • TA的每日心情
    开心
    2024-8-8 11:24
  • 签到天数: 75 天

    [LV.6]常住居民II

    发表于 5 天前 | 显示全部楼层 |阅读模式
    [color=rgba(0, 0, 0, 0.85)]提供的基于 PyQt5 和 VLC 的 Python 桌面应用程序转换为 HTML 应用程序

    [color=rgba(0, 0, 0, 0.85)]是一个从桌面端到 Web 端的转变,技术栈完全不同。

    QQ20250330-152610.png

    [color=rgba(0, 0, 0, 0.85)]以下是实现基本功能的 HTML、CSS 和 JavaScript 代码:

    实现了一个简单的大屏播控系统的 HTML 版本,包含播放列表管理、播放控制、音量控制、模式切换等功能。

    你可以将代码保存为 index.html 文件,然后在浏览器中打开查看效果。

    不过要留意,此代码未涵盖原 Python 代码里的全部功能,例如扩展屏显示、任务栏隐藏等,因为在 Web 环境下这些功能较难实现。

    QQ20250330-161144.png

    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>大飞哥软件自习室-大屏播放软件</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                min-height: 100vh;
                background: linear-gradient(135deg, #0f2027, #2c5364);
                font-family: 'Segoe UI', sans-serif;
            }
    
            .title-bar {
                background: linear-gradient(45deg, #3a7bd5, #00d2ff);
                padding: 15px;
                text-align: center;
                border-bottom: 3px solid #2a82da;
            }
    
            .title-bar a {
                color: white;
                font-size: 24px;
                font-weight: bold;
                text-decoration: none;
            }
    
            .main-container {
                display: flex;
                height: calc(100vh - 80px);
            }
    
            .control-panel {
                background: rgba(20, 30, 50, 0.9);
                padding: 20px;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
    
            .layout-container {
                flex: 1;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 15px;
                padding: 20px;
                overflow: auto;
            }
    
            .layout-item {
                background: rgba(30, 40, 60, 0.9);
                border-radius: 8px;
                border: 2px solid #2a82da;
                padding: 15px;
                position: relative;
                min-width: 200px;
                min-height: 150px;
            }
    
            .resize-handle {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 15px;
                height: 15px;
                background: linear-gradient(135deg, #2a82da, #00d2ff);
                cursor: se-resize;
            }
    
            .action-button {
                padding: 10px 20px;
                background: linear-gradient(45deg, #3a7bd5, #00d2ff);
                border: none;
                border-radius: 5px;
                color: white; /* 将按钮文字颜色设置为白色 */
                font-weight: bold;
                cursor: pointer;
                margin: 5px;
            }
    
            .status-bar {
                background: rgba(20, 30, 50, 0.9);
                padding: 10px;
                border-radius: 5px;
                border: 1px solid #2a82da;
                margin-top: 10px;
                color: white; /* 将状态栏文字颜色设置为白色 */
            }
    
            /* 确保其他文字元素颜色为白色 */
            h3, label {
                color: white;
            }
        </style>
    </head>
    
    <body>
        <div class="title-bar">
            <a href="https://space.bilibili.com/286436365" target="_blank">大飞哥软件自习室-大屏播放软件</a>
        </div>
        <div class="main-container">
            <div class="control-panel">
                <button class="action-button">保存布局</button>
                <button class="action-button">加载布局</button>
                <button class="action-button">重置布局</button>
            </div>
            <div class="layout-container" id="layoutContainer">
                <!-- 初始布局模块 -->
                <div class="layout-item" data-type="playlist">
                    <h3>播放列表</h3>
                    <ul class="playlist" id="playlist"></ul>
                    <div class="resize-handle"></div>
                </div>
    
                <div class="layout-item" data-type="controls">
                    <h3>播放控制</h3>
                    <div class="button-group">
                        <button class="action-button">播放/暂停</button>
                        <button class="action-button">上一个</button>
                        <button class="action-button">下一个</button>
                    </div>
                    <div class="resize-handle"></div>
                </div>
    
                <div class="layout-item" data-type="settings">
                    <h3>系统设置</h3>
                    <div>
                        <label>音量:</label>
                        <input type="range" id="volumeSlider" min="0" max="100" value="100">
                    </div>
                    <div class="resize-handle"></div>
                </div>
            </div>
        </div>
    
        <script>
            let isDragging = false;
            let dragStartX, dragStartY;
            let initialX, initialY;
            let resizeStartX, resizeStartY;
            let initialWidth, initialHeight;
    
            // 初始化布局
            function initializeLayout() {
                const layoutItems = document.querySelectorAll('.layout-item');
                layoutItems.forEach(item => {
                    // 可拖动
                    item.addEventListener('mousedown', startDrag);
                    // 调整大小
                    item.querySelector('.resize-handle').addEventListener('mousedown', startResize);
                });
            }
    
            // 开始拖动
            function startDrag(e) {
                e.preventDefault();
                isDragging = true;
                const target = e.target.closest('.layout-item');
                initialX = target.offsetLeft;
                initialY = target.offsetTop;
                dragStartX = e.clientX - initialX;
                dragStartY = e.clientY - initialY;
                target.style.cursor = 'grabbing';
                target.style.zIndex = 1000;
    
                // 保存原始布局顺序
                const layoutItems = Array.from(document.querySelectorAll('.layout-item'));
                const index = layoutItems.indexOf(target);
                document.getElementById('layoutContainer').appendChild(target);
            }
    
            // 拖动中
            function handleDrag(e) {
                if (!isDragging) return;
                const target = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
                const x = e.clientX - dragStartX;
                const y = e.clientY - dragStartY;
                target.style.left = `${x}px`;
                target.style.top = `${y}px`;
            }
    
            // 停止拖动
            function stopDrag() {
                isDragging = false;
                const layoutItems = document.querySelectorAll('.layout-item');
                layoutItems.forEach(item => {
                    item.style.cursor = 'default';
                    item.style.zIndex = '';
                    item.removeAttribute('style');
                });
            }
    
            // 开始调整大小
            function startResize(e) {
                e.preventDefault();
                const handle = e.target;
                const item = handle.closest('.layout-item');
                initialWidth = parseFloat(item.style.width) || item.offsetWidth;
                initialHeight = parseFloat(item.style.height) || item.offsetHeight;
                resizeStartX = e.clientX;
                resizeStartY = e.clientY;
                item.style.cursor = 'se-resize';
                item.style.zIndex = 1000;
            }
    
            // 调整大小中
            function handleResize(e) {
                const item = document.elementFromPoint(e.clientX, e.clientY).closest('.layout-item');
                if (!item) return;
    
                const deltaX = e.clientX - resizeStartX;
                const deltaY = e.clientY - resizeStartY;
                const newWidth = initialWidth + deltaX;
                const newHeight = initialHeight + deltaY;
    
                item.style.width = `${Math.max(200, newWidth)}px`;
                item.style.height = `${Math.max(150, newHeight)}px`;
            }
    
            // 停止调整大小
            function stopResize() {
                const layoutItems = document.querySelectorAll('.layout-item');
                layoutItems.forEach(item => {
                    item.style.cursor = 'default';
                    item.style.zIndex = '';
                });
            }
    
            // 保存布局
            function saveLayout() {
                const layoutData = [];
                const layoutItems = document.querySelectorAll('.layout-item');
                layoutItems.forEach(item => {
                    layoutData.push({
                        type: item.dataset.type,
                        left: parseFloat(item.style.left) || 0,
                        top: parseFloat(item.style.top) || 0,
                        width: parseFloat(item.style.width) || item.offsetWidth,
                        height: parseFloat(item.style.height) || item.offsetHeight
                    });
                });
                localStorage.setItem('layout', JSON.stringify(layoutData));
                document.querySelector('.status-bar').textContent = '布局已保存';
            }
    
            // 加载布局
            function loadLayout() {
                const layoutData = JSON.parse(localStorage.getItem('layout'));
                if (!layoutData) return;
    
                const layoutContainer = document.getElementById('layoutContainer');
                layoutContainer.innerHTML = '';
    
                layoutData.forEach(data => {
                    const item = createLayoutItem(data.type);
                    item.style.left = `${data.left}px`;
                    item.style.top = `${data.top}px`;
                    item.style.width = `${data.width}px`;
                    item.style.height = `${data.height}px`;
                    layoutContainer.appendChild(item);
                });
                initializeLayout();
                document.querySelector('.status-bar').textContent = '布局已加载';
            }
    
            // 重置布局
            function resetLayout() {
                localStorage.removeItem('layout');
                location.reload();
                document.querySelector('.status-bar').textContent = '布局已重置';
            }
    
            // 创建布局模块
            function createLayoutItem(type) {
                const item = document.createElement('div');
                item.className = 'layout-item';
                item.dataset.type = type;
    
                switch (type) {
                    case 'playlist':
                        item.innerHTML = `
                            <h3>播放列表</h3>
                            <ul class="playlist" id="playlist"></ul>
                            <div class="resize-handle"></div>
                        `;
                        break;
                    case 'controls':
                        item.innerHTML = `
                            <h3>播放控制</h3>
                            <div class="button-group">
                                <button class="action-button">播放/暂停</button>
                                <button class="action-button">上一个</button>
                                <button class="action-button">下一个</button>
                            </div>
                            <div class="resize-handle"></div>
                        `;
                        break;
                    case 'settings':
                        item.innerHTML = `
                            <h3>系统设置</h3>
                            <div>
                                <label>音量:</label>
                                <input type="range" id="volumeSlider" min="0" max="100" value="100">
                            </div>
                            <div class="resize-handle"></div>
                        `;
                        break;
                }
    
                return item;
            }
    
            // 初始化
            initializeLayout();
            window.addEventListener('mousemove', handleDrag);
            window.addEventListener('mouseup', stopDrag);
            window.addEventListener('mousemove', handleResize);
            window.addEventListener('mouseup', stopResize);
    
            // 其他功能函数...
            // 播放控制、音量设置等原有功能代码保持不变
        </script>
    </body>
    
    </html>    

    大屏播放软件下载地址.rar

    9.79 KB, 下载次数: 17, 下载积分: 飘云币 -2 枚

    售价: 1 枚飘云币  [记录]

    成品

    评分

    参与人数 1威望 +1 飘云币 +1 收起 理由
    飞天 + 1 + 1 PYG有你更精彩!

    查看全部评分

    PYG19周年生日快乐!
  • TA的每日心情
    开心
    2025-1-14 13:49
  • 签到天数: 393 天

    [LV.9]以坛为家II

    发表于 5 天前 | 显示全部楼层
    PYG20周年生日快乐!
    PYG19周年生日快乐!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    难过
    2025-1-10 08:55
  • 签到天数: 661 天

    [LV.9]以坛为家II

    发表于 4 天前 | 显示全部楼层
    厉害啊,佩服
    PYG19周年生日快乐!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2025-1-13 09:04
  • 签到天数: 339 天

    [LV.8]以坛为家I

    发表于 4 天前 | 显示全部楼层
    20周年生日快乐!
    PYG19周年生日快乐!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2025-1-14 09:13
  • 签到天数: 673 天

    [LV.9]以坛为家II

    发表于 4 天前 | 显示全部楼层
    学习加感谢分享!
    PYG19周年生日快乐!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-1-14 15:32
  • 签到天数: 164 天

    [LV.7]常住居民III

    发表于 前天 11:31 | 显示全部楼层
    本帖最后由 yeshengheng 于 2025-4-2 11:50 编辑

    下载了,没办法播放呀。1.02.0点播放没反应。3.0就是一个点鼠标玩的小程序。
    tutieshi_640x337_23s.gif
    PYG19周年生日快乐!
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 加入我们

    本版积分规则

    快速回复 返回顶部 返回列表