I started building out an Angular 7 HTML5 Canvas Zoom/Pan component starting from Neal Miller's project. https://github.com/Durwella/zoomable-canvas.
After a few modifications, I finally came up with something like the following. Pretend I'm making a Fire Detection Application and I want the circles to be detector device angular components that respond to SignalR updates. Could basically turn red, green, or yellow.
Does anyone know how, or have a package, to do Angular 7 component overlays over top of the canvas? Do I even need to use the canvas? Should I use absolute positioning? I'm basically just looking for some best practice guidance here I guess.
Thanks in advance for any help!
I was wondering if anyone has any insights how I may add Angular Components
Related
I just started working with Polymer and their starter kit. I want to have a standard hero image with a text overlay - naturally, I want the image to be responsive. I've gone through all the Iron and Paper elements and can't seem to find anything that works.
I've tried using the Iron image, Flex layout, and Media queries in various compbinations to get what I need, but to no avail. I've found several 3rd party components like x-imager that will do the trick, but I would've thought such basic functionality would be available right out of the box like it is with pretty much every "responsive" framework - and yes, while I know Polymer isn't supposed to be a framework, I guess I expected it to be part of their component library. And yes, I also know I can create a simple CSS class that does that like Bootstrap does too, but I'm looking for native functionality, out of the box here.
Is there something I'm missing here or should I just create a custom component and move on?
I'm trying to develop a card game with Flex, and I was wondering if there's a way to create an horizontal list (the cards that I have in my hand) having the elements overlapped, like you can see in this example made with openflux:
http://www.ryancampbell.com/flex/StackListExample/StackListExample.html
the thing that's missing here is the possibility to swap the cards with drag and drop.
Any ideas on what I could do to get a similar effect with an horizontallist based component?
If you are using Flex 4, its a pretty straightforward custom layout.
some links to get you started.
RIA
Adobe TV
Yo
I was looking at a 3D layout the other day for Five3D (an opensource 3d api), and saw an example of a Card game/layout that may give you some inspiration:
http://www.danielenstrom.com/solitaire/
I am developing a website where i am using CSS based layouts with absoulate positions. I would like to know is there any plug in for IE 8 which will tell based on the mouse where i am moving with the position (In Pixels).
I want to know with out any JS. I am looking is there any external plug in which will allow me to find out the position.
Do you mean a plug-in for the browser that will show you the mouse cursor’s position, whilst you’re developing the site?
I haven’t heard of any plug-ins, but you might try Andy Budd’s layout grid bookmarklet.
Doesn’t quite give you the mouse cursor’s position, but might make it possible to make it out.
I’ve been stuck in the process of constructing a framework for a window to hold my web apps. With the help of JavaScript, the window will change its color, size, and position on the page. It is so much like GUI apps in Windows OS.
Borders must be custom, that is, they will change their color for that of the window, but will be shadowed a bit with opacity of about 50%.
The head must have the same color as the window do, but will have an image with some alpha channel value as a background. (That will polish up the head of the window.)
My problem consists in that my CSS for this challenge is sort of hard to manage via JS (dynamic part of the app). So, I am here to ask some help from CSS experts. If you know how to make CSS a snap, your help will be very much appreciated. As for now, I am frustrated to find no way to write a clean and simple code.
P.S. I am willing to support Internet Explorer 6, too.
Edited: Please, have a look at the visual representation of the problem: http://savepic.org/261861.jpg How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
That "transparent borders" thing you mention is not entirely trivial, but definitely solvable. Now I'm still not entirely sure in what direction you are looking for help - how to structure CSS vs. JavaScript, or how to solve the specific problems you mention?
Either way, have you already looked at JQuery Dialog? It's a bit much for that single problem (having a window and resizing it) but it brings a full-blown API and templating system that has solved many cross-browser problems already.
If you don't want to utilize a framework, I would say don't worry too much about JavaScript accessibility. In essence, when you build clean CSS, you can access it well from JavaScript. A few thoughts on good CSS are in this question.
I need to draw Line, Circle, and rectangle by mouse drag on canvas and then i need to to move and resize the drawn shapes.
How i can perform this in flex as i am new on this platform.
Please suggest me the method or refer any example with source to make it understand to me.
Please Help.
Thanks in Advance.
There is no such native feature in Flex. But, there are a couple of options, commercial and not:
http://www.rogue-development.com/objectHandles.html (free)
http://www.flashcomguru.com/components/flex_whiteboard/whiteboard_demo/ (payed)
You can do it by hand, if you wish, it's not very hard. I advice you to use Degrafa (http://degrafa.org/) for the actual drawing since it is way easier than native drawing API and it is opensource.