Skip to main content

Links between HTML pages not working correctly

I am making a project in the p5.JS web editor. So far it has a start screen but I want to create separate HTMLs for the login and account creation using the button boundaries as links to each other; I don't know how to do that, so for now I am just using regular links. I want to use a database to store these details (I want to use a MySQL database through phpMyAdmin by using XAMPP, but if there is a better way to do it with the p5.js WEB EDITOR please let me know!)

I am testing the link between the index.html to the signup.html (Which has the sketch page.js to test) This link to the signup is where I want the users to create details for an account which will be put into the database. On click to the sign up the link appears to load the HTML correctly, but when redirecting back to the start screen (index.html) input boxes and links are mispositioned and the gif doesn't play. Is there anyway somebody could help me with this? I don't have too much experience with p5.js or HTML and I am just starting out with PHP and databases too, so any help would be greatly appreciated! Thanks.

--Code for index.html--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

--Code for signup.html--

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="style2.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="page.js"></script>
  </body>
</html>

--Code for sketch.js-- Note: You might want to ignore what I was doing with the input boxes and empty functions

let MENU=0; //Sets menu to 0
let img; //defines image    
let gif_createImg; //defines gif
var fade = 0;
var fadeSpeed = 1.0;

let url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKHB57FTYof4JxLnJPHb-FH5jh3wjuC1jRXWoX3ytUfENYAbMz1IqBZcmM0IQ90drNS__NOWkgSjrG/pub?gid=0&single=true&output=csv"





function preload(){
  StartImg = loadImage('Images and GIFS/Species sandbox img.png'); //takes start screen image from assests
  LoginImg = loadImage('Images and GIFS/Login img.png ')
  dnaGif = loadImage('Images and GIFS/dna2.gif') //takes start screen gif from assets
  CreateAccountImg = loadImage('Images and GIFS/Create new account img.png')
}


function setup() {
  createCanvas(1280, 720); //creates the canvas for which everything else will be drawn on
  dnaGif.delay(40)
  let a = createA('signup.html', 'this is a link');
  a.position(0, 0);

}



function draw() {
  if (MENU == 0) {
    drawStartScreen();
  } else if (MENU == 1) {
    drawLoginScreen();
  } else if (MENU == 2) {
    drawAccountCreation();
  }else if (MENU == 3) {
    drawHTU();
  }
  
}



function drawStartScreen(){
  console.log('Start')
  background(255,255,245) //creates background with 3 arguments being values of colour: R, G and B
//  print(mouseX,mouseY) //prints location of mouse in the program
  image(StartImg,0,0, width,height); //creates the image for the start screen as sets it to match the size of the canvas 
  image(dnaGif,360,200) //creates gif and sets location (X,Y) in the program

}  
  


function drawAccountCreation(){
  console.log('Account creation')
  background(255, 255, 245)
  image(CreateAccountImg,0,0, width,height)
  textSize(20)
  text('Right-Click to return to the startscreen', 455, 693)
  if (mouseButton == RIGHT) {
    MENU = 0
    currentCreateUsername.remove();
    currentCreateUsername = undefined;
    currentCreatePassword.remove();
    currentCreatePassword = undefined;
    currentConfirmUsername.remove();
    currentConfirmUsername = undefined;
    currentConfirmPassword.remove();
    currentConfirmassword = undefined;
    }
   
}  



function inputUsername() {
  let input1 = createInput();
  input1.position(474, 130);
  input1.size(500, 70);
  input1.style('font-size: 30px')
  return input1;
}
 


function inputPassword(){
  let input2 = createInput();
  input2.position(474, 250);
  input2.size(500, 70);
  input2.style('font-size: 30px')
  return input2;
}



function inputCreateUsername(){
  let inputA = createInput();
  inputA.position(474, 129);
  inputA.size(500, 70);
  inputA.style('font-size: 30px')
  return inputA;
}



function inputCreatePassword(){
  let inputB = createInput();
  inputB.position(474, 220);
  inputB.size(500, 70);
  inputB.style('font-size: 30px')
  return inputB;
}



function inputConfirmUsername(){
  let inputC = createInput();
  inputC.position(474, 312);
  inputC.size(500, 70);
  inputC.style('font-size: 30px')
  return inputC;
}




function inputConfirmPassword(){
  let inputD = createInput();
  inputD.position(474, 402);
  inputD.size(500, 70);
  inputD.style('font-size: 30px')
  return inputD;
}




let currentInputUsername;

let currentInputPassword;

let currentCreateUsername;

let currentCreatePassword;

let currentConfirmUsername;

let currentConfirmPassword;

function mouseClicked(){
  if (MENU == 0) { 
    if (mouseY < 582 && mouseY > 527) {  
      if (mouseX < 527 && mouseX > 328) { 
        MENU = 1
        currentInputUsername= inputUsername();  
        currentInputPassword = inputPassword();
      } 
      if (mouseX < 900 && mouseX > 706) { 
        MENU = 2
        currentCreateUsername = inputCreateUsername();
        currentCreatePassword = inputCreatePassword();
        currentConfirmUsername = inputConfirmUsername();
        currentConfirmPassword = inputConfirmPassword();
        
        
      }
  }
  }
}



function drawHTU(){
  console.log('How-to-use')
  background(255, 0, 255)
  textSize(20)
  text('How to use', 600, 50)
  if (mouseButton == RIGHT) {
    MENU = 2
  }
}

  

function drawLoginScreen(){
//  print(mouseX,mouseY) 
  console.log('Login')
  background(255, 255, 245)
  fill(0) //colour filled in is set to black
  image(LoginImg,0,0, width,height);
  textSize(20)
  text('Right-Click to return to the start screen', 455, 693) //text and location in program
  
  
  if (mouseButton == RIGHT ){
    MENU = 0  //changes menu back to start screen if right-click is pressed
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  if (mouseIsPressed){
    if (mouseButton === LEFT && mouseY < 601 && mouseY > 547 && mouseX < 734 && mouseX > 535){ //Checks if mouse if pressed and is within boundary
    MENU = 3
    currentInputUsername.remove();
    currentInputUsername = undefined;
    currentInputPassword.remove();
    currentInputPassword = undefined;
    }
  }
}

function login(){
  if (MENU == 1){
    
    
  }
}

--Code for page.js--

let link;

function setup() {
  createCanvas(windowWidth, windowHeight);
  link = createA('index.html', 'this is a link')
  link.position(10,20);
}

function draw() {
  background(220);
}

--Code for style.css--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

--Code for style2.css--

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}


source https://stackoverflow.com/questions/69780561/links-between-html-pages-not-working-correctly

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more