5

GitHub - muzam1l/mcalculator: Web port of Microsoft calculator, written in cpp,...

 4 years ago
source link: https://github.com/muzam1l/mcalculator
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

mcalculator

It is a web port of Microsoft Calculator App engine, emulating the same UI on frontend.

This project exists to test the scope of porting Desktop utilities, written in native code, to Web so as to run everywhere #WebIsTheFuture.

Try it here https://muzam1l.github.io/mcalculator/ (new link)(faster)

https://mcalculator.herokuapp.com/ (old link)(slower)(still mantained)

screenshot

Engine is written entirely in cpp with modern cpp17 and legacy code mixed with windows specific tools. However modifying it to make it work with other tools like gcc or clang was not so diffcult thanks to efforts in last year by contributers of calculator on github. After adding my thin cpp View layer to interact with it, i compiled the engine to WebAssembly using Emscripten (which behaves like clang), adding my hooks here and there to make it interact with javascript in browser enviroment. So i was successful in getting engine.wasm to run locally in browser.

UI layer was written in plane HTML, CSS, and vanilla Javascript to make it and whole app tiny sized to load and run fast. All the front-end tasks, like capturing Keyboard and button clicks and maping these to commands to be sent to engine are maintained at this layer. This layer then sends these commands to engine which does all the calcualtion and most of the error and state handling.

UI is very responsive and fluent and loads super fast even on slower connections and low-end mobile devices. Once loaded for first time, sebsequent loads are even faster thanks to caching of of files like wasm assets.

App now can be installed like native app and is available offline, thanks to @NWylynko. On mobile devices use "Add to homescreen" and on desktop use plus icon in adress bar to install (new link).

responsive example

Current development

As of now only Standard mode is available in this build stuck_out_tongue_winking_eye(#reduces to more of a POC blush). But i am working on Scientific Mode which will be pushed in few days hugs. Offline mode and Native app is also soon. Further development is subjected to interests and contributions of you guys (whoever reads this or just for myself woozy_facesob)

Features working as of now

  • infinite precision (#as it is engine feature).
  • Whole Standard Mode (#i know this isn't much, so using 'whole' to exaggerate) to meet basic calculator requirements.
  • History panel, with NO copy paste as of now (#on both web and phones thinking).
  • Memory list panel, WITH individual memory item change (MC, M+, M- on each list item, hover or tap list to show these buttons)

memory-screenshot

Contributing

There ain't even any tests, so make it or break it, i just need your contri (and again, if i am only one reading, contri on me only persevere)

Build man_shrugging

You'll need Emscripten to build.

  1. Download and install emscripten.

Then you may have emscripten installed on some path say /path/to/emscripten (for example my path to emcc looks like this /home/muzam/bin/emsdk/upstream/emscripten/emcc )

  1. Then cd to engine/ (or copy engine/ to different location to play around) and enter following in terminal

    </path/to/emscripten>/emcmake cmake .

    </path/to/emscripten>/emmake make

    </path/to/emscripten>/emcc -02 libEngine.a CalcManager/libCalcManager.a CalcModel/libCalcModel.a -o engine.js

First two lines genrates cmake files and lib.a files respectively in their respective folders. All this behavior is controlled in respective CmakeFiles.txt

Third one generates engine.js and engine.wasm in project root (-o flag), These files can be copied directly and pasted in public/js of server (which is not automated yet grimacing)

Reporting Issues

if you are not using this on daily basis, dont report anything, contribute instaed sleepy.

And ... nothing i am just ........ zipper_mouth_face.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK