Skip to content

Commit

Permalink
added ability to have different walls in a room
Browse files Browse the repository at this point in the history
  • Loading branch information
@DatNoHand
DatNoHand committed Jul 31, 2018
1 parent 3036bb0 commit b97c355
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 73 deletions.
11 changes: 5 additions & 6 deletions server/config/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ config.mode.ambient = {}
config.mode.rider = {}

// WebSocket config
config.port = 80
config.port = 420
config.name = 'LED Controller'


Expand All @@ -19,8 +19,7 @@ config.led.ready_color = '00FF00'
config.led.num = 923

// Walls config
config.walls = [
[ 280 ],
[ 650 ],
[ 790 ],
]
config.walls = [ 218, 463, 681]

// Ignore
config.walls.push(config.led.num)
34 changes: 17 additions & 17 deletions server/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,22 @@
<div class=center>
<div class="colorpicker">
<div class="quatro">
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
</div>
<div class="quatro">
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
</div>
<div class="quatro">
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble" ></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
<div class="color animate infinite wobble"></div>
</div>
</div>
</div>
Expand All @@ -68,11 +68,11 @@
<!-- FIXME: only temporary -->
<div class="center">
<div class="colorpicker">
<div class="col animate infinite wobble" data-wall='0'><p>Alle Wände</p></div>
<div class="col animate infinite wobble" data-wall='1'><p>Wand 1</p></div>
<div class="col animate infinite wobble" data-wall='2'><p>Wand 2</p></div>
<div class="col animate infinite wobble" data-wall='3'><p>Wand 3</p></div>
<div class="col animate infinite wobble" data-wall='4'><p>Wand 4</p></div>
<div class="col animate infinite wobble wall" data-wall='1'><p>Wand 1</p></div>
<div class="col animate infinite wobble wall" data-wall='2'><p>Wand 2</p></div>
<div class="col animate infinite wobble wall" data-wall='3'><p>Wand 3</p></div>
<div class="col animate infinite wobble wall" data-wall='4'><p>Wand 4</p></div>
<div class="hidden colorreference" hidden style="display: none;"></div>
</div>
</div>

