Google Maps Dynamic Marker Icons - dynamic

I am well aware that google offers as part of their chart api dynamic marker icons for google maps here:
https://developers.google.com/chart/image/docs/gallery/dynamic_icons
There is just only one small problem, the whole API seems to be deprecated. Plus I would really like to have more variety because not all of the icons offer the same flexibility.
So I found this webpage:
http://mapicons.nicolasmollet.com/numbers-letters/numbers/?style=classic
The icons look nice but they are not dynamic and well my client doesn't seem to like em. So is there a differenct webpage or some other sort of service which offers neat dynamic icons?
Doesn't have to be for google maps. Can be for any purpose just be suitable for maps as well :-)
Thank you in advance!

OK, I did a project some time ago that does exactly this but its independent of google maps, even though I used it to create dynamic map markers. Here is the whole php function:
<?php
function createImage($number, $color) {
$blank = "/var/www/rbc/dashboard/images/".$color."-0.png";
//$image = #imagecreatefrompng($blank);
$image = LoadPNG($blank);
// pick color for the text
$fontcolor = imagecolorallocate($image, 255, 255, 255);
$font = 2;
$fontsize = 8;
$width = imagefontwidth($font) * strlen($number) ;
$height = imagefontheight($font) ;
$x = (imagesx($image) - $width) / 2;
$y = 5;
//white background
$backgroundColor = imagecolorallocate ($image, 255, 255, 255);
//white text
$textColor = imagecolorallocate($image, 255, 255, 255);
// preserves the transparency
imagesavealpha($image, true);
imagealphablending($image, false);
imagestring($image, $font, $x, $y, $number, $textColor);
// tell the browser that the content is an image
header('Content-type: image/png');
// output image to the browser
imagepng($image);
// delete the image resource
imagedestroy($image);
}
function LoadPNG($imgname) {
/* Attempt to open */
$im = imagecreatefrompng($imgname);
/* See if it failed */
if(!$im) {
/* Create a blank image */
$im = imagecreatetruecolor(150, 30);
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an error message */
imagestring($im, 1, 5, 5, 'Error loading ' . $imgname, $tc);
}
return $im;
}
if(!isset($_GET['color'])) {
$_GET['color'] = "blue";
}
if(!isset($_GET['number'])) {
$_GET['number'] = "99";
}
createImage($_GET['number'], $_GET['color']);
?>
which you show with <img src="image.php?color=red&number=2" />
HTH

Related

TweenJS rect command "grow from center"

new to createjs here:
Created this fiddle: example. I would like the rect to grow from the center and not from the top left corner. I couldn't find any help, I don't know what to search for.
Code:
const PAGE_WIDTH = 150,
PAGE_HEIGHT = 75;
var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
var page = new createjs.Shape();
page.regX = PAGE_WIDTH/2;
page.regY = PAGE_HEIGHT/2;
page.x = 50;
page.y = 50;
stage.addChild(page);
var pageCommand = page.graphics
.beginFill('red')
.drawRect(0, 0, 1, 1).command;
createjs.Tween.get(pageCommand)
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT}, 700, createjs.Ease.elasticOut)
function tick() {
stage.update();
}
Thanks.
The best way is to change the registration point of your graphics so it grows from the center.
Your code:
.drawRect(0, 0, 1, 1).command;
.to({w:PAGE_WIDTH, h: PAGE_HEIGHT})
Instead:
.drawRect(-1.-1, 2, 2);
.to({x:-PAGE_WIDTH/2, y:-PAGE_WIDTH/2, w:PAGE_WIDTH, h: PAGE_HEIGHT})
Fiddle: http://jsfiddle.net/1kjkqo2v/
[edit: I said 2 options initially, but the second (using regX and regY) wouldn't work well, since you have to tween that value as well as your size changes.]

fix footer image in tcpdf

$path = Yii::app()->basePath;
require_once($path . '/extensions/tcpdf/tcpdf.php');
$pdf = new TCPDF();
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(true);
$pdf->SetAutoPageBreak(TRUE, 0);
$pdf->AddPage();
$pdf->SetLineWidth(0.1);
$pdf->SetFont('times', '', 10);
$pdf->SetMargins(20, 20, 20, true);
$footer_image_file = Yii::app()->request->baseUrl.'/images/logo.jpg';
$content = '<div> $content </div>';
$pdf->writeHTML($content, true, false, true, false, '');
ob_end_clean();
$pdf->Output("Reports.pdf", "D");
I want to add image in fooder for every new pages.. please anyone help me...
Simply put the code displaying the image within the Footer() base method. This base method is called for any new page by either the AddPage() method and Close().
Important : The Footer method should not be called directly.
This method is supposed to be implemented in your class, so override it like this :
function Footer()
{
.... /* Put your code here (see a working example below) */
$logoX = 186; // 186mm. The logo will be displayed on the right side close to the border of the page
$logoFileName = "/images/myLogo.jpg";
$logoWidth = 15; // 15mm
$logo = $this->PageNo() . ' | '. $this->Image($logoFileName, $logoX, $this->GetY()+2, $logoWidth);
$this->SetX($this->w - $this->documentRightMargin - $logoWidth); // documentRightMargin = 18
$this->Cell(10,10, $logo, 0, 0, 'R');
}
I hope this helps and I've well understood your question.
function Footer()
{
.... /* Put your code here (see a working example below) */
$logoX = 40; //
$logoFileName = "/images/myLogo.jpg";
$logoWidth = 130; // 15mm
$logoY = 280;
$logo = $this->PageNo() . ' | '. $this->Image($logoFileName, $logoX, $logoY, $logoWidth);
$this->SetX($this->w - $this->documentRightMargin - $logoWidth); // documentRightMargin = 18
$this->Cell(10,10, $logo, 0, 0, 'C');
}
This codes are perfectly placed a image in the center of page footer.Thanks a lot pti_jul.:-)))))

