Clickable prototype contains SVG instead of image - adobe-xd

We are developing clickable prototype using Adobe XD. We know that the prototype can be exported as SVG file using the export option. We wanted to know if it is possible to have the clickable prototype which is shared via URL contain SVG instead of a single image. If not directly through XD , does any plugins help in this?

The XD prototype view can't be expressed as plain SVG because it includes animation, interaction, and rendering features that SVG doesn't support. And since XD is tech-stack agnostic, it doesn't try to generate complete production code for you.
There are a number of XD plugins that can export code for several different web frameworks – with varying degrees of fidelity and varying degrees of turnkey production-readiness. You might be interested in plugins like Yotako, Flutter Export, Generate Flutter Code, Fireblade, Component to Vue, or Export as React Component.

Related

Is there way to use SVG element inside Adobe XD plugin Dialog?

I'm trying to import a SVG using <img/>. Seems like it's not working. Any workaround for this issue?<img src="./assets/icon.svg" alt="Icon">.
There’s not currently a direct workaround for this. Lack of SVG support in the UI APIs is noted as a known issue in the docs.
For now, you’ll need to use another image format.

Animated icons with java and CSS

I'm trying to use FontAwesome animated icons in my JavaFX application, which is written without #FXML.
When I'm using normal Fontawesome icons in my application I'm getting them as a Text object using GlyphsDude.createIcon(icon) from the GlyphsDude library. Is it possible to keep using the same concept and incorporate animated icons in this?
I couldn't find any prior art on how use animated FontAwesome icons in JavaFx applications without using #FXML.
I tried adding the fa-spin class when loading my icons. Like this:
Text icon = Icons.getIcon(FontAwesomeIcon.COG);
icon.getStyleClass().add("fa-spin");
But that does not work. Probably because the font-awesome.css and font-awesome.min.css that contains the fa-spin class isn't found. So I tried including them by doing:
scene.getStylesheets()
.add(getClass().getResource("xx/font-awesome.css").toExternalForm());
scene.getStylesheets().add(getClass().getResource("xx/font-awesome.min.css").toExternalForm());
But it turns out that these CSS-files isn't compatible with JavaFX (I think), since they give me an "CSS error parsing file" error on a number of lines when loaded.

How to access createJS child from openFL framework?

As I am targeting HTML5 using Adobe Flash CC, the resulted HTML5 output is based on createJS library.
Is it possible to use an openFL for HTML5 project to manipulate createjs based children that where exported from Flash CC ?
I want to make the best of the two worlds, to use Flash CC time line, and manipulate using haxe, is this possible?
The content that is exported from Flash CC is just a JavaScript version of the Flash Library. For example, all library items are accessible on the global libs object. If you check out the exported HTML, it just creates an instance of your "main" symbol (usually named after your FLA), and stores it on exportRoot.
var exportRoot = new lib.Main_Symbol();
Using this approach it is super easy to create JS applications using Flash to create assets and animations.
I don't know how this applies to Haxe, but it has been architected to be very readable, reusable code.

KendoUI web custom theme

I am using KendoUI web widgets in my enterprise app. I need to create/customize a Theme as our corporate branding. After reading the docs, I realized that there is a tool called ThemeBuilder for this purpose available here http://demos.kendoui.com/themebuilder/web.html
Now I need to understand the logic behind the color options this tool (ThemeBuilder) shows me. All the Themes are based on 4 primary colors as shown in the selection options. However, when i try to modify/customize any theme, I found that there are more to it? How the ThemeBuilder is calculating all other colors besides the 4 Theme colors?
If I need to create my own corporate theme with 4 primary colors, how do I pick rest of the colors as shown in ThemeBuilder?
On the second note, ThemeBuilder can generate css and less. Is there a way to generate Scss as we are using scss in our organization?
Does Telerik provide scss version of their source styles. I know they provide css and less in their source directory. But converting them to scss looks like a nightmare to me!
Appreciate your help.
Sam
I have to manually convert less into scss.
I have variablized their stuff make it compatible with org's themes and colors.

Displaying a map in Quicklook preview

I'm writing a Quicklook generator plugin for a GPS logging file format (.fit files). I've shoved something together which loads the file and plots the path using the NSGraphics/NSBezier stuff:
(the horrible code for the above can be found here)
This is fine, but it would be much nicer to display this over Google Maps data or similar (the recorded tracks cover a fairly small distance - e.g the above covers about 20km by 10km - too small to display on a single map of the earth, so the map needs to be dynamically loaded somehow)
Things I've tried so far:
Returning HTML which shows a Javascript GMap instance. Doesn't work as the Quicklook HTML rendering doesn't allow Javascript (or Flash, Java etc)
Returning HTML containing a static Google Maps image. Quicklook wont load remote images.
Getting a NSGraphicsContext and displaying a standard WebKitView into this, modified from some thumbnailing code - this errors because you cannot initialise WebKit from a secondary thread (which seems to work fine for thumbnails, but not previews?)
With 2. I could possibly download the static Google Map image in ObjC, then display that with HTML, but the static map isn't ideal (fixed size so no zooming, and potentially slow to initially load)
I came across MacMapKit which I've not tried yet, but since it's WebKit based, I suspect it will have the same issue as 3.
Is there some way of displaying a map in a Quicklook that I am overlooking?
trying to get Google data directly in your generator (whatever way you try to do it) is not possible as the host of your plug-in is sandboxed and denies any connection to the network
trying to return HTML data and some clever javascript won't work either as the Quick Look panel also protects against network access for security reason and there is no public way to work that around
I am afraid you won't find a real solution to your problem, except by using your own map data.
Still, your use case is interesting and you should file a bug to Apple's Bug Report website.

Resources