用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

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

用Javascript实现的嵌入式软件定制界面相关推荐

Android ROM定制——界面美化基础
Android ROM定制--界面美化基础前言:很多童鞋对美化很感兴趣,都想拥有一个完完全全属于自己风格的手机系统!对那些自定义全局背景,1%电量显示,透明下拉菜单...都很感冒!美化的重点跟难点就 ...
电视android内置系统界面,系统界面：原生安卓定制界面_汽车科技评测-中关村在线...
在系统界面层级上,两者虽然都采用Android系统,不过思路却完全不同.酷比魔方A1在开机之后我们能立刻感受到原汁原味.系统内置了一系列的安卓平台应用,不过对于大部分的用户而言,VST与泰捷视频相信还 ...
android 年终盘点总结报告,2013 Android年终总结 - 盘点五年来的各种定制界面
作为开源手机操作系统,其自由定制和强大的背后支持使它成为了世界上最流行的智能手机OS.区别于与之竞争的IOS.WP.Blackberry.Sailfish.Tizen.Firefox.Ubuntu(W ...
仿腾讯新闻频道定制界面效果
转载请注明出处 http://blog.csdn.net/oddshou/article/details/73467589 更新: 仿腾讯新闻频道定制界面效果2 这个效果一直想做,最近项目无事决定着手 ...
仿腾讯新闻频道定制界面效果2
转载请注明出处 http://blog.csdn.net/oddshou/article/details/73558553 上一篇文章仿腾讯新闻频道定制界面效果1中在实现过程中有很多不如意的地方,可以 ...
freeCAD定制界面
由于freecad接口是基于现代Qt工具包,它非常先进.窗口,菜单,工具栏和其他工具都可以修改,移动工作台,共享,键盘快捷键都可以设置.修改,以及宏,它可以录制和播放.定制界面是访问Tools -&g ...
qt编写网易云界面（8）----专属定制界面
前段时间把qt网易云中的简单的画廊写了一下,多谢狗哥大佬给的指点,后期我也会把源码发到git 上,让大家快点了解,喜欢我博客,可以关注我,私信我可以提前得到当前代码.(看到必回) 我们目标的网易云界面 ...
Qt+html+JavaScript实现类似QQ聊天界面的气泡效果
这是一个简单的类似QQ聊天界面的Demo,用Qt实现,在QWebView里嵌入网页的方式实现.先看效果图: 无论怎样,我觉得自己动手写出来的东西才是自己的,所以源码不全,重点的代码我会放上来.只是模拟 ...
鸿蒙 OS：使用 JavaScript 开发 Todo App UI 界面
距离鸿蒙 OS 2.0 发布已经过去一些日子了,看到鸿蒙系统强大的设备共享能力,我觉得未来它一定能够成为主流的操作系统.在利用了分布式系统的优势之后,多个设备间可以共享应用程序界面和数据,并且对于开发 ...

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

用Javascript实现的嵌入式软件定制界面相关推荐

最新文章

热门文章