Atozed Forums
IWCanvas - Printable Version

+- Atozed Forums (https://www.atozed.com/forums)
+-- Forum: Atozed Software Products (https://www.atozed.com/forums/forum-1.html)
+--- Forum: IntraWeb (https://www.atozed.com/forums/forum-3.html)
+---- Forum: English (https://www.atozed.com/forums/forum-16.html)
+----- Forum: IntraWeb General Discussion (https://www.atozed.com/forums/forum-4.html)
+----- Thread: IWCanvas (/thread-284.html)



IWCanvas - UdoBausch - 05-28-2018

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


RE: IWCanvas - Jose Nilton Pace - 05-28-2018

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...



RE: IWCanvas - Jose Nilton Pace - 05-28-2018

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>



RE: IWCanvas - UdoBausch - 05-28-2018

Perhaps the question is to easy - (but not for me)
How do you create "pieChart-ticket" ?


RE: IWCanvas - Jose Nilton Pace - 05-28-2018

(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 -->