Java Script Archieven - Pagina 2 van 2 - DomoticX Knowledge Center

Javascript – h5chart voorbeelden van grafieken

By Sebastiaan Posted on 2015-01-11 Geplaatst in Grafieken, Java Script

In deze handleiding staan een aantal voorbeelden van grafieken met gebruik van de h5chart bibliotheek. Wat heb je nodig? 1) h5chart Thermometer

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thermometer voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-thermometer.js"></SCRIPT>
</head>

<canvas id="c" width="100px" height="160px" style="border: 1 px solid blue;"></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();
var l = new Thermometer();
    
l.set( {
    left :          5,
    top  :          5,
    width:          90,
    height:         150,
    min  :          10,
    max  :          25,
    intervals:      10,
    current:        19,
    uid:            getCanvasObjectUid("c"),
    animate:        true
    });
    
l.setLabelStyle({
    mask :          function (val){ return val;} ,
    font :          '11px Arial',
    color:          'grey'
});
    
l.setCurrentStyle({
    mask :          function (val){ return val + " C";} ,
    font :          'bold 14px Arial',
    color:          'grey'
});
    
l.draw("c");
</script>
</html>

<html>

<title>Thermometer voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l = new Thermometer();

l.set( {

left : 5,

top : 5,

width: 90,

height: 150,

min : 10,

max : 25,

intervals: 10,

current: 19,

uid: getCanvasObjectUid("c"),

animate: true

});

l.setLabelStyle({

mask : function (val){ return val;} ,

font : '11px Arial',

color: 'grey'

});

l.setCurrentStyle({

mask : function (val){ return val + " C";} ,

font : 'bold 14px Arial',

color: 'grey'

});

l.draw("c");

</script>

</html>

Digitale meter

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digitale meter voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-digital.js"></SCRIPT>
</head>

<canvas id="c" width="150px" height="50px" style="border: 1 px solid blue;" ></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();

var l=new DigitalMeter();
    
    l.set( {
    left :          0,
    top  :          0,
    width:          150,
    height:         50,
    digits:         4,
    decimals:       1,
    current:        25.3,
    signed:         true,
    background:     true,
    animate:        true,
    uid:            getCanvasObjectUid("c"),
    animateCounter: 20  
});

// Getallen tot 10 weergeven als ROOD = #FA0000
// Knipperen (paar keer) = 'blink : true'
l.serie.add({value:10,color:"#FA0000",blink : true});
// Getallen tot 20 weergeven als GEEL = #F0F000
l.serie.add({value:20,color:"#F0F000"});
// Getallen tot 20 weergeven als GROEN = #00FA00
l.serie.add({value:30,color:"#00FA00"});
    
l.draw("c");
</script>
</html>

<html>

<title>Digitale meter voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l=new DigitalMeter();

l.set( {

left : 0,

top : 0,

width: 150,

height: 50,

digits: 4,

decimals: 1,

current: 25.3,

signed: true,

background: true,

animate: true,

uid: getCanvasObjectUid("c"),

animateCounter: 20

});

// Getallen tot 10 weergeven als ROOD = #FA0000

// Knipperen (paar keer) = 'blink : true'

l.serie.add({value:10,color:"#FA0000",blink : true});

// Getallen tot 20 weergeven als GEEL = #F0F000

l.serie.add({value:20,color:"#F0F000"});

// Getallen tot 20 weergeven als GROEN = #00FA00

l.serie.add({value:30,color:"#00FA00"});

l.draw("c");

</script>

</html>

LED

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LED voorbeeld</title>
<head>
<!-- Inladen van 'Core' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-graph.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-common-object.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-core.js"></SCRIPT>
<!-- Inladen van 'Chart' bibliotheken -->
<SCRIPT LANGUAGE="JavaScript" SRC="h5-chart-signal.js"></SCRIPT>
</head>

<canvas id="c" width="40px" height="40px" style="border: 1 px solid blue;" ></canvas>

<script>
var canvas = document.getElementById("c");
canvas.initRegionManager();

var l=new Signal();
    
l.set( {
    left :          5,
    top  :          5,
    width:          30,
    height:         30,
    orientation:    'horizontal',
    single:         false,
    current:        20,
    style:          '3D',
    animate:        true,
    uid:            getCanvasObjectUid("c"),
    animateCounter: 5});
    
l.serie.add({value:100,color:"#800000"});
//l.serie.add({value:20,color:"#808000",blink : true});
//l.serie.add({value:30,color:"#008000"});
//l.serie.add({value:40,color:"#008080"});

