ajax - How can I synchronously trigger the start of an animation function at multiple clients by a php server instance -
i want trigger d3 animations run them synchronously @ many device ajax call.
i want resynchronize client connecting after animation has started.
my idea set fixed start time when animations should started. have problem synchronize clients maybe due different loading times , different system time, second.
to exact: want create webpage has color transition of background , want device loads page showing same color @ same time.
here example of current approach: hilldisc.vega.uberspace.de
i tried have exact transition time colors @ each array position in order start animation @ correct position in order avoid animation has start beginning. since want make fix animation won't repeated created many minutes.
here code i'm using right achieve behaviour:
<!doctype html> <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <meta name="mobile-web-app-capable" content="yes"> </head> <body> <script> let clusteringcolors = object.keys({ blue: "#0000ff", brown: "#a52a2a", cyan: "#00ffff", darkblue: "#00008b", darkcyan: "#008b8b", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkviolet: "#9400d3", fuchsia: "#ff00ff", gold: "#ffd700", green: "#008000", indigo: "#4b0082", khaki: "#f0e68c", lightblue: "#add8e6", lightgreen: "#90ee90", lightpink: "#ffb6c1", lime: "#00ff00", magenta: "#ff00ff", violet: "#800080", red: "#ff0000", yellow: "#ffff00", maroon: "#800000", navy: "#000080", olive: "#808000", orange: "#ffa500", pink: "#ffc0cb", purple: "#800080" }); var colorarray = ["red", "blue", "green", "yellow", "white", "grey", "pink", "darkgreen", "darkred", "darkblue"]; let currentindex = 0; var timearray = []; var totaltime = 0; (let = 0; < clusteringcolors.length; i++){ let tt = (i*100)%1000 + 100; timearray.push(tt); totaltime += tt; } function changecolor() { let colors = clusteringcolors; if (currentindex == colors.length) { currentindex = 0; } else { currentindex++; } let duration = (currentindex*100)%1000 + 100; d3.select("body").transition().style("background-color", colors[currentindex]).duration(duration); settimeout(function() { changecolor(); }, duration) } function reload() { jquery.ajax({ url: 'reload.php', type: 'post', async: true, success: function(data) { let dat = json.parse(data); if(dat.mode == "start"){ let colorsstarted = (new date(dat.time)).gettime(); <?php $t = microtime(true); $micro = sprintf("%06d",($t - floor($t)) * 1000000); $d = new datetime( date('y-m-d h:i:s.'.$micro, $t) ); $time = $d->format("y-m-d h:i:s.u"); ?> let = (new date('<?php echo $time;//date(date_rfc822);?>')).gettime(); var millistillstart = - colorsstarted; millistillstart = millistillstart % totaltime; for(let = 0; < timearray.length; i++){ if(millistillstart - timearray[i] > 0){ millistillstart -= timearray[i]; currentindex = (i+1)%clusteringcolors.length; } else { break; } } settimeout(changecolor, millistillstart); } if (dat["mode"] === "start") { //changecolor(); } else { settimeout(reload, 10); } return false; } }); } reload(); </script> </body> </html> the reload function used in order check whether json file @ server changed , stops recall server, when "mode" variable in json changed "waiting" status "start" status.
on server side using 2 php files, used start animation overwriting file checked actively clients , includes exact absolute time when animation has started or start.
here server code:
<?php $return_arr["mode"] = 'waiting'; echo json_encode($return_arr); exit(); ?> is changed
<?php $return_arr["mode"] = 'start'; $return_arr["time"] = '2017-04-07 00:39:16'; echo json_encode($return_arr); exit(); ?> and last php file overwriting reload.php file in order notify clients synchronize origin of animation start:
<?php $savepath = "./reload.php"; $t = microtime(true); $micro = sprintf("%06d",($t - floor($t)) * 1000000); $d = new datetime( date('y-m-d h:i:s.'.$micro, $t) ); $time = $d->format("y-m-d h:i:s.u"); $filecontent = "<?php \n \$return_arr[\"mode\"] = 'start';\n \$return_arr[\"time\"] = '$time'; \n echo json_encode(\$return_arr); \n exit(); \n?>"; file_put_contents($savepath, $filecontent); ?> what needed change in order retrieve synchronized background coloring. right now, there delay of milliseconds, due loading times assume.
Comments
Post a Comment