Drawing in Web Viewer

["... you mean these fans?"]

Hi, I need help with is in three areas.

 

1. How do I call the script to show this drawing in FileMaker's web viewer.

2. Based off of the FileMaker record, I need to auto enter the rows and columns ( attached 2 examples from W3School: I've manually entered the parameters for each rectangle, I need to auto enter them )

3. Provide a way to Print out the web viewer content by the user.

 

Any assistance here I would be grateful.

 

What

Edited October 29, 2018 by Lee Smith
changed font to default

[comment]

I don' t understand your question.

You say:

19 minutes ago, Mr. Ignoramus said:

Based off of the FileMaker record

but you don't show us the actual data that the record contains, and how that data translates to the expected drawing.

In general, you do not "auto-enter" anything into a web viewer; you either set up the web viewer to use a calculated Web Address (akin to an unstored calculation) or use the Set Web Viewer[] script step to point it to a URL.

 

---
P.S. Please use the default font for your posts here.

 

["... you mean these fans?"]

Comment,

I hopes this helps.

I've attached the "PressSheet" with the relavent data.  I know the field names so a general refernce is all that would be required for me.

If the picture is still confusing and does not make sense then I will have to find someone local and sit down with them and work through this html script directly.

Thank you.

 

[comment]

I am afraid you greatly overestimate my powers of conjecture. I am especially confused by seeing 4 rectangles in one example, and 5 in the other.

Perhaps it is simple, and all you need to do is use the Substitute() function to replace placeholders in the HTML/Javascript code with the values held in the record's fields.

 

 

Edited October 29, 2018 by comment

["... you mean these fans?"]

Comment,

Ok, thank you.

["... you mean these fans?"]

Comment,

One last question ...

Could you provide some suggestion how to display rows and columns ...

rows and columsn would be based on record date meaning one record rows could be 7 while column could 12 and another record rows could be 5 and columns could be 11 and so on.

... that would give me something like the following in a web view in this example ?? 

Thank you.

Edited October 29, 2018 by Mr. Ignoramus

[comment]

Sorry, I don't understand you at all. Try posing your question in terms of what you have (input) and what you want to have (output), and how the output should be derived from the input. At the moment, I see no connection between input of 7x12; 5x11 and output of the 4 rectangles shown.

 

[Lee Smith]

Mr. Ignoramus,

I'm pretty sure I sent you this guideline before Anatomy of a Good Post, if not, please take the time to read it now,  as it provides some really helpful information on how a post questions on the FM Forums.  

If you need more information on how to post questions, please send me a Private Message.

Thanks in advance for you cooperation.

Lee

["... you mean these fans?"]

Thank you everybody,

Since I do not know how to ask the question, I can not ask in the format you guys need, sorry.

So I posted what I could and tried to provide some example so that maybe someone could extrapolate my html example into actully inserting actual data from a filemake record into a web viewer.

Does it really matter ... all I am doing is drawing squares then upon further observation all I am doing is rows and columns.

I can find example in the W3School as I had provide the example html  ... but what I can not find is how to transpose filemaker date into FileMaker's webviewer inside html again from previous posted data.

I will continue and when I get the answer I will post the solution.

Thanks.

 

Edited October 29, 2018 by Mr. Ignoramus

[comment]

21 minutes ago, Mr. Ignoramus said:

inserting actual data from a filemake record into a web viewer

That is something I can answer. Have a look at the simple example attached.

 

DrawRectangle.fmp12

["... you mean these fans?"]

Comment,

Sorry for the delay ... thank you for this.

Questions ... is it possible to build into your "LET" example the ability to see two rows of 4, or ten rows of three based on the given size entered, would that be possible ??

If the above is possible, and if you could provide that example, I will have one more additional questions. But I will try and figure it out for myself first.  Only if the above questions is doable ?  And if I can not figure it out on my own I will post and ask for guidance.

Thank you.

[comment]

30 minutes ago, Mr. Ignoramus said:

to see two rows of 4, or ten rows of three based on the given size entered,

This is where you lost me. Do you mean that (for example) a size of less that 100 should produce one type of drawing, while a size of 100 or above should produce a completely different type of drawing? Sure it's possible. And if that's the only impact your data should have on the resulting drawing, then I would simply store the two images in container fields, and select the one to display using a calculation field.

 

Edited October 30, 2018 by comment

["... you mean these fans?"]

Comment,

In the printing industry, they work with what is called "stock" or "Press Sheet" and this stock can be differnt sizes.  So for example they could be using an 48" x 96" piece of stock and within that stock they cut out 3" x 5" index cards.

I have the calcuation that tells the customer how many 3 x 5 index cards fit inside a 48" x 96" stock.

What I am trying to accomplish is a way to give the customer a visual representation of how many 3" x 5" index cards fit inside of a 48" x  96" stock, for eample.

I have the calculation that tells me how many will fit inside the "Stock" ... lets just say 252 index cards and I've attached a pic for an example.  And if it is possible to pass into the "LET" statment how many objects to draw.  I have calculated the "28 Rows" and the "9 Columns"  .... and I am hoping that it will be possible to produce an image ( see attached ) for the customer to print out.  

The customer will pass this image layout to the press operator so the press operator knows how to set up the machine to make the "cuts" on the stock, what they call the "press sheet".

 

[comment]

I still don't see the entire picture here, so let me suggest three possible ways you could approach this:

1. If you have a fixed number of possible results, then (as I suggested earlier) just use a library of images prepared in advance;

2. You could use a custom function to generate the HTML code for the web viewer dynamically; basically, you would have a fixed "header" and a fixed "footer" and the function would only need to generate n lines of:

"ctx.fillRect(x, y, w, h);¶"

where the values of x, y, w and h would be calculated by the function based on the current iteration's position within the desired pattern;

3. Use Javascript in the web viewer code itself to generate the rectangles (based on initial data passed to the web viewer using the method shown in my earlier example). You can see something similar producing an array of arcs here.

 

 

[comment]

Well, this is certainly a lot of fun. Have a look at this simplified example of method #3. You could take this further by parameterizing the width and the height of the rectangles as well, and adjusting the spacing accordingly.

 

DrawRectanglesArray.fmp12

["... you mean these fans?"]

Comment,

Thank you, the draw rectangle array file is what I am looking for.  Yes

Would it be possible to add some control.  I tried to make some minor adjustment myself but I don't really understand the "LET" statement so I've provided a picture of additional fields that I would need to be include within the "LET" statement ... see attached

Again, Comment thank you.

 

I am having trouble understanding the "LET" statement ... 

Edited October 31, 2018 by Mr. Ignoramus

[comment]

4 hours ago, Mr. Ignoramus said:

I don't really understand the "LET" statement

The Let statement doesn't really do much here. The real work is done by the Javascript code embedded in the HTML markup. Then I use Substitute() to replace placeholders in the Javascript code with actual values taken from fields  in the current Filemaker record.

 

4 hours ago, Mr. Ignoramus said:

Would it be possible to add some control.

I am sure that anything you can think of can be added (as long as it can be formulated as a rule). However, I am going to stop here because:

(a) this has now turned from a Filemaker question into a problem in Javascript - and as such unsuitable for these forums;

(b) we have come to a point where the fun becomes work. 

["... you mean these fans?"]

Comment,

Thank you so much for your assistane.  

["... you mean these fans?"]

Hi,

I am back ...

I've got the solution working in my web browser with help from a javascript developer.  He didn't know anything about FileMaker.

Writing the additional javascript into the "Let" statement I have made some kind of an erorr.  I've attached the web browser showing what it should look like.  Gray and Red rectangles.  I've attached the html/javascript from the javascript developer and I've attached the FileMaker file where I've copied into the let statment and into the substitute function the variables needed but for some reason the FileMkaker ( Let statement ) is no producing what the web browser produces.  I've done something wrong but where ??

Any assistance here I would be grateful.

html_Test.html

 

DrawRectanglesArray.fmp12

Edited November 11, 2018 by Mr. Ignoramus

[comment]

I can tell you how I usually do this. I start with something like the following code in the web viewer:

"data:text/html,"
&
Substitute ( Table::HTML ;  
[ "$placeholderA" ; Table::SomeField ] ; 
[ "$placeholderB" ; Table::AnotherField ] ; 
[ "$placeholderC" ; Table::ThirdField ] 
)

Then I work on the HTML code in the HTML field, until I get it functioning the way I want. Once that is done, I open the Data Viewer and type =

Quote ( Table::HTML )

I copy the result and paste it to replace the Table::HTML part in the web viewer code.

 

 

Edited November 11, 2018 by comment

["... you mean these fans?"]

Comment,

Thank you I will continue working it ... 

["... you mean these fans?"]

Comment,

Based on your suggestion, I did that but to no avial.  Then I decided to replace the variables with a "2" in them with actual numbers and everything worked ??  It is as if the substitue function where I am setting the "$col2" and "row2" ... etc is being completely ignored ??

I can not see the issue/error especially since the "Gray" rectangles are working fine and those vules come from the 1st part of the "Substitue" function ... no issues with the gray rectangles.

What am I doing wrong in the "Substitue" function ... 

Thank you.

["... you mean these fans?"]

As I continue trouble shooting ... I replaced the variables with the 2's ( $col2, $row2 etc ... ) with a "z", so ... "$colz" and "$rowz" and the rectangles did not draw ... ?? strange.

So I don't really know what I am doing wrong within the "Substitue" function.  I've looked it up and looks like I've followed the example correctly, maybe not ??

Any guidance I would be grateful.

Thank you.

Edited November 11, 2018 by Mr. Ignoramus

["... you mean these fans?"]

So ... is it the way I am naming the variable within the substitute function ?? ... I replaced the "$col2" for example with "$abc" and it worked.

I am trying to keep order within the steps, so "$col2" represents the second group of objects.  "$abc" though works, does not represent anything and only introduces confusing inside the substitue function.

So is it that the variable "$col" and "$col2" are similar ... and that is why it is not working correctly within the substitue function ??

Thank you.

[comment]

I suspect you are confusing variables with placeholders. Use placeholders in your code in places where you want insert values taken from the fields in the Filemaker record. The placeholder strings can be anything, as long as they are unique. I used "$placeholderA" in my example, but it could just as well be "###WIDTH###" or "@Length" or whatever.

And again, make sure you are replacing values, not variable names. If your Javascript defines:

var row = 10;

and the value 10 should come from a Filemaker field, then you should write it as (for example):

var row = %row%;

 

This way, if the Row field contains 15 and you do:

Substitute ( Table::HTML ; "%row%" ; Table::Row )

you will end up with:

var row = 15;

as the code executed by your web viewer.

 

 

Edited November 12, 2018 by comment

["... you mean these fans?"]

Hi, and thank you for the assistance .... ended up getting some additional assistance with a javascript developer for the javascript part ... but here is the completed script.

Let( [

html =

"<html>¶

<style>¶

p  {¶

    font-size: 75%;¶

}¶

</style>¶

<body>¶

  <canvas id='canvas' width=$cWidth height=$cHeight style='border:1px solid #c3c3c3;'/>

  </canvas>¶

  <script>¶

    var canvas = document.getElementById('canvas');¶

    var ctx = canvas.getContext('2d');¶

    ctx.lineWidth = 1;¶

     /*1st Rectangle*/

    ctx.fillStyle = 'silver';¶

    var k=0;¶

    for (var i = 0; i < $row; i++) {¶

        for (var j = 0; j < $col; j++) {¶

            var x = $ltx + j * $fsW;¶

            var y = $lty + i * $fsL;¶

            if(k<$bestOut) ctx.strokeRect(x, y, $fsW-$cSpacing, $fsL-$rSpacing);¶

            k++;¶

        }¶

    }¶

   /*2nd Rectangle*/

    ctx.fillStyle = 'red';¶

    var m = 0;¶

    for (var k = 0; k < $cl2; k++) {¶

        for (var l = 0; l < $rw2; l++) {¶

            var o = $ltx+($fw2*k) ¶

            var p = ($lty+(l*$fl2))+($fw2*$row)¶

            ctx.strokeRect(o, p, $fw2-$rSpacing, $fl2-$cSpacing);¶

        }¶

    }¶

    /*1st Yellow box*/

    ctx.fillStyle = 'yellow';¶

    ctx.fillRect(0, ($cHeight/2)-10, 40, 20);¶

    ctx.fillStyle = 'black';¶

    ctx.font='10px Verdana';¶

    ctx.fillText($psWidth, 5,($cHeight/2)+3);¶

     /*2nd Yellow box*/

    ctx.fillStyle = 'yellow';¶

    ctx.fillRect(($cWidth/2)-20, $cHeight-20, 40, 20);¶

    ctx.fillStyle = 'black';¶

    ctx.font='10px Verdana';¶

    ctx.fillText($psLength, ($cWidth/2)-7, $cHeight-7);¶

 

    /*1st Flat Size*/

    ctx.font = '8px Verdana';¶

    ctx.fillText($psfsW,$ltx+($fsW/2)-7,$lty+10);¶

    /*2nd Flat Size*/

    ctx.font = '8px Verdana';¶

    ctx.fillText($psfsL,$ltx+3,$lty+($fsL/2));¶

  </script>¶

<p><strong>Note: </strong>$wvNotes</p>¶

<p><em><strong>Comments:</strong></em> $wvabcadd</p>¶

</body>¶

</html>"

] ;

Substitute ( html ; ["$col" ; Singles::PSWebVwer_Columns ] ; ["$row" ; Singles::PSWebVwer_Rows ] ; ["$cHeight" ; Singles::PSWebVwer_PressSheet_Width ] ; ["$cWidth" ; Singles::PSWebVwer_PressSheet_Length ] ; ["$bestOut" ; Singles::PSWebVwer_Best Out ] ; ["$fsW" ; Singles::PSWebVwer_Finish_Size_Width ] ; ["$fsL" ; Singles::PSWebVwer_Finish_Size_Length ] ; ["$rSpacing" ; Singles::PSWebVwer_Row_Spacing ] ; ["$cSpacing" ; Singles::PSWebVwer_Column Spacing ] ; ["$cl2" ; Singles::PSWebVwer_Columns_2 ] ; ["$rw2" ; Singles::PSWebVwer_Rows_2 ] ; ["$fw2" ; Singles::PSWebVwer_Finish_Size_Width_2 ] ; ["$fl2" ; Singles::PSWebVwer_Finish_Size_Length_2 ] ; ["$ltx" ; Singles::PSWebVwer_LeftTop_x ] ; ["$lty" ; Singles::PSWebVwer_LeftTop_y ] ; ["$wvNotes" ; Singles::PSWebVwer_Notes ] ; ["$wvabcadd" ; Singles::PSWebVwer_NotesAdd ] ; ["$psWidth" ; Singles::PressSheet Size W ] ; ["$psLength" ; Singles::PressSheet Size L ] ; ["$psfsW" ; Singles::PressFlat Size W ] ; ["$psfsL" ; Singles::PressFlat Size L ])

)

 

Edited November 24, 2018 by Mr. Ignoramus

["... you mean these fans?"]

Any Additional Assistance ?

I have an additional issue that showed itself when I added text on to the canvas .. it is blurry.  Here is the fix in javascript.  

I don't want to mess up the "Let" statement being everything is working perfectly ... but I would like to fix the blurry text and if I were to carve into the the "LET" statement the parts of the javascript to the canvas id/element, is there any assistance were to place/add into the "canvas" element within my "LET" statement ... I don't believe I need every step ?

********************BEGIN Fix Blurry Text - Javascript**************************

//get DPI

let dpi = window.devicePixelRatio;

//get canvas

let canvas = document.getElementById('myCanvas');

//get context

let ctx = canvas.getContext('2d');

function fix_dpi() {

//get CSS height

//the + prefix casts it to an integer

//the slice method gets rid of "px"

let style_height = +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2);

//get CSS width

let style_width = +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2);

//scale the canvas

canvas.setAttribute('height', style_height * dpi);

canvas.setAttribute('width', style_width * dpi);

}

********************END Fix Blurry Text - Javascript**************************

Edited November 24, 2018 by Mr. Ignoramus