My objective is printing 10cm x 6.5cm labels for products. I have a Zebra printer for printing labels. I was using Fast-reports for Printing labels by using handheld. Since fast-reports is only for Net Framework and not for Net CF, I was using sockets to handle data between handheld and pc.
Desktop applications hard to make stable for my knowledge of c#. I am a PHP dev. so I thought I can create labels with HTML & CSS since barcodes can also done with php.
The reason I am asking this question because I don't know how to send html page to printer and What sizes should I use for 10cm x 6.5cm with pixels for best quality printing.
Might be a little late for a response but I was facing the exact same problem back in the day and to accomplish what you describe I approached in a weird way that eventually worked. The steps that I describe don't affect the UI but it renders your HTML without the user noticing.
Render the HTML on a Webview that won't be visible to the user and set a WebViewClientCallback that will be called as soon that your WebViewRenders your html.
var webview = new Android.Webkit.WebView(Common.Instance);
webview.Layout(0, 0, widthOfHTML, heightOfHtml);
webview.Settings.LoadWithOverviewMode = true;
webview.Settings.UseWideViewPort = true;
webview.LoadDataWithBaseURL("file:///android_asset/", template, "text/HTML", "UTF-8", null);
webview.SetWebViewClient(new WebViewClientCallback());
In you webviewClient callback override the OnPageFinished method that will
public class WebViewClientCallback : WebViewClient
{
public override async void OnPageFinished(WebView myWebview, string url)
{
// Render webview to a bitmap
var bitmap = Bitmap.CreateBitmap(myWebview.Width, myWebview.Height + 50, Bitmap.Config.Argb8888);
// Code to print bitmap
}
}
You will need to set up a #media print { YOUR CSS STYLES } after you get that set the way you want it to look when printed. Make sure to convert your cm to one of these as well pt, px, em or rem. You can then add a bit of javascript to a button to make it open in print view if you want otherwise you would just right-click on the html page and tell it to print. Using the javascript something like this:
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
Related
For a project I need to load a pdf file onto a div. On clicking a button a canvas will be opened where the user will draw his signature and then on clicking the add button present in the canvas, the user should be able to place the canvas signature as an image on to the pdf. At last on clicking the final button the image should get merged onto the pdf.
I did the above task in the following way:
Converted pdf into series of images using GhostScript.
Loaded the converted images onto a div.
On clicking the button a canvas will be opened and the user will sign in it and on clicking the add button present in the canvas, the user will be able to place the image onto the image of pages loaded in the div.
I obtain the page Id which is the page number and the signature image placed coordinate using e.clientX and e.clientY.
Then I pass all those 3 values to a php script which uses fpdf and fpdi to merge the image onto the pdf.
I'm not able to place the image properly because e.clientX and e.clientY makes use of pixel as units where as fpdf uses mm as units. I'm trying to sort out that.
Is there any other way to do this in a simpler way. i.e., directly loading the pdf onto the div and merging the signature instead of what I've explained above.
You may try Firefox's PDF.js, which you can make use of, in your project. A sample code would be:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
There are Javascript-Libraries like Mozillas pdf.js that render PDF-Files directly in the browser into a canvas. That might be a possibility to circumvent the image-rendering process. But as far as I know those libraries have problems with CMYK-PDFs. Therefore the safe way would be to do the image rendering.
As for embedding the signature into the pdf I can't see any other way then the one described by you. The aforementioned libraries all are only displaying the PDF-file so they can not write into the PDF.
Hope that helps
You can look at Applidok PDF service, which allow to have signature area, so that form user will have the chance to either upload signature image, or to draw it on a canvas, so that it get merged on his custom PDF document generated at end.
An example is online at http://pipnee.com/P398D433C .
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
In my responsive WordPress theme using Twitter Bootstrap, I'm trying to use a technique similar to CSS Conditional loading but relying on PHP instead of Javascript minimize from so many requests loading.
What I'd like to do is use PHP to detect the :after pseudo element content property to see which element is loading based upon the media query/viewport size of the browser.
Here's example CSS:
body:after {
display: none;
/* Default */
content: "A";
}
#media (min-width: 35em) {
body:after {
content: "B";
}
}
To be very specific, if PHP can detect that content: "A" is active, it will load custom_mobile_content() hook which renders mobile content. If it detects content: "B", it will load custom_desktop_content() hook which renders more desktop content.
I tried using the javascript version but it requires I put a large block of formatted HTML into a javascript variable and upon rendering of the page there's a huge block of text that's inactive and unused on the page contained within the javascript. PHP seems to be a better fit.
Is there code which can produce this easily?
EDIT: It appears that I'd have to pass a JS variable or function to PHP in order for this to work, and I suppose that's pretty complicated.
Here's the javascript I'm trying to work with:
$(function() {
var currentSize = "A";
$(window).resize(function() {
var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
/* Ridiculous thing to deal with inconsistent returning of
value from query. Some browsers have quotes some don't */
size = size.replace(/"/g, "");
size = size.replace(/'/g, "");
if (size != currentSize) {
if (size == 'B') {
$(".content").load('<?php custom_hook(); ?>');
currentSize = 'B';
}
}
}).resize();
}
I've included the above code in the WordPress page itself because it doesn't need to be cached in a file. It is only used once and on this page. However, the problem with this is that the custom_hook() code is rendered on the page and that hook includes a bunch of markup. If the javascript determines that I'm using A, all that markup is on the page in the source code for no reason. I want to find a way to prevent the custom hook from rendering UNLESS it's being used in B. Hope that makes sense.
At the moment there's no reliable way to detect pseudo-elements, even in JavaScript. They have no CSS Object Model (CSSOM). PHP can't help you in this situation either because it acts only server-side.
For an alternate workflow, you can use JavaScript to find out which media query is currently active. Based on this you can load other resources if necessary.
See this article on MDN for details on how to work with media queries from JavaScript.
hi all my chart is exporting fine with highcharts i m getting the chart for my php project
but the problem is
that i am looking to import html content or the whole page along with the chart not just the chart
is it possible to do ??
can any one help me
or show here is a sample fiddle http://jsfiddle.net/YBXdq/
i need to export the text below the chart has well
There are so many direct and indirect way to achieve this
Use HTML Canvas : http://html2canvas.hertzen.com/
Using wkhtmltoimage
Example
exec('wkhtmltoimage --quality 50 http://www.bbc.com bbc.jpg');
Using wkhtmltopdf + ImageMagic
-- Convert the web page to pdf using wkhtmltopdf
-- Convert pdf to jpg using ImageMagic
Example
exec("convert a.pdf a.jpg");
Use PHP imagegrabwindow and imagegrabscreen
Example
$browser = new COM("InternetExplorer.Application");
$handle = $browser->HWND;
$browser->Visible = true;
$browser->Navigate("http://localhost");
/* Still working? */
while ($browser->Busy) {
com_message_pump(4000);
}
$im = imagegrabwindow($handle, 0);
$browser->Quit();
header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);
Advance Examples
-- Also See Get Website Screenshots Using PHP
For Possible Issues : Getting imagegrabscreen to work
use Webshort and call it from php using exec if you have python installed
Example
exec("python webshot.py https://example.com/webshot/php example.png");
Download and use Website Thumbnail Generator
Example
webthumb.php?url=http://www.google.com&x=150&y=150
Use boxcutter
Example
exec('boxcutter -f image.png');
Capture Screenshots in PHP with GrabzIt
Example
$grabzIt = new GrabzItClient("APPLICATION KEY", "APPLICATION SECRET");
$id = $grabzIt->TakePicture("http://www.google.com", "http://www.example.com/GrabzItHandler.php");
using wimg.ca
Example with this current page
http://wimg.ca/https://stackoverflow.com/questions/10328457/how-to-export-the-whole-page-or-html-content-with-highcharts-not-just-the-chart/10330701#10330701
TimThumb – PHP Image Resizer
Example
timthumb.php?src=http://www.google.com/&webshot=1
I think have given more than enough example
You can try to print the page , or make a pdf using php file functions to get the desired html content .
or you can try the method told by baba to get the image :)
i found a simple workaround for exporting charts (printing)
and
i didn't use any plugin just little plain old css and some javascript
which in my case is
i wanted to print the chart with some specific html content of the page
or in my case i wanted to remove header , footer and left menu
i dint wanted to show buttons or unecessary content
and just show the page content , description table and chart
so here is i how i achieved it.
> CSS :-
<style type="text/css">
#media print{
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body{ background-color:#FFFFFF; background-image:none; color:#000000 }
.navimainbg{ display:none;}
.printhide{ display:none;}
.usercontent-footer{ display:none;}
.linkBTN{ display:none;}
.userheader{ display:none;}
.user-profile-left{ display:none;}
#userbgcontent{ width:100%;}
}
</style>
We are focussing on the print css here which we implied when the page is printed
acess the divs or portions of the page which you dont want ot be printed via their class or id depending upon your usage
for example
i didnt wanted to display the button
.linkBTN{ display:none;}
which can be simply called via javascript.
Javascript :->
<script type="text/javascript">
function printpage()
{
window.print()
}
<script type="text/javascript">
we can invoke the print function to print the page minus elements we dont want to print with the page via click of a button by calling function in my case "printpage" as you can
see this button will also not display while printing as printhide class display is set to none while priting
<input title="Print a Printer Friendly Page" class ="printhide" type="button" value="Print this page" onclick="printpage()">
isnt is it a simple way to print chart other than highcharts printing if you want to print more
only con is that sometime the image will slide down when you want to show it along with some conetent due to lack of size to render an image . it will shift to next page . other than its tested working .
I need to get the window height and width of the browser using ATK4, the lightweight php framework with jquery
The javascript to get this would be
$(window).height();
$(window).width();
As agiletoolkit integrates with jquery, i think it should be possible to get it with something like
$height=$p->js()->univ()->_selectorWindow()->height();
but this doesnt work, instead when i pass the $height variable to be used, in the HTML source i get the following .
'height':$(window).univ().height(),'width':$(window).univ().width()
and it doesnt display the element at all
I want to be able to call jqplot to set the width of a graph to the full width of the users browser on a particular page. To do this, i need to pass a parameter which is width:NNN where NNN is the number of pixels wide. As far as i know, jqplot doesnt support a parameter as a percentage so i cant say width:100%. Also, if i set a div on the page and add the graph, it also ignores the size of the div and creates a small graph 400 x 300 pixels only.
I created a plugin to use jqplot from atk4 but this is one of the issues I still need to resolve. I can pass a height and width as parameters without issue but i want it to default to the full screen size if no parameters are specified.
Can anyone suggest the right syntax for getting these values ? TIA.
what you should understand is that "$p->js()->_selectorWindow()->height();" will actually be translated to "$(window).height();" -- but you can get width of window ONLY at client side.
so, if you want to get height of the window in your code, you can do that only by using ajax request, where actual heigh is sent back from the frontend.
please, rephrase your question so that it's clear what you need height for so I can suggest best way of doing that.
example of how to get backend and frontend interlinked:
paste this in page/test.php and open up http://example/test to see in action
class page_test extends Page {
function init(){
parent::init();
$b=$this->add("Button");
$b->set("Get Width");
$b->js("click")->univ()->ajaxec($this->api->getDestinationURL(), array("width" => $this->js(true)->_selectorWindow()->width()));
$v=$this->add("View_HtmlElement")->setElement("div")->set("Click button to get width of the window");
if ($w = $_POST["width"]){
$v->js(null, $v->js()->html("Width: " . $w))->univ()->alert("Width: " . $w)->execute();
}
}
}