We have a list of paper-cards in a dom-repeat, that ask survey questions.
We want to gray out/disable the other questions that are not in focus, and animate the transition from one question to the next, via a next button, etc. (And we will also add a progress bar at the bottom showing 1 of x questions have been answered).
I saw iron-swipeable, but it seems to want to just remove the card that I am currently on, but does not seem to load up the next card...
I also tried zero-list-hero, but not an example that does something similar, and cannot get the transition going.
What elements should I use? Any examples similar to what I am looking to do?
Related
I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)
I've modeled using helixtoolkit which is done in a wpf user control library and hosted on ElementHost. I decided to do this because my model is fairly simple (just a stick element with lineVisual3d and bunch of small spheres).
Now I want to animate it and everything I find related to animation seems too complicated for what I'm trying to accomplish. I've seen storyboard being suggested as well as transform methods.
What I have is a 3D line connected by a bunch of points3D and I want to translate them only by a series of values at a fixed time increment.
I did this in a 2D graph using a timer for winform and even a forloop did the trick.
However, I'm not sure how to do the same for a 3D line element. I was thinking that since I have a simple structure simply redrawing it would suffice.
But my problem is I want to add a slider which acts in pretty much the same way as a video player, it will increment itself as the animation runs, I want to also be able to freeze it at any point in time and use the slider to go to any point in time much like how a video player works.
My biggest question here is how do I use a slider to control the animation. Again, this animation will simply be a bunch of values that I want to translate the stick element by(a series of points).
I've already got the values but I want to add an animation for these values at every increment while being able to control it using a slider.
--I will post any code if necessary, not posting any right now because I dont know what would help explain the question better
You can use TranslationTransform3D and apply the transform onto the 3D Model
Currently working on a project where I want to implement Auto Scrolling in a view. Is this possible with React Native? I have searched the internet and have not come across anything that shows this capability.
Most Stack Overflow questions and YouTube videos deal with scrolling between different views (not within the same view), scrolling to the bottom (with Scroll To), infinite scrolling, or scrolling responsively. But I haven't been able to find anything dealing specifically with auto-scrolling within a given view.
Please let me know. Thank you in advance.
Something that just came to my mind would be like...
Store current x and y offset values of the scrollview in the component's state, setState every 'x' seconds with the new offset and call scrollTo() method of scrollview. That would change the x and y offset repetitively and make it looks like is auto scrolling.
PS: I know is not a full solution and should be posted in the comments section but I'm not able to comment yet... hope this helps anyway :)
I am 2 days in experimenting with Codename One and Mobile development in general and tested out some basic navigation and features so far. Now I want to work on the look and feel of the app.
I looked at the 9-border vid which was helpful, but not sure of the best way to add an image for the touchCommand that takes 3 tabs on that bar ( Example: home, profile, settings.. Similar to how instagram's TouchCommand is at the bottom of the app).
If I add the image, it does not line up with my Commands.
What is the best way to approach this to ensure the "TouchCommand" image appears as one, but is broken up to 3 parts for each individual commands when pressed, home, profile and settings? I might be asking this all wrong, forgive me as this is all new to me.
Thanks.
EDIT:
This is what was done.
In Theme -> Constants added commandBehavior= bar . This gives the default bar at the bottom. Created in photoshop a new bar 300x80 and added it to the TouchCommand. (See ScreenShot 1). Took this bar and broke it up in photoshop into 3 different buttons for the tab press etc. In GUI Builder, added Home, Profile, Settings in the commands. Added the image to Press Icon for Home and it didnt line up (screenshot 2). Very Frustrating to design layouts. I am hoping there is a much better technique as I am still experimenting with Codename one?
What is unclear to me, is I cant find any documentation on how to approach this and what the dimensions of each image should be as it seems that codename one has issue aligning them. I am assuming the steps would be to create the background image and add the icons as interactive layers for the user. I really care for the image being pressed and changes color like the instagram example. I dont see a way to do this in codename one GUI builder and themes.
EDIT:
Okay, I have decided to use tabs instead of the bar at the bottom. If I add my image to it, I get the results (screeshot 3). Is this the right method to use to accompolish what I want? If so, I dont see a way yet to alter this to become what I want :( .
Plus adding the background, shows one size in the display and looks different in the simulator. (screeshot4)
Answered Here: How do you get ActionBar from SocialBoo theme to show up in your GUI?
Tabs are customized individually so the border should apply for an individual tab to create the background. The foreground element is the icon which you define in the Tabs component itself thru the icons property which allows you to define 3 icons for the 3 tabs (assuming you use the GUI builder). If you add the tabs via addTab in the code you can specify an icon there.
I'm currently trying to build my personal website with Silverlight 3 and I've got this idea that you should be able to flip through the content in a certain way. I haven't seen exactly what I wanted before, so I uploaded a screenshot of the design for you guys to get a better idea of what I'm talking about:
Picture of desired effect http://www.bo-mortensen.dk/bmdkflip.jpg
As you can see it's more or less a carousel on the X axis. I've seen a fair number of carousel tutorials, but it seems to be quite "complicated" for what I'm looking for.
My main problem is that I fail to understand how to make this thing dynamic. I can sure do the flipping animations, but when it comes to the best approach of making the bottom page (the mirrored one) the previous etc, I'm a bit lost :)
I'm looking for any good advice on how to make this dynamic in such a way that the only thing that needs to be changed is the content itself (text, pictures etc) Also, I believe that each page/usercontrol should be using the same two (flip up and flip down) animations, if that's possible at all?
Hope I made myself clear on this - it's late after all ;) If not, just let me know and I'll see if I can elaborate!
Looks like you are looking for a Flippable 3D control. So check out my blog for one and you can tweak it to make vertical rotation.
http://jobijoy.blogspot.com/2009/04/3d-flipper-control-using-silverlight-30.html