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

split up index.html in 3 blocks

Browse Source
This commit is contained in:
jngrt 2015-05-19 20:58:43 +02:00
parent aba8149226
commit a90c35451f
2 changed files with 78 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/index.html
View File

@ -8,44 +8,34 @@
<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>
<span id="progress">--</span>
<span id="progress">--</span>
<span id="total">--</span>
</p>
<!--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>
<script src="/web/main.js"></script>
<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 );