Trying to load an Image on screen - phaser-framework

Trying to load an Image on screen. I just want to set this image in the background, but can't get past the black screen. Thanks
Using http-server
in the public folder
public
-assets
--img
---xlogo.png
--js
---index.js
-systems
--phaser.js
INDEX.HTML
<html>
<head>
<title>X Game</title>
<script src="systems/phaser/phaser.js"></script>
<script src="assets/js/index.js"></script>
</head>
<body>
<div id="test-1"></div>
</body>
</html>
-INDEX.JS-
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'test-1', { preload: preload, create: create, update: update });
function preload() {
game.load.image('xlogo', 'assets/img/xlogo.png');
}
function create() {
game.add.sprite(0, 0, 'xlogo');
}
function update() {
}

Related

Bokeh is not generating plot and is instead returning an HTML file

I am new to Python and was trying out the Bokeh library. I try to plot a basic line graph and instead of returning the graph I get an ouput HTML file. When I ran the HTML code it looks like the graph does generate. Does anyone have any idea why the show() method is not showing me the chart as expected. I tried this in both Jupyter Notebook as well as Atom and both return the HTML code. I am running Windows 7 as well.
My code:
from bokeh.plotting import figure
from bokeh.io import output_file , show
x=[1,2,3,4,5]
y=[6,7,8,9,10]
output_file("test1.html")
f=figure()
f.line(x,y)
show(f)
Returned HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Plot</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div class="bk-root" id="d48bbd43-55c8-4727-befa-468754bdb0b5"></div>
<script type="application/json" id="41bd10a1-5a61-4504-80f1-8c56f40e644b">
{"c99a857f-320f-48ba-8576-3ef2bd47c6ce":{"roots":{"references":[{"attributes":{},"id":"c17f31c6-ea53-4bda-b425-65e087f9b126","type":"SaveTool"},{"attributes":{},"id":"d5662033-1332-448f-8078-b1b5fc6ebedd","type":"ResetTool"},{"attributes":{"overlay":{"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"}},"id":"2ebb0a9b-1f3e-4e0e-b54c-dab483d9ad1d","type":"BoxZoomTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"eea39d89-6da1-4401-a6bb-41d0ad5fd1a9","type":"PanTool"},{"id":"dbdcf43e-f6cd-4999-8664-7d4bbeb28b1b","type":"WheelZoomTool"},{"id":"5e93a11e-972b-4ea4-9ebd-e030a0a92bf5","type":"BoxZoomTool"},{"id":"7b78cfe2-aa29-4245-98c3-b8678943be2c","type":"SaveTool"},{"id":"d5662033-1332-448f-8078-b1b5fc6ebedd","type":"ResetTool"},{"id":"3bcc793e-9b7f-42f7-b939-437b29982b6f","type":"HelpTool"}]},"id":"e29112ae-02d0-4dc6-9788-c3bcd084c560","type":"Toolbar"},{"attributes":{},"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"},{"attributes":{"data_source":{"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"},"glyph":{"id":"5c2d97f3-520b-4a40-b4a2-41bde9d2dbc6","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"762d72ea-6726-4767-aed8-9a5abfbd3abf","type":"Line"},"selection_glyph":null,"view":{"id":"d9fbc277-e9f7-409c-a9b7-8362fed1fe82","type":"CDSView"}},"id":"d495f273-35fd-4f1d-a7c7-44cdc6e2043b","type":"GlyphRenderer"},{"attributes":{},"id":"fdf26c70-7fce-4158-800f-62ef31b890ac","type":"ResetTool"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"},{"attributes":{},"id":"f2bb603d-d041-46dc-9149-5d20c78da06e","type":"PanTool"},{"attributes":{"callback":null,"data":{"x":[1,2,3,4,5],"y":[6,7,8,9,10]},"selected":{"id":"7453ce84-2208-4e58-9d06-ddd3ca1708f6","type":"Selection"},"selection_policy":{"id":"601e5c38-1a36-447b-83d5-64411a4833e8","type":"UnionRenderers"}},"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"},{"attributes":{},"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"f2bb603d-d041-46dc-9149-5d20c78da06e","type":"PanTool"},{"id":"ad0a537b-c0d3-4808-846f-be215dbd4631","type":"WheelZoomTool"},{"id":"2ebb0a9b-1f3e-4e0e-b54c-dab483d9ad1d","type":"BoxZoomTool"},{"id":"c17f31c6-ea53-4bda-b425-65e087f9b126","type":"SaveTool"},{"id":"fdf26c70-7fce-4158-800f-62ef31b890ac","type":"ResetTool"},{"id":"949b3238-ac22-4ad2-b652-af77d2e455ad","type":"HelpTool"}]},"id":"096653f5-de71-4386-8bb7-0712ad1765ca","type":"Toolbar"},{"attributes":{},"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"},{"attributes":{"formatter":{"id":"83cded7e-dad6-4fc7-b0f2-761cc4012436","type":"BasicTickFormatter"},"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"}},"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"},{"attributes":{"data_source":{"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"},"glyph":{"id":"58e9f325-f8d1-44cb-9e83-f757a0bd329a","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"b6c181de-6d18-433b-8bbd-b14169b56eb5","type":"Line"},"selection_glyph":null,"view":{"id":"64bb6a0d-f877-4657-9ade-525ec88605a9","type":"CDSView"}},"id":"f17257ba-4f75-42c7-893b-a4cf0036740b","type":"GlyphRenderer"},{"attributes":{"dimension":1,"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"}},"id":"448ae753-190a-47b3-b48c-48d42ad5c905","type":"Grid"},{"attributes":{"callback":null},"id":"320a3e54-e61a-45c3-b12e-64c5570e1c82","type":"DataRange1d"},{"attributes":{"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"}},"id":"408bec16-a4cc-48b8-a8e8-9753f9815ed4","type":"Grid"},{"attributes":{},"id":"86e986bf-1069-41b3-b75c-db7e68d1b161","type":"LinearScale"},{"attributes":{},"id":"9e7303e6-a33a-4cfd-8a41-23f8c9b4fe8f","type":"LinearScale"},{"attributes":{},"id":"4d5fd9c6-8637-4d02-b775-2411c95a5d06","type":"LinearScale"},{"attributes":{"formatter":{"id":"f2264866-9fec-45b0-b242-5111fcc1c4fb","type":"BasicTickFormatter"},"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"}},"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"},{"attributes":{},"id":"3bcc793e-9b7f-42f7-b939-437b29982b6f","type":"HelpTool"},{"attributes":{"dimension":1,"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"}},"id":"f496d5a9-0ee6-460b-9016-3fa5c19a56a7","type":"Grid"},{"attributes":{},"id":"1b240c0f-07b2-4113-a8a8-a4efc1583fdd","type":"BasicTickFormatter"},{"attributes":{},"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"},{"attributes":{"source":{"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"}},"id":"d9fbc277-e9f7-409c-a9b7-8362fed1fe82","type":"CDSView"},{"attributes":{"callback":null},"id":"98a9bfe3-e787-4432-af9d-0f3f9f086166","type":"DataRange1d"},{"attributes":{},"id":"7453ce84-2208-4e58-9d06-ddd3ca1708f6","type":"Selection"},{"attributes":{"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"}},"id":"937c1124-b157-4eca-a0b3-75f6ef2dda90","type":"Grid"},{"attributes":{"callback":null},"id":"95e74f2e-df09-4945-a76e-c185eea3d4df","type":"DataRange1d"},{"attributes":{"formatter":{"id":"2030a3a4-7747-427a-a1dd-ffc3901ee9be","type":"BasicTickFormatter"},"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"}},"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"},{"attributes":{"source":{"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"}},"id":"58980905-7efb-4a11-8de9-9b10e9b1d1c8","type":"CDSView"},{"attributes":{"callback":null,"data":{"x":[3,7.5,10],"y":[3,6,9]},"selected":{"id":"668b3eb0-b6de-4fc7-ae7b-d1a7ce923009","type":"Selection"},"selection_policy":{"id":"4dc9ce99-d94b-4fbd-9ed2-ef8bb292be8b","type":"UnionRenderers"}},"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"762d72ea-6726-4767-aed8-9a5abfbd3abf","type":"Line"},{"attributes":{},"id":"5ec88388-4913-436f-b8a6-cfd6d391154c","type":"BasicTickFormatter"},{"attributes":{},"id":"eea39d89-6da1-4401-a6bb-41d0ad5fd1a9","type":"PanTool"},{"attributes":{"callback":null},"id":"d9d21cdf-f19b-4f95-98ba-ef43d9aec5a7","type":"DataRange1d"},{"attributes":{},"id":"ad0a537b-c0d3-4808-846f-be215dbd4631","type":"WheelZoomTool"},{"attributes":{"formatter":{"id":"1b240c0f-07b2-4113-a8a8-a4efc1583fdd","type":"BasicTickFormatter"},"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"}},"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"},{"attributes":{},"id":"2030a3a4-7747-427a-a1dd-ffc3901ee9be","type":"BasicTickFormatter"},{"attributes":{},"id":"541dc82f-bd18-4993-adff-060c1167d6ab","type":"Selection"},{"attributes":{},"id":"4dc9ce99-d94b-4fbd-9ed2-ef8bb292be8b","type":"UnionRenderers"},{"attributes":{},"id":"83cded7e-dad6-4fc7-b0f2-761cc4012436","type":"BasicTickFormatter"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"},{"attributes":{},"id":"949b3238-ac22-4ad2-b652-af77d2e455ad","type":"HelpTool"},{"attributes":{"formatter":{"id":"5ec88388-4913-436f-b8a6-cfd6d391154c","type":"BasicTickFormatter"},"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"}},"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"},{"attributes":{"callback":null},"id":"0eb66654-fd86-43a2-8b94-2f345c420dec","type":"DataRange1d"},{"attributes":{},"id":"dbdcf43e-f6cd-4999-8664-7d4bbeb28b1b","type":"WheelZoomTool"},{"attributes":{"callback":null},"id":"66ecc1d0-d899-41cd-b791-13176cd24a81","type":"DataRange1d"},{"attributes":{},"id":"26a46564-9ff5-4fdb-987a-a2119540680b","type":"LinearScale"},{"attributes":{"formatter":{"id":"e87b8867-6df4-4f58-a378-25f653b25bf6","type":"BasicTickFormatter"},"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"}},"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"},{"attributes":{"below":[{"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"}],"left":[{"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"}],"renderers":[{"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"},{"id":"408bec16-a4cc-48b8-a8e8-9753f9815ed4","type":"Grid"},{"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"},{"id":"448ae753-190a-47b3-b48c-48d42ad5c905","type":"Grid"},{"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"},{"id":"d495f273-35fd-4f1d-a7c7-44cdc6e2043b","type":"GlyphRenderer"}],"title":{"id":"d4c3a0d9-1a75-4bf7-a107-1d30bf785c76","type":"Title"},"toolbar":{"id":"096653f5-de71-4386-8bb7-0712ad1765ca","type":"Toolbar"},"x_range":{"id":"95e74f2e-df09-4945-a76e-c185eea3d4df","type":"DataRange1d"},"x_scale":{"id":"c561783a-f07e-44c4-8bce-04e3a3363ae6","type":"LinearScale"},"y_range":{"id":"0eb66654-fd86-43a2-8b94-2f345c420dec","type":"DataRange1d"},"y_scale":{"id":"4d5fd9c6-8637-4d02-b775-2411c95a5d06","type":"LinearScale"}},"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"f95a9d96-e1ac-4ce5-bc22-36cf2f38f282","type":"LinearScale"},{"attributes":{"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"5c2d97f3-520b-4a40-b4a2-41bde9d2dbc6","type":"Line"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"568ebe47-1b17-4fc7-8859-72a1e4b19c03","type":"PanTool"},{"id":"e1d4052b-2921-4d77-ad94-6918560aa1ba","type":"WheelZoomTool"},{"id":"0854e626-a869-4df9-8767-e630ecd58a96","type":"BoxZoomTool"},{"id":"110fc368-ca75-4219-8f15-890fcdb2f36b","type":"SaveTool"},{"id":"885ac673-f730-49e8-813f-64fd64eaf473","type":"ResetTool"},{"id":"f80496c0-9c80-4a80-8f2f-da85474351ca","type":"HelpTool"}]},"id":"f941560f-8e6b-451c-9eb8-adefc4eb40ab","type":"Toolbar"},{"attributes":{"below":[{"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"}],"left":[{"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"}],"renderers":[{"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"},{"id":"76ad232d-7081-49f8-aed9-647e4230aca4","type":"Grid"},{"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"},{"id":"c3bc6c16-6356-43da-9153-d0f6463dc876","type":"Grid"},{"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"},{"id":"e8a9236a-3159-4555-ab32-5a71f98315fe","type":"GlyphRenderer"}],"title":{"id":"398834ce-a8d9-46e0-923e-ab71eb6e8aa8","type":"Title"},"toolbar":{"id":"f941560f-8e6b-451c-9eb8-adefc4eb40ab","type":"Toolbar"},"x_range":{"id":"320a3e54-e61a-45c3-b12e-64c5570e1c82","type":"DataRange1d"},"x_scale":{"id":"26a46564-9ff5-4fdb-987a-a2119540680b","type":"LinearScale"},"y_range":{"id":"66ecc1d0-d899-41cd-b791-13176cd24a81","type":"DataRange1d"},"y_scale":{"id":"f95a9d96-e1ac-4ce5-bc22-36cf2f38f282","type":"LinearScale"}},"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},{"attributes":{"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"}},"id":"76ad232d-7081-49f8-aed9-647e4230aca4","type":"Grid"},{"attributes":{},"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"},{"attributes":{"callback":null,"data":{"x":[1,2,3,4,5],"y":[6,7,8,9,10]},"selected":{"id":"541dc82f-bd18-4993-adff-060c1167d6ab","type":"Selection"},"selection_policy":{"id":"ad391a37-ff57-4e0e-a32f-1fc91db098fc","type":"UnionRenderers"}},"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"},{"attributes":{"dimension":1,"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"}},"id":"c3bc6c16-6356-43da-9153-d0f6463dc876","type":"Grid"},{"attributes":{},"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"},{"attributes":{},"id":"c561783a-f07e-44c4-8bce-04e3a3363ae6","type":"LinearScale"},{"attributes":{},"id":"ad391a37-ff57-4e0e-a32f-1fc91db098fc","type":"UnionRenderers"},{"attributes":{"plot":null,"text":""},"id":"398834ce-a8d9-46e0-923e-ab71eb6e8aa8","type":"Title"},{"attributes":{},"id":"568ebe47-1b17-4fc7-8859-72a1e4b19c03","type":"PanTool"},{"attributes":{},"id":"e1d4052b-2921-4d77-ad94-6918560aa1ba","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"}},"id":"0854e626-a869-4df9-8767-e630ecd58a96","type":"BoxZoomTool"},{"attributes":{},"id":"110fc368-ca75-4219-8f15-890fcdb2f36b","type":"SaveTool"},{"attributes":{},"id":"885ac673-f730-49e8-813f-64fd64eaf473","type":"ResetTool"},{"attributes":{},"id":"f80496c0-9c80-4a80-8f2f-da85474351ca","type":"HelpTool"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"8f473bf9-6ee0-4c0f-b549-b2f0b00fa17f","type":"Triangle"},{"attributes":{"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"58e9f325-f8d1-44cb-9e83-f757a0bd329a","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"b6c181de-6d18-433b-8bbd-b14169b56eb5","type":"Line"},{"attributes":{},"id":"668b3eb0-b6de-4fc7-ae7b-d1a7ce923009","type":"Selection"},{"attributes":{"plot":null,"text":""},"id":"d4c3a0d9-1a75-4bf7-a107-1d30bf785c76","type":"Title"},{"attributes":{},"id":"e87b8867-6df4-4f58-a378-25f653b25bf6","type":"BasicTickFormatter"},{"attributes":{},"id":"7b78cfe2-aa29-4245-98c3-b8678943be2c","type":"SaveTool"},{"attributes":{},"id":"601e5c38-1a36-447b-83d5-64411a4833e8","type":"UnionRenderers"},{"attributes":{"data_source":{"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"},"glyph":{"id":"cda92757-3dcd-42cb-95b9-392e57684258","type":"Triangle"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"8f473bf9-6ee0-4c0f-b549-b2f0b00fa17f","type":"Triangle"},"selection_glyph":null,"view":{"id":"58980905-7efb-4a11-8de9-9b10e9b1d1c8","type":"CDSView"}},"id":"e8a9236a-3159-4555-ab32-5a71f98315fe","type":"GlyphRenderer"},{"attributes":{"below":[{"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"}],"left":[{"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"}],"renderers":[{"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"},{"id":"937c1124-b157-4eca-a0b3-75f6ef2dda90","type":"Grid"},{"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"},{"id":"f496d5a9-0ee6-460b-9016-3fa5c19a56a7","type":"Grid"},{"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"},{"id":"f17257ba-4f75-42c7-893b-a4cf0036740b","type":"GlyphRenderer"}],"title":{"id":"af901232-8aa2-488c-932c-c8e5dda2750d","type":"Title"},"toolbar":{"id":"e29112ae-02d0-4dc6-9788-c3bcd084c560","type":"Toolbar"},"x_range":{"id":"98a9bfe3-e787-4432-af9d-0f3f9f086166","type":"DataRange1d"},"x_scale":{"id":"86e986bf-1069-41b3-b75c-db7e68d1b161","type":"LinearScale"},"y_range":{"id":"d9d21cdf-f19b-4f95-98ba-ef43d9aec5a7","type":"DataRange1d"},"y_scale":{"id":"9e7303e6-a33a-4cfd-8a41-23f8c9b4fe8f","type":"LinearScale"}},"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},{"attributes":{"overlay":{"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"}},"id":"5e93a11e-972b-4ea4-9ebd-e030a0a92bf5","type":"BoxZoomTool"},{"attributes":{"plot":null,"text":""},"id":"af901232-8aa2-488c-932c-c8e5dda2750d","type":"Title"},{"attributes":{"fill_color":{"value":"#1f77b4"},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"cda92757-3dcd-42cb-95b9-392e57684258","type":"Triangle"},{"attributes":{"source":{"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"}},"id":"64bb6a0d-f877-4657-9ade-525ec88605a9","type":"CDSView"},{"attributes":{},"id":"f2264866-9fec-45b0-b242-5111fcc1c4fb","type":"BasicTickFormatter"}],"root_ids":["635f8152-f2d6-4568-ae68-2973f310eaf8","2da75283-6f20-4600-884a-98e59b066e28","4da3e749-cdb4-48ed-8dc6-b78818d8f587"]},"title":"Bokeh Application","version":"0.13.0"}}
</script>
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
var docs_json = document.getElementById('41bd10a1-5a61-4504-80f1-8c56f40e644b').textContent;
var render_items = [{"docid":"c99a857f-320f-48ba-8576-3ef2bd47c6ce","roots":{"4da3e749-cdb4-48ed-8dc6-b78818d8f587":"d48bbd43-55c8-4727-befa-468754bdb0b5"}}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
var attempts = 0;
var timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
embed_document(root);
clearInterval(timer);
}
attempts++;
if (attempts > 100) {
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
clearInterval(timer);
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</body>
</html>

Yes that will happen but is easy to resolve :
right click the (output html file) in working folder ---> hover over open with----> choose default program---> click on always open with (google chrome)
Now the next time you run your code plot will open up in chrome instead of .html file in notepad

Destroy Darkroom / Fabric JS Canvas

$(function() {
$('button').on('click', function() {
new Darkroom('#edit', {
plugins: {
save: {
callback: function() {
console.log('saving');
var darkroom = this.darkroom;
darkroom.canvas.clear().renderAll();
darkroom.selfDestroy();
return true;
}
}
}
});
});
});
<html>
<head>
<link href="https://rawgithub.com/MattKetmo/darkroomjs/master/build/darkroom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<script src="https://rawgit.com/MattKetmo/darkroomjs/master/build/darkroom.js"></script>
</head>
<body>
<div style="margin-top:50px">
<img id="edit" class="data-uri-example" src="data:image/gif;base64,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">
</div>
<button type="button">Edit</button>
</body </html>
Using darkroom js and fabric js. After I save the canvas data I want to remove the img/canvas from the page. The original img tag used in initialization '#edit' is no longer an element on the page. Seems it's replaces by a new img.
I've tried the .clear() also .clear().renderAll(). I get no error but the image still shows on the page.

Remove div element for control Darkroom and in code create again
$(function () {
$('button').on('click', function () {
$('#main-el').html('');
$('#main-el').append('<img id="edit" class="data-uri-example" src="...">');
new Darkroom('#edit');
});
});

how the inherit happened in phaser

I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};

To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>

isotope (again!) overlaping images Vertical

i've searched, i've tried but i couldn't find the answer.
I've got many images in isotope filtering, i've got imagesLoaded but images are still overlaping at each other in vertical.
Here's the link http://cpmedia.pl/test/portfolio.html
the code:
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
and stil nothing...

First, you are loading jquery twice, once by itself and again with yepnope. Second, you are calling isotope twice as well, once with imagesloaded on #container ( which I don't see on your page) and again on . portfolioContainer, which does exist but is not called using imagesLoaded. You need to load jQuery once, and call isotope once and try this code:
$(function(){
var $container = $('.portfolioContainer');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
If you want to use horizontal, then get it here and load it as well
ADDENDUM:
Looking at your source, you are still loading multiple copies of your js files. This is what I see in your source:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="assets/core/libs/js/loader.js"></script>
<script src="assets/core/libs/js/vendor/jquery.livetwitter.min.js"></script>
<script src="assets/core/libs/js/vendor/jquery.selestnav.min.js"></script><script src="assets/core/libs/js/plugins.js"></script>
<script src="assets/core/libs/js/main.js"></script>
<script src="assets/user/user.js"></script><script src="skinme/skinme.js"></script>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> <script src="./assets/core/libs/js/jquery.min.js"></script>
<script src="./assets/core/libs/js/loader.js"></script>
<script src="./assets/html5lightbox.js"></script>
<script src="./assets/core/libs/js/jquery.isotope.min.js"></script>
<script src="./assets/core/libs/js/jquery.livetwitter.min.js"></script>
<script src="./assets/core/libs/js/jquery.jribbble.min.js"></script>
<script src="./assets/core/libs/js/jquery.selestnav.min.js"></script>
<script src="./assets/core/libs/js/plugins.js"></script>
<script src="./assets/core/libs/js/main.js"></script>
<script src="./assets/core/libs/js/user.js"></script>
<script src="./assets/core/libs/js/skinme.js"></script>
<script src="./assets/core/imagesloaded.pkgd.js"></script>

InfoWindow with google maps api

How can I display two Infowindow on my map.
in my code I can open only one InfoWindow, but I will display at same time twoo InfoWindow on my map what can I do. my code is:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng( 38.736946, 35.310059), 6);
map.openInfoWindow(new GLatLng( 38.582526, 42.846680),
document.createTextNode("Van Gölü"));
}
}

The Google Maps API v2 native InfoWindow only supports one per map. The Google Maps API v3 removes that limitation.
Either use a custom InfoWindow or migrate your application to the Google Maps API v3.
As #duncan observed, that Google Maps API v2 has been officially deprecated as of May 19, 2010 and will not be supported after May 19, 2013. New development in that API is strongly discouraged.

this code is working :
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.078908,35.244141),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
infoWindow = new google.maps.InfoWindow();
var windowLatLng = new google.maps.LatLng(38.668356,33.376465);
infoWindow.setOptions({
content: "Tuz Golu",
position: windowLatLng,
});
infoWindow.open(map);
infoWindow2 = new google.maps.InfoWindow();
var windowLatLng2 = new google.maps.LatLng(38.565348,42.868652);
infoWindow2.setOptions({
content: "Van Golu",
position: windowLatLng2,
});
infoWindow2.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:65%; height:40%"></div>
</body>
</html>

Resources