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, …
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 …
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 …
In deze handleiding staan een aantal voorbeelden van grafieken met gebruik van de h5chart bibliotheek. Wat heb je nodig? 1) h5chart Thermometer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |
Digitale meter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<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> |
LED
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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> |