HTML5 and now a Mobile LiveCode IDE I hear you all cry!…..well sort of 🙂

Before you continue reading this post, I have to make you aware that this is not a mobile IDE that we are working on in-house but a personal fun project (proof of concept) that I have started and like to dive into whenever I get a spare moment (which is very rarely).

There has been much discussion of a LiveCode IDE that runs on mobile devices. This would not only take the creation of LiveCode applications into the mobile space, but would also open up LiveCode to a whole new market.

So without further ado, I give you my LiveCode Mobile IDE!!! (Trumpets Please!)

Tada!

Now I know that my graphic design skills are nothing to shout home about, but all of that can come later. Getting the functionality done first is key.

So let me give you a brief overview of what I’ve accomplished so far:

• basic tools palette (buttons, fields and image objects)
• basic property inspector (name, label, visible & opaque properties)
• Ability to show and hide these palettes by clicking on relevant yellow sections
• Creation of control by dragging them from tools palette
• Move Controls after they have been placed
• Edit scripts of controls by long pressing the control
• Edit a field contents by double clicking control
• Works across supported platforms (minus server)

After I started scripting the above, I soon began to realise the sheer quantity of elements there are within the desktop IDE and what I have achieved so far is only the tip of the iceberg.

So let me explain how I accomplished some of this but please be gentle with my code as it can get quite unruly at points 😀

Palette Creation

The first step was creating both the tools and property inspector palettes. These are just grouped controls of graphics objects.  To show and hide the palettes, I simply applied a move command to show/hide them depending on their location. Below is the tools palette show/hide script

on mouseUp
if the loc of group "toolsPallete" is 54,360 then
move group "toolsPallete" to -36,360 in 100 milliseconds else
move group "toolsPallete" to 54,360 in 100 milliseconds
end if
end mouseUp

When working with the property inspector palette it knows which control to assign properties to via a global variable which contains the last selected control name. The name, label, visible & opaque properties of the control can then be assigned accordingly.

Creating Controls

Next is onto creating controls. There are various ways that this could be achieved, but I decided to go with a mouseDown on the card script. This meant that all scripts for this action are in one place. I then defined what happened during the mouseDown by checking if the mouse was within the rect of the tools palette via the mouseLoc function. The name of a created control is defined by the amount of pre-existing controls of that type currently present on the card.

local sMouseDown
global gControlName
-- creates controls from tools pallet group
on mouseDown
if the mouseLoc is within the rect of group "toolsPallet" then
put empty into gControlName
put true into sMouseDown
if the mouseloc is within the rect of graphic "buttonGraphic" then
lock screen
create button "button"
set the loc of it to the mouseLoc
set the name of it to (the short name of it && (the number of buttons of this card +1))
set the label of it to "button"
put the name of it into gControlName
set the script of gControlName to the cGrabMe of this stack
unlock screen
end if
if the mouseloc is within the rect of graphic "fieldGraphic" then
lock screen
create field "field"
set the loc of it to the mouseLoc
set the name of it to (the short name of it && (the number of fields of this card +1))
put the name of it into gControlName
set the backGroundColor of it to White
set the script of gControlName to the cFieldScript of this stack
unlock screen
end if
if the mouseloc is within the rect of graphic "imageGraphic" then
lock screen
create image "image"
set the loc of it to the mouseLoc
set the text it to the text of image "ic.png"
set the name of it to (the short name of it && (the number of images of this card +1))
put the name of it into gControlName
set the script of gControlName to the cGrabMe of this stack
unlock screen
end if
end if
end mouseDown
--allows created controls to be moved
on mouseMove
if sMouseDown is true then
if gControlName is not empty then
set the loc of gControlName to the mouseLoc
end if
end if
end mouseMove
--stops controls sticking to mouse loc
on mouseRelease
setInspector
put false into sMouseDown
end mouseRelease
on mouseUp
mouseRelease
end mouseUp
-- sets inspector values to control values
on setInspector
if gControlName is not empty then
put gControlName && "ID" && the id of gControlName into field "nameLabel" of group "inspectorGroup"
put the short name of gControlName into field "nameField" of group "inspectorGroup"
if "image" is not in gControlName then
put the label of gControlName into field "labelField" of group "inspectorGroup"
end if
end if
end setInspector
on updateScript pScript
set the script of gControlName to pScript
end updateScript

A few other things are happening on the card’s script.

• Setting the property inspector values when a control is created or when a control is moved
• Stop control sticking to the mouse position

