Spark Studio

Spark Studio提供编程功能，可以通过这款软件设计新的应用程序，可以在软件创建新的工程项目，软件界面提供非常多的项目参数设置，支持文本、主题、皮肤、字体、颜色、音频、网格模型、U程序、静态图片、合成图片、材质、控件样式、界面布局、小组件、弹出框、2D页面、3D场景等多种内容设计，为用户创建新的APP提供更多编辑方案，在设计阶段和运行时阶段,支持多种主题，支持热切换主题。主题包括皮肤所有内容,同时包括界面布局和画面迁移逻辑，针对某一业务逻辑功能组定义其数据属，数据属通常是单一的原始数值类型，支持为数据属做动画设计用以实现多屏互动的效果。一般来说需要在ViewMode插件中为数据属提供数据源，数据属的值也可以在IDE中设置!

相关推荐	软件介绍	下载地址
Spark Studio官方版v2.6.3	SpakSudi提供编程功能，可以通过这款软件设计新的应用程序，可以在软件创建新的工程项目，软件界面提供非常多的项目参数设置，支持文本、主题、皮肤、字体、颜色、音频、网格模型、U程序、静态图片、合成图片、材质、控件样式、界面布局、小组件、弹出框、2D页…	点击查看
spaCy官方版v3.0.4	spaCy提供句法解析功能，您可以在软件上分析语法，可以建立多种变压器管道分析语法，让软件可以准确解析句法，对于优化项目非常有帮助，软件提供非常多的组件进行分析，您可以根据自己的项目配置管道组件建立可视化的分析方案，建立神经网络模型分析方案，将分析流…	点击查看
Serverless Framework官方版v2.37.0	lessfamewk是一款开发框架，用户可以通过这款框架将自己的业务上云，优化云端资源的管理和配置方案，方便企业部署自己的业务，您可以在云端管理、COS和CAM等服务项目，让各种业务服务内容联动起来，为企业部署新的程序、部署新的网站、部署新的Seveless应用提…	点击查看

Spark Studio软件功能

SparkStudio基于HMI开发的工程化思想而设计的。

SparkStudio是连接产品定义、设计、实现、测试的桥梁。将UI/UX团队的线框图设计、视觉设计、高低保真原型设计;软件团队的功能开发;测试团队的产品功能测试等集于一身。

SparkStudio强大的2D/3D画面、特效、动画、状态机、多屏互动、画面流程图等系统功能使得设计人员无需采取其他的工具便可达到专业效果。用SparkSource设计的作品可以直接运行在车机端, 真正的跨越平台和工具限制，实现设计即所得。

Spark Studio软件特色

轻松管理资源

轻松设计2D场景

轻松设计3D场景

轻松设计2D/3D混合场景

轻松设计特效

轻松编写U Shader程序

轻松设计动画

轻松设计画面内状态

轻松设计焦点行为

轻松配置元素属

轻松配置VUI系统

轻松配置字符串表

轻松配置弹出框显示行为

轻松设计画面迁移图

轻松编写功能说明文档

轻松制作合成图片

轻松查找并同步资源

轻松使用仪表模拟器

轻松使用智能驾驶模拟器

轻松使用车辆设置模拟器

轻松完成自动化测试

Spark Studio安装方法

1、打开spark_studio_installer.exe软件直接安装，接受软件协议

2、提示软件的安装地址C:Pgram Files (x86)SparkStudio

3、提示软件的快捷方式名字

4、提示软件的安装准备界面，点击install

5、软件的安装进度条，等待主程序安装结束

6、Spark Studio安装完毕，点击完成启动软件

7、请先安装OpenSSL 1.1.0版本。 (不建议安装更高版本)

将OpenSSL bin路径添加到系统环境路径，如下所示：

C： Pgram Files(x86) OpenSSL-Win32 bin

8、启动SparkStudio后，在主菜单栏中，如果菜单项的底部边框连接在一起，请打开SparkStudio / studio / resource_package / config.xml文件，并将“ rectangle_offset_y”属设置为0或1。

Spark Studio教程

SparkStudio – 新手引导

本教程详细介绍如何一步步来创建一个“Hello World”应用。

第1步：创建“hello_world”工程

通过【文件】->【新建】工具按钮启动工程创建向导。如图所示，选择某个工程根目录，输入“hello_world”作为APP的名称， 输入“theme_deflt”作为主题名称，输入“skin_deflt”作为皮肤名称。按“确定”按钮，完成新工程的创建工作。查看文件系统，在“hello_world”目录中已经包含了完整的工程结构。 “doc”目录，存放项目中的各种文档; “pject”目录，存放andid、linux、mac、qnx、windows等环境的工程配置文件; “res”目录，存放该APP的所有资源文件; “src”目录，存放该APP需要的ViewModel插件代码，用于跟中间件API相连接; “target”目录，存放ViewModel代码编译后的二进制结果; “bin”目录，存放在运行时被使用的ViewModel插件。

第2步：配置输出窗口的个数和尺寸

