Atozed Forums

Full Version: IWCanvas
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to implement some grafic-objects in my IntraWeb-Application
Last year you announced a IWCanvas component in V14 In my distribution of V14.2.7 I am missing this
 
– using this it will be perfect for me ( - I made some handcrafted examples - )
 
But I could not place it in the <Body>-part of the IWForm (extra code I can place in IWForm.JavaScript, but this appears out of HTML-<Body>, but it is usable also)
 
For me IWCanvas only needs to have the following the following properties:
Name:String
FiendlyName:String
Height:String
Width:String
ContextName:String
JavaScript: TStringList
If it is possible to place it in a IWRegion we can use this to define
Left
Top
 
 
IWCanvas.RenderHTML should create
 
<canvas id="RainbowStrokeStyleSample1" width=320px height=120px> </canvas>
<script> //JavaScript
  var context = document.getElementById('RainbowStrokeStyleSample1').getContext('2d');
  // 1. set strokeStyle to a linear gradient value
  var rainbowGradient = context.createLinearGradient (0, 60, 320, 60);
  rainbowGradient.addColorStop (0,    'red');
  rainbowGradient.addColorStop (0.25, 'yellow');
  rainbowGradient.addColorStop (0.5,  'green');
  rainbowGradient.addColorStop (0.75, 'blue');
  rainbowGradient.addColorStop (1,    'violet');
  context.strokeStyle = rainbowGradient;
  // 2. draw a kind of half cirlce on the left           
  context.beginPath();
  context.moveTo (60, 10);
  context.lineTo (60, 110);
  context.bezierCurveTo (0, 110, 0, 10, 60, 10);
  context.stroke();
  context.closePath();
  // 3. draw a rectangle on the right top
  context.strokeRect (80, 10, 230, 30);
  // 4. set the text font and write 'Hello!' on the right bottom of the canvas
  context.font = '60pt sans-serif';
  context.strokeText ('Hello!', 80, 110); 
</script>
 
Currently I need no Events for IWCanvas – but if events are inherited it can be useful too
 
I think it should not be not very complicated for you to implement IWCanvas in IntraWEB.V14
 
Please give me feedback about this proposal to enable me to plan my next steps
  • If you need some tester – I am willing to do this job
  •  
Or do you have an idea to solve this in an alternative way ?
 
Thankyou in advance
Hi UdoBausch, you can use template do to this, is very easy. I use graphic very similar to you.

Code:
var pieTicket = document.getElementById("pieChart-ticket").getContext('2d');
var myPieTicket = new Chart(pieTicket, {
      type: 'doughnut',
     data: {
etc...
Quote:Thankyou for this tipp - it seems to go in the right direction.
But I have a question:
how do you create pieChart-ticket in HTML-<Body>
- or do you use an other existing IW-Object ?

Yes, i create in body.
Code:
<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
   <div class="wrapper">
etc....
   </div>

   <!-- Placed at the end of the document so the pages load faster -->
   <script>
     var pieTicket = document.getElementById("pieChart-ticket").getContext('2d');
     var myPieTicket = new Chart(pieTicket, {
       type: 'doughnut',
       data: {

etc...
   </script>
 </body>
</html>
Perhaps the question is to easy - (but not for me)
How do you create "pieChart-ticket" ?
(05-28-2018, 08:01 PM)UdoBausch Wrote: [ -> ]Perhaps the question is to easy - (but not for me)
How do you create "pieChart-ticket" ?

Sorry, i forget the html part:
Code:
<hr class="divider">
<p class="text-center"><strong>Prioridade</strong></p>
<div class="box-body">
 <div class="row">
   <div class="col-md-8">
     <div class="chart-responsive">
       <canvas id="pieChart-ticket" height="160" width="208"></canvas>
     </div>
     <!-- ./chart-responsive -->
   </div>
   <!-- /.col -->