Javascript in HTML-pagina: plaats van 'klokjes'

vrijdag 4 oktober 2019 13:12

Acties:

0 Henk 'm!

Topicstarter

Zit met een vraag over toepassing van een javascript als deel van een HTML-webpagina.

Bijgaande code is een uittreksel van een HTML-webpagina met daarin een stuk javascript dat 2 'klokjes' maakt.
Met dit script (dat weer gebruik maakt van mchp.js) komen de klokjes onder elkaar te staan.
De vraag is nu: hoe krijg ik de klokjes naast elkaar?
het stuk script maakt driftig gebruik van Google's grafische mogelijkheden.
Al een aantal pogingen zelf gedaan met variaties binnen dit stuk code ( door toevoegen van bijv. ; , e.d. en door kleine veranderingen in de tekstplaatsing en in instelwaarden), maar zonder resultaat.
Daarbij geconcentreerd op regels 51~61 en 84~87, want daar wordt m.i. de realisatie uitgevoerd.
Zal wel iets 'kleins' zijn, maar ik kom er niet uit en kan geen voorbeelden vinden die dit wel voor elkaar krijgen:
wie weet een oplossing?

Helemaal onderaan de code zie je paar links naar de websitetoepassing van o.a. dit stuk code.

HTML: Klokjes_script.html

 for (i = 0; i < 4; i++) 
{   <html>
    <!--Revised: April 24, 2018 By: APvN@T4S-->
    <head>
    <TITLE>NL7559KW7: Fijnstof-meting, SDS011</TITLE>
    <H2>Fijnstof-waarde: PM2.5 en PM10</H2>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <meta http-equiv="refresh" content="130">
    <script src="mchp.js" type="text/javascript"></script>
    </head>
    <!-- klokjes gevuld door uitlezen van SDS_P2 en SDS_P1 uit xml_sds011_upload2.xml -->
    <!-- de klokken worden getekend alsof voor toepassing met temp en hum -->
    De 2 klokjes tonen de laatstgemeten fijnstof-waarden uit de SDS011-sensor op een schaal tot 200 ug/m<sup>3</sup>:
    <UL>
    <LI>PM2.5 met Groen is PM2.5 < 20, Blauw is 20 < PM2.5 < 50, Geel is 50 > PM2.5 > 90, Rood is PM2.5 > 90</LI>
    <LI>PM10 met Groen is PM2.5 < 30, Blauw is 30 < PM10 < 75, Geel is 75 > PM10 > 150, Rood is PM10 > 150</LI>
    </UL>
    <P>
    <script type="text/javascript">
    google.load('visualization', '1.1', {'packages':['gauge']});
    </script>
    <script type="text/javascript">
    // now the gauges
    google.setOnLoadCallback(drawGauges);

    var gaugeTempData = new google.visualization.DataTable();
    var gaugeTemp;

    var GPoptions1 = {
    width: 90, height:90,
    min: 0, max: 200,
    greenFrom: 0, greenTo: 20,
    blueFrom: 20, blueTo: 50,
    yellowFrom: 50, yellowTo: 90,
    redFrom: 90, redTo: 200,
    minorTicks: 10
    };

    var gaugeHumData = new google.visualization.DataTable();
    var gaugeHum;
    var GPoptions2 = {
    width: 90, height:90,
    min: 0, max: 200,
    greenFrom: 0, greenTo: 30,
    blueFrom: 30, blueTo: 75,
    yellowFrom: 75, yellowTo: 150,
    redFrom: 150, redTo: 200,
    minorTicks: 10
    };

    function drawGauges() {
    gaugeTempData.addColumn('string', 'Label');
    gaugeTempData.addColumn('number', 'Value');
    gaugeTempData.addRows([['PM2.5', 0]]);
    gaugeTemp = new google.visualization.Gauge(document.getElementById('chart_PM25'));
    gaugeTemp.draw(gaugeTempData, GPoptions1);
    gaugeHumData.addColumn('string', 'Label');
    gaugeHumData.addColumn('number', 'Value');
    gaugeHumData.addRows([['PM10', 0]]);
    gaugeHum = new google.visualization.Gauge(document.getElementById('chart_PM10'));
    gaugeHum.draw(gaugeHumData, GPoptions2);}

    // Parses the xmlResponse from the xml-file and updates the graph
    function updateStatus(xmlData) {

    // Check if a timeout occurred
    if(!xmlData)
    {
    return;
    }

    gaugeTempData.setValue(0,1,parseFloat(getXMLValue(xmlData, 'SDS_P2')));
    // gaugeTempData.setValue(0,1,gaugeTempData.getValue(0,1)+1);
    gaugeTemp.draw(gaugeTempData, GPoptions1);
    gaugeHumData.setValue(0,1,parseFloat(getXMLValue(xmlData, 'SDS_P1')));
    // gaugeHumData.setValue(0,1,gaugeHumData.getValue(0,1)+1);
    gaugeHum.draw(gaugeHumData, GPoptions2);
    setTimeout("newAJAXCommand('xml_sds011_upload2.xml', updateStatus, false)",1000);
    }

    setTimeout("newAJAXCommand('xml_sds011_upload2.xml', updateStatus, false)",300);

    </script>
    <body>
    <span id='chart_PM25'></span>
    <span id='chart_PM10'></span>
    </body>

    <HR>
    Terug naar de <A HREF="SPAM">Fijnstof-pagina</A><BR>
    <HR>
    <A HREF="SPAM">Sitemap/ Jumplist voor deze website</A>, <b>incl. links to english versions of pages</b><P><BR>
    <A HREF="SPAM"><IMG SRC="4PRVBUTT.GIF" ALT="startpagina" TITLE="Naar de 'Systeem'-pagina"></A>
    <BR><FONT SIZE=2>Copyright © 2013-2019 <A HREF="index.html">T4S</A>
    </html>
}

