SteemAX 1.4 ~ New GUI Complete With Coloring Coding, Updated Graphics & Mobilized Menu

in utopian-io •  2 months ago

Repository

https://github.com/artolabs/steemax

steemax_1.4_update.png

SteemAX helps minnow content-creators and whale curators

by automating an exchange of upvotes between their quality blog posts, allowing both 1 to 1 as well as disproportional exchanges that grant bigger curations, better support than a bid bot, and the long-term support they both deserve.

SteemAX 1.4 Improvements

First of all, thank you to @camiloferrua for providing the designs that guided the improvements to the GUI on SteemAX!

mobilized_steemax.png

Using the mockups provided, the table that displays the exchange history (at https://steemax.info/history) was updated with a new "clock" and "exchange arrows" graphics, and the fonts were made bigger, giving the table a much nicer feel and easier readability.

Using the same design guidelines, and reusing the same graphics, the Invite Info Page (my page provided as an example) was also updated to have the same look and feel. Additionally, the Accept, Cancel, Barter and Send (previously named "Start") buttons have all been color coded so that when they are activated the "Steem Connect" button shares their color letting the user know which command will be sent to @steem-ax.

SteemAX now has a global navigation menu that can be accessed from every page (accept the Home page) by clicking the "hamburger icon", which then reveals the menu via CSS animation.

The menu and all other changes in this update have all be made mobile ready, using media queries for screen sizes 380, 600 and 1024 and above. All designs are responsive and will readily reformat themselves on the fly.

Color Coding

One of the biggest problems people were having when using SteemAX was understanding how to send the invite after it has been created. A user must send $0.001 SBD to @steem-ax along with the Memo ID Code in the memo field in order for their invite to be sent to the invitee. SteemAX works this way because:

  • The only polite way to send a message to another Steemian on the blockchain is via the memo field when sending funds.
  • Requiring a monetary send deters spammers from using SteemAX to gain exchanges for spam accounts.
  • SteemAX only has permission to vote on behalf of your account, and never has permission to transfer funds.

After the user creates their invites they will then click the pending invite counter (see previous update) to see a complete list of all their exchanges, including active exchanges as well as those pending further user action. The invites recently created by the user now have a blue button labeled "Send" instead of "Start". There is no longer a "Cancel" button, but instead there is now a grey "X" at the top right of every exchange invite. When the user clicks either of these buttons a new box is revealed showing the exact vote exchange values along with the button the sends the selected command to @steem-ax. Now that the buttons are color code, clicking the blue "Send" button also turns the "Steem Connect" button blue, and likewise, clicking the cancellation "X" turns the Steem Connect button red. Additionally, the Barter button is coded grey, and the Accept button is also blue as it will never appear at the same time as the send button.

color_coded.gif

To accomplish this:

  • The HTML for each button was updated to include the CSS class name, giving individual control of the buttons. This HTML is generated by web.py. Commit d1fca01

  • The CSS was updated to include the classes that color the buttons. This commit also shows all the new classes created to update the GUI as per @camiloferrua's designs (over 1000 additional lines of code). Commit 4ae80f2

  • The Javascript was updated to include the color changes as each particular function is executed for those buttons. Commit 683a94b

Navigation Menu

A new "hamburger icon" now appears at the top right of every page except the home page, which when clicked will cause a menu to appear at the far right of the screen. This menu is sized appropriately for all screen sizes. The options in the menu are very simple and will expand with additional updates, but for now they include returning home, seeing the exchange history, creating an invite and seeking help via the Artopium discord server.

menu.gif

To accomplish this:

  • The HTML of the Invite Info Page, the Exchange History Page, and the Invite Creation Form were all updated to include the menu icon as well as the menu and it's options. Additionally, these commits contain updates needed to incorporate @camiloferrua's designs. Commit 7fb5031 Commit 4f8ebac Commit 60765c8

  • The CSS in the page_layout files, used as site-wide "template code", was updated to give the menu a very basic design. Hopefully this will be improved with graphic icons via a task request. Commit 07d53eb

  • The Javascript was updated to rotate the menu icon, as well as display the menu itself. Commit 683a94b

Issues Fixed

There were two issues that were fixed in this update.

  • Issue #11: The cancellation notice was forwarded to the invitee if it was canceled immediately after being created, causing the invitee to receive a notice for an exchange they have not yet accepted. Additionally, if they have never been to SteemAX before this could potentially be their first message ever. Yikes! This was fixed by updating the code in axtrans.py in Commit d53f109

  • Issue #12: The ratio slider would skip the numbers 1 and 11. The logic was ajusted a little bit as it was found to be a bit messy, however the real problem lies in the fact that using the mouse causes the ratio output to skip numbers, particularly those nearest to 1 and 11, however if you use the left and right arrows on the keyboard to move the slider all numbers are displayed correctly. This shows it's not a logical error but one of mouse sensitivity. Logic was updated in Commit f6b26ea

Technology Stack

SteemAX is written to use Python 3.5 and MySQL. The web interface for https://steemax.trade and https://steemax.info has been written in HTML, CSS and Javascript.

Roadmap

In the future more contributors will be brought into the fold
via Task Requests to help improve the functionality of the site and most especially the look and feel. After all, projects always benefit from the synergistic action of teamwork.

Contact

Please contact Mike (Mike-A) on Discord
https://discord.gg/97GKVFC

GitHub Account

https://github.com/artolabs

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution. A nice update to the project. It would be nice if you comment on what exactly the numbers are for out here.


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Yes that makes sense. Thank you. They are to map the ratio slider to the three zones of granularity mentioned in my last update post.

·

Thank you for your review, @codingdefined!

So far this week you've reviewed 12 contributions. Keep up the good work!

I use SteemAx! Good work!

Posted using Partiko Android

Thank you learnelectronics! You've just received an upvote of 78% by @ArtTurtle!


Learn how I will upvote each and every one of your art and music posts

Please come visit me as I've updated my daily report with more information about my upvote value and how to get the best upvote from me.

Nice update but I want to report little problem:
I have active deal with @jozef230. Ratio was set to 1:1 but my account always running below 80% Mana Power so my upvote is lower then his.
Would it be possible to run another check before the exchange and adjust ratio if needed to make sure it is 1:1 in SBD?

·

I see that you and @jozef230 are off by only fractions of one cent, which is very little. This is due to the fact that the system itself will not allow a vote to be cast using a vote weight at a fraction of a percentage. So only whole numbers like 10%, or 51% can be used, not 51.678%, which is what would be needed in order to make both vote values match exactly. However, this causes the values to be off by only fractions of a percentage. It should be considered very negligible.

It looks great man! Thanks for the mention.

Hi @learnelectronics!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 7 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 15 SBD worth and should receive 106 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hey, @learnelectronics!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @learnelectronics! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You got more than 50 replies. Your next target is to reach 100 replies.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Trick or Treat - Publish your scariest halloween story and win a new badge
SteemitBoard notifications improved

Support SteemitBoard's project! Vote for its witness and get one more award!