Custom properties of the stack contain control scripts which deal with re-positioning the control and launching the script editor. The following is the script applied to a button:

global gControlName, gScript
local sMouseLocation
on mouseDown
put the mouseLoc into sMouseLocation
put the name of me into gControlName
setinspector
grab me
end mouseDown
on mouseStillDown
if the mouseLoc is sMouseLocation then
put the script of me into gScript
go to card "scriptEditor"
end if
end mouseStillDown

Script Editor

The script editor can be accessed by long pressing (mouseStillDown) on any create control. When a user does this, the script editor card is opened and the script of the control is shown.

You can then edit the script, hit the apply button and it takes you back to the main card where the control’s script should update automatically.

global gControlName, gScript
on mouseUp
put field "codeEditor" into tScript
go card "canvas"
send "updateScript tScript" to card "canvas"
end mouseUp

So there you have it, a very basic mobile IDE 🙂 . As I mentioned previously, there is still a lot of work to do and it will take some time for it to progress into more advance stages of development. (If there were only more hours in the day…)

I hope you enjoyed this post and for those who are interested, here is a link to the current version of the IDE. Please feel free to experiment with it and if you’re up for the challenge, add more features to it.

http://techsupport.on-rev.com/lcMobileEditor.zip

Let us know how you get on or if you have any other feedback in the comments below.

read more

With only 2 months to go until the Kick off of RunRevLive 2014 in San Diego, things are hotting up in the office with requests and interest, so I thought I would take a moment to answer your Top 10 Frequently Asked Questions…

Q.1: I booked a Premium / Budget Ticket – which nights are included in my overnight stay?  

A.1: In either Premium (Manchester Grand Hyatt) or Budget (The Embassy Suites) the Check In & Out days are the same. Check-In is Monday 1^st September with Check-Out on Friday 5^th September.  

Q.2: My travel In/Out of the San Diego requires me to stay an extra night(s), how do I book these please? 

A.2: Please book these directly though us, to ensure you do not need to change rooms and that you are included in our Preferential Rate & Group Booking Block. 

Please use the links below and select the multiple(s) of nights required. Once your Order has been confirmed, please email JoJo  to confirm required additional date(s): 

Embassy Suites:

https://livecode.com/store/conference/runrevlive14-budget-xtranight

Manchester Grand Hyatt:  

https://livecode.com/store/conference/runrevlive14-premium-xtranight 

Q.3: I booked Ticket only, but would now like to add Accommodation – is this possible? 

A.3: Why yes, of course! Please follow the steps as above and remember to confirm your Check-In & Check-Out dates by emailing JoJo.

Q.4: I am attending the Community Day but would like to stay overnight, is this possible? 

A.4: Again yes, of course – Please follow the steps in A.2 and all will be taken care of for you! 

Q.5: I am attending RunRevLive in San Diego, what is included in my Ticket? 

A.5: Whether you buy a Community Day Ticket or a 4-Day Pass, you can be sure of being well looked after. We start each day with Tea, Coffee, Juice & Snacks and keep you energised in between sessions with Morning & Afternoon Breaks as well as an informal Lunch.  

WiFi is available in the Conference area and we have both a dedicated Customer Services Representative and Conference Host to look after you and assist throughout. 

 We also have our Networking Evening on Tuesday 2^nd September, where you have the chance to meet with all the other Speakers and Attendees.. Plus (of course) the LiveCode Team. 

Q.6: Is the cost of WiFi included in the Hotel Rooms? 

A.6: For those of you staying at the Manchester Grand Hyatt, yes there is Complimentary WiFi in each Room booked with our Block Group Booking. 

If you are a guest at the Embassy Suites, we have negotiated a 50% Discount for all our Block Booked Attendees.  

Q.7: I have never been to San Diego, what is it like? 

 A.7: San Diego is the 8^th largest City in the USA and the 2^nd largest in California. Situated to the South of Los Angeles and adjacent to the Mexican Border, it as a warm and pleasant climate, with average September Temperature of Highs 77 & Lows 66 – That’s 25-19 Degrees C for us Europeans! 

San Diego International Airport is well serviced for both Domestic & International Flights and is only a 10 minute car journey away from the Conference Venue.

Q.8: If we’re not staying onsite, are there plenty of places to eat & drink? 

 A.8: Goodness yes. The ‘Gaslamp Quarter’ is a 16.5 block historical area in Downtown San Diego, which is a 5-10 minute walk from the front of the Manchester Grand Hyatt. Here you’ll find a selection of bars and eateries to suit all tastes and budgets. 

