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

90
web/main.js
View File

@ -4,6 +4,65 @@ localStorage.clear();
//These need to be obtained from the node //These need to be obtained from the node
var ownId, ownColor, ownAlias; 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 * OUTBOX STUFF
*/ */
@ -296,10 +355,6 @@ document.addEventListener('DOMContentLoaded', function(){
initCanvas(context2); initCanvas(context2);
initCanvas(context3); initCanvas(context3);
fileInput.onchange = onFileInputChange; fileInput.onchange = onFileInputChange;
document.getElementById('rotLeft').onclick = onRotateLeft; document.getElementById('rotLeft').onclick = onRotateLeft;
@ -501,30 +556,3 @@ function monochrome(imageData, threshold, type){
return imageData; 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 );