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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      web/index.html
  2. 90
      web/main.js

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 );
Write Preview
Loading…
Cancel
Save