Tag: voorbeeld

CSS – Bar grafiek

Ik had het idee om een “dynamische” grafische Grafiek (Bar) te gebruiken met maar liefst 1 bestand om in te laden, die tevens compatibel is met alle browsers en mobiele apparaten, en dit te gebruiken op een Arduino Ethernet Shield,…

Lees meer ›

Getagd met Bar, CSS, Grafieken, voorbeeld

Sketchup – Een render maken met Kerkythea

In dit voorbeeld laat ik zien hoe je een simpele render kan maken van een Sketchup model in Kerkythea. Wat heb je nodig? 1) Sketchup tekenprogramma. 2) Sketchup Kerkythea plugin. 3) Kerkythea renderer. Aan de slag 1) In google sketchup…

Lees meer ›

Getagd met informatie, Kerkythea, Render, renderer, Sketchup, voorbeeld

Website – 3D STL viewer – Thingiview (java)

Thingiview Met de thingiview kan je SLT objecten in 3D laten weergeven in een webbrowser doormiddel van Java (Tree.js), zo kun e het model bekijken. Ps. De webbroweser moet wel OpenGL ondersteunen! Informatie (ENG) A javascript (using Canvas and WebGL…

Lees meer ›

Getagd met 3D, object, STL, Thingiview, voorbeeld, webbrowser

Javascript – h5chart voorbeelden van grafieken

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