Intro to building DigitalMods
DigitalMods(TM) are the way in which you can add additional functionality to StreetDeck. They are essentially a combination of visual basic script and skin files that compose kind of a sub-application in StreetDeck. They are very similar to Macros in Microsoft Office but instead of forms and scripts you have skins and scripts. DigitalMods can only be created in the StreetDeck development enviornment distributed with the application under StreetDeck | Tools | Development Enviornment. Scripts in DigitalMods can access the StreetDeck object model directly and respond to events from it.
Each DigitalMod is contained in its own project folder named after a GUID when it is created. Each DigitalMod project can contain multiple scripts. The scripts in each project can talk to StreetDeck and talk to each other, but cant talk to other projects. Additionally, there are 3 types of scripts that can be added to a script project, they are modules, overlays, and media managers, for a description of what these are just visit http://www.mp3car.com/vbulletin/digitalmods-scripts-api/67876-streetdeck-panel-windowing-system.html As of version 184.108.40.206 only modules are supported. Support for overlays will be added next and support for media managers the month after that.
Creating your First DigitalMod Tutorial
Create a New Project
To start creating your own DigitalMod, startup the development enviornment, then goto New | Script Project. This will create a project that will contain all the scripts used to create the DigitalMod.
Fill in Project Properties
The project will be initially empty. The properties bar on the right will contain various descriptive elements about your DigitalMod including the author, name, description, etc. that you should fill in immediatly after creating your new project.
Create a new scripted module
Once the project is created, you can add a new new scripted module to it, by goto to File | New | Scripted Module. Enter a unique name for the mdoule and it will create a blank script and skin for you to which you can add code and controls to respectively.
Add a Control
Before adding a control, you should make sure the module you want to add them to is selected in the treeview at the left. Find your project under Scripted Projects, then find the scripted module you just created and select it or one of the controls under. Now at the bottom left there should be a tab that says toolbox, switch to it, and find the button control. Double click on the button item and it will create a new button in your module. Now switch to design mode by going to Panels | Design Mode click on the new button you just added in the application window and notice the properties window is populated with the properties of the button. You can change the caption or any other available property of the button here. If you double click on the button (In design mode only), it should automatically add an event that is triggered when the button is clicked. Fill in the OnMouseClick event with the following text
Run the script
Function Button_OnMouseClick(x, y)
Module.MsgBox "Hello World", X & ", " & Y
Goto "Script Project | Start Project", make sure you are out of design mode first, then click on the newly added button and a message box should pop up with the text "Hello World" and the coordinates where the button was clicked.
Adding other events
Stop the script via Script Project | Stop Project. Notice the two combo boxes above the script window. The left combo box contains the names of all objects accessible to the script. Every time you add a new control, it will appear in this combo box. The right combo box contains all the events that correspond to the events generated by the object in the left combo box. To respond to a new event, simply choose one from the right combo and the event definition will be added to the script. For example, select Module from the left combo, then select OnRender from the right combo. The OnRender event is called upwards of 15 times per second depending on the frame rate of the application and redraws all screen elements every time it is called. Only rendering calls and very quick function calls should be called in this event. The OnRender event lets you draw elements directly on a module using the module's drawing functions. To demonstrate this add the following code to the OnRender event.
This will render a semi transparent red square at the horizontal center and y position 200 in the module. (NOTE: All coordinates in StreetDeck are in app coordinates eSMAppWidth (1024) and eSMAppHeight (768) meaning the coordinate 1024, 768 will always be at the bottom right of the screen regardless of the size of the actual window being rendered.).
module.RenderFilledRect app.GetSystemMetric(eSMAppWidth) / 2 - 100, 200, app.GetSystemMetric(eSMAppWidth) / 2 + 100, 400, RGB(255, 0, 0), .5
For an idea of what you can do with the different types of scripts here some ideas for some example projects, many of these will have multiple scripts and may not all be of scripts of the same type, (i.e. media managers, have overlays associated with them to display the play status, etc) but can more or less be categorized into the following list: You can implement any of the items in the module list right now with the 220.127.116.11 sdk, the others, not yet.
Google POI module
3D Satellite Tracking status module
An Offroad Navigation plugin
Speak different module names
Show speed at all times
Documentation for the StreetDeck Development Enviornment is still in development. To get started with making your own DigitalMods, you can startup the development enviornment and use the built-in intellisense and example projects.