Here are some view component examples

[Jokke]

Hello,

I have used some server side sripts on graphical views. Some are quite specific for the need. I have tried to make some in more generic way and here are some. I will check if i could clean some others and post here...

These are used as server side script component.

A drop down menu (select) which shows current value. Can set the value by selecting from menu.(edited the code and works now atleast on firefox and on Nokia mobile )

//Select example
var min = 1;
var max = 8;
var lead =""; //for leading zero or space
var s="";

s+="<select  onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.selectedIndex+"+min+" )'>";

for(var i = min; i <= max ;i++)
{ 
   if (i > 9) {lead = "";}

   s+= "<option value="+ i;
   if (value == i) { s+= " selected ";}
   s+= ">"+i+ "</option>";
}
s+="</select>";

return s;

checkbox for binary point

var s = "";
var arvo = "";

if (value)
{
     arvo = 0
     s += "<INPUT TYPE=CHECKBOX checked onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"false\");return false;'/>";
}
else
{
 s += "<INPUT TYPE=CHECKBOX onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"true\");return false;'/>";

}
 return s;

Quite simple... a text box (which is printing BCD value as 24h clock time)

var s ="<input type='text' size=5 value=' ";
var minute ="";
var hour ="";

if(Math.round(value%100)<10)
{
   minute += "0";
}
minute += Math.round(value%100);

hour=Math.floor(value/100);
if(hour == 0)
   s += "0";
s += hour;
s += ":";
s += minute;
s += " '>";

return s;

Lamp image, clicking on it is setting/resetting a bit in variable

var s = "";
var mask =1024; //1024 is bit 10, 8=bit 3
var arvo = "";

if (value & mask)
{
     arvo = value - mask;
     arvo = arvo +"";
     s += "<img style='cursor:pointer;' src='graphics/LightBulb/light_on.gif' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\","+ arvo+");return false;'/>";
}
 else
{
     arvo = value + mask;
     arvo = arvo +"";
     s += "<img style='cursor:pointer;' src='graphics/LightBulb/light_off.gif' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\","+ arvo+");return true;'/>";
}
 return s;

Lamp image clicking on it sets a binary point(from an old example in some other thread)

var s = "";

if (value)
{
     s += "<img style='cursor:pointer;' src='graphics/LightBulb/light_on.gif' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\",false);return false;'/>";
}
 else
{
     s += "<img style='cursor:pointer;' src='graphics/LightBulb/light_off.gif' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\",true);return true;'/>";
}
 return s;

I hope these are for some use

BR
-Jokke

[JoelHaggar]

Hey Jokke,

Thanks so much for these. The first two are awesome. I which I understood javascript better so I could do stuff like this.

The drop down didn't seem to set the point in google chrome browser but worked great in firefox.

Thanks,
Joel.

[Jokke]

Hi Joel,

These examples are based on "onclick" event. It is quite odd method to use it on select option. It would be great to have some form or document (or something similar) function on serverside script. To be able to call this."selectName".... to return the selected value like normal JS way. Having radiobuttons could then also be possible.(it is possible with making several points the same way as checkbox).

Not to disrespect the fancy ajax-thingies, but I find these normal web input types, more usable(I believe I'm not the only one). :) Of course with ajax to have action without any submit /send/set/refresh buttons.

Maybe a wishlist item to have serverside scrit to have multiple points for the script like meta point...

BR
-Jokke

[mlohbihler]

Have you tried using "onchange" for a select instead of "onclick"?

[Jokke]

Yes I first tried with onChange and for some reason I didnt get it working. It was some time ago with earlier mango version.

However now I made a new try and it works. I updated the above post to have a better version of the code.

BR
-Jokke

[Jokke]

Here are more select examples as they seem popular.

The simple example which was on the other topic

//Simple Select example
var s="";

s+="<select  onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.options[this.selectedIndex].value )'>";
 
s+= "<option value=1";
if (value == 1 ) { s+= " selected ";}
s+= "> one </option>";

s+= "<option value=2";
if (value == 2 ) { s+= " selected ";}
s+= "> two </option>";

s+= "<option value=3";
if (value == 3 ) { s+= " selected ";}
s+= "> three </option>";

s+= "<option value=4";
if (value == 4 ) { s+= " selected ";}
s+= "> four </option>";

s+="</select>";

return s;

A generic script for multistate point(uses the text and colour defined in multistate point renderer properties)

//Multi State Select example

//list of states (value key and the text)
var MSList=point.getTextRenderer().getMultistateValues();
var min = 0;
var max = MSList.size();
var s="";
var s2=""; //temporary inside loop, to be able to set the color

//check if list has values
if(max==0){return "No States defined";}
//sanity limit
if(max>100){return "More than 100 states";}

s+="<select  ";
 
for(var i = min; i < max ;i++)
{
   s2+= "<option ";
   //use the state colours 
   s2+= "style='color:"+ MSList.get(i).getColour() + "' ";
   s2+="value="+ MSList.get(i).getKey() ;

   if (value == MSList.get(i).getKey()) 
  { 
      s2+= " selected ";
      //set the select color according to the value
      s+= "style='color:"+ MSList.get(i).getColour() + "' ";   
}
   s2+= "> "+MSList.get(i).getText()+"</option>";
}
s+="onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.options[this.selectedIndex].value )'>";

// put the options into the string
s+=s2;

s+="</select>";

return s;

One which is quite easy to modify to some specific need

//Select example with values defined in arrays
//list of the values shown
var choices=new Array("Pint","US gal","UK gal");
//the values for the choices
var values=new Array(0.568,3.785,4.546);
var min = 0;
var max = choices.length;
var s="";

//check if list has values
if(max==0){return "No selections defined";}
//check the array sizes match
if(choices.length!=values.length){return "Array sizes not equal";}

s+="<select  onChange='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", this.options[this.selectedIndex].value )'>";
 
for (var i = min; i < max ;i++)
{
   s+= "<option value="+ values*;

   if (value == values* ) { s+= " selected ";}
   s+= "> "+ choices* +"</option>";
}
s+="</select>";

return s;

BR
-Jokke

[fmunhoz]

Very useful examples, I would like to set an RTC clock using two select combobox: Hours 0-23 and Minutes 0-59.
The datapoint must be set in seconds, so I need two combos performing some scripting like get the value of hours3600 plus minutes60.
I am trying but could not do it yet.
Here is my code, it works outside mango, but could not set the datapoint from this, anyone could help?

<script language="JavaScript">

function checar() {

campo1 = document.form.select1;
campo2 = document.form.select2;

if(campo1.value!="") {
valor1=campo1.value;
} else {
valor1=""; 
}


if(campo2.value!="") {
valor2=campo2.value;
} else {
valor2=""; 
}

um = valor1*3600; // hour to seconds
dois = valor2*60; // minutes to seconds
totalSec = um+dois;

if(um=="" && dois=="") {
document.form.total.value=""; 
} else {
document.form.total.value=totalSec; 
//mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", "+totalSec+" )'>"; 
}

}

</script>


<form name="form">
<select name="select1" onChange="checar()">
<option></option>
<option value="1">1</option>
<option value="0">...</option>
<option value="23">23</option>
</select>

<select name="select2" onChange="checar()">
<option></option>
<option value="1">1</option>
<option value="0">...</option>
<option value="59">59</option>
</select>
<input type="text" name="total" value="">
</form>