Exporting blockly to google's kit - blockly

I created a blockly app with google's blockly workspace creator. I created a workspace and a bunch of new blocks. But... when i export the files,they export as .xml files,but how can i create a google page with my workspace and blocks? I mean, i downloaded google blockly kit (the one with files "appengine","blocks","core","demos" etc.) for web. But .xml files are not compatible with the kit (or i think). How can i do it?
I searched a lot,finding a lot of unuseful answers. Can someone help me?
P.S. Sorry for my bad english,i'm italian.

Most often the Blockly XML is embedded within the HTML with an id=".." attribute, and a CSS rule that sets those to display: none. In this case, the XML DOM is extracted using getElementById. You can find many examples of this style in the Blockly demos.
My preferred solution is to use a JavaScript string constant. If you can get by without using Internet Explorer, a multiline template literal makes this easy:
const myToolbox = `
<xml>
<category name="Logic">
<block type="controls_if" />
<block type="logic_compare" />
</category>
</xml>`;
Otherwise, embedded it in JavaScript takes little more finesse:
const myToolbox =
'<xml>' +
'<category name="Logic">' +
'<block type="controls_if" />' +
'<block type="logic_compare" />' +
'</category>' +
'</xml>';

Related

Web based code editor with auto completion

guys
I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.
I'm using ACE editor.
This is what I get while trying with autocompletion.
I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.
What I want is this.
In this pic as you can see I'm getting suggetion related to os package only.
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
Reference: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
HTML, JS, CSS Based
Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
Create <script> </script>
Build the autocomplete
Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...
E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.
I know, this is only an plan how to do is.

Embedding clickable flowchart in kentico 10 website

Currently our content editors creates a flowchart in visio - and now we're trying to figure out the best way of allowing them to embed that in a kentico website.
We get them currently to export and add as a media library image which doesn't allow the content editor to hyperlink items in the flowchart to pages which could have more information.
Some other options we have considered:
exporting visio flowchart to pdf and displaying that pdf in the browser instead of the image.
third party tool that would host the flowchart content which we then embed into the kentico website using an iframe.
visio exporting the flowchart as html - but that includes a folder and various files which seems painful to integrate with our kentico website.
Just wondering if anyone else has any recommended approaches that we might not be considering?
Essentially there are many ways to solve this issue. You can go with a classic way (image with set of areas defined)
Use some online tools like http://www.image-maps.com/ to create an image map. You can use static text web part and paste your html there:
<img alt="someImage" src="~/Images/someimage.jpg" usemap="#ImageMap" />
<map name="ImageMap" id="ImageMap">
<area shape="rect" coords="727,25,907,89" href="http://www.google.com" target="_blank" alt="Your Alt Text Here..." />
<area shape="rect" coords="309,25,646,98" href="home.aspx" alt="Your Alt Text Here..." />
</map>
You can even clone for example editable image web part, adjust its properties to your needs (i.e. to area map property), but you still have to use outside tools to create an image map.

Google doc no preview available error

I used the google doc to display the pdf file in web broswer. It was working fine before. Now it gives no preview available. Most of the time it gives the blank screen with no preview available but sometime it opens the pdf. However i noticed that if the size of the pdf is small, it works fine but if the size is a bit larger with 10-100 or more pages, the no preview is shown.
link:
https://docs.google.com/gview?embedded=true&url=http://trafficpolice.gov.np/traffic/uploadfiles/56a0e8156d4ea.pdf
code:
WebBrowser view = new WebBrowser();
view.setURL("https://docs.google.com/gview?embedded=true&url=http://trafficpolice.gov.np/traffic/uploadfiles/56a0e8156d4ea.pdf");
I've just tried to encode the & character to %26 and worked fine for my case.
I had the same problem, in my case, I enabled google drive api and add key attribute to my iframe:
WebBrowser view = new WebBrowser();
view.setURL("https://docs.google.com/gview?key=YOUR_API_KEY&embedded=true&url=http://trafficpolice.gov.np/traffic/uploadfiles/56a0e8156d4ea.pdf");
problem resolved after 1 day
In my case, pdf file name contained '&' character. Once I removed the ampersand char, problem solved.
Hope it helps someone.
I added this code to my web.config. Works every time after these changes.
<basicHttpBinding>
<binding maxBufferPoolSize="2147483647" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647" messageEncoding="Text">
<readerQuotas maxDepth="2000000" maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxNameTableCharCount="2147483647" />
</binding>
</basicHttpBinding>
For those who are trying localhost. You CANNOT use localhost to view previews. You can tunnel port 80 with ngrok and then it will work.
I used object instead of iframe, works fine in my application.
Several things that may cause this:
The browser you are using to upload these files.
The size of the file you are uploading.
Password/Permission of the files are set to private.
Quick Fix:
It has been noticed that most of the users who encounter this have been using Firefox (3.6.6 in particular). Try uploading your files using IE8 and clear your cache.
This issue has been further discussed here.

How to display an pdf once uploaded with jsf

I have created a file upload function which saves all the uploads to a certain place:
private String destination = "D:/Documents/NetBeansProjects/FileUpload/uploadedDocuments/";
Is this a good place to store it? Should I store it some where else?
Is it possible that once the upload is complete for a page to be displayed showing the user what they have just uploaded, like a box below showing a preview? And how would I go about doing this? I am new.
I have figured it out how to display a plain txt file and an image, however it is the pdf that is confusing me.
As to the upload location, which seems to be the IDE project folder, that's absolutely not right. You should choose a configureable and fixed location somewhere outside the IDE project folder. You should not rely on using getRealPath() or relative paths in java.io.File. It would make your webapp unportable. See also this related question: Uploaded image only available after refreshing the page.
Whatever way you choose based on the information provided in the answer of the aforementioned question (and all links therein), you should ultimately end up having a valid URL pointing to the PDF file in question such as http://example.com/files/some.pdf.
Then, you can serve the PDF file on a webpage using either an <iframe>:
<iframe src="/files/some.pdf" width="600" height="400"></iframe>
Or an <object>:
<object data="/files/some.pdf" type="application/pdf" width="600" height="400">
some.pdf <!-- This link will only show up when the browser doesn't support showing PDF. -->
</object>
Keep in mind that showing PDFs in a browser is only supported in browsers having Adobe Reader plugin. Note that the <object> approach will gracefully degrade to a link when the browser doesn't support displaying application/pdf content.

How can I add extra html tags to Syntastic plugin for Vim?

I use a CMS which uses custom tags that are parsed before everything on the page, for example. This can appear in the standard file formats for .html, .php
<v:img for="portfolio" />
and it will create an an image based on all the specifications in the backend..
also things like
<v:php>
// Code here is different than <?php ?> which is rendered after v:php
</v:php>
and
<v:collection for="blog">
<h1><v:text for="title" /></h1>
</v:collection>
Thats it as far as format goes, there are hundreds of tags but they are either closed or self closed just like html.
I'm trying to add them to the Syntastic plugin for Macvim so I don't get unnecessary errors but this is a bit over my head :/
In /path/to/syntastic/syntax_checkers/html.vim, look at line 26 let makeprg="...".
You can see that there are a bunch of new HTML5 tags added to the tidy command, you should try to add your tags there.
See the tidy documentation if there are any caveats.

Resources