Is there any way for a time picker to have infinite scroll? - codenameone

The existing cn1 picker has start time and end time. Before start time and after the end time - the picker space is empty, but it still scrolls and looks a bit off.
Is it possible to make a picker have an infinite scroll of numbers? From 1 to 12, and 00 to 59 for example. This is a question specifically for Picker implementation on iOS.
See the attached screenshot on what I mean. Thank you!

We tried to mirror the iOS native picker which has that same limitation I think this would be a bit challenging to implement since the picker doesn't rely on List which already has this feature.
Any way to workaround this would require changes to the API and the implementation here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/spinner/Spinner3D.java

Related

Seekbar control video for Elementor

First of all, sorry for my english.
I need to build a custom control for Elementor. A video was uploaded with the video widget, and the custom control should be able to delimited certains positions in the video, and in that positions a custom html could show in that delimited parts. For instance: the video has x amount of time. the custom control create a repeater slide and between the 0:20 to 1:00 a custom html can show up, in the mean time the video continue playing, and in other time, ie the 2:20 to 3:00 another html can show up. I don't understand if you guys can understand my issue.
I appreciate all the help that you can bring me. Thanks a lot in advance. If you have some ideas to show me the right path that help me a lot, cause I'm spending so much time on this and the time to the D day is nearly. Sorry for all.

react-virtual variable sizing with images not calculating on initial load

I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.
This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.
The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.
Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!
My demo here:
https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx
p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.
Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx
It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.
here is a much simpler solution with the new react-virtual version
the idea is to call measureElement on img onLoad

SciChart changing the color map on a FastHeatMapRenderableSeries

I'm a long-time user of SciChart, but it's an old version (3.1). I've just started using FastHeatMapRenderableSeries for the first time, and there is a requirement for a user to alter the chart's gradient stops. I've implemented a UI to do this (see image), which involves dragging markers that updates their respective gradient stop within the ColorMap's LinearGradientBrush. It's working in as much as gradient changes can be seen in the chart's HeatColorMap (not shown on this screenshot), and also in my "drag" control (a Rectangle whose Fill is bound to the ColorMap's brush).
The problem is that the colours within the chart itself don't change - perhaps I was being a little too hopeful that this would happen automatically! Is this possible, or will I have to recreate the series each time there has been a change to the gradient?
We actually have this working in a later version of SciChart. Im not sure which version exactly but it was introduced at some point. Have a look at this forum post which discusses a bug in the heatmap color map binding in v5.
In the v6 examples suite, you can drag the heat map legend and recolour the chart automatically, so we know in principle this works.
Very cool image by the way!

React batching commit phase across renders

I've looked far and wide and can't find the answer to this:
Use case is scrolling a mouse wheel to zoom in.
Every time the wheel is moved a notch, an update is issued with a new level of zoom.
If a new setState is called before the previous one is finished and displayed, it will start processing the next call. However, react will not display the results of the previous render on the screen!
So, if i molest the scroll wheel, it will push dozens of render calls before actually showing anything on the screen, causing very poor user experience. (Here's the video: https://youtu.be/YRVK8uoVml0)
I don't know hot to force it to draw each render on screen.
And please, not answers like "You shouldn't be doing that", or "Just fire one update at a time". Only answer if you actually know the answer. Thank you.

Auto Scrolling Within a View with React Native

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 :)

Resources