Datahopa

Technology Chat => New Technology, Science etc ... => Topic started by: 8pla.net on March 16, 2015, 02:53:03 AM

Title: HTML5
Post by: 8pla.net on March 16, 2015, 02:53:03 AM
I decided to post HTML5 under the category of new technology
instead of the graphics category in the forum.  

http://elizabot.com/HTML5 (http://elizabot.com/HTML5)

If you follow this link, you'll see a graphic... But, one you have
to program in HTML5 code, which is cool, and fun to make.
Title: Re: HTML5
Post by: DaveMorton on March 16, 2015, 13:43:45 PM
I'd say "cute", but it's too early in the morning here for someone so angry at me to be "cute".

Still, good job, 8pla. :) :thumbsup:
Title: Re: HTML5
Post by: Data on March 16, 2015, 13:44:15 PM
For the sake of keeping this thread accurate, your page uses some HTML 5 but does not validate because you have some old code on the page still. 

Try validating here:

http://validator.w3.org/ (http://validator.w3.org/)
Title: Re: HTML5
Post by: DaveMorton on March 16, 2015, 13:49:53 PM
Odd that I didn't spot that, seeing as I looked at the source to see how it worked. Give me some time to wake up, and I'll see if I can't get her to "talk" to visitors (words only. No sound. She's creepy enough without her actually vocalizing).
Title: Re: HTML5
Post by: 8pla.net on March 16, 2015, 22:27:19 PM
Quote from: Data on March 16, 2015, 13:44:15 PM
Try validating here:
http://validator.w3.org/ (http://validator.w3.org/)

Thank you!  That was useful.

Quote from: DaveMorton on March 16, 2015, 13:49:53 PM
I'll see if I can't get her to "talk" to visitors.

I wonder if HTML5 is optimized to avoid flicker?
Title: Re: HTML5
Post by: Data on March 17, 2015, 00:26:00 AM
Quote from: 8pla.net on March 16, 2015, 22:27:19 PM
I wonder if HTML5 is optimized to avoid flicker?

I'm not sure exactly what you mean there 8pla.net but my gut feelings says probably not optimized to avoid flicker.

I noticed that the page now validates  :thumbsup:
Title: Re: HTML5
Post by: DaveMorton on March 17, 2015, 11:50:45 AM
Ok, this isn't what I started out to do, and what's there needs some tweaking, but I've got something "slightly" different.

http://dmorton.no-ip.info/tmp/html5/html5_canvas.php (http://dmorton.no-ip.info/tmp/html5/html5_canvas.php)
Title: Re: HTML5
Post by: DaveMorton on March 17, 2015, 12:32:30 PM
Thought I'd toss this out, too, though it's not really related:

http://dmorton.no-ip.info/tmp/html5/earth_animation.html (http://dmorton.no-ip.info/tmp/html5/earth_animation.html)
Title: Re: HTML5
Post by: DaveMorton on March 18, 2015, 16:31:15 PM
Ok, still not what I had intended when I started, but it's kind of fun. :)

http://dmorton.no-ip.info/tmp/html5/html5_canvas2.php (http://dmorton.no-ip.info/tmp/html5/html5_canvas2.php)
Title: Re: HTML5
Post by: 8pla.net on March 20, 2015, 19:29:25 PM
Quote from: Data on March 17, 2015, 00:26:00 AM
I'm not sure exactly what you mean there 8pla.net but my gut feelings says probably not optimized to avoid flicker.

Video plays a number of frames per second.  Flicker may occur when a video frame has not been able to finish rendering within that fraction of a second.  Whatever part of the video frame that has not rendered may flash as a partial bright white color.
Title: Re: HTML5
Post by: 8pla.net on March 20, 2015, 19:41:20 PM
Quote from: DaveMorton on March 18, 2015, 16:31:15 PM
Ok, still not what I had intended when I started, but it's kind of fun. :)

Nice ideas, Dave!  I am looking to work some more with HTML5.

