工程计算器 VOLTA-814

概述

此应用程序软件包已提交至 Windows 8* 和 Ultrabook™ 应用创新大赛。

类别 1：生产力

类别 2：教育

平台：Windows 8 桌面（任意版本）

Ultrabook 专属功能

• 触摸屏和标准 PC 鼠标操作模式
• 基于 GPS/地理定位的“查找职业介绍所”可选扩展（"Jobrica-2013"）
• ALS 自动选择配色方案（可选 - 请参阅“兴趣点”部分中的设计说明）

整个软件包（软件“捆绑包”）包含核心应用程序，即：工程计算器“Volta-2013”，以及可选的应用程序扩展“Jobrica-2013”，它允许在特定搜索区域查找职业介绍所，这些区域可以由用户手动指定，也可以通过使用实时地理定位服务。

核心应用程序 Volta-2013 兼容 Windows 7/8，可在触摸屏或标准鼠标/键盘桌面模式下运行。可从 Intel AppUp 商店 [1] 免费下载（于 2012 年 11 月 27 日发布）。用户手册可在 [2] 获取。 

应用程序扩展“Jobrica-2013”也可以在 Windows 7/8 中运行，但其实时地理定位功能仅在 Ultrabook/Win8 中可用；它实现了通过 TTS 技术提供语音消息的多模态用户界面。其相应的网页利用 Microsoft Bing 地图技术和搜索引擎，并扩展了公司（Infosoft International Inc, NY）专有的美国 200 多家职业介绍所数据库，主要集中在高科技领域。  该应用程序可在 Intel AppUp 商店免费获取；（于 2012 年 11 月 29 日发布 [8]）。

背景

用于 Microsoft Windows 的工程计算器 VOLTA-2013 ([1,2]) 扩展了其前身“VOLTA-2011”的功能和应用范围，后者之前已在线发布 [3] 并在 Codeproject [4] 上讨论过。 

原始计算器“VOLTA-2011”作为 HTML5 网络应用程序实现，遵循现代软件范式中编程关注点分离的原则，即： 

• 内容：HTML5
• 演示：CSS3
• 功能：Javascript/jQuery

整个项目封装在一个数字足迹相当小（小于 10kB）的单个文本文件中。它没有使用任何图形文件，例如 .jpg 或 .png 等。所有美学增强，如：圆角、颜色渐变、边框和阴影，都完全通过 CSS3 样式实现，从而实现了非常小的应用程序足迹和快速的网页加载。

Volta-2014P

图 1：最近发布的适用于 Win 7/8 的计算器 VOLTA-201P（专业版）

Volta-2013

工程计算器 Volta-2013 是在线计算器“VOLTA-2011”的桌面版本。其安装程序是使用 Intel AppUp 封装器生成的，该封装器允许将 HTML5 Web 应用程序转换为 Windows 桌面可安装程序。

图 2：适用于 Win 8 桌面的工程计算器 Volta-2013 

图 3：带有圆角的计算器 Volta-2013

图 4：带有“浅色”背景的计算器 Volta-2013

使用代码

新版本 VOLTA-2013 中添加了多个选项，包括使用 jQuery 和 CSS3 包含文件进行动态样式设置；动态样式选择可以潜在地链接到环境光传感器输出。以下示例（列表 1 和 2）演示了圆角切换开关的编码技术。

列表 1. 圆角样式 (CSS3)

div#eeMain,
div#keyPad button,
div#keyPad input,
div#eeMain div.eeStyleControl,
div#eeMain div#eeRounded,
div#eeModel,
div#eeExtControl,
div#eeExtPanel,
div#eeStackControl,
div#eeStackRegister
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}</</

列表 2. jQuery 代码片段，用于切换圆角开/关

// ROUNDED CORNER On/Off ********************
$("div#eeRounded").click(function () {
   //get all stylesheets
   var styleSheets = document.styleSheets;
   // toggle stylesheet identified by href
   var href = 'RoundedCorner.css';
   for (var i = 0; i < styleSheets.length; i++) {
       if (styleSheets[i].href.toString().indexOf(href) >= 0) {
            styleSheets[1].disabled = !(styleSheets[1].disabled);
            break;
       }
   }
});

另一种 jQuery 技术用于动态加载/卸载与低/高对比度及背景选择相关的 CSS3 文件（请参阅以下列表 3 和 4 中的代码片段）

列表 3. 对应“浅色”背景配色方案的 CSS 样式表文件

div#eeMain {  background-color: #dedede; }

