diff --git a/app.js b/app.js index 7581b7d..ffd70dd 100644 --- a/app.js +++ b/app.js @@ -13,8 +13,8 @@ var udpPort = new osc.UDPPort({ localPort: 57121, // This is where sclang is listening for OSC messages. - remoteAddress: "192.168.2.147", //this is the hamsters ip - remotePort: 57120, //this is the hamsters port :*s + remoteAddress: "192.168.2.151", //this is the hamsters ip + remotePort: 8080, //this is the hamsters port :*s metadata: true }); @@ -59,10 +59,10 @@ io.on('connection', function(socket) { var oscmsg = { address: "/silentserver", args: [ - { - type: "s", - value: "user" - }, + // { + // type: "s", + // value: "user" + // }, { type: "s", value: msg diff --git a/public/index.html b/public/index.html index be3e400..1570d26 100644 --- a/public/index.html +++ b/public/index.html @@ -19,8 +19,13 @@
-
+
    +
    + +
    +
    +

    >>> CACHE CODE:

    @@ -198,6 +203,10 @@ //testing socket message from textinput field to arduino var messages = document.getElementById('messages'); + var chatHistory = localStorage.getItem('chatHistory'); + if (chatHistory) { + messages.innerHTML = chatHistory; + } function sendMessage() { @@ -207,15 +216,10 @@ item.textContent = message; item.className = 'me'; messages.appendChild(item); - - if (message === 'BLINK') { - socket.emit('blink'); - console.log('socket: blink'); - } - inputField.value = ''; - socket.emit('chat message', message); + messages.scrollTop = messages.scrollHeight; + localStorage.setItem('chatHistory', messages.innerHTML); } @@ -224,8 +228,10 @@ item.textContent = msg; item.className = 'others'; messages.appendChild(item); + messages.scrollTop = messages.scrollHeight - messages.clientHeight; + }); - S + diff --git a/public/style.css b/public/style.css index df720a6..68db556 100644 --- a/public/style.css +++ b/public/style.css @@ -334,4 +334,46 @@ button:active{ #location-log{ display: none; -} \ No newline at end of file +} + +#chat-window{ + height: 40vh; + border: 1px solid #ccc; + padding: 10px; + overflow-y: scroll; +} + +#messages { + height: 40vh; + overflow-y: auto; + padding: 0; + word-wrap: break-word; +} + +#messages li { + padding: 5px; + margin-bottom: 10px; + display: block; +} + +.me { + text-align: right; + color: #e8b722; + padding-bottom: 2px; + border-radius: 4px; + display: inline-block; +} + +.others { + text-align: left; + color: #DE6C3F; + border-radius: 4px; + display: inline-block; +} + + + +input[type="text"] { + padding: 5px; +} +