Replace the switch button by a radio button with three states off/solo/on

[etienneCharignon]

This PR is dependent on the preview-management-url PR.

It replace the following switch button:

by a three states button preview Off/my code in solo/preview on with all codes:

This is demonstrating how we could take profit of the preview management URL to control what can be displayed in the programmer preview.

I like this new widget with three icons representing the three states. This is a full and only CSS+Html solution, based on a input of type radio.

I like the symmetry of off/on icons with the headphone in the middle.

I'm not sure about the heavy usage of flex layout.

[juliendorra]

This is a necessary evolution, and a feature that will greatly benefit beginners and other users during big collective sessions (15+ people coding)

Here are my issues at the moment:

UX-wise, the icons are not standards: X is for closing a window, headphone are… :-) ?? and a checkmark is for selection or checking a list item.

We need icons that say Hide / Show / Solo.

Hide and Show are easy and quite standard, widely accepted: hide: https://thenounproject.com/search/?q=hide show: https://thenounproject.com/search/?q=show

Solo is harder, we have various choices: https://thenounproject.com/search/?q=front https://thenounproject.com/search/?q=me&i=1408780 https://thenounproject.com/search/?q=unique&i=967840 https://thenounproject.com/search/?q=unique&i=385004 https://thenounproject.com/search/?q=stand%20out

An option would also be to create the 3rd icon by combining the show icon with one of the icons to reinforce the meaning: "Show + Me", "Show + Unique"… Not sure if it is worth the effort, though.

(I have an account on Noun Project and will happily pay for the no-credit license if you find great icons there. I love to credit people but on Paysage it may be impractical to credit)

UI-wise, the icons are too close, the on/off state is not distinct enough. Usability would be better by using a style more like Google Maps iOS

[etienneCharignon]

Thank you very much for your comment. I agree that the icons I chose are note very expressive. The headphone was following the analogie with the Audio mixers, when you are only listening on yourself… ok, not very easy to catch.

Actually, I've been doing this development as an experiment, to feel the three states button for real and the result is that I'm not really convinced. Also, I'm sad to loose the former switch button that I liked.

I did not manage to make tree states switch button in html and CSS (I did not try very hard), but I did one in paysage.xyz for the simulation purpose. Give it a try if you like. You will see that it is not very easy to use :

var r = 30;
var x = 100;
var y = 100;

var de = 0;
var a = 1;
var alpha = -PI/2;
var bgcolor = 0;

function drawSwitch(x, y, positionInitiale, positionCible) {
  strokeWeight(6);
  stroke(bgcolor, bgcolor, bgcolor);
  fill(bgcolor, bgcolor, bgcolor);
  rect(x, y, 6*r, 2*r, 2*r);

  strokeWeight(1);
  fill(255, 255, 255);
  var distance = positionCible - positionInitiale;
  if(alpha < PI/2) {
    alpha += 0.05;
  }
  bgcolor = 100 * positionInitiale + 100 * distance * (sin(alpha)+1)/2;
  var position = positionInitiale + distance * (sin(alpha)+1)/2;
  ellipse(x+r+(position) * 2*r, y+r, 2*r, 2*r)
}

void mousePressed() {
  alpha = -PI/2;
  de = a;
  if(mouseX < x + r) {
    a = 0;
  }
  if(mouseX >= x + r && mouseX < x + 3*r) {
    a = 1;
  }
  if(mouseX >= x + 3 * r) {
    a = 2;
  }
}

void draw() {
  background(0);
  drawSwitch(x, y, de, a);
}

Therefor, I'm thinking of stepping back to the original switch button (switching the preview on and off) and adding beside it a toggle [solo] button.

Well, all this is still maturing for now. And, I might also give a try with the icons you pointed.