Calculator Project

[Sawer]

@d-healey Thanks so much for the int.
Diving into the snippet now.

[Sawer]

@ustk Interesting approach.
So my real intent is to use customised panels for the digits and screen.
I'm now working on the backend of the calculator, and buttons are the most accessible thing to do numbers digits and equal signs.
But thanks so much h for this. When done with the algorithm part of the calculator, ill use your idea for the gui (frontend)

[Sawer]

@ustk said in Calculator Project:

I realise you might want to make a calculator WITH buttons...
Then it's a bit harder to append the digits

@ustk Yeah, I thought it was easier. I want to do it like a normal phone calculator. So either buttons or panels, they all need to be assigned to a digit (0-9).

[d.healey]

Here's a basic calculator (less than 100 lines of code). Maybe don't look at it until you've tried to do it yourself. Use buttons for your first attempt because they make it easier to understand what's happening. Then try swapping all of the buttons for one or two panels - Christoph showed how to use a panel as a grid of buttons in one of the live streams I did (I think it was the second one).

HiseSnippet 1347.3ocuXttaaaCE.lxIJa1csqEXO.B9WJKoI14dQav7hS7fwxEi4thATzUPKQaSDZROIpj3sUf8NrWn9nrGg9FrcntXQmXkXaL07ijb34B+3gWNhrkmvg36K7PFEe8ngDjwWY1dDW1udeLkiZdLx3qMcvLm.FVJ7ZDvQGMZH12m3hLLV5GTFYTbYT3Oe56NByvbGRZSHzaDTGxozATYZqsp8iTFqA1k7Z5.Mq2oVSGAutfIB.fVxrBZH14RbOx4XkYELQFqbhKE.osDKI9HikOR3Npcew07H6eC0m1gQTBUQsg.E0bCAyUQrpUT89TlaqjAtOBhRqzzvRQoguw7LpKcb6ooimFpvJ0C87gQgIwaoIvqpNdUzvaJHYngzxQH8Ly1NdzgxTMJddjYStj30ECoccThrEUvdEy5BvBtbiA3KIM7.gwdXuWkJqaA+Z0WVpjGomEkOLPZcnU4xPCatoEqC6Xp+PFdTIXlwWp0.XURf6Qj0ECFJ3ffc4TSJuZTT5H40YDrWbLRDyLBIFn7O4+2vWYBW5IX0wLVGXggsfmnMVip+nbFkSr5FvcjTA25NFY6jzSqacElEPVszeTpHsqkcrTwhNJysgn8gD9OOXPGh1.HRFFAu8cPe1U3YYSAoJuzhZ8Jqpp+t1ZgAdrwaLLvuucli3HiJaslEcUnmS86sz2k4fOxhzQ+GxX7OgcSOAvDv9bXAfK4FXfjRcXKWzM0IEb2JegGNjvcapV7XGZudp6hgDO0gGoIujVxJ8syDYuDqef7WhYSjASZ79xgI17vYwaY4zxi2WlYr4J3sKKI2HKupdl5jeK.y7SySQx221jHKh2mDIj43LR8CsSYBqlksJwEGHoaWZDGP+6zCw6qBCh1IMESOxPQebpYcP2zmLzSpZXEFw0NLhzriZncSOvZCFcFIPDsSbaFBqVNPER0TZxAJkzx1mKjjK3QcE3l0sU0s6T0EO2vHdSUspjp284nMObis9LpxPnNyjEuLyt3kdsUmn0lZFJ3M4TIrYgmUEWT7BZ3+94lGikXUEu31.6fsYRpBAiiIWAe9PT8uhlGS7uTJFBkBGuK.YTRFp8IwUGOJPJEbD0U8oLiOEqB5lwelwGE0FMVv55Z93qHM4s7HvropxI0+Lw.HzXOvLiBDNFF0ph9mBygbkEWSck8S+rkl05Sn85K0aQsnHo39bxZUMVsb0X8u7xWVqN+rtUV407l0sleV2Vi0OE7Yj0smeV2Iq0.+yk4Kq6L+rtaVqAxaV2c9YcurVCj2rt27y59YsF3icxWV2e9Y8frVCj2rdv7y5KxZMPdy5KlQVeho12ZpW4x5O+LR6lKBsUyh17d+02tHztUVzl2UDd9hP61YQad+MLqMiz9Hyw2eHqsX4MpGNinVxL4QAx5P17kTSy5Luow5iiY8TbGBK9jqzKbneJaGMXQmWKtqMM9UCDJoaMMdEnDyn83CB6kuvzKTSW3asaS+cs2daqXxRjKWqSujWhq3JPC+czS2cmmk5olmIbiddP8WIS8zfwJfaeLwSSod9ItOUNR+oC+e6oylUDelYKpzo+zYrvTXDtiRdvX7CN9XyS51k3HSAbYyF+R975hneRDHo7dmgkdTXIkITXrMLS6PfdmyIL0s+LJntmVjbEkrJCzFt2cnv+B+DqrpR1HVY0DknAXGOw6chtyo5IM+xvV.l3gulaQyyTxVUQg2CUsmnxFUPCf8Su2wQM7eNbgjo6yVKfOau.9ryB3ytKfO6s.9r+B3yA2qOpix99.oXPz1AngVmDd4bCiSBOqKbUH5+vsCMIZ

