New Products Coming 
In the next months, we will be developing a new line of I2C products. We are working on a stepper motor controller (single and dual), analog to digital converters, current sensors, a relay/optoisolator input combo, PWM, various sensors, and a number of other I/O devices.

These devices will compliment our RS-232 to I2C adapter. You will be able to use your serial port to control relays and stepper motors easily. We will be offering these devices in form factors that can accomodate DIN rail mounting.

Stay tuned for these new devices.

[ add comment ] ( 313 views )   |  permalink  |   ( 2.9 / 2987 )
Simple PHP HTML AJAX Tabset Class 
I decided to share a cool piece of code with the world. If you need a simple HTML tab system for your code, try this. I think you will like it. The tabs can be nested too! Check out the demo.

The base code was taken from here:
http://www.alistapart.com/articles/slidingdoors/

[ have not finished the force default part yet but that will be done soon. You can add it yourself also. ;-)

I will better describe what is going on here later. For now, just have fun making it work for you. Once you get it working, you will find it super easy to make tabs in your application.

Oh yeah, there are probably bugs too! I will be updating this code shortly.

Feel free to use this however you want. Consider it open sourced. You will probably have better karma if you mention I wrote it in your code somewhere. Nobody wants bad karma. I'll leave that up to you.


<?php

// Put this in the start of your application
if( !isset($_SESSION) ) {
session_start();
}


if( isset($_GET['tabpersistance']) && $_GET['tabpersistance'] == 1 ) {
if( isset($_GET['tab']) ) {
list($tabgrp, $tab) = split(':', $_GET['tab']);

$_SESSION['tabs'][$tabgrp] = $tab;

// We are done here just need to set the session var
// This is AJAX'ish
exit(0);
}
}


class ybt_TabSet {

private $tabSetName = '';
private $tabSetWidth = 350;
private $tabs = array();

public function __construct($name, $width=350) {
$this->tabSetName = $name;
$this->tabSetWidth = $width;
}

public function addTab($name, $title, $content='', $default = '', $forceDefault=false) {
if( $default == '' ) {
if( isset($_SESSION['tabs'][$this->tabSetName]) && $_SESSION['tabs'][$this->tabSetName] == $name ) {
for( $i=0; $i < count($this->tabs); $i++ ) {
$this->tabs[$i]['tabdefault'] = false;
}

$default = true;
}
}

$this->tabs[] = array('tabname' => $name, 'tabtitle' => $title, 'tabcontent' => $content, 'tabdefault' => $default);
}

public function __tostring() {
$outHTML = '';

$outHTML .= '<div class="tabcontainer" style="width: '.$this->tabSetWidth.'px;">
<div class="tabelement">
<ul id="'.$this->tabSetName.'">';

foreach( $this->tabs as $tab ) {
$outHTML .= " <li id=\"".
$tab['tabname'].
"\" class=\"".
($tab['tabdefault'] ? 'curtab ' : '') .
$this->tabSetName."\"><a href=\"#\" onClick=\"return showTab('".
$tab['tabname'].
"', '".
$this->tabSetName."');\">".
$tab['tabtitle'].
"</a></li>";
}

$outHTML .= ' </ul>
</div>';

foreach( $this->tabs as $tab ) {
$outHTML .= '<div class="tabbody '.$this->tabSetName.'body" id="'.$tab['tabname'].'body" '.($tab['tabdefault'] ? '' : ' style="display: none;"').'>';
$outHTML .= $tab['tabcontent'];
$outHTML .= '</div>';
}

$outHTML .= '</div>';

return $outHTML;
}


}
?>


Here is the Javascript


////////////////////////////////////////////////////////////////////////
// These functions are for the tabs UI elements


function showTab(tabid, tabGrpClass) {
var theTabBody = document.getElementById(tabid + 'body');
var theTab = document.getElementById(tabid);
var theCurTab = getElementsByClassName('curtab ' + tabGrpClass, 'li', document);
var theRest = getElementsByClassName('tabbody ' + tabGrpClass + 'body', 'div', document);

for(var i=0; i<theCurTab.length; i++){
theCurTab.className = tabGrpClass;
}

for(var i=0; i<theRest.length; i++){
theRest.style.display = 'none';
}

theTab.className = 'curtab ' + tabGrpClass;
theTabBody.style.display = '';

// Send current tab to server for session tab persistance
if (searchReq.readyState == 4 || searchReq.readyState == 0) {

searchReq.open("POST", 'index.php?tabpersistance=1&tab='+ tabGrpClass +':'+ tabid, true);
searchReq.onreadystatechange = handleTabResponse;
searchReq.send(null);
}

return false;
}

function handleTabResponse() {
// Do nothing

//if (searchReq.readyState == 4) {
// alert(searchReq.responseText); // for testing
//}
}


// This function was borrowed from here:
// http://www.robertnyman.com/2005/11/07/t ... classname/
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements;
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
}
}


//Our XmlHttpRequest object to have tab persistance
var searchReq = getXmlHttpRequestObject();



To use this class simply instanciate a ybt_TabSet class, add tabs to it and print. Like this!


$myTabs = new ybt_TabSet('tabsetname', 600);

$myTabs->addTab( 'one', 'Tab 1', '<h4>Some Content 1</h4>', true);
$myTabs->addTab( 'two', 'Tab 2', '<h4>Some Content 2</h4>');
$myTabs->addTab( 'three', 'Tab 3', '<h4>Some Content 3</h4>');

echo $myTabs;



Here is the CSS styles I am using:


.tabelement { float:left;
/*width: 350px;*/
width: 100%;
}

.tabelement ul { margin:0;
padding: 10px 10px 0;
list-style:none;
}

.tabelement li { float:left;
margin:0;
padding: 0 0px 0 9px;

}

.tabelement a { display:block;
padding: 3px 15px 3px 6px;
text-decoration:none;
font-weight:bold;
cursor: default;

/*background-color: #fee;
border-color: blue;
border-width: 1px 1px 0px 1px;
border-style: solid; */

}

.tabbody { /*border: 1px dashed green; */
border: 1px solid #000;
border-top: none;
background-color: #efe;
padding: 10px;
/*width: 328px;*/
clear: both;

}

.tabcontainer { margin: 20px;

}

.tabelement .curtab a {
padding-bottom: 4px; }



/* looks of the tabs */

.tabelement { font-size:85%;
background: url("../images/tabs/bg.png") repeat-x bottom;
line-height:normal;

}

.tabelement li { background:url("../images/tabs/left.gif") no-repeat left top;
}

.tabelement a { background:url("../images/tabs/right.gif") no-repeat right top;
color:#654;
}

.tabelement a:hover { color:#222;

}

.tabelement .curtab { background-image:url("../images/tabs/left_on.gif");

}

.tabelement .curtab a { background-image:url("../images/tabs/right_on.gif");
color:#222;
}




[ add comment ] ( 335 views )   |  permalink  |   ( 2.9 / 478 )
New blog system install 
I just installed this blog system. Its pretty cool. I hope you will like it.

[ 1 comment ] ( 242 views )   |  permalink  |   ( 2.9 / 2582 )

| 1 |