Avatar billede poulchristian Juniormester
23. juli 2020 - 07:01 Der er 12 kommentarer og
1 løsning

PHP variabler til JavaScript

Hejsa,

Jeg har et HTML canvas, hvor jeg fra en PHP beregning jeg skal bruge disse fire variabler:

$x1
$y1
$x2
$y2

... og efterfølgende anvende disse fire variabler in mit JavaScript således:

let x1 = <?php echo $x1; ?>;
let y1 = <?php echo $y1; ?>;
let x2 = <?php echo $x2; ?>;
let y2 = <?php echo $y2; ?>;

Hvis jeg angiver de fire variabler direkte, for eksempel:

$x1=115;
$y1=999;
$x2=97;
$y2=777;

... så fungerer alt fint ... men, men, men: hvis jeg anvender variablerne fra beregningen i min PHP formular, så sker der ingenting. Hvis jeg tjekker kildekoden, er tallene fra beregningerne der godtnok, og de vises også som html men som sagt, der sker ingenting i mit JavaScript. Her er mine variabler, som jeg jeg skal bruge:

$x1 = number_format($Total_Zero_Fuel_Weight, 2, '.', ',');
$y1 = number_format($Total_Zero_Fuel_C_of_G, 2, '.', ',');
$x2 = number_format($Total_Take_Off_Weight, 2, '.', ',');
$y2 = number_format($Total_Take_Off_C_of_G, 2, '.', ',');

Er der nogen, der kan hjælpe mig lidt på vej?

På forhånd tak :-)
Avatar billede Slater Ekspert
23. juli 2020 - 08:37 #1
Du viser os de ting der fungerer, men ikke de ting der ikke fungerer.

Hvordan ser det ud efter din beregning? Hvordan forsøger du at bruge det? Hvilke fejl får du fra Javascript?
Avatar billede erikjacobsen Ekspert
23. juli 2020 - 09:57 #2
Du må ikke bruge 1000-tals separator i javascript. I linjen

  $x1 = number_format($Total_Zero_Fuel_Weight, 2, '.', ',');

er sidste parameter: ','  1000-tals separatoren, og hvis javascript møder fx:

  let x1 = 7,999.00

vil den give en fejl. Noget i retning af "Unexpected number"

Men vi ved naturligvis ikke om dette er dit konkrete problem.
Avatar billede poulchristian Juniormester
23. juli 2020 - 17:05 #3
Tak for svarene. Variablerne fra PHP skal bruges således (markeret in fed skrift):

drawVertical(ctx);
drawHorizontal(ctx);

let x1 = 105.56;
let y1 = 700.23;
let x2 = 99.95;
let y2 = 800.09;

drawLine(ctx, x1, y1, x2, y2);

PHP variablerne ser således ud (uden 1000-tals seperator - tak, Erik):

$x1 = number_format($Total_Zero_Fuel_Weight, 2);
$y1 = number_format($Total_Zero_Fuel_C_of_G, 2);
$x2 = number_format($Total_Take_Off_Weight, 2);
$y2 = number_format($Total_Take_Off_C_of_G, 2);

Men hvis jeg gør nedenstående i JavaScript, tegnes der ingen linie mellem koordinaterne:

let x1 = <?php echo $x1; ?>;
let y1 = <?php echo $y1; ?>;
let x2 = <?php echo $x2; ?>;
let y2 = <?php echo $y2; ?>;

... og det kan jeg ikke forstå. variablerne er ikke tomme; ved echo vises indholdet af variablerne som forventet og vises også i browserens kildekode. Hvis jeg skriver nogle tilfældige tal ind i mit JavaScript, virker det også som forventet, og der tegnes en linie mellem koordinaterne.

Så et eller andet er galt, som jeg gør forkert.
Avatar billede erikjacobsen Ekspert
23. juli 2020 - 17:33 #4
" og vises også i browserens kildekode. "    -  må vi se?    Gerne et link til siden, for så er problemet løst på 37 sekunder ;)
Avatar billede poulchristian Juniormester
23. juli 2020 - 17:48 #5
jamen, helt sikkert. Her er siden:

http://www.fmjq.ca/