l.setTooltipStyle({
    mask :          function (val){ return "Current value: " + val;} ,
    font :          '14px Arial',
    color:          'grey'
});
    
l.draw("c");
</script>
</html>

<html>

<title>LED voorbeeld</title>

<head>

</head>

var canvas = document.getElementById("c");

canvas.initRegionManager();

var l=new Signal();

l.set( {

left : 5,

top : 5,

width: 30,

height: 30,

orientation: 'horizontal',

single: false,

current: 20,

style: '3D',

animate: true,

uid: getCanvasObjectUid("c"),

animateCounter: 5});

l.serie.add({value:100,color:"#800000"});

//l.serie.add({value:20,color:"#808000",blink : true});

//l.serie.add({value:30,color:"#008000"});

//l.serie.add({value:40,color:"#008080"});

l.setTooltipStyle({

mask : function (val){ return "Current value: " + val;} ,

font : '14px Arial',

color: 'grey'

});

l.draw("c");

</script>

</html>

Getagd met Grafieken, h5chart, Javascript, voorbeeld

KAKU – Schakelen via internet met menu (PHP en Javascript)

By Sebastiaan Posted on 2015-01-08 Geplaatst in Java Script, Klik Aan Klik Uit

Ik heb hier een PHP script inelkaar gezet voor op je webserver, zodat je kan KAKU kan schakelen waar ook ter wereld via een PHP script. Het script is niets meer of minder dan een parameter doorgeefluik naar KAKUcli, alleen …

KAKU – Schakelen via internet met menu (PHP en Javascript) Read more »

Getagd met Internet, Javascript, KAKU, KlikAanKlikUit, Online, Schakelen

Javascript – voorloopnullen toevoegen aan een getal

By Sebastiaan Posted on 2014-12-29 Geplaatst in Java Script

Hieronder staat een stukje javascript om voorloopnullen voor een getal te plaatsen, zo kan een datum ‘2014-6-8’ eruit zien als ‘2014-06-08’ en een tijd ‘0:5:20′ als ’00:05:20′. Er is standaard geen functie in javascript om dit te doen, er zijn …

Javascript – voorloopnullen toevoegen aan een getal Read more »

Getagd met Javascript, voorloopnullen

amCharts gegevens uit PHP bestand laden

By Sebastiaan Posted on 2014-12-24 Geplaatst in Grafieken, Java Script

Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een GAUGE weergeeft. Wat heb je nodig?: 1) amCharts Ik heb het bestand “samples/angularGauge.html” uit de bibliotheek genomen als voorbeeld voor het …

amCharts gegevens uit PHP bestand laden Read more »

Getagd met amcharts, bestanden uitlezen, Javascript, PHP

Javascript variabelen gebruiken uit een PHP script

By Sebastiaan Posted on 2014-12-22 Geplaatst in Java Script

In dit voorbeeld laat ik zien hoe je met een Javascript variabelen uit een ander PHP script kan halen: Als voorbeeld nemen we dit PHP script ‘script.php’ met daarin 2 variabelen:

<?php
$tekst = "Hallo Wereld!";
$getal = 100;
?>

<?php

$tekst = "Hallo Wereld!";

$getal = 100;

Nu volgt het javascript dat de 2 …

Javascript variabelen gebruiken uit een PHP script Read more »

Getagd met Javascript, PHP, Uitlezen, variabelen

Javascript – CSV bestanden uitlezen

By Sebastiaan Posted on 2014-12-21 Geplaatst in Java Script

In dit voorbeeld laat ik zien hoe je een CSV bestand in variabelen kan omzetten met Javascript, de commentaarregels staan tussen het script:

<script type="text/javascript">

document.write('Kolom 1 / Kolom 2<br>');
loadCSV("data.csv");

function loadCSV(file) {
    var request;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else {
        // Code voor IE6, IE5
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    request.open('GET', file, false);
    request.send();
    parseCSV(request.responseText);
}

function parseCSV(data){
    // Vervang UNIX nieuwe lijn karakters.
    data = data.replace (/\r\n/g, "\n");
    // Vervang MAC nieuwe lijn karakters.
    data = data.replace (/\r/g, "\n");
    // Splijt data in rijen.
    var rows = data.split("\n");

    // Loop door alle rijen heen.
    for (var i = 0; i < rows.length; i++) {
        // Sla lege regels over.
        if (rows[i]) {
            // Splijt rij naar kolommen doormiddel van de onderbrekings karakter.
            var column = rows[i].split(";");

            // De kolom is nu een array.
            // Het 1e deel is de Datum.
            var datum = column[0];
            // Het 2e deel is een variabele (getal).
            var waarde = column[1];

            // Voeg het object toe aan de chartData array
            document.write(datum + ' / ' + waarde + '<br>');
        }
    }
}

</script>

document.write('Kolom 1 / Kolom 2<br>');

loadCSV("data.csv");

function loadCSV(file) {

var request;

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari

request = new XMLHttpRequest();

} else {

// Code voor IE6, IE5

request = new ActiveXObject('Microsoft.XMLHTTP');

}

request.open('GET', file, false);

request.send();

parseCSV(request.responseText);

}

