I'm looking to put together a dynamic Web form where, when the customer selects options from a series of radio buttons, additional items will be added to the main image.
Think of it as if you had a Photoshop layer and all the other layers above could be hidden or revealed dependent on the customer's input on the form.
So, two questions...
I assume I should be using JavaScript for this form. Being a beginner with JavaScript, is there a way for me to tell it to change the image based on multiple inputs selected by the customer? The base image would be the same but I would be looking to hide/reveal multiple "overlays" on top of the base image.
Is this something that React can handle or should I be looking at something like Angular?
Thanks for your assistance with this question!
I can answer for number one by providing a live example: http://codepen.io/zvona/pen/mVQWvX
It consists of three components, FormControls, Blocks and App. Names are quite self-explanatory and so should be code itself. There may be some minor mistakes in code since it's quite quickly written on the fly, but it should give you insight on how this can be achieved with React.
Related
I have a big form with around twenty fields, to achieve minimum code amount, I created independent components for inputs and selects, then an array of fields is passed into v-for to create the form.
But soon enough I found it very complicated to handle form serialization and linked selects (say one select for the list of states, and another select for cities depending on the selected state).
If I write the form in one component, however, there'll be a lot of repeated divs, classes, etc.
So which way is a better?
After some reading and referring to the official doc and codes of bootstrap-vue, I'm now pretty convinced that independent and reusable components are necessary.
To solve my problem of form serialization and linked selects, official doc Form Input Components using Custom Events would help.
First of all, the question should be a bit bigger but that is the main point, I guess.
Let me explain a little of what I want to do so you can have a better idea. Basically, id like to make a card game (no 3D nor 2D graphics), just a basic form where I have a deck of cards loaded in memory. After playing a card i'd like the form to update some information (labels, images, or X behavior) based on the card's effect, however, I don't want to hard code the card interactions/effects within the card control, I want to get all that from a script (for example a lua script). For example:
I have a script named "0001.lua" and it has 2 effects coded;
Deal 2 damage to opponent.
Deal 4 damage to opponent and destroy this card.
In the game I draw a card with ID 0001 and play it. When right clicking the control that works as a card, id like to display a list the effects in the script and depending on the chosen option to execute the selected function inside the script and update the information in the form (if it was effect 2 - deal 4 damage and destroying the control/card).
with all this in mind id like to ask the following questions:
How can i achieve something like that?
Is that called "embedding"?
In the information I mentioned lua as the scripting language but I don't know if that is the simplest scripting language i can use to do this, is there a simpler scripting language? I would like to keep it as simple as possible.
Can anyone provide an example to do something like this? I'll greatly appreciate it (it's okay if it's simple, I just want to know how to accomplish the back and forth communication between the script and c#)
Also, c# is no a requisite. I just mentioned c# because I feel comfortable coding in it. If there is another language more appropriate for this task i'm open to suggestions.
I think that it is much more simple to use C# scripts from C# than lua.
Check out these questions
[1],
[2].
Note: Don't forget about namespaces. If you want your scripts classes to inherit your classes or interfaces from main application, then your scripts should use same namespace.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
I'm building my first Yii2 app in bootstrap and I was looking at a few templates to base the UI in. The problem is that each one offers a few unique form elements that I like. Is it relatively easy to copy form elements from one theme to another?
For example, copying the Ui Elements > Tree View from http://wrapbootstrap.com/preview/WB0B30DGR into another template like http://wrapbootstrap.com/preview/WB0F0419C.
Thanks!
Depending on your experience in CSS and Javascript. I also customized on several occasions templates bootstrap changing some elements. First, it is whether you intend to do only the changes to the graphics and then only the changes to boostrap.css or if you want to supplement / modify the parts managed via javascrit. For graphics all template-type bootstrap behave the same way, then it needs to identify exactly which categories you care about and modify them with the catatteristiche want. For the part controlled by javascrit the situation is similar only the most delicate and complex.
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.