Working of circuitVerse UI Phase 2
In ths blog, I am going to explain the working of the user interface I have developed during phase two of Google Summer of Code let’s starts.
Ideology
The simple ideology behind the create the new user interface is users should get more space. This is because touch is implemented in small screen devices such as smartphones or tablets of screen size ranging from 360 X 480 to 1024 X 1366. More the space more the users can enjoy Circuit Simulation.
Visual Changes and Working
There is no space for a simulator in the old UI and a lot of space in the new UI. For a detailed explanation of the Visual changes in UI please follow my last blog “Let’s talk about UI”.
Working of Menus
When reading the code base for the desktop version I observe that all menus have a base structure that is written in HTML and CSS and the rest all is just javascript code. Initially, I thought that I have to write code for each menu again for the mobile version but after reading the codebase I realize that I have to write just base HTML CSS and old javascript for the menu that can be used to create new menus.
The below photos will help you all to visualize my observation
My idea was
To create menus I have used div I have made four div with the same class and display flex direction row to the top right. each button is associate with another div with presenting menu option for the simulator. When we click on the button menu is visible and when we again click on the button the menu will disappear.
To listen to touch input I have use listeners such as touch and mouse because my observation was they were very responsive and accurate on touch.
There are four menus on the top right corner the problem I was facing is if two menus are open simultaneously. Because this was not looking good, I decided to add code that will disable the remaining menu if the user clicks on any one menu. The below gif explain the working of buttons.
Coming to the most interesting part i.e javascript code.
As the simulator starts the javascript pushes the final render into base HTML and CSS code using dom elements so what I did I use screen width if the screen is desktop or smaller screen and according to that I have changes the id of elements for this I have written the current screen function.
export function currentScreen() {
if (window.screen.width > 1367)
{ uniqid.modulePropertyInner = ‘#moduleProperty-inner’;
uniqid.PlotAreaId = ‘plotArea’;
uniqid.plotID = ‘plot’;
uniqid.tdLog = ‘#timing-diagram-log’; }
else {
uniqid.modulePropertyInner = ‘#moduleProperty-inner-2’;
uniqid.PlotAreaId = ‘plotArea-touchpanel’;
uniqid.plotID = ‘plot-touchpanel’;
uniqid.tdLog = ‘#touch-timing-diagram-log’;
}
return uniqid;
}
function openCurrMenu(index) {
$(‘#Help’).removeClass(‘show’);
var element = getID(index);
if(element.style.visibility === ‘visible’)
{element.style.visibility = ‘hidden’;}
else
{element.style.visibility = ‘visible’;}
for(var i=0;i<4;i++){
if(i == index){
continue;
}
else
{
var closelemnt = getID(i);
closelemnt.style.visibility = ‘hidden’;
}
}
}
This function change id according to the screen.
For example, let us consider the module property. When the simulator starts all the functions using the Id ‘#moduleProperty-Inner’ is replaced by ‘#moduleProperty-Inner-2’ if the screen width is less than 1366 else it remains the same.
This approach is used for all four menus benefit is that it reduces code size and works efficiently.
Working of Quick Tools
Quick tools were created so that users can easily access functions that cannot access on the touch screen if we compare to the desktop, for example, for undo, we cause either right-click undo or cut + z to undo but in touchscreen, no right-click no keyboard. Thus quick tools come here.
Initially, there are three quick tools added i.e Undo, delete and fit the screen.
I have used three divs which are aligned side by side to the bottom right corner.
Each is added with touch and mouse listeners when click activates functions.
Shown on below image:
Change of Menu color on Tap
The change of color on the tap represents that the menu is activated or deactivated. It doesn’t seem important but it’s most important.
To activate the color on tap I have written a new function
function onTapColor(classList,currentIndex,color) {
if(classList[currentIndex].style.backgroundColor === color){
classList[currentIndex].style.backgroundColor = ‘’;
}
else{
classList[currentIndex].style.backgroundColor = color;
}
for( var i=0;i<classList.length;i++){
if(i == currentIndex){
continue;
}
else{
classList[i].style.backgroundColor = ‘’;
}
}
}
This function uses three-parameter class list,currentIndex and color
classList: Gives names of current button class
CurrentIndex: Index of the button of which color is to be change
Color: Color to be on tap
This function changes the color of the current tap menu and resets all remaining to default.
So this was my Journey and experience for UI development of the Circuit verse website on mobile devices next blog I will explain the mistakes of phase 1 and phase 2 until then……wait for the next blog.
About me
Hello Everyone, I am Abhishek R. Zade, currently an undergrad student in Information Technology at All India Shree Shivaji Memorial Society Pune.Savitri Bai Phule Pune University. I am in my third year. Currently, I am working with an open-source organization name CircuitVerse in this year’s GSoC.
About my project
My project is on Touch Compatibility with CircuitVerse Website. The current situation of the CircuitVerse website is, it supports only desktop browsers i.e mouse, it does not have any touch support. So I aim to bring out a website for touch devices, so more users can enjoy making circuits on their smartphones.
