Merken

SVG Animation and Interaction in Ember

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
and it worked in the in the morning my concern whether and I want start up call by a right where I use number to build applications that advanced scientific research today I'm here to share with you some of the things that I've learned while building custom visualizations for scientists now before I was a developer had background in biology so when I took this job I thought to myself and you need to build so many graphs scientists will of graphs so I did what I always do and I read a book it was an introduction to a popular charting library so that on my 1st day of work I was so prepared to build a brass bar charts line graphs scatter plots you name it I was writing but then by 1st visualization task human it
was kind of overwhelming I need to build a technical diagram that was interactive that would help scientists to view the historical data I needed to be able to switch between 3 different units of measure and I needed to have a dialog that would update in real time with an objects rotational position in space these things were not in my book but I knew that I needed to give scientists something rather than just some numbers with brain on a page so I thought to myself what I know I
knew from my book that a lot of popular charting libraries like D 3 like I charts they're essentially helpful wrappers for as genes SEG stands for Scalable Vector Graphics they're drawn dynamically by the browser so no matter what size the image is it's always clean and crisp unlike J. pages which are pixel-based I also knew that
SCG is were kind of sort images made out of code technically XML this size position and appearance of different shapes on the page were all controlled by attributes and styling that looks a lot like CSS so thank you I also knew that SCG is were easy to find and make a lot of imaging editing programs are vector so good here uses Adobe Illustrator are and for people as anyone used Inkscape great so as you have heard of it before Inkscape is a free open-source alternatives illustrated my experience prior was an illustrator and I found that I could acts were my Illustrator files as SVG it's and then copy and paste the XML into my projects there are also plenty of Creative Commons sources of SCG assets to if you wanna make your own buttons styles and diagrams
and I know a thing or 2 about number I knew that I had an ambitious apt to build and I really wanted to see how far can I take this statement that number was more productive out of the box at
the so I decided to see how far I can get without any add-ons without any node modules like these turning an animation libraries just embers
today we're going to walk through a couple different examples of some things you can build even if you're new to SVG is or even number I made a few minimal demos that you can play around with so you can see for yourself how the code works and I'll share a link to those at the end of today's presentation my goal today is to give you
enough information to be dangerous so that you'll be ready to tackle the use cases like the 1 I described at the beginning the examples will be super simple but hopefully you'll be able to see how you can extend off from for so let's start with the basics of SVG
that if you open up an SVG and an image editor you'll see a picture but if you open up that same file in your text editor what you'll see is an XML document kind of like this it has DOM elements and so
SEG elements can be styled with CSS whether embedded styling like in this example in Lyon were external the but you should know that a few things work a little bit differently for example some style actually is that you know off the top of your head are gonna work for as Jesus the background color becomes filled out lines becomes stroke so you can even use CSS animations on your SVG if you're here yesterday you heard Jessica speak about a few different approaches to animations and a lot of them will work in this environment as well this animation particular users keyframes which is part of CSS 3 and I specifically wanted to share with you this example by serous weight on because of Sarah's articles were what really helped me get started with building my own visualisations even after just reading to retrieve them so I really encourage you to take a look at her work finally you need to
understand what it means to say that STG is follow OK order there is no such thing as the index when you're working with plain as the cheese so whatever is lowest in the DOM is what forms the top layer that's visible to the user so if this painting was an SVG the groups of trees and shrubs in the foreground would the lowest in the down and therefore the top layer visible because you might also notice here that I'm using this type G ginés stands for groups groups are convenient wrapper for organizing objects and shapes with in your as Fiji is on applying classes without changing anything about the way out of your images by
et so with the basics out of the way let's talk about how to number of 5 these STG now to be totally honest there are some unusual pitfalls in as is in amber but I want you to know that when I build my 1st about using STG as it was in a number I was 1 month into my 1st job and I had learned how to code for months prior I tell you this so that you believe me when I say that SCG is are a fund to build and their straightforward to debug so let's start adding some actions so in this case we have a
technical that a grammar that a user can interact with a raspberry pi but click reveals a label for each piece now each part of the Raspberry Pi each individual component is actually composed of many different shapes within that SPG so in order to trigger actions when the user clicks on any part of it we place the action type within the group this is really a lot like adding actions statives rate so in this example when a user clicks on something it sets the heading to be the name of that parts In my app for scientists when I actually did was a Humbert would show the label and then a click with taking the user to our page where they can view historic information about that part and since I use emperor to handle the actions I was able to manage my applications stayed in the exact same way that I would have if these were buttons were links so historical data is useful but a lot of scientists are interested in getting real-time information from their devices and sensors like temperature for example and there are many different progress meter or thermometer tied add-ons and packages available but let's say that you have something that hasn't really specific requirements maybe it needs to look different based on different conditions of the lab so here we can write a computed property temp status that would apply different styling based on different conditions and we can control the thermometers level by using the high property on a rectangle that forms the height of the thermometer but in SVG is cheers when changing the high-dose chain so that's not really what I wanted that Fisher and this
brings me to the 1st pitfall of working with SPG is the top
left corner is 0 0 that's the origin as a scientist I found this to be super strange and it took a long time for me to get used to this shapes within an oppositions using the x and y coordinates within the as the GB you box you can kind of think of the box as the frame that's visible to the user so in this default case if something had negative x y coordinates you wouldn't be able to see that she so all of this takes some getting used to you I think of it as kind of like when you learn CSS for the 1st time so when 0 0 is
in the top left corner it really affects where your animation looks like so here's the default behavior of a rotation and this is the default behavior of changing the height but we can do something about that those tha
to fix this problem I use the transformed where the rotation transform you can say that x and y coordinates of the axis that you want to rotate on so I set my taxes as the toxin er of the rectangle that form the thermometer heights and then I rotated by 180 degrees now here's what our phenomena looks like so again this is a little bit weird right but I can see with my own eyes when something's not going right and I have lots of stack overflows and code patterns and demos and blog posts to guide me words fixing these kinds of strange things so I was feeling pretty
confident after solving this thermometer challenged so I decided to drive off the edge of the map could I use em a data to generate shapes on the fly and I could use the each helper and components in my templates to display their shapes in a very inch way in although it seems like the obvious next step googling really didn't yields many results for me about using Amber data in this way and we're about to find out why shortly when I send
data down to a component using in each helper this is what rendered in my graph no data points no error messages nothing this is why I think there are many articles about using components with is people see best and they think all it must not work in amber but I want to be sure so I opened up the inspector and I started dating around
which brings me it's that Parliament to
unsurprisingly if you put a dative inside of an SVG it breaks things by D. fall and the components are wrapped inside of that gives that Amber itself generates but
luckily we have this nice rapid that we can use that will affect are you are laid out so you pass the GED as cadmium whether in your components JavaScript or the template then then the hammer will wrap the component in group instead once I made this change my data points rendered and this was awesome because now a user could click on data points to add their notes and commentary I could use Amber data to persist changes and save state so next I wanted to add some labels so that when a user hovered over a data point they would know right away what their interacting with that brings major pitfall
number 3 Ch
so when I was building this application I just sort of naturally groups each of my data points with its label in the same component but I found that my labels were obscured by other data points so in this example the circle and its label are rendered together so the next 2 data point is lower in the DOM and therefore that's the top layer visible so to get a better idea of this
problem let's watch the Koran render order stepping through the DOM so fundamentally unless sort of my data points I can't make any guarantees about what water they're going to show up on the screen the solution
here is to be thoughtful about peace order and how it affects your app that so what I did was I wrote and sort definition based on the y coordinates of those data points so that the data with the lowest y coordinate gets rendered and here's how that turns out tha I so now the points and labels of lower rows will always be lower and they're down and we've eliminated that overlap and the final pitfall
Ch
the if you're honest and Emma version of less than 1 . 8 you're missing out on some SEG functionality an awful lot of other things the solution is unfortunately upgrade your ass so that's the last of the pitfalls next I like to show you what it looks like when we put all of these things together so
the 1 can Austin think about building apps for science is that if you're doing it right you'll have some measurable outcomes at the beginning I told you a little bit about my 1st visualization projects and how I was determined to create something different than just numbers flashing on the screen I really wanted to help sciences improve their workflow and make the data more accessible and more clear and I'm happy to say that we have some pretty great outcomes so for the
scientists and we give them an interactive diagram to help them cannot rows and columns on in eating BAD device this example is greatly simplified by it will show you most of the basic components so by using if helpers bound classes and computed properties I can actually overlay and color code data right here on the diagram I can manipulate the data based on a click or by voice commands since I was also building an app that needed to be hands free I use the scatter plot approach that we covered earlier to generate each of these little circles since the arrangement of
those circles varied from experiment to experiment I also made a dialog
to display the rotational data that we have coming in from 1 of our senses the turns so that the scientists needed to make as part of their experience experiments had to be precise so in later iterations I even added targets of a dial also that they can see when they were closed to the poles
so how did I actually set this up behind the scenes and this is the model that forms 1 of those circles or data points and for simplicity and human readability each of my circles had a simple x y coordinates there was a whole number they corresponded simply to its rel and column in as a red then I use a computer property on the model or you could do this in a component to actually position a circle on the body of the SPG it so in cases where I needed to position something relative to that circle like it's a label this was really easy to do with Amber data and computer properties all I had to do was add or subtract from the circles of x y coordinates in order to place my label so on a
hammer over the circle I set this property show label to true and then position the label using the X Y that we set up in the component or the model right someone
about this rotation now what about the real time data 1 of my coworkers created a computer vision system that tracks objects rotational position and it was my job to display that sensor data in real time I decided to do that using a rotation transformed so the data that came into this object current orientation at a rate of 3 or more messages per 2nd I was a little bit worried about what that fast moving data with due to my STG is but what I found was that I didn't need to downsample by using data on STG is it just works the since we were asking users to report their estimations of these terms that they were making and we can give them a visual output this system made it easy for us to compare the differences between the changes of a scientist meant to make and the changes that we were measuring on our senses so we round the numbers the
this is where 20 times improvement in scientific accuracy and precision looks like With the right tools scientists make fewer mistakes and achieve more reliable results when I started this project this project all I had was some wireframes and mockups that in some ways I was almost afraid to create because I had no idea how I was going to actually build them within the ecosystem of our existing Amber at but outcomes like this are why learning how to build custom STG used is worth the effort so I'd like to leave you
with some considerations on learning resources the material and techniques that we've covered here today I would say this fall under learning and exploration mode if you want to put these practices into production you'll need to do a little bit more research to make sure that you're out will work for people who are just like you with a high-powered computer and the latest version of Chrome 1st step is accessibility it takes a little bit of work to make sure that screen readers can still navigate your STG interface but it can be done and there are some great tips if you just follow this link next up is cross-browser compatibility and my recommendation here is to test your app incrementally as you're building you don't wanna have any surprises on deployment day and there are some attributes of STG is that simply aren't are done in a lot of browsers yet lastly SEG is exported from popular software usually needs some cleanup and optimization in order to work well in your app they're not gonna look is me and clean as some of the examples that I showed you earlier but luckily there are some tools available to help you optimize your Fiji just by copying and pasting and and there's also some settings in each of those programs that will help to simplify the points and the that make up the shapes in your SPG is it's also a good idea to do a little bit of benchmarking because there is a limit to how many Don elements you should try to programmatically render animate and buying things to so the good news is that now that you know a few things about SPG is a few things about how to use them in amber you have an incredible wealth of knowledge available in the form of non Amber tutorials and articles as I mentioned before my favorite author on this topic is Sarah Sweden also once you have the basics down it becomes so much easier to understand and start using more advanced charting libraries these libraries are often they exist for a reason if you play around with SCG is in America using the techniques that you're familiar with these libraries will see much friendlier and depending on your use case they will save you a lot of time and frustration so some people have asked how would I know when I should try to make my own images as opposed to using 1 of these libraries the and what I would say it is if you can copy and paste somebody else's example and make some small changes using 1 of these libraries do that thing you don't need to do everything by hand but now that you know how you can be more prepared for that moment that you have to build something unusual so I'd also like to ask who here has used some of the techniques like I described today often so what I would ask you to do if you're able to is to write about it and share it with others
the so as some I would say consider the following with every month that goes by the line between design and development it's blurrier are websites sites are starting to look at and flow more like phone access things that you can touch things that you can talk to and more and more people with creative skills like vector illustration are joining the development community their relying on the quality of our teaching and the ease of use of art tools meanwhile meals developers are pushing the limits of our own creativity every day and what this means is that together we have an opportunity to build some really are some things as if you'd like to see demos
of these animations please follow this link here it'll take you to an ember twiddle and if you've never used Amber twiddle before it's kind of like J has been or code 10 but it's for amber and it's 1 of my favorite ways to explore new techniques and tools if you have any questions are you have some ideas about how you want to use the is a number of we chat later today or you can always find me on the number communities lack my name is John Weber and thanks for listening few
Task
Softwareentwickler
Rechter Winkel
Prozess <Informatik>
Programmbibliothek
Visualisierung
Zahlenbereich
Systemaufruf
Kartesische Koordinaten
Plot <Graphische Darstellung>
Ungerichteter Graph
Softwareentwickler
Gerade
Computeranimation
Subtraktion
Ortsoperator
Browser
Element <Gruppentheorie>
Diagramm
Zahlenbereich
Drehung
Dialekt
Raum-Zeit
Computeranimation
Homepage
Objekt <Kategorie>
Diagramm
Echtzeitsystem
Einheit <Mathematik>
Einheit <Mathematik>
Wrapper <Programmierung>
Programmbibliothek
Hilfesystem
Bildgebendes Verfahren
Subtraktion
Freeware
Ortsoperator
Zahlenbereich
Code
Computeranimation
Homepage
Spezialrechner
Open Source
Code
Äußere Algebra eines Moduls
Biprodukt
Optimierung
Bildgebendes Verfahren
Attributierte Grammatik
Shape <Informatik>
Befehl <Informatik>
Open Source
Quellcode
Vektorraum
Elektronische Publikation
Quick-Sort
Diagramm
Framework <Informatik>
Adobe Illustrator
Dynamisches RAM
Projektive Ebene
Demo <Programm>
Subtraktion
Installation <Informatik>
Flüssiger Zustand
Programmbibliothek
Green-Funktion
Zahlenbereich
Kombinatorische Gruppentheorie
Binder <Informatik>
Modul
Code
Computeranimation
Texteditor
Kreisfläche
Element <Mathematik>
Information
Elektronische Publikation
Graphikprogramm
Computeranimation
Shape <Informatik>
Bit
Gewicht <Mathematik>
Klasse <Mathematik>
Gruppenkeim
Indexberechnung
Element <Mathematik>
Computeranimation
Unendlichkeit
Netzwerktopologie
Objekt <Kategorie>
Bildschirmmaske
Automatische Indexierung
Datentyp
Wrapper <Programmierung>
Mereologie
Visualisierung
Kantenfärbung
Ordnung <Mathematik>
Ordnung <Mathematik>
Programmierumgebung
Gerade
Kubischer Graph
Cliquenweite
Schreib-Lese-Kopf
Subtraktion
Gruppenoperation
Gruppenkeim
Formale Grammatik
Rechteck
Zahlenbereich
Kartesische Koordinaten
Computerunterstütztes Verfahren
Computeranimation
Datensichtgerät
Homepage
Übergang
Schweizerische Physikalische Gesellschaft
Arithmetische Folge
Prozess <Informatik>
Datentyp
Meter
Zusammenhängender Graph
App <Programm>
Shape <Informatik>
Kategorie <Mathematik>
Objektklasse
Bitrate
Binder <Informatik>
Menge
Gruppenoperation
Verkettung <Informatik>
Konditionszahl
Mereologie
Attributierte Grammatik
Information
Ordnung <Mathematik>
Personal Area Network
Schweizerische Physikalische Gesellschaft
Rahmenproblem
Quader
Default
Computeranimation
Kreisbewegung
Demo <Programm>
Bit
Existenzaussage
Web log
Element <Mathematik>
Rechteck
Kartesische Koordinaten
Drehung
Code
Computeranimation
Minimalgrad
Pufferüberlauf
Rechter Winkel
Mustersprache
Wort <Informatik>
Integraloperator
Default
Kartesische Koordinaten
Resultante
Shape <Informatik>
Punkt
Graph
Kreisfläche
Template
Datenmodell
Computeranimation
Mapping <Computergraphik>
Komponente <Software>
Zusammenhängender Graph
Punkt
Plot <Graphische Darstellung>
Fehlermeldung
Zirkel <Instrument>
Kreisfläche
Zusammenhängender Graph
Computeranimation
Punkt
Mathematisierung
Gruppenkeim
Zahlenbereich
GEDCOM
Zusammenhängender Graph
Computeranimation
Aggregatzustand
Punkt
Kreisfläche
Kreisfläche
Wasserdampftafel
Gruppenkeim
Bereichsschätzung
Kartesische Koordinaten
Quick-Sort
Computeranimation
Volumenvisualisierung
Statistische Analyse
Punkt
Zusammenhängender Graph
Ordnung <Mathematik>
Touchscreen
App <Programm>
Datensatz
Punkt
Default
Punkt
Quick-Sort
Ordnung <Mathematik>
Quick-Sort
Computeranimation
Spezialrechner
App <Programm>
Lineares Funktional
Bit
Subtraktion
Konvexe Hülle
Visualisierung
Versionsverwaltung
Zahlenbereich
Projektive Ebene
Computeranimation
Touchscreen
App <Programm>
Kreisfläche
Kategorie <Mathematik>
Streuung
Klasse <Mathematik>
Plot <Graphische Darstellung>
Computerunterstütztes Verfahren
Overlay-Netz
Computeranimation
Magnettrommelspeicher
Diagramm
Datensatz
Ebene
Zellularer Automat
Zusammenhängender Graph
Punkt
Kreisfläche
Kreisfläche
Kategorie <Mathematik>
Default
Datenmodell
Iteration
Computer
Simplexverfahren
Dialekt
Computeranimation
Demoszene <Programmierung>
Komponente <Software>
Polstelle
Informationsmodellierung
Schweizerische Physikalische Gesellschaft
Funktion <Mathematik>
Ganze Zahl
Zellularer Automat
Mereologie
Zusammenhängender Graph
Ordnung <Mathematik>
Kreisbewegung
Orientierung <Mathematik>
Subtraktion
Ortsoperator
Mathematisierung
Zahlenbereich
Drehung
Computer
Dialekt
Term
Computeranimation
Informationsmodellierung
Prozess <Informatik>
Zusammenhängender Graph
Maschinelles Sehen
Kartesische Koordinaten
Funktion <Mathematik>
Schätzwert
Kreisfläche
Kategorie <Mathematik>
Strömungsrichtung
Physikalisches System
Bitrate
Objekt <Kategorie>
Echtzeitsystem
Polygon
Rechter Winkel
Zellularer Automat
Message-Passing
Resultante
Bit
Punkt
Momentenproblem
Minimierung
Browser
Mathematisierung
Versionsverwaltung
Computer
Element <Mathematik>
Computeranimation
Bildschirmmaske
Schweizerische Physikalische Gesellschaft
Geometrische Frustration
Software
Programmbibliothek
Inverser Limes
Optimierung
Bildgebendes Verfahren
Schnittstelle
Touchscreen
Attributierte Grammatik
Autorisierung
ATM
App <Programm>
Shape <Informatik>
Gebäude <Mathematik>
Browser
Globale Optimierung
Biprodukt
Binder <Informatik>
Menge
Rechter Winkel
Zellularer Automat
Benutzerführung
Projektive Ebene
Ordnung <Mathematik>
Vektorgraphik
Demo <Programm>
Web Site
Benutzerfreundlichkeit
Zahlenbereich
Inverser Limes
Binder <Informatik>
Softwareentwickler
Code
Gerade
Computeranimation

Metadaten

Formale Metadaten

Titel SVG Animation and Interaction in Ember
Serientitel Ember Conf 2017
Autor Weber, Jen
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/33650
Herausgeber Confreaks, LLC
Erscheinungsjahr 2017
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract Creative. Lively. Interactive. What if even a beginner-level Ember app could be all these things? SVG is a flexible, vector-based image format that lets you manipulate image elements in the same way that you already work with divs. It’s almost as simple to write a class binding for a star in a constellation as it is to write it for a checklist item. Learn how Ember’s out-of-the-box behavior can be used to build things like progress meters, interactive diagrams, and charts.

Ähnliche Filme

Loading...