Reusing Angular component with different input - html

I have ran into a strange problem that I'm not really sure where to begin investigating of what could cause it. I'm currently using a library, angular-stl-model-viewer that uses Three.js. I call a component that renders a 3D model. However, when I call the component again and add a different file both components have both parts even though each component was assigned one different part file.
Ex.
<div class="row">
<stl-model-viewer stlModel="model/teapot"
class="col-5"></stl-model-viewer>
<span class="col-2"></span>
<stl-model-viewer stlModel="model/other"
class="col-5"></stl-model-viewer>
</div>
2 different components first should just be a teapot with part in the middle
Image of both parts in both components
I feel like the component is being referenced as one even though it's there twice. Is there a way to make each invoke of the component unique and separate? Also I understand this may have been asked before but didn't really know what word or phrase to search. Sorry about this and thanks for the help.

Temporary fix might be :-
<stl-model-viewer *ngIf="showModel" stlModel="model/teapot"
For eg:- if you are changing filename in a method :-
changeFileName() {
this.showModel = false;
//file Name Changing Code Here
setTimeout(()=>{this.showModel=true});
}
As you won't get a fix soon. One use posted same question 26 days ago :-
https://github.com/tevim/angular-stl-model-viewer/issues/389#issue-605311429

Related

PrimeFaces with lazy loading and custom filterModes

I have problem figuring out how to incorporate filtering such as this: https://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
(for example that sales status)
into my lazy loaded datatable based on this: https://www.primefaces.org/showcase/ui/data/datatable/lazy.xhtml
The second example is my base (I only created Car according to the attributes and fixed LazySorter's compare and LazyCarDataModel's load so the applications does not crash and does what it should and it works for me same as the the example on primefaces webpage). So the basic filterBy is functional.
I realize that the filtering with Lazy Load is done in load() function but how to call that load with my custom filter? How to add those filtering methods used in FilterView? They use "PF('carsTable').filter()" in my case carTable but it does nothing. How to somehow connect it with my load function?
(I found several similar but not same problems and solutions or and I tried to decode and use them. I did not manage to make it work so far.)
Additional challenge to solve (if someone would be so great to care :D): Separating those filters into my own buttons not embedded into the datatable (like commandLink or commandButtons).
I'll be grateful for any help. If you need to see my code I can provide it but those examples are basically it and its nicely structured and formated.

Get a tooltip by mouseover with Fusion Tables

As a beginning self-made amateur programmer I’m currently trying to get some things done with Google Fusion Tables.
I made a map with markers and got the HTML of that map. But I wish to add the function of a tooltip by a mouseover of a particular marker. I found a tutorial to work this out but I can’t enable the tooltips.
The following link shows the progress so far: http://jsbin.com/cipejicewo/1/watch?html,js,output
1 I don’t have to change something in this script that fits to the specific Fusion Table where its linked with, do I? When I do have to change the javascript, what are the specific elements I have to rename?
2 How can i call google.maps.FusionTablesLayer.enableMapTips(options)? And where do I have to put this whole ‘function init’ code in the html-file? Directly in the script that described above? Off course without losing the functions that the html already provides. Besides that, I get that I have to change the tableid and change the select column and geometry column name, but is there something more I should change in this function I'm going to add?
I'm struggeling with it now for days. And I'm out of options, so every help would be welcome. Thanks in advance!
It's not clear what your code currently looks like, but these 2 things you'll need to do first:
when you use another FusionTable than the example, make sure that the table is public and downloadable
You must use your own key(it's the variable apiConsoleKey in the example). Follow the steps in Acquiring and using an API key to get a valid key.

Code for A Graphical User Interface window

How would someone go about coding a 'window'? I'm starting to make a GUI, and I want to learn how to code one. One that can be skinnable, and one that actually loops and creates itself at runtime. I understand that this might be a bit vague, so I'll add details.
One that actually 'creates' itself. Most GUI tutorials I've looked on depends on an 'image' that just gets added on the screen. I want to be able to use skins in my windows. One where my 'skin' is just a collection of 'borders'. Then when I insert window.create(50,50) where 50,50 is my height, width, It would just create that window, following the skin.
I understand that it probably follows just like when a language draws a rectangle, it just follows a different set of rules (maybe?). However, for all my Google-fu skills I cannot find a tutorial that teaches me this.
Please Help. I didn't include the language I used as you can see, because I believe I just need to know how to create one. Anyway though, I am using Actionscript 3. A tutorial would be just fine, or even A SINGLE CLASS THAT HAS THIS FUNCTIONALITY, I'll just study the code. Or if you know one, maybe a whole book about GUI and programming it :D
Pure As3.0 GUI coding is quite troublesome. I try to Googling, but not come out well. anyway for my case, i generate using a SWC, and Class Mapping and Customizing. but i'm not sure best way. in other way i use a bit101 library. this is gives me want Window, Charts, Componets easily of high abstraction. see the below image.
It can be pretty hard and complicated to do, or very easy, it just depends on how flexible your solution should be. You need firstly to design a structure of your program and approach to the problem.
I like to go from the image of how it should look like from API point of view. I think I would create a GUI element like this:
var wholeGui:MyGUI = new MyGUI();
var window:IGuiElement = new GuiWindow(dataObject, skinObject);
wholeGui.addElement(window);
So what would you need?
1) Object that would manage all GUI elements. Why? Simply because your GUI elements shouldn't be destroyed by themselves if user will click "X" on your little window. The wholeGui object would manage them and listen for any events including those that would destroy them. You may consider creating custom events for interaction between the wholeGui object and your window object if this interaction is going to be complicated.
2) Interface for your GUI objects. Some problem here is that AS3 actually doesn't have interface for Sprite, and you would like to interact with it like with extended Sprite. The workaround here is to have in this interface a declaration like this:
function asSprite():Sprite;
And your implementation in GuiWindow would look like this:
public function asSprite():Sprite {
return this;
}
And your GuiWindow class should extend Sprite of course. Then you would have access to it's Sprite properties and methods by writing for example: window.asSprite.startDrag();
This interface should give you abilities that you need to operate on your GUI element.
3) Class for your GUI element, in this example GuiWindow.
4) Class for your data that would be injected into your element. If you would load data dynamically, and from some location, you would need to deal with the situation when no data can be provided - but that logic would be inside your window.
5) Class for your skin - so you would be able to dynamically create a skin object and use it to create your window in a way you want.
That's just few thoughts to consider.
PS. It may be good idea to fill GuiWindow object with data AFTER creating it, and not in constructor, as you would be able to visualize loading process then.

Taking an intro Flash/AS3 course; problems with MVC pattern

