IWCanvas - Printable Version

IWCanvas - Printable Version

+- Atozed Forums (https://www.atozed.com/forums)
+-- Forum: Atozed Software (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

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