... du kan bare skrive nogle tilfældige tal. Beregning og canvas er på den efterfølgende side (http://www.fmjq.ca/result.php).

Her er result.php:

<?php
    error_reporting(0);

    header("Cache-Control: no-cache");
    header("Cache-control: private");
    header("Pragma: no-cache");
    header("Expires: time() -1");
?><!DOCTYPE html>
<html lang="da">
<head>
    <title>FMJQ</title>

    <meta charset="utf-8">
    <meta name="author" content="FMJQ">
    <meta name="description" content="FMJQ">
    <meta name="keywords" content="FMJQ">
    <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

    <link href="http://fmjq.ca/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="http://fmjq.ca/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" type="image/png">
    <link href="http://fmjq.ca/favicon-32x32.png" rel="icon shortcut" sizes="32x32" type="image/png">
    <link href="http://fmjq.ca/favicon-16x16.png" rel="icon shortcut" sizes="16x16" type="image/png">
   
    <link href="weight_balance_calculation.css" rel="stylesheet" type="text/css">

    <script src="jquery.min.js"></script>
</head>

<body>

<div id="wrapper">

<!-- BANNER START -->

<header>

<a href="index.php" id="clickable_header"><img alt="Weight & Balance" src="rans_s_12_airaile.png" title="Weight & Balance"></a>
</header>

<!-- BANNER END -->

<br style="clear: both">

<!-- MENU START -->

<nav>

<a href="#" id="responsive_menu_icon"></a>

<ul>
<li><a class="button" href="index.php">Weight & Balance</a>
<li><a class="button" href="specifications.php">Specifications</a>
</ul>
</nav>

<!-- MENU END -->





<!-- CONTENT START -->

<section id="main">

<h1>Weight & Balance</h1>

<?php
    session_start();
    $Ballast_Weight = $_SESSION['strBallast'];
    $Ballast_Arm = 36;
    $Ballast_Moment = $Ballast_Weight * $Ballast_Arm;

    $Main_Gear_Left_Weight = 259;
    $Main_Gear_Left_Arm = 108;
    $Main_Gear_Left_Moment = $Main_Gear_Left_Weight * $Main_Gear_Left_Arm;

    $Main_Gear_Right_Weight = 243;
    $Main_Gear_Right_Arm = 108;
    $Main_Gear_Right_Moment = $Main_Gear_Right_Weight * $Main_Gear_Right_Arm;

    $Tail_Weight = 27;
    $Tail_Arm = 248;
    $Tail_Moment = $Tail_Weight * $Tail_Arm;

    $Total_Aircraft_Weight = $Ballast_Weight + $Main_Gear_Left_Weight + $Main_Gear_Right_Weight + $Tail_Weight;
    $Total_Aircraft_Moment = $Ballast_Moment + $Main_Gear_Left_Moment + $Main_Gear_Right_Moment + $Tail_Moment;
    $Total_Aircraft_C_of_G = $Total_Aircraft_Moment / $Total_Aircraft_Weight;

    $Pilot_Weight = $_SESSION['strPilot'];
    $Pilot_Arm = 85;
    $Pilot_Moment = $Pilot_Weight * $Pilot_Arm;

    $Passenger_Weight = $_SESSION['strPassenger'];
    $Passenger_Arm = 85;
    $Passenger_Moment = $Passenger_Weight * $Passenger_Arm;

    $Total_Zero_Fuel_Weight = $Pilot_Weight + $Passenger_Weight + $Total_Aircraft_Weight;
    $Total_Zero_Fuel_Moment = $Pilot_Moment + $Passenger_Moment + $Total_Aircraft_Moment;
    $Total_Zero_Fuel_C_of_G = ($Total_Aircraft_Moment + $Pilot_Moment + $Passenger_Moment + $Total_Zero_Fuel_Moment) / ($Total_Aircraft_Weight + $Pilot_Weight + $Passenger_Weight + $Total_Zero_Fuel_Weight);

    $Usable_Fuel_Weight = $_SESSION['strUsable_Fuel'] * 6.35;
    $Usable_Fuel_Arm = 103;
    $Usable_Fuel_Moment = $Usable_Fuel_Weight * $Usable_Fuel_Arm;

    $Total_Take_Off_Weight = $Total_Zero_Fuel_Weight + $Usable_Fuel_Weight;
    $Total_Take_Off_Moment = $Total_Zero_Fuel_Moment + $Usable_Fuel_Moment;
    $Total_Take_Off_C_of_G = ($Total_Zero_Fuel_Moment + $Usable_Fuel_Moment) / ($Total_Zero_Fuel_Weight + $Usable_Fuel_Weight);

    $Max_Take_Off_Weight = 960;
    $Min_Take_Off_C_of_G = 99;
    $Max_Take_Off_C_of_G = 106;
?>
<!-- DISPLAY CALCULATIONS START -->

<p><span class="error"><?php if ($Total_Take_Off_Weight >= $Max_Take_Off_Weight) echo "Warning: Max Take-Off Weight Exceeded"?></span>
<br><span class="error"><?php if ($Total_Take_Off_C_of_G < $Min_Take_Off_C_of_G || $Total_Take_Off_C_of_G > $Max_Take_Off_C_of_G) echo "Warning: C og G Outside Limit"?></span></p>

<table style="width: 100%">

<tr>
<th>Weight</th>
<th>Arm</th>
<th>Moment</th>
<th>C of G</th>
</tr>

<tr>
<td colspan="4">1. Ballast</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Ballast_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Ballast_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Ballast_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="4">2. Main Gear - Left</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Main_Gear_Left_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Main_Gear_Left_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Main_Gear_Left_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="4">3. Right Gear - Left</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Main_Gear_Right_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Main_Gear_Right_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Main_Gear_Right_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="4">4. Tail</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Tail_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Tail_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Tail_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td class="table_heading" colspan="4">Total Aircraft</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Total_Aircraft_Weight, 2, '.', ',')?></td>
<td class="calculation">&nbsp;</td>
<td class="calculation"><?php echo number_format($Total_Aircraft_Moment, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Total_Aircraft_C_of_G, 2, '.', ',')?></td>
</tr>

