I've developed an application in pyqt and matplotlib which allows the user to drag and edit plot data and I need to provide the same functionality in a web browser. I've looked at d3.js but the learning curve seems too steep for the time I have available.
I need advice on which Library/Framework can deliver my needs. Users should be able to select a number of points on a chart and be able to drag them without any noticeable performance penalty. bokeh and mpld3 seem like good candidates. Can anyone advise if these libraries or any other would work well for my needs?
Bokeh provides a number of standard mechanisms to enable it, mainly via JavaScript or Python callbacks. There is a number of drag tools like BoxSelectTool or LassoSelectTool for which you could define a callback but it is also possible to attach a callback to the canvas or plot's data source object.
Additionally it is possible to add a new functionality to Bokeh by writing your own extensions using TypeScript. See Bokeh documentation here.
Related
My clients have their home grown style sheets for buttons, labels, alerts etc for consistent look across their applications.
Now if I want to create high fidelity mockups for client review, is there a way to generate mockups using the styles sheet they have?
Any tools like Adobe / Sketch can do the same?
Appreciate your feedback.
Figma is a great tool which helps us to build a master template of certain UI component and use it across the prototype wherever it's needed. Similarly, you can use Adobe XD and Sketch which also have similar kind of features also.
I want to build a 3D design program, just like tinkercad. However in this program user can create keyframes and play animation through a timeline in UI.
This is nothing new, many desktop applications can do this (e.g Blender, 3DSMax, AfterFX...). However, I couldn't find an example project or anything that comes handy in documentations. Is it possible to make it happen in three.js?
Have a look at GreenSock's GSAP, it is a general purpose HTML5 animation library, which can easily be applied to a three.js project. This is a tutorial about creating Timelines using GSAP
You might also want to check out the Under Neon Lights editor which uses Frame.js
Currently I am trying to build such customization of product in Bigcommerce Storefront that allows to display image with dynamic text, which was entered in Textbox. That means product image preview should be shown INSTANTLY with new image with written text.
so that the end user will know how the final product will looks like and also same image should go in shopping cart as well.
I know that there is an app on Shopify named as Product Builder.
Is this possible to do it on Bigcommerce?
Thanks in Advance
It's definitely possible with some fairly advanced client-side code. Unfortunately I don't know of any plug and play systems or apps for Bigcommerce that will achieve what you're looking for, but there are a couple ways to get a live updating product preview if you're willing to get your hands dirty.
Here's an example from my site. Click the button under "personalize this item", and you'll see a live preview image like you describe in the modal. Enter some text and change the monogram style and color, the preview image should update pretty quickly every time you change an option. A solution exactly like mine may not be feasible for you, since that site is using a pretty complex React/Redux implementation built on an extensively customized Stencil theme... it's far from a turnkey solution. That said, you could implement something similar without needing a totally custom app.
The image preview itself in the example above is powered by IMGIX.com. They offer a great service at a fantastic price. Basically my system translates the user-selected Bigcommerce option into a URL string per IMGIX's URL-based API. Displaying the live preview is then as simple as changing the image's src attribute to the corresponding IMGIX URL on every input change. I do this in a React component that consumes a Redux store, but something similar could definitely be done in the framework of your choice, or plain old vanilla JavaScript. Cloudinary offers a similar (maybe even a little bigger) feature set to IMGIX, but I found IMGIX to be a bit faster, and the pricing was considerably less for my usage.
You could also write something that uses the HTML5 canvas to overlay text and effects on an image, and thereby avoid using a third-party service. I found such a solution to be way more work and way more taxing on the client-side device, but it'd definitely be another way to skin the proverbial cat.
There may be other viable solutions out there, but the above has been my experience in implementing something similar to what you're looking for on Bigcommerce. I hope this is helpful!
How can i achieve this kind of look and feel with colored buttons and rounded corners in dialogs for a windows application?
i dont think it can be done using MFC , will wxWidgets or Qt help ? or any other platform?
You can design whatever the look & feel you are pursuing using QSS. Why don't you take a look at Qt Documentation ? There are plenty of examples & guidance available.
Stylesheet Examples
Stylesheet Reference
Stylesheet Syntax
Customizing Qt Widgets Using Stylesheets
But at times, you will need to override a control to achieve your goal. Like in this question. But I think your required look can be achieved via QSS alone.
The easiest and fastest way to achieve the same UI accross different platforms is to implement it in QML with Qt. Unlike widgets that get automatically styled appropriate to the underlying platform style, QML is entirely platform-independent. You could probably style regular widgets with CSS, or even by reimplementing drawing manually with arbitrary UI API, but it will not be nearly as easy.
It is easy to achieve such a look and feel with any GUI framework.
Choose the framework you are most comfortable with, RTFM, roll up your sleeves and get started.
On any framework you will find methods to draw bitmaps of any color and shape and to handle mouse clicks on them. What more do you need?
This is what GUI frameworks DO! They also provide a default set of widgets for the bone lazy and the conventional. You aren't one of those people. are you?
Can someone please guide me regarding which touch framework (javascript) I should use to make a tablet app? I am new to this area and I am looking for something which allows me to play with my own UI design comfortably.
I went through sencha as I heard its apt for a tablet app environment but I am (sorry, it might sound odd) not able to make out whether I can use my own UI design to make app in sencha. Or any other framework (stable) allows to use custom UI design?
There aren't any major differences between handsets and tablets, except for the screen size. For example, what you would show in a handset in one long scrolling screen, would be shown in a split-screen on a tablet (I am concentrating on the user-experience here).
Split-screen support in still rare in the jscript frameworks, since webkit browsers didn't fully support scrolling only parts of a page (i.e. an iframe or overflow:scroll divs), this support is only now starting to get materialized with iOS5 (Android already had this since 2.2, but it never worked right).
There have been other jscript solutions (like iScroll), but being client code they are not always bringing the full "experience" to the client.
The JQuery-Mobile docs have a version under testing, you can try that in a tablet/handset to see the differences.
Regarding your "own UI design", if you mean colors/icons/buttons that's possible on any framework. Where the problems start is when you want to create custom layouts, and each framework provides partial support depending on what exactly you want to achieve.
In general, I'd say Sencha totally separates you from HTML design - you build everything using JSON controls and it has an extensive events/rendering code (of course you can write your own controls), whereas frameworks like JQuery mobile work directly on the HTML (you specify data-* attributes for the details) and renders it almost the same (ok, it does adds wrapping layers, but in general it's still pure HTML).
As always, "it depends" on what you want to achieve and what you are ready to give up... ;-)
Sencha Touch (our framework) is particularly well suited to tablet apps because it has an implementation of multiple scrollable areas that works on older iOS and RIM devices, not just iOS5. But, the intention with Sencha Touch is that you create your app using the built-in UI components (carousels, momentum lists, tabs, etc.) or, if you have unique UI elements, then you will need to extend an existing component or build a custom component. If you're expecting to be able to slap some of your own HTML into innerHTML or even a Touch xTemplate, then you will be setting yourself up for failure. But the good news is that there are tutorials on doing your own components, and there are plenty of apps that you can look at the source of, in order to guide your development. Lots of people have built apps with custom UI's
You need some level of JavaScript experience to use Sencha Touch, so if you're coming from a non-JavaScript web design background, you'll have to get down the JavaScript learning curve first.