Need help to run processingjs on Meteorjs for my project. I have added the package from bgrayburn and still have difficulty in being able to run processing file.
I use cloud9 as my platform to run and flow router. In the picture is the file organization.
file organization:
Here's my code on my page1 template:
<template name="page1">
<body>
<div>
<h1>HELLOO to Page1!</h1>
{{> processingSketch}}
</div>
</body>
</template>
<template name= "processingSketch">
<div style="border-style:dotted;">
<canvas style="border-style:solid;" data-processing-sources="mysketch.pde"></canvas>
</div>
</template>
On the browser I got like below:
view in browser:
You can see that the html works fine, but it does not run the sketch.pde file. What did I miss? I really appreciate your answers. If possible please include screenshots.
Related
I'd like to literally display a template as code in a meteor app. Something like below:
<template name="current-template">
<pre>
<code>
<template name="template-should-display-as-code">
{{> TMCODE shouldDisplayAsIs}}
</template>
</code>
</pre>
</template>
The template inside the code section should be displayed as code. It shouldn't refer to another template. It is illegal syntax anyway.
Is there anyway to achieve it?
Thanks.
This might help..
Display source code in meteor applications
http://www.meteormade.com/display-source-code-in-meteor-applications
I'm creating a Meteor application. When first creating application, Meteor has put this sample code in hello.html
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Hello World Template
</template>
I install Iron-Router package. then here is my lib/Router.js file:
Router.route('/', function () {
this.render('post_template');
});
And here is my client/templates/posts/post_template.html
<template name="post_template">
Example Template
</template>
I don't know why when I run this application. The result is:
HelloWorld Template
Example Template
In other word, which part of Meteor's configuration that load hello.html as default page, and then append all other templates in routing inside ?
Thanks :)
In this case the very first Meteor loads is the
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
Since you are calling there the hello template, thats the first you get on the screen.
I reccomend on this case use the layout template and remove the <body> tag
So first declare the route.
Router.configure({
layoutTemplate:'layout'
})
delete the <body> and <head> tags and place this layout template instead.
<template name="layout">
<navbar>
<!-- This stuff will be available on all routes since you are declaring on the layout template -->
</navbar>
{{> yield}} <!-- this yield helper will render the post_template or any other -->
</template>
For example
If you have this 2 routes.
Router.route('/', function () {
this.render('post_template');
});
Router.route('/example', function () {
this.render('example');
});
What happened here, when you go through the / route, iron router will render the 'post_template' html into the layout template, and when you navigate to /example, iron router will remove the post_Template html and render the content inside /example template, if you want to have the same content on all pages, declare it on the <layout> template i.e footers,navbars, etc
The layout template its like the "master" template here.
IR will append to the <body> if it exists (and otherwise add one for you) so it's recommended that you remove the entire <body> tag.
You are actually safe to remove the hello.html entirely (since you also don't need the hello template). If you want to keep the head tag, you could just modify the file to look like:
<head>
<title>hello</title>
</head>
To understand why hello.html is being included, see the Structuring your application section of your docs:
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
So all of your html files are always included. If you don't want to include them, you need to remove them from your app.
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
Very new to webdev here, but trying my hand at Meteor! I'd like to create a collection that contains some text, a link, and an image and show each item in the collection in a grid-type layout similar to Pinterest.
I have found some resources, such as Meteor-isotope (https://github.com/digioak/meteor-isotope), cast.js (http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid-layouts-with-cast-js) and even maybe using twitter bootstrap's own grid system?
Is there a recommended approach to a gridview with Meteor? Thank you.
Masonry works nicely for me (here's my app). Simply add it to your project.
meteor add sjors:meteor-masonry
In order to make rendering work correctlly with images, you'll also need to add the imagesLoaded library.
meteor add mrt:jquery-imagesloaded
Here's an example on how to use it in your code:
result.html
<template name="resultPage">
<div id="result-container">
{{#each posts}}
{{> post}}
{{/each}}
</div>
</template>
<template name="post">
<div class="result-item">
<a href="{{url}}" target="_blank">
<img src="{{url}}">
</a>
<div class="author">
Submitted by: <strong>{{author}}</strong>
</div>
</div>
</template>
result.js
Template.resultPage.rendered = function() {
var $container = $('#result-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.result-item'
});
});
};
I found this sample project and ended up learning from it. I'm not sure if it helps others, but this is the project: http://isotest.meteor.com/
I went with isotope myself, but not the meteor package. I ended up having to use the library itself and then use jquery ImagesLoaded to do a isotope reLayout call. The way meteors Template..rendered works doesn't take into effect images or something so my "blocks" would intermittently overlap from time to time. I stopped developing the site but you can see how I went about it at www.mmohype.com. Click any game.
I've fruitlessly looked for examples of using Meteor with an Iframe. (Note that I have to use an iframe instead of a DIV because of the content that will ultimately go there). I've tried both:
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click to see what you typed" />
<br>
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
</template>
<template name="iframe-content">
<body>
<div contenteditable="true">
Edit me
</div>
</body>
</template>
This loads recursively, creating sub-Iframes continuously.
I've also tried
<iframe id="compose" src="content.html" height=600></iframe>
but Meteor munges the multiple HTML files together which also causes the iframe to fail.
The only thing that worked so far is SRCDOC instead of SRC, but that isn't well supported by multiple browsers like FF.
So, what's the trick to use an iframe within Meteor, preferably in the template rather than strictly through code?
You want the 'public' folder. Meteor leaves content in that folder alone, as described here: http://docs.meteor.com/#/full/structuringyourapp
Move 'content.html' into a folder named 'public' at the root of your project/app and reference it like so in the html:
<head>
<title>iframe</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
<iframe src="hello.html"></iframe>
</template>
To be clear for other readers, Meteor has no problem with iframes. The issue was with the location of the 'content.html' file the iframe referenced.
I don't understand your first code example:
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
As far as I know, that's not how iframes work; you have to specify a url in the src attribute, you can't just put the actual HTML there. So that won't work.
As for the second example:
<iframe id="compose" src="content.html" height=600></iframe>
Where do you expect Meteor to get content.html if you haven't specified that that path exists? Since Meteor doesn't set up routing by default, there is no resource at /content.html. So you'd have to add the Meteor Router package or some similar routing mechanism, and then tell Meteor that when asked to serve /content.html, it should just return the content of some template. The challenging part is figuring out how to get Meteor to return "real" HTML and not the Meteor-wrapped live HTML construction that is usually served up.
I have been playing with iframe lately (mainly to encapsulate some page made for an app webviews) and if you put those html files in the /public folder and in the iframe src write absolute url /file.html then it just works.