<tr>
<td colspan="4">&nbsp;</td>
</tr>

<tr>
<td colspan="4">5. Pilot</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Pilot_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Pilot_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Pilot_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="4">6. Passenger</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Passenger_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Passenger_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Passenger_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td class="table_heading" colspan="4">Total - Zero Fuel</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Total_Zero_Fuel_Weight, 2, '.', ',')?></td>
<td class="calculation">&nbsp;</td>
<td class="calculation"><?php echo number_format($Total_Zero_Fuel_Moment, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Total_Zero_Fuel_C_of_G, 2, '.', ',')?></td>
</tr>

<tr>
<td colspan="4">&nbsp;</td>
</tr>

<tr>
<td colspan="4">7. Usable Fuel (<?php echo number_format($_SESSION['strUsable_Fuel'], 2, '.', ',')?> gal)</td>
</tr>

<tr>
<td class="calculation"><?php echo number_format($Usable_Fuel_Weight, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Usable_Fuel_Arm, 2, '.', ',')?></td>
<td class="calculation"><?php echo number_format($Usable_Fuel_Moment, 2, '.', ',')?></td>
<td>&nbsp;</td>
</tr>

<tr>
<td class="table_heading" colspan="4">Total - Take-Off</td>
</tr>

<tr>
<td class="calculation" <?php if ($Total_Take_Off_Weight >= $Max_Take_Off_Weight) echo "style=\"background: red; color: white\""?>><?php echo number_format($Total_Take_Off_Weight, 2, '.', ',')?></td>
<td class="calculation">&nbsp;</td>
<td class="calculation"><?php echo number_format($Total_Take_Off_Moment, 2, '.', ',')?></td>
<td class="calculation" <?php if ($Total_Take_Off_C_of_G < $Min_Take_Off_C_of_G || $Total_Take_Off_C_of_G > $Max_Take_Off_C_of_G) echo "style=\"background: red; color: white\""?>><?php echo number_format($Total_Take_Off_C_of_G, 2, '.', ',')?></td>
</tr>
</table>

<!-- DISPLAY CALCULATIONS END -->





<!-- CANVAS START -->

<div style="margin-top: 600px; position: relative">

<div id="canvasArea">

<canvas id="selectedArea" width="102" height="466"></canvas>

