Is there a way to put Processing in an HTML page? Say I have a .pde file, and I want it to be on my HTML web page, how could I do that? (Processing is a kind of a graphics language.)
You should be able to export your pde file into a HTML page with Processing's JavaScript mode. A web-export folder will be created and containing everything you need for deployment (index.html, processing.js, and other resource files...).
You may also consider to take this Coursera course which gives you an overview of what Processing can do. I've finished this and it's fun and useful!
Would Processing.js work for you?
It is possible to put Processing code directly in your web page
Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and recommended way to include scripts in a web page. However, it is also possible to write in-line Processing code.
Processing code example ( worked for me ) ( easiest way I guess ) :
<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="pjs">
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println('hello web!');
}
</script>
<canvas id="pjs"> </canvas>
Related
I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - tring to impove it like this :
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async basically says "load everything as quickly as you can, I don't care about load order".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
This will be slightly slower overall but still fix the JavaScript being render blocking.
You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).
CSS
Render blocking CSS is anything sitting in an external file that relates to content "above the fold".
To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.
What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!
Then all other styles can sit in external style sheets.
This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.
Font Awesome
Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.
Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.
just a suggestion, have no way of testing atm but try putting 'async' before the source attribute. also, try adding a copied line with the attribute defer instead of async for wider browser support.
I am using a JS library called barcode39 to create a barcode image. I already imported the JS library in the static resource and have included the JS in my visualforce page. The barcode is generating fine in the VF page. The problem is I need to render this page as a pdf. When I do that, the barcode image does not appear. I DO NOT want to use the image url from the website barcodeinc because its very unstable. I would like to use this JS library. Can you please let me know what I can do to modify the code below to make the barcode render in pdf as well? Thank you
<apex:page standardController="Opportunity" extensions="LPP_PackingSlip" showHeader="false" sidebar="false" renderAs="pdf" standardStylesheets="false" applyHtmlTag="false">
<apex:includeScript value="{!$Resource.BarcodeScript}"/>
<head>
<body>
<apex:outputText rendered="{!hasPictureDays}">
<!--Header-->
<br/>
<div class="headerSlip">{!Opportunity.Account.Name}</div><br/>
<div class="jobSlip">{!Opportunity.WPA__c}</div>
<center><svg id="barcode"></svg></center>
<br/><br/>
</apex:outputText>
</body>
<script type ="text/javascript">
JsBarcode("#barcode", "{!Opportunity.WPA__c}",{
fontOptions: "both",
font : "OCRB",
textAlign : "center",
Textmargin : 5,
fontSize : 12,
width: 1,
height: 50
});
</script>
</apex:page>
Won't work like that. Visualforce rendering to PDF is done server-side (using a Java library called "Flying Saucer"). There's no browser, no "engine" that can run your JavaScript.
You can ask the user to save the page as PDF. If you need it to be fully automated... there are JS libraries for PDF generation like jspdf? They have bit limited range of features but for basic documents... (do your own research, this is just an example). And watch out for support of non-English characters (Japanese/Chinese/Korean...) - then again, Visualforce PDF generation also struggles with these and only safe font is Arial Unicode MS.
If you need sending an email template with PDF attachment even that library won't help. You'll probably have to look into generating the barcode as image, attaching it to the record maybe (as real File/Attachment?) and then calling the template.
I love Python, and have never much cared for JavaScript. So I was pretty excited to learn about Transcrypt. I recently started a web-based project that uses Django for the back-end and a Leaflet map (specifically Esri Leaflet) that plays a central role in the front-end. I'm trying to figure out if Transcrypt is a good fit for my project. However, the documentation and examples on Transcrypt's website are either too simple or delve into more advanced topics too quickly. As a result, I'm having a hard time deciding whether Transcrypt will add anything positive to my project or will simply bring more complexity and bugs. I'd rather not spend several hours trying to get Transcrypt working (time that could be productively spent simply writing JavaScript) only to find out Transcrypt isn't a good fit for my website. So I have a few questions.
I know Transcrypt is designed to work with any JavaScript library. Will it also work with map-based GIS libraries?
For example, if I can successfully encapsulate the whole of Esri Leaflet (but maybe I won't be able to?), Transcrypt would allow me to write the following in Python?
var map = L.map('map').setView([40.91, -96.63], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
L.esri.Geocoding.geosearch({
providers: [
arcgisOnline,
L.esri.Geocoding.mapServiceProvider({
label: 'States and Counties',
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
layers: [2, 3],
searchFields: ['NAME', 'STATE_NAME']
})
]
}).addTo(map);
By the way, that code was taken from here.
I didn't quite understand the explanations about integrating with JavaScript libraries found here, specifically where it says:
Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distribution this is done for the fabric module, that encapsulates fabric.js and is imported in the Pong example. In this way the global namespace stays clean.
So I can't really tell if Transcrypt could handle all the GIS and map stuff.
The Leaflet map will be the main user interface for my site. So knowing that Transcrypt could encapsulate it is kind of important. There will also be a lot of event listeners connected to the map, and data going back and forth between the front and back-ends. I'm probably going to be using jQuery's Ajax for a lot of that. I saw a few simple jQuery examples on the Transcrypt website, but am not sure if Transcrypt is really up to the job yet.
I've noticed that the only person answering the Transcrypt questions is its creator, Jacques de Hooge. I guess my questions are really directed at him. Any advice you can offer me is much appreciated, Jacques!
You don't need to encapsulate the Leaflet library. You can use it just as is in Transcrypt.
Here an example. In a new folder create the HTML file mymap.html`:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="leaflet.css"/>
<script src="leaflet.js"></script>
</head>
<body>
<div id="the-map" style="width: 1000px; height: 800px;"></div>
<script type="module">import * as main from './__target__/mymap.js';</script>
</body>
</html>
And create the Transcrypt file mymap.py:
def main(map_id):
watercolorTiles = {'linkTpl': 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
'attribution': '© Stamen Maps'}
australiaView = {'center': [-27.30,133.62],
'zoomSnap': 0.1,
'zoom': 4.5}
# Build the map
map = L.map(map_id, australiaView)
L.tileLayer(watercolorTiles['linkTpl'], {
'attribution': watercolorTiles['attribution'],
}).addTo(map);
main('the-map')
Note that teh Transcrypt code uses the global Lefa;et object L just as is. This factory object is already instantiated in leaflet.js and you can use it to build your map.
To view the map you need to do:
Download the Leaflet library and copy leaflet.css and leaflet.js into your folder.
On the Terminal command line (after cd'ing into your folder) transpile the .py file :
$ transcrypt mymap.py
Fire up a webserver serving your folder, e.g. with:
$ python3 -m http.server
Now go in your browser to http://localhost:8000/mymap.html and look at a beautiful (in this case watercolour) map of Australia.
Your geosearch code snippet could be written in a similarly fashion with Transcrypt - just make sure to write dictionary keys as Python strings (so instead of attribution write 'attribution')!
I am creating a blocks in my controller using
$this->_addContent($this->getLayout()->createBlock('mymodule/mymodule_newpage')
Is there any way how I can embed js code into the addcontent function. I dont want to add complete js but a chunk of code.
Thanks
You can add that particular js file in your static block (mymodule/mymodule_newpage) by writing it under content tab.
<script type="text/javascript" src="http://your_site.com/js/your_js_file.js"></script>
Though I am not 100% sure.Give a try.Goodluck.
You can try:
$this->_addContent($this->getLayout()->createBlock('core/text')->setText('your script here'));
Obs: I could not make sintax highlight fpr PHP work anymore...
I want to show some dynamic content in a presentation. However, I am not sure I have time by Thursday to make slides in the way I would like to within Mathematica.
Is it possible to have Dynamic objects built in Mathematica within A Powerpoint (Microsoft) or Keynote (Apple) presentation ?
What is wrong with making few Manipulates, export them each to separate CDF, and you got your presentation there.
You can make a web page, each page can be contain one CDF. Each page will be like your one slide.
You can click a link to go to the next web page.next slide, and in it you can run the next CDF.
To insert a CDF into a web page, is very simple, like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY >
<p><script src="http://www.wolfram.com/cdf-player/plugin/v1.0/cdfplugin.js"
type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var cdf = new cdf_plugin();
cdf.addCDFObject("source", "source.cdf",840,670);
// ]]></script>
<img id="source" src="screen_shot.png"
alt="screen_shot" />
</BODY>
</HTML>
Put your cdf files in the same folder.
If you know latex, you can write latex document, make them as sections of a document, insert the HTML code in latex, export the latex document to html using latex2html. (this is what I do with my web pages). Like this
\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{html}
\begin{document}
\begin{rawhtml}
<p><script src="http://www.wolfram.com/cdf-player/plugin/v1.0/cdfplugin.js"
type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var cdf = new cdf_plugin();
cdf.addCDFObject("source", "source.cdf",840,670);
// ]]></script>
<img id="source" src="screen_shot.png"
alt="screen_shot" />
\end{rawhtml}
\end{document}
Then type latex2html foo.tex and that will generate the html for you. This way you can write real mathematics using Latex, and have the CDF in the same page we well, next to your equations.
All what you need for your presentation is a browser and the CDF plugin installed.
Or, you can simply keep everything in Mathematica itself, with a Manipulate in each section of a mathematica notebook, and just run the notebook inside Mathematica at the presentation.
Forget about power points and PDF's. That is so boring and old fashioned now :)
CDF is the way to go.
If your presentation laptop has Mathematica you could use MMA itself to give the presentation. It has a presentation mode.
Yes you can! I was wondering the exact same thing for a group presentation where other members were making PowerPoint slides. It's simply a matter of embedding the slide into an HTML file then embedding the HTML file in a PowerPoint slide. It's not perfect, but it works surprisingly well and you maintain full interactivity.
Export a video file, eg by
an = Table[
Plot[Cos[x/a],
{x, 0, 20*Pi},
PlotRange \[Rule] {-1, 1}
],
{a, 0.1, 10, .1}
];
Export["~/Desktop/an.avi", an]
I don't think it is possible to do what you want, since even if you can use the standard java script to link to the CDF, there is no properly integrated CDF plugin for powerpoint, keynote, a pdf viewer etc...
Either, as other people have suggested, learn how to use Mathematica/CDF to make presentations - see the discussion in belisarius's SO question. Or use a html-based presentation.
It is possible to export a keynote presentation to html. Here's a tutorial that shows how to tweak it to get a navigation toolbar and make movies work - and an example is here. You should be able to embed a CDF (see also Walking Randomly) using similar modifications of the outputted html.
Alternatively, create a HTML based presentation from the start. S5 is a good opensource html slideshow. It uses markdown, so it's just like writing in stackexchange sites! Instiki includes a S5 mode. You can include raw-html in the presentation, so you should be able to embed CDF's like above.