fit a image on a background image with wideimage

is it possible to fit image onto a white background image using wideimage and in that way to show the image without deformations?.
Now I have this, this source merges a background image with an uploaded image, but a part of image loses
public function createThumb($pathimg, $img, $id) {
$paththumb = 'img/upload/thumbs/' . $img;
$imagen = WideImage::load($pathimg);
$width = $imagen->getWidth();
$height = $imagen->getHeight();
$newWidth = 427;
$newHeight = ($newWidth / $width) * $height;
$imagen->resize($newWidth, $newHeight, 'fill')->saveToFile($paththumb);
$img1 = WideImage::load(realpath($paththumb));
$watermark = WideImage::load(realpath('img/bg.jpg'));
$new = $img1->merge($watermark, 0, 0, 20);
$new->saveToFile($paththumb);
}

KineticJS won't draw a dashed line in Internet Explorer 10

Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.
Here's the code:
var element = document.getElementById('target'),
stage = new Kinetic.Stage({
container: element,
width: element.offsetWidth,
height: element.offsetHeight
}),
layer = new Kinetic.Layer();
layer.add(new Kinetic.Line({
points: [10, 10, 190, 190],
stroke: 'black',
strokeWidth: 1,
dashArray: [5, 4]
}));
stage.add(layer);
And you can see the behavior for yourself in here.
Fixed in IE-11 !
Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).
You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).
Code is taken from this SO post: dotted stroke in <canvas>
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
CP.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dx ? dy/dx : 1e15;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
if (dx<0) xStep = -xStep;
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
}
}
Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in
Lacrosse.
Short answer: Not supported.
Via a thread here, the creator of KineticJS addresses this issue:
"[T]he dashArray property now uses the browser-implemented dashArray
property of the canvas context, according to the w3c spec. Firefox is
a little behind at the moment."
If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.

Imagick - get a thumbnail for each page of a PDF file

I'm trying to get some information from pdf-files that i uploaded via move_uploaded_file().
I need thumbnails of each page to do some color analysis. further i need the width and height of each page in an actual unit of distance (not pixel).
is there a way to do the conversion from pdf to image in imagick not imagemagick. just because I'm using the imagick instace for the color analysis.
now this works for a single image file but not for a multipage pdf.
what to do know...?
/* Read the image */
$im = new Imagick($file);
/* Thumbnail the image */
$im->thumbnailImage(null, 200);
/* Overwrite it */
file_put_contents($file, $im);
/* Gather Info */
$width = $im->getImageWidth();
$height = $im->getImageHeight();
$ratio = $width / $height;
/* Calculate gray */
$pixel_count = 0;
$sum_gray = 0;
for ($row=0;$row<$height;$row++) {
for ($col=0;$col<$width;$col++) {
$pixel = $im->getImagePixelColor($col, $row);
$rgb = $pixel->getColor();
$this_gray = .299*$rgb['r'] + .587*$rgb['g'] + .114*$rgb['b'];
$sum_gray += $this_gray;
$pixel_count++;
}
}
$gray = (1-($sum_gray / $pixel_count) / 256)*100;
and if anybody knows how to get the height and width information, plaes let me know.
thanks for the help!