..

[ Voor 1% gewijzigd door RobIII op 04-10-2019 13:30 ]

vrijdag 4 oktober 2019 13:21

Acties:

0 Henk 'm!

Stoelpoot

Meten is weten, zowel in de bouw als in programmeren. De eerste vraag die je jezelf moet stellen is *waarom* de elementen onder elkaar staan, in plaats van naast elkaar.

In principe wordt alles in HTML naast elkaar gerenderd, tenzij daar geen ruimte voor is. Je kan nakijken hoe veel ruimte elk element inneemt in de debugger van je webbrowser (F12). Links in de HTML-weergave daar zie je hoe de HTML wordt opgebouwd, en rechts zie je de groottes die aan het geselecteerde element (klik op de regel) zijn toegewezen.

Overigens is het niet de bedoeling dat je buiten je <body> element andere elementen hebt staan behalve <head>. Zet dat dus wel allemaal bij elkaar, want anders roep je problemen over jezelf af.

vrijdag 4 oktober 2019 13:23

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Toulon7559 schreef op vrijdag 4 oktober 2019 @ 13:12:
Al een aantal pogingen zelf gedaan met variaties binnen dit stuk code ( door toevoegen van bijv. ; , e.d. en door kleine veranderingen in de tekstplaatsing en in instelwaarden), maar zonder resultaat.

Ik heb je niet voor niets verzocht (in de DM die je me zond) onze Quickstart te hanteren. Zo jammer dat je dat dan toch niet doet. Je had op z'n minst kunnen laten zien wat je dan precies geprobeerd had, welke foutmeldingen (if any) je kreeg etc.

Daarbij verwachten we dat je relevante(!) code post, geen dump van 96 regels code (liefst gewoon een simpele, "uitgeklede", testcase). Ook verwachten we dat je alles ontdoet van merknamen, domeinnamen etc (zie spam).

Stoelpoot schreef op vrijdag 4 oktober 2019 @ 13:21:
In principe wordt alles in HTML naast elkaar gerenderd, tenzij daar geen ruimte voor is.

Helemaal niet; er is een verschil tussen inline elementen en block elementen

[ Voor 29% gewijzigd door RobIII op 04-10-2019 13:29 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Vraag

Alle reacties