rra
/
meshenger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

split up index.html in 3 blocks

master
jngrt 10 years ago
parent
aba8149226
commit
a90c35451f
2 changed files with 78 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      web/index.html
  2. 90
      web/main.js

37
web/index.html
View File

@ -8,28 +8,21 @@
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="/web/style.css" rel="stylesheet" type="text/css">
<title>meshed up</title>
<title>meshenger</title>
</head>
<body>
<div id="header">
<h2>Meshenger</h2>
</div>
<div id="message-page">
<button id="message-back">Back</button>
<form id="message-form" action="" accept-charset="utf-8">
<textarea id="name" rows="1" placeholder="Your Name"></textarea>
<textarea id="message" rows="2" placeholder="Your Message"></textarea>
<!-- removed photo button from here, otherwise triggers sending (empty) messages... TO FIX-->
<input type="submit" class="send-button" value="Send">
</form>
</div>
<button id="pop" class="photo-buttons" onclick="document.getElementById('photoEdit').style.display='block';">Add Photo</button>
<div id="photoEdit" class="photoBox">
<div id="photo-page" class="photoBox">
<button id="photo-back">Back</button>
<input id="fileInput" accept="image/*" capture="camera" type="file">
<br>
<p>
@ -39,13 +32,10 @@
<!--Squashed source<br>-->
<img id="sourceImage" src="" alt="capture" height="400" width="400">
<!--Offset done<br>-->
<canvas id="canvas1" width="400" height="400"></canvas>
<!--Dithered<br>-->
<canvas id="canvas2" width="400" height="400"></canvas>
<!--Rotated<br>-->
<canvas id="canvas3" width="400" height="400"></canvas>
<br>
@ -53,19 +43,24 @@
<button id="rotLeft">Rotate left</button>
<button id="rotRight">Rotate right</button>
<button id="submitPhoto" class="photo-buttons" onclick="submitImage();document.getElementById('photoEdit').style.display='none';">submit</button>
<button id="submitPhoto" class="photo-buttons" onclick="document.getElementById('photoEdit').style.display='none';">cancel</button>
<button id="submit-photo" class="photo-buttons">submit</button>
<button id="cancel-photo" class="photo-buttons">cancel</button>
</div>
<div id="overview-page">
<div class="messages">
<ul id="inbox"></ul>
<ul id="outbox"></ul>
</div>
<div>
<button id="new-photo">Picture</button>
<button id="new-message">Message</button>
</div>
</div>
<script src="/web/main.js"></script>
</body>
</html>

90
web/main.js
View File

@ -4,6 +4,65 @@ localStorage.clear();
//These need to be obtained from the node
var ownId, ownColor, ownAlias;
/*
* INIT
*/
document.addEventListener('DOMContentLoaded', function(){
function update(){
if ( !ownId ){
getOwnId();
}
if ( !ownAlias){
getOwnAlias();
}
checkInbox();
// also check for outbox items on interval,
// necessary in case connection is lost and messages are not yet sent
checkOutbox();
}
//update everything to initialize
updateInboxView();
updateOutboxView();
update();
//check for new messages every 7 seconds
window.setInterval( update, 7000 );
addButtonListeners();
});
/*
* STATE CHANGES
*/
function addButtonListeners(){
document.getElementById('new-photo').onclick = onNewPhoto;
document.getElementById('new-message').onclick = onNewMessage;
document.getElementById('message-back').onclick = onBack;
document.getElementById('photo-back').onclick = onBack;
}
function onNewPhoto(){
document.getElementById('photo-page').style.display = "block";
document.getElementById('overview-page').style.display = "none";
document.getElementById('message-page').style.display = "none";
}
function onNewMessage(){
document.getElementById('photo-page').style.display = "none";
document.getElementById('overview-page').style.display = "none";
document.getElementById('message-page').style.display = "block";
}
function onBack(){
document.getElementById('photo-page').style.display = "none";
document.getElementById('overview-page').style.display = "block";
document.getElementById('message-page').style.display = "none";
}
/*
* OUTBOX STUFF
*/
@ -296,10 +355,6 @@ document.addEventListener('DOMContentLoaded', function(){
initCanvas(context2);
initCanvas(context3);
fileInput.onchange = onFileInputChange;
document.getElementById('rotLeft').onclick = onRotateLeft;
@ -501,30 +556,3 @@ function monochrome(imageData, threshold, type){
return imageData;
}
/*
* INIT
*/
function update(){
if ( !ownId ){
getOwnId();
}
if ( !ownAlias){
getOwnAlias();
}
checkInbox();
// also check for outbox items on interval,
// necessary in case connection is lost and messages are not yet sent
checkOutbox();
}
//update everything to initialize
updateInboxView();
updateOutboxView();
update();
//check for new messages every 7 seconds
window.setInterval( update, 7000 );
Write Preview
Loading…
Cancel
Save