[Html] multiple <canvas> with images
i just dont understand why this is not working. (ive been working at my job like crazy for the past couple days so maybe thats why i cant figure it out)
Code:
<!DOCTYPE HTML>
<html>
<body>
<?php
for($n=0; $n<=1; $n++) {
echo '
<canvas id="myCanvas_'.$n.'" width="554" height="57" >
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var ctx_'.$n.' = document.getElementById("myCanvas_'.$n.'").getContext("2d");
var img_'.$n.' = new Image();
var News_BG = function(s) {
switch(s) {
case 0:return ctx_'.$n.'.drawImage(img_'.$n.', 0, 0, 70, 17, 21, 16, 70, 17);break;
case 1:return ctx_'.$n.'.drawImage(img_'.$n.', 0, 16, 70, 17, 21, 16, 70, 17);break;
case 2:return ctx_'.$n.'.drawImage(img_'.$n.', 0, 32, 70, 17, 21, 16, 70, 17);break;
case 3:return ctx_'.$n.'.drawImage(img_'.$n.', 0, 48, 70, 17, 21, 16, 70, 17);break;
}
}
img_'.$n.'.src = "./Images/News_BG.png";
img_'.$n.'.onload = function() {
News_BG('.$n.');
}
</script>';
}
?>
</body>
</html>
Re: [Html] multiple <canvas> with images
it's all wrong.. so messy.. you never ever use javascript like that, also that for will only print one canvas anyway.. and whatever you are trying to do, why not print those images on just one canvas anyway? And you also shouldn't return in that switch.. and damn, don't begin your folders names with a capital letter
Re: [Html] multiple <canvas> with images
all that is just test code so idc if its messy or not. as for javascript, i never really messed with it.
when i figure this out i need 4 separate canvases that each will output its own different image.
so far i have the 4 separate canvases all output what i want but all 4 canvas texts are on the last canvas
Re: [Html] multiple <canvas> with images
this is how I'd kinda do it
PHP Code:
<?php
for($n=0; $n<=1; $n++) {
echo '
<canvas class="canvas" id="myCanvas_'.$n.'" width="554" height="57" >
Your browser does not support the canvas element.
</canvas>';
?>
PHP Code:
<script type="text/javascript">
$(document).ready(function() {
var img = new Image();
img.src = './Images/News_BG.png';
img.onload = function() {
$.each($(".canvas"), function(n) {
var canvas = $(this)[0].getContext("2d");
switch (n) {
case 0:
canvas.drawImage(img, 0, 0, 70, 17, 21, 16, 70, 17);
break;
// and so on and so on
}
});
}
});
</script>
Re: [Html] multiple <canvas> with images
oo LOL never thought to use jquery HA
Re: [Html] multiple <canvas> with images
you simple never output javascript in php
Re: [Html] multiple <canvas> with images
this is the (sorta) working one i got so far. ill see about the jquery part in a bit
PHP Code:
<script type="text/javascript">
var ctx,
news,
News_BG,
News_Color;
news = new Image();
News_BG = function(s) {
switch(s) {
case 0:return ctx.drawImage(news, 0, 0, 70, 17, 21, 16, 70, 17);break;
case 1:return ctx.drawImage(news, 0, 16, 70, 17, 21, 16, 70, 17);break;
case 2:return ctx.drawImage(news, 0, 32, 70, 17, 21, 16, 70, 17);break;
case 3:return ctx.drawImage(news, 0, 48, 70, 17, 21, 16, 70, 17);break;
}
}
News_Color = function(c) {
switch(c) {
case 0:return ctx.fillStyle = '#6FBAEC';break;
case 1:return ctx.fillStyle = '#599535';break;
case 2:return ctx.fillStyle = '#8C6239';break;
case 3:return ctx.fillStyle = '#260D08';break;
}
}
news.src = "./Images/News_BG.png";
</script>
<?php
$Main->db->query("Select `type`, `date`, `title`, `content` FROM cms_news ORDER BY `date` DESC LIMIT 4", true);
for($N=0; $N<=3; $N++) {
$News = $Main->db->fetch_row();
$Date = new DateTime($News[1]);
?>
<script type="text/javascript">
ctx = document.getElementById("myCanvas_").getContext("2d");
news.onload = function() {
News_BG(<?php echo $News[0]; ?>);
}
// Start Date
ctx.fillStyle = 'white';
ctx.font = '11px Calibri';
ctx.textAlign = 'right';
ctx.textBaseline = 'top';
ctx.fillText("<?php echo $Date->format('d/m/Y'); ?>", 84, 33);
// End Date
// Start Title
News_Color(<?php echo $News[0]; ?>);
ctx.font = '19px Calibri';
ctx.textAlign = 'left';
ctx.fillText('<?php echo $News[2]; ?>', 109, 17);
// End Title
</script>
<div class="Content_Title">
<canvas id="myCanvas_" width="554" height="57" >
Your browser does not support the canvas element.
</canvas>
</div>
<div class="Content_Container">
<div class="Content_">
<?php echo $News[3]; ?>
</div>
</div>
<?php } ?>
Re: [Html] multiple <canvas> with images
my way works as well actually http://jsfiddle.net/wVt4F/
been strugling a bit with making the array work as arguments, but yeah
---------- Post added at 03:14 PM ---------- Previous post was at 03:04 PM ----------
and still, whatever you are trying to do, it's not good, the whole idea of using canvas as news something.. ok.. but the thing with php and javascript mixed.. it's a no-no, it'd be better to do all the php stuff separately and then encode it as a json object and then print it
Re: [Html] multiple <canvas> with images
thats what i figured after i made my last post above and made it into json:
PHP Code:
<?php
header('Content-type: application/json');
$Main->db->query("Select `type`, `date`, `title`, `content` FROM cms_news ORDER BY `date` DESC LIMIT 4", true);
$array = array( );
for($N=0; $N<=3; $N++) {
$News = $Main->db->fetch_row();
$Date = new DateTime($News[1]);
$array = array_merge($array, array( $N => array( 'type' => $News[0], 'date' => $Date->format('d/m/Y'), 'title' => $News[2], 'content' => $News[3] ) ));
}
echo json_encode($array);
?>
outputs:
Code:
[{"type":"1","date":"25\/05\/2011","title":"Server Update","content":"Testing to see if only outputs 4 and again changes to new date."},
{"type":"3","date":"24\/05\/2011","title":"Perma Banned","content":"THE FUCK WE JUST BANNED MetanL..."},
{"type":"2","date":"24\/05\/2011","title":"Maintanance","content":"Just testing to see if the actual news image changes and to see if time adjusts to new day."},
{"type":"1","date":"23\/05\/2011","title":"Test2","content":"Test News Background"}]
EDIT:
the reason why im messing with canvas and not just sticking to the old method is cause its a new age and why not go with new things that will someday become the new standards
Re: [Html] multiple <canvas> with images
also I feel like you are doing something seriously wrong with that query as well
this is how would my fetch all look
PHP Code:
$dataModel = new default_models_new();
$news = $dataModel ->fetchAll($dataModel ->select()->setIntegrityCheck(false)
->from($dataModel )
->where("status_new = 'active'")
->joinLeft("images_images_img", "modul_img = 'new' AND main_img = true AND idmodul_img = id_new")
->order('order_new DESC')
->order('id_new DESC')
->limit(4));
put aside Zend stuff and I'd look like this
Code:
SELECT "new_new_new".*, "images_images_img".* FROM "new_new_new" LEFT JOIN "images_images_img" ON modul_img = 'new' AND main_img = true AND idmodul_img = id_new WHERE (status_new = 'active') ORDER BY "order_new" DESC, "id_new" DESC LIMIT 4
and the result, converted from object to array would look like this
PHP Code:
array(2) {
[0] => array(22) {
["id_new"] => int(179)
["name_new"] => string(6) "test 2"
["status_new"] => string(6) "active"
["permalink_new"] => string(6) "test-2"
["date_creation_new"] => string(19) "2011-07-11 16:19:16"
["idusr_new"] => int(1)
["text_new"] => string(621) "<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
"
["order_new"] => int(2)
["file_img"] => NULL
["idmodul_img"] => NULL
["order_img"] => NULL
["description_img"] => NULL
["title_img"] => NULL
["alt_img"] => NULL
["print_style_img"] => NULL
["main_img"] => NULL
["seo_file_img"] => NULL
["name_img"] => NULL
["modul_img"] => NULL
["id_img"] => NULL
["date_creation_img"] => NULL
["hyperlink_img"] => NULL
}
[1] => array(22) {
["id_new"] => int(178)
["name_new"] => string(6) "test 1"
["status_new"] => string(6) "active"
["permalink_new"] => string(6) "test-1"
["date_creation_new"] => string(19) "2011-07-11 16:18:57"
["idusr_new"] => int(1)
["text_new"] => string(599) "<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
"
["order_new"] => int(1)
["file_img"] => NULL
["idmodul_img"] => NULL
["order_img"] => NULL
["description_img"] => NULL
["title_img"] => NULL
["alt_img"] => NULL
["print_style_img"] => NULL
["main_img"] => NULL
["seo_file_img"] => NULL
["name_img"] => NULL
["modul_img"] => NULL
["id_img"] => NULL
["date_creation_img"] => NULL
["hyperlink_img"] => NULL
}
}
which would with json_encode ultimately output this
PHP Code:
[{"id_new":179,"name_new":"test 2","status_new":"active","permalink_new":"test-2","date_creation_new":"2011-07-11 16:19:16","idusr_new":1,"text_new":"<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<\/p>\n","order_new":2,"file_img":null,"idmodul_img":null,"order_img":null,"description_img":null,"title_img":null,"alt_img":null,"print_style_img":null,"main_img":null,"seo_file_img":null,"name_img":null,"modul_img":null,"id_img":null,"date_creation_img":null,"hyperlink_img":null},{"id_new":178,"name_new":"test 1","status_new":"active","permalink_new":"test-1","date_creation_new":"2011-07-11 16:18:57","idusr_new":1,"text_new":"<p><strong>Lorem Ipsum<\/strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/p>\n","order_new":1,"file_img":null,"idmodul_img":null,"order_img":null,"description_img":null,"title_img":null,"alt_img":null,"print_style_img":null,"main_img":null,"seo_file_img":null,"name_img":null,"modul_img":null,"id_img":null,"date_creation_img":null,"hyperlink_img":null}]
no for() or array_merge() or anything else needed... as for time formatting, you can do that directly in sql, in postgres I'm using I'd be just
Code:
"SELECT *, to_char(date_creation_new, 'YY.DD.MM') as nice_date"