Expand Down
43 changes: 29 additions & 14 deletions server/public/js/client.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var ws
var lights_on = false;
var color
var walls = []
var wall_data = []
var led_color
var lamp_off_color = '#707070'
var tries = 0
Expand Down Expand Up @@ -30,7 +30,8 @@ function Start() {
case 'status':
lights_on = msg.on
led_color = '#' + msg.color
walls = msg.walls_active
wall_data = msg.walls_active
console.log(walls)

Lamp(lights_on)
UpdateColors()
Expand All @@ -54,26 +55,38 @@ $('.button.rainbow').on('click', function () {
$('.button.amount').on('click', function () {
let bright = $('#br').val()
let amount = $(this).attr('data-amount')
ledAmount(bright, color, amount, wall)
ledAmount(bright, color, amount, walls)
})

$('.button.wall').on('click', function () {
wall = $(this).attr('data-wall')
if ($(this).attr('data-active') === null) {
$('div.col.animate.infinite.wobble.wall').on('click', function () {
// Set Background color of clicked element
var col_reference = $('div.colorreference')
var index = $(this).attr('data-wall') - 1
col_reference.css({'background-color': color})

if (($(this).attr('data-active') == undefined) || ($(this).css('background-color') != col_reference.css('background-color'))) {
$(this).attr('data-active', 1)
$(this).css({'background-color': color})
} else {
$(this).attr('data-active', 0)
$(this).css({'background-color': '#212121'})
}

if ($(this).attr('data-active') == 1) {
walls[index][0] = 1
walls[index][1] = color
}

})

// Longpress to show colorpicker
var timer
$('div.color.animate.infinite.wobble').on('mousedown touchstart', function (e) {
$('div.color.animate.infinite.wobble').on('mousedown', function (e) {
timer = setTimeout(() => {
$('input.button.colpicker').click();
}, 400)
e.preventDefault()
}).on('mouseup mouseleave touchend', () => {
}).on('mouseup mouseleave', () => {
clearTimeout(timer)
})

Expand All @@ -90,7 +103,7 @@ $('div.color.animate.infinite.wobble').on('contextmenu', function (e) {
$('#onOff').click(function () {
var bright = $('#br').val()
if (!lights_on)
ledAmount(bright, color, 5)
ledAmount(bright, color, 5, 0)
OnOnOffClick()
});

Expand All @@ -103,12 +116,14 @@ function UpdateColors() {
$('input.button.colpicker').val(led_color)

for (let i = 0; i < walls.length; i++) {
let wall = $('div.col.animate.infinite.wobble').eq(i)
var wall = $('div.col.animate.infinite.wobble.wall').eq((i+1))
if ((wall != null) && (walls[i] != null)) {
if (walls[i][0] == 1) {
wall.css({'background-color', walls[i][1]})
wall.css({'background-color': walls[i][1] })
wall.attr('data-active', 1)
} else {
wall.css({'background-color', lamp_off_color})
wall.css({'background-color': '#212121'})
wall.attr('data-active', 0)
}
}
}
Expand Down Expand Up @@ -157,11 +172,11 @@ function OnOnOffClick() {
// Begin LED functions

function ledAmount(bright, color = '0000ff', amount = 2) {
send({type: 'amount', bright: bright, color: color, amount: amount})
send({type: 'amount', bright: bright, color: color, amount: amount, walls: walls})
}

function ledOff() {
send({type: 'off'})
send({type: 'off', walls: walls})
}

function ledRainbow(bright) {
Expand Down
2 changes: 2 additions & 0 deletions server/public/layout/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ p {
-moz-box-shadow: 6px 15px 20px 2px rgba(0,0,0,0.4);
box-shadow: 6px 15px 20px 2px rgba(0,0,0,0.4);
cursor: pointer;
transition: .5s;
}

.col {
Expand All @@ -79,6 +80,7 @@ p {
-moz-box-shadow: 6px 15px 20px 2px rgba(0,0,0,0.4);
box-shadow: 6px 15px 20px 2px rgba(0,0,0,0.4);
cursor: pointer;
transition: .5s;
}

.effect {
Expand Down
103 changes: 67 additions & 36 deletions server/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,34 +35,46 @@ var wss = new WebSocketServer({ server: httpServer });
// Global Vars
var loop
var on = false
var strip_color
var strip_walls = config.walls.push(NUM_LEDS)
var strip_walls_active
var strip_walls = config.walls
var strip_led_data = []
var strip_wall_data = []
var color
var favorites = [
'FF0000', 'FF6600', 'FFAA00', 'FFFF00', '00FF00', '00FC9E',
'00FFF6', '0099FF', '0000FF', '9A00FF', 'FF00F7', 'FF0077'
]

// Initialize the LED data to 0
for (let i = 0; i < NUM_LEDS; i++) {
// Format;
// [ bool on, string color ]
strip_led_data.push([ 0, '000000'])
}
// Initialize the wall data to 0
for (let i = 0; i < strip_walls.length; i++) {
strip_walls_active.push([ 0, '000000'])
// Format:
// [ bool on, string color, int amount ]
strip_wall_data.push([ 0, '000000', 0])
}

console.log(strip_walls)
console.log('Listening on '+port);

strip.init(NUM_LEDS)
strip.setBrightness(config.led.brightness)

// On ready, show (green) lights
ledAmount(config.led.brightness, config.led.ready_color)
// Set all walls to on
SetStrip([[1, 'ff0000', 1], [1, '00ff00', 1], [1, '0000ff', 1], [1, 'b6cc18', 1]])
RenderLedData()

on = true

// Removed: API

// If the server gets a connection
wss.on('connection', function(ws, req) {

SendToEveryone({type: 'status', on: on, color: strip_color, max: config.led.max_brightness, favorites: favorites, walls_active: strip_walls_active })
// SendToEveryone({type: 'status', on: on, max: config.led.max_brightness, favorites: favorites, color: , wall_data: strip_wall_data })

ws.on('message', (msg) => {
try {
Expand All @@ -84,15 +96,17 @@ wss.on('connection', function(ws, req) {
ledOff()
break;
case 'amount':
ledAmount(msg.bright, msg.color, msg.amount)
console.log(msg.walls)
SetStrip(msg.walls)
ledAmount(msg.bright, msg.amount)
break;
case 'special':
clearInterval(loop)
ledSpecial(msg.bright, msg.mode, msg.arg)
break;
}

SendToEveryone({type: 'status', on: on, color: strip_color, max: config.led.max_brightness, favorites: favorites, walls_active: strip_walls_active })
// SendToEveryone({type: 'status', on: on, max: config.led.max_brightness, favorites: favorites, walls_active: strip_walls_active })
});
});

Expand All @@ -102,39 +116,56 @@ wss.on('connection', function(ws, req) {
* Maybe use classes later-later
**/

function ledAmount(bright = conifg.led.brightness, color, amount = 1) {
strip.setBrightness(parseInt(bright))
color = '0x' + color
amount = parseInt(amount)
clear()

if (amount < 1) amount = 1;

for (var i = 0; i < config.led.num; i+=amount) {
pixelData[i] = color
function RenderLedData() {
for (var i = 0; i < NUM_LEDS; i++) {
if (strip_led_data[i][0] == 0) {
pixelData[i] = '0x000000'
} else {
pixelData[i] = '0x' + strip_led_data[i][1]
}
}

color = color.slice(2,8)
strip_color = color

if (!favorites.includes(color.toUpperCase()))
favorites.unshift(color.toUpperCase())
favorites = favorites.slice(0,15)

strip.render(pixelData)
on = true
}

// Zeroes out LEDs color data, but doesn't render it | Preparation for new pattern
function clear() {
for (var i = 0; i < config.led.num; i++) {
pixelData[i] = '0x000000'
}
function SetLedData(_led, _on = 1, _color) {
if (_on == 0) _color = strip_led_data[_led][1]
strip_led_data[_led] = [ _on, _color]
}

function change() {
clearInterval(loop)
clear()
// Format: SetStrip( array _walls, string _color, int _amount)
// Format: array _walls = wall [ bool on, string color, int amount ]
function SetStrip(_walls = 0, _color = 'ff0000', _amount = 1) {
// If nothing or 0 was passed as the first arg
// Set the whole strip to red / _color
if (_walls == 0) {
for (var i = 0; i < NUM_LEDS; i+=parseInt(_amount)) {
color = _color
SetLedData(i, 1, _color)
}
} else {
var led = 0
var led2 = 0
// Foreach wall in the configuration
for (var i = 0; i < strip_walls.length; i++) {
// Foreach LED / wall
// First black out all LEDs
for (var led = strip_walls[i]; led < strip_walls[i]; led++) {
SetLedData(led, 0)
}

let amount = (_walls[i][2] < 1) ? 1 : _walls[i][2]
// Then show only used LEDs
for (led2; led2 < strip_walls[i]; led2+=parseInt(amount)) {
// If a wall is disabled,
if (_walls[i][0] == 0) {
SetLedData(led2, false, _walls[i][1])
} else {
SetLedData(led2, true, _walls[i][1])
}
}
}
color = _walls[0][1]
}
}

function ledOff() {
Expand Down

0 comments on commit b97c355

Please sign in to comment.