<p class="dotted"></p>

<canvas id="myCanvas" width="360" height="600"></canvas>
</div>
</div>
<?php
    $x1 = number_format($Total_Zero_Fuel_Weight, 2);
    $y1 = number_format($Total_Zero_Fuel_C_of_G, 2);
    $x2 = number_format($Total_Take_Off_Weight, 2);
    $y2 = number_format($Total_Take_Off_C_of_G, 2);
?>
<script>
    // JQUERY METHOD CALLS DRAWING CANVAS.
    $(document).ready(function() {
        drawVertical(ctx);
        drawHorizontal(ctx);

        let x1 = <?php echo $x1; ?>;
        let y1 = <?php echo $y1; ?>;
        let x2 = <?php echo $x2; ?>;
        let y2 = <?php echo $y2; ?>;

        // DRAWS LINE FROM X1 AND Y1 TO X2 AND Y2
        drawLine(ctx, x1, y1, x2, y2);
    });

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    // DRAWS HORIZONTAL LINES FOR GRID. COUNTS OF HORIZONTAL LINES ARE 35 AND EVERY INTERVAL IS 15 PIXELS.
    function drawHorizontal(ctx) {
        for (var i =0; i<=520; i+=15 ) {
            let plotYVal = 1000-i/15*10;
            ctx.beginPath();

            // IF PLOT VALUES ARE 1000, 950, 900 ETC., LINES AND VALUES ARE DISPLAYED BOLD LINE AND FONT.
            if (i%75) ctx.lineWidth = 0.5;
            else ctx.lineWidth = 2;

            ctx.lineCap = "butt";
            ctx.moveTo(50, i+25);
            ctx.lineTo(350, i+25);
            ctx.stroke();

            // Y AXIS: INSERT NUMERICAL VALUE.
            if (plotYVal%50) ctx.font = "8px Arial";
            else ctx.font = "bold 8px Arial";
            ctx.textAlign = "end";
            ctx.fillText(plotYVal, 40, i+29);
            }
        }

    // DRAWS VERTICAL LINE FOR GRID. COUNTS OF VERTICAL LINES ARE 20 AND EVERY INTERVAL IS 15 PIXELS.
    function drawVertical(ctx) {
        for (var j=0; j<=300; j+=15) {
            if (j!=0) {
                let plotXVal = 95+j/15;
                ctx.beginPath();
                if(j%75)ctx.lineWidth = 0.5;
                else ctx.lineWidth = 2;
                ctx.lineCap = "butt";
                ctx.moveTo(j+50, 25);
                ctx.lineTo(j+50, 550);
                ctx.stroke();

                // X AXIS: INSERT NUMERICAL VALUE.
                if (plotXVal%5) ctx.font = "8px Arial";
                else ctx.font = "bold 8px Arial";
                ctx.fillText(plotXVal, j+45, 570);
            }
        }
    }

    // DRAWS LINE BETWEEN TWO POINT.
    function drawLine(element, val1, val2, val3, val4) {
        if (val1!=="" && val2!=="" && val3!=="" && val4!=="") {

            // DECLARES X1, Y1, X2, AND Y2 TO CORRESPOND COMPUTER COORDINATES WITH ORDINARY COORDINATES.
            let x1 = (val1-95)*15+50;
            let y1 = (1000-val2)*1.5+25;
            let x2 = (val3-95)*15+50;
            let y2 = (1000-val4)*1.5+25;

            element.beginPath();
            element.lineWidth=3;
            element.lineCap = "round";
            element.moveTo(x1, y1);
            element.lineTo(x2, y2);
            element.strokeStyle = "blue";
            element.stroke();
        }
    }
</script>

<!-- CANVAS END -->

<br style="clear: both">

</section>
</div> <!-- "wrapper" -->

<!-- CONTENT END -->

</body>
</html>
Avatar billede olsensweb.dk Ekspert
23. juli 2020 - 18:33 #6
du har en fejl i result.php:219 Uncaught SyntaxError: Unexpected number

prøv at slå error_reporting til
<?php
    error_reporting(0);

    header("Cache-Control: no-cache");
    .....
   
   