Wanted somewhere a little more on the water? Not to worry, Seaport Village is located directly to the back of the Hotel, running adjacent to the Harbour and Marina area. Offering a selection of Cafes and Restaurants, this area is also a perfect little shopping village, open from 10am – 10pm daily. Many of the local tours and attractions have a drop off / collection point here also.  

Q.9: I am thinking of bringing my Family or Partner with me. Is this possible and will they be bored whilst I attend the Conference sessions?  

A.9: Of course they are welcome! There is no additional cost for spouses sharing a room, however there may be if you decide to bring the whole family along. Not to worry, we have negotiated amazing discounted rates, so if you think you’d like to make this a mini-break, please email JoJo and she can help you plan your trip.

 As to will they be bored? Not. At. All. Please see my answers below to Questions 10! 

Q.10: I see there is “Free Time” on Friday afternoon and some evenings, any suggestions on what to do? 

A.10: This is one thing I loved about San Diego, the amount there is to do within the immediate vicinity. 

Want to pop over and look at the Old Town, Coronado *and* Balboa Park, but a little pushed for time? How about the Hop-On/Hop-Off Trolley Tour?  A great way to see the city and have your very own voiced guided tour. 

Fancy a ball game? PETCO Park houses the San Diego Padres and we’re sure there will be a game on whilst your in town!  

 Love Big Boats? How about the USS Midway Aircraft Carrier & Museum? Even better, this one is a 15 minute wander from the Conference venue along the Seaport Promenade. (There’s even a Pedi-Cab option to save your feet for the Midway itself). 

 

Add to all of this Jet Ski’s, Beaches, a Zoo and the Mexican / Little Italy areas and you are spoilt for choice. 

However, it wouldn’t be fair if I didn’t also point out the Top Gun factor. Yes, that iconic 80’s Film was filmed and set here in San Diego and Coronado Island. 

Don’t believe me? Check out this great article marking the highlights from the film 

And if you’re a die-hard fan (like me) how about a stop off at Kansas City BBQ. Opposite the Conference venue (2 minutes walk from the main front doors) and you can be transported into the film itself. Go On.. I dare you to try the piano!

 

Stop Press!. Q 11 I can’t be there in person, is there another way of taking part?

Yes! We’ve just announced the Simulcast – live streaming of this event. Get the Membership Pledge and view the whole proceedings from the comfort of your armchair!

read more

Things are running smoothly regarding the update of the player object. In this post I will briefly describe what has been done so far.

The first step was the refactoring of the MCPlayer related code. Formerly, the MCPlayer class used ifdefs in most functions, based on whether it was using the ‘platform player’, ‘quicktime’, or was on Linux. Now, MCPlayer is split into two classes in separate files (player-legacy.cpp/.h and player-platform.cpp/.h). The former is the pre-platform API version; the latter the platform API version. This made it easier to update the platform-player version to use its own controller.

The next step was to implement a custom controller bar. For the reasons described in the previous blog post for Multimedia on Mac OS, we had to implement our own controller. After some discussion, and some research on the appearance of modern video controllers, we are almost there! Below is a preview of the current, and probably final version.

 

 

Because some users may not like this color, we thought it is better to make it customisable. So we added some properties to the player object. In fact, we tied in some existing properties that were not used for the player object. For example, the hiliteColor. For the player object, the hiliteColor is the color of the played area, as well as the color of the volume area in the volume popup window. It is also the color of a button background when this button is clicked. So, if you don’t like the purple color that is set by default, all you have to do is add a new button (or just type in the message box) with the following code:

on mouseUp

set the hiliteColor of player 1 to red 

end mouseUp 

The result is the following:

  

In the player object, you can also set the foreColor, which is the color of the selected area, i.e. the color of the area between the selection handles. This is dark grey by default.

 

 

Modify the code in your button, to change both the hiliteColor and the foreColor: 

on mouseUp

set the hiliteColor of player 1 to “127,255,0″

set the foreColor of player 1 to “106,156,56”

end mouseUp

The result is the following:

 

Finally, we had to move from Quicktime/QTKit to AVFoundation. This transition is now done, and the new player object seems to work perfectly with the AVFoundation APIs. Some tweaks have still to be done, in order to ensure similar (or at least as similar as possible) behaviour with the old Quicktime/QTKit controller. Next, and final step as far as the player object is concerned, is to test it thoroughly and fix any bugs that may arise.

read more