用文本编辑器打开“hello_world/config.xml”文件，在“suce_set”节点中，每一行“suce”配置，表示一个输出窗口。 针对车载智能驾驶舱多显示器或多输出区域的情况，可以适当增加“suce”行的数量，通过“display_id”和“suce_id”来标识，并配置输出窗口的位置和尺寸。本示例工程采用默认值。

第3步：配置界面语言和文本

SparkSource支持在设计时和运行时热切换语言。如图所示，工程创建向导默认创建了英文界面语言环境。 选择“文本”标签页，点击顶部的“+”按钮，在弹出框中输入“HELLO_WORLD”作为文本串的名字，输入“Hello World”字符串值，点击“确定”按钮完成作。 类似作，添加“SHOW”为名字的文本串，输入“Show”字符串值。

第4步：配置主题和皮肤

SparkSource支持在设计时和运行时热切换皮肤和主题。皮肤包含视觉和听觉相关的元素; 主题除了包含皮肤外，还包括界面布局和画面迁移关系。如图所示，工程创建向导已经完成了主题和皮肤的创建工作。

第5步：配置字体和颜色

SparkSource支持任意数量的字库文件。如图所示，工程创建向导默认导入了文泉阁微米黑字库。 选择“字体”标签页，点击顶部的“+”按钮，在弹出框中输入“FONT_INFO”作为字体的名字，选择字库文件，将颜色调整为白色，点击“确定”按钮完成作。 选择“颜色”标签页，点击顶部的“+”按钮，在弹出框中输入“BUTTON_NORMAL”作为颜色的名字，将颜色调整为绿色，点击“确定”按钮完成作。 类似作，添加“BUTTON_PRESS”为名字的颜色，配色为蓝色

第6步：配置数据属和业务命令

业务场景是连接HMI和中间件的桥梁。选择“数据属”标签页，点击顶部的“+”按钮，在弹出框中输入“app_info”作为数据属的名字，点击“确定”按钮完成作。 选择“业务命令”标签页，点击顶部的“+”按钮，在弹出框中输入“show”作为业务命令的名字，点击“确定”按钮完成作。

第7步：创建页面

选择“页面”标签页，点击顶部的“+”按钮，在弹出框中输入“home”作为页面的名字，勾选“作为启动画面”，点击“确定”按钮完成作。 双击“home”条目，在2D场景编辑器中打开该页面。

第8步：在页面中添加按钮控件和文本控件

在“场景浏览器”中， 选择“home”节点，点击【2D场景】->【按钮】，在弹出框中输入“show”。 选择“show”节点，点击【2D场景】->【单行文本】，在弹出框中输入“caption”。 选择“home”节点，点击【2D场景】->【单行文本】，在弹出框中输入“app_info”。 此时场景结构如图所示。

选择“home”节点，在“属编辑器”中，展开“布局”属组，设置“控件宽度”为1280，“控件高度”为720;展开“背景”属组，设置“颜色值”为灰色。

选择“show”节点，展开“布局”属组，设置“横坐标”为100，“纵坐标”为100，“控件宽度”为200，“控件高度”为50;展开“背景色”属组，设置“正常态”为“BUTTON_NORMAL”，设置“按压态”为“BUTTON_PRESS”。在“事件”面板中，为“短按释放”绑定“show”业务命令。

选择“caption”节点，展开“布局”属组，设置“控件宽度”为200，“控件高度”为50;展开“表现”属组，设置“字体”为“FONT_INFO”;展开“数据内容”属组，设置“文本编号”为“SHOW”。

选择“app_info”节点，展开“布局”属组，设置“横坐标”为100，“纵坐标”为200，“控件宽度”为200，“控件高度”为50;展开“表现”属组，设置“字体”为“FONT_INFO”;展开“数据内容”属组，为“文本值”绑定“app_info”数据属。

第9步：创建弹出框(页面)

选择“弹出框”标签页(如果您当前使用的SparkStudio是Basic Version，请选择“页面”)，点击顶部的“+”按钮，在弹出框中输入“hello”作为弹出框的名字，点击“确定”按钮完成作。 双击“hello”条目，在2D场景编辑器中打开该弹出框(页面)。

第10步：在弹出框(页面)中添加文本控件

在“场景浏览器”中，选择“hello”节点，点击【2D场景】->【单行文本】，在弹出框中输入“info”。此时场景结构如图所示。

选择“hello”节点，在“属编辑器”中，展开“布局”属组，设置“控件宽度”为300，“控件高度”为300，“宽度缩放比例”为0.1，“高度缩放比例”为0.1;展开“背景”属组，设置“颜色值”为亮灰色;展开“边框”属组，设置“颜色值”为白色;展开“显示”属组，设置“模态弹出框”为“false”。

选择“info”节点，展开“布局”属组，设置“横坐标”为50，“纵坐标”为125，“控件宽度”为200，“控件高度”为50;展开“表现”属组，设置“字体”为“FONT_INFO”;展开“数据内容”属组，设置“文本编号”为“HELLO_WORLD”。

第11步：为弹出框(页面)设计动画

在“场景浏览器”的“场景动画”面板中， 选择“hello”节点，点击【场景动画】->【组合动画】，在弹出框中输入“scale_amt”。 选择“scale_amt”节点，点击【场景动画】->【数值动画】，在弹出框中输入“scale_width”。 选择“scale_amt”节点，点击【场景动画】->【数值动画】，在弹出框中输入“scale_height”。 选择“scale_width”节点，点击【场景动画】->【控件对象】，在弹出框中选择“hello”节点和它的属“布局-宽度缩放比例”。 选择“scale_height”节点，点击【场景动画】->【控件对象】，在弹出框中选择“hello”节点和它的属“布局-高度缩放比例”。 此时场景结构如图所示。

选择“scale_width”节点，展开“参数”属组，设置“起始值-宽度缩放比例”为0.1，“终止值-宽度缩放比例”为1.0。

选择“scale_height”节点，展开“参数”属组，设置“起始值-高度缩放比例”为0.1，“终止值-高度缩放比例”为1.0。

在“场景浏览器”的“场景结构”面板中，选择“hello”节点，展开“动画”属组，设置“入场动画”为“scale_amt”。

第12步：设计页面到弹出框(页面)的画面迁移

在“Pject Explorer”中选择“画面迁移图”标签页，点击“编辑画面迁移图”按钮，启动画面迁移图编辑器。 点击【画面迁移】->【页面】，在弹出框中选择“home”，点击“确定”后，将“home”画面状态添加到画面迁移编辑器中，拖动它到其他位置。 点击【画面迁移】->【弹出框】(【页面】)，在弹出框中选择“hello”。 选择“home”状态，从桔圆点拖拽箭头到“hello”状态来创建迁移线。选择该迁移线，点击【画面迁移】->【+】按钮，在弹出框中，“类型”选择“控件事件”，选择“show”节点， 在“名称”中选择“short-release”，点击“确定”完成触发器的设置工作。在“属编辑器”中展开“行为”属组，设置“离场方式”为“retain”。如果您当前使用的SparkStudio是Basic Version， 则再创建从“hello”到“home”的迁移线，设置“入场方式”为“nothing”。

第13步：模拟运行

保存工程后，点击【项目】->【运行】按钮，启动“hello_world”应用。尝试点击“Show”按钮，看看效果如何。

第14步：在ViewModel中添加代码和编译

用文本编辑器打开“hello_world/src/ViewModel/CImpViewModel.cpp”文件，按下图示例添加代码。实际上，在此处位置可以调用中间件的API，完成业务功能的调用。

编译Windows版本，使用VisualStudio2008，打开“hello_world/pject/windows/ViewModel.sln”，编译出release版本。

编译linux_ubuntu_x11版本，切换到“hello_world/pject/linux/ubuntu_x11”目录，使用“make_release.bat”来编译出release版本。

编译linux目标机器版本，用文本编辑器打开“hello_world/pject/linux/user_version/config”文件，配置好“SPARK_LIB_NAME”和“BUILD_CHAIN_ROOT”和“SYSROOT”后，使用“make_release”来编译出release版本。

编译QNX版本，用文本编辑器打开“hello_world/pject/qnx/user_version/config.bat”文件，配置好“SPARK_LIB_NAME”和“BUILD_CHAIN_ROOT”后，如果目标机器是QNX7.0 位，则需要修改该文件中的“QNX_HOST”和“QNX_TARGET”，以及“makefile”文件中的和“CPP”，使用“make_release.bat”来编译出release版本。

编译Andid版本，使用AndidStudio，打开“hello_world/pject/andid/ndk”，编译出debug版本。

第15步：在目标环境中部署

复制“hello_world/target/release/windows/ViewModel.dll”文件到“hello_world/bin/windows”目录。

复制“hello_world/target/release/linux/user_version/ViewModel.dll”文件到“hello_world/bin/linux”目录。如果是部署在ubuntu环境里，则复制“linux/ubuntu_x11/ViewModel.dll”文件

复制“hello_world/target/release/qnx/user_version/ViewModel.dll”文件到“hello_world/bin/qnx”目录。

保持目录结构关系，将“hello_world/config.xml”、“hello_world/pject.xml”、“hello_world/hello_world/app.xml”等文件， “hello_world/hello_world/bin”、“hello_world/hello_world/res”等目录，放置到目标机器的文件系统中。对于Andid机器，作为测试，放到“/sdcard/spark/sample”目录中，“sample”目录替代最外层的“hello_world”目录， 同时，需要修改app.xml文件中的“view_model_file”节点的“path_andid”属值，将它指向实际的libViewModel.so的安装位置。

最后将“SparkReleaselib”目录中相应OS上的运行库文件部署到目标机器上，通过SparkPlayer来加载“hello_world”应用，“hello_world”的根目录作为它的命令行参数。

第16步：恭喜完成

回到SparkStudio，点击【项目】->【运行】按钮，启动“hello_world”应用。尝试点击“Show”按钮，看看现在效果如何，画面上是否多了点内容。