div#eeModel,
div#eeExtControl, 
div#eeStackControl,
div#eeStackRegister,
div#eeExtPanel, 
div.voltESeries { background-color: #eaeaea;  }

input#keyPad_Mem  { background-color: #f8f8f8;  }

button,
input,
div.eeCaption,
div.eeNotice,
div#eeExtControl,
div#eeStackControl,
div.eeSeriesTitle,
table.tabESeries { color: #202020; }

div#eeModel { color: #005500; }

button.keyPad_btnMemOp {  color: #005500;}

/* BACKSPACE/CLEAR INPUT KEYS*/
div#keyPad button#keyPad_btnBack,
div#keyPad button#keyPad_btnClr,
div#keyPad button#keyPad_btnAllClr {color:red;}

input,
button,
div.voltESeries { border: 1px solid #d0d0d0; }

button:hover { background: #d9d9d9; }

button:active {	border: solid 2px #909090; }

/* odd rows style */
table.tabESeries tr:nth-child(odd) { background-color: #f0f0f0; }

/* even rows style */
table.tabESeries tr:nth-child(even) { background-color: #eaeaea; }

/* Table hover style */
table.tabESeries tr:hover {background-color: #dadada; color: #101010;}

列表 4. jQuery 代码片段，用于动态切换高/低对比度和浅色背景（可与 ALS 传感器数据馈送关联）

// SELECT COLOR PALETTE ************************
$("div.eeStyleControl").click(function () {
        // disable all color styles
        $('link[rel=stylesheet][href="Style/ContrastNormal.css"]').remove();
        $('link[rel=stylesheet][href="Style/Light.css"]').remove();
        $('link[rel=stylesheet][href="Style/ContrastHigh.css"]').remove();

        // add appropriate color style
        switch (this.id) {
            case 'eeNContrast': $('head').append('<link type="text/css" href="Style/ContrastNormal.css" rel="stylesheet" />'); break;
            case 'eeHContrast': $('head').append('<link type="text/css" href="Style/ContrastHigh.css" rel="stylesheet" />'); break;
            case 'eeLight': $('head').append('<link type="text/css" href="Style/Light.css" rel="stylesheet" />'); break;
            default: break;
        }
    });

Jobrica-2013

Jobrica-2013 是 Windows 8 桌面/Ultrabook 应用程序扩展，利用 GPS/地理定位服务在附近的搜索区域中查找职业介绍所。它实现了由 Microsoft Bing 技术驱动的专用网页和桌面可安装应用程序，可在地理定位服务可用/启用时实时获取地理坐标，还允许手动输入搜索区域中心点，向所述页面发送相应的编码网络查询（请参见以下示例截图）

图 6：适用于 Win8/Ultrabooks 的 Jobrica-2013 桌面应用程序，示例截图

图 7：交互式地图显示附近的职业介绍所，示例截图 

示例编码解决方案：WPF 数字文本框

将 WPF 文本框输入限制为仅数字和选定的特殊字符并非易事。与 Win Forms 中的对应控件（例如，在 KeyDown 事件处理程序中可作为 e.KeyCode 访问）不同，WPF 控件仅提供 e.Key 属性，如果将其转换为字符串，则会返回诸如“D0”、“Back”或“OemPeriod”之类的值。快速解决方法如以下列表 5 所示。该解决方案允许在 WPF 文本框中输入数字 0-9 和特殊键：退格、删除、句点和减号。值得一提的是，可以通过添加更多“允许”的情况（使用 || 运算符）以及拦截“Shift”+ {Key} 的组合和任意“复制粘贴”的文本来扩展它，但对这种编码技术的详细介绍超出了本文的合理范围。只需注意，即使在“最坏情况”下，如果文本框中输入了一些无效字符，那么在“查找机构”按钮点击事件处理程序中实现的输入验证将抛出异常并通过 TTS（语音消息）或标准消息框（如果 TTS 功能已禁用）通知用户输入错误。

列表 5. WPF 数字文本框  

private void txtBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
    // allow "Backspace", "Delete", "Period" and "Minus" keys;
    // the list can be extended, for e.g. with OemComma
    if ( e.Key.ToString() == "Back" ||
            e.Key.ToString() == "Delete" ||
            e.Key.ToString() == "OemPeriod" ||
            e.Key.ToString() == "OemMinus")  return;
            
    // cast e.Key to int
    int _key = (int)e.Key;

    // restrict any key except for numerics: 0...9
    e.Handled = _key > 43 || _key < 34;
}

关注点

语音技术

应用程序扩展 Jobrica-2013 实现了多模态语音增强用户界面，利用 Windows 8 语音对象库，特别是 TTS（文本转语音）选项。它向用户提供语音指令和错误消息。此选项可以打开/关闭；如果禁用，标准消息框将代替并传递消息。

地理定位/GPS

应用程序扩展 Jobrica-2013 利用配备 GPS 的超极本中提供的实时 GPS/地理定位功能，提供在用户手动或通过实时地理定位服务提供的搜索区域中“查找职业介绍所”的选项。

语音技术

应用程序扩展 Jobrica-2013 实现了多模态语音增强用户界面，利用 Microsoft 语音对象库，特别是 TTS（文本转语音）技术集，向用户提供语音指令和错误消息。此选项可以打开/关闭；如果禁用，标准消息框将代替并传递消息。实际测试发现，TTS 受益于 Ultrabook 的高内部数据速率（归因于复杂的 SSD/SATA 双驱动），显著减少了语音响应延迟并提高了整体 UI 响应速度。

ALS 传感器用例

核心应用程序 VOLTA-2013 理论上能够自动选择样式，例如根据环境光传感器 (ALS) 的数据馈送（某些高端 Ultrabook 中包含）在明/暗对比配色方案之间切换。可能的实现将需要某种类似于“带迟滞比较器”（在电气工程中众所周知）的编程等效物，用于观察 ALS 数据流并根据预定义的亮度阈值自动切换样式。经过认真设计考虑和部分原型测试，发现在此类应用程序中这种自动控制功能是不必要的：“非理性繁荣”，即人为地过度扩展传感器用例，可能会导致持续的“样式抖动”，从而增加烦躁/眼睛刺激并降低整体用户体验，而非改善它。或者，样式选择功能被实现为简单的手动“单击”操作。

使用 Intel 的 AppUp 封装器 

核心应用程序 VOLTA-2013 最初是作为 HTML5 Web 应用程序开发的，利用 CSS3（样式）和 jQuery（功能）技术集，后来使用 Intel 的 AppUp 封装器转换为 Windows 桌面可安装应用程序。

历史

• HTML5 Web 应用程序 VOLTA-2011 已发布
• VOLTA-2011 已在新版 Apple iPad（又名 iPad 3）上测试。
• 工程计算器 VOLTA-2013 (v. 8.1.2) 已在 Intel AppUp 商店发布
• 应用程序扩展 Jobrica-2013 (v. 8.1.1.) 已在 Intel AppUp 商店发布
• VOLTA-814 完整版 (14.2.03) 已发布。