Skip to content

Master #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ltnguy16 wants to merge 8 commits into
base: branchfordemo
Choose a base branch
from
Open

Master #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
83aecff
Add getTime() and CSS
ltnguy16 Apr 26, 2018
d2fb680
Update CSS
ltnguy16 Apr 26, 2018
e951912
Add Spacer
ltnguy16 Apr 26, 2018
f9e0a1d
Update UI
ltnguy16 Apr 27, 2018
f2f1c1d
Fix timestamp undefine
ltnguy16 Apr 27, 2018
3415e8b
undone retreieval
ismcodes Apr 27, 2018
3188e87
fix infinite loop
ismcodes Apr 27, 2018
d51952b
change canvas ref
ismcodes Apr 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 88 additions & 85 deletions Webpage/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
}

function localSet(key, val){

localStorage.setItem(key, JSON.stringify(val));
}

Expand All @@ -28,14 +27,14 @@
function documentExists(id){
var docsList = localGet("DOCUMENTS_MANIFEST");
return docsList.includes(id);
// Array#includes seems to be compatible with mobile device browsers
}

function writeDocument(id, name, paths, undone){
var obj = {
name: name,
paths: paths,
undone: undone
undone: undone,
time: (new Date()).toLocaleString()
};

localSet(id, obj);
Expand All @@ -54,6 +53,10 @@
window.location.href = window.location.origin + "/?" + id;
}

function goBack(){
window.location.href = window.location.origin;
}

</script>

<script>
Expand All @@ -71,12 +74,13 @@
var sessionId = '';
var PATH_TIME_MARGIN = 1000;
var inStroke = false;

