Updated to a workable interface right now.
This commit is contained in:
parent
c27e3d661d
commit
ebb25aee9c
@ -3,6 +3,7 @@ import asyncio
|
||||
from bleak import BleakScanner, BleakClient
|
||||
import threading
|
||||
import time
|
||||
import json
|
||||
|
||||
# =================================================================================================
|
||||
# APP CONFIGURATION
|
||||
@ -10,7 +11,7 @@ import time
|
||||
|
||||
# Set to True to run without a physical BLE device for testing purposes.
|
||||
# Set to False to connect to the actual lamp matrix.
|
||||
DEBUG_MODE = True
|
||||
DEBUG_MODE = False
|
||||
|
||||
# --- BLE Device Configuration (Ignored in DEBUG_MODE) ---
|
||||
DEVICE_NAME = "Pupilometer LED Billboard"
|
||||
@ -33,8 +34,11 @@ def create_spiral_map(n=5):
|
||||
r, c = n // 2, n // 2
|
||||
address = 0
|
||||
spiral_map[r][c] = address
|
||||
dr = [0, 1, 0, -1]
|
||||
dc = [1, 0, -1, 0]
|
||||
|
||||
# Updated directions to start moving UP first instead of right
|
||||
dr = [-1, 0, 1, 0] # Change in row: Up, Right, Down, Left
|
||||
dc = [0, 1, 0, -1] # Change in col: Up, Right, Down, Left
|
||||
|
||||
direction = 0
|
||||
segment_length = 1
|
||||
steps = 0
|
||||
@ -51,6 +55,7 @@ def create_spiral_map(n=5):
|
||||
segment_length += 1
|
||||
return spiral_map
|
||||
|
||||
|
||||
def get_spiral_address(row, col, spiral_map):
|
||||
n = len(spiral_map)
|
||||
if 0 <= row < n and 0 <= col < n:
|
||||
@ -60,7 +65,7 @@ def get_spiral_address(row, col, spiral_map):
|
||||
|
||||
SPIRAL_MAP_5x5 = create_spiral_map(5)
|
||||
|
||||
async def set_lamp_colors_on_ble(lamps_to_update, new_color):
|
||||
async def set_full_matrix_on_ble(full_matrix):
|
||||
global ble_client
|
||||
global ble_characteristics
|
||||
|
||||
@ -70,32 +75,55 @@ async def set_lamp_colors_on_ble(lamps_to_update, new_color):
|
||||
if not ble_client or not ble_client.is_connected:
|
||||
print("Failed to reconnect to BLE client.")
|
||||
return
|
||||
else:
|
||||
print("Confirmed BLE connection status. Proceeding with lamp update.")
|
||||
|
||||
# Create a full matrix of colors to send
|
||||
print("Initializing blank canvas...")
|
||||
serial_colors = [b'\x00\x00\x00'] * lampAmount
|
||||
center_lamp_color = b'\x00\x00\x00'
|
||||
center_pos = get_spiral_address(2, 2, SPIRAL_MAP_5x5)
|
||||
print(f"Initialized: {serial_colors}")
|
||||
|
||||
# Note: A real implementation would query the device for the center lamp's current color
|
||||
# to maintain persistence. For simplicity in this example, we'll assume it's set to black initially.
|
||||
# We will update this logic later if needed.
|
||||
for row in range(5):
|
||||
for col in range(5):
|
||||
|
||||
# Apply all other lamps to black
|
||||
for char_index in range(lampAmount):
|
||||
if char_index != center_pos:
|
||||
serial_colors[char_index] = b'\x00\x00\x00'
|
||||
lamp_data = full_matrix[row][col]
|
||||
print(f"Construcing lamp {row},{col} data: {lamp_data}")
|
||||
ww = int(lamp_data['ww'])
|
||||
cw = int(lamp_data['cw'])
|
||||
blue = int(lamp_data['blue'])
|
||||
|
||||
# Apply the new color to the selected lamps
|
||||
for lamp in lamps_to_update:
|
||||
spiral_pos = get_spiral_address(lamp['row'], lamp['col'], SPIRAL_MAP_5x5)
|
||||
if spiral_pos != -1:
|
||||
serial_colors[spiral_pos] = new_color
|
||||
color_bytes = bytes([ww, cw, blue])
|
||||
spiral_pos = get_spiral_address(row, col, SPIRAL_MAP_5x5)
|
||||
print(f"Constructed data for {spiral_pos}: {color_bytes}")
|
||||
if spiral_pos != -1:
|
||||
serial_colors[spiral_pos] = color_bytes
|
||||
|
||||
# =====================================================================
|
||||
# SNIPPET TO PATCH SWAPPED LAMP POSITIONS
|
||||
# =====================================================================
|
||||
print("Patching lamp positions 3 <-> 7 and 12 <-> 24.")
|
||||
|
||||
# Swap data for lamps at positions 3 and 7
|
||||
temp_color_3 = serial_colors[3]
|
||||
serial_colors[3] = serial_colors[7]
|
||||
serial_colors[7] = temp_color_3
|
||||
|
||||
# Swap data for lamps at positions 12 and 24
|
||||
temp_color_12 = serial_colors[12]
|
||||
serial_colors[12] = serial_colors[24]
|
||||
serial_colors[24] = temp_color_12
|
||||
# =====================================================================
|
||||
|
||||
# Ensure all characteristics are available before writing
|
||||
if len(ble_characteristics) != lampAmount:
|
||||
print(f"Mismatch in lamp amount. Expected {lampAmount}, got {len(ble_characteristics)}.")
|
||||
return
|
||||
print(f"Constructed the following matrix data: {serial_colors}")
|
||||
# Write each byte string to its corresponding characteristic
|
||||
for i, char in enumerate(ble_characteristics):
|
||||
value_to_write = serial_colors[i]
|
||||
print(f"Setting Lamp {i} ({char.uuid}) to {value_to_write.hex()}")
|
||||
await ble_client.write_gatt_char(char.uuid, value_to_write)
|
||||
print(f"Setting Lamp {i} to {value_to_write.hex()}")
|
||||
|
||||
|
||||
async def connect_to_ble_device():
|
||||
global ble_client
|
||||
@ -116,11 +144,12 @@ async def connect_to_ble_device():
|
||||
await ble_client.connect()
|
||||
if ble_client.is_connected:
|
||||
print(f"Connected to {target_device.name}")
|
||||
services = await ble_client.get_services()
|
||||
ble_characteristics = sorted([
|
||||
services = ble_client.services
|
||||
# The previous logic for filtering services seems incorrect; let's grab all characteristics
|
||||
characteristics = [
|
||||
char for service in services for char in service.characteristics
|
||||
], key=lambda char: char.handle)[:lampAmount]
|
||||
|
||||
]
|
||||
ble_characteristics = sorted(characteristics, key=lambda char: char.handle)
|
||||
print(f"Found {len(ble_characteristics)} characteristics for lamps.")
|
||||
return True
|
||||
else:
|
||||
@ -145,60 +174,49 @@ def index():
|
||||
return render_template('index.html', matrix=lamp_matrix)
|
||||
else:
|
||||
# In live mode, we'll pass a default black matrix.
|
||||
# The true state is on the device.
|
||||
initial_matrix = [['#000000' for _ in range(5)] for _ in range(5)]
|
||||
return render_template('index.html', matrix=initial_matrix)
|
||||
|
||||
|
||||
@app.route('/set_color', methods=['POST'])
|
||||
# Updated part of your app.py
|
||||
@app.route('/set_color', methods=['POST'])
|
||||
def set_color():
|
||||
@app.route('/set_matrix', methods=['POST'])
|
||||
def set_matrix():
|
||||
data = request.get_json()
|
||||
lamps_to_update = data.get('lamps', [])
|
||||
r = data.get('ww')
|
||||
g = data.get('cw')
|
||||
b = data.get('blue')
|
||||
full_matrix = data.get('matrix', [])
|
||||
|
||||
if not lamps_to_update:
|
||||
return jsonify(success=False, message="No lamps selected")
|
||||
if not full_matrix or len(full_matrix) != 5 or len(full_matrix[0]) != 5:
|
||||
return jsonify(success=False, message="Invalid matrix data received"), 400
|
||||
else:
|
||||
print(f"Received the following matrix data: {full_matrix}")
|
||||
|
||||
|
||||
try:
|
||||
r, g, b = int(r), int(g), int(b)
|
||||
new_color_hex = f'#{r:02x}{g:02x}{b:02x}'
|
||||
|
||||
if DEBUG_MODE:
|
||||
# === DEBUG MODE: Update in-memory matrix ===
|
||||
center_row, center_col = 2, 2
|
||||
center_lamp_color = lamp_matrix[center_row][center_col]
|
||||
|
||||
# First, turn all non-center lamps black
|
||||
for row in range(5):
|
||||
for col in range(5):
|
||||
if (row, col) != (center_row, center_col):
|
||||
lamp_matrix[row][col] = '#000000'
|
||||
|
||||
# Apply the new color to the selected lamps
|
||||
for lamp in lamps_to_update:
|
||||
lamp_matrix[lamp['row']][lamp['col']] = new_color_hex
|
||||
|
||||
# The center lamp is handled by its own controls, so it remains persistent
|
||||
# unless it's part of a region update. We re-apply its color here.
|
||||
# No, we don't. The logic is that it gets reset unless it's selected.
|
||||
|
||||
return jsonify(success=True, new_color=new_color_hex)
|
||||
lamp_data = full_matrix[row][col]
|
||||
ww = lamp_data['ww']
|
||||
cw = lamp_data['cw']
|
||||
blue = lamp_data['blue']
|
||||
|
||||
# Convert ww, cw, blue to a hex color for UI display
|
||||
r = min(255, ww + cw)
|
||||
g = min(255, ww + cw + blue)
|
||||
b = min(255, blue + cw)
|
||||
new_color_hex = f'#{r:02x}{g:02x}{b:02x}'
|
||||
lamp_matrix[row][col] = new_color_hex
|
||||
|
||||
return jsonify(success=True)
|
||||
else:
|
||||
# === LIVE MODE: Communicate with the BLE device ===
|
||||
new_color_bytes = int(f'{r:02x}{g:02x}{b:02x}', 16).to_bytes(3, 'big')
|
||||
|
||||
asyncio.run_coroutine_threadsafe(
|
||||
set_lamp_colors_on_ble(lamps_to_update, new_color_bytes),
|
||||
set_full_matrix_on_ble(full_matrix),
|
||||
ble_event_loop
|
||||
)
|
||||
return jsonify(success=True, new_color=new_color_hex)
|
||||
return jsonify(success=True)
|
||||
|
||||
except Exception as e:
|
||||
print(f"Error in set_color route: {e}")
|
||||
print(f"Error in set_matrix route: {e}")
|
||||
return jsonify(success=False, message=str(e)), 500
|
||||
|
||||
# =================================================================================================
|
||||
|
||||
@ -48,7 +48,6 @@ async def setLampToColor(bleClient, bleChars, section, color, colorCenter):
|
||||
lampPos = bleChars.index(char)
|
||||
value = sectionSerial[lampPos]
|
||||
print(f"Setting Lamp number {lampPos} to {value}")
|
||||
|
||||
await bleClient.write_gatt_char(char.uuid, value)
|
||||
|
||||
async def connect_to_ble_device(device_name):
|
||||
|
||||
@ -2,142 +2,96 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Lamp Matrix Control</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.matrix-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 70px);
|
||||
grid-template-rows: repeat(5, 70px);
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background-color: #333;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.lamp {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 10%;
|
||||
background-color: #000;
|
||||
transition: box-shadow 0.2s, transform 0.1s;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.lamp.on {
|
||||
box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
|
||||
}
|
||||
.lamp.selected {
|
||||
border: 2px solid #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.region-control {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.region-control button {
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.slider-controls {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.control-panel {
|
||||
background-color: #444;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
}
|
||||
.slider-group {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.slider-group input {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider-group input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.5);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.slider-group input::-webkit-slider-runnable-track {
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
background: #aaa; /* Generic solid color */
|
||||
}
|
||||
.slider-label {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.center-lamp-control {
|
||||
margin-top: 10px;
|
||||
background-color: #444;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.center-lamp-control h2 {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
// State for the entire 5x5 matrix, storing {ww, cw, blue} for each lamp
|
||||
var lampMatrixState = Array(5).fill(null).map(() => Array(5).fill({ww: 0, cw: 0, blue: 0}));
|
||||
var selectedLamps = [];
|
||||
|
||||
// NEW: Function to update sliders based on the three light values
|
||||
function updateSliders(ww, cw, blue) {
|
||||
$('#ww-slider').val(ww);
|
||||
$('#cw-slider').val(cw);
|
||||
$('#blue-slider').val(blue);
|
||||
// Function to calculate a visual RGB color from the three light values using a proper additive model
|
||||
function calculateRgb(ww, cw, blue) {
|
||||
// Define the RGB components for each light source based on slider track colors
|
||||
const warmWhiteR = 255;
|
||||
const warmWhiteG = 192;
|
||||
const warmWhiteB = 128;
|
||||
|
||||
const coolWhiteR = 192;
|
||||
const coolWhiteG = 224;
|
||||
const coolWhiteB = 255;
|
||||
|
||||
const blueR = 0;
|
||||
const blueG = 0;
|
||||
const blueB = 255;
|
||||
|
||||
// Normalize the slider values (0-255) and apply them to the base colors
|
||||
var r = (ww / 255) * warmWhiteR + (cw / 255) * coolWhiteR + (blue / 255) * blueR;
|
||||
var g = (ww / 255) * warmWhiteG + (cw / 255) * coolWhiteG + (blue / 255) * blueG;
|
||||
var b = (ww / 255) * warmWhiteB + (cw / 255) * coolWhiteB + (blue / 255) * blueB;
|
||||
|
||||
// Clamp the values to 255 and convert to integer
|
||||
r = Math.min(255, Math.round(r));
|
||||
g = Math.min(255, Math.round(g));
|
||||
b = Math.min(255, Math.round(b));
|
||||
|
||||
// Convert to hex string
|
||||
var toHex = (c) => ('0' + c.toString(16)).slice(-2);
|
||||
return '#' + toHex(r) + toHex(g) + toHex(b);
|
||||
}
|
||||
|
||||
function updateLampUI(lamp, colorState) {
|
||||
var newColor = calculateRgb(colorState.ww, colorState.cw, colorState.blue);
|
||||
var lampElement = $(`.lamp[data-row="${lamp.row}"][data-col="${lamp.col}"]`);
|
||||
lampElement.css('background-color', newColor);
|
||||
if (newColor === '#000000') {
|
||||
lampElement.removeClass('on');
|
||||
lampElement.css('box-shadow', `inset 0 0 5px rgba(0,0,0,0.5)`);
|
||||
} else {
|
||||
lampElement.addClass('on');
|
||||
lampElement.css('box-shadow', `0 0 15px ${newColor}, 0 0 25px ${newColor}`);
|
||||
}
|
||||
}
|
||||
|
||||
// NEW: Function to calculate a visual RGB color from the three light values
|
||||
function calculateRgb(ww, cw, blue) {
|
||||
// A simple approximation for UI display
|
||||
var r = Math.min(255, ww + cw);
|
||||
var g = Math.min(255, ww + cw + blue);
|
||||
var b = Math.min(255, blue + cw);
|
||||
return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2);
|
||||
// Function to update the UI and send the full matrix state to the backend
|
||||
function sendFullMatrixUpdate(lampsToUpdate, isRegionUpdate = false) {
|
||||
var fullMatrixData = lampMatrixState.map(row => row.map(lamp => ({
|
||||
ww: lamp.ww,
|
||||
cw: lamp.cw,
|
||||
blue: lamp.blue
|
||||
})));
|
||||
|
||||
$.ajax({
|
||||
url: '/set_matrix',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({ matrix: fullMatrixData }),
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
if (isRegionUpdate) {
|
||||
// On a region button click, update the entire matrix UI
|
||||
for (var r = 0; r < 5; r++) {
|
||||
for (var c = 0; c < 5; c++) {
|
||||
updateLampUI({row: r, col: c}, lampMatrixState[r][c]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Otherwise, just update the lamps that changed
|
||||
lampsToUpdate.forEach(function(lamp) {
|
||||
updateLampUI(lamp, lampMatrixState[lamp.row][lamp.col]);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateSliders(ww, cw, blue, prefix = '') {
|
||||
$(`#${prefix}ww-slider`).val(ww);
|
||||
$(`#${prefix}cw-slider`).val(cw);
|
||||
$(`#${prefix}blue-slider`).val(blue);
|
||||
$(`#${prefix}ww-number`).val(ww);
|
||||
$(`#${prefix}cw-number`).val(cw);
|
||||
$(`#${prefix}blue-number`).val(blue);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
@ -169,116 +123,102 @@
|
||||
{row: 2, col: 0}, {row: 2, col: 4},
|
||||
{row: 3, col: 0}, {row: 3, col: 4},
|
||||
{row: 4, col: 0}, {row: 4, col: 1}, {row: 4, col: 2}, {row: 4, col: 3}, {row: 4, col: 4},
|
||||
],
|
||||
'All': [
|
||||
{row: 0, col: 0}, {row: 0, col: 1}, {row: 0, col: 2}, {row: 0, col: 3}, {row: 0, col: 4},
|
||||
{row: 1, col: 0}, {row: 1, col: 1}, {row: 1, col: 2}, {row: 1, col: 3}, {row: 1, col: 4},
|
||||
{row: 2, col: 0}, {row: 2, col: 1}, {row: 2, col: 3}, {row: 2, col: 4},
|
||||
{row: 3, col: 0}, {row: 3, col: 1}, {row: 3, col: 2}, {row: 3, col: 3}, {row: 3, col: 4},
|
||||
{row: 4, col: 0}, {row: 4, col: 1}, {row: 4, col: 2}, {row: 4, col: 3}, {row: 4, col: 4},
|
||||
]
|
||||
};
|
||||
|
||||
// Exclude the center lamp from the 'All' region
|
||||
var allRegionWithoutCenter = regionMaps['All'].filter(lamp => !(lamp.row === 2 && lamp.col === 2));
|
||||
regionMaps['All'] = allRegionWithoutCenter;
|
||||
|
||||
// Initialize lampMatrixState from the initial HTML colors
|
||||
$('.lamp').each(function() {
|
||||
var row = $(this).data('row');
|
||||
var col = $(this).data('col');
|
||||
var color = $(this).css('background-color');
|
||||
var rgb = color.match(/\d+/g);
|
||||
lampMatrixState[row][col] = {
|
||||
ww: rgb[0], cw: rgb[1], blue: rgb[2]
|
||||
};
|
||||
});
|
||||
|
||||
$('.region-button').on('click', function() {
|
||||
var region = $(this).data('region');
|
||||
selectedLamps = regionMaps[region];
|
||||
var newlySelectedLamps = regionMaps[region];
|
||||
|
||||
// Clear selected class from all lamps
|
||||
$('.lamp').removeClass('selected');
|
||||
$('.lamp').not('[data-row="2"][data-col="2"]').css('box-shadow', 'inset 0 0 5px rgba(0,0,0,0.5)');
|
||||
|
||||
// Get the current slider values to use as the new default
|
||||
var ww = parseInt($('#ww-slider').val());
|
||||
var cw = parseInt($('#cw-slider').val());
|
||||
var blue = parseInt($('#blue-slider').val());
|
||||
|
||||
// Reset all lamps except the center to black in our state
|
||||
var lampsToUpdate = [];
|
||||
var centerLampState = lampMatrixState[2][2];
|
||||
lampMatrixState = Array(5).fill(null).map(() => Array(5).fill({ww: 0, cw: 0, blue: 0}));
|
||||
lampMatrixState[2][2] = centerLampState; // Preserve center lamp state
|
||||
|
||||
// Set newly selected lamps to the current slider values
|
||||
selectedLamps = newlySelectedLamps;
|
||||
selectedLamps.forEach(function(lamp) {
|
||||
$(`.lamp[data-row="${lamp.row}"][data-col="${lamp.col}"]`).addClass('selected');
|
||||
lampMatrixState[lamp.row][lamp.col] = {ww: ww, cw: cw, blue: blue};
|
||||
});
|
||||
|
||||
if (selectedLamps.length > 0) {
|
||||
$('.control-panel').show();
|
||||
// NEW: Update sliders based on first lamp's current state
|
||||
// Update sliders to reflect the state of the first selected lamp
|
||||
var firstLamp = selectedLamps[0];
|
||||
var firstLampElement = $(`.lamp[data-row="${firstLamp.row}"][data-col="${firstLamp.col}"]`);
|
||||
// Note: This requires the Python backend to send back the ww, cw, blue values
|
||||
// in the initial render, which is a required change from previous versions.
|
||||
// For now, sliders will default to 0.
|
||||
updateSliders(0, 0, 0);
|
||||
var firstLampState = lampMatrixState[firstLamp.row][firstLamp.col];
|
||||
updateSliders(firstLampState.ww, firstLampState.cw, firstLampState.blue, '');
|
||||
} else {
|
||||
$('.control-panel').hide();
|
||||
}
|
||||
|
||||
// Send the full matrix state
|
||||
sendFullMatrixUpdate(lampsToUpdate, true);
|
||||
});
|
||||
|
||||
// NEW: Event listener for the region sliders
|
||||
// Event listener for the region sliders and number inputs
|
||||
$('.region-slider-group input').on('input', function() {
|
||||
if (selectedLamps.length === 0) return;
|
||||
|
||||
var ww = $('#ww-slider').val();
|
||||
var cw = $('#cw-slider').val();
|
||||
var blue = $('#blue-slider').val();
|
||||
var ww = parseInt($('#ww-slider').val());
|
||||
var cw = parseInt($('#cw-slider').val());
|
||||
var blue = parseInt($('#blue-slider').val());
|
||||
|
||||
var data = {
|
||||
lamps: selectedLamps,
|
||||
ww: ww,
|
||||
cw: cw,
|
||||
blue: blue
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: '/set_color',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(data),
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
var newColor = calculateRgb(ww, cw, blue);
|
||||
|
||||
$('.lamp').each(function() {
|
||||
var currentLamp = $(this);
|
||||
var lampRow = currentLamp.data('row');
|
||||
var lampCol = currentLamp.data('col');
|
||||
var isCenterLamp = (lampRow === 2 && lampCol === 2);
|
||||
var isSelected = selectedLamps.some(lamp => lamp.row === lampRow && lamp.col === lampCol);
|
||||
|
||||
if (isSelected) {
|
||||
currentLamp.css('background-color', newColor);
|
||||
if (newColor === '#000000') {
|
||||
currentLamp.removeClass('on');
|
||||
} else {
|
||||
currentLamp.addClass('on');
|
||||
currentLamp.css('box-shadow', `0 0 15px ${newColor}, 0 0 25px ${newColor}`);
|
||||
}
|
||||
} else if (!isCenterLamp) {
|
||||
currentLamp.css('background-color', '#000000');
|
||||
currentLamp.removeClass('on');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
updateSliders(ww, cw, blue, '');
|
||||
|
||||
var lampsToUpdate = [];
|
||||
selectedLamps.forEach(function(lamp) {
|
||||
lampMatrixState[lamp.row][lamp.col] = {ww: ww, cw: cw, blue: blue};
|
||||
lampsToUpdate.push(lamp);
|
||||
});
|
||||
|
||||
sendFullMatrixUpdate(lampsToUpdate);
|
||||
});
|
||||
|
||||
// NEW: Event listener for the center lamp sliders
|
||||
// Event listener for the center lamp sliders and number inputs
|
||||
$('.center-slider-group input').on('input', function() {
|
||||
var ww = $('#center-ww-slider').val();
|
||||
var cw = $('#center-cw-slider').val();
|
||||
var blue = $('#center-blue-slider').val();
|
||||
var ww = parseInt($('#center-ww-slider').val());
|
||||
var cw = parseInt($('#center-cw-slider').val());
|
||||
var blue = parseInt($('#center-blue-slider').val());
|
||||
|
||||
var data = {
|
||||
lamps: [{row: 2, col: 2}],
|
||||
ww: ww,
|
||||
cw: cw,
|
||||
blue: blue
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: '/set_color',
|
||||
type: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify(data),
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
var newColor = calculateRgb(ww, cw, blue);
|
||||
var centerLamp = $(`.lamp[data-row="2"][data-col="2"]`);
|
||||
centerLamp.css('background-color', newColor);
|
||||
|
||||
if (newColor === '#000000') {
|
||||
centerLamp.removeClass('on');
|
||||
} else {
|
||||
centerLamp.addClass('on');
|
||||
centerLamp.css('box-shadow', `0 0 15px ${newColor}, 0 0 25px ${newColor}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
updateSliders(ww, cw, blue, 'center-');
|
||||
|
||||
var centerLamp = {row: 2, col: 2};
|
||||
|
||||
lampMatrixState[centerLamp.row][centerLamp.col] = {ww: ww, cw: cw, blue: blue};
|
||||
|
||||
sendFullMatrixUpdate([centerLamp]);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -293,6 +233,7 @@
|
||||
<button class="region-button" data-region="Right">Right</button>
|
||||
<button class="region-button" data-region="Inner ring">Inner ring</button>
|
||||
<button class="region-button" data-region="Outer ring">Outer ring</button>
|
||||
<button class="region-button" data-region="All">All</button>
|
||||
</div>
|
||||
<div class="matrix-grid">
|
||||
{% for row in range(5) %}
|
||||
@ -306,23 +247,42 @@
|
||||
<div class="center-lamp-control">
|
||||
<h2>Center Lamp</h2>
|
||||
<div class="slider-group center-slider-group">
|
||||
<span class="slider-label">Warm White (3000K)</span>
|
||||
<input type="range" id="center-ww-slider" min="0" max="255" value="0">
|
||||
<span class="slider-label">Cool White (6500K)</span>
|
||||
<input type="range" id="center-cw-slider" min="0" max="255" value="0">
|
||||
<span class="slider-label">Blue</span>
|
||||
<input type="range" id="center-blue-slider" min="0" max="255" value="0">
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Warm White (3000K)</span>
|
||||
<input type="range" id="center-ww-slider" min="0" max="255" value="0" class="white-3000k">
|
||||
<input type="number" id="center-ww-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Cool White (6500K)</span>
|
||||
<input type="range" id="center-cw-slider" min="0" max="255" value="0" class="white-6500k">
|
||||
<input type="number" id="center-cw-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Blue</span>
|
||||
<input type="range" id="center-blue-slider" min="0" max="255" value="0" class="blue">
|
||||
<input type="number" id="center-blue-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<h2>Selected Region</h2>
|
||||
<div class="slider-group region-slider-group">
|
||||
<span class="slider-label">Warm White (3000K)</span>
|
||||
<input type="range" id="ww-slider" min="0" max="255" value="0">
|
||||
<span class="slider-label">Cool White (6500K)</span>
|
||||
<input type="range" id="cw-slider" min="0" max="255" value="0">
|
||||
<span class="slider-label">Blue</span>
|
||||
<input type="range" id="blue-slider" min="0" max="255" value="0">
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Warm White (3000K)</span>
|
||||
<input type="range" id="ww-slider" min="0" max="255" value="0" class="white-3000k">
|
||||
<input type="number" id="ww-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Cool White (6500K)</span>
|
||||
<input type="range" id="cw-slider" min="0" max="255" value="0" class="white-6500k">
|
||||
<input type="number" id="cw-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
<div class="slider-row">
|
||||
<span class="slider-label">Blue</span>
|
||||
<input type="range" id="blue-slider" min="0" max="255" value="0" class="blue">
|
||||
<input type="number" id="blue-number" min="0" max="255" value="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ app = Flask(__name__)
|
||||
def create_spiral_map(n=5):
|
||||
"""
|
||||
Creates a pre-computed spiral mapping for an n x n matrix.
|
||||
The spiral starts from the center and moves outwards.
|
||||
The spiral starts from the center, moves up, then right, and spirals outwards.
|
||||
|
||||
Args:
|
||||
n (int): The size of the square matrix.
|
||||
@ -25,9 +25,10 @@ def create_spiral_map(n=5):
|
||||
address = 0
|
||||
spiral_map[r][c] = address
|
||||
|
||||
# Directions: Right, Down, Left, Up
|
||||
dr = [0, 1, 0, -1]
|
||||
dc = [1, 0, -1, 0]
|
||||
# Directions: Up, Right, Down, Left
|
||||
# This is the key change to adjust the spiral path
|
||||
dr = [-1, 0, 1, 0]
|
||||
dc = [0, 1, 0, -1]
|
||||
direction = 0
|
||||
|
||||
segment_length = 1
|
||||
@ -44,7 +45,6 @@ def create_spiral_map(n=5):
|
||||
direction = (direction + 1) % 4
|
||||
steps += 1
|
||||
|
||||
# Increase segment length after every two turns
|
||||
if steps % 2 == 0:
|
||||
segment_length += 1
|
||||
|
||||
@ -119,6 +119,7 @@ def set_color():
|
||||
col = lamp['col']
|
||||
if 0 <= row < 5 and 0 <= col < 5:
|
||||
lamp_matrix[row][col] = new_color
|
||||
print(get_spiral_address(row, col, SPIRAL_MAP_5x5))
|
||||
|
||||
return jsonify(success=True, new_color=new_color)
|
||||
|
||||
@ -126,4 +127,4 @@ def set_color():
|
||||
return jsonify(success=False, message="Invalid data received")
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
app.run(debug=True,host='0.0.0.0')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user