function parseCSV(data){

// Vervang UNIX nieuwe lijn karakters.

data = data.replace (/\r\n/g, "\n");

// Vervang MAC nieuwe lijn karakters.

data = data.replace (/\r/g, "\n");

// Splijt data in rijen.

var rows = data.split("\n");

// Loop door alle rijen heen.

for (var i = 0; i < rows.length; i++) {

// Sla lege regels over.

if (rows[i]) {

// Splijt rij naar kolommen doormiddel van de onderbrekings karakter.

var column = rows[i].split(";");

// De kolom is nu een array.

// Het 1e deel is de Datum.

var datum = column[0];

// Het 2e deel is een variabele (getal).

var waarde = column[1];

// Voeg het object toe aan de chartData array

document.write(datum + ' / ' + waarde + '<br>');

}

</script>

Getagd met CSV, Javascript, Uitlezen

amCharts gegevens uit CSV bestand laden

By Sebastiaan Posted on 2014-12-19 Geplaatst in Grafieken, Java Script

Er staat een mooie handleiding bij amcharts op de website voor het uitlezen van de gefiekgegevens uit een CSV bestand, hier is mijn versie en ervaring: Wat heb je nodig?: 1) amCharts Ik heb het bestand “samples\_JSON_lineWithScrollAndZoom.html” uit de bibliotheek …

amCharts gegevens uit CSV bestand laden Read more »

Getagd met amcharts, bestanden uitlezen, CSV, Javascript

Bestanden downloaden met Javascript via PHP

By Sebastiaan Posted on 2014-12-07 Geplaatst in Java Script

Dit is een truucje om via een Javascript met het aanroepen van een PHP script toch bestanden te downloaden van externe bronnen!, daarom is dit script ook bedoelt om op/via een webserver te draaien.

<html>

<head>
<script src="jquery.js"></script>
<title>Java CORS voorbeeld</title>
</head>

<body>
 
<script>
$(document).ready(function(){
    var fileurl = 'http://www.website.nl';
    var filename = 'bestand.ext';
 
    //Voer het bestand 'download.php' uit en wacht totdat het klaar is met downloaden (jQuery/Ajax).
    $.ajax({
        async: false,
        type: 'GET',
        url: 'download.php?url=' + fileurl + '&filename='+ filename,
        success: function(data) {}
    });
});
</script>
 
</body>
</html>

<html>

<head>

<title>Java CORS voorbeeld</title>

</head>

<body>

$(document).ready(function(){

var fileurl = 'http://www.website.nl';

var filename = 'bestand.ext';

//Voer het bestand 'download.php' uit en wacht totdat het klaar is met downloaden (jQuery/Ajax).

$.ajax({

async: false,

type: 'GET',

url: 'download.php?url=' + fileurl + '&filename='+ filename,

success: function(data) {}

});

</script>

</body>

</html>

<?php
file_put_contents($_GET['filename'], file_get_contents($_GET['url']));
?>

<?php

file_put_contents($_GET['filename'], file_get_contents($_GET['url']));

Voorbeeld gebruik: http://mijnwebsite.nl/download.php?url=http://website.nl/bestand.xml&filename=bestand.xml

Getagd met Downloaden, Java, Javascript, PHP

Plugwise Smile P1 – Data uitlezen met scripts

By Sebastiaan Posted on 2014-12-07 Geplaatst in Java Script, PHP Script, Plugwise - Smile P1

Hieronder vind je een aantal scripts om de data uit de PlugWise Smile te halen, dit is een XML dump welke je kan uitlezen en de waarden in een variabele te stoppen. Info: Plugwise Smile P1 locatie data gegevens. Firmware …

Plugwise Smile P1 – Data uitlezen met scripts Read more »

Getagd met Data, Plugwise, Smile P1, Uitlezen

Categorie: Java Script