[ustk]

@d-healey haha, I don't look either, I'm taking the challenge :)

[Sawer]

@d-healey Yeah, I Won't look until I made it myself. But thanks
Thanks so much David.
But learning from your previous script I have some question:

I know it requires experience for you to create such efficient and effective code in less time, but I want to know how do you think?
How can you know that for a certain task it requires a precise tool.
Do I also need to learn a bit of logics?

[Sawer]

@ustk Ahahah It's a challenging but cool project. I'm learning a lot!
Thanks so much guys.

[d.healey]

@sawer said in Calculator Project:

Do I also need to learn a bit of logics?

This is absolutely the most important part of programming. Once you understand boolean logic, operators, and control statements (loops and ifs) then you'll be able to plan your strategy more quickly and efficiently.

But I change things as I go too. For example in my calculator example I've used two different methods for adding the input to the label, but I think the second method (getting the button text) is actually better in this example and I should have used it for both.

[Sawer]

@d-healey said in Calculator Project:

This is absolutely the most important part of programming.

Thanks.
How and where to learn logics? Wanna do that on a daily basis to be more proficient in thinking.

[d.healey]

@sawer said in Calculator Project:

How and where to learn logics?

There are some links to Javascript tutorials in the HISE docs which are a good place to start. Once you get the basics you need to read and write lots of code to practice and get it to become a natural part of your thinking when you're presented with a programming challenge.

YouTube is also a good for general info - https://www.youtube.com/results?search_query=boolean+logic

[Sawer]

@d-healey Thanks a lot!

[Sawer]

HiseSnippet 1155.3ocsW1uahaDD.eMI9zg6Gpmz8.rG+EQIkCx2mRSaBjjJT9BURipTzoSarWBqhYWqcWmFTUj56SeI5iTeCZmwFBlD7o.zCIDL67g+Mi2c73VZkO2XTZhSwK5GwINesa69Ra2FcYBIo4A3B6aLhajmE2yPp2OhYL7.hiyB+LZgSwEIIe9mepNKjI84iVhPtTI74mH5IriVs0dGKBCOhEvuPzKi0quWSekrgJTECzrfaURDy+V1M7yXnYEbINu5v.gUoaaYVtg3rXcUP+1cU+tL09KEFw0gbTnFoMDnzkOREFfDiqRZzUDFzZXVaHPTZMpFrPZM3stmJBDOt9nZw2knfNxir0CmBii2BigWsr3UMCdS.ImLHsXJRuwssuVDYGoA44qbaJsbcGFT1yhRpsjB+0BtMTfERakdra4GoAgG8nbs0ptBcsUqtzNdddPs2Xo2wzznvXCcW5PGugaan5EojfP4RnxRfC3uULnJoUqBavBCuFtcUVEgYLFwQATF2qtUBg7pOtiWGklVV.BU2gJn+.sF96xKuj2e3UrXpkUhhMcKO4qOXQI5xTwRvkXn8WI9XE5DXAzN.lGvLzySHCERNsSrz2JTR5.CJ6OL9q.7FFyW58u21UXnQLMr2CJWFJSC9An2X+SNo99MN9cui1b7nYn2vkbMbw6S8YRZWXaGMPzoCWCQlBATdioBjldEwhhPFvuGJCCR4Dwy6LBEL+7JJ5TNkHuhX8AxPiJjWIRKfhQhOncO.lheeZ9kdy34oGVqyD4jP+jXWZ4RIU3Gf.+r3xBBvhasUP5WMIbnHdq5RLliHCuNzxIaVdT4Rzc2kVahYTo1bXaSPJlkFlZXvWchAOT4yBol3doExZvNCz1DciGYvFbefm2nhi7LkketrbB+fJ5SU0oyD0MXaVHWOQ0XWM8myQrzcMWm8lAZHbTe79Gt42+Ha6M+zyIYLTIaJE1yi3x7Z5QFb3B92u17.lkgMcFrFXWDWaEHBNGvuC5fm1Bpn6AbysVUDz24wSjDmWaSz9sCZPUO1ZURh.5C8JWHSqRtO6SD5mUvvti2T1RygCuXaKg4TUOHnLMXlSAtjA4K1w8DNSKQKr76sCaa9hQnVtH7i6MLf0lAXlBDVMOD9yi2a1qBqNMUg0xsJbwbfvZSCBqmaU3p4.g0mFD1HWDXyABaLMHrYdHrGeNPXyoAgsxcufXNPXqoAgsyCg+NbNPX6oAgOj6Mhn4.gO7hQ.erXdHP0yABKCSY+rIHgYWUAwgL63CzhSwOPA7TpwlhDmTTZD19Ymx++sobeoH9F2VBqe2IyXgIvH7rruDLN3cC9F2CgQ57si.bQ2i9suLuH.4WTwVXrwSYVs.1n3BuCVa30i74vUWJ4g3TBNEvmmmJWEkwJPatLHQ3egOCTVCkcFnr1PkjdLes5S9oylfu8wqSVAXRl7hWEcOEko0HIyq.94VsRUROXi2m78wz+6gQLlrOqNC9r1L3y5yfOaLC9r4L3yVyfOa+Y8AOyuerU0K83.rPqCSFhyw4vjlBI6BI+GfQeWT2