Okay, so I've been busting my hump the last week or so on this project for my OOP/AS3 course and this past Sunday I realized that my approach wasn't going to work so I scrapped the better part of it and started over.
Our assignment is to create an XML based flash menu that demonstrates an understanding of the OOP patterns we've just learned. It was kind of a 'test the waters' project where he gave us a ton of tutorials and information and told us to make our best attempt at making sense of it so I'm certain there are more efficient ways to do what I'm doing, but that's a moot point.
We need to employ at least two patterns in our menu, though at the moment I'm just focusing on MVC so that I can get the mainUI working before I finalize the second part of the UI. It essentially flows like so:
MainUI has 4 menus that slide out.
Each slider has 3 thumbnails on it.
Clicking on any of the thumbnails will move to the next part of the UI. This functionality is currently disabled.
The program runs with 0 compiler errors, but the images are not being placed on the stage correctly and I can't figure out why. All the image paths are being pulled and stored from the XML properly. The main background image is pulled once and is supposed to be only placed once (if statement that uses a count to determine whether to run the placement function or not), but it is being placed 4 times with the sliding menu image. The sliders are being placed in the correct positions (switch statement that iterates through the mainUI function in the View class and creates a separate loader for each one), but the thumbnails are not all showing up. So here is what I'm seeking help with:
The mainPanel image should only be placed once, rather than 4 times with each slider.
The sliders, while being placed correctly, must be tweened in different directions through the as (using TweenMax), but each instance is unidentifiable from the other so right now they all have an eventListener that calls the same tween method. How can I distinguish them in a way that lets me apply a different tween to each (This will likely be a concern with the thumbnail functionality later as I will need to load different XML data based on which thumb is clicked).
I have added what I hope are very informative comments to each script so hopefully people can help. Also included are images of what I want the mainUI to eventually look like and how it's coming out currently.
pastebin with all 3 classes and XML (2 hyperlink limit) - http://pastebin.com/u/crookedparadigm
top image is how the stage is outputting, bottom image is what I'd like to to be - http://imgur.com/a/bOmsS
Last quick note, stage is currently set to 600x480 with a black background. Ideally, to reinforce OOP principles, our professor wants us to avoid using the timeline or library if possible.
Any advice at all will be greatly appreciated! Thanks!
Install FlexPMD This is a very good add on( sometimes hard to install ) It basically is used to show areas of your code that you are not following standards. For example your classes lack the use of "this". And you should avoid passing parameters in constructors. It would be good practice to develop standardized writing skills while you are still new.
Looking at your code I see you are calling buildUI from within a loop.
buildUI is assigning a MainView object to mainUI.
So each time you go through a loop iteration you are reassigning mainUI.
In the end mainUI will only be the last iteration of that loop.
Not sure this is your issue but is an issue.
[EDIT]
Excellent Singleton guide for Flex SDK
Part 1
Part 2
Some Good writing on pure AS3 Singletons.
I would prolly start from scratch as your XML data is miss formatted.
your XML should resemble something like this.
<MainProject>
<MainUI>
<Thumbnail Name="Spring">
<Destination Name="Spring" Price="99" ratingPath="images/SP1/SP1rating.png" />
</Thumbnail>
<Thumbnail Name="Winter">
<Destination Name="Winter" Price="152" ratingPath="images/SP1/SP2rating.png" />
</Thumbnail>
</MainUI>
</MainProject>
Then you should have the following structure on your stage. These movieclips should be empty and already placed inside on your stage with instance name.
Stage
MenuUI MovieClip
ThumbNail1 MovieClip <- feed it thumbnail from the XML
ThumbNail2 MovieClip <- feed it thumbnail from the XML
ThumbNail3 MovieClip <- feed it thumbnail from the XML
ThumbNail4 MovieClip <- feed it thumbnail from the XML
This might be a bit too vague, just tell me if you need more details.
Hope this helps !

Storing Multiple Images In A Variable With Action Script 3 In Flash Builder 4.5

I have a flash assignment that I need help getting started, any advice would be greatly appreciated. The assignment is to create an application for playing a card game, I have to create an MXML component that has two variables, one variable stores the image of the back of a playing card, the other variable has t store all 52 options of a front facing card (the second variable will store over 50 images).
I've written the variable for the back of the card image like this:
public var backOfCard:Image = new Image();
backofCard.source = 'asset/backImage';
However I get an undefined variable error (1120: Access of undefined propery variable img1), I feel like there's something small that I'm missing here, but I was wondering if anyone could spot it.
I'd also like to know if I should use the same method for each jpg image for the front of the cards, it seems like it would be a lot of repetitive code aside from the change in filename for the front of the card images.
Here's a snippet of the homework assignment, again I just need help getting this part correct, I really appreciate any help with this.
Your job is to supply the custom component named Card. Create the
component by using File → New → MXML Component. In the popup dialog
box
leave the Package blank
Name the component Card
Base Card on spark.components.Image
What goes into the Card component?
For each card, we'll want to be able to show the front face of the
card, or its back face. That means each card should have a place to
store information about what file to show as its front face, and what
file to show as its back face.
To do this, create two variables in the Card component to store the
file names. You might call these variables backImage and frontImage.
Your access modifier is what's bothering me.
If you're creating these definitions in your class file, then the first statement works:
public var backOfCard:Image = new Image();
But if you're in one of the methods, usually the constructor (sometimes called the ctor), or any other method of the application, you could use the 2nd statement:
backofCard.source = 'asset/backImage';
But the combination of both is what I think is confusing. Because the "access modifier" (i.e. public, private, internal, protected) is what you use to define variables and methods within a class. And since you're putting both side-by-side (a definition and an assignment statement), I think you're mixing when to declare them.