/*========================================================================*/
function updateWritingProgress(saveStatus){
var color, message;
if(saveStatus){
color = "green";
message = "Saved";
message = "Paused";
} else {
color = "yellow";
message = "Writing";
Expand All @@ -89,7 +93,7 @@
$("#undone").toggle();
}
/*========================================================================*/
function draw(context, path, color='black', lineWidth=10){
function draw(context, path, color='black', lineWidth=5){
console.log("drawing path:");
console.log(path);
context.strokeStyle = color;
Expand All @@ -111,9 +115,9 @@
oy = path.pts[i][1];
if(Math.abs(lastX - ox) > NEW_PATH_MARGIN * THUMBNAIL_WIDTH_RATIO || Math.abs(lastY - oy) > NEW_PATH_MARGIN * THUMBNAIL_HEIGHT_RATIO){
// context.moveTo(ox,oy);
}
lastX = ox;
lastY = oy;
}
lastX = ox;
lastY = oy;
context.lineTo(ox, oy);
context.stroke();
context.moveTo(ox,oy);
Expand Down Expand Up @@ -141,11 +145,20 @@
return pathChanged;
}
/*========================================================================*/
function addToUndone(path){
function addToUndone(path, keepsize=false){
if(typeof path === 'undefined')
return;
undone.push(transformSize(path));
$("#undone").append("<div style='border-style: solid'><canvas height='" + CANVAS_HEIGHT * SCALE + "' width='" + CANVAS_WIDTH * SCALE + "'></canvas></div>");
var firstEl = false;
var i = 0;
while(!firstEl){
firstEl = path.pts[i];
i++;
}
if(keepsize)
undone.push(path);
else
undone.push(transformSize(path));
$("#undone").append("<div style='border-style: solid'>" + firstEl[2] + "<canvas height='" + CANVAS_HEIGHT * SCALE + "' width='" + CANVAS_WIDTH * SCALE + "'></canvas></div>");
draw($("#undone").children().last().children().first()[0].getContext('2d'), path, 'red', 5);
}
/*========================================================================*/
Expand Down Expand Up @@ -187,31 +200,11 @@
function getSessionName(){
return $("#docName").val();
}
/*
Saving function that will take paths and undone, check if they are empty, and save it on the phone
Inorder to access function in android, the name "Android", a varable created in android studio as a identifier between the two codes, must be use.
.showToast is a function that will make a pop-up.

Remove any lines of code that has Android. if testing without an android emulator, and uncomment line 213 to line 226 if testing on browser.
*/
function saveNotes(){
writeDocument(sessionId, getSessionName(), paths, undone);
/*
var pathCheck = "";

for (var i = 0; i < paths.length; i++)
{
for (var j = 0; j < paths[i].pts.length; j++)
{
pathCheck += paths[i].pts[j][0];
pathCheck += " ";
pathCheck += paths[i].pts[j][1];
pathCheck += " ";
}
pathCheck += "\t";
}
$("#saveChecker").html(pathCheck);*/
}

/*========================================================================*/
window.onload = function(){
checkWindowSetup();
Expand All @@ -221,75 +214,85 @@
var docsList = localGet("DOCUMENTS_MANIFEST");
for(var i = 0; i < docsList.length; i++){
var id = docsList[i];
$("#menu").append("<a href='/?" + id + "'>" + localGet(id).name + "</a><br>");
$("#menu").append("<a href='/?" + id + "'>" + localGet(id).name + "<br>Last edited:" + localGet(id).time + "</a><br>");
}
} else {
$("#home").show();
$("#editor").show();
toggleHistory();
CANVAS_HEIGHT = window.innerHeight - 80;
CANVAS_WIDTH = window.innerWidth;
var inPath = false;
var lastTouch;
ctx = Sketch.create({
autoclear: false,
draw: function() {
this.lineCap = 'round';
this.lineJoin = 'round';
this.fillStyle = this.strokeStyle = "BLACK";
this.lineWidth = 10;
touch = this.touches[0];
if(typeof touch === 'undefined'){
if(inPath && inStroke){
paths[paths.length-1].pts.push(false);
}
inStroke = false;

if(Date.now() - lastTouch > PATH_TIME_MARGIN && inPath){
inPath = false;
ctx.closePath();
updateWritingProgress(true);
} else {
if(inPath)
updateWritingProgress(false);
}
return;
}
lastTouch = Date.now();
inStroke = true;
if(!writingMode){
return;
}
if(!inPath || paths.length == 0){
ctx.beginPath();
inPath = true;
paths.push({pts:[]})
}

autoclear: false,
draw: function() {
this.lineCap = 'round';
this.lineJoin = 'round';
this.fillStyle = this.strokeStyle = "BLACK";
this.lineWidth = 5;
touch = this.touches[0];
if(typeof touch === 'undefined'){
if(inPath && inStroke){
paths[paths.length-1].pts.push(false);
}
inStroke = false;

if(Date.now() - lastTouch > PATH_TIME_MARGIN && inPath){
inPath = false;
ctx.closePath();
updateWritingProgress(true);
} else {
if(inPath)
updateWritingProgress(false);

var ox = touch.ox;
var oy = touch.oy;
this.moveTo( ox, oy );
this.lineTo( touch.x, touch.y );
paths[paths.length - 1].pts.push([touch.x, touch.y])
this.stroke();
}
});
paths = localGet(sessionId).paths;
for(var i = 0; i < paths.length; i++){
draw(ctx, paths[i]);
return;
}
lastTouch = Date.now();
inStroke = true;
if(!writingMode){
return;
}
if(!inPath || paths.length == 0){
ctx.beginPath();
inPath = true;
paths.push({pts:[]})
}

updateWritingProgress(false);

var ox = touch.ox;
var oy = touch.oy;
this.moveTo( ox, oy );
this.lineTo( touch.x, touch.y );
paths[paths.length - 1].pts.push([touch.x, touch.y, (new Date()).toLocaleString()])
this.stroke();
}
$('canvas').first().height(CANVAS_HEIGHT).width(CANVAS_WIDTH);
$('canvas').first().css('border-style', 'dashed');
});
paths = localGet(sessionId).paths;
for(var i = 0; i < paths.length; i++){
draw(ctx, paths[i]);
}
var _undone = localGet(sessionId).undone;
for(var i = 0; i < _undone.length; i++){
addToUndone(_undone[i], true);
}
$('canvas').last().height(CANVAS_HEIGHT).width(CANVAS_WIDTH);
$('canvas').last().css('border-style', 'dashed');
}
};
</script>
</head>
<body>
<div id="spacer" style="height: 100px;">SAVE IT v.2.1325</div>

<ul>
<li><b>Save It</b></li>
<li><a onclick="goBack()">Home</a></li>
<li><a onclick="newNote()">New note</a></li>
</ul>

<div id="spacer" style="height: 20px;"></div>

<div id="menu" style="display: none;">
<button onclick="newNote()">New note</button>
<div id="notesList"></div>
</div>

Expand All @@ -307,9 +310,9 @@
</div>
<div>
<button onclick="saveNotes()">SaveNotes</button>
<div id="saveChecker" style="height: 100px;">Testing</div>
</div>
<div id="undone" style="position:absolute"></div>
<div id="spacer2" style="height: 50px;"></div>
<div id="undone" style="position:absolute; background-color: white; width:100%; height:800px;"></div>
</div>
</body>
</html>
Expand Down
43 changes: 42 additions & 1 deletion Webpage/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,45 @@
button {
height: 50px;
width: 100px;
width: 20%;
float:left;
margin-bottom:10px;
}

.toolbar {
width:100%;
background-color:red;
padding:10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}
li b {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

a:hover:not(.active) {
background-color: #111;
}

.active {
background-color:#4CAF50;
}