@d-healey @ustk Ehehe, I think Really tried my best. Probably the challenge is too big for me. This is how far I got and I don't really know how to break the problem into a smaller one..So I'm stuck.

[d.healey]

@sawer Add a label to display the output and add an = button that when pressed carries out the calculation.

[Sawer]

@d-healey Thanks.
Given some tome to try understanding your code:

1. How did you come up with he appendInput function , especially the "+="
2. What's eval? There's no this such as that in the Api.

I'm learning a lot. Thanks

[d.healey]

@sawer said in Calculator Project:

How did you come up with he appendInput function , especially the "+="

+= Is a standard js operator

@sawer said in Calculator Project:

What's eval? There's no this such as that in the Api.

https://www.youtube.com/watch?v=-Q7nzezbgAY

[Sawer]

@d-healey Thanks David.

So I realised that I'm trying to solve problems that are bigger than me. This project is bigger than me. I'm pausing it for now and and solve easier problems while getting more of the logical thinking. Once I get more experience on this, I'll come back with more knowledge and more confidence to solve.
Thanks a lot.

[Sawer]

Hello everyone!
I've finally managed to build the calculator with my own fingers and brain.
I understood the logics behind the operations and especially the input to the label component.

I'm getting excited to improve it just a little bit, and by that I have 3 questions:

1. How can I use the operational button as "switches" where only on sign can be accepted by the input for each operation (23 +- 21, I do not want this to happen).

2. Is there a way to not "show" the operational sign to the label without affecting the input?

3. Is there a way to reset the label after first addendum and operational sign have been selected? In that case the label would be blank waiting for the second addend.

Any help is appreciated, hope there's a way that doesn't require too much code, but by what I'm thinking, conditional statements are key to make these work.

[Sawer]

Hello everyone!

Trying to style this calculator here, I'm working on the customisation of the buttons.
I just want to set an animation that once a number is pressed, a background pops up and scales itself while fading thru opacity, (just like website buttons).

I'm currently running with 2 issues:

1. As shown in the video , once the mouse is gone, the buttons background goes away but the buttons frame remains until I press another button.

2. For the scaling and fading implementation, I've tried to set a Timer where the opacity of the background fades in 1000 milliseconds. It didn't work on the
   if(obj.down) functions/Conditional Statement. Also want to know if there is a way to scale the rectangle by x.

Any Help is super appreciated. I'm so far happy of the improvements, just wanna add this little UX feature.

[d.healey]

@Sawer Is that individual buttons or are you using a panel? You should be using a panel really.

[Sawer]

@d-healey Yes, True. That's what I'm working on now. almost done!