<?php
ini_set("display_startup_errors", "on");
ini_set("display_errors", "on");
ini_set("html_errors", "false");
error_reporting(-1); // -1 viser alle slags fejl beskeder
ini_set("ignore_repeated_errors", 0);
?>
Avatar billede erikjacobsen Ekspert
23. juli 2020 - 18:38 #7
Du har stadig 1000-tals separatorer:

  let x1 = 694,673.00;

Det får man med

$x1 = number_format($Total_Zero_Fuel_Weight, 2);

men ikke med

$x1 = number_format($Total_Zero_Fuel_Weight, 2,'.','');

Sidste parameter er den tomme streng.
Avatar billede poulchristian Juniormester
23. juli 2020 - 22:32 #8
Tak for svarene. Jeg har opdateret variablerne, så nu skulle der ikke være 1000-tals separatorer, men resultatet er desværre uændret. Hvis jeg tjekker kildekoden, står der f.eks.

let x1 = 716.00;
let y1 = 105.77;
let x2 = 766.80;
let y2 = 105.58;

... og det skulle jo være rigtig nok. Det er godt nok mystisk.
Avatar billede erikjacobsen Ekspert
23. juli 2020 - 23:07 #9
Dine beregninger virker så vidt jeg kan se. Der kommer sjove tal ud. Om de er korrekte ved jeg ikke. Hvad mener du er fejlen nu?
Avatar billede poulchristian Juniormester
24. juli 2020 - 00:38 #10
Problemet er fortsat, at der ikke tegnes nogen linie mellem koordinaterne i mit canvas, når de kommer fra mine variabler, som f.eks.:

drawVertical(ctx);
drawHorizontal(ctx);

let x1 = 105.56;
let y1 = 700.23;
let x2 = 99.95;
let y2 = 800.09;

drawLine(ctx, x1, y1, x2, y2);

... og det kan jeg ikke forstå.
Avatar billede poulchristian Juniormester
24. juli 2020 - 00:52 #11
(Fortsat) ... med andre ord: Dette virker ikke (selvom variablerne tilsyneladende virker):

<?php
$x1 = number_format($Total_Zero_Fuel_Weight, 2,'.','');
$y1 = number_format($Total_Zero_Fuel_C_of_G, 2,'.','');
$x2 = number_format($Total_Take_Off_Weight, 2,'.','');
$y2 = number_format($Total_Take_Off_C_of_G, 2,'.','');
?>

... hvor imod det virker fint, hvis jeg skiver nogle tilfældige tal direkte ind, så som:

<?php
$x1 = 100;
$y1 = 750;
$x2 = 105;
$y2 = 800;
?>
Avatar billede erikjacobsen Ekspert
24. juli 2020 - 08:06 #12
Jeg har prøvet igen, og da jeg ikke ved hvilke tal, der giver mening, så er det svært for mig at ramme noget, hvor den blå streg faktisk ligger indenfor din tegning.

Men den blå streg kommer hvis jeg piller i variablerne i din drawLine funktion, altså i debuggeren får sat x1 til y2 til værdier mellem 0 og 300, sådan som du også har gjort i svar #10.

De tal, der kommer ind fra PHP er ikke de tal der bruges til at tegne stregen - du regner på dem, og det betyder at stregen bliver tegnet udenfor din tegning.

Indtaster jeg dit eksempel med 100, 750, 105, 800 så bliver x1 til y2 i drawline til værdier mellem 1300 og 10000, langt uden for dit koordinatsystem.
Avatar billede poulchristian Juniormester
24. juli 2020 - 18:02 #13
Hej erikjacobsen, tak for din tålmodighed; jeg sætter pris på dine vedholdende forsøg på at hjælpe, når sådan nogen som mig har brug for sådan nogen som dig.

Det er rigtigt, at variablerne, der anvendes som canvas koordinater er beregninger af indtastning fra formularen, men så var det alligevel, at du fik mig til at dobbelt-dobbelt-dobbelttjekke, og der var selvfølgelig en forkert beregning så stregen kom udenfor canvasset.

Og så lærte jeg det med 1000-tals separatorer :-)

Beregningen er til min lille flyvemaskine, hvor man skal beregne vægt og tyngdepunkt før hver flyvning.

Tak for hjælpen!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester