用Javascript实现的嵌入式软件定制界面

聪明的软件工程师会利用软件来简化自己的工作，本人显然过于迟钝，直到最近才开窍，懂得去利用软件来简化写软件的工作量。

以前，一直在维护一套dvd解码的软件，这套软件规模，说大不大，说小也不小，大概100多万行，可是总是有做不完的客户定制工作需要经常打开或者关闭某些功能定义。按照传统的方法就是直接去修改h文件，然后保存，然后make all。

多年前，第一次编译Linux内核，在make之前要先make menuconfig，看了那个config的方式，印象很深刻，想说如果把这套方式用在手头的软件上是不是也可以呢？不过后来还是没有花太多时间去了解Linux的定制界面是如何实现，据说是用来一种比较高级的脚本语言来做。

有时候，灵感来临就是一瞬间，这一次我把它捕捉下来，因为我觉得这个做法比较简单，而且有一定的好玩性。说真的，我对Java script的认知真的很基础，之前没有做过任何项目，不过在过去的一个星期，加上五一假期闲中偷忙地囫囵吞枣式地恶补之后，基本上已经把功能完成了。下面发出来给大家观赏一下。

整个项目的构想是这样的：

1. 用java script写一个网页程序，可以在本地运行和显示用户的选项，比如默认的osd语言，是否支持循环播放，默认的dvd区码等等。

2. 用户在网页界面上选择完成之后，按保存按键，就会在本地生成一个h文件，这个h文件就是包含了相关的#define XXXX的头文件

3. 然后把这个h文件#include到源程序里面，就可以实现程序的定制。

下面是这个软件的界面，我直接把HTML代码嵌入进来了：

是否支持TV(如果是DTV或者64位游戏也要选择)？

是否支持64位游戏模块？

是否支持DTV？

默认全碟重复？

使用京东方屏？

使用龙腾屏？

仿数码相框？

是否8202KA？

是否8202KD？

是否支持55键？

是否支持44键？

是否默认英文？

是否默认西班牙文？

是否默认土耳其？

是否默认意大利语？

是否默认阿拉伯语？

是否默认日文？

是否默认俄语？

是否默认韩语？

是否默认葡萄牙语？

是否默认泰语？

是否默认中文？

请选择开机画面：logo_fuzhen_game32dvd
logo_fuzhen_dpf2logo_155audilogo_155benz
logo_155bmwlogo_155cherylogo_155honda
logo_155hyundailogo_155infinitilogo_155kia
logo_155lexuslogo_155mazdalogo_155mitsubishi
logo_155nissanlogo_155suzukilogo_155toyota
logo_155xiefulailogo_222_wvlogo_309_buick
logo_309_bydlogo_309_changanlogo_309_changchen
logo_309_chevroletlogo_309_citroenlogo_309_dasauto
logo_309_fordlogo_309_guangqilogo_309_honda
logo_309_huatailogo_309_hyunoai
logo_309_jaclogo_309_kialogo_309_mazda
logo_309_nissanlogo_309_rongweilogo_309_toyota
logo_309_yiqicarlogo_309_zhonghualogo_999_toyota
logo_acvlogo_acesdvdslogo_acuraVision
logo_allinOnelogo_alfaromealogo_arena
logo_arena_bentianlogo_arena_benzhi
logo_arena_bmwlogo_arena_fongtianlogo_arena_nissan
logo_audilogo_audi3logo_autobarn
logo_autolecklogo_autoleck_www
logo_autotainlogo_avelinologo_avelino2
logo_avlonlogo_aziteklogo_badreldeen
logo_beatlogo_beeper909logo_beltek
logo_benz_bluelogo_blacklogo_bluecolor
logo_bluevisionlogo_bmwlogo_bmw_black
logo_bmboschmann2logo_bm_boschmannlogo_boomerang
logo_boosterlogo_boss_redlogo_brilliant
logo_c_quinslogo_carscreenlogo_car_alfa_romeo
logo_car_audilogo_car_bmwlogo_car_buick
logo_car_chevroletlogo_car_chevrolet2
logo_car_citroenlogo_car_fiatlogo_car_ford
logo_car_ford_whitelogo_car_greatwaylogo_car_honda
logo_car_hyundailogo_car_kialogo_car_land_rover
logo_car_mazdalogo_car_mercedes
logo_car_mitsubishilogo_car_nissanlogo_car_opel
logo_car_peugeotlogo_car_porsche
logo_car_renaultlogo_car_seatlogo_car_skoda
logo_car_subarulogo_car_suzukilogo_car_toyata
logo_car_volkswagenlogo_car_volvologo_car_x
logo_carz_chryslerlogo_carz_hyundailogo_carz_kia
logo_carz_ssangyonglogo_carz_toyota
logo_carz_wfinderlogo_caraudiovideologo_cartronicsca
logo_carvisionlogo_carvisionuk
logo_citroen_carlogo_claytonlogo_climber
logo_compantlogo_cr_vlogo_cr_v_car
logo_cuclonelogo_digibrazlogo_digoptions
logo_directvisionlogo_doyleslogo_doylesincar
logo_dplogo_eagle_headlogo_Elmansy
logo_elsayedlogo_elinzlogo_elinz2
logo_Etechlogo_f7logo_farazlogo_fivestar
logo_foozhanlogo_ford_blacklogo_fultron
logo_fultron_carsyslogo_fultron_audiocar
logo_fw_audilogo_fw_benzlogo_fw_bmw1
logo_fw_bmw2logo_fw_fordlogo_fw_landrover
logo_fw_vwlogo_galaxylogo_gemini
logo_gmclogo_hitvlogo_hitv_www
logo_holdenlogo_hollywoodlogo_hosgeldiniz
logo_hoofd_dvd7logo_hoofd_dvd9logo_hoofdsteunen_d
logo_hoofdsteunen_mlogo_hyundai2
logo_hyundai_logo2logo_iimatralogo_imp
logo_inatlogo_inat2logo_jaclogo_jaguar
logo_jvjlogo_jvjcarlogo_kennon
logo_kingcologo_kt5logo_ladillac
logo_landroverlogo_lexuslogo_logigo
logo_longtermlogo_m1logo_map
logo_marshallogo_massalogo_matrix
logo_maxorslogo_mebbasayarlogo_megmudio
logo_meoslogo_miraylogo_miray_new
logo_mitsubishilogo_mgaragerlogo_mobile
logo_mobile_meoialogo_mobileteklogo_mongoose
logo_morellogo_morel2logo_morel3
logo_moviesionlogo_native_gamelogo_navaudio
logo_navimexlogo_navixlogo_naviin
logo_nesalogo_nippoteclogo_night
logo_ONEcar_Logologo_operalogo_ouku
logo_peninsulalogo_plexonlogo_poronix
logo_powerpacklogo_protonlogo_proton_black
logo_proton_newlogo_raymoslogo_radiant
logo_rdlogo_roslogo_rogerslogo_sh
logo_sierralogo_simiyalogo_sonics
logo_sony_dvdvideologo_sony_Japan
logo_sonyMP4_malaysialogo_sony_malizealogo_sooudio
logo_stormlogo_StrappFordlogo_svp
logo_tossalogo_toyota_blacklogo_toyota_blue
logo_toyota_whitelogo_toyota_336
logo_toyota5logo_tronixlogo_tts
logo_ultrasoniclogo_ultrasonic_oldlogo_vision
logo_visionairelogo_volvologo_vmteq
logo_wfinderlogo_wv_daslogo_worldtech
logo_xbslogo_xbs2logo_xomaxlogo_xtrons
logo_xtrons_blacklogo_zeroslogo_zicom
logo_zydvd1

请选择默认音量级别：1512

然后就是JS部分的设计：

在实现的过程中，有几个难题：

1. 确定用那几种控件来表达config文件里面的不同形式，这需要一些抽象思维和概括能力，唉，事实上我纠结了很久。不过总算把它work it out了。

我把所有定义归类为3种，第一种是最简单的，也就是支持还是不支持，只有2选一，然后表现出来的定义方式就是类似于

#define STH

或者

//#define STH

对于这一类定义，我提供一个单选框，也就是checkbox

对于第二种，就是多选一，如上面的55键还是44键，这种使用radio button来做

第三种类型，是给某个常量赋值，比如默认的osd语言，我采用select来做

2. 第2个难题其实也是从第一个里面来，就是如何从控件里面获取我需要的信息，也许我是对这些控件不熟，我一开始是看了好多例子，然后我发现与其看例子不如查手册。我最后的做法是把checkbox的value直接写成define里面的常量名，这样我在编码的时候就可以用来构造输出的文本。

3. 第三个难题是如何让html文件变成可扩展，也就是以后往里面增加选项的时候，不用同时更新业务部分的代码。这个其实也是结合上面2点，上面2点做好了，这个问题就不存在了。我的做法是：

var my_string;
	var fso, file;
	var ipt = document.getElementsByTagName("input");
	var len = ipt.length;
	var ipt_str = new Array(len - 2);

	var sel = document.getElementsByTagName("select");
	var sel_len = sel.length;
	var sel_str = new Array(sel_len);

	len -= 2;
	//最后2个是按钮

	for (var i = 0; i < len; i++) {
		//alert("this is "+i);
		//alert(i+ " type is "+ ipt[i].type);
		if (ipt[i].type == "checkbox") {
			if (ipt[i].checked) {
				ipt_str[i] = "#define " + ipt[i].value;
			} else {
				ipt_str[i] = "//#define " + ipt[i].value;
			}
		} else if (ipt[i].type == "radio") {
			if (ipt[i].checked) {
				ipt_str[i] = "#define " + ipt[i].value;
			} else {
				ipt_str[i] = "//#define " + ipt[i].value;
			}
		}

	}

	for (var j = 0; j < sel_len; j++) {
		sel_str[j] = "#define " + sel[j].name + " " + sel[j].options[sel[j].selectedIndex].text;
	}

我在上面的代码里面定义了一个ipt_str[]数组，这个数组就是保存各个定义。

然后用for循环遍历各个控件的属性，然后把value取出来构造成我们最终想要的形式输出。

4. 最后一个难题，就是对于文件输出的支持，目前只有ie上面能正常，firefox是不支持的，还好我没有在这个问题上面纠结很久。反正我只需要这个功能能在本地使用就行，所以浏览器的兼容性不是我要考虑的问题。

下面把文件输出的代码贴上来：

fso = new ActiveXObject("Scripting.FileSystemObject");
	if(fso.FolderExists("d:\\javascript") == false)
	{
		fso.CreateFolder("d:\\javascript");
	}
	file = fso.CreateTextFile("d:\\javascript\\cfg_js.h", true);
	for ( i = 0; i < len; i++) {
		file.WriteLine(ipt_str[i]);
	}
	for ( j = 0; j < sel_len; j++) {
		file.WriteLine(sel_str[j]);
	}
	file.Close();

最后输出的文件是这样子的：

//#define SUPPORT_TV
//#define SUPPORT_ET_GAME64
//#define SUPPORT_ET_DVB
//#define INIT_REPEAT_ALL
#define USE_JDF_TFT
//#define USE_LONGTEN_TFT
//#define SUPPORT_FALSE_DPF
//#define GENERAL_PORTABLE_8202KA_64_DVD
#define GENERAL_PORTABLE_8202KD_64_DVD
#define USE_55KEYS_IR
//#define USE_44KEYS_IR
#define DEFAULT_OSD_ENGLISH
//#define DEFAULT_OSD_SPANISH
//#define DEFAULT_OSD_TURKISH
//#define DEFAULT_OSD_ITALIAN
//#define DEFAULT_OSD_ARABIC
//#define DEFAULT_OSD_ARABIC
//#define DEFAULT_OSD_RUSSIAN
//#define DEFAULT_OSD_KOREAN
//#define DEFAULT_OSD_PORTUGUESE
//#define DEFAULT_OSD_THAI
//#define DEFAULT_OSD_CHINESE
#define CUSTOM_LOGO logo_worldtech
#define VOL_VALUE 15

这样，这个小小的项目就介绍完了。