You know, I rendered Bézier curves in PHP too, using the Imagick class.
Title: Re: HTML5
Post by: DaveMorton on March 21, 2015, 05:25:02 AM
I haven't worked with the Imagick class at all yet, since it proved to be very difficult to add to Windows, but I do a lot of image manipulation in PHP with the GD2 libraries. Granted, bezier curves are rather tricky to do without native functions to draw them out, but if you're good with math and geometry, you don't really need a native function to draw them. :) Just a LOT of math calculations. :P
Title: Re: HTML5
Post by: 8pla.net on March 21, 2015, 15:15:03 PM
Quote from: DaveMorton on March 21, 2015, 05:25:02 AM
I haven't worked with the Imagick class at all yet, since it proved to be very difficult to add to Windows

You hit the nail, right on the head... Surprisingly, it seems easier in HTML5 than in PHP with the Imagick class not readily available on shared hosting.



[attachment deleted by admin]
Title: Re: HTML5
Post by: DaveMorton on March 21, 2015, 17:21:22 PM
Fascinating. I'd be interested in seeing the code that produces that image, actually.

I know that this is taking this thread off topic, but I thought I'd share a little of what I'm working on in another place:

http://dmorton.no-ip.info/tmp/CSS_builder/cssbuilder.php (http://dmorton.no-ip.info/tmp/CSS_builder/cssbuilder.php)

The basic premise here is to take an HTML structure (not necessarily one with content, but certainly one with a full and complete DOM structure), and use it to create a "blank" CSS file that includes element, class and id selectors for the input file's code. I think that I can have it extract any style data from the HTML code (either in a <style> tag, or using the STYLE attribute of a given element), though I haven't quite yet pursued that avenue. Actually, I just put in code to do just that, and it works quite well. :)
Title: Re: HTML5
Post by: 8pla.net on March 21, 2015, 18:34:20 PM
Quote from: DaveMorton on March 21, 2015, 17:21:22 PM
Fascinating. I'd be interested in seeing the code that produces that image, actually.

Original example: http://php.net/manual/en/imagickdraw.bezier.php#93518 (http://php.net/manual/en/imagickdraw.bezier.php#93518)

Using this example with some math of my own:


<?php
    $width 
=  400;
    
$height 400;
   
    
$image = new Imagick();
    
$image->newImage$width$height, new ImagickPixel'#333344' ) );
   
    
$draw = new ImagickDraw();
    
$draw->setStrokeColor( new ImagickPixel'#666677' ) );
    
$draw->setStrokeWidth(3);
    
$draw->setFillColor( new ImagickPixel'#444455' ) );

    
$points = array
    (
        array( 
'x' => 52'y' => 322 ),   /* Starting point */
        
array( 'x' => 52'y' => 58 ),    /* Control point  */
        
array( 'x' => 337'y' => 315 ),  /* Control point  */
        
array( 'x' => 352'y' => 61 )    /* Ending point   */
    
);
   
    
$draw->bezier($points);
           
    
$image->drawImage$draw );
    
$image->setImageFormat"png" );
   
    
header"Content-Type: image/png" );
    echo 
$image;
?>


There were additional examples,  I'm trying to locate references to.  This is a nice, clean example.  So, I will start by extending this simple sourcecode listing referenced above.

[attachment deleted by admin]
Title: Re: HTML5
Post by: 8pla.net on August 21, 2015, 01:09:44 AM
Just a quick update on domain:

e l i z a b o t . c o m

Although it may appear to have vanished,
actually it is simply in search of a new
webhosting package.

OFF TOPIC (but indirectly related)

Just a quick update on domain:

c h a t b o t s . t k

Although it may appear to have vanished,
actually it did, sort of... Somebody else got
it, when it expired.  Oops!  A nice renewal
reminder was inadvertently missed.

The good news is that shorter domain:

c h a t b o t . t k

is still online running on a free webhost at:

h t t p : / / c h a t b o t . a l t e r v i s t a . o r g

END OFF TOPIC

So, at some point the links on this thread may
come right back to life, if the same directory
structure is used on the new webhost.