I'd like to export my prepared quartz composition (I'm using Quartz Composer 4.6) to .mov.
I tried to it with "File > Export as a QuickTime Movie", but it asks me about duration time and after clicking OK it creates a file .mov what is "zero kilobytes".
I wonder it's a bug or I'm doing something wrong? How can I export it to .mov in another way?
Quartz Composer's built-in "Export" command takes the composition and wraps it in a special kind of QuickTime movie — in order to play this movie back, you need a Mac, you need QuickTime Player version 7, and you can't use any "unsafe" plugins (i.e., almost all 3rd-party plugins). So, even when it works, it's of limited utility.
There are a few other options for taking the visual rendered output of a Quartz Composition and turning it into a normal movie (which you can share with non-Mac users) —
Use qtzrendang — it renders composition frames to a movie file.
Use Kineme QuartzCrystal — it renders composition frames to a movie file, with additional features like antialiasing and motion blur. (*)
Put your composition inside a Render In Image patch, and feed the output to the Movie Exporter Plugin.
(*) Disclosure: I'm one of the developers of this software.
Related
Jetpack released a tool called "Glance" that we can replace RemoteViews XML widgets.
I wonder how it converts compose layouts to RemoteViews.
It does use XML underneath. It uses compose runtime to parse the node-tree, then it takes the corresponding pre-generated XML file and uses remoteviews to modify it's attributes. Then it composes everything into a single RemoteView that is sent to the AppWidget manager.
You can dive in into the code yourself. It's open source ;)
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:glance
One of my goals with learning dialogFlow and programmatic webhooks to handle intens and responses is to see if it's possible to create an audio rich quiz.
In this quiz there's a section where I would like to have multiple questions/responses with a continuous audio background playing at the same time. Is this possible or must the Google Assistant or Google Home Speaker be silent when waiting for user input?
Also, if it is possible with the above, is it also possible to make crossfades between audio backgrounds triggered by events of some kind? That is like a change of scenery without interruption/silence.
There are a number of approaches to this, depending on your exact needs and limitations you have. Not everything is completely possible, but you may be able to get close.
Dialog with Background Audio
The easiest way to do this would be to use Google's version of SSML with parallel elements using the <par> and <media> tags. (But be aware that these are non-standard tags, if you want to be able to use them elsewhere.) With this, you would have one "track" for the dialog and one for the audio. It might look something like this:
<speak><par>
<media xml:id="track-0" begin="0s" soundLevel="+0dB">
<audio src="https://actions.google.com/sounds/v1/crowds/crowd_talking.ogg" >crowd talking</audio>
</media>
<media xml:id="track-1" begin="0.75s" soundLevel="+0dB">
<seq>
<media>
<speak><p>Well, hello there</p></speak>
</media>
<media begin="2.0s">
<speak><p>How are you?</p></speak>
</media>
</seq>
</media>
</par></speak>
Is there an easy way to design this?
You might want to check out the Nightingale Visual SSML Editor which has also been released as an open source project. It can help get you started, but tweak the SSML yourself.
What about cross-fades?
Sure! Just indicate that you're fading one track out, and fading another in, starting at some offset to the end of the other track.
<speak><par>
<media xml:id="track-0" begin="0s" fadeOutDur="6s">
<audio src="https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg" >digital watch alarm long</audio>
</media>
<media xml:id="track-1" begin="track-0.end-6s" fadeInDur="6s">
<audio src="https://actions.google.com/sounds/v1/human_sounds/baby_cry_long.ogg" >baby cry long</audio>
</media>
</par></speak>
And I can have this playing while the microphone is open and listening to a user?
Well... no. Not with SSML.
If you think about this as a conversation with someone, we typically require audio cues to know when to speak. Asking a question and then giving quiet space to reply is an excellent way to do this. In person - we have other cues (we can see the other person pause, for example), but if we just have audio, we only have silence.
The Assistant works based on this sort of conversational model, so wants to make it clear to the user when it is their turn to speak.
You can argue that for some kinds of "conversations", it is normal to have a different audio cue that prompts the user. And you'd be correct. But the Assistant needs to be a general-purpose Assistant.
Then how can I do this?
Since you're making a quiz, you can use the Interactive Canvas to create a page with HTML and JavaScript. With this, you can use an <audio> tag or the MediaStream JavaScript API to create the background audio. With this, you can have the microphone open while this media still plays, but there isn't any event that lets you know when the mic is open so you can duck the audio, which is a bit of a downside.
This gets around the audio-cue issues because there are visual cues when the microphone is open.
You can also use the SSML <mark> tag to trigger events in your JavaScript so you know when the SSML from the server begins, ends, or hits other points in the audio stream.
If there are visual cues, can I use the Interactive Canvas on a smart speaker?
Well... no.
But what you can do is use runtime surface capabilities to determine if the Interactive Canvas is supported.
If it is - use it (possibly along with SSML).
If not, use the SSML method.
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text
My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..
I have a Mesh file (XML format) created in Maya.
I would like to display it in the browser with some additional options for the user, like rotating an zooming in and out.
What should be the best and easy method to do so?
(SilverLight, HTML5/JS/Canvas, Flesh)
I would really like to try HTML5/Canvas - is there any libraries that know how to do it?
Thanks.
I would really like to try
HTML5/Canvas - is there any libraries
that know how to do it?
You can visit this site learningwebgl
There are a lot of lessons and demos. On the right side there is a list of frameworks.
But you need browser support for webgl...
If you are willing to export your file in Collada/DAE format (which is basically XML), there are some online WebGL framework demos that show that a DAE file can be displayed the way you wish.
The frameworks that I've seen this for are GLGE and SpiderGL.
(WebGL is the 3D version of HTML5/Canvas.)
you can export your maya scene with http://www.inka3d.com and then manipulate it with javascript